:root{--bg:#0a0a0f;--surface:#12121a;--border:#1e1e2e;--border-hover:#2a2a3a;--accent:#6c5ce7;--accent-light:#a29bfe;--text:#e0e0e0;--muted:#888;--success:#00c853;--warning:#fdcb6e;--danger:#ff6b6b;--info:#00cec9}
  *{margin:0;padding:0;box-sizing:border-box}
  body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;min-height:100vh}
  a{color:var(--accent);text-decoration:none}
  ::-webkit-scrollbar{width:6px}
  ::-webkit-scrollbar-track{background:#0a0a0f}
  ::-webkit-scrollbar-thumb{background:#333;border-radius:3px}

  /* Auth Modal */
  .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:1000}
  .modal{background:#12121a;border:1px solid #2a2a3a;border-radius:16px;padding:40px;text-align:center;max-width:400px;width:90%}
  .modal h2{color:#6c5ce7;margin-bottom:8px;font-size:1.4rem}
  .modal p{color:#888;margin-bottom:24px;font-size:.9rem}
  .modal input{width:100%;padding:12px 16px;background:#1a1a2e;border:1px solid #2a2a3a;border-radius:8px;color:#fff;font-size:1rem;outline:none;margin-bottom:16px}
  .modal input:focus{border-color:#6c5ce7}
  .modal button{width:100%;padding:12px;background:#6c5ce7;color:#fff;border:none;border-radius:8px;font-size:1rem;cursor:pointer;font-weight:600;transition:background .2s}
  .modal button:hover{background:#5a4bd1}
  .modal .error{color:#ff6b6b;font-size:.85rem;margin-top:8px;min-height:20px}

  /* Layout */
  .container{max-width:1600px;margin:0 auto;padding:20px 24px}

  /* Header */
  .header{display:flex;align-items:center;gap:20px;margin-bottom:24px;flex-wrap:wrap}
  .cat-area{position:relative;flex-shrink:0}
  .avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2.5px solid #6c5ce7;box-shadow:0 0 20px rgba(108,92,231,.3);display:block}
  .speech-bubble{position:absolute;left:80px;top:50%;transform:translateY(-50%);background:#1e1e2e;color:#e0e0e0;padding:7px 14px;border-radius:12px;font-size:.8rem;font-weight:500;white-space:nowrap;border:1px solid #2a2a3a}
  .speech-bubble::before{content:'';position:absolute;right:100%;top:50%;transform:translateY(-50%);border:7px solid transparent;border-right-color:#2a2a3a}
  .speech-bubble::after{content:'';position:absolute;right:100%;top:50%;transform:translateY(-50%);border:6px solid transparent;border-right-color:#1e1e2e;margin-right:-1px}
  .header-right{margin-left:auto;display:flex;align-items:center;gap:16px}
  .header-right .title{font-size:1.3rem;font-weight:700;background:linear-gradient(135deg,#6c5ce7,#a29bfe);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
  .header-title{font-size:1.5rem;font-weight:800;background:linear-gradient(135deg,#6c5ce7,#a29bfe);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.5px}
  .header-meta{text-align:right;font-size:.78rem;color:#555;margin-left:auto}
  .header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}

  /* Tabs */
  .tabs{display:flex;flex-wrap:nowrap;gap:2px;margin-bottom:20px;border-bottom:1px solid #1e1e2e;padding-bottom:0}
  .tab{padding:10px 12px;cursor:pointer;color:#888;font-size:.9rem;font-weight:500;border-bottom:2px solid transparent;transition:all .2s;user-select:none;white-space:nowrap}
  .tab:hover{color:#ccc}
  .tab.active{color:#6c5ce7;border-bottom-color:#6c5ce7}
  .tab-content{display:none}
  .tab-content.active{display:block}
  /* Sub-tabs (currently used inside the Updates tab). Mirror .tabs visually
     but slightly less prominent so the hierarchy is obvious. */
  .subtabs{display:flex;flex-wrap:nowrap;gap:2px;margin:6px 0 16px;border-bottom:1px solid #1e1e2e;padding-bottom:0}
  .subtab{padding:8px 12px;cursor:pointer;color:#777;font-size:.83rem;font-weight:500;border-bottom:2px solid transparent;transition:all .2s;user-select:none;white-space:nowrap}
  .subtab:hover{color:#bbb}
  .subtab.active{color:#a29bfe;border-bottom-color:#a29bfe}
  .subtab-content{display:none}
  .subtab-content.active{display:block}
  @media(max-width:600px){.subtabs{overflow-x:auto}.subtab{padding:7px 10px;font-size:.78rem}}

  /* Stats Grid */
  .stat-group{background:#12121a;border:1px solid #1e1e2e;border-radius:12px;padding:14px 10px}
  .stat-group h4{font-size:.72rem;color:#666;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:10px;font-weight:600;text-align:center}
  .stat-group .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .stat-group .stat-item{text-align:center}
  .stat-group .stat-item .value{font-size:1.35rem;font-weight:700;color:inherit}
  .stat-group .stat-item .sub{font-size:.68rem;color:inherit;opacity:.7;margin-top:1px}
  .stat-group .stat-item .label{font-size:.62rem;color:#888;margin-top:3px;text-transform:uppercase;letter-spacing:1px}
  /* Updates tab: shared button styles for action buttons embedded in stat-group cards. */
  .upd-card{display:flex;flex-direction:column}
  .upd-card-body{flex:1;min-height:0}
  .upd-card-footer{margin-top:14px;padding-top:12px;border-top:1px solid #2a2a3a;display:flex;flex-direction:column;gap:8px}
  .upd-btn-row{display:flex;gap:8px}
  .upd-btn-row .upd-btn{flex:1;width:auto;padding:9px 10px;font-size:.8rem}
  .upd-btn{width:100%;padding:11px 14px;color:#fff;border-radius:8px;cursor:pointer;font-size:.85rem;margin:0;font-weight:600;border:1px solid transparent;transition:background .15s,opacity .15s}
  .upd-btn:hover:not(:disabled){filter:brightness(1.15)}
  .upd-btn-primary{background:#1a5e3a;border-color:#2a7a4a}
  .upd-btn-secondary{background:#1a1a2e;border-color:#2a2a3a}
  /* Hermes manual-pin "released versions" picker — click a row to load the tag
     into the pin box, then press 📌 Pin. Compact, scrollable, dark. */
  .hermes-releases .hermes-rel-label{color:#888;font-size:.78rem;margin-bottom:3px}
  .hermes-releases .hermes-rel-list{max-height:148px;overflow:auto;border:1px solid #2a2a3a;border-radius:6px}
  .hermes-rel{cursor:pointer;padding:4px 8px;display:flex;gap:7px;align-items:baseline;border-bottom:1px solid #20202e;transition:background .12s}
  .hermes-rel:last-child{border-bottom:none}
  .hermes-rel:hover{background:#20203a}
  .hermes-rel.is-current{background:#16271f}
  .hermes-rel.is-selected{outline:1px solid #6c5ce7;outline-offset:-1px}
  /* Beaver tab action buttons — polished, content-sized (not the full-width upd-btn family). */
  .mk-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;font-size:.82rem;font-weight:600;color:#fff;border:1px solid transparent;border-radius:8px;cursor:pointer;line-height:1;transition:background .15s,border-color .15s,transform .06s,box-shadow .15s;-webkit-font-smoothing:antialiased}
  .mk-btn:hover:not(:disabled){transform:translateY(-1px)}
  .mk-btn:active:not(:disabled){transform:translateY(0)}
  .mk-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
  .mk-btn-primary{background:linear-gradient(180deg,#23895a,#176a41);border-color:#2a8a55;box-shadow:0 1px 2px rgba(0,0,0,.3)}
  .mk-btn-primary:hover:not(:disabled){background:linear-gradient(180deg,#27a06a,#1b7d4d);box-shadow:0 3px 10px rgba(30,160,100,.25)}
  /* Deploy run: red — buys a real paid VPS (spends real money). Matches the
     "costs money" marker chip's red so the button reads as the same concept. */
  .mk-btn-danger{background:linear-gradient(180deg,#c84a4a,#9c3636);border-color:rgba(255,107,107,.6);color:#ffe2e2}
  .mk-btn-danger:hover:not(:disabled){background:linear-gradient(180deg,#e05a5a,#b84242);border-color:rgba(255,107,107,.9);box-shadow:0 3px 10px rgba(255,107,107,.22)}
  /* LLM run: violet — spends the test-bed agent's LLM credit. Matches the "uses LLM"
     marker chip's violet so the button reads as the same concept. */
  .mk-btn-llm{background:linear-gradient(180deg,#5b3aa6,#412a78);border-color:rgba(167,139,250,.6);color:#ece6ff}
  .mk-btn-llm:hover:not(:disabled){background:linear-gradient(180deg,#6b46c8,#4d3290);border-color:rgba(167,139,250,.9);box-shadow:0 3px 10px rgba(167,139,250,.25)}
  /* Run-all: light blue — the superset run (free + LLM + deploy). It is the heaviest
     button on the row: spends real money AND LLM credit, so it stands apart from
     the green/violet/red trio (a distinct sky blue, far from all three) and confirms before firing. */
  .mk-btn-all{background:linear-gradient(180deg,#3a92d8,#2670b0);border-color:rgba(120,180,255,.6);color:#e3f0ff}
  .mk-btn-all:hover:not(:disabled){background:linear-gradient(180deg,#4aa3e8,#2f7fc0);border-color:rgba(120,180,255,.9);box-shadow:0 3px 10px rgba(120,180,255,.25)}
  /* Run-mode pill in the COMMIT column of run history. A manually-triggered run
     has no commit SHA, so instead we show which Run-* mode kicked it off, using
     the SAME four colours as the buttons above (free=green, LLM=violet,
     deploy=red, all=light blue). It's a label, not a control: smaller than the
     buttons and no hover/press affordance. */
  .mk-runmode{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;font-size:.72rem;font-weight:600;border:1px solid transparent;border-radius:7px;line-height:1;white-space:nowrap;color:#fff}
  .mk-runmode-free{background:linear-gradient(180deg,#23895a,#176a41);border-color:#2a8a55}
  .mk-runmode-llm{background:linear-gradient(180deg,#5b3aa6,#412a78);border-color:rgba(167,139,250,.6);color:#ece6ff}
  .mk-runmode-deploy{background:linear-gradient(180deg,#c84a4a,#9c3636);border-color:rgba(255,107,107,.6);color:#ffe2e2}
  .mk-runmode-all{background:linear-gradient(180deg,#3a92d8,#2670b0);border-color:rgba(120,180,255,.6);color:#e3f0ff}
  /* Beaver tab header: three side-by-side sections — 1) title · 2) active-testbed
     readout (DEV) · 3) run buttons. flex-wrap lets the whole row collapse into
     stacked rows on a narrow viewport; sections 2 & 3 each wrap their own
     contents (chip badges / buttons) onto extra rows. align-items:flex-start so a
     multi-row testbed never drags the title/buttons down to its centre line. */
  .mk-beaver-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
  .mk-beaver-title{flex:0 0 auto}
  /* Middle section grows to fill, pushing the buttons to the right edge on a wide
     screen; min-width:0 lets it shrink (and its chip wrap) instead of overflowing. */
  .mk-beaver-testbed{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
  .mk-beaver-runs{flex:0 0 auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
  /* Active-testbed readout (DEV only): which agent the panel/LLM journeys drive +
     that agent's active LLM provider. A soft tinted pill (no border, so it reads as
     an info chip, not a button). flex-wrap lets the badges flow onto extra rows when
     the middle section is narrow; white-space:nowrap still keeps each badge intact. */
  .mk-testbed{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:.78rem;line-height:1.35;white-space:nowrap;color:#cbb48a;background:rgba(203,180,138,.10);padding:6px 11px;border-radius:9px}
  .mk-testbed a{color:#ffe6b0;font-weight:600;text-decoration:none}
  .mk-testbed a:hover{text-decoration:underline}
  .mk-testbed .mk-tb-llm{background:rgba(127,176,255,.16);color:#cdddff;font-weight:600;padding:1px 7px;border-radius:7px}
  /* Telegram bind state: green once bound (connect journey skips), amber while
     still unbound (connect journey has a real bind to do). */
  .mk-testbed .mk-tb-tg{font-weight:600;padding:1px 7px;border-radius:7px}
  .mk-testbed .mk-tb-tg.is-bound{background:rgba(120,200,140,.16);color:#bfe9c8}
  .mk-testbed .mk-tb-tg.is-unbound{background:rgba(232,162,61,.14);color:#e8b96b}
  .mk-testbed.is-empty{color:#7a7a7a;background:rgba(255,255,255,.04)}
  /* Expired/dead testbed: amber warning so a stale target can't be mistaken
     for a live one. */
  .mk-testbed.is-expired{color:#e8a23d;font-weight:600;background:rgba(232,162,61,.12)}
  .mk-testbed.is-expired a{color:#e8a23d}
  /* Status (running · time-left) drops onto its OWN full-width row at the BOTTOM
     of the chip and right-aligns — flex-basis:100% forces the line break, the
     other badges (provider / TG) stay on the top row. */
  .mk-testbed .mk-tb-status{flex:0 0 100%;text-align:right;margin-top:1px;color:#8a8a8a}
  /* Pool selector: pick which flagged agent is the active testbed. Only shown
     when more than one agent is flagged. */
  /* Active-testbed picker: a standalone control that sits just LEFT of the
     testbed chip (no longer nested inside it), so rebuilding the chip on each
     poll can never reset or jump an open dropdown. Hidden unless 2+ running
     testbeds give a real choice. */
  .mk-tb-select{background:rgba(255,255,255,.06);color:#cdddff;border:1px solid rgba(255,255,255,.14);border-radius:7px;padding:3px 7px;font-size:.76rem;line-height:1;cursor:pointer;max-width:280px}
  /* Beaver live-run affordances: spinner + a soft pulse on in-progress rows. */
  /* Spinner: .8s linear — uniform with every other spinner on the page
     (.spinner / .ops-spinner) so nothing looks out of step. will-change keeps
     the rotation on the GPU compositor → no sub-pixel stutter. */
  .mk-spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(57,153,255,.25);border-top-color:#39f;border-radius:50%;vertical-align:-2px;animation:mk-spin .8s linear infinite;will-change:transform}
  @keyframes mk-spin{to{transform:rotate(360deg)}}
  /* Soft breathing pulse — floor at .6 (not .45) so it reads as a gentle glow
     rather than a hard blink. */
  @keyframes mk-pulse{0%,100%{opacity:1}50%{opacity:.6}}
  .mk-running{animation:mk-pulse 1.6s ease-in-out infinite}
  .mk-live-banner{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:8px;background:linear-gradient(180deg,#16263a,#101c2c);border:1px solid #1f3a57;color:#bfe0ff;font-size:.9rem}
  .mk-bar{height:6px;border-radius:4px;background:#1a1a2e;overflow:hidden;flex:1;min-width:80px}
  .mk-bar > i{display:block;height:100%;background:linear-gradient(90deg,#23895a,#27a06a);transition:width .5s cubic-bezier(.4,0,.2,1);will-change:width}
  #beaverRunsTable tbody tr{transition:background .12s}
  #beaverRunsTable tbody tr:hover{background:rgba(255,255,255,.055)}
  #beaverRunsTable tbody tr.mk-row-live{background:rgba(57,153,255,.07)}
  #beaverRunsTable tbody tr.mk-row-live:hover{background:rgba(57,153,255,.12)}
  /* Run-history table: cap to ~5 rows, scroll the rest, keep the header pinned.
     Double-class selector beats the generic `.table-wrap{max-height:500px}` that
     this div also carries — same specificity would otherwise let 500px win on
     source order and the cap would never apply. */
  .table-wrap.mk-runs-wrap{max-height:180px;overflow-y:auto;overflow-x:auto}
  .mk-runs-wrap thead th{position:sticky;top:0;z-index:1;background:#0e0e16}
  /* Beaver run history is a dense operator dashboard: each run must stay a
     single-line row. Fixed layout gives the wide "Test type" column the leftover
     space while the narrow metric columns keep predictable widths. The Target
     column needs room for base domain + agent host chip; Journeys needs room for
     category badges plus the skipped suffix, otherwise it visually spills into
     Result. Only the commit subject may ellipsize if space runs out. */
  #beaverRunsTable{table-layout:fixed;width:100%}
  #beaverRunsTable th,#beaverRunsTable td{white-space:nowrap}
  #beaverRunsTable th:nth-child(1),#beaverRunsTable td:nth-child(1){width:44px}
  #beaverRunsTable th:nth-child(2),#beaverRunsTable td:nth-child(2){width:70px}
  #beaverRunsTable th:nth-child(3),#beaverRunsTable td:nth-child(3){width:430px}
  #beaverRunsTable th:nth-child(5),#beaverRunsTable td:nth-child(5){width:178px}
  #beaverRunsTable th:nth-child(6),#beaverRunsTable td:nth-child(6){width:118px}
  #beaverRunsTable th:nth-child(7),#beaverRunsTable td:nth-child(7){width:82px}
  #beaverRunsTable td:nth-child(4){overflow:hidden;text-overflow:ellipsis}
  /* Test-type cell: run-kind badge + commit subject on one line, the subject
     ellipsizing in whatever space the badge leaves. A flex wrapper (capped at
     100% of the cell) makes the subject the ONLY shrinkable item, and min-width:0
     lets it truncate with a VISIBLE "…" inside the cell. The old approach gave
     the subject <a> display:inline-block;max-width:100% — but 100% meant the
     FULL cell width, ignoring the badge in front of it, so a long subject
     overflowed the cell and its own ellipsis rendered PAST the clip edge, leaving
     just a bare "…" with no preceding text (the bug). */
  .mk-type-inner{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%}
  .mk-type-inner > .mk-runmode{flex:0 0 auto}
  .mk-type-inner > a,.mk-type-inner > span{flex:0 1 auto;min-width:0}
  #beaverRunsTable td:nth-child(3) .mk-subject{margin-top:0;vertical-align:middle;white-space:nowrap}
  /* Per-journey rows in the run-detail table: clickable to expand source + error. */
  #beaverRunDetail tr.mk-jrow{cursor:pointer;transition:background .12s}
  #beaverRunDetail tr.mk-jrow:hover{background:rgba(255,255,255,.04)}
  .mk-caret{display:inline-block;width:12px;color:#789;transition:transform .15s;user-select:none}
  .mk-jrow.mk-open .mk-caret{transform:rotate(90deg)}
  .mk-jname{font-weight:600}
  .mk-subject{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:9px;
    background:rgba(110,130,255,.14);color:#9fb0ff;font-size:.7rem;font-weight:600;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  .mk-jdesc{color:#9aa;font-size:.78rem;margin-top:2px;max-width:640px;line-height:1.35}
  .mk-detail-cell{background:#0e0e18;padding:0 14px}
  .mk-detail-inner{padding:12px 4px;animation:fadeUp .18s ease}
  .mk-detail-inner h4{margin:0 0 6px;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:#789}
  .mk-code{margin:0 0 12px;padding:11px 13px;background:#08080f;border:1px solid #1e1e2e;border-radius:7px;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;line-height:1.5;color:#cdd6e4;
    white-space:pre;overflow-x:auto}
  .mk-err{margin:0 0 4px;padding:11px 13px;background:#1f1216;border:1px solid #4a2630;border-radius:7px;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74rem;line-height:1.45;color:#f3c0c8;
    white-space:pre-wrap;overflow-x:auto;max-height:340px;overflow-y:auto}
  .mk-shots{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}
  .mk-shot{display:block;border:1px solid #2a2433;border-radius:7px;overflow:hidden;background:#0a0a12;
    max-width:340px;line-height:0;transition:border-color .15s,transform .15s}
  .mk-shot:hover{border-color:#5a4a7a;transform:translateY(-1px)}
  .mk-shot img{display:block;width:100%;height:auto;max-height:240px;object-fit:contain}
  .mk-shot-ph{display:inline-block;line-height:1.4;padding:18px 22px;color:#789;font-size:.76rem}
  .mk-arts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
  .mk-art-chip{cursor:pointer;border:1px solid #2a2433;border-radius:7px;background:#12121c;color:#cdd6e4;
    padding:5px 10px;font-size:.74rem;transition:border-color .15s,background .15s}
  .mk-art-chip:hover{border-color:#5a4a7a;background:#181826}
  .mk-art-chip-fail{border-color:#4a2630;color:#f3c0c8;background:#1f1216}
  .mk-art-sz{color:#667;font-size:.68rem;margin-left:3px}
  .mk-mark{display:inline-block;margin-right:5px;padding:1px 7px;border-radius:9px;font-size:.68rem;font-weight:700;
    background:rgba(90,150,255,.14);color:#9bf}
  .mk-mark.mk-mark-smoke{background:rgba(40,200,120,.16);color:#5d8}
  .mk-mark.mk-mark-costs_money{background:rgba(255,107,107,.16);color:#f99}
  /* "uses LLM" — same purple as the 🧠 history badge so chip and badge read
     as one family (badge tallies exactly the chips visible in the table). */
  .mk-mark.mk-mark-spends_llm{background:rgba(160,120,255,.14);color:#c2a8ff}
  /* "🐀 TG" chip — Telegram-interface journeys, in Telegram's own blue. */
  .mk-mark.mk-mark-telegram{background:rgba(42,171,238,.16);color:#5cc6f5}
  /* History-table per-type badges (🧠 LLM / 🚀 Deploy) next to the pass count. */
  .mk-runcat{display:inline-block;margin-left:6px;padding:0 6px;border-radius:8px;font-size:.7rem;font-weight:700;
    font-variant-numeric:tabular-nums;white-space:nowrap;vertical-align:baseline}
  .mk-runcat-llm{background:rgba(160,120,255,.14);color:#c2a8ff}
  /* Deploy badge: red — same family as the deploy button / "costs money" chip. */
  .mk-runcat-deploy{background:rgba(255,107,107,.16);color:#f99}
  /* "+N skipped" hint after the passed/ran fraction: muted, so it reads as
     context (journeys not applicable to this run type), not a failure. */
  .mk-skipped{margin-left:6px;font-size:.72rem;color:#7a7a8a;font-weight:600}
  /* Beaver run detail — journeys grouped into per-service category cards. */
  .mk-cats{display:flex;flex-direction:column;gap:10px}
  .mk-cat{background:#12121a;border:1px solid #1e1e2e;border-radius:11px;overflow:hidden;transition:border-color .15s}
  .mk-cat:hover{border-color:#2a2a3a}
  .mk-cat.mk-cat-failed{border-color:rgba(255,107,107,.38)}
  .mk-cat.mk-cat-running{border-color:rgba(57,153,255,.42)}
  .mk-cat-head{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;user-select:none}
  .mk-cat-head:hover{background:rgba(255,255,255,.025)}
  .mk-cat-caret{display:inline-block;width:12px;color:#789;font-size:.8rem;transition:transform .15s}
  .mk-cat.mk-open .mk-cat-caret{transform:rotate(90deg)}
  .mk-cat-icon{font-size:1.25rem;line-height:1}
  .mk-cat-title{display:flex;flex-direction:column;gap:1px;min-width:0}
  .mk-cat-name{font-weight:700;font-size:.92rem;color:#e8eaf0;line-height:1.2}
  .mk-cat-desc{font-size:.7rem;color:#778;letter-spacing:.02em}
  .mk-cat-grow{flex:1;min-width:8px}
  .mk-cat-running-tag{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;color:#9bf;font-weight:600;white-space:nowrap}
  /* Category that didn't run (all journeys skipped) — neutral tag, dimmed card,
     empty bar (pct=0). Reads as "not run", never as a green pass. */
  .mk-cat-skip-tag{display:inline-flex;align-items:center;font-size:.66rem;font-weight:700;letter-spacing:.05em;
    text-transform:uppercase;color:#778;background:rgba(120,130,150,.12);border-radius:8px;padding:2px 8px;white-space:nowrap}
  .mk-cat.mk-cat-skipped{opacity:.6}
  .mk-cat.mk-cat-skipped:hover{opacity:.85}
  .mk-cat-bar{width:120px;height:6px;border-radius:4px;background:#0c0c14;overflow:hidden;flex-shrink:0}
  .mk-cat-bar > i{display:block;height:100%;transition:width .5s cubic-bezier(.4,0,.2,1);will-change:width}
  .mk-cat-counts{font-variant-numeric:tabular-nums;font-weight:700;font-size:.86rem;min-width:44px;text-align:right;white-space:nowrap}
  .mk-cat-fail{font-size:.7rem;font-weight:600}
  .mk-cat-body{border-top:1px solid #1a1a26;background:#0e0e16;padding:2px 10px 8px}
  .mk-cat-body table{margin:0}
  .mk-cat-body td{border-bottom:1px solid #14141e}
  .mk-cat-body tr:last-child td{border-bottom:none}
  .mk-cat-body td:nth-child(2){width:140px}
  .mk-cat-body td:nth-child(3){width:96px}
  .mk-cat-body td:nth-child(4){width:84px;text-align:right;white-space:nowrap;color:#9aa}
  .mk-cat-empty{padding:16px;color:#778;font-size:.85rem;display:flex;align-items:center;gap:9px}
  /* ── Beaver on a narrow screen (phone / small tablet) ─────────────────────
     The tab is desktop-dense: the run-history table carries ~920px of fixed
     pixel columns with every cell nowrap, so on a phone it forced the whole
     page sideways. Below 860px the table collapses into stacked run cards
     (thead hidden, each <tr> becomes a small grid keyed on cell position),
     category heads drop their description and give the progress bar its own
     full-width row, and per-journey rows stack name-over-metadata. */
  @media(max-width:860px){
    .table-wrap.mk-runs-wrap{max-height:340px}
    #beaverRunsTable thead{display:none}
    #beaverRunsTable,#beaverRunsTable tbody{display:block}
    #beaverRunsTable tbody tr{display:grid;grid-template-columns:auto 1fr auto;gap:3px 10px;align-items:baseline;padding:9px 2px;border-bottom:1px solid #1e1e2e;
      grid-template-areas:"id when result" "type type type" "target target target" "counts counts runtime"}
    #beaverRunsTable tbody tr:last-child{border-bottom:none}
    /* min-width:0 is load-bearing: each <tr> is now a grid and every <td> a
       grid item, whose default min-width:auto = min-content. The type cell
       spans all 3 columns and holds a nowrap commit subject, so without this
       its min-content forces the auto tracks — and the whole card — past the
       viewport (a long subject like "Teated: finish the pagination …" ran off
       screen). Zeroing it lets the cell shrink so the subject ellipsizes
       inside the card instead of blowing out the mobile layout. */
    #beaverRunsTable td{padding:0;border:none;white-space:normal;min-width:0}
    #beaverRunsTable td:nth-child(n){width:auto}
    #beaverRunsTable td:nth-child(1){grid-area:id;font-weight:700}
    #beaverRunsTable td:nth-child(2){grid-area:when;color:#8a8a9a}
    #beaverRunsTable td:nth-child(3){grid-area:target}
    #beaverRunsTable td:nth-child(4){grid-area:type}
    /* text-align/white-space arrive as inline styles on these cells — the
       stylesheet needs !important to re-flow them for the stacked layout. */
    #beaverRunsTable td:nth-child(5){grid-area:counts;text-align:left!important;white-space:normal!important}
    #beaverRunsTable td:nth-child(6){grid-area:result;justify-self:end}
    #beaverRunsTable td:nth-child(7){grid-area:runtime}
    /* Category cards: hide the desc line, give the bar its own bottom row. */
    .mk-cat-head{flex-wrap:wrap;row-gap:8px;padding:11px 12px}
    .mk-cat-desc{display:none}
    .mk-cat-bar{order:10;flex-basis:100%;width:auto}
    .mk-cat-body{padding:2px 8px 8px}
    /* Journey rows: name on its own line, markers/status/duration below it. */
    .mk-cat-body table,.mk-cat-body tbody{display:block}
    #beaverRunDetail tr.mk-jrow{display:grid;grid-template-columns:1fr auto auto;gap:3px 12px;align-items:baseline;padding:8px 2px;border-bottom:1px solid #14141e;
      grid-template-areas:"name name name" "marks status dur"}
    #beaverRunDetail tr.mk-jrow:last-child{border-bottom:none}
    #beaverRunDetail tr.mk-jrow td{width:auto;padding:0;border:none}
    #beaverRunDetail tr.mk-jrow td:nth-child(1){grid-area:name}
    #beaverRunDetail tr.mk-jrow td:nth-child(2){grid-area:marks}
    #beaverRunDetail tr.mk-jrow td:nth-child(3){grid-area:status}
    #beaverRunDetail tr.mk-jrow td:nth-child(4){grid-area:dur;text-align:right}
    #beaverRunDetail tr.mk-detail-row{display:block}
    #beaverRunDetail tr.mk-detail-row td{display:block;width:auto}
    .mk-detail-cell{padding:0 8px}
    .mk-shot{max-width:100%}
  }
  /* Phone-width only: full-width run buttons (fat tap targets) + tighter title. */
  @media(max-width:600px){
    .mk-beaver-title{font-size:1.08rem}
    .mk-beaver-runs{width:100%;flex-direction:column;align-items:stretch}
    .mk-beaver-runs .mk-btn{justify-content:center;padding:11px 16px}
    .mk-tb-select{max-width:100%}
  }
  .upd-btn-danger{background:#5e1a1a;border-color:#7a2a2a}
  .upd-btn:disabled{opacity:.4;cursor:not-allowed}
  .upd-btn-hint{font-size:.72rem;color:#666;text-align:center;margin:0;line-height:1.3}
  /* Operations board: 100%-wide live status + last-result panel below the 3 cards. */
  .ops-board{margin-top:18px;background:#12121a;border:1px solid #1e1e2e;border-radius:12px;padding:14px 16px}
  .ops-board-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;gap:10px;flex-wrap:wrap}
  .ops-board-header h4{margin:0;font-size:.72rem;color:#666;text-transform:uppercase;letter-spacing:1.2px;font-weight:600}
  .ops-board-meta{font-size:.74rem;color:#555}
  .ops-board-status{font-size:.86rem;color:#aaa;display:flex;align-items:center;gap:10px;min-height:24px}
  .ops-board-status .ops-spinner{display:inline-block;width:12px;height:12px;border:2px solid #2a2a3a;border-top-color:#a29bfe;border-radius:50%;animation:opsSpin .8s linear infinite;will-change:transform}
  @keyframes opsSpin{to{transform:rotate(360deg)}}
  /* Updates-tab Refresh button: the ↻ glyph spins while loadUpdates() is in
     flight (.8s linear — uniform with every other spinner on the page). */
  .upd-refresh-ico{display:inline-block;will-change:transform}
  #btnUpdatesRefresh.is-loading{cursor:progress;opacity:.75}
  #btnUpdatesRefresh.is-loading .upd-refresh-ico{animation:opsSpin .8s linear infinite}
  .ops-board-detail{margin-top:10px;font-size:.82rem;color:#888}
  .ops-board-detail:empty{display:none}
  /* Recent-updates feed (#recentUpdates) + deploy preview (#opsBoardDetail): each
     row is an inline `grid-template-columns:140px 1fr` key/value grid whose value
     cell holds comma-joined <code> file paths and pill <span>s. A path like
     `mintbot_updates/system/etc/systemd/system/…` is one unbreakable token
     (slashes aren't soft-wrap points), so on a phone its min-content sized the
     1fr track wider than the viewport and the filenames ran off the right edge.
     overflow-wrap:anywhere adds a break opportunity at any glyph — which also
     lowers min-content, letting the track shrink so the paths wrap in-card. */
  #recentUpdates code,#recentUpdates span,
  #opsBoardDetail code,#opsBoardDetail span{overflow-wrap:anywhere}
  .stat-groups-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:20px;margin-bottom:20px}
  .stat-groups-row.cols-3{grid-template-columns:1fr 1fr 1fr}
  @media(max-width:900px){.stat-groups-row{grid-template-columns:1fr 1fr !important}}
  @media(max-width:500px){.stat-groups-row{grid-template-columns:1fr !important}}
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:24px}
  .stat-card{background:#12121a;border:1px solid #1e1e2e;border-radius:12px;padding:18px;animation:fadeUp .5s ease both}
  .stat-card:nth-child(1){animation-delay:.05s}.stat-card:nth-child(2){animation-delay:.1s}.stat-card:nth-child(3){animation-delay:.15s}
  .stat-card:nth-child(4){animation-delay:.2s}.stat-card:nth-child(5){animation-delay:.25s}.stat-card:nth-child(6){animation-delay:.3s}
  .stat-card .icon{font-size:1.4rem;margin-bottom:6px}
  .stat-card .value{font-size:1.8rem;font-weight:700;color:#fff}
  .stat-card .label{font-size:.75rem;color:#888;margin-top:4px;text-transform:uppercase;letter-spacing:1px}
  .stat-card .sub{font-size:.72rem;color:#8f93a2;margin-top:6px;line-height:1.35}
  @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

  /* Charts */
  .charts-row{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:24px}
  .traffic-charts{grid-template-columns:repeat(4,1fr)}
  @media(max-width:1500px){.traffic-charts{grid-template-columns:1fr 1fr}}
  @media(max-width:1100px){.traffic-charts{grid-template-columns:1fr !important}}
  .chart-box{background:#12121a;border:1px solid #1e1e2e;border-radius:12px;padding:18px}
  .chart-box h3{font-size:.95rem;color:#aaa;margin-bottom:14px;font-weight:500}
  .chart-box canvas{width:100%!important}

  /* Tables/Lists */
  .bottom-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
  .panel{background:#12121a;border:1px solid #1e1e2e;border-radius:12px;padding:18px;overflow:hidden}
  .panel h3{font-size:.95rem;color:#aaa;margin-bottom:14px;font-weight:500}
  table{width:100%;border-collapse:collapse;font-size:.82rem}
  th{text-align:left;color:#666;font-weight:500;padding:7px 10px;border-bottom:1px solid #1e1e2e;text-transform:uppercase;font-size:.72rem;letter-spacing:1px}
  td{padding:7px 10px;border-bottom:1px solid #111118;color:#ccc}
  .badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:.72rem;font-weight:600}
  .badge-view{background:rgba(108,92,231,.2);color:#a29bfe}
  .badge-click{background:rgba(0,206,209,.2);color:#00ced1}
  .badge-bot{background:rgba(150,150,150,.2);color:#999}
  .badge-other{background:rgba(255,255,255,.1);color:#888}
  .ref-list{list-style:none}
  .ref-list li{padding:8px 0;border-bottom:1px solid #111118;display:flex;justify-content:space-between;font-size:.85rem}
  .ref-list li .count{color:#6c5ce7;font-weight:600}
  .ref-list li .url{color:#ccc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%}
  .table-wrap{max-height:500px;overflow-y:auto}

  /* Orders */
  .orders-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:20px}
  .order-stat{background:#12121a;border:1px solid #1e1e2e;border-radius:10px;padding:16px;text-align:center}
  .order-stat .val{font-size:1.5rem;font-weight:700;color:#fff}
  .order-stat .lbl{font-size:.72rem;color:#888;text-transform:uppercase;letter-spacing:1px;margin-top:4px}
  .order-stat.revenue .val{color:#00c853}
  .order-stat.paid .val{color:#6c5ce7}

  /* Status badges */
  .badge-paid{background:rgba(108,92,231,.2);color:#a29bfe}
  .badge-pending{background:rgba(253,203,110,.2);color:#fdcb6e}
  .badge-expired{background:rgba(255,107,107,.2);color:#ff6b6b}
  .badge-200{background:rgba(0,200,83,.15);color:#00c853}
  .badge-401,.badge-403{background:rgba(255,107,107,.2);color:#ff6b6b}
  .badge-404{background:rgba(253,203,110,.2);color:#fdcb6e}
  .badge-500{background:rgba(255,0,0,.2);color:#ff4444}


  /* Agents tab */
  .fleet-llm-overview{background:#12121a;border:1px solid #1e1e2e;border-radius:12px;padding:18px 22px;margin-bottom:20px}
  .fleet-llm-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
  .fleet-llm-title{font-size:.78rem;color:#888;text-transform:uppercase;letter-spacing:1.2px;font-weight:600}
  .fleet-llm-badge{font-size:.7rem;color:#a29bfe;background:rgba(108,92,231,.15);border:1px solid rgba(108,92,231,.25);border-radius:20px;padding:3px 12px;font-weight:500}
  .fleet-llm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:center}
  .fleet-metric-val{font-size:1.6rem;font-weight:700}
  .fleet-metric-lbl{font-size:.65rem;color:#666;text-transform:uppercase;letter-spacing:.8px;margin-top:2px}
  .fleet-metric-sub{font-size:.68rem;color:#555;margin-top:4px}
  .fleet-llm-grid-4{grid-template-columns:repeat(4,1fr)}
  .proxy-overview-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:20px}
  @media(max-width:900px){.proxy-overview-row{grid-template-columns:1fr}}
  @media(max-width:500px){.fleet-llm-grid{grid-template-columns:1fr}.fleet-llm-grid-4{grid-template-columns:repeat(2,1fr)}}
  /* Overview panels (Fleet + Economics) */
  .agents-overview{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}
  @media(max-width:760px){.agents-overview{grid-template-columns:1fr}}
  .ov-panel{background:linear-gradient(145deg,#15151f,#0e0e16);border:1px solid #1e1e2e;border-radius:14px;padding:16px 18px}
  .ov-panel:hover{border-color:#2a2a3a}
  .ov-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
  .ov-title{font-size:.78rem;color:#ececf1;font-weight:700;letter-spacing:.4px}
  .ov-sub{font-size:.68rem;color:#70758a;font-weight:600;text-transform:uppercase;letter-spacing:.6px}
  .ov-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center}
  @media(max-width:500px){.ov-grid{grid-template-columns:repeat(2,1fr)}}
  .ov-stat{background:#0a0a12;border:1px solid #141424;border-radius:10px;padding:10px 6px}
  .ov-val{font-size:1.35rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
  .ov-lbl{font-size:.6rem;color:#70758a;text-transform:uppercase;letter-spacing:.7px;margin-top:4px;font-weight:600}
  .badge-running{background:rgba(0,200,83,.2);color:#00c853}
  .badge-deploying{background:rgba(0,206,201,.2);color:#00cec9}
  .badge-waiting_for_bot{background:rgba(253,203,110,.2);color:#fdcb6e}
  .badge-deploy_failed{background:rgba(255,107,107,.2);color:#ff6b6b}
  .badge-completed{background:rgba(0,206,201,.2);color:#00cec9}
  .badge-credit_added{background:rgba(0,200,83,.15);color:#00c853}
  .badge-pending2{background:rgba(255,255,255,.1);color:#888}
  .badge-deleted{background:rgba(255,255,255,.08);color:#666}
  .badge-terminated{background:rgba(255,107,107,.15);color:#e17055}
  .badge-test{background:rgba(162,155,254,.2);color:#a29bfe}
  /* Agent cards — refreshed layout */
  .agent-detail{position:relative;background:#12121a;border:1px solid #1e1e2e;border-radius:14px;padding:14px 16px 12px 20px;margin-bottom:12px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
  .agent-detail:hover{border-color:#2a2a3a;box-shadow:0 4px 14px rgba(0,0,0,.25)}
  .agent-detail::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#2a2a3a;transition:background .2s}
  .agent-detail[data-status="running"]::before{background:linear-gradient(180deg,#00c853,#00e676)}
  .agent-detail[data-status="deploying"]::before{background:linear-gradient(180deg,#00cec9,#00ced1)}
  .agent-detail[data-status="paid"]::before,.agent-detail[data-status="pending"]::before,.agent-detail[data-status="waiting_for_bot"]::before{background:#fdcb6e}
  .agent-detail[data-status="expired"]::before,.agent-detail[data-status="deleted"]::before,.agent-detail[data-status="terminated"]::before{background:#4a4a5a}
  .agent-detail[data-status="deploy_failed"]::before,.agent-detail[data-status="failed"]::before{background:#ff6b6b}
  .agent-detail[data-internal="1"]::before{background:linear-gradient(180deg,#0984e3,#74b9ff)}
  .agent-detail[data-partner="1"]::before{background:linear-gradient(180deg,#17dc94,#6bce95)}

  .agent-detail .btn-details{display:inline-block;padding:4px 12px;font-size:.7rem;color:#a29bfe;background:rgba(108,92,231,.12);border:1px solid rgba(108,92,231,.3);border-radius:6px;cursor:pointer;transition:all .2s;user-select:none}
  .agent-detail .btn-details:hover{background:rgba(108,92,231,.25);border-color:#6c5ce7}
  .agent-detail .btn-details.open{background:rgba(108,92,231,.2);color:#ccc}
  .agent-detail .btn-deploy-log{display:inline-block;padding:4px 10px;font-size:.7rem;color:#888;background:rgba(255,255,255,.04);border:1px solid #1e1e2e;border-radius:6px;cursor:pointer;transition:all .2s;user-select:none}
  .agent-detail .btn-deploy-log:hover{color:#ccc;border-color:#2a2a3a}
  .agent-detail .btn-panel-link{display:inline-block;padding:4px 10px;font-size:.7rem;color:#a29bfe;background:rgba(108,92,231,.08);border:1px solid rgba(108,92,231,.25);border-radius:6px;text-decoration:none;transition:all .2s;margin-left:8px}
  .agent-detail .btn-panel-link:hover{background:rgba(108,92,231,.18);color:#fff;border-color:#6c5ce7}
  .agent-detail .btn-push-update-all{display:inline-block;padding:4px 10px;font-size:.7rem;color:#fdcb6e;background:rgba(253,203,110,.08);border:1px solid rgba(253,203,110,.25);border-radius:6px;cursor:pointer;transition:all .2s;user-select:none;margin-left:8px}
  .agent-detail .btn-push-update-all:hover{background:rgba(253,203,110,.18);color:#fff;border-color:#fdcb6e}
  .agent-detail .btn-push-update-all[disabled]{cursor:default;opacity:.6}
  .agent-detail .btn-extend-life{display:inline-block;padding:4px 10px;font-size:.7rem;color:#7aecb1;background:rgba(0,200,83,.08);border:1px solid rgba(0,200,83,.25);border-radius:6px;cursor:pointer;transition:all .2s;user-select:none;margin-left:8px}
  .agent-detail .btn-extend-life:hover{background:rgba(0,200,83,.18);color:#fff;border-color:#00c853}
  .agent-detail .btn-extend-life[disabled]{cursor:default;opacity:.6}
  .agent-detail .btn-add-credit{display:inline-block;padding:4px 10px;font-size:.7rem;color:#74b9ff;background:rgba(116,185,255,.08);border:1px solid rgba(116,185,255,.25);border-radius:6px;cursor:pointer;transition:all .2s;user-select:none;margin-left:8px}
  .agent-detail .btn-add-credit:hover{background:rgba(116,185,255,.18);color:#fff;border-color:#74b9ff}
  .agent-detail .btn-add-credit[disabled]{cursor:default;opacity:.6}

  /* Header */
  .ac-header{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:flex-start}
  /* Base tile — shared layout. Brand variants below tweak colors so a
     glance at the agent list tells you which zone each agent lives on:
     mintbot (purple), partner (green w/ 🌐 + apex), internal (blue). */
  .ac-id-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;padding:6px 10px;min-width:60px;max-width:200px;flex-shrink:0;text-align:center}
  .ac-id-tile .hash{font-size:.58rem;text-transform:uppercase;letter-spacing:1.2px;line-height:1.1;font-weight:700;display:inline-flex;align-items:center;gap:4px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ac-id-tile .hash .brand-ico{font-size:.78rem;opacity:.95;letter-spacing:0}
  .ac-id-tile .num{font-weight:800;font-size:1rem;line-height:1.15;margin-top:3px;font-variant-numeric:tabular-nums;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ac-id-tile .aid-sub{font-size:.6rem;color:#5d6275;margin-top:2px;font-variant-numeric:tabular-nums;letter-spacing:.5px}
  /* mintbot — purple (legacy look) */
  .ac-id-tile.mintbot{background:linear-gradient(135deg,rgba(108,92,231,.22),rgba(108,92,231,.06));border:1px solid rgba(108,92,231,.35)}
  .ac-id-tile.mintbot .hash{color:#a29bfeaa}
  .ac-id-tile.mintbot .num{color:#a29bfe}
  /* partner — mint-green so the eye picks them out instantly */
  .ac-id-tile.partner{background:linear-gradient(135deg,rgba(23,220,148,.22),rgba(23,220,148,.05));border:1px solid rgba(23,220,148,.4)}
  .ac-id-tile.partner .hash{color:#6bce95cc}
  .ac-id-tile.partner .num{color:#7aecb1;font-family:'SF Mono',Monaco,Consolas,monospace;font-size:.92rem}
  /* internal — blue (matches the existing `data-internal` accent stripe) */
  .ac-id-tile.internal{background:linear-gradient(135deg,rgba(9,132,227,.22),rgba(9,132,227,.05));border:1px solid rgba(116,185,255,.4)}
  .ac-id-tile.internal .hash{color:#74b9ffcc}
  .ac-id-tile.internal .num{color:#74b9ff}
  .ac-title{min-width:0}
  .ac-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.25}
  .ac-name{color:#ececf1;font-weight:600;font-size:.96rem;overflow:hidden;text-overflow:ellipsis}
  .ac-source{background:#1a1a2e;color:#8f93a2;font-size:.64rem;padding:2px 7px;border-radius:5px;letter-spacing:.3px;text-transform:lowercase;font-weight:600}
  .ac-bot{color:#888;font-size:.74rem;font-family:'SF Mono',Monaco,monospace}
  .ac-meta-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.72rem;color:#808191;margin-top:5px}
  .ac-meta-row .mi{display:inline-flex;align-items:center;gap:4px}
  .ac-meta-row .ip{font-family:'SF Mono',Monaco,monospace;color:#a7afc2}
  .ac-meta-row .credit{color:#00e676;font-weight:600}
  .ac-meta-row .pay{color:#a29bfe;background:rgba(108,92,231,.1);padding:1px 7px;border-radius:5px;font-size:.64rem;letter-spacing:.3px;font-weight:600}
  .ac-meta-row .coding{color:#c5b4ff;background:rgba(168,142,255,.1);padding:1px 7px;border-radius:5px;font-weight:500}
  .ac-meta-row .tg{color:#7ec8e3;background:rgba(0,136,204,.12);padding:1px 7px;border-radius:5px;font-weight:500}
  .ac-meta-row .sep{color:#2a2a3a}
  /* Top-row inline group: used+tier+status badge align on a single line; the
     subscription chip (one-time / 🔁 …) drops to its own row below. */
  .ac-badges{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
  .ac-badges-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
  .ac-lastused{font-size:.66rem;color:#8f93a2;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.2px}
  .ac-lastused.dim{color:#5d6275}
  .ac-lastused .lu-pre{color:#6a6f80;margin-right:3px}
  /* Agent name (client-set, read-only here) — small chip next to the user's first name */
  .ac-agent-name{font-size:.7rem;padding:2px 8px;border-radius:5px;background:rgba(122,236,177,.10);color:#7aecb1;border:1px solid rgba(122,236,177,.22);white-space:nowrap;cursor:default;font-weight:500}
  .ac-agent-name[title]{cursor:help}
  /* Internal label (CatOffice-only, editable) — purple tag chip */
  .agent-label{font-size:.66rem;padding:3px 8px;border-radius:6px;cursor:pointer;white-space:nowrap;transition:opacity .15s}
  .agent-label.has-label{background:rgba(108,92,231,.15);color:#a29bfe;border:1px solid rgba(108,92,231,.3)}
  .agent-label:not(.has-label){background:transparent;color:#555;border:1px dashed #2a2a3a;font-style:italic}
  .agent-label:hover{opacity:.75}
  .agent-testbed{font-size:.66rem;padding:3px 8px;border-radius:6px;cursor:pointer;white-space:nowrap;transition:opacity .15s;background:transparent;color:#8a8270;border:1px dashed #3a3528}
  .agent-testbed.is-on{background:rgba(240,166,74,.15);color:#f0a64a;border:1px solid rgba(240,166,74,.4);font-weight:700}
  .agent-testbed:hover{opacity:.75}

  /* KPI tiles */
  .ac-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
  .ac-kpi{background:#0c0c16;border:1px solid #17172a;border-radius:10px;padding:8px 10px;position:relative;overflow:hidden}
  .ac-kpi .klbl{font-size:.58rem;color:#70758a;text-transform:uppercase;letter-spacing:.7px;margin-bottom:3px;font-weight:600}
  .ac-kpi .kval{font-size:1rem;font-weight:700;color:#e0e0e0;line-height:1.1;font-variant-numeric:tabular-nums}
  .ac-kpi .ksub{font-size:.6rem;color:#5d6275;margin-top:2px}
  .ac-kpi.profit-pos{background:linear-gradient(135deg,rgba(0,200,83,.15),rgba(0,200,83,.03));border-color:rgba(0,200,83,.3)}
  .ac-kpi.profit-pos .kval{color:#00e676}
  .ac-kpi.profit-neg{background:linear-gradient(135deg,rgba(255,107,107,.15),rgba(255,107,107,.03));border-color:rgba(255,107,107,.3)}
  .ac-kpi.profit-neg .kval{color:#ff8a8a}
  .ac-kpi.revenue .kval{color:#a29bfe}
  .ac-kpi.cost .kval{color:#ff9e9e}
  .ac-kpi.server .kval{color:#9adfff}

  /* Usage bar */
  .ac-usage{margin-top:10px;background:#0a0a12;border:1px solid #141424;border-radius:8px;padding:8px 12px}
  .ac-usage .uhead{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.66rem;color:#808191;margin-bottom:6px;flex-wrap:wrap}
  .ac-usage .uhead .ulabel{color:#b0b3c4;font-weight:500;text-transform:uppercase;letter-spacing:.5px}
  .ac-usage .uhead .unums{font-variant-numeric:tabular-nums}
  .ac-usage .uhead .unums .used{color:#ff9e9e}
  .ac-usage .uhead .unums .rem{color:#7aecb1}
  .ac-usage .uhead .unums .tot{color:#70758a}
  .ac-usage .utrack{height:6px;background:#15152a;border-radius:4px;overflow:hidden}
  .ac-usage .ufill{height:100%;border-radius:4px;transition:width .4s ease}
  .ac-usage .ufill.green{background:linear-gradient(90deg,#00c853,#00e676)}
  .ac-usage .ufill.yellow{background:linear-gradient(90deg,#fdcb6e,#e17055)}
  .ac-usage .ufill.red{background:linear-gradient(90deg,#ff6b6b,#e74c3c)}

  /* Footer */
  .ac-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:10px;flex-wrap:wrap}
  .ac-footer .toggles{display:flex;gap:6px;align-items:center}
  .ac-footer .pl{font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums}

  /* Expand */
  .agent-expand{display:none;margin-top:12px;padding:14px;background:#08080f;border:1px solid #141424;border-radius:10px}
  .agent-detail.open .agent-expand{display:block}
  .ac-sub{background:#0c0c16;border:1px solid #17172a;border-radius:8px;padding:10px 12px}
  .ac-sub h5{font-size:.64rem;color:#70758a;text-transform:uppercase;letter-spacing:.7px;margin-bottom:8px;font-weight:700;display:flex;align-items:center;gap:6px}
  .ac-sub .row{display:grid;grid-template-columns:1fr auto;gap:2px 12px;font-size:.74rem;font-variant-numeric:tabular-nums}
  .ac-sub .row .k{color:#8f93a2}
  .ac-sub .row .v{color:#ccc;text-align:right}
  .ac-sub .row .total-k{color:#e0e0e0;font-weight:700;border-top:1px solid #1e1e2e;padding-top:4px;margin-top:2px}
  .ac-sub .row .total-v{text-align:right;font-weight:700;border-top:1px solid #1e1e2e;padding-top:4px;margin-top:2px}
  .ac-sub.cost .row .total-k,.ac-sub.cost .row .total-v{color:#ff9e9e}
  .ac-sub.revenue .row .total-k,.ac-sub.revenue .row .total-v{color:#00e676}
  .ac-expand-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  @media(max-width:760px){.ac-expand-grid{grid-template-columns:1fr}}
  /* Profit & loss ledger (Revenue / Costs / Profit) */
  .ac-ledger{background:#0c0c16;border:1px solid #17172a;border-radius:10px;padding:14px 16px}
  .ac-ledger>h5{font-size:.64rem;color:#70758a;text-transform:uppercase;letter-spacing:.7px;margin-bottom:12px;font-weight:700;display:flex;align-items:center;gap:6px}
  .ledger-cols{display:grid;grid-template-columns:1fr 1fr;gap:6px 26px}
  @media(max-width:680px){.ledger-cols{grid-template-columns:1fr;gap:18px}}
  .ledger-col{display:flex;flex-direction:column;min-width:0}
  .lc-head{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid #1e1e2e;display:flex;align-items:center;gap:6px}
  .ledger-col.revenue .lc-head{color:#00e676}
  .ledger-col.cost .lc-head{color:#ff8a8a}
  .lc-row{display:grid;grid-template-columns:7em 1.25em 1fr auto;gap:9px;align-items:baseline;font-size:.74rem;padding:3px 0;font-variant-numeric:tabular-nums;border-bottom:1px solid #121220}
  .lc-row:last-of-type{border-bottom:none}
  .lc-row .ic{width:1.25em;text-align:center;flex:none}
  .lc-row .t{color:#5d6275;font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lc-row .d{color:#c3c7d2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lc-row .a{text-align:right;font-weight:600;white-space:nowrap}
  .ledger-col.revenue .lc-row .a{color:#5fd99a}
  .ledger-col.cost .lc-row .a{color:#ff9e9e}
  .lc-empty{color:#5d6275;font-size:.74rem;padding:4px 0;font-style:italic}
  .lc-subtotal{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:7px;border-top:1px solid #1e1e2e}
  .lc-subtotal .lbl{color:#8f93a2;text-transform:uppercase;letter-spacing:.5px;font-size:.6rem;font-weight:700}
  .lc-subtotal .val{font-size:.82rem;font-weight:700;font-variant-numeric:tabular-nums}
  .ledger-col.revenue .lc-subtotal .val{color:#00e676}
  .ledger-col.cost .lc-subtotal .val{color:#ff8a8a}
  .ledger-profit{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:11px 16px;border-radius:8px}
  .ledger-profit.pos{background:linear-gradient(135deg,rgba(0,200,83,.15),rgba(0,200,83,.03));border:1px solid rgba(0,200,83,.3)}
  .ledger-profit.neg{background:linear-gradient(135deg,rgba(255,107,107,.15),rgba(255,107,107,.03));border:1px solid rgba(255,107,107,.3)}
  .ledger-profit .lbl{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#cfd3dc}
  .ledger-profit .val{font-size:1.18rem;font-weight:800;font-variant-numeric:tabular-nums}
  .ledger-profit.pos .val{color:#00e676}
  .ledger-profit.neg .val{color:#ff8a8a}

  /* Inline tags inside the header right column */
  .ac-tag{display:inline-flex;align-items:center;font-size:.62rem;font-weight:700;letter-spacing:.5px;padding:2px 8px;border-radius:6px;text-transform:uppercase;line-height:1.4}
  .ac-tag.internal{background:rgba(9,132,227,.18);color:#74b9ff;border:1px solid rgba(116,185,255,.35)}
  .ac-tag.partner{background:rgba(23,220,148,.16);color:#6bce95;border:1px solid rgba(23,220,148,.4)}
  .ac-tag.tier{background:rgba(108,92,231,.18);color:#a29bfe;border:1px solid rgba(108,92,231,.4)}
  .ac-tag.fake-vps{background:rgba(253,203,110,.16);color:#fdcb6e;border:1px dashed rgba(253,203,110,.55)}
  .ac-tag.beaver{background:rgba(240,166,74,.15);color:#f0a64a;border:1px solid rgba(240,166,74,.4)}
  /* Panel bundle version + last-heartbeat label (sits beside the subscription
     chip on the agent card's right rail). Rendered as plain text — no frame,
     no fill — so "v45 · 2h" reads as data, not a chip; muted when no
     heartbeat has landed yet. */
  .ac-tag.panelver{background:none;color:#9ec5e8;border:none;padding:2px 2px;text-transform:none;letter-spacing:.2px;font-weight:600;font-variant-numeric:tabular-nums}
  .ac-tag.panelver.none{background:none;color:#6c7080;border:none}
  .ac-subrow{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}

  /* Models-today list inside expand */
  .agent-models-today{background:#0c0c16;border:1px solid #17172a;border-radius:8px;padding:10px 12px}
  .agent-models-today .model-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:.72rem}
  .agent-models-today .model-name{color:#a29bfe;font-family:'SF Mono',Monaco,monospace;font-size:.7rem}
  .agent-models-today .model-stats{color:#888}
  .agent-models-today .model-stats span{margin-left:10px}

  /* Mobile card adjustments */
  @media(max-width:680px){
    .ac-header{grid-template-columns:auto 1fr;grid-template-rows:auto auto}
    .ac-badges{grid-column:1 / -1;justify-content:flex-start;margin-top:4px}
    .ac-kpis{grid-template-columns:repeat(2,1fr)}
  }

  /* ---- Compact agents list (master view) ---- */
  .agents-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
  .agents-search{flex:1 1 220px;min-width:0;padding:8px 12px;background:#0c0c14;border:1px solid #1e1e2e;border-radius:8px;color:#e0e0e0;font-size:.82rem;outline:none;transition:border-color .15s}
  .agents-search::placeholder{color:#555}
  .agents-search:focus{border-color:#6c5ce7}
  .agents-count-chip{font-size:.7rem;color:#70758a;background:#0c0c14;border:1px solid #1e1e2e;padding:6px 10px;border-radius:8px;font-variant-numeric:tabular-nums;white-space:nowrap}
  /* shared column template for the agents "table" — header + every row read --ag-cols */
  #agentsListPane{--ag-cols:minmax(150px,1.7fr) minmax(98px,1.2fr) minmax(86px,1.05fr) minmax(112px,1.1fr) 74px 96px minmax(88px,.85fr)}
  .agents-thead{display:grid;grid-template-columns:var(--ag-cols);gap:12px;align-items:center;padding:2px 14px 7px 18px;font-size:.58rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#5d6275;border-bottom:1px solid #1c1c2a;margin-bottom:7px;position:sticky;top:0;background:#0b0b12;z-index:3}
  .agents-thead>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .agents-thead>span[data-sort]{cursor:pointer;user-select:none;transition:color .12s}
  .agents-thead>span[data-sort]:hover{color:#9aa0b5}
  .agents-thead>span.sorted{color:#a29bfe}

  .agent-row{position:relative;display:grid;grid-template-columns:var(--ag-cols);gap:12px;align-items:center;background:#10101a;border:1px solid #1c1c2a;border-radius:10px;padding:9px 14px 9px 18px;margin-bottom:5px;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;overflow:hidden}
  .agent-row:hover{background:#15151f;border-color:#2a2a3a}
  .agent-row:active{transform:scale(.998)}
  .agent-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#2a2a3a}
  .agent-row[data-status="running"]::before{background:linear-gradient(180deg,#00c853,#00e676)}
  .agent-row[data-status="deploying"]::before{background:linear-gradient(180deg,#00cec9,#00ced1)}
  .agent-row[data-status="paid"]::before,.agent-row[data-status="pending"]::before,.agent-row[data-status="waiting_for_bot"]::before{background:#fdcb6e}
  .agent-row[data-status="expired"]::before,.agent-row[data-status="deleted"]::before,.agent-row[data-status="terminated"]::before{background:#4a4a5a}
  .agent-row[data-status="deploy_failed"]::before,.agent-row[data-status="failed"]::before{background:#ff6b6b}
  .agent-row[data-internal="1"]::before{background:linear-gradient(180deg,#0984e3,#74b9ff)}
  .agent-row[data-partner="1"]::before{background:linear-gradient(180deg,#17dc94,#6bce95)}

  /* generic table cell — single line, ellipsised so columns line up */
  .ar-c{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ar-domain{display:flex;flex-wrap:wrap;align-items:center;gap:6px;overflow:visible;white-space:normal}
  .ar-dom-name{font-family:'SF Mono',Monaco,Consolas,monospace;font-size:.82rem;color:#ececf1;font-weight:600;word-break:break-all}
  .ar-domain .ar-host-dim{color:#6a6f80}
  /* Descriptive tags live next to the agent URL (tier / No VPS / Internal / Partner / testbed) */
  .ar-tags{display:inline-flex;gap:4px;flex-wrap:wrap;align-items:center;font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
  .ar-owner{font-size:.72rem;color:#b0b3c4}
  .ar-owner .ar-uname{color:#5d6275}
  .ar-label{font-size:.7rem;color:#7aecb1}
  .ar-label .lbl-int{color:#a29bfe}
  .ar-c.empty{color:#393f4f}
  .ar-statuscell{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0}
  .ar-chip{display:inline-flex;align-items:center;gap:3px;font-size:.6rem;font-weight:700;padding:1px 6px;border-radius:5px;letter-spacing:.3px;white-space:nowrap;text-transform:uppercase}
  .ar-chip.tier{background:rgba(108,92,231,.15);color:#a29bfe}
  .ar-chip.internal{background:rgba(9,132,227,.15);color:#74b9ff}
  .ar-chip.partner{background:rgba(23,220,148,.13);color:#6bce95}
  .ar-chip.sub{background:rgba(0,200,83,.12);color:#7aecb1}
  .ar-chip.sub.cancel{background:rgba(74,74,90,.25);color:#9aa}
  .ar-chip.fake{background:rgba(253,203,110,.13);color:#fdcb6e}
  .ar-chip.beaver{background:rgba(240,166,74,.15);color:#f0a64a}
  .vpsprov.sporestack{background:rgba(0,206,201,.13);color:#5fd0cb}
  .vpsprov.hetzner{background:rgba(208,30,30,.15);color:#ff7a7a}
  .ar-status{display:inline-flex;align-items:center;font-size:.6rem;font-weight:700;padding:1px 6px;border-radius:5px;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap}
  .ar-exp{font-size:.66rem;color:#70758a;font-variant-numeric:tabular-nums}
  .ar-exp.warn{color:#fdcb6e}
  .ar-exp.danger{color:#ff6b6b}
  .ar-used{font-size:.62rem;color:#5d6275;font-variant-numeric:tabular-nums}

  /* Payment column — method pill + subscription badge */
  .ar-pay{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0}
  .ar-paym{display:inline-flex;align-items:center;gap:3px;font-size:.6rem;font-weight:700;padding:1px 6px;border-radius:5px;letter-spacing:.2px;white-space:nowrap;text-transform:uppercase;background:rgba(120,120,140,.12);color:#aeb2c4}
  .ar-paym.card{background:rgba(108,92,231,.15);color:#a29bfe}
  .ar-paym.crypto,.ar-paym.btc,.ar-paym.xmr{background:rgba(247,147,26,.13);color:#f0a64a}
  .ar-paym.paypal{background:rgba(0,156,222,.14);color:#4aa8e0}
  .ar-paym.gift{background:rgba(0,200,83,.12);color:#7aecb1}
  .ar-paym.usd{background:rgba(23,220,148,.13);color:#6bce95}
  .ar-paym.pending,.ar-paym.none{background:rgba(120,120,140,.1);color:#6a6f80}
  .ar-chip.sub.pastdue{background:rgba(253,203,110,.16);color:#fdcb6e}
  .ar-chip.sub.dead{background:rgba(74,74,90,.22);color:#8a8f9f}

  @media(max-width:720px){
    /* collapse the table into a 2-zone card: info stack on the left, expiry+used on the right */
    .agents-thead{display:none}
    #agentsListPane{--ag-cols:1fr auto}
    .agent-row{padding:9px 12px 9px 15px;gap:3px 12px;align-items:start;
      grid-template-areas:"domain exp" "owner used" "label ." "status ." "pay ."}
    .ar-domain{grid-area:domain;font-size:.8rem}
    .ar-owner{grid-area:owner}
    .ar-label{grid-area:label}
    .ar-statuscell{grid-area:status;margin-top:2px}
    .ar-pay{grid-area:pay;margin-top:2px}
    .ar-exp{grid-area:exp;justify-self:end}
    .ar-used{grid-area:used;justify-self:end}
    .ar-c.empty{display:none}
    .agents-search{font-size:.78rem;padding:7px 10px}
  }

  /* ---- Detail pane (single-agent focus view) ---- */
  .agents-detail-pane{display:none}
  .agents-detail-pane.active{display:block}
  .agents-back-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid #2a2a3a;color:#a29bfe;font-size:.78rem;font-weight:600;padding:7px 13px;border-radius:8px;cursor:pointer;margin-bottom:14px;transition:all .15s}
  .agents-back-btn:hover{background:rgba(108,92,231,.10);border-color:#6c5ce7;color:#fff}
  .agents-detail-pane .agent-detail{margin-bottom:0}
  /* In detail mode the card is always fully expanded — hide the toggle button */
  .agents-detail-pane .agent-detail .agent-expand{display:block}
  .agents-detail-pane .agent-detail .btn-details{display:none}
  .cat-mascot{display:flex;align-items:center;gap:16px;background:#12121a;border:1px solid #1e1e2e;border-radius:12px;padding:14px 20px;margin-bottom:20px}
  .cat-mascot img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid #6c5ce7}
  .cat-mascot .msg{color:#aaa;font-size:.88rem}
  .deploy-log-pre{background:#0a0a0f;border:1px solid #1e1e2e;border-radius:8px;padding:12px;font-family:'SF Mono',Monaco,monospace;font-size:.72rem;color:#888;max-height:200px;overflow-y:auto;white-space:pre-wrap;margin-top:8px}

  /* Funnel */
  .funnel-step{display:grid;grid-template-columns:160px 1fr 60px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #111118}
  .funnel-step:last-child{border-bottom:none}
  .funnel-step .step-label{font-size:.82rem;color:#ccc;font-weight:500}
  .funnel-step .step-bar-wrap{position:relative;height:28px;background:#1a1a2e;border-radius:6px;overflow:hidden}
  .funnel-step .step-bar{height:100%;border-radius:6px;transition:width .6s ease;min-width:2px}
  .funnel-step .step-bar-text{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:.72rem;color:#fff;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.5)}
  .funnel-step .step-count{font-size:1.1rem;font-weight:700;color:#fff;text-align:right}
  .funnel-step .step-pct{font-size:.7rem;color:#888;text-align:right}
  .badge-deployed{background:rgba(0,150,50,.2);color:#00963a}
  .funnel-periods{display:flex;gap:4px;position:relative}
  .fp-btn{padding:5px 12px;border:1px solid #2a2a3a;background:#1a1a2e;color:#888;border-radius:6px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .15s}
  .fp-btn:hover{color:#ccc;border-color:#444}
  .fp-btn.active{background:#6c5ce7;color:#fff;border-color:#6c5ce7}
  /* Custom date/time range popup (Conversion Funnel) */
  .funnel-range-popup{position:absolute;top:calc(100% + 6px);right:0;z-index:60;display:flex;flex-direction:column;gap:10px;min-width:230px;padding:14px;background:#12121c;border:1px solid #2a2a3a;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.55)}
  .funnel-range-popup label{display:flex;flex-direction:column;gap:4px;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#888}
  .funnel-range-popup input[type=datetime-local]{background:#1a1a2e;border:1px solid #2a2a3a;color:#eee;border-radius:6px;padding:6px 8px;font-size:.8rem;color-scheme:dark}
  .funnel-range-popup input[type=datetime-local]:focus{outline:none;border-color:#6c5ce7}
  .funnel-range-popup .frp-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:2px}
  .funnel-range-popup .frp-apply{background:#6c5ce7;color:#fff;border-color:#6c5ce7}
  .funnel-range-popup .frp-apply:hover{background:#5a4bd4;color:#fff;border-color:#5a4bd4}
  .funnel-range-caption{font-size:.72rem;font-weight:600;color:#8a7fff;margin-bottom:10px}

  /* Mono */
  .mono{font-family:'SF Mono',Monaco,Consolas,monospace;font-size:.78rem;color:#a29bfe}
  .ip{font-family:'SF Mono',Monaco,Consolas,monospace;font-size:.78rem;color:#888}

  /* Loading */
  .loading{display:flex;align-items:center;justify-content:center;padding:60px;color:#555}
  .spinner{width:24px;height:24px;border:3px solid #1e1e2e;border-top-color:#6c5ce7;border-radius:50%;animation:spin .8s linear infinite;margin-right:12px;will-change:transform}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* ---- Bees tab ---- */
  .bee-card{background:#12121a;border:1px solid #1e1e2e;border-radius:12px;padding:16px 18px;margin-bottom:14px;position:relative}
  .bee-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:6px}
  .bee-head-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .bee-head-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .bee-stat{font-size:.86rem;color:#ddd;font-weight:600}
  .bee-slug{background:rgba(255,217,102,.14);color:#ffd966;padding:3px 10px;border-radius:10px;font-size:.82rem;font-weight:700;letter-spacing:.2px}
  .bee-slug-unset{color:#888;background:rgba(255,255,255,.05)}
  /* Two-tone URL chip: muted brand domain on the left, bright slug on the right.
     Lets the admin see *whose* slug it is at a glance without the brand half
     hijacking attention. */
  .bee-url{display:inline-flex;align-items:baseline;background:rgba(255,217,102,.10);border:1px solid rgba(255,217,102,.18);padding:3px 10px;border-radius:10px;font-size:.82rem;font-weight:700;letter-spacing:.2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  .bee-url .bee-url-host{color:rgba(255,217,102,.45);font-weight:500}
  .bee-url .bee-url-slug{color:#ffd966}
  .bee-url-sm{font-size:.76rem;padding:2px 8px}
  /* "Came in via" chip — shown on sub-bee cards (in the Bees tab) so admins
     see which parent's hive the bee belongs to without expanding details. */
  .bee-parent-chip{display:inline-flex;align-items:center;gap:4px;background:#1a1a25;border:1px solid #232333;color:#bbb;padding:2px 8px;border-radius:9px;font-size:.74rem;font-weight:600}
  .bee-parent-chip .bee-parent-arrow{color:#666}
  .bee-parent-chip .bee-parent-slug{color:#ffd966;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  /* Sub-bees mini-list embedded inside each parent's bee-card. One row
     per sub-bee with its URL chip + a quick activity summary. Rows
     shrink to content (align-items:flex-start on the column-flex
     parent) so they don't stretch across the whole card. */
  .bee-subs{margin-top:10px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
  .bee-sub-row{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;background:#161620;border:1px solid #1e1e2e;border-radius:10px;padding:6px 10px;font-size:.8rem;max-width:100%}
  .bee-sub-row .bee-sub-email{color:#999;font-size:.76rem}
  .bee-sub-row .bee-sub-stat{margin-left:14px;color:#888;font-size:.76rem;display:flex;gap:10px;flex-wrap:wrap}
  .bee-sub-row .bee-sub-stat b{color:#ddd;font-weight:600}
  /* Two-column split table reused inside "More details" — mirrors
     BeeOffice dashboard's Visitors / Last-14-days layout (🔗 vs 🐝).
     width:auto so the table hugs its content and stays left-aligned
     instead of stretching across the whole card. */
  .bee-split-table{width:auto;max-width:100%;border-collapse:collapse;font-size:.82rem;font-variant-numeric:tabular-nums}
  .bee-split-table th{background:#16161f;color:#888;font-weight:600;padding:5px 12px;border-bottom:1px solid #1e1e2e;font-size:.7rem;text-transform:uppercase;letter-spacing:.8px;text-align:right;white-space:nowrap}
  .bee-split-table th:first-child{text-align:left;padding-right:18px}
  .bee-split-table td{padding:5px 12px;border-bottom:1px solid #15151e;color:#ddd;text-align:right;white-space:nowrap}
  .bee-split-table td:first-child{text-align:left;color:#ddd;padding-right:18px}
  .bee-split-table tr:last-child td{border-bottom:none}
  .bee-split-table .col-ico{margin-right:4px;opacity:.85}
  .bee-day-split{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end;white-space:nowrap}
  .bee-day-split .ds-part{display:inline-flex;align-items:center;gap:3px}
  .bee-day-split .ds-ico{opacity:.7;font-size:.9em}
  .bee-day-split .ds-zero{color:#666;opacity:.55}
  /* Earnings tiles — flex-wrap with auto-sized tiles so they pack
     left-to-right and don't stretch to fill the row. */
  .bee-earn-grid{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:6px}
  .bee-earn-tile{flex:0 0 auto;min-width:190px;background:#161620;border:1px solid #1e1e2e;border-radius:10px;padding:8px 12px}
  .bee-earn-tile .bee-earn-head{display:flex;align-items:center;gap:6px;font-size:.78rem;color:#aaa;font-weight:600;margin-bottom:4px}
  .bee-earn-tile .bee-earn-pct{margin-left:8px;font-size:.7rem;color:#ffd966;background:rgba(255,217,102,.12);border:1px solid rgba(255,217,102,.2);border-radius:999px;padding:1px 7px;font-weight:700}
  .bee-earn-tile .bee-earn-kv{display:flex;justify-content:space-between;gap:18px;font-size:.78rem;color:#bbb;margin-top:2px}
  .bee-earn-tile .bee-earn-kv .v{color:#ddd;font-weight:600}
  .bee-email{color:#aaa;font-size:.86rem}
  .bee-meta{font-size:.74rem;color:#777;margin-bottom:10px}
  .bee-countries{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 10px}
  .bee-cc{background:#1a1a25;border:1px solid #232333;padding:3px 9px;border-radius:8px;font-size:.78rem;color:#bbb}
  .bee-sub-h{font-size:.72rem;text-transform:uppercase;letter-spacing:1.1px;color:#7a7a90;margin:14px 0 6px}
  /* Hugs its content (no width:100%) so Attributed clients / Recent
     credits stay left-aligned inside More details instead of spanning
     the whole card. */
  .bee-table{width:auto;max-width:100%;border-collapse:collapse;font-size:.82rem}
  .bee-table th{background:#16161f;color:#888;font-weight:600;text-align:left;padding:5px 12px;border-bottom:1px solid #1e1e2e;font-size:.7rem;text-transform:uppercase;letter-spacing:.8px;white-space:nowrap}
  .bee-table td{padding:5px 12px;border-bottom:1px solid #15151e;color:#ddd;white-space:nowrap}
  .bee-table tr:last-child td{border-bottom:none}
  .bee-daily{margin-top:10px}
  .bee-daily-toggle{cursor:pointer;display:inline-block;background:#1a1a25;border:1px solid #232333;color:#bbb;padding:4px 10px;border-radius:8px;font-size:.78rem;font-weight:600;list-style:none;user-select:none}
  .bee-daily-toggle::-webkit-details-marker{display:none}
  .bee-more-toggle{cursor:pointer;display:inline-block;margin-top:10px;background:#1a1a25;border:1px solid #232333;color:#bbb;padding:4px 10px;border-radius:8px;font-size:.78rem;font-weight:600;user-select:none;transition:all .2s}
  .bee-more-toggle:hover{border-color:#2a2a3a;color:#ddd}
  .bee-extra[hidden]{display:none}
  .bee-trash{position:absolute;bottom:8px;right:10px;background:transparent;border:none;color:#3a3a4a;font-size:.95rem;line-height:1;padding:4px 6px;border-radius:6px;cursor:pointer;opacity:.55;transition:opacity .15s,color .15s,background .15s}
  .bee-trash:hover{opacity:1;color:#e17055;background:rgba(225,112,85,.08)}
  .bee-trash:active{transform:translateY(1px)}
  .bee-daily-toggle:hover{background:#21212e;color:#ddd}
  .bee-daily-toggle::before{content:"▸ ";color:#777}
  .bee-daily[open] .bee-daily-toggle::before{content:"▾ "}
  /* Inline 🐝 badges used in Clients / Orders / Agents tabs */
  .bee-badge{display:inline-block;background:rgba(255,217,102,.14);color:#ffd966;padding:1px 7px;border-radius:9px;font-size:.7rem;font-weight:700;margin-left:4px;vertical-align:middle;letter-spacing:.2px}
  .lang-chip{display:inline-block;background:rgba(126,203,255,.10);color:#9ec5e6;padding:1px 7px;border-radius:9px;font-size:.7rem;font-weight:600;margin-left:4px;vertical-align:middle;letter-spacing:.2px}
  /* Tiny 🐝 chip rendered inline next to each Traffic stat number */
  .stat-bee{display:inline-block;margin-left:6px;color:#ffd966;font-size:.75rem;font-weight:600;letter-spacing:.2px;vertical-align:middle;opacity:.92}
  .stat-bee.sub{font-size:.7rem;font-weight:500;opacity:.85;margin-left:5px}

  /* Compact panel — used by "📊 This server" so the resources block stays dense */
  .panel-compact{padding:12px}
  .panel-compact > div:first-child{margin-bottom:8px!important}
  .panel-compact > div:first-child h3{font-size:.9rem}
  .panel-compact .stats{gap:6px;margin-bottom:10px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .panel-compact .stat-card{padding:8px 10px;animation:none;border-radius:8px}
  .panel-compact .stat-card .icon{font-size:1rem;margin-bottom:2px}
  .panel-compact .stat-card .value{font-size:1.05rem;font-weight:600}
  .panel-compact .stat-card .label{font-size:.6rem;margin-top:2px;letter-spacing:.6px}
  .panel-compact .charts-row{gap:12px;margin-bottom:10px;grid-template-columns:1fr 1fr}
  .panel-compact .chart-box{padding:12px;border-radius:8px}
  .panel-compact .chart-box h3{font-size:.78rem;margin-bottom:8px}
  .panel-compact .chart-box canvas{width:110px!important;height:110px!important;max-width:110px!important}
  .panel-compact .ref-list li{padding:4px 0;font-size:.74rem}
  .panel-compact > .panel{padding:10px;margin-top:10px!important;border-radius:8px}
  .panel-compact > .panel h3{font-size:.82rem;margin-bottom:6px}
  .panel-compact .table-wrap{max-height:160px}
  .panel-compact table{font-size:.74rem}
  .panel-compact th{padding:4px 8px;font-size:.62rem}
  .panel-compact td{padding:4px 8px}

  /* Responsive */
  @media(max-width:900px){
    .charts-row,.bottom-row,.traffic-charts{grid-template-columns:1fr !important}
    .header{flex-direction:column;align-items:flex-start;gap:10px}.cat-area{display:flex;align-items:center;gap:12px;width:100%}.speech-bubble{position:static;transform:none;white-space:normal;font-size:.75rem;flex:1}.speech-bubble::before,.speech-bubble::after{display:none}.header-meta{align-self:flex-end;margin-top:-30px}
  }
  @media(max-width:600px){.tab{padding:8px 10px;font-size:.78rem}.tab span{display:none}
    .container{padding:12px}
    .stats{grid-template-columns:repeat(2,1fr);gap:8px}
    .stat-card .value{font-size:1.3rem}
    .tabs{overflow-x:auto;flex-wrap:nowrap}
    .tab{white-space:nowrap;padding:8px 14px;font-size:.82rem}
  }

  /* Inline status button group (Feedback tab) — replaces the legacy <select>. */
  .fb-status-grp{display:inline-flex;flex-wrap:nowrap;gap:2px;align-items:center}
  .fb-status-btn{padding:2px 6px;border-radius:999px;font-size:.7rem;font-weight:600;line-height:1.3;
                 cursor:pointer;text-transform:lowercase;letter-spacing:.2px;white-space:nowrap;
                 transition:filter .12s,transform .05s}
  .fb-status-btn:hover{filter:brightness(1.25)}
  .fb-status-btn:active{transform:translateY(1px)}

  /* Environment indicator (color set per-env via DEV_ONLY / PROD_ONLY blocks below) */
  body::before{content:'';position:fixed;top:0;left:0;right:0;height:3px;z-index:1001;background:var(--env-color,#6c5ce7)}
  .env-chip{display:inline-flex;align-items:center;gap:5px;font-size:.6rem;font-weight:800;letter-spacing:1.2px;padding:3px 9px;border-radius:999px;vertical-align:middle;-webkit-text-fill-color:initial;background:rgba(108,92,231,.12);color:var(--env-color,#6c5ce7);border:1px solid var(--env-color,#6c5ce7);text-transform:uppercase;line-height:1}
  .env-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--env-color,#6c5ce7);box-shadow:0 0 6px var(--env-color,#6c5ce7)}
  .vps-skip-chip{display:inline-flex;align-items:center;font-size:.6rem;font-weight:800;letter-spacing:1px;padding:3px 9px;border-radius:999px;vertical-align:middle;background:rgba(253,203,110,.14);color:#fdcb6e;border:1px dashed #fdcb6e;text-transform:uppercase;line-height:1;margin-right:8px;cursor:default;-webkit-text-fill-color:initial}

  /* Mint tab webhook-health chip — colour-coded delivery health for last
   * 24h. Cursor pointer + hover lift signals it's clickable. */
  .mint-wh-chip{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:10px;cursor:pointer;border:1px solid transparent;transition:transform .12s,opacity .12s;font-variant-numeric:tabular-nums}
  .mint-wh-chip:hover{transform:translateY(-1px)}
  .mint-wh-chip .mint-wh-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
  .mint-wh-chip-loading{color:#666;border-color:#2c2c40;opacity:.7}
  .mint-wh-chip-empty{color:#666;border-color:#2c2c40}
  .mint-wh-chip-ok{color:#9ad8b8;border-color:rgba(154,216,184,.40);background:rgba(154,216,184,.07)}
  .mint-wh-chip-warn{color:#fdcb6e;border-color:rgba(253,203,110,.40);background:rgba(253,203,110,.07)}
  .mint-wh-chip-bad{color:#e07a7a;border-color:rgba(224,122,122,.40);background:rgba(224,122,122,.07)}


  /* Mint tab — master/detail partner list (rebuilt: list -> partner -> back) */
  .mint-prow{display:grid;align-items:center;gap:12px;padding:11px 16px;border:1px solid #1e1e2e;border-radius:12px;background:#101019;margin-bottom:8px;cursor:pointer;transition:border-color .14s,transform .14s,background .14s}
  .mint-prow:hover{border-color:rgba(23,220,148,.35);background:#13131f;transform:translateY(-1px)}
  .mint-prow .mint-prow-chev{color:#555;font-size:1.25rem;line-height:1;transition:transform .14s,color .14s}
  .mint-prow:hover .mint-prow-chev{color:#17dc94;transform:translateX(3px)}
  .mint-detail-back{display:inline-flex;align-items:center;gap:6px;background:transparent;color:#9ad8b8;border:1px solid rgba(154,216,184,.30);border-radius:9px;padding:.5rem .85rem;font-weight:700;font-size:.82rem;cursor:pointer;font-family:inherit;transition:background .14s}
  .mint-detail-back:hover{background:rgba(154,216,184,.10)}
  .mint-detail-card{border:1px solid #1e1e2e;border-radius:14px;background:#0c0c14;margin-bottom:14px;overflow:hidden}
  .mint-detail-card-b{padding:16px 18px}
  .mint-thead{display:grid;align-items:center;gap:12px;padding:2px 16px 8px;color:#888;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px}
  .mint-c{min-width:0}
  .mint-ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ==========================================================================
     Requests (feedback) tab — master-detail. A scannable list of every request,
     opened one at a time into a focused detail pane. See catoffice-feedback.js.
     ========================================================================== */
  /* Summary cards — click to filter. */
  .fb-cards{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
  .fb-card{flex:1 1 90px;min-width:90px;display:flex;flex-direction:column;align-items:center;gap:3px;background:#12121a;border:1px solid #1e1e2e;border-radius:10px;padding:12px 10px;cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s}
  .fb-card:hover{border-color:#2a2a3a;background:#15151f}
  .fb-card.is-active{border-color:#6c5ce7;background:rgba(108,92,231,.08)}
  .fb-card .n{font-size:1.5rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
  .fb-card .l{font-size:.7rem;color:#888;text-transform:uppercase;letter-spacing:.6px}
  /* Filter pills. */
  .fb-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
  .fb-fbtn{padding:5px 12px;border-radius:7px;border:1px solid #2a2a3a;background:#12121a;color:#9a9aa8;font-size:.78rem;cursor:pointer;font-family:inherit;transition:color .15s,border-color .15s,background .15s}
  .fb-fbtn:hover{color:#ccc;border-color:#3a3a4a}
  .fb-fbtn.is-active{background:#6c5ce7;border-color:#6c5ce7;color:#fff;font-weight:600}
  /* List rows. */
  .fb-list{display:flex;flex-direction:column;gap:7px}
  .fb-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#12121a;border:1px solid #1e1e2e;border-left:3px solid var(--fb-accent,#2a2a3a);border-radius:9px;padding:11px 14px;cursor:pointer;color:#dfe6e9;font-family:inherit;transition:border-color .15s,background .15s,transform .06s}
  .fb-row:hover{background:#15151f;border-color:#2a2a3a}
  .fb-row:active{transform:translateY(1px)}
  .fb-row.is-new{background:rgba(108,92,231,.06)}
  .fb-type{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:7px;white-space:nowrap}
  .fb-type-lg{font-size:.82rem;padding:5px 12px}
  .fb-agent{flex:0 0 auto;color:#8f93a2;font-size:.76rem;font-variant-numeric:tabular-nums}
  .fb-preview{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.84rem;color:#cfd3dc}
  .fb-preview i{color:#5a5a6a}
  .fb-rowmeta{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px}
  .fb-rating{color:#e17055;font-weight:700;font-size:.76rem}
  .fb-imgchip{color:#8f93a2;font-size:.74rem}
  .fb-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto}
  .fb-ago{color:#666;font-size:.74rem;white-space:nowrap;min-width:58px;text-align:right}
  .fb-empty{padding:40px;text-align:center;color:#555;font-size:.9rem}
  /* Detail pane. */
  .fb-detail-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
  .fb-back{background:#1a1a2e;color:#a29bfe;border:1px solid #2a2a3a;border-radius:8px;padding:7px 14px;font-size:.82rem;cursor:pointer;font-family:inherit;transition:color .15s,border-color .15s}
  .fb-back:hover{border-color:#6c5ce7;color:#fff}
  .fb-nav{display:flex;align-items:center;gap:8px}
  .fb-navbtn{background:#12121a;color:#9a9aa8;border:1px solid #2a2a3a;border-radius:7px;padding:6px 12px;font-size:.78rem;cursor:pointer;font-family:inherit;transition:color .15s,border-color .15s}
  .fb-navbtn:hover:not(:disabled){color:#ccc;border-color:#3a3a4a}
  .fb-navbtn:disabled{opacity:.35;cursor:default}
  .fb-pos{color:#666;font-size:.76rem;font-variant-numeric:tabular-nums;min-width:52px;text-align:center}
  .fb-detail-card{background:#12121a;border:1px solid #1e1e2e;border-left:3px solid var(--fb-accent,#2a2a3a);border-radius:12px;padding:18px 20px}
  .fb-detail-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid #1e1e2e;margin-bottom:16px}
  .fb-detail-body{display:flex;flex-direction:column;gap:16px}
  .fb-field{display:flex;flex-direction:column;gap:6px}
  .fb-flabel{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#70758a}
  .fb-fval{white-space:pre-wrap;word-break:break-word;line-height:1.55;color:#dfe6e9;font-size:.9rem;background:#0d0d16;border:1px solid #1a1a26;border-radius:8px;padding:12px 14px}
  .fb-fval.is-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86rem;color:#c2a8ff}
  .fb-metaline{color:#70758a;font-size:.76rem;word-break:break-word;line-height:1.5}
  .fb-shots{display:flex;flex-wrap:wrap;gap:10px}
  .fb-shot{display:block;border:1px solid #2a2433;border-radius:8px;overflow:hidden;background:#0a0a12;line-height:0;transition:border-color .15s,transform .15s}
  .fb-shot:hover{border-color:#5a4a7a;transform:translateY(-1px)}
  .fb-shot img{display:block;max-width:260px;max-height:220px;object-fit:contain}
  .fb-status-wrap{margin-top:18px;padding-top:16px;border-top:1px solid #1e1e2e;display:flex;flex-direction:column;gap:8px}
  .fb-status-grp{display:flex;gap:7px;flex-wrap:wrap}
  .fb-status-btn{padding:6px 14px;border-radius:8px;border:1px solid #888;font-size:.8rem;font-weight:600;cursor:pointer;text-transform:capitalize;font-family:inherit;background:transparent;transition:filter .12s,transform .06s}
  .fb-status-btn:hover{filter:brightness(1.25)}
  .fb-status-btn:active{transform:translateY(1px)}
  .fb-status-ro{font-weight:700;text-transform:capitalize;font-size:.9rem}
  .fb-status-note{color:#666;font-size:.74rem}
  /* Requests tab on a phone: rows relax onto two lines. */
  @media(max-width:640px){
    .fb-row{flex-wrap:wrap;gap:8px}
    .fb-preview{flex-basis:100%;order:5;white-space:normal;margin-top:2px}
    .fb-shot img{max-width:100%}
  }