/* Layout: fixed ink sidebar + scrolling workspace. FYNXT Brand Kit v2.0 palette only; teal is a highlight, never a flood.
   Tokens are scoped by ground: [data-ground] on any element (the portal root, the admin's portal preview) sets its colours. */
:root,[data-ground="light"]{
  --font:'Poppins',Arial,sans-serif;
  --ink:#0B0D10;--teal:#10C8C2;--teal-mid:#1A979E;--white:#F7F8FA;--paper:#F5F6F6;--wash:#E5F4F5;--grey:#8C99A3;--grey-dark:#45535D;
  --bg:var(--paper);--panel:var(--white);--solid:var(--white);--fg:var(--ink);--muted:var(--grey-dark);
  --line:rgba(69,83,93,.16);--line-strong:rgba(69,83,93,.34);
  --hl:var(--teal-mid);--hl-soft:var(--wash);--btn-bg:var(--ink);--btn-fg:var(--white);
  --c-hi:var(--teal-mid);--c-base:var(--grey-dark);--c-2:var(--grey);--c-band:rgba(26,151,158,.18);--grid:rgba(69,83,93,.12);
  --shadow:0 1px 2px rgba(11,13,16,.05),0 6px 20px rgba(11,13,16,.05);
  --side-bg:var(--ink);--side-fg:var(--white);--side-muted:var(--grey);
  --glow:radial-gradient(ellipse at 100% 100%,#196562 0%,transparent 45%),radial-gradient(ellipse at 0% 0%,#196562 0%,transparent 35%),var(--ink);
  --r-card:14px;--r:8px;--gap:16px;--pad:18px;--mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* Flow UI Kit tokens a broker may set for the portal. Type scale, spacing scale, shapes and motion stay locked. */
[data-corners="soft"]{--r-card:14px;--r:8px}
[data-corners="crisp"]{--r-card:8px;--r:6px}
[data-density="compact"]{--gap:12px;--pad:14px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:var(--ink);--panel:rgba(247,248,250,.035);--solid:#0B0D10;--fg:var(--white);--muted:var(--grey);
  --line:rgba(140,153,163,.18);--line-strong:rgba(140,153,163,.36);
  --hl:var(--teal);--hl-soft:rgba(16,200,194,.12);--btn-bg:var(--teal);--btn-fg:var(--ink);
  --c-hi:var(--teal);--c-base:var(--grey);--c-2:var(--grey-dark);--c-band:rgba(16,200,194,.16);--grid:rgba(140,153,163,.14);
  --shadow:none;color-scheme:dark}}
:root[data-theme="dark"],[data-ground="dark"]{
  --bg:var(--ink);--panel:rgba(247,248,250,.035);--solid:#0B0D10;--fg:var(--white);--muted:var(--grey);
  --line:rgba(140,153,163,.18);--line-strong:rgba(140,153,163,.36);
  --hl:var(--teal);--hl-soft:rgba(16,200,194,.12);--btn-bg:var(--teal);--btn-fg:var(--ink);
  --c-hi:var(--teal);--c-base:var(--grey);--c-2:var(--grey-dark);--c-band:rgba(16,200,194,.16);--grid:rgba(140,153,163,.14);
  --shadow:none;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--fg);font-size:14px;line-height:1.5}
button{font-family:inherit}
/* v3 shell: a 64px ink rail of eight sections; a section opens a flyout with its modules. The full FYNXT wordmark
   sits in the sticky brand bar at the top of the workspace, never in the rail. Under 820px the rail becomes a bottom tab bar. */
.app{display:grid;grid-template-columns:64px minmax(0,1fr);min-height:100%}
.rail{background:var(--side-bg);position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 0 max(14px,env(safe-area-inset-bottom,0px));z-index:30}
.rail-nav{display:grid;gap:6px;justify-items:center}
.rail-btn{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;border:0;background:none;color:var(--side-muted);cursor:pointer;position:relative;font:600 12px var(--font)}
.rail-btn:hover{color:var(--side-fg);background:rgba(247,248,250,.06)}
.rail-btn[aria-current="true"]{color:var(--teal);background:rgba(247,248,250,.08)}
.rail-btn[aria-current="true"]::before{content:"";position:absolute;inset-inline-start:-12px;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--teal)}
.rail-btn[aria-expanded="true"]{background:rgba(247,248,250,.12);color:var(--side-fg)}
.rail-sep{width:24px;height:1px;background:rgba(140,153,163,.2);margin:4px 0}
.rail .me{margin-top:auto;border-radius:50%;background:rgba(247,248,250,.1);color:var(--side-fg)}
.flyout{position:fixed;top:0;bottom:0;inset-inline-start:64px;width:272px;background:var(--side-bg);color:var(--side-muted);border-inline-start:1px solid rgba(140,153,163,.14);padding:18px 14px;display:flex;flex-direction:column;gap:14px;overflow:auto;z-index:29;box-shadow:12px 0 32px rgba(11,13,16,.2)}
@media (prefers-reduced-motion: no-preference){.flyout{animation:flyin .18s cubic-bezier(.16,1,.3,1)}}
@keyframes flyin{from{transform:translateX(-10px);opacity:.4}to{transform:none;opacity:1}}
.fly-t{color:var(--side-fg);font-size:15px;font-weight:600;margin:2px 10px 0;display:flex;align-items:center;gap:8px}
.fly-t svg{color:var(--teal)}
.nav-h{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--side-muted);margin:12px 10px 4px}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:22px;width:auto;display:block}
.logo .rev{display:none}
:root[data-theme="dark"] .logo .pri{display:none}:root[data-theme="dark"] .logo .rev{display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo .pri{display:none}:root:not([data-theme="light"]) .logo .rev{display:block}}
.tenant{padding:12px;border:1px solid rgba(140,153,163,.22);border-radius:12px;color:var(--side-fg);font-weight:500;font-size:13.5px;line-height:1.35}
.tenant small{display:block;color:var(--side-muted);font-weight:400;font-size:12px;margin-top:2px}
.nav{display:grid;gap:2px}
.nav a{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:8px;color:var(--side-muted);text-decoration:none;font-weight:500;font-size:13.5px}
.nav a:hover{color:var(--side-fg);background:rgba(247,248,250,.05)}
.nav a{position:relative}
.nav a[aria-current="page"]{color:var(--side-fg);background:rgba(247,248,250,.06)}
.nav a[aria-current="page"]::before{content:"";position:absolute;inset-inline-start:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--teal)}
.nav a[aria-current="page"] svg{color:var(--teal)}
.side-foot{margin-top:auto;font-size:12px;line-height:1.5;padding:0 10px}
svg.lucide{width:18px;height:18px;stroke-width:1.75;flex:none}
main{min-width:0;padding:0 max(32px,env(safe-area-inset-right,0px)) 56px 32px}
.top{display:flex;gap:12px;align-items:center;flex-wrap:wrap;min-height:64px;padding:10px 0;position:sticky;top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:5;border-bottom:1px solid var(--line)}
.top .logo{margin-inline-end:8px}
.seg{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--panel);flex-wrap:wrap}
.seg button{border:0;background:none;color:var(--muted);font-weight:500;font-size:13px;padding:7px 12px;border-radius:7px;cursor:pointer}
.seg button[aria-selected="true"]{background:var(--btn-bg);color:var(--btn-fg)}
.ent-pick{display:inline-flex;align-items:center;gap:8px}
.ent-pick:empty{display:none}
.ent-pick select{width:auto;min-width:150px}
.ent-l{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.ent-l svg{width:15px;height:15px}
.cmd{flex:1;min-width:240px;max-width:560px;margin-inline:auto;display:flex;align-items:center;gap:10px;border:1px solid var(--line-strong);background:var(--panel);border-radius:10px;padding:0 12px;height:40px;position:relative}
.cmd:focus-within{border-color:var(--hl);box-shadow:0 0 0 3px var(--hl-soft)}
.cmd svg{color:var(--hl)}
.cmd input{flex:1;min-width:0;border:0;background:none;font:400 14px var(--font);color:var(--fg);outline:none}
.cmd input::placeholder{color:var(--muted)}
kbd{font:500 11px var(--font);color:var(--muted);border:1px solid var(--line-strong);border-radius:5px;padding:1px 6px}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:26px 0 18px}
h1{font-size:24px;font-weight:500;margin:0;line-height:1.3;text-wrap:balance}
.ph p{margin:4px 0 0;color:var(--muted);max-width:68ch}
h2{font-size:15px;font-weight:600;margin:0 0 12px;display:flex;align-items:center;gap:8px;text-wrap:balance}
h2 svg{color:var(--hl)}
h3{font-size:13.5px;font-weight:600;margin:0 0 6px}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--pad);box-shadow:var(--shadow);min-width:0}
.grid{display:grid;gap:var(--gap)}
.g-2{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.g-2e{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.g-side{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.kpi{display:grid;gap:6px;align-content:start}
.kpi .kh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kpi .l{color:var(--muted);font-size:12.5px;font-weight:500}
.kpi .v{font-size:30px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .d{font-size:12px;color:var(--muted)}
.kpi svg.spark{width:100%;height:28px;margin-top:4px;display:block}
.delta{display:inline-flex;align-items:center;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;background:var(--bg);color:var(--fg);border:1px solid var(--line)}
.delta.up{background:var(--hl-soft);color:var(--hl);border-color:transparent}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;border:1px solid var(--line-strong);color:var(--fg);white-space:nowrap;line-height:1.6}
.pill svg{width:13px;height:13px}
.pill.ok{background:var(--hl-soft);border-color:transparent}
.pill.ok svg{color:var(--hl)}
.pill.attn{background:var(--btn-bg);color:var(--btn-fg);border-color:transparent}
.pill.ai svg{color:var(--hl)}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
/* Quiet tables: hairline rules, caps header, no zebra, actions appear on row hover, status as dot and label. */
th{text-align:start;font-weight:600;color:var(--muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px;height:48px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background-color .15s ease-out}
tbody tr:hover{background:color-mix(in srgb,var(--hl-soft) 55%,transparent)}
tr.click{cursor:pointer}
td.acts{text-align:end;white-space:nowrap;width:1%}
.acts .row{flex-wrap:nowrap;justify-content:flex-end;gap:6px}
@media (hover:hover){td.acts>*{opacity:0;transition:opacity .15s ease-out}tr:hover td.acts>*,tr:focus-within td.acts>*{opacity:1}}
.status{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:var(--fg)}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--grey);flex:none}
.status.ok::before{background:var(--hl)}
.status.attn::before{background:var(--fg)}
.status.off{color:var(--muted)}
.status.off::before{background:none;box-shadow:inset 0 0 0 1.5px var(--grey)}
.mono{font-family:var(--mono);font-size:12px}
/* AI insight strip: one line of what matters, on the Teal Wash ground, with its actions. */
.insight{display:flex;align-items:center;gap:14px;padding:12px 18px;margin:0 0 18px;border-radius:var(--r-card);background:var(--hl-soft);color:var(--muted);flex-wrap:wrap}
.insight>svg{color:var(--hl)}
.insight p{flex:1;margin:0;min-width:200px}
.insight b{font-weight:500;color:var(--fg)}
td.num,th.num{text-align:end;font-variant-numeric:tabular-nums}
td.new,th.new{background:var(--hl-soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 14px;border-radius:var(--r);font-weight:500;font-size:13px;border:1px solid var(--line-strong);background:var(--panel);color:var(--fg);cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--hl)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--btn-bg);color:var(--btn-fg);border-color:transparent}
.btn.primary:hover{opacity:.9}
.btn.ghost{background:none;border-color:transparent}
.btn.ghost:hover{background:var(--hl-soft)}
.btn.sm{height:30px;padding:0 10px;font-size:12.5px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn svg{width:16px;height:16px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
:focus-visible{outline:2px solid var(--hl);outline-offset:2px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px dashed var(--line-strong);background:none;border-radius:999px;padding:6px 12px;font-size:12.5px;color:var(--fg);cursor:pointer;text-align:start;line-height:1.4}
.chip:hover{border-style:solid;border-color:var(--hl)}
.chip[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);border:1px solid transparent}
textarea{width:100%;min-height:88px;resize:vertical;border:1px solid var(--line-strong);border-radius:10px;background:var(--panel);color:var(--fg);font:400 14px/1.5 var(--font);padding:10px 12px}
textarea:focus,select:focus,input:focus{outline:none;border-color:var(--hl);box-shadow:0 0 0 3px var(--hl-soft)}
.f{display:grid;gap:6px;font-size:12.5px;color:var(--muted);min-width:0}
.f b{color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums}
select,input.in{height:36px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--panel);color:var(--fg);font:400 13.5px var(--font);padding:0 10px;width:100%;min-width:0}
input[type=range]{width:100%;accent-color:var(--hl)}
.ai-box{border:1px solid var(--line);border-radius:var(--r-card);padding:14px;background:var(--hl-soft)}
.ai-box .head{display:flex;gap:8px;align-items:center;font-weight:600;font-size:13px;margin-bottom:6px}
.ai-box .head svg{color:var(--hl)}
.trace{font-size:12px;color:var(--muted);margin-top:8px}
.list{display:grid;gap:0}
.li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:start;padding:11px 0;border-top:1px solid var(--line)}
.li:first-child{border-top:0;padding-top:2px}
.li .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--hl-soft);color:var(--hl)}
.li .ic svg{width:15px;height:15px}
.li p{margin:0}
.li .t{font-size:12px;color:var(--muted);white-space:nowrap}
.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 22px}
.fld .k{font-size:12px;color:var(--muted)}
.fld .val{font-weight:500}
.fld.new{background:var(--hl-soft);border-radius:8px;padding:6px 8px;margin:-6px -8px}
.sec-t{font-size:12.5px;font-weight:600;color:var(--muted);margin:18px 0 10px;display:flex;gap:8px;align-items:center}
.sec-t:first-child{margin-top:0}
.avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--btn-bg);color:var(--btn-fg);font-weight:600;font-size:16px;flex:none}
.flow{display:grid;max-width:620px}
.node{border:1px solid var(--line-strong);border-radius:12px;padding:12px 14px;background:var(--panel);display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center}
.node .ic{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:var(--hl-soft);color:var(--hl)}
.node .ttl{font-weight:500}
.node .sub{font-size:12.5px;color:var(--muted)}
.node.decision{border-style:dashed}
.node.new{border:2px solid var(--hl)}
.conn{width:2px;height:22px;background:var(--line-strong);margin-left:31px}
.conn-lbl{display:flex;align-items:center;gap:10px}
.conn-lbl span{font-size:12px;color:var(--muted)}
.count{font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--muted);text-align:end;white-space:nowrap}
.count b{display:block;color:var(--fg);font-size:14px;font-weight:600}
.cs{display:grid}
.cs-item{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.cs-item:first-child{border-top:0}
.cs-item .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;border:1px solid var(--line-strong);color:var(--hl)}
.cs-item p{margin:2px 0 0;color:var(--muted);font-size:13px}
.sk{height:12px;border-radius:6px;background:var(--line);margin:10px 0}
.sk.w60{width:60%}.sk.w80{width:80%}.sk.w40{width:40%}
@media (prefers-reduced-motion: no-preference){
  .sk{background:linear-gradient(90deg,var(--line) 0%,var(--hl-soft) 50%,var(--line) 100%);background-size:200% 100%;animation:sh 1.1s linear infinite}
  .node.new,.fade-in{animation:rise .45s cubic-bezier(.16,1,.3,1)}
  .li.fresh{animation:rise .45s cubic-bezier(.16,1,.3,1)}
  .bar{transition:width .5s cubic-bezier(.16,1,.3,1)}
}
@keyframes sh{to{background-position:-200% 0}}
@keyframes rise{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
.chart{position:relative}
.chart svg{width:100%;height:auto;display:block}
.chart text{font-family:var(--font);font-size:11px;fill:var(--muted)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-bottom:8px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:16px;height:3px;border-radius:2px;display:inline-block}
.tip{position:fixed;pointer-events:none;z-index:30;background:var(--solid);color:var(--fg);border:1px solid var(--line-strong);border-radius:8px;padding:8px 10px;font-size:12.5px;box-shadow:0 8px 24px rgba(11,13,16,.16);min-width:150px}
.tip .r{display:flex;justify-content:space-between;gap:14px;font-variant-numeric:tabular-nums}
.tip .d{color:var(--muted);margin-bottom:3px}
.bars{display:grid;gap:12px}
.bar-row{display:grid;grid-template-columns:150px minmax(0,1fr) 92px;gap:12px;align-items:center;font-size:13px}
.bar{height:14px;border-radius:0 4px 4px 0;background:var(--c-2);min-width:2px}
.bar.hi{background:var(--c-hi)}
.bar-row .num{text-align:end;font-variant-numeric:tabular-nums;font-weight:500}
.metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.metric .l{font-size:12px;color:var(--muted)}
.metric .v{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.tabs button{border:0;background:none;padding:9px 12px;font-weight:500;font-size:13px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--hl)}
.block{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:13px}
.block:first-of-type{border-top:0}
.tree{display:grid;gap:2px}
.tree .tn{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:8px 10px;border-radius:8px;align-items:center}
.tree .tn:hover{background:var(--hl-soft)}
.tree .tn .nm{display:flex;align-items:center;gap:8px;min-width:0}
.tree .tn .nm svg{width:15px;height:15px;color:var(--hl)}
.disclaimer{font-size:12px;color:var(--muted);margin-top:12px}
.empty{padding:28px;text-align:center;color:var(--muted)}
#toast{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:50;background:var(--btn-bg);color:var(--btn-fg);padding:11px 16px;border-radius:10px;font-weight:500;font-size:13.5px;max-width:min(420px,calc(100vw - 40px));display:flex;gap:9px;align-items:center;box-shadow:0 10px 30px rgba(11,13,16,.25)}
.modal{position:fixed;inset:0;background:rgba(11,13,16,.5);display:grid;place-items:center;z-index:40;padding:16px}
.modal .box{background:var(--solid);color:var(--fg);border:1px solid var(--line-strong);border-radius:var(--r-card);max-width:580px;width:100%;padding:22px;max-height:88vh;overflow:auto}
.modal h2{font-size:17px}
/* Right-hand side panel for detail and edit views (openModal's default). */
.modal.drawer{place-items:stretch end;padding:0;background:rgba(11,13,16,.16)}
.modal.drawer .box{width:min(480px,100vw);max-width:none;height:100dvh;max-height:none;border-radius:0;border-width:0 0 0 1px;padding:24px;box-shadow:-8px 0 24px rgba(11,13,16,.08);position:relative}
.modal.drawer.wide .box{width:min(760px,100vw)}
.drawer-x{position:absolute;top:16px;inset-inline-end:16px}
.modal.drawer .box>h2:first-of-type,.modal.drawer .box>.dhead{padding-inline-end:40px}
@media (prefers-reduced-motion: no-preference){.modal.drawer .box{animation:slide .24s cubic-bezier(.16,1,.3,1)}}
@keyframes slide{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding:7px 0;font-size:13.5px}
.check svg{color:var(--hl);width:18px;height:18px}
.check.warn svg{color:var(--fg)}
/* Calls: client picker, number field, call rows and transcript. */
.avatar.sm{width:32px;height:32px;font-size:12px}
.cd-list{display:grid;gap:2px;margin-top:8px;max-height:340px;overflow:auto}
.cd-opt{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border:0;border-radius:var(--r);background:none;color:var(--fg);font:inherit;text-align:start;cursor:pointer}
.cd-opt>span:last-child{display:grid;gap:1px;min-width:0}
.cd-opt:hover,.cd-opt:focus-visible{background:var(--hl-soft)}
.cd-opt[disabled]{opacity:.5;cursor:not-allowed}
.cd-opt[disabled]:hover{background:none}
.cd-pick{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:var(--r-card)}
.cd-tel{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:8px}
.cd-tel input{font-size:15px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.call-who{display:flex;align-items:center;gap:12px}
.call-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--hl-soft);color:var(--hl)}
.call-ic svg{width:16px;height:16px}
.call-ic.attn{background:var(--btn-bg);color:var(--btn-fg)}
.call-ic.lg{width:44px;height:44px}
.call-ic.lg svg{width:20px;height:20px}
.empty>svg{width:22px;height:22px;color:var(--hl)}
.empty p{margin:8px 0 12px}
.tx-wrap{display:grid;gap:8px;margin-top:10px}
.tx{margin:0;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);max-width:85%;font-size:13px}
.tx b{display:block;font-size:11px;color:var(--muted);font-weight:600}
.tx.staff{justify-self:end;background:var(--hl-soft);border-color:transparent}
@media (max-width:560px){.cd-tel{grid-template-columns:1fr}}
.draft{white-space:pre-wrap;border:1px solid var(--line);border-radius:10px;padding:14px;font-size:13.5px;background:var(--panel)}
@media (max-width:1180px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){.g-2,.g-2e,.g-side{grid-template-columns:minmax(0,1fr)}.fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tabbar{display:none}
@media (max-width:820px){
  .app{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .flyout{inset:auto 0 0 0;width:auto;max-height:82dvh;border-radius:18px 18px 0 0;border:0;padding-bottom:calc(84px + env(safe-area-inset-bottom,0px));box-shadow:0 -12px 32px rgba(11,13,16,.25)}
  main{padding:0 max(16px,env(safe-area-inset-right,0px)) calc(96px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .top{gap:8px}
  .top .cmd{order:10;flex-basis:100%;max-width:none;min-width:0}
  .top .seg{max-width:100%;overflow-x:auto;flex-wrap:nowrap}
  .top .logo{margin-inline-end:auto}
  .tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;inset-inline:0;bottom:0;z-index:35;background:var(--solid);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  .tabbar a,.tabbar button{display:grid;justify-items:center;gap:2px;padding:6px 2px;border:0;background:none;color:var(--muted);font:500 11px var(--font);text-decoration:none;cursor:pointer;min-height:44px}
  .tabbar [aria-current="page"]{color:var(--hl)}
  .tabbar .ask b{width:48px;height:48px;margin-top:-22px;border-radius:50%;display:grid;place-items:center;background:var(--btn-bg);color:var(--btn-fg);box-shadow:0 6px 18px rgba(11,13,16,.25)}
}
@media (max-width:520px){.fields{grid-template-columns:minmax(0,1fr)}.kpis{grid-template-columns:minmax(0,1fr)}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.bar-row{grid-template-columns:96px minmax(0,1fr) 76px}.block{grid-template-columns:minmax(0,1fr) 110px}}
.chat{display:grid;gap:8px;max-height:380px;overflow:auto;align-content:start}
.msg{max-width:85%;padding:10px 12px;border-radius:12px;background:var(--hl-soft);font-size:13.5px}
.msg.me{justify-self:end;background:var(--btn-bg);color:var(--btn-fg)}
.login{position:fixed;inset:0;display:grid;place-items:safe center;padding:16px;background:var(--bg);z-index:60;overflow-y:auto}
.login-card{width:min(420px,100%);display:grid;gap:12px}
.login-card .err{color:var(--fg);font-weight:500;margin:0;min-height:1.2em}
#toast.error{background:var(--fg);color:var(--bg)}
.chip-row{display:flex;gap:6px;flex-wrap:wrap}
.userbox{margin-top:auto;padding:10px;border-top:1px solid rgba(140,153,163,.2);color:var(--side-fg);font-size:13px;display:grid;gap:6px}
.userbox small{color:var(--side-muted);display:block}
.userbox button{background:none;border:1px solid rgba(140,153,163,.35);color:var(--side-fg);border-radius:8px;padding:6px 10px;font:500 12.5px var(--font);cursor:pointer}
.tseg{display:grid;gap:4px}
.tseg button{background:none;border:1px solid rgba(140,153,163,.22);color:var(--side-muted);text-align:start;border-radius:8px;padding:7px 10px;font:500 12.5px var(--font);cursor:pointer}
.tseg button[aria-current="true"]{color:var(--side-fg);border-color:var(--teal)}
.cmd-out{position:absolute;right:0;width:max(100%,480px);max-width:calc(100vw - 32px);top:calc(100% + 6px);background:var(--solid);color:var(--fg);border:1px solid var(--line-strong);border-radius:12px;padding:14px 16px;box-shadow:0 12px 32px rgba(11,13,16,.18);z-index:20;font-size:13.5px}
.cmd-out > .row:first-child{flex-wrap:nowrap}
.wf-grid{display:grid;grid-template-columns:220px minmax(0,1fr) 300px;gap:16px;align-items:start}
@media (max-width:1180px){.wf-grid{grid-template-columns:minmax(0,1fr)}}
.pal-item{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px dashed var(--line-strong);border-radius:8px;margin-bottom:6px;font-size:13px;cursor:grab;background:var(--panel)}
.pal-item:hover{border-color:var(--hl);border-style:solid}
.pal-item svg{color:var(--hl);width:16px;height:16px}
.dz{height:22px;position:relative;border-radius:8px;transition:height .12s}
.dz::before{content:"";position:absolute;left:31px;top:0;bottom:0;width:2px;background:var(--line-strong)}
.dragging .dz{height:30px}
.dz.over{height:46px;background:var(--hl-soft);outline:2px dashed var(--hl);outline-offset:-2px}
.dz.over::before{display:none}
.node[draggable="true"]{cursor:grab}
.node.sel{outline:2px solid var(--hl);outline-offset:1px}
.home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:22px}
.hb{min-width:0}.hb-full{grid-column:1 / -1}.hb-wide{grid-column:span 2}.hb-narrow{grid-column:span 1}
@media (max-width:980px){.home-grid{grid-template-columns:minmax(0,1fr)}.hb-wide,.hb-narrow{grid-column:1 / -1}}
.xp-tab{display:flex;gap:10px;align-items:center;padding:9px 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--panel);cursor:grab;font-size:13.5px}
.xp-tab.off span{color:var(--muted);text-decoration:line-through}
.xp-tab svg,.xp-block svg{width:16px;height:16px;color:var(--hl);flex:none}
.xp-tab.sel,.xp-block.sel{outline:2px solid var(--hl);outline-offset:1px}
.xp-block{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--panel);cursor:grab}
.xp-block.w-full{border-inline-start:4px solid var(--hl)}
.xdz{height:8px;border-radius:8px;transition:height .12s}
.dragging .xdz{height:22px}
.xdz.over{height:40px;background:var(--hl-soft);outline:2px dashed var(--hl);outline-offset:-2px}
input[type=color]{width:100%;height:36px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);padding:2px}
.userbox a{color:var(--side-fg);display:inline-flex;gap:6px;align-items:center;font-size:12.5px}

/* ---------- Client portal shell, themed by the Flow UI Kit ----------
   data-preset (Ink|Paper|Glow), data-ground, data-density, data-corners and data-nav sit on the portal root,
   or on .pv for the admin's live preview, so both render from these same rules. */
.ptop{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:5;color:var(--fg)}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.pbar{display:flex;align-items:center;gap:14px;padding-block:14px 8px;flex-wrap:wrap}
.brand{display:flex;gap:10px;align-items:center;font-weight:600;font-size:16px;color:var(--fg);text-decoration:none}
.brand svg{width:30px;height:30px}
.brand-logo{height:30px;width:auto;max-width:160px;object-fit:contain;display:block}
.powered{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);white-space:nowrap}
.powered img{height:13px;width:auto;display:block}
.powered .rev,[data-ground="dark"] .powered .pri,[data-preset="Ink"] .ptop .powered .pri{display:none}
[data-ground="dark"] .powered .rev,[data-preset="Ink"] .ptop .powered .rev{display:block}
.acct{margin-inline-start:auto;font-variant-numeric:tabular-nums}
.pnav{display:flex;gap:2px;overflow-x:auto}
.pnav a{display:flex;gap:7px;align-items:center;padding:10px 12px;border-bottom:2px solid transparent;color:var(--muted);text-decoration:none;font-weight:500;font-size:13.5px;white-space:nowrap}
.pnav a:hover{color:var(--fg)}
.pnav a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--hl)}
.pnav a[aria-current="page"] svg{color:var(--hl)}
main.wrap{padding-bottom:40px}
.pfoot{padding-block:20px 40px;color:var(--muted);font-size:12.5px;border-top:1px solid var(--line)}
.pfoot a{color:var(--fg)}
.signout{background:none;border:1px solid var(--line-strong);border-radius:var(--r);padding:6px 10px;font:500 12.5px var(--font);color:var(--fg);cursor:pointer}
.hero{padding:calc(var(--pad) + 8px);border-radius:var(--r-card);background:var(--panel);border:1px solid var(--line);color:var(--fg)}
.hero h1{font-size:26px;font-weight:600}
/* Ink: header and navigation on Ink. Ink and Glow: the welcome hero on Ink, Glow adds the brand glow. */
[data-preset="Ink"] .ptop,[data-preset="Ink"] .pnav,[data-preset="Ink"] .hero,[data-preset="Glow"] .hero{
  --fg:var(--white);--muted:var(--grey);--line:rgba(140,153,163,.18);--line-strong:rgba(140,153,163,.36);--hl:var(--teal);--hl-soft:rgba(247,248,250,.06);--panel:rgba(247,248,250,.06);
  background:var(--ink);color:var(--fg);border-color:var(--line)}
[data-preset="Ink"] .ptop{--btn-bg:var(--teal);--btn-fg:var(--ink)}
[data-preset="Ink"] .hero,[data-preset="Glow"] .hero{--btn-bg:var(--white);--btn-fg:var(--ink);border-color:transparent}
[data-preset="Glow"] .hero{background:var(--glow)}
[data-ground="dark"] .hero{border-color:var(--line)}
[data-nav="side"] .ptop .wrap{max-width:none}
[data-nav="side"] .pbody{display:grid;grid-template-columns:216px minmax(0,1fr)}
.pbody>.pnav{flex-direction:column;gap:2px;padding:16px 12px;border-inline-end:1px solid var(--line);overflow:visible}
.pbody>.pnav a{border-bottom:0;border-radius:var(--r);position:relative;padding:9px 12px}
.pbody>.pnav a[aria-current="page"]{background:var(--hl-soft)}
.pbody>.pnav a[aria-current="page"]::before{content:"";position:absolute;inset-inline-start:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--hl)}
[data-nav="side"] .pbody main.wrap{margin:0;max-width:1100px;width:100%}
@media (max-width:820px){
  [data-nav="side"] .pbody{display:block}
  .pbody>.pnav{flex-direction:row;overflow-x:auto;border-inline-end:0;border-bottom:1px solid var(--line);padding:4px 12px}
  .pbody>.pnav a[aria-current="page"]::before{display:none}
}
/* ---------- Flow UI Kit Studio (admin, Experience > Theme) ---------- */
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--hl);margin:0 0 10px}
.kit{display:grid;grid-template-columns:360px minmax(0,1fr);gap:var(--gap);align-items:start}
.kit-set{display:grid;gap:12px}
.kit-set .panel{padding:16px 18px}
.kit-pv{position:sticky;top:84px}
@media (max-width:1180px){.kit{grid-template-columns:minmax(0,1fr)}.kit-pv{position:static}}
.seg input,.presets input{position:absolute;opacity:0;pointer-events:none}
.seg label{flex:1;text-align:center;color:var(--muted);font-weight:500;font-size:13px;padding:7px 12px;border-radius:7px;cursor:pointer;white-space:nowrap}
.seg input:checked+label{background:var(--btn-bg);color:var(--btn-fg)}
.seg input:focus-visible+label,.presets input:focus-visible+label{outline:2px solid var(--hl);outline-offset:1px}
.seg.full{display:flex}
.presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.presets label{display:block;padding:8px;border:1px solid var(--line-strong);border-radius:var(--r);text-align:center;font-size:12.5px;font-weight:500;cursor:pointer}
.presets input:checked+label{border:2px solid var(--hl);background:var(--hl-soft);padding:7px}
.pswatch{display:block;height:52px;margin-bottom:8px;border-radius:4px;border:1px solid var(--line)}
.pswatch.ink{background:linear-gradient(90deg,var(--ink) 33%,var(--white) 33%)}
.pswatch.paper{background:linear-gradient(90deg,var(--paper) 33%,var(--white) 33%)}
.pswatch.glow{background:var(--glow)}
.kit-logo{width:64px;height:64px;border-radius:var(--r);border:1px dashed var(--line-strong);display:grid;place-items:center;overflow:hidden;color:var(--muted);flex:none}
.kit-logo img{max-width:100%;max-height:100%;object-fit:contain}
.kit-locked{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-card);border:1px solid var(--line);color:var(--muted);font-size:12.5px}
.kit-locked b{display:block;color:var(--fg);font-weight:500;font-size:13px}
.hint{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted);margin:10px 0 0}
.hint svg{width:14px;height:14px}
.swatches{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.swatches .btn i.dotc{width:12px;height:12px;border-radius:50%;display:inline-block;border:1px solid var(--line-strong)}
.pv-frame{border:1px solid var(--line-strong);border-radius:var(--r-card);overflow:hidden;background:var(--bg)}
.pv-bar{height:34px;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--muted)}
.pv-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.pv-bar span{flex:1;text-align:center}
.pv{background:var(--bg);color:var(--fg);font-size:13px;pointer-events:none;user-select:none;min-height:420px}
.pv.mobile{width:375px;max-width:100%;margin:0 auto;border-inline:1px solid var(--line)}
.pv .ptop{position:static}
.pv .pbar{padding:12px 16px 8px;gap:12px}
.pv .pnav{padding:0 10px}
.pv .pbody>.pnav{padding:14px 10px}
.pv main{padding:16px;min-width:0}
.pv .ph h1,.pv .hero h1{font-size:20px}
.pv .home-grid{margin-top:0}
.pv.mobile .home-grid{grid-template-columns:minmax(0,1fr)}
.pv.mobile .hb-wide,.pv.mobile .hb-narrow{grid-column:1 / -1}
.pv.mobile .pbody{display:block}
.pv.mobile .pbody>.pnav{flex-direction:row;overflow:hidden;border-inline-end:0;border-bottom:1px solid var(--line);padding:4px 10px}
.pv.mobile .acct,.pv.mobile .pnav span{display:none}
/* ---------- Integrations ---------- */
.kcard{border:1px solid var(--line);border-radius:var(--r-card);padding:14px;display:grid;gap:6px;background:var(--panel)}
.kcard.revoked{opacity:.6}
.keyonce{border-radius:var(--r-card);padding:14px;margin-bottom:14px;background:var(--hl-soft)}
.keyonce .head{display:flex;gap:8px;align-items:center;font-weight:600;font-size:13px;margin-bottom:4px}
.keyonce .head svg{color:var(--hl)}
pre.json{font-family:var(--mono);font-size:12px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin:0;overflow:auto;max-height:280px;white-space:pre-wrap;word-break:break-all}
/* ---------- Rewards programme builder: tiers as lanes, rules as cards ---------- */
.pg-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
@media (max-width:1180px){.pg-grid{grid-template-columns:minmax(0,1fr)}}
.lanes{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(180px,1fr);gap:12px;overflow-x:auto;padding-bottom:6px}
.lane{border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:8px;align-content:start;min-height:180px}
.lane.all{border-style:dashed}
.lane-h{display:grid;gap:2px;padding:4px 4px 8px;border-bottom:1px solid var(--line);text-align:start;background:none;border-width:0 0 1px;color:var(--fg);font:inherit;cursor:pointer;border-radius:6px 6px 0 0}
.lane-h:hover:not([disabled]){background:var(--hl-soft)}
.lane-h[disabled]{cursor:default}
.lane-h b{font-weight:600;font-size:14px;display:flex;gap:6px;align-items:center}
.lane-h span{font-size:12px;color:var(--muted)}
.rcard{border:1px solid var(--line-strong);border-radius:10px;background:var(--panel);padding:10px 12px;display:grid;gap:6px;text-align:start;color:var(--fg);font:inherit;font-size:12.5px;cursor:pointer;width:100%}
.rcard:hover{border-color:var(--hl)}
.rcard.sel{border:2px solid var(--hl);padding:9px 11px}
.rcard .nm{font-weight:500;font-size:13px}
.rcard .rr{display:grid;grid-template-columns:48px minmax(0,1fr);gap:6px;align-items:baseline}
.rcard .rr>span:first-child{color:var(--muted);font-size:11.5px}
.rcard .rr svg{width:13px;height:13px;color:var(--hl);vertical-align:-2px;margin-inline-end:3px}
.lane .add{border:1px dashed var(--line-strong);background:none;border-radius:10px;padding:8px;color:var(--muted);font:500 12.5px var(--font);cursor:pointer;display:flex;gap:6px;align-items:center;justify-content:center}
.lane .add:hover{border-color:var(--hl);color:var(--fg)}
.burn{height:10px;border-radius:5px;background:var(--line);overflow:hidden}
.burn i{display:block;height:100%;background:var(--c-hi);border-radius:5px}
.burn.over i{background:var(--fg)}
.set-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px}
@media (max-width:980px){.set-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ck{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--fg)}
.ckgrid{display:flex;flex-wrap:wrap;gap:6px 14px}
select[multiple]{height:auto;min-height:96px;padding:6px}

/* Pipeline board (10-core C3) */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:12px;overflow-x:auto;padding-bottom:6px}
.stagecol{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;min-height:160px}
.stagecol.over{outline:2px dashed var(--hl);outline-offset:-2px;background:var(--hl-soft)}
.deal{background:var(--solid);border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;cursor:pointer}
.deal[draggable="true"]{cursor:grab}
.deal.stale{border-color:var(--line-strong);box-shadow:inset 3px 0 0 var(--hl)}

/* Right to left (10-core R-LOC-4): logical properties above; icons that point a way are mirrored; charts and numbers stay left to right. */
[dir=rtl] .lucide-arrow-right,[dir=rtl] .lucide-arrow-left,[dir=rtl] .lucide-chevron-right,[dir=rtl] .lucide-chevron-left,[dir=rtl] .lucide-send{transform:scaleX(-1)}
[dir=rtl] .chart,[dir=rtl] .mono{direction:ltr}
.agr-text{white-space:pre-line;max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:12px 14px;line-height:1.55}
/* Chat panel beside every admin screen (85 R-AST-13) */
.ast-panel{position:fixed;top:0;inset-inline-end:0;bottom:0;width:min(400px,100vw);background:var(--solid);color:var(--fg);border-inline-start:1px solid var(--line-strong);display:flex;flex-direction:column;z-index:45;box-shadow:-8px 0 24px rgba(11,13,16,.08)}
.ast-panel[hidden]{display:none}
.chat-head{display:flex;align-items:center;gap:10px;padding:16px 16px 10px;border-bottom:1px solid var(--line)}
.chat-head h2{margin:0;font-size:16px}
.chat-log{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.chat-msg{border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14px;max-width:92%}
.chat-msg p{margin:0 0 6px;white-space:pre-wrap}
.chat-msg.me{align-self:flex-end;background:var(--panel);border-color:var(--line-strong)}
.chat-msg .chips,.chat-msg .row{margin-top:8px}
.chat-prop{border:1px dashed var(--line-strong);border-radius:10px;padding:8px 10px;margin-top:8px}
.chat-prop p{margin:0 0 8px}
.chat-in{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.chat-in .in{flex:1}
@media (min-width:1200px){body.chat-open .app main{margin-inline-end:400px}}
body.chat-open .modal.drawer{padding-inline-end:min(400px,100vw)}

/* ---------- v3: Focus inbox home (admin) ---------- */
.focus{max-width:820px;margin:0 auto}
.stats{display:flex;gap:12px 32px;flex-wrap:wrap;padding:14px 0;margin:0 0 22px;border-block:1px solid var(--line)}
.stat{display:grid;gap:2px}
.stat .l{font-size:12px;color:var(--muted)}
.stat .v{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px}
.stream{display:grid;gap:12px}
.dcard{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start}
.dcard .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--hl-soft);color:var(--hl)}
.dcard .eyebrow{margin:0 0 4px}
.dcard p{margin:0}
.dcard .row{margin-top:12px}
.theme-btn .moon,:root[data-theme="dark"] .theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:inline-flex}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .theme-btn .sun{display:none}:root:not([data-theme="light"]) .theme-btn .moon{display:inline-flex}}

/* ---------- v3: sign-in on the brand glow ---------- */
.login[data-ground="dark"]{background:var(--glow);color:var(--fg)}
.login a{color:var(--hl)}
.login .login-card{background:rgba(11,13,16,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:28px}
.login .login-card .btn.primary,.login .login-card .in{height:44px}
.login-logo{height:24px;width:auto;display:block;margin-bottom:8px}

/* ---------- v3: client portal, mobile tab bar and the conversation-first home ---------- */
.ptop{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.pnav .more{display:none}
@media (max-width:820px){
  #nav.pnav{position:fixed;inset-inline:0;bottom:0;z-index:20;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;background:var(--solid);border-top:1px solid var(--line);border-inline-end:0;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));overflow:hidden;margin:0;max-width:none}
  #nav.pnav a{flex-direction:column;gap:2px;font-size:11px;padding:6px 2px;border-bottom:0;justify-content:center;min-height:44px;background:none;white-space:nowrap}
  #nav.pnav a span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  #nav.pnav a[aria-current="page"]{color:var(--hl)}
  #nav.pnav a::before{display:none}
  #nav.pnav a:nth-of-type(n+5):not(.more){display:none}
  #nav.pnav .more{display:flex}
  .pfoot{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .ptop{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)} /* a backdrop filter would hold the fixed tab bar inside the header */
  .ptop .acct{display:none}
}
.convo{max-width:720px;margin:8px auto 0;display:grid;gap:14px}
.eqbar{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;padding:20px 22px;border-radius:var(--r-card);background:var(--glow);color:var(--white);--btn-bg:var(--teal);--btn-fg:var(--ink);--line-strong:rgba(140,153,163,.36);--panel:rgba(247,248,250,.06);--fg:var(--white);--hl:var(--teal)}
.eqbar .l{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.eqbar .v{font-size:30px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.15}
.eqbar .row{margin-inline-start:auto}
.eqbar .btn{height:40px}
.bot{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:start}
.bot .ava{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--hl-soft);color:var(--hl)}
.bot .ava svg{width:16px;height:16px}
.bubble{background:var(--panel);border:1px solid var(--line);border-radius:4px var(--r-card) var(--r-card) var(--r-card);padding:12px 14px}
.bubble b{font-weight:600}
.bubble p{margin:4px 0 0;color:var(--muted)}
.bubble .row{margin-top:12px}
.convo .bot .panel h2{font-size:14px}
.convo #chat{display:grid;gap:8px;max-height:none;overflow:visible}
.convo #chat:empty{display:none}
.composer{position:sticky;bottom:12px;z-index:4;display:grid;gap:8px;padding:10px;border-radius:16px;background:var(--solid);border:1px solid var(--line-strong);box-shadow:0 8px 28px rgba(11,13,16,.12)}
.composer .chips{flex-wrap:nowrap;overflow-x:auto}
.composer .chip{white-space:nowrap}
.composer form{display:flex;gap:8px}
.composer .in{height:44px;border-radius:12px}
.composer .btn.primary{height:44px;width:44px;padding:0;border-radius:12px}
@media (max-width:820px){.composer{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}

/* ---------- v3: Experience builder, the page as a phone canvas ---------- */
.xp-phone{max-width:420px;margin:0 auto;padding:16px 12px;border:1px solid var(--line-strong);border-radius:28px;background:var(--bg)}
.xp-count{font-size:12px;color:var(--muted);text-align:center;margin-top:8px}
.xp-block.off{opacity:.5;border-style:dashed}
.xp-block .eye{border:0;background:none;color:var(--muted);cursor:pointer;padding:4px;border-radius:6px;display:grid;place-items:center}
.xp-block .eye:hover{background:var(--hl-soft);color:var(--fg)}
.xp-keys{display:grid;gap:4px}
.xp-key{display:flex;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:8px;font-size:12.5px}
.xp-key span{flex:1}
.xp-key button{border:0;background:none;color:var(--muted);cursor:pointer;padding:2px;display:grid}
.pv .convo{margin:0;gap:10px}
.pv .eqbar .v{font-size:22px}
dialog.ask{border:1px solid var(--line-strong);border-radius:var(--r-card);background:var(--solid);color:var(--fg);font:inherit;padding:22px;width:min(440px,calc(100vw - 32px));box-shadow:0 10px 30px rgba(11,13,16,.25)}
dialog.ask::backdrop{background:rgba(11,13,16,.5)}
dialog.ask p{margin:0 0 16px;font-size:14px;line-height:1.55}
dialog.ask .in{width:100%;margin-bottom:16px}
dialog.ask .row{justify-content:flex-end}

/* Country and dialling-code pickers (client sign-up) */
.cpick{position:relative;min-width:0}
.cp-btn{display:flex;align-items:center;gap:8px;width:100%;height:36px;padding:0 10px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--panel);color:var(--fg);font:400 13.5px var(--font);text-align:start;cursor:pointer}
.cp-btn .cp-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg)}
.cp-btn .cp-txt.muted{color:var(--muted)}
.cp-caret{width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translateY(-2px);flex:none}
.cp-btn[aria-expanded="true"]{border-color:var(--hl);box-shadow:0 0 0 3px var(--hl-soft)}
.cp-flag{font-size:18px;line-height:1;flex:none}
.cp-pop{position:absolute;inset-inline:0;top:calc(100% + 6px);z-index:5;min-width:260px;background:var(--solid);border:1px solid var(--line-strong);border-radius:var(--r-card);box-shadow:0 12px 32px rgba(0,0,0,.28);padding:8px;display:grid;gap:6px}
.cp-pop ul{list-style:none;margin:0;padding:0;max-height:240px;overflow-y:auto}
.cp-pop li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);font-size:13.5px;color:var(--fg);cursor:pointer}
.cp-pop li>span:nth-child(2){flex:1;min-width:0}
.cp-pop li.act,.cp-pop li:hover{background:var(--hl-soft)}
.cp-pop li[aria-selected="true"]{font-weight:600}
.cp-pop .cp-none{cursor:default}
.tel-row{display:grid;grid-template-columns:118px minmax(0,1fr);gap:8px}
.tel-row .cp-pop{min-width:min(300px,calc(100vw - 48px))}
.tel-row input{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ref-chip{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--hl-soft);font-size:13px;color:var(--fg)}
.ref-chip span{flex:1}
.login .login-card .cp-btn{height:44px}
.confirm-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;margin-bottom:16px;border:1px solid var(--line-strong);border-radius:var(--r-card);background:var(--hl-soft)}
.confirm-bar p{flex:1;margin:0;min-width:200px}
.rf-step{border:1px solid var(--line);border-radius:var(--r-card);padding:12px}
.rf-rw{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:8px}