:root{
  --bg:#0E1116; --surface:#161A21; --raised:#1E232C; --border:#2A2F3A;
  --text:#E8EAED; --muted:#9AA3AF; --accent:#3FB68B;
  --st-notstarted:#6B7280; --st-researching:#6AA9FF; --st-building:#F0B429;
  --st-testing:#9B87F5; --st-awaiting:#FF9F43; --st-blocked:#F0554E; --st-live:#3FB68B;
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.28);
  --sans:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'Space Mono',ui-monospace,Menlo,monospace;
}
html[data-theme="light"]{
  --bg:#F6F7F9; --surface:#FFFFFF; --raised:#FFFFFF; --border:#E3E6EA;
  --text:#171A1F; --muted:#5B636E; --accent:#1E8E63;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 10px 28px rgba(16,24,40,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Header */
header{
  display:flex;align-items:center;gap:16px;padding:14px 22px;
  border-bottom:1px solid var(--border);background:var(--surface);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.logo{
  width:34px;height:34px;border-radius:9px;flex:none;
  background:linear-gradient(135deg,var(--accent),#2f8f6c);
  display:grid;place-items:center;font-family:var(--mono);font-weight:700;
  color:#04150E;font-size:15px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}
.brand h1{font-size:18px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.brand .sub{font-size:12px;color:var(--muted);font-family:var(--mono)}
.spacer{flex:1}
.conn{
  display:none;align-items:center;gap:7px;font-size:12px;color:var(--st-awaiting);
  font-family:var(--mono);padding:5px 11px;border-radius:var(--r-pill);
  border:1px solid var(--border);background:var(--bg);
}
.conn.show{display:inline-flex}
.conn .pulse{width:8px;height:8px;border-radius:50%;background:var(--st-awaiting);animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.searchbox{
  display:flex;align-items:center;gap:8px;background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-pill);
  padding:7px 14px;color:var(--muted);min-width:160px;
}
.searchbox input{background:none;border:none;outline:none;color:var(--text);font-family:var(--sans);font-size:13px;width:100%}
.searchbox svg{flex:none}
.toggle{
  display:flex;align-items:center;gap:8px;background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-pill);padding:6px;cursor:pointer;color:var(--muted);
}
.toggle button{background:none;border:none;cursor:pointer;color:inherit;width:30px;height:26px;border-radius:var(--r-pill);display:grid;place-items:center}
.toggle button.on{background:var(--raised);color:var(--accent);box-shadow:var(--shadow)}
html[data-theme="light"] .toggle button.on{background:var(--bg)}

/* Layout */
.shell{display:grid;grid-template-columns:380px 1fr;height:calc(100vh - 63px)}
.list-pane{border-right:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;min-height:0}
.summary{padding:16px 18px 12px;border-bottom:1px solid var(--border)}
.summary h2{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:12px;font-weight:600}
.counts{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;padding:5px 10px;
  border-radius:var(--r-pill);background:var(--bg);border:1px solid var(--border);
  cursor:pointer;transition:transform .1s,border-color .15s;user-select:none;
}
html[data-theme="light"] .chip{background:#F1F3F5}
.chip:hover{transform:translateY(-1px)}
.chip.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.chip .dot{width:8px;height:8px;border-radius:50%;flex:none}
.chip .n{font-family:var(--mono);font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.list-scroll{overflow-y:auto;flex:1;padding:8px}
.list-scroll::-webkit-scrollbar{width:9px}
.list-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:9px}
.row-wrap{position:relative}
.row{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:12px 13px;border-radius:var(--r-md);cursor:pointer;border:1px solid transparent;transition:background .12s;
}
.row:hover{background:var(--bg)}
html[data-theme="light"] .row:hover{background:#F1F3F5}
.row.selected{background:var(--raised);border-color:var(--border);box-shadow:inset 3px 0 0 var(--accent)}
.num{
  font-family:var(--mono);font-size:12px;font-weight:700;color:var(--muted);
  width:26px;height:26px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--border);flex:none;font-variant-numeric:tabular-nums;
}
html[data-theme="light"] .num{background:#F1F3F5}
.row .meta{min-width:0}
.row .name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .plat{font-size:12px;color:var(--muted);font-family:var(--mono)}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:4px 9px;border-radius:var(--r-pill);white-space:nowrap;border:1px solid transparent}
.badge .dot{width:7px;height:7px;border-radius:50%}
.badge.mini{padding:4px;width:22px;height:22px;justify-content:center}
.badge.mini span{display:none}

/* Detail */
.detail-pane{overflow-y:auto;min-height:0}
.detail-pane::-webkit-scrollbar{width:10px}
.detail-pane::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}
.detail-inner{max-width:820px;margin:0 auto;padding:34px 40px 60px}
.back{display:none;align-items:center;gap:6px;background:none;border:none;color:var(--muted);font-family:var(--sans);font-size:14px;cursor:pointer;margin-bottom:16px}
.dt-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:8px}
.dt-num{font-family:var(--mono);font-weight:700;font-size:15px;color:var(--accent);background:var(--surface);border:1px solid var(--border);padding:8px 12px;border-radius:var(--r-md);flex:none}
.dt-title{flex:1;min-width:0}
.dt-title h2{font-size:34px;line-height:1.1;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
.dt-title .plat{color:var(--muted);font-family:var(--mono);font-size:13px;margin-top:6px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow)}
.card .label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:7px}
.card .val{font-size:15px;overflow-wrap:anywhere}
.card .val.empty{color:var(--muted);font-style:italic}
.icon{width:14px;height:14px;color:var(--accent)}
.open-box{
  grid-column:1/-1;border-radius:var(--r-lg);padding:4px;margin-top:4px;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(120deg,var(--st-awaiting),var(--st-blocked)) border-box;
  border:1.5px solid transparent;box-shadow:var(--shadow);
}
.open-box .oh{display:flex;align-items:center;gap:9px;padding:14px 16px 6px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.open-box .oh .cnt{font-family:var(--mono);background:var(--st-awaiting);color:#1a1206;border-radius:var(--r-pill);padding:1px 9px;font-size:12px}
.open-item{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;margin:4px 8px;background:var(--bg);border-radius:var(--r-md);border:1px solid var(--border)}
html[data-theme="light"] .open-item{background:#F7F8FA}
.open-item:last-child{margin-bottom:10px}
.tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 8px;border-radius:var(--r-sm);flex:none}
.tag.approval{background:rgba(255,159,67,.16);color:var(--st-awaiting)}
.tag.blocked{background:rgba(240,85,78,.16);color:var(--st-blocked)}
.open-item .otext{font-size:14px;padding-top:2px;overflow-wrap:anywhere}
.open-empty{grid-column:1/-1;display:flex;align-items:center;gap:10px;color:var(--muted);padding:14px 16px;border:1px dashed var(--border);border-radius:var(--r-lg);font-size:14px;background:var(--surface)}
.tl{margin-top:26px}
.tl h3{font-size:18px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:9px}
.steps{position:relative;padding-left:26px}
.steps::before{content:"";position:absolute;left:7px;top:4px;bottom:4px;width:2px;background:var(--border)}
.step{position:relative;padding:0 0 18px 0}
.step::before{content:"";position:absolute;left:-26px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--surface);border:2px solid var(--accent)}
.step::after{content:"";position:absolute;left:-21px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.step .txt{font-size:14px}
.step .n{font-size:11px;color:var(--muted);font-family:var(--mono);margin-bottom:2px}
.tl-empty{color:var(--muted);font-size:14px;padding:10px 0}
.placeholder{height:100%;display:grid;place-items:center;color:var(--muted);text-align:center;padding:40px}
.placeholder .pic{font-family:var(--mono);font-size:44px;opacity:.35;margin-bottom:14px}

/* Error / loading states */
.fullmsg{height:100%;display:grid;place-items:center;text-align:center;padding:40px}
.fullmsg .box{max-width:420px}
.fullmsg .pic{font-size:38px;margin-bottom:14px}
.fullmsg h2{font-size:20px;margin-bottom:8px}
.fullmsg p{color:var(--muted);font-size:14px;margin-bottom:16px}
.fullmsg button{background:var(--accent);color:#04150E;border:none;border-radius:var(--r-md);padding:9px 16px;font-family:var(--sans);font-weight:600;font-size:14px;cursor:pointer}

@media (max-width:860px){
  .shell{grid-template-columns:1fr;height:calc(100vh - 63px)}
  .detail-pane{display:none;background:var(--bg)}
  .cards{grid-template-columns:1fr}
  body.viewing-detail .list-pane{display:none}
  body.viewing-detail .detail-pane{display:block}
  body.viewing-detail .back{display:inline-flex}
  .detail-inner{padding:22px 18px 50px}
  .dt-title h2{font-size:26px}
}
@media (max-width:520px){.brand .sub{display:none}.searchbox{display:none}}