/* OFFIIO AI — backend demo, Option 2 "Speech Corner"
   Evergreen + white · one shape: the speech-bubble corner (three round, one squared)
   Fonts: Figtree (UI), Bricolage Grotesque (titles) — SIL OFL, self-hosted variable files */

@font-face{font-family:"Figtree";src:url(../fonts/Figtree-var.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/Bricolage-var.woff2) format("woff2");font-weight:200 800;font-display:swap}

:root{
  /* brand */
  --brand:#0F3D3A; --brand-2:#174B47; --brand-3:#215954; --brand-ink:#FFFFFF; --brand-muted:#B7D3CE;
  --primary:#13806F; --primary-hover:#0F6B5D; --primary-tint:#E5F3EF; --primary-tint-2:#CFE9E2;
  /* surfaces */
  --ground:#F4F7F6; --surface:#FFFFFF; --surface-2:#F8FAF9; --surface-3:#EEF3F1;
  --rule:#E2E8E6; --rule-2:#CCD6D3;
  --ink:#10201E; --ink-2:#3B4D4A; --ink-3:#5B6E6A; --ink-4:#8A9A97;
  /* meaning */
  --attn:#FFB547; --attn-ink:#7A4B00; --attn-bg:#FFF4DF;
  --crit:#D2363C; --crit-ink:#B21F27; --crit-bg:#FDECEC;
  --ok:#1E9E62; --ok-ink:#11663D; --ok-bg:#E6F6EE;
  --info:#3E7BFA; --info-ink:#2153C2; --info-bg:#EAF1FF;
  /* areas (Option 1 "lines" become quiet area colours) */
  --l-chat:#8A9A97; --l-know:#8A9A97; --l-mail:#8A9A97; --l-acct:#8A9A97; --l-net:#8A9A97; --enamel:#0F3D3A;
  /* type */
  --f-ui:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display:"Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --f-label:var(--f-ui);
  --t-xs:.75rem; --t-sm:.8125rem; --t-md:.9375rem; --t-base:1rem; --t-lg:1.125rem; --t-xl:1.375rem; --t-2xl:1.75rem; --t-3xl:2rem;
  /* shape: the speech corner */
  --rb:14px 14px 14px 2px; --rb-sm:10px 10px 10px 2px; --r:10px 10px 10px 2px; --r-sm:8px 8px 8px 2px;
  --shadow-1:0 1px 2px rgba(0,0,0,.04), 0 2px 10px rgba(0,0,0,.035);
  --shadow-2:0 12px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
  --nav-w:252px; --bar-h:60px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --focus:#3E7BFA;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-ui);font-size:var(--t-md);line-height:1.55;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
::selection{background:var(--primary);color:#fff}
img,svg{display:block;max-width:100%}
a{color:var(--info-ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
h1,h2,h3,h4{margin:0;line-height:1.3;text-wrap:balance}
p{margin:0}
code,kbd,.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.8125rem}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#C6D2CF;border-radius:10px;border:3px solid var(--ground)}
*{scrollbar-color:#C6D2CF transparent;scrollbar-width:thin}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.icon{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon.sm{width:15px;height:15px}.icon.lg{width:22px;height:22px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--surface);padding:8px 12px;border-radius:var(--r)}
.skip:focus{left:8px}

/* ───────── Shell ───────── */
.appbar{position:sticky;top:0;z-index:40;height:var(--bar-h);display:flex;align-items:center;gap:14px;padding:0 18px;background:var(--brand);color:var(--brand-ink)}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;min-width:calc(var(--nav-w) - 18px)}
.brand-mark{width:32px;height:32px}
.brand-name{font-family:var(--f-display);font-weight:700;font-size:1.2rem;letter-spacing:-.01em}
.brand-name small{font-family:var(--f-ui);font-weight:500;font-size:.72rem;color:var(--brand-muted);margin-left:8px;letter-spacing:.02em}
.cmd{display:flex;align-items:center;gap:10px;height:38px;width:min(440px,40vw);padding:0 10px 0 12px;border-radius:var(--r);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#DCEBE7;font:inherit;font-size:var(--t-md);cursor:pointer;text-align:left}
.cmd:hover{background:rgba(255,255,255,.14)}
.cmd span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmd kbd{font-size:.72rem;color:#DCEBE7;border:1px solid rgba(255,255,255,.25);border-radius:5px;padding:1px 6px;font-family:var(--f-ui)}
.appbar .spacer{flex:1}
.bar-btn{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r);border:0;background:transparent;color:#E6F1EE;cursor:pointer}
.bar-btn:hover{background:rgba(255,255,255,.1)}
.bar-btn .dot{position:absolute;top:7px;right:8px;width:9px;height:9px;border-radius:50%;background:var(--attn);border:2px solid var(--brand)}
.bar-user{display:flex;align-items:center;gap:10px;padding:4px 8px 4px 4px;border-radius:24px;border:0;background:transparent;color:#fff;font:inherit;cursor:pointer}
.bar-user:hover{background:rgba(255,255,255,.1)}
.bar-user b{font-weight:600;font-size:var(--t-md)}
.demo-flag{font-size:.72rem;color:var(--brand-muted);border:1px dashed rgba(255,255,255,.3);border-radius:6px;padding:2px 8px;white-space:nowrap}
.menu-btn{display:none}

.app{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr);min-height:calc(100vh - var(--bar-h))}
.sidenav{position:sticky;top:var(--bar-h);height:calc(100vh - var(--bar-h));background:var(--surface);border-right:1px solid var(--rule);display:flex;flex-direction:column;z-index:30}
.scope{margin:14px 12px 6px;padding:10px 12px;border-radius:var(--rb-sm);background:var(--primary-tint);display:flex;align-items:center;gap:10px}
.scope b{display:block;font-weight:700;font-size:var(--t-md);color:var(--brand)}
.scope span{font-size:var(--t-sm);color:var(--ink-3)}
.nav{flex:1;overflow-y:auto;padding:4px 10px 16px}
.nav-group{margin-top:14px}
.nav-group h2{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);padding:0 10px 6px;display:flex;align-items:center;gap:8px}
.nav-group h2 .flag{display:inline-block;line-height:1.5;margin-left:auto;text-transform:none;letter-spacing:0;font-weight:600;font-size:.7rem;color:var(--attn-ink);background:var(--attn-bg);border-radius:10px;padding:1px 7px;text-decoration:none}
.nav-group ul{list-style:none;margin:0;padding:0}
.nav-group ul a{display:flex;align-items:center;gap:10px;min-height:38px;padding:7px 10px;border-radius:var(--rb-sm);color:var(--ink-2);text-decoration:none;font-weight:500;font-size:var(--t-md);transition:background .15s,color .15s}
.nav-group ul a .icon{color:var(--ink-4)}
.nav-group ul a:hover{background:var(--surface-3);color:var(--ink)}
.nav-group ul a[aria-current="page"]{background:var(--primary-tint);color:var(--brand);font-weight:700}
.nav-group ul a[aria-current="page"] .icon{color:var(--primary)}
.nav-group .tag{margin-left:auto;font-size:.68rem;font-weight:600;border:1px dashed var(--rule-2);border-radius:6px;padding:0 6px;color:var(--ink-3)}
.nav-group .count{margin-left:auto;min-width:22px;text-align:center;font-size:.72rem;font-weight:700;padding:1px 7px;border-radius:10px;background:var(--crit);color:#fff}
.nav-foot{border-top:1px solid var(--rule);padding:12px 14px;font-size:var(--t-sm);color:var(--ink-3);display:flex;align-items:center;gap:8px}
.scrim{display:none}
.main{min-width:0;display:flex;flex-direction:column}
.crumbs-bar{padding:16px 32px 0}
.crumbs{display:flex;align-items:center;gap:6px;font-size:var(--t-sm);color:var(--ink-3)}
.crumbs a{color:var(--ink-3);text-decoration:none}.crumbs a:hover{color:var(--ink)}
.crumbs .icon{width:14px;height:14px;color:var(--ink-4)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
.content{padding:14px 32px 64px;max-width:1440px;width:100%;margin:0 auto}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.page-head h1{font-family:var(--f-display);font-weight:700;font-size:var(--t-3xl);letter-spacing:-.02em;line-height:1.25}
.page-head .sub{margin-top:6px;color:var(--ink-3);font-size:var(--t-md);max-width:72ch}
.page-head .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.8rem;background:var(--surface-3);color:var(--brand);flex:none}
.appbar .avatar{background:var(--primary);color:#fff}

/* ───────── Layout ───────── */
.grid{display:grid;gap:20px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,2fr) minmax(300px,1fr);align-items:start}
.g-row2{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.g-row2>.panel{display:flex;flex-direction:column}
.g-row2>.panel>.panel-foot{margin-top:auto}
.g-side{grid-template-columns:minmax(260px,330px) minmax(0,1fr)}
.stack{display:flex;flex-direction:column;gap:20px}
.row{display:flex;align-items:center;gap:10px}
.row.wrap{flex-wrap:wrap}.row.between{justify-content:space-between}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}.mb-4{margin-bottom:32px}
.muted{color:var(--ink-3)}.small{font-size:var(--t-sm)}.xs{font-size:var(--t-xs)}
.strong{font-weight:700;color:var(--ink)}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.right{text-align:right}.nowrap{white-space:nowrap}.block{display:block}

/* ───────── Panels (speech corner) ───────── */
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--rb);box-shadow:var(--shadow-1);min-width:0;overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 12px}
.panel-head h2{font-family:var(--f-ui);font-weight:700;font-size:var(--t-base);letter-spacing:-.005em;display:flex;align-items:center;gap:10px}
.panel-head h2 .badge-line{display:none}
.panel-head .meta{font-size:var(--t-sm);color:var(--ink-3)}
.panel-body{padding:4px 20px 20px}
.panel-head + .panel-body.flush, .panel-body.flush{padding:0}
.panel-foot{padding:12px 20px;border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--t-sm);color:var(--ink-3);background:var(--surface-2)}
.panel-foot a{white-space:nowrap;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px;color:var(--primary)}
.section-title{font-family:var(--f-display);font-weight:700;font-size:1.2rem;letter-spacing:-.01em;margin:0 0 12px}

/* ───────── Buttons ───────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 15px;border-radius:var(--r);border:1px solid var(--rule-2);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;font-size:var(--t-md);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,transform .1s}
.btn:hover{background:var(--surface-3);border-color:var(--ink-4);color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;border-radius:var(--rb-sm)}
.btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}
.btn.dark{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.dark:hover{background:var(--brand-3);color:#fff}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--surface-3)}
.btn.danger{color:var(--crit-ink);border-color:#F2C2C4}
.btn.danger:hover{background:var(--crit-bg)}
.btn.danger-solid{background:var(--crit);border-color:var(--crit);color:#fff}
.btn.danger-solid:hover{background:#B42B31;color:#fff}
.btn.sm{height:32px;padding:0 11px;font-size:var(--t-sm)}
.btn.icon-only{width:38px;padding:0}.btn.sm.icon-only{width:32px}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}
.btn.is-loading{position:relative;color:transparent!important;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:spin .7s linear infinite}
.btn:not(.primary):not(.danger-solid).is-loading::after{border-color:var(--rule-2);border-top-color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r);background:var(--surface-3)}
.seg button{height:32px;padding:0 13px;border:0;border-radius:8px 8px 8px 2px;background:transparent;font:inherit;font-size:var(--t-sm);font-weight:600;color:var(--ink-3);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.seg button:hover:not([aria-pressed="true"]){color:var(--ink)}
.tabs{display:flex;gap:4px;margin-bottom:20px;overflow-x:auto;padding:4px;background:var(--surface-3);border-radius:var(--r);width:max-content;max-width:100%}
.tabs button,.tabs a{height:36px;padding:0 14px;border:0;border-radius:8px 8px 8px 2px;background:none;font:inherit;font-weight:600;color:var(--ink-3);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.tabs [aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.tabs button:hover{color:var(--ink)}
.tabs .count{font-size:.72rem;padding:0 7px;border-radius:9px;background:var(--rule);color:var(--ink-2)}
@media (min-width:961px){.tabs{flex-wrap:wrap}} /* desktop: a long tab strip wraps instead of hiding its last tabs (phones keep the swipe row) */
[role="tabpanel"][hidden]{display:none}

/* ───────── Status, chips ───────── */
.status{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 8px;border-radius:12px;font-size:var(--t-sm);font-weight:600;white-space:nowrap}
.status .icon{width:14px;height:14px;stroke-width:2.2}
.status.ok{background:var(--ok-bg);color:var(--ok-ink)}
.status.warn{background:var(--attn-bg);color:var(--attn-ink)}
.status.crit{background:var(--crit-bg);color:var(--crit-ink)}
.status.info{background:var(--info-bg);color:var(--info-ink)}
.status.off{background:var(--surface-3);color:var(--ink-2)}
.status.planned{background:transparent;border:1px dashed var(--ink-4);color:var(--ink-2);font-size:.75rem}
.line-badge{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-sm);font-weight:600;color:var(--ink-2)}
.line-badge::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--lc)}
.plan{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--rb-sm);font-weight:700;font-size:.75rem;background:var(--surface-3);color:var(--ink-2)}
.plan.pro{background:var(--brand);color:#fff}
.plan.growth{background:var(--primary-tint);color:var(--brand)}
.plan.trial{background:transparent;border:1px dashed var(--rule-2)}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid var(--rule-2);border-radius:15px;background:var(--surface);font:inherit;font-size:var(--t-sm);font-weight:600;color:var(--ink-2);cursor:pointer}
.chip:hover{border-color:var(--ink-4)}
.chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ink-4);flex:none}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--attn)}.dot.crit{background:var(--crit)}

/* quota */
.quota{display:grid;grid-template-columns:minmax(80px,1fr) auto;align-items:center;gap:4px 10px;min-width:150px}
.quota .track{position:relative;height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.quota .fill{position:absolute;inset:0 auto 0 0;border-radius:4px;background:var(--primary)}
.quota .fill.warn{background:var(--attn)}
.quota .fill.crit{background:var(--crit)}
.quota .left{font-size:var(--t-sm);color:var(--ink-3);text-align:right;white-space:nowrap}
.quota .left b{color:var(--ink);font-weight:700}
.quota.big .track{height:12px;border-radius:6px}.quota.big .fill{border-radius:6px}
.quota .cap{grid-column:1/-1;display:flex;justify-content:space-between;font-size:var(--t-xs);color:var(--ink-3)}
.mag{display:none}

/* tables */
.table-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:var(--t-md)}
.t th{position:sticky;top:0;background:var(--surface-2);text-align:left;font-weight:600;font-size:var(--t-sm);color:var(--ink-3);padding:10px 14px;border-bottom:1px solid var(--rule);white-space:nowrap}
.t th.sortable{cursor:pointer;user-select:none}.t th.sortable:hover{color:var(--ink)}
.t th .sort{display:inline-flex;vertical-align:middle;margin-left:4px;opacity:.5}
.t th[aria-sort] .sort{opacity:1;color:var(--primary)}
.t td{padding:13px 14px;border-bottom:1px solid var(--rule);vertical-align:middle}
.t tr:last-child td{border-bottom:0}
.t tbody tr:hover{background:#F7FBFA}
.t tbody tr.is-selected{background:var(--primary-tint)}
.t td.right,.t th.right{text-align:right}
.t .cell-main{display:flex;align-items:center;gap:12px;min-width:0}
.t .cell-main b{font-weight:600;color:var(--ink);display:block}
.t .cell-main span{font-size:var(--t-sm);color:var(--ink-3);white-space:nowrap}
.t a.row-link{color:inherit;text-decoration:none}
.t a.row-link:hover b{color:var(--primary)}
.t input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary)}
.t.compact td{padding:10px 14px}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--rule)}
.toolbar .spacer{flex:1}
.search{position:relative;width:280px}
.search .icon{position:absolute;left:11px;top:50%;margin-top:-9px;color:var(--ink-3);pointer-events:none}
.search input{width:100%;height:38px;padding:0 12px 0 36px;border:1px solid var(--rule-2);border-radius:var(--r);background:var(--surface);font:inherit;font-size:var(--t-md);color:var(--ink)}
.search input:focus{outline:2px solid var(--focus);outline-offset:1px}
.bulkbar{display:none;align-items:center;gap:10px;padding:10px 20px;background:var(--brand);color:#fff;font-size:var(--t-sm)}
.bulkbar.show{display:flex}
.bulkbar .btn{height:30px;font-size:var(--t-sm);background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.bulkbar .btn:hover{background:var(--brand-3)}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-top:1px solid var(--rule);font-size:var(--t-sm);color:var(--ink-3)}
.pager .pages{display:flex;gap:4px}
.pager button{min-width:32px;height:32px;border:1px solid var(--rule-2);border-radius:8px;background:var(--surface);font:inherit;font-weight:600;color:var(--ink-2);cursor:pointer}
.pager button[aria-current="page"]{background:var(--brand);color:#fff;border-color:var(--brand)}

/* forms */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.form-grid .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.label{font-weight:600;font-size:var(--t-md);color:var(--ink)}
.field .hint{font-size:var(--t-sm);color:var(--ink-3)}
.field .err{display:flex;align-items:center;gap:6px;font-size:var(--t-sm);color:var(--crit-ink);font-weight:600}
.input,.select,.textarea{width:100%;min-height:40px;padding:8px 12px;border:1px solid var(--rule-2);border-radius:var(--r);background:var(--surface);font:inherit;font-size:var(--t-md);color:var(--ink);transition:border-color .15s}
.textarea{min-height:110px;resize:vertical}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6E6A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:34px}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ink-4)}
.input:focus,.select:focus,.textarea:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.input::placeholder,.textarea::placeholder{color:#5F716D}
.input[aria-invalid="true"]{border-color:var(--crit);border-width:2px;padding:7px 11px}
.input[disabled]{background:var(--surface-3);color:var(--ink-3)}
.input-group{display:flex}
.input-group .input{border-radius:10px 0 0 2px}
.input-group .btn{border-radius:0 10px 10px 0}
.affix{display:flex;align-items:center;border:1px solid var(--rule-2);border-radius:var(--r);background:var(--surface);overflow:hidden}
.affix span{padding:0 10px;color:var(--ink-3);font-size:var(--t-sm);background:var(--surface-2);align-self:stretch;display:flex;align-items:center;border-right:1px solid var(--rule)}
.affix .input{border:0;border-radius:0}
.check,.radio{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.check input,.radio input{width:17px;height:17px;margin-top:3px;accent-color:var(--primary)}
.option{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--rule-2);border-radius:var(--rb-sm);cursor:pointer;transition:border-color .15s,background .15s}
.option:hover{border-color:var(--ink-4)}
.option:has(input:checked){border-color:var(--primary);background:var(--primary-tint);outline:1px solid var(--primary)}
.option input{margin-top:3px;accent-color:var(--primary);width:17px;height:17px}
.option .grow{flex:1;min-width:0}
.plain-block{padding:4px 0}
.switch{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.switch input{position:absolute;opacity:0;width:44px;height:24px;margin:0;cursor:pointer}
.switch .track{width:44px;height:24px;border-radius:12px;background:#C3CFCC;position:relative;transition:background .2s;flex:none}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s var(--ease)}
.switch input:checked+.track{background:var(--primary)}
.switch input:checked+.track::after{transform:translateX(20px)}
.switch input:focus-visible+.track{outline:2px solid var(--focus);outline-offset:2px}
.setting{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:16px 0;border-bottom:1px solid var(--rule)}
.setting:last-child{border-bottom:0}
.setting h3{font-size:var(--t-base);font-weight:600}
.setting p{color:var(--ink-3);margin-top:2px;max-width:64ch}
.form-actions{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--rule);background:var(--surface-2)}
.error-summary{border:1px solid #F2C2C4;background:var(--crit-bg);border-radius:var(--rb-sm);padding:14px 16px;margin-bottom:18px}
.error-summary h2{font-size:var(--t-base);color:var(--crit-ink);display:flex;gap:8px;align-items:center}
.error-summary ul{margin:8px 0 0;padding-left:26px}
.secret{display:flex;gap:8px}
.secret .input{font-family:ui-monospace,Menlo,monospace;font-size:.85rem}
.dropzone{border:1.5px dashed var(--rule-2);border-radius:var(--rb);padding:28px;text-align:center;background:var(--surface-2);color:var(--ink-3)}
.dropzone b{color:var(--ink)}
.dropzone .icon{margin:0 auto 10px;width:28px;height:28px;color:var(--primary)}

/* callouts */
.callout{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--rb-sm);border:1px solid var(--rule);background:var(--surface)}
.callout .icon{margin-top:2px}
.callout b{font-weight:700}
.callout.warn{background:var(--attn-bg);border-color:#F6DDB0;color:#5E3A00}
.callout.crit{background:var(--crit-bg);border-color:#F2C2C4;color:#7D1218}
.callout.info{background:var(--info-bg);border-color:#C9DAFF;color:#183F96}
.callout.ok{background:var(--ok-bg);border-color:#BFE6D1;color:#0D4F2F}
.callout.planned{border:1px dashed var(--ink-4);background:var(--surface-2);color:var(--ink-2)}
.callout .grow{flex:1}

/* lists */
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;gap:12px;align-items:flex-start;padding:13px 20px;border-bottom:1px solid var(--rule)}
.list li:last-child{border-bottom:0}
.list .grow{flex:1;min-width:0}
.list .title{font-weight:600;color:var(--ink)}
.list .title a{color:inherit;text-decoration:none}.list .title a:hover{color:var(--primary)}
.list .meta{font-size:var(--t-sm);color:var(--ink-3)}
.list .when{font-size:var(--t-sm);color:var(--ink-3);white-space:nowrap}
.list .ico{width:34px;height:34px;border-radius:var(--rb-sm);display:grid;place-items:center;flex:none;background:var(--surface-3);color:var(--ink-2)}
.list .ico.warn{background:var(--attn-bg);color:var(--attn-ink)}.list .ico.crit{background:var(--crit-bg);color:var(--crit-ink)}.list .ico.ok{background:var(--ok-bg);color:var(--ok-ink)}.list .ico.info{background:var(--info-bg);color:var(--info-ink)}
.list.lined li{position:relative;padding-left:44px}
.list.lined li::before{content:"";position:absolute;left:20px;top:19px;width:10px;height:10px;border-radius:50%;background:var(--lc,var(--ink-4))}
.list.lined li.crit::before{background:var(--crit)}.list.lined li.warn::before{background:var(--attn)}
.list.lined .meta .icon{display:inline-block;vertical-align:-2px;margin-right:4px;color:var(--crit)}

/* definition rows */
.dl{display:grid;grid-template-columns:minmax(120px,40%) minmax(0,1fr);gap:0;align-content:start}
.dl dt,.dl dd{margin:0;padding:10px 0;border-bottom:1px solid var(--rule)}
.dl dt{color:var(--ink-3)}
.dl dd{color:var(--ink);font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere}
.dl dd.mono{overflow-wrap:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl dt:nth-last-child(2),.dl dd:last-child{border-bottom:0}
.dl.stacked{grid-template-columns:minmax(0,1fr)}
.dl.stacked dt{padding-bottom:0;border-bottom:0}.dl.stacked dd{text-align:left;padding-top:2px}

/* timeline */
.timeline{list-style:none;margin:0;padding:4px 20px 12px}
.timeline li{position:relative;padding:12px 0 12px 26px}
.timeline li::before{content:"";position:absolute;left:5px;top:0;bottom:0;width:2px;background:var(--rule)}
.timeline li::after{content:"";position:absolute;left:0;top:17px;width:12px;height:12px;border-radius:50%;background:var(--lc,var(--ink-4));box-shadow:0 0 0 3px var(--surface)}
.timeline .t-time{font-size:var(--t-sm);color:var(--ink-3)}

/* charts */
.chart{position:relative}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .axis text{font-family:var(--f-ui);font-size:12px;fill:var(--ink-3)}
.chart .gridline{stroke:var(--rule);stroke-width:1}
.chart .series{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .lbl{font-family:var(--f-ui);font-weight:700;font-size:12px;text-transform:none}
.chart-tip{position:absolute;pointer-events:none;background:var(--brand);color:#fff;border-radius:var(--rb-sm);padding:8px 10px;font-size:var(--t-sm);box-shadow:var(--shadow-2);opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;white-space:nowrap;z-index:5}
.chart-tip.show{opacity:1;transform:none}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:var(--t-sm);color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend svg{width:22px;height:6px;flex:none}
.uptime{display:flex;gap:2px;height:28px}
.uptime i{flex:1;border-radius:2px;background:var(--ok);opacity:.8}
.uptime i.w{background:var(--attn);opacity:1}.uptime i.c{background:var(--crit);opacity:1}

/* figures: inline summary */
.figures{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 32px;margin:0;padding:14px 20px;border:1px solid var(--rule);border-radius:var(--rb);background:var(--surface);box-shadow:var(--shadow-1)}
.figures>div{display:flex;align-items:baseline;gap:8px;min-width:0}
.figures dt{font-size:var(--t-sm);color:var(--ink-3)}
.figures dd{margin:0;display:flex;align-items:baseline;gap:6px;font-weight:700;font-size:1.15rem;color:var(--ink)}
.figures dd small{font-size:var(--t-sm);font-weight:500;color:var(--ink-3)}
.panel .figures{border:0;box-shadow:none;background:transparent;padding:8px 12px;margin:0 -12px}

/* stepper */
.stepper{display:flex;align-items:flex-start;margin:4px 0 24px;padding:0}
.stepper li{list-style:none;flex:1;position:relative;text-align:center;font-size:var(--t-sm);color:var(--ink-3);padding-top:34px}
.stepper li::before{content:"";position:absolute;top:13px;left:-50%;right:50%;height:3px;background:var(--rule)}
.stepper li:first-child::before{display:none}
.stepper li.done::before,.stepper li.current::before{background:var(--primary)}
.stepper li::after{content:attr(data-n);position:absolute;top:0;left:50%;margin-left:-14px;width:28px;height:28px;border-radius:14px 14px 14px 4px;display:grid;place-items:center;background:var(--surface);border:2px solid var(--rule-2);font-weight:700;color:var(--ink-3);font-size:.8rem}
.stepper li.done::after{background:var(--primary);border-color:var(--primary);color:#fff}
.stepper li.current::after{background:var(--brand);border-color:var(--brand);color:#fff}
.stepper li.current{color:var(--ink);font-weight:700}

/* transcript */
.transcript{display:flex;flex-direction:column;gap:14px;padding:20px}
.msg{max-width:78%;display:flex;flex-direction:column;gap:4px}
.msg .bubble{padding:10px 14px;border-radius:14px 14px 14px 4px;line-height:1.5}
.msg.visitor{align-self:flex-end;align-items:flex-end}
.msg.visitor .bubble{background:var(--brand);color:#fff;border-radius:14px 14px 4px 14px}
.msg.bot .bubble{background:var(--surface-3);color:var(--ink)}
.msg .who{font-size:var(--t-xs);color:var(--ink-3)}
.msg .src{font-size:var(--t-xs);color:var(--ink-3);display:flex;gap:6px;flex-wrap:wrap}

/* code */
.codeblock{position:relative;background:var(--brand);color:#E3F0ED;border-radius:var(--rb);padding:16px 18px;font-family:ui-monospace,Menlo,monospace;font-size:.85rem;line-height:1.7;overflow-x:auto}
.codeblock .tk-tag{color:#9FD8FF}.codeblock .tk-attr{color:#FFD28A}.codeblock .tk-str{color:#9BE7C4}
.codeblock .copy{position:absolute;top:10px;right:10px;height:30px;background:var(--brand-3);border-color:rgba(255,255,255,.2);color:#fff}

/* empty + skeleton */
.empty{padding:40px 24px;text-align:center;color:var(--ink-3)}
.empty .glyph{width:64px;height:64px;margin:0 auto 14px}
.empty h2,.empty h3{color:var(--ink);font-size:var(--t-lg);margin-bottom:6px;font-family:var(--f-ui)}
.empty p{max-width:52ch;margin:0 auto 16px}
.skel{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,#EAF0EE 0%,#F5F8F7 50%,#EAF0EE 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}

/* drawer, confirm, palette */
dialog.drawer{margin:0 0 0 auto;height:100vh;max-height:100vh;width:min(520px,100vw);border:0;padding:0;background:var(--surface);box-shadow:var(--shadow-2)}
dialog.drawer::backdrop,dialog.confirm::backdrop,dialog.palette::backdrop{background:rgba(15,61,58,.35)}
dialog.drawer[open]{animation:slidein .25s var(--ease)}
@keyframes slidein{from{transform:translateX(24px);opacity:.4}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--rule)}
.drawer-head h2{font-family:var(--f-display);font-weight:700;font-size:1.35rem}
.drawer-body{padding:22px;overflow-y:auto;height:calc(100vh - 134px)}
.drawer-foot{position:absolute;bottom:0;left:0;right:0;display:flex;gap:10px;justify-content:flex-end;padding:12px 22px;border-top:1px solid var(--rule);background:var(--surface-2)}
dialog.confirm{border:0;padding:0;border-radius:var(--rb);width:min(460px,calc(100vw - 32px));box-shadow:var(--shadow-2);color:var(--ink)}
dialog.confirm[open]{animation:pop .2s var(--ease)}
@keyframes pop{from{transform:translateY(6px) scale(.98);opacity:.4}}
.confirm-body{padding:22px 22px 8px}
.confirm-body h2{font-family:var(--f-display);font-weight:700;font-size:1.35rem;display:flex;align-items:center;gap:10px}
.confirm-body h2 .icon{color:var(--crit)}
.confirm-body p{color:var(--ink-2);margin-top:10px}
.confirm-body ul{margin:10px 0 0;padding-left:20px;color:var(--ink-2)}
.confirm-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px 20px}
.btn.danger-solid[disabled]{opacity:.45}
dialog.palette{border:0;padding:0;margin:12vh auto 0;width:min(620px,calc(100vw - 32px));border-radius:var(--rb);box-shadow:var(--shadow-2)}
dialog.palette[open]{animation:pop .18s var(--ease)}
.palette-in{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--rule)}
.palette-in input{flex:1;border:0;font:inherit;font-size:var(--t-lg);outline:none;background:transparent;color:var(--ink)}
.palette-list{list-style:none;margin:0;padding:8px;max-height:52vh;overflow-y:auto}
.palette-list a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--rb-sm);color:var(--ink);text-decoration:none}
.palette-list a .icon{color:var(--ink-3)}
.palette-list a span{color:var(--ink-3);font-size:var(--t-sm);margin-left:auto}
.palette-list a:hover,.palette-list a.active{background:var(--primary-tint)}
.palette-list .sec{padding:8px 12px 4px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-4)}
.palette-foot{display:flex;gap:16px;padding:10px 18px;border-top:1px solid var(--rule);font-size:var(--t-xs);color:var(--ink-3)}

/* toasts, menus */
.toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;z-index:60}
.toast{display:flex;align-items:center;gap:10px;background:var(--brand);color:#fff;padding:12px 16px;border-radius:var(--rb-sm);box-shadow:var(--shadow-2);animation:toast .25s var(--ease)}
.toast .icon{color:#9BE7C4}
.toast .btn{height:28px;background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.toast a{color:#9BE7C4;font-weight:700;margin-left:6px;white-space:nowrap}
.toast a:hover{color:#fff}
@keyframes toast{from{transform:translateY(8px);opacity:0}}
.menu{position:fixed;z-index:50;min-width:220px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--rb-sm);box-shadow:var(--shadow-2);padding:6px;display:none}
.menu.show{display:block}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:none;font:inherit;color:var(--ink);text-decoration:none;border-radius:8px;cursor:pointer;text-align:left}
.menu a:hover,.menu button:hover{background:var(--surface-3)}
.menu .danger{color:var(--crit-ink)}
.menu hr{border:0;border-top:1px solid var(--rule);margin:4px 0}

/* email templates */
.tpl-list .tpl{display:flex;gap:12px;align-items:center;padding:13px 20px;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.tpl-list .tpl:hover{background:var(--surface-2)}
.tpl-list .tpl[aria-current="true"]{background:var(--primary-tint)}
.email-preview{border:1px solid var(--rule);border-radius:var(--rb);overflow:hidden;background:#fff}
.email-preview .hdr{background:var(--brand);color:#fff;padding:18px 22px;font-family:var(--f-display);font-weight:700;font-size:1.15rem;display:flex;align-items:center;gap:10px}
.email-preview .bd{padding:22px;line-height:1.6}
.email-preview .ft{padding:14px 22px;background:var(--surface-2);font-size:var(--t-sm);color:var(--ink-3);border-top:1px solid var(--rule)}

/* auth */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(380px,520px);background:var(--surface)}
.auth-art{background:var(--brand);color:#fff;padding:40px 52px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-art h2{font-family:var(--f-display);font-weight:700;font-size:3rem;line-height:1.05;letter-spacing:-.025em;max-width:15ch}
.auth-art p{color:var(--brand-muted);max-width:46ch;margin-top:16px;font-size:var(--t-lg)}
.auth-form{display:flex;flex-direction:column;justify-content:center;padding:48px}
.auth-form h1{font-family:var(--f-display);font-weight:700;font-size:2rem;letter-spacing:-.02em}
.otp-boxes{display:flex;gap:8px}
.otp-boxes input{width:48px;height:56px;text-align:center;font-size:1.5rem;font-weight:700;border:1px solid var(--rule-2);border-radius:12px 12px 12px 4px;font-family:var(--f-ui)}
.otp-boxes input:focus{outline:2px solid var(--focus);outline-offset:1px}

/* hub */
.hub-portal{font-family:var(--f-display);font-weight:700;font-size:1.75rem;letter-spacing:-.02em;margin:40px 0 16px}
.hub-portal small{font-family:var(--f-ui);font-size:var(--t-md);font-weight:500;color:var(--ink-3);margin-left:10px}
.hub-line{margin-bottom:24px}
.hub-line h3{display:flex;align-items:center;gap:10px;font-size:var(--t-base);font-weight:700;margin-bottom:10px}
.hub-line h3 .badge-line{display:none}
.hub-stations{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.hub-stations a{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:var(--rb);box-shadow:var(--shadow-1);transition:border-color .15s,transform .15s}
.hub-stations a:hover{border-color:var(--primary);transform:translateY(-1px)}
.hub-stations a i{display:none}
.hub-stations a b{font-weight:700}
.hub-stations a span{display:block;font-size:var(--t-sm);color:var(--ink-3)}
.hub-stations a .new{display:inline-block;margin-left:6px;font-size:.7rem;font-weight:700;color:var(--brand);background:var(--attn);border-radius:8px;padding:0 6px}

/* stub */
.stub{max-width:640px;margin:40px auto;text-align:center}
.stub .icon{width:40px;height:40px;margin:0 auto 14px;color:var(--ink-3)}

/* selectable conversations */
.pick{display:grid;place-items:center;width:28px;height:28px;margin:-4px 0 0 -6px;flex:none;cursor:pointer}
.pick input{width:17px;height:17px;accent-color:var(--primary);cursor:pointer}
.list li.is-selected{background:var(--primary-tint)}
.selbar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--rule);background:var(--surface-2);min-height:54px}
.selbar .grow{flex:1}
.selbar[hidden],.list-empty[hidden]{display:none}

/* colour swatches */
.swatches{display:flex;gap:6px}
.swatches button{width:28px;height:28px;border-radius:50%;border:2px solid #fff;outline:1px solid var(--rule-2);cursor:pointer;padding:0}
.swatches button[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:1px}

/* ───────── Option 2 signatures ───────── */
.brief{background:var(--surface);border:1px solid var(--rule);border-radius:var(--rb);box-shadow:var(--shadow-1);padding:24px 26px}
.brief p{font-family:var(--f-display);font-weight:600;font-size:1.65rem;line-height:1.35;letter-spacing:-.015em;color:var(--ink);max-width:62ch}
.brief p a{color:var(--brand);text-decoration:none;background:linear-gradient(var(--primary-tint-2),var(--primary-tint-2)) 0 88%/100% 38% no-repeat;padding:0 2px;border-radius:3px}
.brief p a:hover{background-size:100% 100%}
.brief p a.attn{background-image:linear-gradient(#FFE2AE,#FFE2AE)}
.brief .needs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.brief .needs a{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:var(--rb-sm);background:var(--attn-bg);color:var(--attn-ink);font-weight:600;font-size:var(--t-sm);text-decoration:none}
.brief .needs a.crit{background:var(--crit-bg);color:var(--crit-ink)}
.brief .needs a:hover{filter:brightness(.97)}
.brief .meta{margin-top:12px;font-size:var(--t-sm);color:var(--ink-3)}
.svc{list-style:none;margin:0;padding:0}
.svc li{display:flex;align-items:center;gap:12px;padding:7px 20px;border-top:1px solid var(--rule)}
.svc li:first-child{border-top:0}
.svc .name{flex:1;min-width:0}
.svc .name b{display:block;font-weight:600}
.svc .name span{font-size:var(--t-sm);color:var(--ink-3);line-height:1.3}
.svc .val{font-size:var(--t-sm);color:var(--ink-3);white-space:nowrap}
.svc li.warn .val{color:var(--attn-ink);font-weight:700}
.svc a{color:inherit;text-decoration:none}
.svc li:hover{background:var(--surface-2)}
.statusline{display:flex;align-items:center;gap:14px;padding:18px 22px;border-radius:var(--rb);border:1px solid #F6DDB0;background:var(--attn-bg);color:#5E3A00}
.statusline.ok{border-color:#BFE6D1;background:var(--ok-bg);color:#0D4F2F}
.statusline .big{font-family:var(--f-display);font-weight:700;font-size:1.3rem}

/* ───────── Responsive ───────── */
@media (max-width:1200px){
  .g-main{grid-template-columns:minmax(0,1fr)}
  .g-row2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-row2>:first-child{grid-column:1/-1}
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .app{grid-template-columns:minmax(0,1fr)}
  .sidenav{position:fixed;left:0;top:var(--bar-h);bottom:0;height:auto;width:min(300px,86vw);transform:translateX(-102%);transition:transform .25s var(--ease)}
  .sidenav.open{transform:none;box-shadow:var(--shadow-2)}
  .scrim{position:fixed;inset:var(--bar-h) 0 0 0;background:rgba(15,61,58,.35);z-index:25}
  .scrim.show{display:block}
  .menu-btn{display:grid}
  .brand{min-width:0}
  .brand-name small,.demo-flag,.bar-user b{display:none}
  .cmd{width:auto;flex:1}
  .cmd kbd{display:none}
  .g-2,.g-3,.g-side,.g-row2{grid-template-columns:minmax(0,1fr)}
  .g-row2>:first-child{grid-column:auto}
  .auth{grid-template-columns:1fr;min-height:auto}
  .auth-art{padding:26px 22px}
  .auth-art h2{font-size:1.8rem}
  .auth-art p,.auth-art .art-extra{display:none}
}
@media (max-width:640px){
  .appbar{padding:0 10px;gap:6px}
  .brand{min-width:0;flex:none}
  .brand-name{font-size:1.05rem;white-space:nowrap}
  .cmd{flex:none;width:38px;padding:0;justify-content:center}
  .cmd span{display:none}
  .bar-btn,.menu-btn,.bar-user{flex:none}
  .bar-user .icon{display:none}
  .appbar .spacer{flex:1}
  .crumbs-bar{display:none}
  .content{padding:18px 14px 48px}
  .page-head h1{font-size:var(--t-2xl)}
  .form-grid,.g-4{grid-template-columns:minmax(0,1fr)}
  .panel-head,.panel-body,.toolbar,.list li,.svc li{padding-left:14px;padding-right:14px}
  .panel-head{flex-wrap:wrap;row-gap:8px}
  .list.lined li{padding-left:40px}.list.lined li::before{left:16px}
  .toolbar .search,.search{width:100%}
  .hide-sm{display:none}
  .brief{padding:18px}
  .brief p{font-size:1.25rem}
  .msg{max-width:92%}
  .auth-form{padding:28px 20px}
  .setting{flex-direction:column;gap:10px}
  table.stack-sm thead{display:none}
  table.stack-sm,table.stack-sm tbody{display:block}
  table.stack-sm tr{display:grid;grid-template-columns:auto 1fr auto;gap:6px 10px;padding:12px 14px;border-bottom:1px solid var(--rule)}
  table.stack-sm tr:last-child{border-bottom:0}
  table.stack-sm td{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0;border:0;grid-column:1/-1;text-align:left;min-width:0!important;max-width:none!important}
  table.stack-sm td.hide-sm{display:none}
  table.stack-sm td[data-label]::before{content:attr(data-label);font-size:var(--t-sm);font-weight:600;color:var(--ink-3);flex:none}
  table.stack-sm td.sel{grid-column:1;grid-row:1}
  table.stack-sm td.head-cell{grid-column:2;grid-row:1;padding-bottom:4px}
  table.stack-sm td.act{grid-column:3;grid-row:1}
  table.stack-sm .quota{min-width:0;flex:1;max-width:220px}
  table.stack-sm.clients td[data-label="Plan"],table.stack-sm.clients td[data-label="Chunks"],table.stack-sm.clients td[data-label="Last chat"],table.stack-sm.clients td[data-label="Chats"],table.stack-sm.clients td[data-label="Leads"],table.stack-sm.clients td.act{display:none}
  table.stack-sm.clients td[data-label="Status"]{grid-column:3;grid-row:1}
  table.stack-sm td.head-cell,table.stack-sm td.head-cell .cell-main,table.stack-sm td.head-cell .cell-main>span{min-width:0;overflow:hidden}
  table.stack-sm td.head-cell .cell-main span span{display:block;overflow:hidden;text-overflow:ellipsis}
  table.stack-sm.clients td[data-label="Status"]::before{display:none}
  table.stack-sm.clients td[data-label="Tokens"]::before{display:none}
  table.stack-sm.clients td[data-label="Tokens"] .quota{max-width:none}
  table.stack-sm td[data-label="Message"]{display:block}
  table.stack-sm td[data-label="Message"]::before{display:block;margin-bottom:2px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* provider breakdown under the token chart */
.split{list-style:none;margin:0;padding:4px 20px 14px;display:grid;gap:8px}
.split li{display:grid;grid-template-columns:96px minmax(0,1fr) 52px;align-items:center;gap:10px;font-size:var(--t-sm)}
.split li b{font-weight:600;color:var(--ink)}
.split li span:last-child{text-align:right;font-weight:700;color:var(--ink)}
.split .bar{height:8px;border-radius:4px 4px 4px 1px;background:var(--surface-3);overflow:hidden}
.split .bar i{display:block;height:100%;background:var(--primary)}
.trunc{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.styles{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent);padding-bottom:24px}
.top-users{padding:4px 20px 16px;border-top:1px solid var(--rule);margin:0 0 0}
.top-users .label{display:block;color:var(--ink-3);font-weight:600;padding:12px 0 6px}
.top-users ol{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:t}
.top-users li{display:flex;align-items:center;gap:10px;font-size:var(--t-sm);counter-increment:t}
.top-users li::before{content:counter(t);width:20px;height:20px;border-radius:7px 7px 7px 2px;background:var(--primary-tint);color:var(--brand);font-weight:700;font-size:.72rem;display:grid;place-items:center;flex:none}
.top-users li a{flex:1;color:var(--ink);text-decoration:none;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-users li a:hover{color:var(--primary)}
.top-users li span{font-weight:700}

/* ── v2 fixes on top of the Option 2 demo styles ── */
[hidden]{display:none!important}
.stepper li::after{z-index:1}
details.edit{border-top:1px solid var(--rule)}
details.edit>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:10px 20px;font-weight:600;color:var(--primary);font-size:var(--t-sm)}
details.edit>summary::-webkit-details-marker{display:none}
details.edit[open]>summary{color:var(--ink-3)}
details.edit .edit-body{padding:4px 20px 20px}
.inline-form{display:inline}
.tagset{display:flex;flex-wrap:wrap;gap:6px}
.tagset label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule-2);border-radius:15px;padding:4px 10px;font-size:var(--t-sm);cursor:pointer}
.tagset input{accent-color:var(--primary)}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:.85rem}
.pill{display:inline-block;padding:1px 8px;border-radius:10px;background:var(--surface-3);font-size:.75rem;color:var(--ink-2);margin:1px 2px 1px 0}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--rule);border-radius:var(--rb);padding:14px 16px}
.kpi b{display:block;font-size:1.35rem;font-family:var(--f-display)}
.kpi span{font-size:var(--t-sm);color:var(--ink-3)}
.preview-box{min-height:560px;position:relative;border:1px dashed var(--rule-2);border-radius:var(--rb);background:var(--surface-2);overflow:hidden}

/* top-bar bell (demo notifMenu) */
.bell-btn .bell-count{position:absolute;top:3px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--attn);color:var(--attn-ink);font-size:.68rem;font-weight:800;display:grid;place-items:center;border:2px solid var(--brand);line-height:1}
.notif-menu{width:min(380px,calc(100vw - 16px));padding:6px;max-height:70vh;overflow-y:auto;color:var(--ink)}
.notif-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 8px;border-bottom:1px solid var(--rule);margin-bottom:4px}
.notif-head form{margin:0}
.notif-head .btn{width:auto;height:28px}
.menu a.notif{align-items:flex-start}
.menu a.notif .icon{margin-top:2px;color:var(--ink-3);flex:none}
.notif-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.notif-t b{font-weight:600;line-height:1.35}
.notif-t .small{line-height:1.4;white-space:normal}
.menu a.notif.unread{background:var(--primary-tint)}
.menu a.notif.unread .icon{color:var(--primary)}
.menu a.notif.unread:hover{background:var(--primary-tint-2)}
.notif-empty{padding:12px 10px;max-width:34ch}
/* hosting checks — setup.php step 1 + Platform → System check (views/setup/_checks.php) */
.syscheck li{padding:12px 4px}
.syscheck .meta{overflow-wrap:anywhere}
.syscheck-fix{display:flex;gap:8px;align-items:flex-start;margin-top:6px;padding:8px 10px;border-radius:var(--rb-sm);background:var(--surface-2);color:var(--ink-2);line-height:1.45}
.syscheck-fix .icon{flex:none;margin-top:2px;color:var(--ink-3)}
.syscheck-sum{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.db-update{margin-bottom:20px;flex-wrap:wrap}
.db-update .grow{flex:1 1 260px}
.db-update form{margin:0 0 0 auto}