:root { color-scheme: dark; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #0b1120; color: #e2e8f0; display: flex; flex-direction: column; min-height: 100%;
}
a { color: #818cf8; }
.bar { display: flex; align-items: center; gap: .75rem; padding: .55rem 1rem;
       background: #0f172a; border-bottom: 1px solid rgba(255,255,255,.08); flex: 0 0 auto; }
.brand { font-weight: 650; letter-spacing: -.01em; }
.spacer { flex: 1; }
main { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* generic */
.wrap { max-width: 900px; margin: 0 auto; padding: 2rem 1.25rem; width: 100%; }
.card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
        border-radius: 14px; padding: 1.25rem; margin-bottom: 1rem; }
h1 { font-size: 1.4rem; margin-bottom: .5rem; } h2 { font-size: 1.05rem; margin: .25rem 0 .6rem; }
.muted { color: #94a3b8; } .small { font-size: .85rem; }
pre.md, pre.code { white-space: pre-wrap; word-break: break-word; background: #0d1526;
   border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: .9rem; font-size: .82rem;
   line-height: 1.45; overflow:auto; max-height: 48vh; }
pre.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
textarea { width: 100%; min-height: 120px; background: #0d1526; color: #e2e8f0; border-radius: 10px;
   border: 1px solid rgba(255,255,255,.12); padding: .7rem; font: inherit; resize: vertical; }
input[type=text], input[type=password] { width: 100%; background:#0d1526; color:#e2e8f0;
   border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:.6rem; font:inherit; }
label { display:block; font-size:.85rem; color:#cbd5e1; margin:.6rem 0 .25rem; }
button, .btn { cursor: pointer; border: 0; border-radius: 10px; padding: .55rem 1rem; font: inherit;
   font-weight: 600; background: #6366f1; color: #fff; }
button.secondary { background: rgba(255,255,255,.08); color:#e2e8f0; }
.row { display:flex; gap:.6rem; align-items:center; flex-wrap: wrap; }
table { width:100%; border-collapse: collapse; font-size:.9rem; }
th, td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid rgba(255,255,255,.07); }
.pill { font-size:.72rem; padding:.1rem .5rem; border-radius:999px; background:rgba(255,255,255,.08); }

/* stage progress */
.steps { display:flex; gap:.4rem; flex-wrap:wrap; padding:.5rem 1rem; background:#0f172a;
   border-bottom:1px solid rgba(255,255,255,.06); }
.step { font-size:.75rem; padding:.2rem .55rem; border-radius:999px; color:#94a3b8; background:rgba(255,255,255,.05);}
.step.active { background:#6366f1; color:#fff; } .step.done { color:#34d399; }
.step.nav { cursor:pointer; } .step.nav:hover { background:rgba(255,255,255,.14); color:#e2e8f0; }

/* runner layout */
.runner { flex:1; min-height:0; display:grid; grid-template-columns: 1fr 360px; gap: 0; }
.runner.nochat { grid-template-columns: 1fr; }
.main-col { min-width:0; overflow:auto; padding: 1.1rem 1.25rem; }
.chat-col { border-left:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; min-height:0; background:#0c1326;}
.chat-log { flex:1; overflow:auto; padding: .9rem; display:flex; flex-direction:column; gap:.6rem; }
.msg { padding:.55rem .7rem; border-radius:12px; font-size:.88rem; line-height:1.4; white-space:pre-wrap; }
.msg.user { background:#1e293b; align-self:flex-end; max-width:90%; }
.msg.assistant { background:rgba(99,102,241,.14); align-self:flex-start; max-width:95%; }
.chat-in { display:flex; gap:.4rem; padding:.6rem; border-top:1px solid rgba(255,255,255,.08); }
.chat-in textarea { min-height:42px; max-height:120px; }
.embeds { display:flex; gap:.5rem; height:60vh; }
.embeds iframe { flex:1; width:100%; height:100%; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:#1e1e1e;}
.savebar { font-size:.78rem; color:#64748b; }

/* drag-to-reorder backlog */
ol.sortable { list-style:none; display:flex; flex-direction:column; gap:.4rem; counter-reset:rank; }
.sortitem { counter-increment:rank; display:grid; grid-template-columns:1.4rem auto auto 1fr auto;
  gap:.6rem; align-items:center; background:#0d1526; border:1px solid rgba(255,255,255,.1);
  border-radius:10px; padding:.5rem .7rem; cursor:grab; }
.sortitem::before { content:counter(rank); color:#64748b; font-size:.8rem; text-align:right; }
.sortitem.dragging { opacity:.45; border-color:#6366f1; }
.sortitem .grip { color:#475569; cursor:grab; }
.sortitem .sid { font-weight:600; color:#a5b4fc; font-size:.82rem; }
.sortitem .sitem { font-size:.9rem; }
.sortitem .snotes { font-size:.76rem; color:#94a3b8; text-align:right; }
@media (max-width:700px){ .sortitem{ grid-template-columns:1.4rem auto 1fr; } .sortitem .snotes{ display:none; } }
.scorebox { display:flex; align-items:baseline; gap:.5rem; }
.score { font-weight:700; font-size:1.1rem; }
@media (max-width: 820px){ .runner{ grid-template-columns:1fr; } .chat-col{ border-left:0; border-top:1px solid rgba(255,255,255,.08);} .embeds{ flex-direction:column; height:auto; } .embeds iframe{ height:50vh; } }

/* full-screen coding workspace (implement stage) */
body.fullscreen { height:100vh; overflow:hidden; }
.workspace { flex:1; min-height:0; display:flex; flex-direction:column; }
.wstoolbar { display:flex; align-items:center; gap:.5rem; padding:.4rem .8rem; background:#0f172a;
  border-bottom:1px solid rgba(255,255,255,.06); flex:0 0 auto; flex-wrap:wrap; }
.wstoolbar .seg { display:flex; background:rgba(255,255,255,.05); border-radius:9px; padding:2px; }
.wstoolbar .seg button { all:unset; cursor:pointer; padding:.25rem .65rem; border-radius:7px; font-size:.8rem; color:#94a3b8; }
.wstoolbar .seg button.active { background:#6366f1; color:#fff; }
.wstoolbar button.secondary { padding:.3rem .6rem; font-size:.82rem; }
.wstage { flex:1; min-height:0; display:flex; }
.wstage iframe { flex:1; width:100%; height:100%; border:0; background:#1e1e1e; min-width:0; }
.wdivider { flex:0 0 6px; cursor:col-resize; background:rgba(255,255,255,.06); }
.wdivider:hover, body.ws-dragging .wdivider { background:#6366f1; }
body.ws-dragging iframe { pointer-events:none; }
body[data-wsview="editor"] .ws-browser, body[data-wsview="editor"] .wdivider { display:none; }
body[data-wsview="browser"] .ws-editor,  body[data-wsview="browser"] .wdivider { display:none; }
body[data-wsview="editor"] .ws-editor, body[data-wsview="browser"] .ws-browser { flex:1 1 100% !important; }
.notesdrawer { position:fixed; left:0; right:0; bottom:0; max-height:48vh; overflow:auto; z-index:50;
  background:#0c1326; border-top:1px solid rgba(255,255,255,.14); padding:1rem 1.25rem;
  box-shadow:0 -12px 30px rgba(0,0,0,.45); }
.notesdrawer[hidden] { display:none; }