:root{
  --bg:#0f1115;--panel:#161a22;--line:#2a3240;--ink:#e6e9ef;--muted:#9aa4b2;
  --accent:#5aa9ff;--good:#5ad19a;--warn:#ffb454;--bad:#ff6b6b;
  --mono:ui-monospace,Menlo,Consolas,monospace;--sans:system-ui,sans-serif;
}
*{box-sizing:border-box}
/* The HTML `hidden` attribute must always win — author rules like `.confirm-back{display:flex}`
   would otherwise override the UA `[hidden]{display:none}`, leaving modals (e.g. the prune dialog)
   permanently visible and un-dismissable. */
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px}
header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:5}
header h1{margin:0;font-size:18px;letter-spacing:.05em}
.conn{display:flex;gap:10px;align-items:center}
.conn input{background:#11151c;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:6px 9px;font-size:13px}
.conn input:focus{outline:none;border-color:var(--accent)}

/* liveness pill */
.pill{font-size:12px;line-height:1;padding:6px 11px;border-radius:20px;border:1px solid var(--line);background:#11151c;color:var(--muted);white-space:nowrap}
.pill::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle;background:var(--muted)}
.pill.online{color:var(--good);border-color:#265046}.pill.online::before{background:var(--good)}
.pill.stale{color:var(--warn);border-color:#5a4326}.pill.stale::before{background:var(--warn)}
.pill.offline{color:var(--bad);border-color:#5a2a2a}.pill.offline::before{background:var(--bad)}

main{max-width:1100px;margin:0 auto;padding:18px 20px;display:grid;gap:20px}
h2{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:0 0 10px;display:flex;align-items:center}

/* modules */
#modcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card-meta{color:var(--muted);font-size:12px;min-height:16px;margin:4px 0}
.card-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}

/* buttons */
button{background:#1c2430;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:6px 12px;font-size:13px;cursor:pointer;transition:border-color .12s,color .12s}
button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
button:disabled{opacity:.4;cursor:not-allowed}
button.cancel{padding:4px 10px;font-size:12px}
button.cancel:hover:not(:disabled){border-color:var(--bad);color:var(--bad)}

/* state badges (shared by modules + command activity) */
.badge{font-size:11px;padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.02em;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.badge.running{color:var(--good);border-color:#265046}
.badge.received,.badge.delivered{color:var(--accent);border-color:#284a6e}
.badge.queued{color:var(--muted)}
.badge.done,.badge.stopped{color:var(--good);border-color:#265046}
.badge.failed,.badge.crashed{color:var(--bad);border-color:#5a2a2a}
.badge.cancelled{color:var(--muted);border-color:#3a3f4a}
.badge.expired{color:var(--warn);border-color:#5a4326}
.badge.warnbadge,.badge.stopping{color:var(--warn);border-color:#5a4326}

.warn{margin-top:8px;color:var(--warn);font-size:12px;background:rgba(255,180,84,.08);padding:6px 8px;border-radius:6px}

/* command activity */
#activity{display:flex;flex-direction:column;gap:8px}
.cmd{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:10px 12px;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.cmd-h{display:flex;gap:10px;align-items:center;grid-column:1}
.cmd-type{font-weight:600}
.cmd-id{font-family:var(--mono);font-size:11px;color:var(--muted)}
.cmd-meta{grid-column:1;color:var(--muted);font-size:12px;display:flex;gap:8px;flex-wrap:wrap}
.cmd-meta:empty{display:none}
.cmd-params{font-family:var(--mono)}
.cmd-progress{color:var(--accent)}
.cmd-err{color:var(--bad)}
.cmd-result{color:var(--good)}
.cmd-actions{grid-column:2;grid-row:1 / span 2;display:flex;align-items:center}
.cancelling{font-size:12px;color:var(--warn)}
/* compact command result: one-line preview never grows the row; toggle reveals a clamped, scrollable full-JSON box */
.cmd-result{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-result-toggle{background:none;border:none;color:var(--accent);font-size:11px;padding:0 4px;cursor:pointer;flex:none}
.cmd-result-toggle:hover:not(:disabled){color:var(--ink);border:none;background:none}
.cmd-result-full{flex-basis:100%;margin:6px 0 0;background:#0b0d12;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--ink);white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto}

/* telemetry */
.h2-spacer{flex:1}
.telem-state{font-size:11px;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400;margin-left:10px;font-family:var(--mono)}
.linkbtn{background:none;border:none;color:var(--accent);font-size:12px;text-transform:none;letter-spacing:0;padding:2px 6px;cursor:pointer}
.linkbtn:hover:not(:disabled){color:var(--ink);border:none;background:none}
.linkbtn:disabled{opacity:.4;cursor:not-allowed}

/* explicit unavailable / stale banner */
.telem-notice{font-size:13px;border-radius:9px;padding:12px 14px;margin-bottom:12px;border:1px solid var(--line);background:var(--panel);color:var(--muted)}
.telem-notice.absent{border-color:#3a3f4a}
.telem-notice.stale{border-color:#5a4326;color:var(--warn);background:rgba(255,180,84,.08)}

/* metric chips with inline sparklines */
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.chips:empty{display:none}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:9px 11px;display:flex;flex-direction:column;gap:2px;min-width:0}
.chip.dim{opacity:.55}
.chip-k{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip-row{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.chip-v{font-family:var(--mono);font-size:18px;line-height:1.1}
.chip-v.na{color:var(--muted);font-size:13px}
.chip-spark{display:block;width:60px;height:20px;flex:none}
.chip-spark path{fill:none;stroke:var(--accent);stroke-width:1.5;vector-effect:non-scaling-stroke}

/* chip picker */
.chip-picker{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-bottom:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.chip-picker label{display:flex;gap:7px;align-items:center;font-size:12px;color:var(--ink);cursor:pointer}
.chip-picker input{accent-color:var(--accent)}

/* power controls — titled panel with one label/control row per control */
.power{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-top:12px;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.pwr-title{grid-column:1/-1;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding-bottom:10px;border-bottom:1px solid var(--line);margin:-2px 0 0}
.pwr-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.pwr-label{display:flex;align-items:center;gap:6px}
.pwr-name{font-size:12px;color:var(--ink);font-weight:500}
.pwr-token{color:var(--muted);font-family:var(--mono);font-size:11px;font-weight:400}
.pwr-control{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pwr-select{background:#11151c;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:6px 9px;font-size:13px;max-width:240px;flex:1 1 auto;min-width:0}
.pwr-select:focus{outline:none;border-color:var(--accent)}
.pwr-select:disabled{opacity:.5}
.pwr-switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--ink)}
.pwr-switch input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.pwr-status{font-size:11px;font-family:var(--mono);min-height:14px;color:var(--muted)}
.pwr-status.applying{color:var(--warn)}
.pwr-status.ok{color:var(--good)}
.pwr-status.err{color:var(--bad)}

/* reusable (i) info badge + hover/focus tooltip bubble (dark-theme, no JS) */
.infobadge{position:relative;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;flex:none;padding:0;border-radius:50%;border:1px solid var(--line);background:#11151c;color:var(--muted);font-family:var(--mono);font-size:10px;font-style:italic;font-weight:700;line-height:1;cursor:help}
.infobadge:hover,.infobadge:focus-visible{border-color:var(--accent);color:var(--accent);outline:none}
.infobubble{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:280px;background:#11151c;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-family:var(--sans);font-style:normal;font-weight:400;font-size:12px;line-height:1.5;text-align:left;letter-spacing:0;box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .12s;z-index:30;pointer-events:none;white-space:normal}
/* little pointer under the bubble */
.infobubble::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--line)}
.infobadge:hover .infobubble,.infobadge:focus-visible .infobubble{opacity:1;visibility:visible}
@media(max-width:640px){.infobubble{max-width:220px}}

/* detailed telemetry expander */
.detail{margin-top:12px;background:var(--panel);border:1px solid var(--line);border-radius:9px}
.detail>summary{cursor:pointer;padding:10px 14px;font-size:13px;color:var(--ink);user-select:none}
.detail>summary::marker{color:var(--muted)}
.detail-body{padding:0 14px 14px;display:grid;gap:14px}
.detail-grp h3{margin:0 0 6px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.detail-table{width:100%;border-collapse:collapse;font-size:12px;font-family:var(--mono)}
.detail-table td,.detail-table th{text-align:left;padding:3px 10px 3px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.detail-table th{color:var(--muted);font-weight:500}
.detail-table td:first-child{color:var(--muted)}

/* force-confirm dialog */
.confirm-back{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:20}
.confirm{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 20px;max-width:420px;width:90vw;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.confirm-msg{font-size:14px;color:var(--ink);margin-bottom:16px;line-height:1.45}
.confirm-actions{display:flex;gap:10px;justify-content:flex-end}
button.act.danger{border-color:#5a2a2a;color:var(--bad)}
button.act.danger:hover:not(:disabled){border-color:var(--bad);background:rgba(255,107,107,.1)}

/* logs */
#logpane{background:#0b0d12;border:1px solid var(--line);border-radius:10px;padding:12px;font-family:var(--mono);font-size:12px;line-height:1.5;height:300px;overflow:auto;white-space:pre-wrap}
#logs select{background:#11151c;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:2px 6px;margin-left:8px}

/* file explorer */
.fs-body{display:grid;gap:12px}
.fs-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
.fs-crumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;font-size:12px}
.crumb-up,.crumb-link{background:#1c2430;border:1px solid var(--line);border-radius:6px;padding:3px 9px;font-size:12px;color:var(--ink);cursor:pointer}
.crumb-up:hover:not(:disabled),.crumb-link:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.crumb-up:disabled,.crumb-link:disabled{opacity:.4;cursor:default}
.crumb-sep{color:var(--muted)}
.crumb-cur{font-family:var(--mono);color:var(--muted);font-size:12px;word-break:break-all}
.fs-actions{display:flex;align-items:center;gap:8px}
.fs-actions .act{padding:5px 11px;font-size:12px}

.fs-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.fs-list:empty{display:none}
.fs-row{display:grid;grid-template-columns:24px 1fr auto 90px 140px;align-items:center;gap:10px;padding:7px 12px;border-bottom:1px solid var(--line)}
.fs-row:last-child{border-bottom:none}
.fs-row.sel{background:rgba(90,169,255,.10)}
.fs-ic{font-size:14px;line-height:1;text-align:center}
.fs-name{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fs-name.nav,.fs-name.pick{cursor:pointer}
.fs-name.nav:hover{color:var(--accent)}
.fs-name.pick:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line)}
.fs-row.sel .fs-name.pick{color:var(--accent)}
.fs-name.link{color:var(--muted);font-style:italic}
.fs-type{font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:1px 7px;white-space:nowrap}
.fs-type.dir{color:var(--accent);border-color:#284a6e}
.fs-type.symlink{color:var(--warn);border-color:#5a4326}
.fs-size,.fs-mtime{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right;white-space:nowrap}
@media(max-width:640px){
  .fs-row{grid-template-columns:22px 1fr auto;}
  .fs-size,.fs-mtime{display:none}
}

/* dialogs: new-folder input + delete targets (reuse .confirm-back/.confirm) */
.confirm-err{font-size:12px;color:var(--bad);background:rgba(255,107,107,.08);border:1px solid #5a2a2a;border-radius:6px;padding:7px 10px;margin-bottom:12px}
.fs-hint{display:block;font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:6px;word-break:break-all}
.mkdir-in{margin-bottom:14px}
.mkdir-in input{width:100%;background:#11151c;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:13px;font-family:var(--mono)}
.mkdir-in input:focus{outline:none;border-color:var(--accent)}
.rm-targets{margin-bottom:12px}
.rm-count{font-size:13px;color:var(--ink);margin-bottom:8px}
.rm-list{margin:0;padding:0 0 0 4px;list-style:none;max-height:160px;overflow:auto}
.rm-list li{font-family:var(--mono);font-size:12px;color:var(--muted);padding:2px 0;word-break:break-all}
.rm-recursive{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--muted);margin-bottom:14px;cursor:pointer;line-height:1.4}
.rm-recursive input{margin-top:1px;width:15px;height:15px;accent-color:var(--bad);cursor:pointer;flex:none}

/* archives (Phase 4) — active uploads + verified/completed archives */
.arch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.arch-grid.arch-done{margin-top:12px}
.arch-card{display:flex;flex-direction:column;gap:6px}
.arch-card .card-h{gap:10px}
.arch-src{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-weight:600}
.arch-key{font-family:var(--mono);font-size:11px;color:var(--muted);word-break:break-all}
.arch-prog{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.arch-bytes{font-family:var(--mono);font-size:15px;color:var(--ink)}
.arch-note{font-size:12px;color:var(--muted)}
.arch-err{font-size:12px;color:var(--bad);background:rgba(255,107,107,.08);border-radius:6px;padding:5px 8px;word-break:break-word}
.arch-err.warn{color:var(--warn);background:rgba(255,180,84,.08)}
.arch-card .card-actions{margin-top:2px}

/* verified ✓ → key line for a completed, verified archive */
.arch-verified{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;min-width:0}
.arch-check{color:var(--good);font-weight:600;white-space:nowrap}
.arch-arrow{color:var(--muted)}
.arch-hashline{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.arch-sha{font-family:var(--mono);font-size:11px;color:var(--muted)}

/* delete-source confirm dialog body */
.arch-del-body{margin-bottom:16px}
.arch-del-row{display:flex;gap:10px;align-items:baseline;font-size:12px;margin-bottom:6px}
.arch-del-lbl{flex:none;width:54px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;font-size:10px}
.arch-del-val{font-family:var(--mono);color:var(--ink);word-break:break-all;min-width:0}
.arch-del-warn{margin:10px 0 0;font-size:12px;color:var(--warn);background:rgba(255,180,84,.08);border-radius:6px;padding:8px 10px;line-height:1.45}

/* R2 retention (Phase 5) — storage-usage bar + needs_prune banner + prune dialog */
.usage-body{margin-bottom:14px}
.usage{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:grid;gap:9px}
.usage-head{display:flex;align-items:baseline;gap:8px;font-size:12px}
.usage-nums{font-family:var(--mono);font-size:14px;color:var(--ink)}
.usage-objs{color:var(--muted);font-family:var(--mono);font-size:11px}
.usage-pct{font-family:var(--mono);font-size:12px;color:var(--good)}
.usage-pct.near{color:var(--warn)}
.usage-pct.over{color:var(--bad)}
/* the bar: a track with a width-driven fill; color by fill class (ok/near/over) */
.usage-track{height:10px;background:#11151c;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.usage-fill{height:100%;border-radius:20px;background:var(--good);transition:width .35s ease,background-color .25s}
.usage-fill.near{background:var(--warn)}
.usage-fill.over{background:var(--bad)}
.usage-warn{font-size:12px;border-radius:6px;padding:6px 9px;line-height:1.4}
.usage-warn.near{color:var(--warn);background:rgba(255,180,84,.08)}
.usage-warn.over{color:var(--bad);background:rgba(255,107,107,.09)}
.usage-actions{display:flex;align-items:center;gap:10px;margin-top:10px}
.usage-actions .act{padding:5px 11px;font-size:12px}

/* needs_prune banner (an over-budget archive.create) */
.np-banner{border:1px solid #5a4326;background:rgba(255,180,84,.08);border-radius:10px;padding:12px 14px;margin-bottom:14px;display:grid;gap:10px}
.np-msg{font-size:13px;color:var(--warn);line-height:1.45}
.np-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.np-actions .act{padding:5px 11px;font-size:12px}

/* prune confirm dialog (reuses .confirm-back/.confirm) */
.prune-summary{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.prune-count{font-size:13px;color:var(--ink)}
.prune-freed{font-family:var(--mono);font-size:12px;color:var(--good)}
.prune-list{margin:0 0 12px;padding:0 0 0 4px;list-style:none;max-height:180px;overflow:auto}
.prune-list:empty{display:none}
.prune-list li{font-family:var(--mono);font-size:12px;color:var(--muted);padding:2px 0;word-break:break-all}
.prune-warn{margin:0 0 16px;font-size:12px;color:var(--warn);background:rgba(255,180,84,.08);border-radius:6px;padding:8px 10px;line-height:1.45}

/* misc */
.note{color:var(--muted);font-size:13px;background:var(--panel);border:1px dashed var(--line);border-radius:9px;padding:14px}

/* transient error toast */
.flash{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#2a1c1f;color:var(--bad);border:1px solid #5a2a2a;border-radius:8px;padding:10px 16px;font-size:13px;max-width:90vw;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:10}
.flash.show{opacity:1;transform:translateX(-50%) translateY(0)}