/* assets/app.css — TTRAISite */
:root{
  --bg:#0f172a; --sur:#151e2e; --sur2:#1c2a3f;
  --bor:#243047; --bor2:#2e3d56;
  --blue:#1a56db; --blue2:#1e40af;
  --text:#e2e8f0; --t2:#7a8fa8; --t3:#3d5068;
  --green:#10b981; --red:#ef4444; --amber:#f59e0b;
  --r:8px; --r2:5px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);font-size:13px;height:100vh;display:flex;overflow:hidden}

/* ── SIDEBAR ── */
aside{width:200px;min-width:200px;background:var(--sur);border-right:1px solid var(--bor);display:flex;flex-direction:column}
.logo{padding:16px 14px;border-bottom:1px solid var(--bor);display:flex;align-items:center;gap:9px}
.logo-icon{width:28px;height:28px;background:var(--blue);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;flex-shrink:0}
.logo-name{font-size:14px;font-weight:600}
.logo-sub{font-size:10px;color:var(--t3);margin-top:1px}
nav{padding:10px 8px;flex:1}
.nl{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;padding:0 7px;margin:10px 0 4px}
.ni{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--r2);color:var(--t2);cursor:pointer;font-size:12px;transition:.15s}
.ni:hover,.ni.on{background:var(--sur2);color:var(--text)}
.ni.on{color:var(--blue)}
.ni i{width:13px;text-align:center;font-size:12px}
.sb-foot{padding:10px 8px;border-top:1px solid var(--bor)}
.srv{background:var(--sur2);border:1px solid var(--bor);border-radius:var(--r2);padding:7px 9px;display:flex;align-items:center;gap:7px}
.sdot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}
.sname{font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slabel{font-size:10px;color:var(--t3)}

/* ── MAIN ── */
main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{height:50px;background:var(--sur);border-bottom:1px solid var(--bor);display:flex;align-items:center;padding:0 18px;gap:8px;flex-shrink:0}
.tb-title{font-size:14px;font-weight:600;flex:1}
.tb-title span{font-size:11px;color:var(--t2);font-weight:400;margin-left:6px}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:var(--r2);font-size:12px;font-weight:500;cursor:pointer;border:none;font-family:'Inter',sans-serif;transition:.15s;white-space:nowrap}
.b-ghost{background:transparent;color:var(--t2);border:1px solid var(--bor2)}
.b-ghost:hover{background:var(--sur2);color:var(--text)}
.b-blue{background:var(--blue);color:#fff}
.b-blue:hover{background:var(--blue2)}
.b-green{background:var(--green);color:#fff}
.b-green:hover{background:#059669}
.b-sm{padding:5px 9px;font-size:11px}

/* ── STEPS ── */
.steps{background:var(--sur);border-bottom:1px solid var(--bor);display:flex;padding:0 18px;flex-shrink:0}
.st{display:flex;align-items:center;gap:6px;padding:10px 12px 8px;font-size:12px;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s;user-select:none}
.st.on{color:var(--blue);border-color:var(--blue)}
.st.done{color:var(--green)}
.stn{width:17px;height:17px;border-radius:50%;background:var(--sur2);font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center}
.st.on .stn{background:rgba(26,86,219,.2);color:var(--blue)}
.st.done .stn{background:rgba(16,185,129,.15);color:var(--green)}

/* ── CONTENT ── */
.content{flex:1;overflow-y:auto}
.pane{display:none}
.pane.on{display:block}
.wrap{max-width:620px;margin:0 auto;padding:18px;display:flex;flex-direction:column;gap:12px}

/* ── CARD ── */
.card{background:var(--sur);border:1px solid var(--bor);border-radius:var(--r)}
.ch{padding:10px 14px;border-bottom:1px solid var(--bor);display:flex;align-items:center;gap:7px}
.chi{width:24px;height:24px;background:var(--sur2);border-radius:var(--r2);display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:11px;flex-shrink:0}
.ct{font-size:12px;font-weight:500;flex:1}
.cb{padding:12px 14px;display:flex;flex-direction:column;gap:10px}

/* ── FORM ── */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.fg{display:flex;flex-direction:column;gap:3px}
label{font-size:11px;color:var(--t2);font-weight:500}
input,textarea,select{background:var(--sur2);border:1px solid var(--bor);border-radius:var(--r2);color:var(--text);font-size:12px;padding:6px 9px;font-family:'Inter',sans-serif;transition:.15s;width:100%}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(26,86,219,.12)}
input::placeholder,textarea::placeholder{color:var(--t3)}
textarea{resize:vertical;min-height:52px}
select option{background:var(--sur2)}
.sub-row{display:flex}
.sub-fix{background:var(--bg);border:1px solid var(--bor);padding:6px 8px;font-size:11px;color:var(--t3);white-space:nowrap}
.sub-pre{border-right:none;border-radius:var(--r2) 0 0 var(--r2)}
.sub-suf{border-left:none;border-radius:0 var(--r2) var(--r2) 0}
.sub-row input{border-radius:0;flex:1}
.color-row{display:flex;gap:6px;align-items:center}
.color-row input[type=color]{width:32px;height:30px;padding:2px;cursor:pointer;border-radius:var(--r2)}
.color-row input[type=text]{flex:1;font-size:11px}

/* ── AUTOFILL ── */
.af-bar{background:rgba(26,86,219,.07);border:1px solid rgba(26,86,219,.2);border-radius:var(--r);padding:11px 14px;display:flex;align-items:center;gap:12px}
.af-txt{flex:1}
.af-title{font-size:12px;font-weight:500}
.af-sub{font-size:11px;color:var(--t2);margin-top:1px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:4px 11px;border-radius:20px;font-size:11px;font-weight:500;cursor:pointer;border:1px solid var(--bor2);color:var(--t2);background:var(--sur2);transition:.15s;font-family:'Inter',sans-serif}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip.on{background:rgba(26,86,219,.15);border-color:rgba(26,86,219,.35);color:#60a5fa}

/* ── ACCORDION ── */
.acc{display:flex;flex-direction:column;gap:5px}
.ai{background:var(--sur2);border:1px solid var(--bor);border-radius:var(--r2);overflow:hidden;transition:border .15s}
.ai.open{border-color:rgba(26,86,219,.5)}
.ah{display:flex;align-items:center;gap:8px;padding:9px 11px;cursor:pointer;user-select:none}
.ah:hover{background:rgba(255,255,255,.02)}
.grip{color:var(--t3);font-size:10px;flex-shrink:0}
.pdot{width:5px;height:5px;border-radius:50%;flex-shrink:0;transition:background .3s}
.pn{font-size:12px;font-weight:500;flex:1}
.pshort{font-size:11px;color:var(--t3);max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chev{color:var(--t3);font-size:10px;transition:.2s;flex-shrink:0}
.ai.open .chev{transform:rotate(180deg)}
.ab{display:none;padding:10px 12px;border-top:1px solid var(--bor);background:rgba(0,0,0,.12)}
.ai.open .ab{display:block}
.pa-foot{display:flex;align-items:center;gap:6px;margin-top:9px;padding-top:9px;border-top:1px solid var(--bor)}
.ibt{background:transparent;border:none;color:var(--t3);cursor:pointer;font-size:11px;display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border-radius:4px;transition:.15s;font-family:'Inter',sans-serif}
.ibt:hover{background:var(--bor);color:var(--text)}
.ibt.del:hover{background:rgba(239,68,68,.12);color:var(--red)}
.add-btn{display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px dashed var(--bor2);border-radius:var(--r2);background:transparent;color:var(--t2);cursor:pointer;font-size:12px;font-family:'Inter',sans-serif;transition:.15s;width:100%}
.add-btn:hover{border-color:var(--blue);color:var(--blue)}

/* ── PREVIEW ── */
.pv-wrap{display:flex;height:calc(100vh - 112px)}
.pv-side{width:190px;min-width:190px;background:var(--sur);border-right:1px solid var(--bor);padding:10px;overflow-y:auto;display:flex;flex-direction:column}
.pv-side-lbl{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px;padding:0 3px}
.pv-pi{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:var(--r2);cursor:pointer;font-size:12px;color:var(--t2);transition:.15s;margin-bottom:2px}
.pv-pi:hover{background:var(--sur2);color:var(--text)}
.pv-pi.on{background:rgba(26,86,219,.1);color:#60a5fa}
.pv-pi .pd{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.pv-pi .ps{margin-left:auto;color:var(--green)}
.pv-main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.pv-top{padding:9px 14px;border-bottom:1px solid var(--bor);display:flex;align-items:center;gap:8px;background:var(--sur);flex-shrink:0}
.pv-cur{font-size:12px;color:var(--t2)}
.pv-cur strong{color:#60a5fa}
.pv-body{flex:1;overflow:hidden;padding:14px;background:var(--bg);display:flex;flex-direction:column}
.pv-bot{padding:8px 14px;border-top:1px solid var(--bor);background:var(--sur);display:flex;align-items:center;gap:8px;flex-shrink:0}
.pv-hint{font-size:11px;color:var(--t2);flex:1}
.pv-hint strong{color:#60a5fa}
.pv-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--t2);border:1px dashed var(--bor2);border-radius:var(--r);background:var(--sur)}

/* ── DEPLOY ── */
.ds{display:flex;align-items:center;gap:7px;padding:6px 2px;font-size:11px;color:var(--t3);border-bottom:1px solid var(--bor)}
.ds:last-child{border:none}
.si{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;flex-shrink:0}
.si-p{background:var(--bor);color:var(--t3)}
.si-d{background:rgba(16,185,129,.15);color:var(--green)}
.si-a{background:rgba(26,86,219,.15);color:#60a5fa}
.si-e{background:rgba(239,68,68,.15);color:var(--red)}
.step-tm,.regen-btn{font-size:10px;color:var(--t3);font-family:monospace;flex-shrink:0}
.regen-btn{color:#60a5fa;cursor:pointer;font-family:'Inter',sans-serif;background:transparent;border:none;padding:2px 6px;border-radius:3px}
.regen-btn:hover{background:var(--sur2)}
.pb{background:var(--bor);border-radius:3px;height:3px;overflow:hidden}
.pf{height:100%;background:linear-gradient(90deg,var(--blue),#3b82f6);border-radius:3px;transition:width .4s}
.pt{font-size:10px;color:var(--t3);margin-top:3px;font-family:monospace}
.result-card{background:var(--sur2);border:1px solid rgba(16,185,129,.3);border-radius:var(--r);padding:16px}

/* ── MODAL ── */
.mo{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(2px)}
.md{background:var(--sur);border:1px solid var(--bor2);border-radius:var(--r);width:400px;overflow:hidden}
.mh{padding:12px 16px;border-bottom:1px solid var(--bor);display:flex;align-items:center;gap:8px}
.mt{font-size:13px;font-weight:600;flex:1}
.mb{padding:16px;display:flex;flex-direction:column;gap:10px}
.mf{padding:11px 16px;border-top:1px solid var(--bor);display:flex;justify-content:flex-end;gap:7px}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.tag{padding:3px 9px;border-radius:20px;font-size:11px;cursor:pointer;border:1px solid var(--bor2);color:var(--t2);background:var(--sur2);transition:.15s}
.tag:hover,.tag.on{background:rgba(26,86,219,.15);border-color:rgba(26,86,219,.3);color:#60a5fa}

/* ── NOTIF ── */
.nf{position:fixed;bottom:16px;right:16px;background:var(--sur2);border:1px solid var(--bor2);border-radius:var(--r);padding:10px 14px;display:flex;align-items:center;gap:8px;font-size:12px;z-index:200;animation:si .18s ease;min-width:220px;box-shadow:0 4px 20px rgba(0,0,0,.4)}
@keyframes si{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}

::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-thumb{background:var(--bor2);border-radius:3px}