:root{
  --bg:#0b0e14; --panel:#121821; --panel2:#0f141c; --border:#1e2733;
  --tx:#c9d3e0; --dim:#6b7688; --mut:#8b97a8;
  --green:#3fb950; --amber:#d29922; --red:#f85149; --blue:#58a6ff;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--tx);font:13px/1.5 -apple-system,"PingFang SC",system-ui,sans-serif}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
button{font-family:inherit}

/* top bar */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:linear-gradient(180deg,#0f151e,#0b0e14);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:12px}
.brand h1{font-size:15px;margin:0;font-weight:600;letter-spacing:.3px}
.live{display:inline-flex;align-items:center;gap:6px;font:11px/1 var(--mono);color:var(--green);border:1px solid #1c3226;background:#0d1a12;padding:4px 8px;border-radius:4px}
.live .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.meta{display:flex;align-items:center;gap:14px}
.summary{color:var(--mut);font-size:12px}
.summary b{color:var(--tx)}
.clock{color:var(--dim);font-size:12px}
.addbtn{background:#0e1a2e;color:#9dc1ff;border:1px solid #2b64c6;border-radius:5px;padding:5px 12px;font-size:12px;cursor:pointer}
.addbtn:hover{background:#12233d}

/* focus band */
.focus-band{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--panel2);border-bottom:1px solid var(--border);overflow-x:auto}
.focus-label{color:var(--amber);font-size:12px;white-space:nowrap;font-weight:600}
.focus-items{display:flex;gap:8px}
.focus-chip{display:flex;align-items:center;gap:7px;background:#0e1622;border:1px solid var(--border);border-radius:5px;padding:4px 9px;white-space:nowrap;cursor:pointer}
.focus-chip:hover{border-color:#2b3a4d}
.focus-chip .fid{color:var(--dim);font:11px/1 var(--mono)}
.focus-chip .ft{color:var(--tx);font-size:12px;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.focus-chip .fsc{color:#fff;font:12px/1 var(--mono);font-weight:700}
.focus-chip.pin{border-color:#5a2230;background:#180f13}

/* columns */
.columns{display:flex;gap:12px;padding:14px 16px;overflow-x:auto;align-items:flex-start;height:calc(100% - 98px)}
.col{flex:0 0 270px;background:var(--panel);border:1px solid var(--border);border-radius:8px;display:flex;flex-direction:column;max-height:100%}
.col-h{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-bottom:1px solid var(--border)}
.col-h .cname{font-size:12px;color:var(--mut);font-weight:600;letter-spacing:.5px}
.col-h .ccount{font:12px/1 var(--mono);color:var(--dim);background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:2px 8px}
.col-body{padding:8px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.col-empty{color:#3b4453;font-size:12px;text-align:center;padding:14px 0}

/* card */
.card{background:linear-gradient(180deg,#141c27,#111823);border:1px solid var(--border);border-left:3px solid var(--dim);border-radius:6px;padding:8px 10px;cursor:pointer;transition:border-color .15s}
.card:hover{border-color:#2b3a4d}
.card.b-fresh{border-left-color:var(--green)}
.card.b-warn{border-left-color:var(--amber)}
.card.b-soft{border-left-color:var(--red)}
.card.b-hard{border-left-color:var(--red);box-shadow:inset 3px 0 14px -7px var(--red)}
.c-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.c-id{display:flex;align-items:center;gap:6px;font:11px/1 var(--mono);color:var(--dim)}
.pindot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 6px var(--red)}
.c-score{font:17px/1 var(--mono);font-weight:700;color:var(--tx)}
.c-title{margin:4px 0 3px;font-size:13px;color:var(--tx);font-weight:500}
.c-reason{font:11px/1.5 var(--mono);color:var(--mut);display:flex;gap:6px;flex-wrap:wrap}
.c-reason .agg{color:var(--amber)} .c-reason .aggh{color:var(--red);font-weight:700}
.c-reason .sep{opacity:.35}
.c-meta{font:11px/1.4 var(--mono);color:var(--dim);margin-top:3px}
.c-next{margin-top:4px;font-size:12px;color:var(--blue)}
.c-ops{display:flex;gap:4px;margin-top:7px}
.c-ops button{flex:1;background:var(--panel2);color:var(--mut);border:1px solid var(--border);border-radius:4px;padding:3px;font:11px/1 var(--mono);cursor:pointer}
.c-ops button:hover{color:var(--tx);border-color:#2b3a4d}
.c-ops button.kill:hover{color:var(--red);border-color:#5a2230}

/* dialogs */
.dlg{background:var(--panel);color:var(--tx);border:1px solid #2b3a4d;border-radius:10px;padding:0;max-width:440px;width:92%}
.dlg::backdrop{background:rgba(4,7,12,.66)}
.dh{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.dh .dt{font-weight:600} .dh .did{font:11px/1 var(--mono);color:var(--dim)}
.db{padding:12px 14px}
.bd-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;font-family:var(--mono);font-size:12px}
.bd-row .lab{color:var(--mut);width:70px}
.bd-row .bar{flex:1;height:6px;background:var(--panel2);border-radius:3px;margin:0 10px;overflow:hidden}
.bd-row .bar i{display:block;height:100%;background:linear-gradient(90deg,#2b64c6,#58a6ff)}
.bd-row .val{color:var(--tx);width:52px;text-align:right}
.bd-total{display:flex;justify-content:space-between;padding:8px 0 4px;border-top:1px solid var(--border);margin-top:4px;font-family:var(--mono)}
.bd-total b{font-size:16px}
.pintag{color:var(--red);font:11px/1 var(--mono)}
.edit{margin-top:10px;border-top:1px solid var(--border);padding-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.edit label{font-size:11px;color:var(--mut);display:flex;flex-direction:column;gap:3px}
.edit input,.edit select{background:var(--panel2);color:var(--tx);border:1px solid var(--border);border-radius:4px;padding:5px;font-size:12px}
.edit .full{grid-column:1/3}
.edit .chk{flex-direction:row;align-items:center;gap:6px}
.dlg menu{display:flex;justify-content:flex-end;gap:8px;margin:0;padding:12px 14px;border-top:1px solid var(--border)}
.dlg menu button{background:var(--panel2);color:var(--mut);border:1px solid var(--border);border-radius:5px;padding:6px 14px;font-size:12px;cursor:pointer}
.dlg menu button.pri{background:#0e1a2e;color:#9dc1ff;border-color:#2b64c6}

/* view toggle + eisenhower */
.views{display:flex;gap:4px}
.vbtn{background:var(--panel);color:var(--mut);border:1px solid var(--border);border-radius:5px;padding:4px 11px;font-size:12px;cursor:pointer}
.vbtn.active{color:var(--tx);border-color:#2b64c6;background:#0e1a2e}
.eisen{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;padding:14px 16px;height:calc(100% - 98px)}
.cell{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:10px 12px;overflow-y:auto;display:flex;flex-direction:column}
.cell h3{font-size:12px;margin:0 0 8px;color:var(--mut);font-weight:600;letter-spacing:.5px;display:flex;justify-content:space-between;position:sticky;top:0}
.cell.q1{border-top:2px solid var(--red)} .cell.q1 h3 span:first-child{color:var(--red)}
.cell.q2{border-top:2px solid var(--amber)} .cell.q2 h3 span:first-child{color:var(--amber)}
.cell.q3{border-top:2px solid var(--blue)} .cell.q3 h3 span:first-child{color:var(--blue)}
.cell.q4{border-top:2px solid #2b3a4d} .cell.q4 h3 span:first-child{color:var(--dim)}
.mini{display:flex;align-items:center;gap:8px;padding:5px 4px;border-bottom:1px solid #161d27;cursor:pointer}
.mini:hover{background:#0e1622}
.mini .mid{font:11px/1 var(--mono);color:var(--dim)}
.mini .mt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.mini .ms{font:12px/1 var(--mono);font-weight:700;color:var(--tx)}

/* login */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:30px;width:300px;display:flex;flex-direction:column;gap:13px;box-shadow:0 10px 44px -14px #000}
.login-card .live{align-self:center}
.login-card h1{font-size:16px;margin:6px 0 0;text-align:center}
.lsub{color:var(--dim);font-size:12px;text-align:center;margin:0 0 4px}
.login-card input{background:var(--panel2);color:var(--tx);border:1px solid var(--border);border-radius:6px;padding:10px;font-size:14px}
.login-card input:focus{outline:none;border-color:#2b64c6}
.login-card button{background:#0e1a2e;color:#9dc1ff;border:1px solid #2b64c6;border-radius:6px;padding:10px;font-size:14px;cursor:pointer}
.login-card button:hover{background:#12233d}
.lerr{color:var(--red);font-size:12px;text-align:center;min-height:16px}