@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap');
/* ═══ ASSISTANT ADMIN DOOR SKIN (lane A5, 2026-10-13) ═══════════════════════════════════════════
   Design: ~/oneroof-ai-assistant-design/design_handoff_one_roof — README.md tokens + components,
   ADMIN PANEL.md §1 Shell, One Roof Admin.dc.html (the admin prototype).

   🔴 SCOPE. Every selector in this file starts with :root[data-panel="assistant"]. The attribute is
   set by the inline <head> script of public/index.html ONLY when the path is /admin/assistant, and
   that same script is the only thing that links this file — so the One Roof CRM door ("/") never
   requests it and its computed styles cannot move. public/choose.html carries the attribute
   statically (the chooser wears the Assistant look). test/admin-assistant-skin-scope.test.mjs
   lints the scope; a rule without the prefix is a CI failure, not a review comment.

   Which source wins, element by element (brief A5):
     • values the brief names explicitly (Dusk wallpaper, group cards r20 / .10 / ring .14,
       settings-nav rows 10/14 with 30px tinted tiles, Inter + Source Serif 4, README buttons /
       inputs / switch / segmented, 12/600 uppercase section labels, status = border colour);
     • the admin prototype for what the brief leaves open (shell geometry, page header row,
       profile chip, tables, summary strip, modals; the top search is hidden here, see 3c).
   Status is ALWAYS a border on a neutral container, never a fill (owner ruling 2026-10-02).

   Layer 1 re-points the page's existing tokens (the page is ~764 var() uses). Layer 2 is the
   wallpaper. Layer 3 is the short list of rules the tokens cannot reach (literal colours, inline
   styles, geometry). Nothing here edits a page's JavaScript or markup. ═══════════════════════════ */

/* ── Layer 1: tokens ─────────────────────────────────────────────────────────────────────────── */
:root[data-panel="assistant"]{
  /* wallpaper — README themes, Dusk (default); themes swap only these four */
  --wp-base:#0c1222; --wp-a:#2c6f8f; --wp-b:#6a4c9c; --wp-c:#b8714a;
  /* ⚠️ ONE DELIBERATE DEVIATION (a11y): the glows render at .55 of their README strength. At full
     strength glow C's centre sits under the bottom of every page, and small .55–.62 text crossing
     it measured ~2.8:1 (pixel-sampled, a5-shots). Colours, geometry and blur are README-exact;
     set --wp-glow:1 to see the literal Dusk. */
  --wp-glow:.55;
  /* type */
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  /* canvas + glass */
  --canvas-base:var(--wp-base);
  --bg:#0c1222;
  --glass-fill:rgba(255,255,255,.10);
  --glass-fill-2:rgba(255,255,255,.12);
  --glass-border:rgba(255,255,255,.20);
  --glass-inner:inset 0 1px 0 rgba(255,255,255,.25);
  --glass-shadow:0 0 0 0 transparent;
  --glass-blur:blur(30px) saturate(160%);
  --page-fill:transparent; --page-blur:none;
  --surface:rgba(255,255,255,.08); --surface-2:rgba(255,255,255,.10); --surface-3:rgba(255,255,255,.16);
  --card:rgba(255,255,255,.10); --card-border:rgba(255,255,255,.08);
  --card-shadow:0 0 0 0 transparent; --card-shadow-hover:0 0 0 0 transparent;
  /* white-alpha text (README: 1.0 primary · .72 descriptions · .62 subs · .50–.55 placeholders) */
  --text:#fff; --muted:rgba(255,255,255,.72); --faint:rgba(255,255,255,.62); --ink-4:rgba(255,255,255,.55);
  --border:rgba(255,255,255,.14); --border-strong:rgba(255,255,255,.20);
  /* action + status (README) */
  --accent:#3a6df0; --accent-2:#7fa2ff; --accent-bg:rgba(58,109,240,.35); --accent-text:#8fb0ff;
  --accent-chip:rgba(58,109,240,.30); --accent-chip-bd:rgba(127,162,255,.60);
  --ok:#8df0a0; --ok-bg:rgba(52,199,89,.14); --warn:#ffd27a; --warn-bg:rgba(255,159,10,.14);
  --danger:#ff8a80; --danger-bg:rgba(255,69,58,.16); --info:#8fb0ff; --info-bg:rgba(58,109,240,.18);
  --sage:#34c759; --amber:#ff9f0a; --red:#ff453a; --sky:#7fa2ff; --violet:#7a5cff;
  --radius:12px; --radius-lg:20px;
  /* skin-only names */
  --pn-row-on:rgba(58,109,240,.35);
  --pn-focus:0 0 0 3px rgba(58,109,240,.35);
  --pn-modal:linear-gradient(180deg,rgba(34,40,66,.99),rgba(20,24,40,.99));
  --pn-tb-w:420px; /* the header row's right cluster (search 240 + profile chip; lane ADMIN-11 moved the icon buttons into the chip's menu) */
  color-scheme:dark;
}

/* ── Layer 2: wallpaper — base fill + three blurred radial glows (README geometry) ────────────── */
:root[data-panel="assistant"] body{background:var(--wp-base);background-attachment:scroll}
:root[data-panel="assistant"] body::before,
:root[data-panel="assistant"] body::after,
:root[data-panel="assistant"] .app::before{content:"";position:fixed;inset:auto;z-index:-1;pointer-events:none;border-radius:50%;opacity:var(--wp-glow)}
:root[data-panel="assistant"] body::before{width:820px;height:820px;left:-180px;top:-260px;background:radial-gradient(circle,var(--wp-a) 0%,transparent 70%);filter:blur(40px)}
:root[data-panel="assistant"] body::after{width:760px;height:760px;right:-160px;top:60px;background:radial-gradient(circle,var(--wp-b) 0%,transparent 70%);filter:blur(40px)}
:root[data-panel="assistant"] .app::before{width:820px;height:820px;left:28%;bottom:-440px;background:radial-gradient(circle,var(--wp-c) 0%,transparent 70%);filter:blur(50px);opacity:calc(.85 * var(--wp-glow))}
:root[data-panel="assistant"] body{-webkit-font-smoothing:antialiased;font-family:var(--sans)}

/* ── Layer 3a: shell — prototype geometry (flush sidebar, header row) ───────────────────────── */
@media (min-width:881px){
  :root[data-panel="assistant"] .app{grid-template-columns:256px minmax(0,1fr);gap:0;padding:0;max-width:none;min-height:100vh}
  :root[data-panel="assistant"] .side{top:0;height:100vh;border:0;border-right:1px solid rgba(255,255,255,.08);border-radius:0;
    background:rgba(10,14,28,.55);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:none;padding:18px 12px}
  :root[data-panel="assistant"] .main{padding:22px 28px 40px;gap:18px}
}
@media (max-width:880px){
  :root[data-panel="assistant"] .app{padding:12px;gap:12px}
  :root[data-panel="assistant"] .side{background:rgba(16,20,36,.94);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    border:0;border-right:1px solid rgba(255,255,255,.10);border-radius:0 22px 22px 0;box-shadow:0 30px 80px rgba(0,0,0,.55);padding:18px 12px}
  :root[data-panel="assistant"] .side-scrim{background:rgba(8,12,24,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}
/* brand — prototype: 30px r9 gradient tile + 15/700 name + 11px sub */
:root[data-panel="assistant"] .brand{gap:10px;padding:4px 8px 16px;margin-bottom:0;border-bottom:0}
:root[data-panel="assistant"] .brand .mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(145deg,#5b8bff,#8a5cd6);box-shadow:none}
:root[data-panel="assistant"] .brand .wm-name{font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:0;line-height:1.2;color:#fff}
:root[data-panel="assistant"] .brand .wm-name em{font-style:normal;color:inherit}
:root[data-panel="assistant"] .brand .wm-sub{font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.55);margin-top:2px}
/* version stamp */
:root[data-panel="assistant"] .side-foot{background:rgba(255,255,255,.06);border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);border-radius:12px;color:rgba(255,255,255,.55)}
:root[data-panel="assistant"] .side-foot b{color:rgba(255,255,255,.72)}
:root[data-panel="assistant"] .side-foot i{color:#34c759}

/* ── Layer 3b: sidebar nav — README settings-nav rows (group cards, 10/14 rows, 30px tinted tiles) ── */
:root[data-panel="assistant"] .nav{padding:0 0 4px}
:root[data-panel="assistant"] .pn{display:flex;flex-direction:column;gap:0}
:root[data-panel="assistant"] .pn-group{border-radius:20px;background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);overflow:hidden}
:root[data-panel="assistant"] .pn-group + .pn-lbl{margin-top:4px}
:root[data-panel="assistant"] .pn-group + .pn-group{margin-top:12px}
:root[data-panel="assistant"] .nav .pn-lbl{padding:14px 6px 7px;font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.60)}
:root[data-panel="assistant"] .nav .pn button{gap:12px;padding:10px 14px;border:0;border-radius:0;font-size:15px;font-weight:400;line-height:1.3;color:#fff;box-shadow:none;min-height:50px}
:root[data-panel="assistant"] .nav .pn button + button{box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
:root[data-panel="assistant"] .nav .pn button:hover{background:rgba(255,255,255,.04)}
:root[data-panel="assistant"] .nav .pn button.active{background:var(--pn-row-on);color:#fff;box-shadow:none}
:root[data-panel="assistant"] .nav .pn button.active + button{box-shadow:none}
:root[data-panel="assistant"] .nav .pn button:focus-visible{outline:2px solid #7fa2ff;outline-offset:-2px}
:root[data-panel="assistant"] .pn-tile{flex:none;width:30px;height:30px;border-radius:8px;background:var(--pn-tint,#8e8e93);display:flex;align-items:center;justify-content:center}
:root[data-panel="assistant"] .nav .pn .pn-tile i{font-size:18px;width:auto;opacity:1;color:#fff}
:root[data-panel="assistant"] .pn-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Layer 3c: header row — prototype: title + one-line explanation left, profile chip right ─── */
:root[data-panel="assistant"] .topbar{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;gap:10px;border-radius:0}
/* The top search (lane ADMIN-11, B-16): on this door it filters the Assistant door's org cards (topSearchInput →
   aoSearch), so it shows here — the prototype's 240px field; ≤480 the base rules collapse it to the icon. */
:root[data-panel="assistant"] .topbar .search{flex:none;width:240px;max-width:240px;border:0;border-radius:12px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);padding:9px 13px;color:rgba(255,255,255,.62)}
:root[data-panel="assistant"] .topbar .search input{color:#fff;font-size:14px}
:root[data-panel="assistant"] .topbar .search input::placeholder{color:rgba(255,255,255,.55)}
:root[data-panel="assistant"] .topbar .search:focus-within{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),var(--pn-focus)}
:root[data-panel="assistant"] .me{margin-left:auto;gap:8px;font-size:13px;color:#fff}
/* profile chip: avatar + email inside one r20 pill (prototype chip), built from the existing nodes */
:root[data-panel="assistant"] .me #meAvatar{order:-1;position:relative;z-index:1;width:26px;height:26px;margin-left:6px;font-size:11px;font-weight:700;background:#3a6df0;color:#fff;box-shadow:none}
:root[data-panel="assistant"] .me #meEmail{margin-left:-40px;padding:9px 12px 9px 40px;border-radius:20px;background:rgba(255,255,255,.08);font-weight:600;color:#fff;line-height:1.2;white-space:nowrap}
:root[data-panel="assistant"] .me #viewAsBtn,
:root[data-panel="assistant"] .me #switchPanelBtn,
:root[data-panel="assistant"] .me #signOutBtn{width:36px;height:36px;padding:0!important;justify-content:center;border-radius:10px;background:rgba(255,255,255,.10);color:#fff}
:root[data-panel="assistant"] .me #switchPanelBtn .so-lbl,
:root[data-panel="assistant"] .me #signOutBtn .so-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:root[data-panel="assistant"] .me #viewAsBtn i,
:root[data-panel="assistant"] .me #switchPanelBtn i,
:root[data-panel="assistant"] .me #signOutBtn i{font-size:18px}
:root[data-panel="assistant"] .topbar .tb-icon{width:44px;border-radius:12px;background:rgba(255,255,255,.10);color:#fff}
/* View as (lane A4): a 44px tap target on touch widths, like the cluster's other buttons */
@media (max-width:880px){
  :root[data-panel="assistant"] .me #viewAsBtn{min-width:44px;min-height:44px}
}
@media (max-width:480px){
  :root[data-panel="assistant"] .me #meAvatar{margin-left:0;width:34px;height:34px}
}
/* ≥1280px the cluster sits in the title's row (prototype); narrower it keeps its own row above */
@media (min-width:1280px){
  :root[data-panel="assistant"] .main{position:relative}
  :root[data-panel="assistant"] .topbar{position:absolute;top:22px;right:28px;z-index:5;min-height:44px}
  :root[data-panel="assistant"] #detail > :first-child,
  :root[data-panel="assistant"] .su-banner{max-width:calc(100% - var(--pn-tb-w))}
  :root[data-panel="assistant"] #detail > :first-child{min-height:44px}
  /* View as (lane A4): the owner's cluster carries one more 36px icon button (+ an 8px gap) */
  :root[data-panel="assistant"] .main:has(#viewAsBtn[data-shown]){--pn-tb-w:420px} /* lane ADMIN-11: View as is a menu entry now, the cluster is one width */
}
/* the page header card (asstHeaderHtml / the user-day header): a plain serif title + sub, no box */
:root[data-panel="assistant"] #detail > .card:has(> .ohead){background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;margin:0 0 18px;border-radius:0}
:root[data-panel="assistant"] #detail > .card > .ohead{gap:14px;align-items:flex-start}
:root[data-panel="assistant"] #detail > .card > .ohead > .av.big{display:none}
:root[data-panel="assistant"] #detail > .card > .ohead > div > div:first-child,
:root[data-panel="assistant"] #detail > .card > .ohead h1{font-family:var(--serif)!important;font-size:28px!important;font-weight:500!important;line-height:1.15;letter-spacing:0!important}
:root[data-panel="assistant"] #detail > .card > .ohead .meta{margin-top:4px;font-size:13px;color:rgba(255,255,255,.62)}
@media (max-width:560px){
  :root[data-panel="assistant"] #detail > .card > .ohead > div > div:first-child,
  :root[data-panel="assistant"] #detail > .card > .ohead h1{font-size:24px!important}
}

/* ── Layer 3d: surfaces — README group card (r20, .10, inset ring .14) ─────────────────────── */
:root[data-panel="assistant"] .card,
:root[data-panel="assistant"] .panel,
:root[data-panel="assistant"] .page{background:rgba(255,255,255,.10);border:0;border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
:root[data-panel="assistant"] .card{padding:18px 20px;margin-bottom:16px}
:root[data-panel="assistant"] .card h3{font-size:16px;font-weight:600;letter-spacing:-.1px}
:root[data-panel="assistant"] .asst-grid .card{margin:0}
/* a strip nested inside a card (the Signups waitlist counts): the prototype's lighter strip, not a second card */
:root[data-panel="assistant"] .card .panel{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);-webkit-backdrop-filter:none;backdrop-filter:none}
/* status cards: the colour is the BORDER of a neutral card, never its fill */
:root[data-panel="assistant"] .asst-status{background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.14);border-radius:20px;box-shadow:none;padding:18px 20px}
:root[data-panel="assistant"] .asst-status.ok{border-color:#34c759}
:root[data-panel="assistant"] .asst-status.bad{border-color:#ff453a}
:root[data-panel="assistant"] .asst-state{font-family:var(--serif);font-size:24px;font-weight:400;line-height:1.15}
:root[data-panel="assistant"] .asst-status.ok .asst-state .ti{color:#34c759}
:root[data-panel="assistant"] .asst-status.bad .asst-state .ti{color:#ff453a}
:root[data-panel="assistant"] .asst-meta{font-size:13px;color:rgba(255,255,255,.72)}
:root[data-panel="assistant"] .asst-meta b{color:#fff}
/* section labels — README 12/600 uppercase .4px at .60 */
:root[data-panel="assistant"] .asst-eyebrow,
:root[data-panel="assistant"] .asst-sec h3,
:root[data-panel="assistant"] .tsub{font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.60)}
:root[data-panel="assistant"] .asst-sec{padding:16px 20px}
/* settings rows inside a group card (Controls, Billing subscriptions): README rows 12/16, min 52 */
:root[data-panel="assistant"] .asst-row{padding:12px 20px;min-height:52px;border-top:1px solid rgba(255,255,255,.08)}
:root[data-panel="assistant"] .asst-row:first-child{border-top:0}
:root[data-panel="assistant"] .asst-row .nm{font-size:15px;font-weight:500;color:#fff}
:root[data-panel="assistant"] .asst-row .ds,
:root[data-panel="assistant"] .asst-row .sm{font-size:13px;color:rgba(255,255,255,.62)}
:root[data-panel="assistant"] .asst-row .vl{font-size:14px;font-weight:600}
:root[data-panel="assistant"] .asst-sub{border-left:0;box-shadow:inset 3px 0 0 transparent}
:root[data-panel="assistant"] .asst-sub.ok{box-shadow:inset 3px 0 0 #34c759}
:root[data-panel="assistant"] .asst-sub.bad{box-shadow:inset 3px 0 0 #ff453a}
:root[data-panel="assistant"] .asst-kv{font-size:14px}
:root[data-panel="assistant"] .asst-kv dt{color:rgba(255,255,255,.62)}
:root[data-panel="assistant"] .asst-kv dd{color:rgba(255,255,255,.92)}
:root[data-panel="assistant"] .asst-grid{gap:16px}
/* summary strip (kpi band) — prototype: cells 14/18, 12/600 label at .55, 22/700 value */
:root[data-panel="assistant"] .kpi-band{margin-bottom:16px}
:root[data-panel="assistant"] .kpi{padding:14px 18px}
:root[data-panel="assistant"] .kpi + .kpi::before{top:14px;bottom:14px;background:rgba(255,255,255,.10)}
:root[data-panel="assistant"] .kpi .lab{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.62);margin-bottom:6px}
:root[data-panel="assistant"] .kpi .val{font-family:var(--sans);font-size:22px;font-weight:700;letter-spacing:-.3px;line-height:1.15}
:root[data-panel="assistant"] .kpi .subl{font-size:12px;font-weight:400;color:rgba(255,255,255,.62);margin-top:5px}
:root[data-panel="assistant"] .asst-kpis .kpi.asst-st{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14);border-radius:20px}
:root[data-panel="assistant"] .asst-kpis .kpi.asst-st.ok{box-shadow:inset 0 0 0 1.5px #34c759}
:root[data-panel="assistant"] .asst-kpis .kpi.asst-st.bad{box-shadow:inset 0 0 0 1.5px #ff453a}

/* ── Layer 3e: tables — prototype: header row .05, 11/700 .4px uppercase at .55, rows 11/16, ring .06 ── */
:root[data-panel="assistant"] .asst-tbl thead th{background:rgba(255,255,255,.05);font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.62);padding:11px 16px;border-bottom:0}
:root[data-panel="assistant"] .asst-tbl td{padding:11px 16px;font-size:14px;color:rgba(255,255,255,.92);border-bottom:0;border-top:1px solid rgba(255,255,255,.06)}
:root[data-panel="assistant"] .asst-tbl td .sm{font-size:12px;color:rgba(255,255,255,.62)}
:root[data-panel="assistant"] .asst-tbl tbody tr:hover{background:rgba(255,255,255,.04)}
:root[data-panel="assistant"] .asst-tbl tbody tr:first-child td{border-top:0}
:root[data-panel="assistant"] .asst-sec[style*="font-weight:600"]{font-size:15px;color:#fff}
@media (max-width:560px){
  :root[data-panel="assistant"] .asst-tbl tr{border-bottom:1px solid rgba(255,255,255,.06)}
  :root[data-panel="assistant"] .asst-tbl td{border-top:0;padding:4px 0}
}

/* ── Layer 3f: status tags — border colour + a 6px dot, never a fill ───────────────────────── */
:root[data-panel="assistant"] .asst-tag,
:root[data-panel="assistant"] .pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:0;padding:3px 9px;border-radius:10px;border:1px solid rgba(255,255,255,.20);background:transparent;color:rgba(255,255,255,.92)}
:root[data-panel="assistant"] .asst-tag.ok,:root[data-panel="assistant"] .pill.ok{border-color:#34c759;color:#fff}
:root[data-panel="assistant"] .asst-tag.bad,:root[data-panel="assistant"] .pill.bad{border-color:#ff453a;color:#fff}
:root[data-panel="assistant"] .asst-tag.warn,:root[data-panel="assistant"] .pill.warn{border-color:#ff9f0a;color:#fff}
:root[data-panel="assistant"] .asst-tag.ok::before,:root[data-panel="assistant"] .pill.ok::before{content:"";width:6px;height:6px;border-radius:3px;background:#34c759}
:root[data-panel="assistant"] .asst-tag.bad::before,:root[data-panel="assistant"] .pill.bad::before{content:"";width:6px;height:6px;border-radius:3px;background:#ff453a}
:root[data-panel="assistant"] .asst-tag.warn::before,:root[data-panel="assistant"] .pill.warn::before{content:"";width:6px;height:6px;border-radius:3px;background:#ff9f0a}
:root[data-panel="assistant"] .asst-tag.asst-st{border-width:1px}
:root[data-panel="assistant"] .asst-state .asst-tag{font-family:var(--sans);vertical-align:middle}
/* meta pill (README): 12/600, 3/9, r10, .12 — scope chips */
:root[data-panel="assistant"] .asst-scope{font-size:12px;font-weight:600;padding:3px 9px;border-radius:10px;border:0;background:rgba(255,255,255,.12);color:rgba(255,255,255,.85)}

/* ── Layer 3g: controls — README buttons, inputs, switch, segmented ────────────────────────── */
:root[data-panel="assistant"] .btn{border:0;border-radius:14px;padding:8px 14px;font-size:14px;font-weight:600;background:rgba(255,255,255,.12);color:#fff;box-shadow:none;background-image:none}
:root[data-panel="assistant"] .btn:hover{background:rgba(255,255,255,.18);color:#fff;filter:none}
:root[data-panel="assistant"] .btn:focus-visible{outline:0;box-shadow:var(--pn-focus)}
:root[data-panel="assistant"] .btn.pri{background:#3a6df0;color:#fff}
:root[data-panel="assistant"] .btn.pri:hover{background:#4a7bf5}
:root[data-panel="assistant"] .btn.danger{background:#ff453a;color:#fff}
:root[data-panel="assistant"] .btn.danger:hover{background:#ff5a4f}
:root[data-panel="assistant"] .btn.danger-quiet{background:rgba(255,69,58,.25);color:#fff;border:0}
:root[data-panel="assistant"] .btn[disabled],:root[data-panel="assistant"] .btn:disabled{opacity:.5}
/* small buttons where actions repeat per row (README small: r10, 7/14, 13px) */
:root[data-panel="assistant"] .asst-row .btn,
:root[data-panel="assistant"] .asst-tbl .btn,
:root[data-panel="assistant"] .su-banner .btn,
:root[data-panel="assistant"] .ps-stepup .btn{border-radius:10px;padding:7px 14px;font-size:13px}
/* inputs (README): h40, r12, .08, 1px .18, 15px, 0/14; focus #7fa2ff + ring */
:root[data-panel="assistant"] .ps-input,
:root[data-panel="assistant"] .asst-field input,
:root[data-panel="assistant"] .asst-field select,
:root[data-panel="assistant"] .asst-period,
:root[data-panel="assistant"] .dz-confirm-input{min-height:40px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);font-size:15px;padding:0 14px;color:#fff;box-shadow:none}
:root[data-panel="assistant"] .asst-reason{border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);font-size:15px;padding:10px 14px;color:#fff}
:root[data-panel="assistant"] .asst-search .search{min-height:40px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);box-shadow:none;padding:0 14px;font-size:15px;color:rgba(255,255,255,.55)}
:root[data-panel="assistant"] .asst-search .search input{font-size:15px}
:root[data-panel="assistant"] .ps-input:focus,
:root[data-panel="assistant"] .asst-field input:focus,
:root[data-panel="assistant"] .asst-field select:focus,
:root[data-panel="assistant"] .asst-period:focus,
:root[data-panel="assistant"] .asst-reason:focus,
:root[data-panel="assistant"] .dz-confirm-input:focus,
:root[data-panel="assistant"] .asst-search .search:focus-within{outline:0;border-color:#7fa2ff;box-shadow:var(--pn-focus)}
:root[data-panel="assistant"] .asst-reason::placeholder,
:root[data-panel="assistant"] .ps-input::placeholder,
:root[data-panel="assistant"] .asst-search .search input::placeholder{color:rgba(255,255,255,.55)}
:root[data-panel="assistant"] .asst-field{font-size:13px;color:rgba(255,255,255,.72)}
:root[data-panel="assistant"] .asst-period option{background:#1a2036;color:#fff}
/* switch (README): 51×31 r16, on #34c759, off .22, knob 27 */
:root[data-panel="assistant"] .tog{width:51px;height:31px;border-radius:16px;background:rgba(255,255,255,.22);transition:background .2s}
:root[data-panel="assistant"] .tog::after{top:2px;left:2px;width:27px;height:27px;box-shadow:0 2px 4px rgba(0,0,0,.25);transition:left .2s}
:root[data-panel="assistant"] .tog.on{background:#34c759}
:root[data-panel="assistant"] .tog.on::after{left:22px}
/* segmented (README): track .08 r10 pad 3 gap 2; item 6/12 r7 13/600; active .20 */
:root[data-panel="assistant"] .ps-seg,
:root[data-panel="assistant"] .wchips{background:rgba(255,255,255,.08);border:0;box-shadow:none;border-radius:10px;padding:3px;gap:2px}
:root[data-panel="assistant"] .ps-seg button,
:root[data-panel="assistant"] .wchips button{padding:6px 12px;border-radius:7px;font-size:13px;font-weight:600;color:rgba(255,255,255,.72);border-color:transparent}
:root[data-panel="assistant"] .ps-seg button.on,
:root[data-panel="assistant"] .wchips button.on{background:rgba(255,255,255,.20);color:#fff;box-shadow:none}
/* links on dark */
:root[data-panel="assistant"] #detail a:not(.btn),
:root[data-panel="assistant"] .ps-link{color:#8fb0ff}
:root[data-panel="assistant"] #detail a:not(.btn):hover{color:#c3d3ff}

/* ── Layer 3h: notices — amber is a BORDER on a clear box ──────────────────────────────────── */
:root[data-panel="assistant"] .su-banner,
:root[data-panel="assistant"] .ps-stepup,
:root[data-panel="assistant"] .ps-notice{border:1.5px solid #ff9f0a;border-radius:14px;background:transparent;color:#fff}
:root[data-panel="assistant"] .su-banner > i,
:root[data-panel="assistant"] .ps-stepup > i,
:root[data-panel="assistant"] .ps-notice i{color:#ffd27a}
:root[data-panel="assistant"] .ps-err{border:1.5px solid #ff453a;border-radius:12px;color:#ff8a80}
:root[data-panel="assistant"] .note{background:rgba(127,162,255,.13);border:0;box-shadow:inset 0 0 0 1px rgba(127,162,255,.30);border-radius:16px;color:rgba(255,255,255,.85)}
:root[data-panel="assistant"] .toast{background:#f4f6ff;color:#0c1222;border-radius:14px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* ── Layer 3i: dialogs — prototype modal (r22, deep navy gradient, ring .16) ───────────────── */
:root[data-panel="assistant"] .modal{background:rgba(8,12,24,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
:root[data-panel="assistant"] .modal-card{background:var(--pn-modal);-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid rgba(255,255,255,.16);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
:root[data-panel="assistant"] .modal-head{background:transparent;border-bottom:1px solid rgba(255,255,255,.08);padding:18px 22px 14px}
:root[data-panel="assistant"] .modal-foot{background:transparent;border-top:1px solid rgba(255,255,255,.08);padding:14px 22px;gap:10px}
:root[data-panel="assistant"] .modal-body{padding:12px 22px 18px}
:root[data-panel="assistant"] #infoTitle{font-size:17px!important;font-weight:700!important;color:#fff}
:root[data-panel="assistant"] #infoSub{font-size:13px!important;color:rgba(255,255,255,.62)!important}
:root[data-panel="assistant"] .modal-head .x{width:32px;height:32px;border-radius:16px;border:0;background:rgba(255,255,255,.10);color:#fff}
:root[data-panel="assistant"] .modal-head .x:hover{background:rgba(255,255,255,.18)}
:root[data-panel="assistant"] .modal-foot .btn{border-radius:14px}

/* ── Layer 3j: EMPTY STATE for a design section that has no live page yet (handoff pattern) ─── */
:root[data-panel="assistant"] .pn-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:340px;padding:40px 24px;text-align:center}
:root[data-panel="assistant"] .pn-empty-tile{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center}
:root[data-panel="assistant"] .pn-empty-tile i{font-size:24px;color:#fff}
:root[data-panel="assistant"] .pn-empty-title{font-family:var(--serif);font-size:24px;font-weight:400;line-height:1.2;color:#fff}
:root[data-panel="assistant"] .pn-empty-text{max-width:360px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.62);text-wrap:pretty}

/* ── Layer 3k: /choose — the chooser wears the same look (README window + group cards) ───────── */
:root[data-panel="assistant"] .onb-decor{background:var(--wp-base)}
:root[data-panel="assistant"] .onb-decor i{animation:none;filter:blur(40px);opacity:var(--wp-glow)}
:root[data-panel="assistant"] .onb-decor i.b1{width:820px;height:820px;left:-180px;top:-260px;background:radial-gradient(circle,var(--wp-a) 0%,transparent 70%)}
:root[data-panel="assistant"] .onb-decor i.b2{width:760px;height:760px;right:-160px;top:60px;background:radial-gradient(circle,var(--wp-b) 0%,transparent 70%)}
:root[data-panel="assistant"] .onb-decor i.b3{width:820px;height:820px;left:28%;bottom:-440px;background:radial-gradient(circle,var(--wp-c) 0%,transparent 70%);filter:blur(50px);opacity:calc(.85 * var(--wp-glow))}
:root[data-panel="assistant"] .onb-decor u{display:none}
:root[data-panel="assistant"] .onb-modal{max-width:1080px;height:auto;min-height:min(620px,calc(100vh - 48px));border-radius:30px;background:rgba(22,26,44,.75);
  -webkit-backdrop-filter:blur(44px) saturate(170%);backdrop-filter:blur(44px) saturate(170%);border:1px solid rgba(255,255,255,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 40px 90px rgba(0,0,0,.5)}
:root[data-panel="assistant"] .onb-header{background:transparent;border-bottom:1px solid rgba(255,255,255,.08);padding:14px 22px}
:root[data-panel="assistant"] .onb-brand-mark{box-shadow:none}
:root[data-panel="assistant"] .onb-brand-name{font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:#fff}
:root[data-panel="assistant"] .onb-h1{font-family:var(--serif);font-size:28px;font-weight:500;letter-spacing:0;line-height:1.15;color:#fff;margin:0 0 6px}
:root[data-panel="assistant"] .onb-sub{font-size:14px;color:rgba(255,255,255,.72)}
:root[data-panel="assistant"] .ch-who{font-size:13px;color:rgba(255,255,255,.62)}
:root[data-panel="assistant"] .ch-card{border-radius:20px;background:rgba(255,255,255,.10);border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);padding:18px 20px;gap:8px}
:root[data-panel="assistant"] a.ch-card:hover{background:rgba(255,255,255,.14);border-color:transparent}
:root[data-panel="assistant"] a.ch-card:focus-visible{outline:0;box-shadow:inset 0 0 0 1px rgba(127,162,255,.6),var(--pn-focus)}
:root[data-panel="assistant"] .ch-title{font-size:17px;font-weight:600;color:#fff}
:root[data-panel="assistant"] .ch-desc{font-size:14px;line-height:1.45;color:rgba(255,255,255,.72)}
:root[data-panel="assistant"] .ch-tag{font-size:12px;font-weight:600;padding:3px 9px;border-radius:10px;color:#fff;background:rgba(58,109,240,.55);border:0;box-shadow:inset 0 0 0 1px rgba(127,162,255,.6)}
:root[data-panel="assistant"] .ch-why,
:root[data-panel="assistant"] .ch-msg{color:#ffd27a}

/* ── Layer 3k: Revenue · Vendors & costs · Plans & tiers (lane A8a, 2026-10-13; One Roof Admin.dc.html) ──
   Tables only (no charts). Status stays a border: the Telnyx card is .asst-status (neutral fill, border by margin),
   the warning note gets an amber border, tags are .asst-tag. */
:root[data-panel="assistant"] .rev-tbl{min-width:0}
:root[data-panel="assistant"] .rev-tbl th.num,:root[data-panel="assistant"] .rev-tbl td.num{text-align:right}
:root[data-panel="assistant"] .rev-total td{border-top:1px solid rgba(255,255,255,.14);font-weight:600}
:root[data-panel="assistant"] .rev-span{white-space:normal;color:rgba(255,255,255,.72)}
:root[data-panel="assistant"] .rev-plan{margin:-4px 2px 16px}
:root[data-panel="assistant"] .rev-section-head{margin:8px 2px 12px}
:root[data-panel="assistant"] .rev-section-title{font-size:19px;font-weight:500;color:#fff}
:root[data-panel="assistant"] .rev-warn{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:13px;line-height:1.45;color:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1.5px #ff9f0a}
:root[data-panel="assistant"] .rev-warn i{color:#ff9f0a;font-size:16px}
:root[data-panel="assistant"] .rev-defs ul{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.45;color:rgba(255,255,255,.72)}
:root[data-panel="assistant"] .rev-month{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:rgba(255,255,255,.72)}
:root[data-panel="assistant"] .rev-telnyx{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
:root[data-panel="assistant"] .rev-telnyx-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
:root[data-panel="assistant"] .rev-telnyx-title{flex:1;min-width:0;font-size:16px;font-weight:600}
:root[data-panel="assistant"] .rev-telnyx .asst-tbl-wrap{margin:0 -20px}
:root[data-panel="assistant"] .rev-sec{padding:16px 20px 8px}
/* the plan cards' columns line up card to card (ADMIN PANEL.md §0.5: paired cards line up) */
@media (min-width:561px){
  :root[data-panel="assistant"] .rev-plan-tbl{table-layout:fixed}
  :root[data-panel="assistant"] .rev-plan-tbl th:nth-child(1){width:46%}
  :root[data-panel="assistant"] .rev-plan-tbl th:nth-child(2){width:20%}
  :root[data-panel="assistant"] .rev-plan-tbl th:nth-child(3){width:14%}
  :root[data-panel="assistant"] .rev-plan-tbl td{overflow-wrap:anywhere}
  :root[data-panel="assistant"] .rev-plan-tbl td.num{white-space:normal} /* a term ("3 days", "Paid add-on") wraps inside its column */
}
@media (max-width:560px){
  :root[data-panel="assistant"] .rev-span::before{display:none}
  :root[data-panel="assistant"] .rev-telnyx .asst-tbl-wrap{margin:0}
  :root[data-panel="assistant"] .rev-tbl td.num{text-align:left}
}
/* ── end lane A8a ── */

/* ── Layer 3k-2: Plans & tiers — the Assistant tier cards (lane ADMIN-12, 2026-10-14; One Roof Admin.dc.html plan cards:
   auto-fit minmax(300px,1fr) gap 12, r20, fill .07, ring in the card's colour). The state is the RING (a border), never a fill. */
:root[data-panel="assistant"] .plan-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:12px;margin:0 0 12px}
:root[data-panel="assistant"] .plan-tier{min-width:0;display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:20px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14)}
:root[data-panel="assistant"] .plan-tier.ok{box-shadow:inset 0 0 0 1.5px rgba(52,199,89,.55)}
:root[data-panel="assistant"] .plan-tier.warn{box-shadow:inset 0 0 0 1.5px rgba(255,159,10,.7)}
:root[data-panel="assistant"] .plan-tier.bad{box-shadow:inset 0 0 0 1.5px rgba(255,69,58,.7)}
:root[data-panel="assistant"] .plan-tier-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
:root[data-panel="assistant"] .plan-tier-name{flex:1;min-width:0;font-size:18px;font-weight:700;color:#fff;overflow-wrap:anywhere}
:root[data-panel="assistant"] .plan-tier-price{font-size:26px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}
:root[data-panel="assistant"] .plan-tier-price.none{font-size:18px;color:rgba(255,255,255,.72)}
:root[data-panel="assistant"] .plan-tier-unit{margin-left:6px;font-size:13px;font-weight:500;color:rgba(255,255,255,.62)}
:root[data-panel="assistant"] .plan-tier-k{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:rgba(255,255,255,.55);padding-bottom:4px}
:root[data-panel="assistant"] .plan-tier-inc ul,:root[data-panel="assistant"] .plan-effect ul,:root[data-panel="assistant"] .plan-effect-note ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px;font-size:13px;line-height:1.45;color:rgba(255,255,255,.8)}
:root[data-panel="assistant"] .plan-tier .asst-acts{margin-top:auto}
:root[data-panel="assistant"] .plan-effect{padding:14px 18px;margin:0 0 16px}
:root[data-panel="assistant"] .plan-billing.ok{box-shadow:inset 0 0 0 1.5px rgba(52,199,89,.55)}
:root[data-panel="assistant"] .plan-billing.warn{box-shadow:inset 0 0 0 1.5px rgba(255,159,10,.7)}
:root[data-panel="assistant"] .plan-billing.warn i{color:#ff9f0a}
:root[data-panel="assistant"] .plan-billing.ok i{color:#34c759}
:root[data-panel="assistant"] .plan-effect-note{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;padding:11px 14px}
:root[data-panel="assistant"] .plan-err{margin:10px 0 0;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.45;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,69,58,.75)}
:root[data-panel="assistant"] .plan-err[hidden]{display:none}
:root[data-panel="assistant"] .plan-lines{display:flex;flex-direction:column;gap:6px}
:root[data-panel="assistant"] .plan-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
:root[data-panel="assistant"] .plan-line.ok{box-shadow:inset 0 0 0 1px rgba(52,199,89,.45)}
:root[data-panel="assistant"] .plan-line.warn{box-shadow:inset 0 0 0 1.5px rgba(255,159,10,.7)}
:root[data-panel="assistant"] .plan-line.bad{box-shadow:inset 0 0 0 1.5px rgba(255,69,58,.7)}
:root[data-panel="assistant"] .plan-line-k{flex:1 1 140px;min-width:0;font-size:13px;color:rgba(255,255,255,.8);overflow-wrap:anywhere}
:root[data-panel="assistant"] .plan-line-v{font-size:14px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
:root[data-panel="assistant"] .plan-line .btn{padding:4px 10px;font-size:12px}
:root[data-panel="assistant"] .plan-biz,:root[data-panel="assistant"] .plan-texting{display:flex;flex-direction:column;gap:8px;padding:14px 18px;margin:0 0 12px}
:root[data-panel="assistant"] .plan-biz.ok{box-shadow:inset 0 0 0 1.5px rgba(52,199,89,.55)}
:root[data-panel="assistant"] .plan-biz.warn{box-shadow:inset 0 0 0 1.5px rgba(255,159,10,.7)}
:root[data-panel="assistant"] .plan-biz.bad{box-shadow:inset 0 0 0 1.5px rgba(255,69,58,.7)}
:root[data-panel="assistant"] .plan-biz-inc{font-size:13px;line-height:1.45;color:rgba(255,255,255,.8)}
/* ── end lane ADMIN-12 ── */

/* ── Layer 3l: Admin pages — Team, Roles & permissions, Audit log (lane A3; One Roof Admin.dc.html) ── */
:root[data-panel="assistant"] .adm-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
:root[data-panel="assistant"] .adm-gap{flex:1}
:root[data-panel="assistant"] .adm-note{margin:0 0 12px;padding:11px 14px;font-size:13px;line-height:1.45;align-items:center}
:root[data-panel="assistant"] .adm-note i{color:#8fb0ff}
:root[data-panel="assistant"] .team-role{min-height:34px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;font:inherit;font-size:13px;font-weight:600;padding:0 10px}
:root[data-panel="assistant"] .team-role:focus{outline:0;border-color:#7fa2ff;box-shadow:var(--pn-focus)}
:root[data-panel="assistant"] .team-role option{background:#1a2036;color:#fff}
:root[data-panel="assistant"] .adm-bar .wchips{flex-wrap:wrap;max-width:100%}
:root[data-panel="assistant"] .adm-refs{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
:root[data-panel="assistant"] .adm-ref{display:inline-block;padding:2px 8px;border-radius:8px;background:rgba(255,255,255,.08);font-size:12px;color:rgba(255,255,255,.85);max-width:100%;overflow-wrap:anywhere}
:root[data-panel="assistant"] .adm-who{font-weight:600}
:root[data-panel="assistant"] .team-tbl td{vertical-align:middle;padding:11px 12px}
:root[data-panel="assistant"] .team-tbl thead th{padding:11px 12px;white-space:normal}
:root[data-panel="assistant"] .adm-when{font-variant-numeric:tabular-nums;min-width:96px}
@media (max-width:1100px){
  :root[data-panel="assistant"] .team-tbl .asst-tag{white-space:normal}
}
:root[data-panel="assistant"] .team-tbl .btn{white-space:nowrap}
@media (max-width:560px){
  :root[data-panel="assistant"] .adm-who{overflow-wrap:anywhere}
}
:root[data-panel="assistant"] .adm-audit .asst-scope{white-space:nowrap}
:root[data-panel="assistant"] .adm-audit .adm-refs{min-width:150px}
:root[data-panel="assistant"] .adm-audit td .sm{overflow-wrap:anywhere}
@media (max-width:560px){
  :root[data-panel="assistant"] .adm-audit .adm-refs{min-width:0}
}
:root[data-panel="assistant"] .adm-filters{align-items:flex-end;margin:0 0 12px}
:root[data-panel="assistant"] .adm-filters .asst-field{margin:0;flex:1 1 220px}
/* the roles grid (prototype: card r18 .06 ring .12; role columns min 96px; owner column at .55) */
:root[data-panel="assistant"] .rg-card{padding:0;overflow:auto;border-radius:18px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
:root[data-panel="assistant"] .rg-tbl{width:100%;min-width:880px;border-collapse:collapse}
:root[data-panel="assistant"] .rg-tbl th,
:root[data-panel="assistant"] .rg-tbl td{padding:11px 8px;text-align:center;vertical-align:middle;border-top:1px solid rgba(255,255,255,.06);border-bottom:0;text-transform:none;letter-spacing:0}
:root[data-panel="assistant"] .rg-tbl thead th{border-top:0;padding:14px 8px;font-size:13px;font-weight:700;color:#fff;letter-spacing:0;text-transform:none}
:root[data-panel="assistant"] .rg-tbl th[scope="row"],
:root[data-panel="assistant"] .rg-tbl .rg-perm{text-align:left;padding:11px 16px;width:28%;min-width:220px}
:root[data-panel="assistant"] .rg-tbl .rg-perm{font-size:12px;color:rgba(255,255,255,.62)}
:root[data-panel="assistant"] .rg-t{font-size:14px;font-weight:600;color:#fff}
:root[data-panel="assistant"] .rg-d{font-size:12px;font-weight:400;color:rgba(255,255,255,.62)}
:root[data-panel="assistant"] .rg-scope th,
:root[data-panel="assistant"] .rg-scope td{background:rgba(91,139,255,.08);border-top-color:rgba(255,255,255,.08)}
:root[data-panel="assistant"] .rg-group th{text-align:left;padding:14px 16px 8px;font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.60)}
:root[data-panel="assistant"] .rg-mark{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);color:#fff;font-size:14px}
:root[data-panel="assistant"] .rg-mark.on{background:#3a6df0;box-shadow:inset 0 0 0 1.5px #3a6df0}
:root[data-panel="assistant"] .rg-locked{opacity:.55}

/* ── lane ADMIN-11 (B-09): Organizations on this door — summary strip filters, chips, the card grid, the org page's paired
   blocks (ADMIN PANEL.md §2). Status is a BORDER on a neutral card (a problem card = red ring), never a fill. ── */
:root[data-panel="assistant"] .ao-kpi{font:inherit;color:inherit;text-align:left;background:transparent;border:0;cursor:pointer;width:100%;border-radius:20px}
:root[data-panel="assistant"] .ao-kpi:hover{background:rgba(255,255,255,.05)}
:root[data-panel="assistant"] .ao-kpi[aria-pressed="true"]{background:rgba(255,255,255,.08)}
:root[data-panel="assistant"] .ao-kpi.bad{box-shadow:inset 0 0 0 1.5px #ff453a}
:root[data-panel="assistant"] .ao-kpi:focus-visible{outline:2px solid #5b8bff;outline-offset:-2px}
:root[data-panel="assistant"] .ao-x{border:0;background:transparent;color:inherit;cursor:pointer;padding:0 0 0 4px;font-size:12px}
:root[data-panel="assistant"] .ao-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:16px}
:root[data-panel="assistant"] .ao-card{display:flex;flex-direction:column;gap:12px;margin:0;padding:16px 18px;text-align:left;font:inherit;color:inherit;cursor:pointer;width:100%;min-width:0}
:root[data-panel="assistant"] .ao-card:hover{background:rgba(255,255,255,.13)}
:root[data-panel="assistant"] .ao-card:focus-visible{outline:2px solid #5b8bff;outline-offset:2px}
:root[data-panel="assistant"] .ao-problem{box-shadow:inset 0 0 0 1.5px #ff453a}
:root[data-panel="assistant"] .ao-top{display:flex;align-items:flex-start;gap:12px;min-width:0}
:root[data-panel="assistant"] .ao-av{flex:none;width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;background:rgba(255,255,255,.16)}
:root[data-panel="assistant"] .ao-av.paid{background:#3a6df0}
:root[data-panel="assistant"] .ao-av.big{width:52px;height:52px;border-radius:16px;font-size:17px}
:root[data-panel="assistant"] .ao-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
:root[data-panel="assistant"] .ao-id .nm{font-size:15px;font-weight:600;color:#fff;overflow-wrap:anywhere}
:root[data-panel="assistant"] .ao-id .ds{font-size:12px;color:rgba(255,255,255,.62);overflow-wrap:anywhere}
:root[data-panel="assistant"] .ao-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
:root[data-panel="assistant"] .ao-figs > span{display:flex;flex-direction:column;gap:2px;min-width:0}
:root[data-panel="assistant"] .ao-figs .k{font-size:11px;font-weight:600;color:rgba(255,255,255,.55)}
:root[data-panel="assistant"] .ao-figs .v{font-size:14px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
:root[data-panel="assistant"] .ao-low,:root[data-panel="assistant"] .ao-figs .v.ao-low,:root[data-panel="assistant"] .ao-kv > span:last-child.ao-low{color:#ff6961}
:root[data-panel="assistant"] .ao-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
:root[data-panel="assistant"] .ao-meta{font-size:12px;color:rgba(255,255,255,.55)}
/* the slug line moves as ONE box (no "·" left at a row's end) and wraps inside itself (a long slug never widens the page) */
:root[data-panel="assistant"] .ao-slugline{display:inline-block;max-width:100%;overflow-wrap:anywhere}
:root[data-panel="assistant"] .ao-head .ohead{align-items:center}
:root[data-panel="assistant"] .ao-name{margin:0;font-family:var(--serif);font-size:28px;font-weight:500;line-height:1.15;color:#fff;overflow-wrap:anywhere}
:root[data-panel="assistant"] .ao-pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
:root[data-panel="assistant"] .ao-block{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
:root[data-panel="assistant"] .ao-bh{margin:0 0 6px;font-size:16px;font-weight:600;color:#fff;display:flex;align-items:center;gap:8px}
:root[data-panel="assistant"] .ao-bh .ti{color:rgba(255,255,255,.7)}
:root[data-panel="assistant"] .ao-kv{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;padding:5px 0;border-top:1px solid rgba(255,255,255,.06)}
:root[data-panel="assistant"] .ao-kv:first-of-type{border-top:0}
:root[data-panel="assistant"] .ao-kv > span:first-child{color:rgba(255,255,255,.62)}
:root[data-panel="assistant"] .ao-kv > span:last-child{text-align:right;color:#fff;overflow-wrap:anywhere}
:root[data-panel="assistant"] .ao-big{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
:root[data-panel="assistant"] .ao-list{display:flex;flex-direction:column;max-height:240px;overflow-y:auto}
:root[data-panel="assistant"] .ao-li{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13.5px;padding:7px 0;border-top:1px solid rgba(255,255,255,.06)}
:root[data-panel="assistant"] .ao-li:first-child{border-top:0}
:root[data-panel="assistant"] .ao-li > span:first-child{min-width:0;overflow-wrap:anywhere}
:root[data-panel="assistant"] .ao-li .num{white-space:nowrap;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:8px}
:root[data-panel="assistant"] .ao-li .sm{font-size:12px;color:rgba(255,255,255,.55)}
:root[data-panel="assistant"] .ao-user .nm{font-weight:600;color:#fff}
:root[data-panel="assistant"] .ao-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
:root[data-panel="assistant"] .ao-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:8px}
:root[data-panel="assistant"] .ao-notused{font-size:14px;font-weight:600;color:#fff;padding:4px 0}
:root[data-panel="assistant"] .ao-fail{color:#ff6961}
:root[data-panel="assistant"] .pmmargin{margin:0 6px;font-size:11px}
@media (max-width:860px){
  :root[data-panel="assistant"] .ao-pairs{grid-template-columns:1fr}
}
@media (max-width:560px){
  :root[data-panel="assistant"] .ao-grid{grid-template-columns:1fr}
  :root[data-panel="assistant"] .ao-name{font-size:24px}
  :root[data-panel="assistant"] .ao-li{flex-wrap:wrap}
  :root[data-panel="assistant"] .ao-li > span:first-child{flex:1 1 100%}
  :root[data-panel="assistant"] .ao-li > .num{margin-left:auto}
  :root[data-panel="assistant"] .ao-chips{flex-wrap:wrap}
}
/* ── lane ADMIN-11 (B-13): the Usage & revenue breakdown — plain tables with inline bars (data, not status) ── */
:root[data-panel="assistant"] .ub-bar{display:inline-block;width:100%;max-width:220px;height:8px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;vertical-align:middle}
:root[data-panel="assistant"] .ub-bar > span{display:block;height:100%;border-radius:4px;background:#5b8bff}
:root[data-panel="assistant"] .ub-barcol{width:30%;min-width:140px}
:root[data-panel="assistant"] .ub-barwrap{display:flex;align-items:center;gap:10px}
:root[data-panel="assistant"] .ub-barwrap .num{font-variant-numeric:tabular-nums;min-width:2ch}
:root[data-panel="assistant"] .ub-total td{border-top:1px solid rgba(255,255,255,.18);font-weight:700}
:root[data-panel="assistant"] .ub-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
:root[data-panel="assistant"] .ub-month{margin:0;min-width:180px}
@media (max-width:560px){
  :root[data-panel="assistant"] .ub-barcol{width:auto;min-width:0}
  :root[data-panel="assistant"] .ub-tbl td.ub-barcol:empty{display:none}
}
/* lane ADMIN-14 (look fix): in the 390 card view a number cell's label inherited the value's nowrap, and as a flex item its
   min-content width pushed the value off screen ("Metered usage (Free personal accounts aren't billed)"). The label wraps. */
@media (max-width:560px){
  :root[data-panel="assistant"] .asst-tbl td.num::before{white-space:normal;min-width:0}
}
/* ── lane ADMIN-11 (B-16): the profile chip + menu (prototype: r20 chip, 26px avatar, first name, ▾; a 280px menu), the
   one-line page subtitle, the signed-out screen. The CRM door's inline identity buttons are hidden on this door: they
   live in the menu. ── */
:root[data-panel="assistant"] .me #meEmail,
:root[data-panel="assistant"] .me #meAvatar,
:root[data-panel="assistant"] .me #viewAsBtn,
:root[data-panel="assistant"] .me #switchPanelBtn,
:root[data-panel="assistant"] .me #signOutBtn{display:none!important}
:root[data-panel="assistant"] .pchip{position:relative;flex:none}
:root[data-panel="assistant"] .pchip-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;border:0;padding:6px 12px 6px 6px;border-radius:20px;background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
:root[data-panel="assistant"] .pchip-btn:hover{background:rgba(255,255,255,.14)}
:root[data-panel="assistant"] .pchip-btn:focus-visible{outline:none;box-shadow:var(--pn-focus)}
:root[data-panel="assistant"] .pchip-btn .ti{font-size:12px;color:rgba(255,255,255,.62)}
:root[data-panel="assistant"] .pchip-av{width:28px;height:28px;border-radius:14px;background:#3a6df0;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
:root[data-panel="assistant"] .pchip-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-panel="assistant"] .pchip-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:70;width:280px;max-width:calc(100vw - 24px);display:flex;flex-direction:column;padding:6px;border-radius:16px;background:var(--pn-modal);border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 50px rgba(0,0,0,.5)}
:root[data-panel="assistant"] .pchip-menu[hidden]{display:none}
:root[data-panel="assistant"] .pchip-who{padding:10px 12px}
:root[data-panel="assistant"] .pchip-who-nm{font-size:14px;font-weight:600;color:#fff}
:root[data-panel="assistant"] .pchip-who-em{font-size:12px;color:rgba(255,255,255,.62);overflow-wrap:anywhere}
:root[data-panel="assistant"] .pchip-sep{height:1px;background:rgba(255,255,255,.08);margin:4px 6px}
:root[data-panel="assistant"] .pchip-item{display:flex;align-items:center;gap:10px;text-align:left;border:0;border-radius:10px;padding:9px 12px;min-height:40px;background:transparent;color:#fff;font:inherit;font-size:14px;cursor:pointer;text-decoration:none}
:root[data-panel="assistant"] .pchip-item:hover,:root[data-panel="assistant"] .pchip-item:focus-visible{background:rgba(255,255,255,.08);outline:none}
:root[data-panel="assistant"] .pchip-item .ti{font-size:16px;color:rgba(255,255,255,.7)}
@media (min-width:861px){
  :root[data-panel="assistant"] #detail > .card > .ohead .meta{flex-wrap:nowrap;min-width:0}
  :root[data-panel="assistant"] .asst-headsub{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
:root[data-panel="assistant"] #signedOut{position:fixed;inset:0;z-index:200}
:root[data-panel="assistant"] .so-screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(120% 90% at 50% 0%,#1b2547,#0a0e1c)}
:root[data-panel="assistant"] .so-card{width:min(380px,100%);display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px 26px;border-radius:24px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);text-align:center;color:#fff}
:root[data-panel="assistant"] .so-logo{width:52px;height:52px;border-radius:16px;background:#3a6df0;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700}
:root[data-panel="assistant"] .so-title{margin:0;font-family:var(--serif);font-size:26px;font-weight:500}
:root[data-panel="assistant"] .so-sub{font-size:13px;color:rgba(255,255,255,.62)}
:root[data-panel="assistant"] .so-google{display:block;width:100%;box-sizing:border-box;border-radius:12px;padding:12px;min-height:44px;background:#fff;color:#111;font-size:15px;font-weight:600;text-decoration:none}
:root[data-panel="assistant"] .so-google:focus-visible{outline:none;box-shadow:var(--pn-focus)}
:root[data-panel="assistant"] .so-note{font-size:12px;color:rgba(255,255,255,.62);line-height:1.5}
:root[data-panel="assistant"] .so-note a{color:#fff}