:root {
  --bg:#08080A; --surface:#0F1318; --card:#141920; --card-hi:#1A2232;
  --accent:#00C9A7; --accent-glow:rgba(0,201,167,0.35); --accent-dim:rgba(0,201,167,0.12);
  --warn:#F6AD55; --warn-dim:rgba(246,173,85,0.12);
  --danger:#F05252; --danger-dim:rgba(240,82,82,0.12);
  --blue:#4FC3F7;
  --text:#F0F4F8; --muted:#7A8A9A; --faint:#2E3D4E;
  --border:rgba(255,255,255,0.06); --border-hi:rgba(0,201,167,0.28);
  --ff-display:'Fraunces',Georgia,serif;
  --ff-body:'DM Sans',system-ui,sans-serif;
  --ff-mono:'JetBrains Mono',monospace;
  --nav-h:56px;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{font-family:var(--ff-body);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:2px}

.nav{position:sticky;top:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 4vw;background:rgba(8,8,10,0.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-logo{display:flex;align-items:baseline;gap:8px;font-family:var(--ff-mono);font-size:0.78rem;letter-spacing:0.28em;text-transform:uppercase}
.nav-logo .sep{color:var(--faint)}
.nav-logo strong{font-weight:500;color:var(--text)}
.nav-logo .accent{color:var(--accent)}
.nav-back{font-family:var(--ff-mono);font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.nav-back:hover{color:var(--accent)}

.page{max-width:1200px;margin:0 auto;padding:40px 4vw 80px}
.page-title{font-family:var(--ff-display);font-size:2rem;font-weight:400;letter-spacing:-0.01em;margin-bottom:4px}
.page-sub{font-family:var(--ff-mono);font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted)}

.sec{margin-top:40px}
.sec-title{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-family:var(--ff-mono);font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted)}
.sec-title::before{content:"";width:12px;height:1px;background:var(--accent)}
.sec-title .actions{margin-left:auto;font-family:var(--ff-mono);font-size:0.65rem;letter-spacing:0.12em}

.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px 22px;transition:border-color .2s}
.card-hi{border-color:var(--border-hi)}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:1fr 1fr 1fr}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* Machine card */
.machine{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px 24px;display:flex;flex-direction:column;gap:14px}
.machine.primary{border-color:var(--border-hi)}
.machine-head{display:flex;align-items:center;gap:14px}
.machine-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;transition:all .3s var(--ease-out)}
.machine-dot.running{background:var(--accent);box-shadow:0 0 14px var(--accent-glow)}
.machine-dot.stopped{background:#4A5568}
.machine-dot.busy{background:var(--warn);animation:pulse 1.4s ease-in-out infinite}
.machine-dot.unknown{background:var(--muted)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.55;transform:scale(0.85)}}
.machine-title{flex:1;min-width:0}
.machine-role{font-family:var(--ff-mono);font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.machine-name{font-family:var(--ff-display);font-size:1.4rem;font-weight:500;letter-spacing:-0.01em}
.machine-status{font-family:var(--ff-mono);font-size:0.75rem;color:var(--muted);margin-top:2px}
.machine-actions{display:flex;gap:6px;flex-shrink:0}

.btn{font-family:var(--ff-mono);font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;padding:8px 14px;border-radius:5px;border:1px solid var(--border);background:transparent;color:var(--text);transition:all .2s}
.btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.btn:disabled{opacity:0.4;cursor:not-allowed}
.btn-primary{background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:500}
.btn-primary:hover:not(:disabled){background:#00D9B3;border-color:#00D9B3;color:var(--bg)}
.btn-danger{border-color:var(--danger-dim);color:var(--danger)}
.btn-danger:hover:not(:disabled){border-color:var(--danger);color:var(--danger);background:var(--danger-dim)}
.btn-ghost{padding:6px 10px;font-size:0.7rem}

/* Mode switcher cards */
.mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.mode-cards{grid-template-columns:1fr}}
.mode-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px 18px;cursor:pointer;transition:border-color .2s,background .2s;display:flex;align-items:flex-start;gap:14px;user-select:none}
.mode-card:hover{border-color:var(--border-hi);background:var(--card-hi)}
.mode-card.active{border-color:var(--accent);background:var(--accent-dim)}
.mode-card-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;margin-top:3px;background:var(--muted);transition:background .2s,box-shadow .2s}
.mode-card.active .mode-card-dot{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}
.mode-card-title{font-family:var(--ff-mono);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text);margin-bottom:4px;display:flex;align-items:center;gap:8px}
.mode-card-sub{font-size:0.78rem;color:var(--muted);line-height:1.5}
/* Prompt version bar */
.prompt-versions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--border)}
.prompt-versions-label{font-family:var(--ff-mono);font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
.prompt-select{font-family:var(--ff-mono);font-size:0.78rem;padding:6px 28px 6px 10px;background:var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%237A8A9A' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>") no-repeat right 10px center;border:1px solid var(--border);border-radius:5px;color:var(--text);outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;min-width:180px;transition:border-color .15s}
.prompt-select:hover,.prompt-select:focus{border-color:var(--border-hi)}

/* Segmented toggle (used for SAM variant switcher) */
.seg-toggle{display:inline-flex;border:1px solid var(--border);border-radius:6px;overflow:hidden;flex-shrink:0;background:var(--surface)}
.seg-btn{font-family:var(--ff-mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;padding:7px 14px;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:color .15s,background .15s}
.seg-btn:hover:not(:disabled):not(.active){color:var(--text);background:var(--card-hi)}
.seg-btn + .seg-btn{border-left:1px solid var(--border)}
.seg-btn.active{background:var(--accent-dim);color:var(--accent);cursor:default}
.seg-btn:disabled{cursor:wait;opacity:0.5}

.mode-badge-pill{font-family:var(--ff-mono);font-size:0.58rem;letter-spacing:0.08em;padding:2px 7px;border-radius:3px}
.mode-badge-pill.def{background:var(--accent-dim);color:var(--accent)}
.mode-badge-pill.warn{background:var(--warn-dim);color:var(--warn)}
.mode-badge-pill.ok{background:var(--accent-dim);color:var(--accent)}

/* kv list */
.kv-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 24px}
.kv{display:flex;flex-direction:column;gap:2px;font-size:0.85rem}
.kv-k{font-family:var(--ff-mono);font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}
.kv-v{font-family:var(--ff-mono);font-size:0.8rem;color:var(--text);word-break:break-all}
.badge{display:inline-block;padding:2px 7px;border-radius:3px;font-size:0.6rem;letter-spacing:0.08em}
.badge-ok{background:var(--accent-dim);color:var(--accent)}
.badge-warn{background:var(--warn-dim);color:var(--warn)}
.badge-err{background:var(--danger-dim);color:var(--danger)}

.subcard{border-top:1px solid var(--border);padding-top:12px;margin-top:6px}
.subcard-label{font-family:var(--ff-mono);font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}

/* stats */
.stat-label{font-family:var(--ff-mono);font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted)}
.stat-value{font-family:var(--ff-display);font-size:1.7rem;font-weight:500;margin-top:6px;letter-spacing:-0.01em}
.stat-value.danger{color:var(--danger)}
.stat-value.ok{color:var(--accent)}
.stat-sub{font-family:var(--ff-mono);font-size:0.7rem;color:var(--muted);margin-top:2px}

/* Chart */
.bar-chart{position:relative;margin-top:16px;display:flex;gap:8px}
.bar-yaxis{display:flex;flex-direction:column;justify-content:space-between;padding-bottom:22px;flex-shrink:0;width:36px}
.bar-ylabel{font-family:var(--ff-mono);font-size:0.58rem;color:var(--muted);text-align:right;line-height:1}
.bar-main{flex:1;position:relative;display:flex;flex-direction:column}
.bar-grid-area{position:relative;flex:1}
.bar-gridlines{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.bar-gridline{width:100%;border-top:1px dashed var(--border)}
.bar-gridline:last-child{border-top:1px solid var(--border-hi)}
.bar-row{display:flex;align-items:flex-end;gap:5px;height:180px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:0;height:100%;justify-content:flex-end;cursor:default}
.bar-amt{font-family:var(--ff-mono);font-size:0.62rem;color:var(--text);text-align:center;white-space:nowrap;margin-bottom:4px;line-height:1.2}
.bar-amt.zero{color:var(--border-hi)}
.bar{width:88%;border-radius:3px 3px 0 0;transition:height .5s cubic-bezier(.4,0,.2,1),background .2s;cursor:default}
.bar.has-cost{background:var(--accent-dim);border-top:2px solid var(--accent)}
.bar.has-cost:hover{background:var(--accent-glow)}
.bar.today{background:rgba(99,179,237,.2);border-top:2px solid var(--accent);outline:1px solid var(--accent);outline-offset:-1px}
.bar.today:hover{background:rgba(99,179,237,.32)}
.bar.zero-cost{background:transparent;border:1px dashed var(--border);border-bottom:none;opacity:.6}
.bar-footer{display:flex;gap:5px;margin-top:6px}
.bar-day{font-family:var(--ff-mono);font-size:0.6rem;letter-spacing:0.03em;color:var(--muted);flex:1;text-align:center}
.bar-day.today{color:var(--accent);font-weight:600}

/* Timeline */
.tl-row{display:grid;grid-template-columns:96px 16px 50px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:0.82rem}
.tl-row:last-child{border-bottom:none}
.tl-time{font-family:var(--ff-mono);font-size:0.7rem;color:var(--muted)}
.tl-dot{width:8px;height:8px;border-radius:50%;justify-self:center}
.tl-dot.ok{background:var(--accent)}
.tl-dot.warn{background:var(--warn)}
.tl-dot.err{background:var(--danger)}
.tl-dot.neutral{background:var(--muted)}
.tl-tag{font-family:var(--ff-mono);font-size:0.58rem;letter-spacing:0.1em;padding:1px 5px;border-radius:3px;border:1px solid var(--border)}
.tl-tag.gpu{color:var(--warn);border-color:var(--warn-dim)}
.tl-tag.cpu{color:var(--accent);border-color:var(--border-hi)}
.tl-type{font-family:var(--ff-mono);font-size:0.76rem}
.tl-detail{font-family:var(--ff-mono);font-size:0.68rem;color:var(--muted)}

/* Conn rows */
.conn{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-family:var(--ff-mono);font-size:0.72rem;color:var(--muted)}
.conn-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:10px;display:inline-block}

.skel{background:linear-gradient(90deg,var(--card) 25%,var(--card-hi) 50%,var(--card) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:4px;height:14px;width:70%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.loading{color:var(--muted);font-family:var(--ff-mono);font-size:0.75rem}

/* Identification log */
.id-row{display:grid;grid-template-columns:80px 40px 1fr auto auto;gap:10px 12px;align-items:start;padding:9px 0;border-bottom:1px solid var(--border);font-size:0.82rem}
.id-row:last-child{border-bottom:none}
.id-time{font-family:var(--ff-mono);font-size:0.68rem;color:var(--muted);white-space:nowrap;padding-top:2px}
.id-mode{font-family:var(--ff-mono);font-size:0.56rem;letter-spacing:0.1em;text-transform:uppercase;padding:2px 6px;border-radius:3px;border:1px solid;text-align:center;white-space:nowrap;margin-top:1px}
.id-mode.cpu{color:var(--accent);border-color:var(--border-hi)}
.id-mode.gpu{color:var(--warn);border-color:var(--warn-dim)}
.id-fish-wrap{display:flex;flex-direction:column;overflow:hidden;min-width:0}
.id-fish{font-family:var(--ff-mono);font-size:0.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.id-fish.ok{color:var(--text)}
.id-fish.err{color:var(--danger);font-size:0.72rem}
.id-models{font-family:var(--ff-mono);font-size:0.6rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.id-ms{font-family:var(--ff-mono);font-size:0.68rem;color:var(--muted);text-align:right;white-space:nowrap;padding-top:2px}
.id-from{font-family:var(--ff-mono);font-size:0.68rem;color:var(--muted);text-align:right;white-space:nowrap;padding-top:2px}
@media(max-width:640px){.id-row{grid-template-columns:70px 36px 1fr auto}.id-from{display:none}}

.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border-hi);padding:12px 20px;border-radius:6px;font-family:var(--ff-mono);font-size:0.78rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .25s var(--ease-out)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}
.err-box{background:var(--danger-dim);border:1px solid var(--danger);color:var(--danger);padding:8px 12px;border-radius:5px;font-family:var(--ff-mono);font-size:0.7rem;margin-top:8px}

/* Tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:32px}
.tab-btn{font-family:var(--ff-mono);font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;
  padding:10px 18px;border:none;background:none;color:var(--muted);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ── Utility classes — replace repeated inline style blocks ──────────────── */
.eyebrow{font-family:var(--ff-mono);text-transform:uppercase;color:var(--muted);display:block}
.eyebrow-xs{font-size:0.6rem;letter-spacing:0.12em}
.eyebrow-sm{font-size:0.62rem;letter-spacing:0.14em}
.eyebrow-md{font-size:0.7rem;letter-spacing:0.08em}
.eyebrow-mb{margin-bottom:6px}
.text-xs-mono{font-family:var(--ff-mono);font-size:0.72rem;color:var(--muted)}
.text-faint-mono{font-family:var(--ff-mono);font-size:0.6rem;color:var(--faint)}
.row{display:flex;align-items:center}
.row-wrap{flex-wrap:wrap}
.row-sm{gap:8px}
.row-md{gap:12px}
.row-lg{gap:14px}
.grow{flex:1;min-width:0}
.ml-auto{margin-left:auto}
.shrink-0{flex-shrink:0}
.danger-text{color:var(--danger)}

/* Inputs */
.input-mono,.textarea-mono{width:100%;background:var(--surface);border:1px solid var(--border);
  border-radius:6px;color:var(--text);font-family:var(--ff-mono);outline:none;transition:border-color .2s}
.textarea-mono{font-size:0.75rem;line-height:1.6;padding:10px 12px;resize:vertical}
.input-mono{font-size:0.78rem;padding:5px 8px;border-radius:5px}
.input-mono:focus,.textarea-mono:focus{border-color:var(--border-hi)}
.input-num{width:80px}

/* Section header subtitle ("Server-side · …" text inside sec-title).
   Scoped under .sec-title to beat `.sec-title .actions` (specificity 0,2,0)
   which would otherwise force mono 0.65rem on it. */
.sec-title .sec-subtitle{font-family:var(--ff-body);font-size:0.72rem;
  letter-spacing:0;text-transform:none;color:var(--muted)}
.sec-title .sec-subtitle.warn{color:var(--warn)}

/* ── Custom dropdown — replaces native <select> for proper CATCHES style ── */
.dropdown{position:relative;display:inline-block}
.dropdown-trigger{display:inline-flex;align-items:center;gap:10px;
  padding:7px 10px 7px 12px;background:var(--surface);
  border:1px solid var(--border);border-radius:6px;
  font-family:var(--ff-mono);font-size:0.78rem;color:var(--text);
  min-width:200px;text-align:left;transition:border-color .15s}
.dropdown-trigger:hover,.dropdown[data-open] .dropdown-trigger,.dropdown-trigger:focus-visible{
  border-color:var(--border-hi);outline:none}
.dropdown-value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dropdown-arrow{margin-left:auto;color:var(--muted);font-size:0.7rem;line-height:1;
  transition:transform .15s var(--ease-out)}
.dropdown[data-open] .dropdown-arrow{transform:rotate(180deg);color:var(--accent)}
.dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:100%;
  background:var(--surface);border:1px solid var(--border-hi);border-radius:6px;
  list-style:none;padding:4px;margin:0;max-height:280px;overflow-y:auto;
  display:none;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.dropdown[data-open] .dropdown-menu{display:block}
.dropdown-menu li{padding:8px 12px;border-radius:4px;
  font-family:var(--ff-mono);font-size:0.78rem;color:var(--text);cursor:pointer;
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  transition:background .1s}
.dropdown-menu li:hover,.dropdown-menu li[data-active]{background:var(--card-hi)}
.dropdown-menu li[aria-selected="true"]{background:var(--accent-dim);color:var(--accent)}
.dropdown-menu li[aria-selected="true"]:hover{background:var(--accent-dim)}
.dropdown-menu .opt-tag{font-size:0.6rem;letter-spacing:0.08em;padding:1px 6px;
  border-radius:3px;background:var(--accent-dim);color:var(--accent);margin-left:auto}

/* ── Modal (replaces window.prompt / window.confirm) ─────────────────────── */
.modal-backdrop{position:fixed;inset:0;z-index:200;
  background:rgba(8,8,10,0.72);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .15s}
.modal-backdrop.show{opacity:1;pointer-events:auto}
.modal{background:var(--card);border:1px solid var(--border-hi);border-radius:12px;
  padding:22px 24px;min-width:380px;max-width:520px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  transform:translateY(8px);transition:transform .2s var(--ease-out)}
.modal-backdrop.show .modal{transform:translateY(0)}
.modal-title{font-family:var(--ff-display);font-size:1.1rem;font-weight:500;
  margin-bottom:6px;letter-spacing:-0.01em}
.modal-desc{font-size:0.82rem;color:var(--muted);line-height:1.5;margin-bottom:14px}
.modal-input{width:100%;background:var(--surface);border:1px solid var(--border);
  border-radius:6px;color:var(--text);font-family:var(--ff-mono);font-size:0.85rem;
  padding:10px 12px;outline:none;transition:border-color .15s;margin-bottom:18px}
.modal-input:focus{border-color:var(--accent)}
.modal-actions{display:flex;gap:8px;justify-content:flex-end}
.modal-error{color:var(--danger);font-family:var(--ff-mono);font-size:0.7rem;
  margin-top:-12px;margin-bottom:14px;min-height:14px}

/* ── Toast stack — replaces single auto-overwriting toast ────────────────── */
.toast-stack{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:6px;align-items:center;
  z-index:300;pointer-events:none}
.toast-stack .toast{position:static;transform:none;background:var(--surface);
  border:1px solid var(--border-hi);padding:10px 18px;border-radius:6px;
  font-family:var(--ff-mono);font-size:0.78rem;
  opacity:0;transition:opacity .2s,transform .25s var(--ease-out);
  pointer-events:auto;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.toast-stack .toast.show{opacity:1;transform:translateY(-2px)}
.toast.toast-err{border-color:var(--danger);color:var(--danger)}
.toast.toast-ok{border-color:var(--accent);color:var(--accent)}