:root{
  --bg:#0f1420; --bg2:#151c2c; --panel:#1a2234; --panel2:#212b40;
  --line:#2a3550; --text:#e6ebf5; --muted:#93a0bd; --brand:#6d8cff; --brand2:#8b7bff;
  --ok:#3ecf8e; --warn:#f5b454; --err:#ff6b6b; --chipA:#6d8cff; --chipB:#8b7bff;
  --chipC:#3ecf8e; --chipD:#f5b454; --chipSYS:#93a0bd;
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#eef1f8; --bg2:#e6ebf6; --panel:#ffffff; --panel2:#f3f6fc;
    --line:#dbe2f0; --text:#1b2336; --muted:#5c6780; --shadow:0 10px 30px rgba(30,50,90,.12);
  }
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:15px}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.muted{color:var(--muted)}
.small{font-size:13px}
.hidden{display:none !important}
.err{color:var(--err);min-height:1.2em;font-size:14px}
.ok{color:var(--ok);min-height:1.2em;font-size:14px}
a{color:var(--brand);text-decoration:none}

/* buttons */
.btn{cursor:pointer;border:1px solid var(--line);background:var(--panel2);color:var(--text);
  padding:9px 14px;border-radius:10px;font-weight:600;font-size:14px;transition:.15s;display:inline-flex;
  align-items:center;gap:6px}
.btn:hover{border-color:var(--brand);transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));border:none;color:#fff}
.btn.danger{background:transparent;border-color:var(--err);color:var(--err)}
.btn.ghost{background:transparent}
.btn.block{width:100%;justify-content:center}
.btn.small{padding:6px 10px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* auth */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:radial-gradient(1200px 600px at 70% -10%, rgba(109,140,255,.25), transparent),var(--bg)}
.auth-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;width:100%;max-width:420px;box-shadow:var(--shadow)}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.brand .logo{font-size:30px}
.brand h1{margin:0;font-size:22px}
.brand.small{gap:8px}.brand.small .logo{font-size:22px}
.tabs{display:flex;gap:6px;margin-bottom:16px;background:var(--bg2);padding:5px;border-radius:12px}
.tab{flex:1;border:none;background:transparent;color:var(--muted);padding:9px;border-radius:9px;
  font-weight:600;cursor:pointer}
.tab.active{background:var(--panel);color:var(--text);box-shadow:var(--shadow)}
.form{display:flex;flex-direction:column;gap:13px}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}
.form input,.form textarea,.form select{background:var(--bg2);border:1px solid var(--line);color:var(--text);
  padding:11px 12px;border-radius:10px;font:inherit;font-weight:400}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--brand)}
.row{display:flex;gap:10px;align-items:center}

/* shell */
.shell{min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);
  background:var(--panel);position:sticky;top:0;z-index:5}
.spacer{flex:1}
.who{color:var(--muted);font-size:14px}
.pill{font-size:12px;padding:4px 10px;border-radius:999px;font-weight:600}
.pill.good{background:rgba(62,207,142,.15);color:var(--ok)}
.pill.bad{background:rgba(255,107,107,.15);color:var(--err)}
.layout{flex:1;display:grid;grid-template-columns:300px 1fr;min-height:0}
.sidebar{border-right:1px solid var(--line);padding:16px;background:var(--bg2);overflow:auto}
.side-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:18px 0 8px}
.research-list{display:flex;flex-direction:column;gap:8px}
.ritem{padding:11px 12px;border:1px solid var(--line);border-radius:11px;cursor:pointer;background:var(--panel)}
.ritem:hover{border-color:var(--brand)}
.ritem.active{border-color:var(--brand);box-shadow:0 0 0 2px rgba(109,140,255,.25)}
.ritem .t{font-weight:600;font-size:14px;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ritem .m{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}
.content{padding:22px;overflow:auto;min-width:0}

/* status dot */
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.s-running{background:var(--brand);box-shadow:0 0 0 3px rgba(109,140,255,.25);animation:pulse 1.4s infinite}
.s-completed{background:var(--ok)} .s-failed,.s-stopped{background:var(--err)}
.s-created{background:var(--muted)} .s-paused_rate_limit{background:var(--warn)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* welcome / panels */
.welcome,.panel{max-width:820px}
.panel.narrow{max-width:560px}
.steps{line-height:1.9;color:var(--muted)}
.steps b{color:var(--text)}

/* detail */
.detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.detail-head h2{margin:0 0 4px}
.detail-actions{display:flex;gap:8px;flex-shrink:0}
.stat-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:14px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.stat .k{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.stat .v{font-size:17px;font-weight:700}
.banner{padding:11px 14px;border-radius:11px;margin-bottom:14px;font-size:14px}
.banner.warn{background:rgba(245,180,84,.14);border:1px solid var(--warn);color:var(--warn)}
.banner.err{background:rgba(255,107,107,.12);border:1px solid var(--err);color:var(--err)}
.banner.ok{background:rgba(62,207,142,.12);border:1px solid var(--ok);color:var(--ok)}
.downloads{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;
  background:var(--panel);border:1px solid var(--line);padding:10px 14px;border-radius:12px}

/* timeline — left column: clickable list of turns; right column: step detail */
.timeline-wrap{display:grid;grid-template-columns:360px 1fr;gap:16px;min-height:0}
.timeline{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;overflow:auto;
  max-height:74vh}
#turns{display:flex;flex-direction:column;gap:8px}
.chip{font-size:11px;font-weight:700;padding:3px 8px;border-radius:7px;color:#0b1020;flex-shrink:0}
.chip.A{background:var(--chipA)}.chip.B{background:var(--chipB)}.chip.C{background:var(--chipC)}
.chip.D{background:var(--chipD)}.chip.SYS{background:var(--chipSYS)}
.turn{border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer;background:var(--bg2);
  display:flex;gap:10px;align-items:flex-start}
.turn:hover{border-color:var(--brand)}
.turn.active{border-color:var(--brand);box-shadow:0 0 0 2px rgba(109,140,255,.22)}
.turn .tt{font-weight:600;font-size:13px}
.turn .tm{font-size:11px;color:var(--muted);margin-top:3px;display:flex;gap:8px;align-items:center}
.turn .spin{width:10px;height:10px;border:2px solid var(--line);border-top-color:var(--brand);
  border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.turn-detail{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;overflow:auto;
  max-height:74vh}
.turn-detail .empty{display:grid;place-items:center;height:200px}
.td-head{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
/* collapsible step cards inside the right panel */
.steps{display:flex;flex-direction:column;gap:8px}
.step{border:1px solid var(--line);border-radius:10px;background:var(--bg2);overflow:hidden}
.step.open{border-color:var(--brand)}
.step-head{all:unset;box-sizing:border-box;width:100%;display:flex;gap:9px;align-items:center;
  padding:10px 12px;cursor:pointer}
.step-head:hover{background:rgba(109,140,255,.06)}
.step-head .caret{color:var(--muted);font-size:11px;transition:transform .15s;flex-shrink:0}
.step.open .step-head .caret{transform:rotate(90deg)}
.step-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step-body{display:none;padding:2px 14px 14px;border-top:1px solid var(--line)}
.step.open .step-body{display:block}
.td-sec{margin:14px 0}
.td-sec h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.md{line-height:1.6}
.md pre{background:var(--bg2);border:1px solid var(--line);padding:12px;border-radius:10px;overflow:auto;
  font-family:"JetBrains Mono",monospace;font-size:13px}
.md code{background:var(--bg2);padding:2px 5px;border-radius:5px;font-family:"JetBrains Mono",monospace;font-size:.9em}
.md pre code{background:none;padding:0}
.md table{border-collapse:collapse;width:100%;margin:10px 0}
.md th,.md td{border:1px solid var(--line);padding:6px 9px;text-align:left;font-size:14px}
.md h1,.md h2,.md h3{margin:14px 0 8px}
.md blockquote{border-left:3px solid var(--brand);margin:10px 0;padding:4px 12px;color:var(--muted)}

/* modal */
.modal-back{position:fixed;inset:0;background:rgba(5,8,16,.6);display:grid;place-items:center;z-index:20;padding:20px}
.modal{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  width:100%;max-width:460px;max-height:90vh;overflow:auto;box-shadow:var(--shadow)}
.modal.narrow{max-width:380px}
.modal h2{margin:0 0 4px}
.modal-x{position:absolute;top:12px;right:14px;width:30px;height:30px;line-height:1;padding:0;
  border:1px solid var(--line);background:var(--bg2);color:var(--muted);border-radius:8px;font-size:20px;cursor:pointer}
.modal-x:hover{border-color:var(--err);color:var(--err)}
.row.between{justify-content:space-between}
.sep{border:none;border-top:1px solid var(--line);margin:18px 0 14px}
.opt-card{border:1px solid var(--line);background:var(--bg2);border-radius:12px;padding:12px 14px;margin:10px 0;
  display:flex;flex-direction:column;gap:8px}
.opt-card .opt-head{font-size:15px}

@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .sidebar{display:none}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .timeline-wrap{grid-template-columns:1fr}
}