/* INFOC ONE design tokens (shared with INFOC ONE CMS and infoc.one): one blue, Carbon greys, square corners.
   Every colour below comes from a token, so dark mode (html[data-theme=dark], set by theme.js) reaches every
   screen; test/design.test.ts proves AA contrast for both schemes. --b is the blue fill (always with --on-b),
   --link is blue text, and --chrome-* is the charcoal brand chrome (top bar, sign-in panel) in both schemes. */
:root{color-scheme:light;
  --b:#0001ff;--bh:#0000c4;--ba:#00008f;--on-b:#ffffff;--link:#0001ff;--tint:#e8e8ff;--tintline:#c6c6ff;
  --ink:#111827;--mid:#334155;--soft:#475569;--on-ink:#ffffff;
  --fill:#f8faff;--surface:#ffffff;--surface-2:#f4f7fc;--line:#e0e0e0;--line2:#f0f0f0;--input-line:#8791a5;--disabled:#c6c6c6;
  --ok:#0e7a54;--okbg:#e6f4ee;--warn:#b45309;--warnbg:#fef3e2;--warnline:#f1c21b;--err:#da1e28;--errbg:#fff1f1;--err-fill:#da1e28;
  --purple:#6929c4;--purplebg:#f6f2ff;--vis-bg:#161616;--vis-ink:#ffffff;--row-sel:rgba(0,1,255,.05);--scrim:rgba(22,22,22,.4);
  --chrome:#ffffff;--chrome-ink:#161616;--chrome-mid:#525252;--chrome-soft:#6f6f6f;--chrome-line:#c6c6c6;--chrome-ok:#0e7a54;--chrome-link:#0001ff;--chrome-off:#6f6f6f;
  --admin-glass:blur(22px) saturate(1.2);--admin-glass-surface:rgba(255,255,255,.84);--admin-raised:rgba(255,255,255,.96);--admin-canvas:radial-gradient(ellipse at 8% 8%,rgba(185,211,255,.4),transparent 48%),radial-gradient(ellipse at 92% 90%,rgba(196,232,255,.3),transparent 50%),linear-gradient(135deg,#ffffff,#f6f9ff 55%,#ffffff);--admin-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 16px 48px rgba(30,50,90,.08);
  --admin-primary-hover:#2b313c;
  --focus:0 0 0 2px var(--surface),0 0 0 5px var(--link);--mono:"JetBrains Mono",ui-monospace,monospace;
  --spring:linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%,.849 31.5%,.937 38.1%,.968 41.8%,.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001 85.9%,1);--out:cubic-bezier(.2,.8,.2,1);
  --dur-1:120ms;--dur-2:200ms;--dur-3:320ms;
  /* Interaction motion (sidebar, drawer, badges): transform and opacity only, 120-240ms, never looping. Reduced Motion drops the movement. */
  --motion-fast:120ms;--motion-quick:150ms;--motion-normal:220ms;--motion-slow:240ms;--ease-out:cubic-bezier(.22,1,.36,1)}
:root[data-theme=dark]{color-scheme:dark;
  --b:#0001ff;--bh:#2a2bff;--ba:#0000c4;--on-b:#ffffff;--link:#a5a6ff;--tint:#1d1e4a;--tintline:#3c3d8f;
  --ink:#f4f4f4;--mid:#c6c6c6;--soft:#a8a8a8;--on-ink:#161616;
  --fill:#161616;--surface:#1f1f1f;--surface-2:#262626;--line:#393939;--line2:#2c2c2c;--input-line:#6f6f6f;--disabled:#393939;
  --ok:#42be65;--okbg:#0f2a1a;--warn:#f1c21b;--warnbg:#2e2614;--warnline:#8a6d00;--err:#ff8389;--errbg:#3a1518;--err-fill:#da1e28;
  --purple:#be95ff;--purplebg:#2a1d45;--vis-bg:#0001ff;--vis-ink:#ffffff;--row-sel:rgba(165,166,255,.1);--scrim:rgba(0,0,0,.6);
  --admin-glass-surface:rgba(21,21,24,.96);--admin-raised:#202023;--admin-canvas:#101012;--admin-shadow:0 16px 48px rgba(0,0,0,.2);--admin-primary-hover:#dedee6;--chrome:#0b0b0b;--chrome-ink:#ffffff;--chrome-mid:#c6c6c6;--chrome-soft:#a8a8a8;--chrome-line:#525252;--chrome-ok:#42be65;--chrome-link:#a5a6ff;--chrome-off:#8d8d8d}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fill);color:var(--ink);font:13.5px/1.5 Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--focus)}
a{color:var(--link);text-decoration:none}
.mono{font-family:var(--mono)}
[hidden]{display:none!important}
.pbtn{font-size:12px;font-weight:600;padding:7px 12px;border:1px solid var(--b);background:var(--b);color:var(--on-b);white-space:nowrap;transition:background-color var(--dur-1)}.pbtn:hover{background:var(--bh)}
.pbtn:disabled{background:var(--disabled);border-color:var(--disabled);color:var(--soft);cursor:not-allowed}
.sbtn{font-size:12px;font-weight:600;padding:6px 10px;border:1px solid var(--line);background:var(--surface);white-space:nowrap;transition:border-color var(--dur-1),color var(--dur-1)}.sbtn:hover{border-color:var(--link);color:var(--link)}
.sbtn:disabled{color:var(--soft);border-color:var(--line);cursor:not-allowed}
.ghost{border:1px solid var(--chrome-line);background:none;color:var(--chrome-mid);padding:5px 10px;font-size:12px;font-weight:600}.ghost:hover{border-color:var(--chrome-ink);color:var(--chrome-ink)}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{font-size:12px;font-weight:600;padding:6px 10px;border:1px solid var(--line);background:var(--surface);white-space:nowrap}
.seg button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.seg.small button{font-size:11.5px;padding:4px 8px}

/* sign-in: the INFOC ONE CMS layout (dark brand panel, form on the page surface) */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(320px,560px) 1fr;background:var(--surface)}
.lside{background:var(--chrome);color:var(--chrome-ink);padding:56px;display:flex;flex-direction:column;gap:40px}
.lhead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brandmark{display:inline-flex;align-items:center;gap:10px}
.brandmark img{display:block}
.brandmark .wm{font-family:Figtree,Manrope,system-ui,sans-serif;font-weight:800;font-size:22px;line-height:1;letter-spacing:.04em;color:var(--chrome-ink)}
.brandmark .wm small{display:block;font-family:Manrope,system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:.01em;color:var(--chrome-soft);margin-top:3px}
.envb{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--chrome-ok);border:1px solid var(--chrome-ok);padding:3px 8px}
.lcopy{margin:auto 0}
.lcopy h2{font-size:30px;line-height:1.15;letter-spacing:-.02em;font-weight:700;margin:0 0 14px;max-width:18ch}
.lcopy p{color:var(--chrome-mid);font-size:15px;line-height:1.55;margin:0 0 22px;max-width:46ch}
.trust{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:14px}
.trust li{display:flex;gap:12px;align-items:center}
.trust li::before{content:"";width:11px;height:6px;border-left:2px solid var(--chrome-link);border-bottom:2px solid var(--chrome-link);transform:rotate(-45deg) translateY(-2px);flex:none}
.lfoot{font-size:13px;color:var(--chrome-soft);display:flex;gap:8px;margin:0}
.lfoot a{color:var(--chrome-link)}
.lmain{display:grid;place-items:center;padding:56px 24px}
.lmain form{width:min(500px,100%);display:flex;flex-direction:column;gap:14px}
.lmain h1{font-size:34px;letter-spacing:-.025em;margin:0}
.lmain .sub{margin:-6px 0 6px;color:var(--mid);font-size:15px}
.seg2{display:grid;grid-template-columns:1fr 1fr;background:var(--fill);border:1px solid var(--line);padding:4px}
.seg2 button{border:0;background:transparent;padding:12px;font-weight:600;color:var(--mid);transition:background-color var(--dur-1),color var(--dur-1)}
.seg2 button[aria-selected=true]{background:var(--surface);color:var(--link);box-shadow:0 0 0 1px var(--line)}
.fields{display:flex;flex-direction:column;gap:8px}
.fields>label,.lbl-row label{font-size:13px;font-weight:600;color:var(--ink)}
.lbl-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px}
.fields input[type=email],.fields input[type=password],.fields input[type=text]{height:52px;border:0;border-bottom:1px solid var(--soft);background:var(--fill);padding:0 14px;font-size:15px;width:100%}
.fields input[type=email]:focus,.fields input[type=password]:focus,.fields input[type=text]:focus{outline:none;box-shadow:inset 0 0 0 2px var(--link)}
.linkbtn{border:0;background:none;color:var(--link);font-size:13px;font-weight:600;padding:0}
.chk{display:flex;align-items:center;gap:10px;font-size:13.5px;margin-top:8px}
.chk input{width:18px;height:18px;accent-color:var(--b);margin:0}
.hint{font-size:12.5px;color:var(--mid);margin:0}
.pbtn.big{height:52px;font-size:14px;margin-top:6px}
.help{font-size:13px;color:var(--mid);margin:0}
.err{color:var(--err);font-size:12.5px;margin:0;min-height:1em}
@media (max-width:860px){.login{grid-template-columns:1fr}.lside{padding:24px 20px;gap:18px}.lcopy h2{font-size:22px;margin:0}.lcopy p,.trust,.lfoot{display:none}.lmain{padding:28px 16px;place-items:start center}.lmain h1{font-size:28px}}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:var(--chrome);color:var(--chrome-ink);display:flex;align-items:center;gap:14px;padding:0 20px;min-height:56px;flex-wrap:wrap;border-bottom:1px solid var(--chrome)}
:root[data-theme=dark] .top{border-bottom-color:var(--line)}
.top .brandmark .wm{font-size:17px}
.top .brandmark .wm small{font-size:10px;margin-top:2px}
.cnt{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;background:var(--err-fill);color:#fff;font-size:11px;font-weight:700;margin-left:4px}
.presence{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--chrome-line);background:none;color:var(--chrome-ink);padding:5px 10px;font-size:12px;font-weight:600}
.presence i{width:8px;height:8px;border-radius:50%;background:var(--chrome-off);transition:background-color var(--dur-2),box-shadow var(--dur-2)}
.presence[aria-pressed=true]{border-color:var(--chrome-ok)}
.sound-hint,.presence-hours{margin:0 12px 4px;font-size:12px;line-height:1.4;color:var(--chrome-mid)}
[data-sidebar=collapsed] .sound-hint,[data-sidebar=collapsed] .presence-hours{display:none}
.presence[aria-pressed=true] i{background:var(--chrome-ok);box-shadow:0 0 0 3px rgba(66,190,101,.25)}
.themeb{display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid var(--chrome-line);background:none;color:var(--chrome-mid);padding:0}
.themeb:hover{border-color:var(--chrome-ink);color:var(--chrome-ink)}
.themeb svg{display:block}
.me{font-size:12px;color:var(--chrome-mid);white-space:nowrap}
.secret{font:13px var(--mono);background:var(--fill);border:1px solid var(--line);padding:10px 12px;word-break:break-all;user-select:all}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:1px 7px;background:var(--fill);color:var(--mid)}
.pill.ok{background:var(--okbg);color:var(--ok)}
.pill.off{background:var(--errbg);color:var(--err)}
.checks{display:flex;flex-direction:column;gap:6px;max-height:160px;overflow:auto;border:1px solid var(--line);padding:8px 10px}
.checks label{display:flex;gap:8px;align-items:center;font-size:12.5px;font-weight:500;color:var(--ink)}

/* live inbox (Chatwoot-style): list · conversation · visitor */
.banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--warnbg);border:1px solid var(--warnline);padding:10px 14px;margin-bottom:14px;font-size:13px}
.banner.info{background:var(--tint);border-color:var(--tintline)}
.inbox{display:grid;grid-template-columns:300px minmax(0,1fr) 260px;gap:0;background:var(--surface);border:1px solid var(--line);min-height:calc(100vh - 210px)}
.inbox>section{border-right:1px solid var(--line);min-width:0;display:flex;flex-direction:column}
.inbox>section:last-child{border-right:0}
.ilist{overflow:auto;max-height:calc(100vh - 210px)}
.grp{padding:12px 14px 6px;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);display:flex;gap:6px}
.it{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;border:0;border-left:3px solid transparent;border-bottom:1px solid var(--line2);background:var(--surface);padding:10px 14px 10px 11px;transition:background-color var(--dur-1),border-color var(--dur-2)}
.it:hover{background:var(--surface-2)}
.it[aria-current=true]{border-left-color:var(--link);background:var(--row-sel)}
.it.waiting{border-left-color:var(--err);background:var(--errbg)}
.it .r1{display:flex;gap:8px;align-items:center}
.it b{font-size:12.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.it .tx{font-size:12px;color:var(--mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.it .dot{width:8px;height:8px;border-radius:50%;background:var(--link);flex:none}
.timer{font:600 11px var(--mono);color:#fff;background:var(--err-fill);padding:1px 6px}
.ithread .th{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line)}
.ithread .th .who{flex:1;min-width:0}
.ithread .th .who b{display:block;font-size:14px}
.ithread .th .who span{font-size:12px;color:var(--mid)}
.ithread .th .who span.handoff{display:block;margin-top:2px;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.msgs{flex:1;overflow:auto;background:var(--fill);padding:16px;display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 330px)}
.bub{max-width:78%;padding:9px 12px;background:var(--surface);border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere;font-size:13.5px}
.bub.v{align-self:flex-end;background:var(--vis-bg);color:var(--vis-ink);border-color:var(--vis-bg)}
.bub.v.pending{opacity:.6}
.bub .by{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mid);margin-bottom:4px;white-space:normal}
.bub .by img{width:18px;height:18px}
.bub .ini{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--b);color:var(--on-b);font-size:10px;font-weight:800}
.bub a{color:var(--link);text-decoration:underline}
.bub.v a{color:inherit}
.bub .srcs{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;margin-top:6px;font-size:12px;color:var(--mid);white-space:normal}
.bub .srcs a{display:inline-flex;align-items:center;min-height:44px}
.sysl{align-self:center;font-size:12px;color:var(--mid);text-align:center}
.sysl.hot{color:var(--err);font-weight:600}
.typingl{font-size:12px;color:var(--mid);padding:0 16px 8px;background:var(--fill)}
.comp{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);align-items:flex-end}
.comp textarea{flex:1;min-height:44px;max-height:160px;resize:none;border:0;border-bottom:1px solid var(--soft);background:var(--fill);padding:11px 12px}
.comp textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--link)}
.comp .note{flex:1;font-size:12.5px;color:var(--mid);border:1px dashed var(--line);padding:11px 12px}
.iside{padding:14px 16px;gap:14px;font-size:12.5px;overflow:auto;max-height:calc(100vh - 210px)}
.iside h4{margin:0 0 4px;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.iside p{margin:0}
/* one person across visits */
.it .ret{color:var(--link);font-weight:600}
.plist{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.plist li{padding-left:10px;border-left:2px solid var(--line);overflow-wrap:anywhere}
.plist li:first-child{border-left-color:var(--link)}
.earlier{display:grid;gap:6px}
.ear{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;border:1px solid var(--line);background:var(--surface);padding:8px 10px;transition:background-color var(--dur-1),border-color var(--dur-1)}
.ear:hover{background:var(--surface-2)}
.ear[aria-expanded=true]{border-color:var(--link)}
.ear .r1{display:flex;gap:8px;align-items:center}
.ear b{flex:1;font-size:12px}
.ear .tx{font-size:12px;color:var(--mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eart{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow:auto;padding:10px;margin-top:-6px;background:var(--fill);border:1px solid var(--line);border-top:0;animation:rise var(--dur-2) var(--out) both}
.eart .bub{max-width:92%;font-size:12.5px}
.lv-empty{margin:auto;padding:40px 20px;text-align:center;color:var(--mid)}
.prefs{display:flex;flex-direction:column;gap:10px}
/* settings: AI key state */
.aistate{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;font-size:13px;line-height:1.45}
.aistate i{width:9px;height:9px;border-radius:50%;background:var(--soft);margin-top:5px;flex:none}
.aistate.site i{background:var(--ok)}.aistate.shared i{background:var(--link)}.aistate.none i,.aistate.unreadable i{background:var(--err)}
.btnrow{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px}
.cs-siteid{overflow-wrap:anywhere;user-select:all}.cs-copied{align-self:center;font-size:13px}
@media (max-width:1100px){.inbox{grid-template-columns:260px minmax(0,1fr)}.iside{display:none!important}}
@media (max-width:720px){.inbox{grid-template-columns:1fr}.inbox.open .ilist{display:none}.inbox:not(.open) .ithread{display:none}}
.tabs{display:flex;border:1px solid var(--chrome-line);flex-wrap:wrap}
.tabs button{border:0;border-left:1px solid var(--chrome-line);padding:5px 12px;font-size:12px;font-weight:600;background:transparent;color:var(--chrome-ink);white-space:nowrap;transition:background-color var(--dur-1),color var(--dur-1)}
.tabs button:first-child{border-left:0}
.tabs button[aria-selected=true]{background:var(--chrome-ink);color:var(--chrome)}
#tenant{margin-left:auto;background:var(--chrome);color:var(--chrome-ink);border:1px solid var(--chrome-line);padding:5px 8px;font-size:12px}

main{padding:24px 28px 48px}
@media (max-width:640px){main{padding:16px}}
.pagehead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.kicker{font:600 12px Manrope,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);margin:0 0 6px}
h1{font-size:24px;font-weight:700;letter-spacing:-.015em;margin:0;line-height:1.15}
h2{font-size:13.5px;font-weight:700;margin:0}
.pagehead .right{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.panel{background:var(--surface);border:1px solid var(--line)}
.panel>.ph{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel>.ph span{font-size:12px;color:var(--mid)}
.muted{color:var(--mid)}
.empty{padding:40px 16px;text-align:center;color:var(--mid);font-size:13px}

/* funnel */
.funnel{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--line)}
.outcomes{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line)}
.outcomes>div{background:var(--surface);padding:12px 16px}
.outcomes .v{font-size:20px;font-weight:800}
.outcomes .k{font-size:12px;color:var(--mid);font-weight:600}
.nudgecard{display:flex;gap:18px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mid)}
.nudgecard b{color:var(--ink)}
.funnel>div{background:var(--surface);padding:14px 16px}
.funnel .k{font:600 12px Manrope,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--mid);display:block;margin-bottom:6px;white-space:nowrap}
.funnel .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;display:block}
.funnel .bar{height:4px;background:var(--line2);margin:8px 0 5px}.funnel .bar i{display:block;height:100%;background:var(--link)}
.funnel>div:last-child .bar i{background:var(--ok)}
.funnel .r{font-size:11.5px;color:var(--mid)}

/* conversations */
.cols{display:grid;grid-template-columns:minmax(240px,300px) minmax(320px,1fr) minmax(260px,320px);gap:18px;align-items:start}
@media (max-width:1180px){.cols{grid-template-columns:minmax(220px,280px) minmax(0,1fr)}.cols>#journey{grid-column:1/-1}}
@media (max-width:760px){.cols{grid-template-columns:1fr}.list #convlist{max-height:320px;overflow:auto}.top{gap:8px}.tabs button{padding:6px 9px}#tenant{margin-left:0}}
.btn-icon{min-width:36px;min-height:36px}
button,select,input{min-height:32px}
.scrollx{overflow-x:auto}
.list .item{width:100%;text-align:left;border:0;border-left:3px solid transparent;border-bottom:1px solid var(--line2);background:var(--surface);padding:11px 14px 11px 12px;display:flex;flex-direction:column;gap:5px;transition:background-color var(--dur-1),border-color var(--dur-2)}
.list .item:hover{background:var(--surface-2)}
.list .item[aria-current=true]{border-left-color:var(--link);background:var(--row-sel)}
.list .row1{display:flex;gap:8px;align-items:center;width:100%}
.list .row1 b{font-size:12.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list .when{font:600 12px Manrope,system-ui,sans-serif;color:var(--soft);white-space:nowrap}
.list .where{font-size:11.5px;color:var(--mid)}
.livedot{width:7px;height:7px;background:var(--ok);display:inline-block;animation:pulse 1.4s infinite;flex:none}
.tags{display:flex;gap:4px;flex-wrap:wrap}
.tagc{font:600 12px Manrope,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:1px 6px}
.t-lead{color:var(--ok);background:var(--okbg)}.t-refused{color:var(--warn);background:var(--warnbg)}.t-negative{color:var(--err);background:var(--errbg)}.t-cited{color:var(--link);background:var(--tint)}.t-gap{color:var(--purple);background:var(--purplebg)}
.detail .sub{font:600 12px Manrope,system-ui,sans-serif;color:var(--soft)}
.turns{padding:16px;display:flex;flex-direction:column;gap:14px}
.uq{align-self:flex-end;max-width:80%;background:var(--vis-bg);color:var(--vis-ink);padding:8px 12px;font-size:13px}
.ua{border:1px solid var(--line);border-left:3px solid var(--line)}
.ua p{margin:0;padding:10px 12px;font-size:13px;line-height:1.55}
.ua .m{display:flex;gap:14px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--line2);font:600 12px Manrope,system-ui,sans-serif;color:var(--mid)}
.ua .m .o{text-transform:uppercase;letter-spacing:.08em}
.ua .srcs{padding:0 12px 8px;font-size:11.5px;display:flex;flex-direction:column;gap:2px}
.foot{border-top:1px solid var(--line);padding:10px 16px;font-size:11.5px;color:var(--mid)}
.journey{padding:14px 16px}
.j{display:grid;grid-template-columns:48px 14px minmax(0,1fr);gap:10px}
.j .t{font:600 12px Manrope,system-ui,sans-serif;color:var(--soft);padding-top:1px}
.j .rail{display:flex;flex-direction:column;align-items:center}.j .rail i{width:9px;height:9px;margin-top:4px;flex:none}.j .rail s{flex:1;width:1px;background:var(--line);min-height:18px;text-decoration:none}
.j b{font-size:12.5px;display:block;line-height:1.35}.j small{font:600 12px Manrope,system-ui,sans-serif;color:var(--soft)}
.j>span:last-child{padding-bottom:12px}
.kv{border-top:1px solid var(--line);padding:12px 16px;display:flex;flex-direction:column;gap:6px;font-size:12px}
.kv span{display:flex;justify-content:space-between;gap:12px}.kv span>span:first-child{color:var(--mid)}
.kv b{text-align:right}

/* tables */
table{width:100%;border-collapse:collapse;background:var(--surface)}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line2);vertical-align:top;font-size:12.5px}
th{font:600 12px Manrope,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--mid);font-weight:500;background:var(--surface);position:sticky;top:0}
td select{border:1px solid var(--line);padding:3px 6px;background:var(--surface);font-size:12px}
.grid2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr);gap:18px;align-items:start}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}
.gap{border-bottom:1px solid var(--line)}
.gap .gh{padding:12px 16px;display:flex;gap:10px;align-items:center}
.gap .gh b{flex:1}
.gap .count{font:11px Manrope,system-ui,sans-serif;background:var(--warnbg);color:var(--warn);padding:1px 7px}
.gap ul{margin:0;padding:0 16px 12px 32px;font-size:12.5px;color:var(--ink)}
.gap li{margin:3px 0}
.gap li small{color:var(--soft);font-family:Manrope,system-ui,sans-serif;font-size:12px;margin-left:6px}
.task{padding:10px 16px;border-bottom:1px solid var(--line2);display:flex;gap:10px;align-items:flex-start}
.task input{margin-top:3px}
.task.done b{text-decoration:line-through;color:var(--soft)}
.task small{display:block;color:var(--soft);font-size:11px}

/* forms */
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.field label{font-size:12px;font-weight:600;color:var(--mid)}
.field input,.field textarea,.field select{border:1px solid var(--line);border-bottom:2px solid var(--input-line);padding:8px 10px;background:var(--surface);width:100%;transition:border-color var(--dur-1)}
.field input:focus,.field textarea:focus{border-color:var(--link);outline:none}
textarea.code{font:12px/1.5 var(--mono);min-height:420px;width:100%;resize:vertical;border:1px solid var(--line);border-bottom:2px solid var(--input-line);padding:10px;background:var(--surface)}
pre.code{font:12px/1.5 var(--mono);background:var(--fill);border:1px solid var(--line);padding:10px;white-space:pre-wrap;word-break:break-all;margin:0}
.log{font:11.5px/1.6 Manrope,system-ui,sans-serif;background:var(--chrome);color:var(--chrome-mid);padding:10px 12px;max-height:240px;overflow:auto;white-space:pre-wrap}
.pad{padding:16px}
.result{border:1px solid var(--line);border-left:3px solid var(--ok);padding:10px 12px;margin-top:10px}
.result.refusal{border-left-color:var(--warn)}.result.down{border-left-color:var(--err)}
.result .p{font-size:11.5px;color:var(--mid);margin-top:8px;border-top:1px solid var(--line2);padding-top:8px}

.modal{position:fixed;inset:0;background:var(--scrim);display:grid;place-items:center;padding:16px;z-index:50;animation:fade var(--dur-2) var(--out) both}
.modal>div{background:var(--surface);border:1px solid var(--ink);box-shadow:1rem 1rem 0 var(--tint);width:min(520px,100%);padding:20px;animation:lift var(--dur-3) var(--spring) both}
:root[data-theme=dark] .modal>div{border-color:var(--line)}
.modal h2{font-size:16px;margin-bottom:12px}
.modal .row{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--on-ink);padding:9px 14px;font-size:12.5px;z-index:60;animation:toast var(--dur-3) var(--spring) both}
/* inbox motion: new chats slide into their group with a brief highlight; replies settle when confirmed */
.it.enter{animation:arrive var(--dur-3) var(--out) both,glow 1.4s var(--out) both}
.skrow{gap:8px;padding:14px;pointer-events:none}
.sk{display:block;height:9px;background:linear-gradient(90deg,var(--line2) 0%,var(--surface-2) 45%,var(--line2) 90%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.sk.w60{width:60%}.sk.w90{width:90%}.sk.w30{width:30%}
.bub.pending{opacity:.6}
.bub.settle{animation:settle var(--dur-2) var(--out)}
.bub.new{animation:rise var(--dur-3) var(--out) both}
.lv-empty img{display:block;margin:0 auto 12px}
/* ASKLA's face follows the theme: Ink on light, reversed on dark */
:root[data-theme=dark] .ck-lt,:root:not([data-theme=dark]) .ck-dk{display:none!important}
.lv-empty p{margin:0}
.keysh{font-size:13px;margin:6px 0 0}
.keys{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0;font-size:12.5px;align-items:center}
.keys dt{margin:0}.keys dd{margin:0;color:var(--mid)}
kbd{display:inline-block;min-width:22px;text-align:center;font:600 11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;padding:1px 6px;background:var(--surface-2);color:var(--ink)}
@keyframes arrive{from{opacity:0;transform:translateX(-6px)}}
@keyframes glow{from{background-color:var(--tint)}}
@keyframes settle{from{opacity:.6}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes fade{from{opacity:0}}
@keyframes lift{from{opacity:0;transform:translateY(8px)}}
@keyframes toast{from{opacity:0;transform:translate(-50%,8px)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-property:opacity,color,background-color,border-color,outline-color,box-shadow!important;scroll-behavior:auto!important}
  .livedot{animation:none}
  @keyframes lift{from{opacity:0}}
  @keyframes toast{from{opacity:0}}
  @keyframes arrive{from{opacity:0}}
  @keyframes rise{from{opacity:0}}
  .sk{animation:none}
}
.cols>*{min-width:0}
.list .row1 b{min-width:0}
.detail .sub{overflow-wrap:anywhere}
.av-layout{display:grid;grid-template-columns:minmax(240px,340px) minmax(0,1fr);gap:18px;align-items:start}
.av-layout>*{min-width:0}.av-layout .item{width:100%;text-align:left}
.av-layout .where,.av-layout .mono{overflow-wrap:anywhere}
.av-layout .row1{display:flex;align-items:center;justify-content:space-between;gap:10px}
.av-layout .where{display:block;margin-top:5px;white-space:normal}
.av-layout .av-path{color:var(--ink);font-weight:600}
.av-layout .item[aria-current=true]{background:var(--row-sel);border-left:3px solid var(--link)}
.av-journey{padding-left:20px;max-height:300px;overflow:auto}
.av-journey li{padding:8px 0;border-bottom:1px solid var(--line)}
.av-journey time{display:block;color:var(--mid);font-size:12px}
#av-compose label{display:block;font-weight:600;margin:14px 0 6px}
#av-text{width:100%;min-height:88px;resize:vertical;background:var(--surface);border:1px solid var(--input-line);padding:10px}
#av-status{margin:0 0 16px}#av-result{overflow-wrap:anywhere}
@media(max-width:760px){.av-layout{grid-template-columns:1fr}#av-list{max-height:300px;overflow:auto}.av-layout .pbtn{min-height:44px}.av-layout .sbtn{min-height:44px}}

/* ---------- Chat settings (v0.7.3): sections, pickers with drawn thumbnails, a save bar, the live preview ---------- */
.cs{display:grid;grid-template-columns:200px minmax(0,1fr) 404px;gap:20px;align-items:start;padding-bottom:80px}
.cs-nav{position:sticky;top:76px;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);padding:6px}
.cs-nav button{border:0;border-left:2px solid transparent;background:none;text-align:left;padding:8px 10px;font-size:13px;font-weight:600;color:var(--mid);transition:background-color var(--dur-1),color var(--dur-1)}
.cs-nav button:hover{background:var(--fill);color:var(--ink)}
.cs-nav button[aria-current=page]{color:var(--ink);background:var(--tint);border-left-color:var(--b)}
.cs-nav hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.cs-main{min-width:0}
.cs-h{font-size:20px;letter-spacing:-.01em;margin:0 0 4px;outline:none}
.cs-lead{margin:0 0 14px}
.cs-card{background:var(--surface);border:1px solid var(--line);padding:16px;margin-bottom:14px}
.cs-card h3{font-size:14px;margin:0 0 2px}
.cs-card>.muted{font-size:12px;margin:0 0 12px}
.cs-card>.field:last-child,.cs-row .field{margin-bottom:12px}
.cs-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 16px}
.field .hint{font-size:11.5px;color:var(--soft)}
.field .lbl{font-size:12px;font-weight:600;color:var(--mid)}
.ferr{font-size:12px;color:var(--err);font-weight:600}
.ferr:empty{display:none}
.field [aria-invalid=true]{border-color:var(--err)}
.seg button[aria-checked=true]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.cs-check label{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:600;color:var(--ink)}
.cs-color{display:flex;gap:8px;align-items:center}
.cs-color input[type=color]{flex:none;width:44px;height:38px;padding:2px;border:1px solid var(--line);background:var(--surface)}
.cs-color input:not([type]){font-family:var(--mono);text-transform:uppercase;max-width:130px}
.pick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.pk{display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:6px 6px 8px;border:1px solid var(--line);background:var(--surface);text-align:center;transition:border-color var(--dur-1),box-shadow var(--dur-1)}
.pk:hover{border-color:var(--input-line)}
.pk[aria-checked=true]{border-color:var(--b);box-shadow:inset 0 0 0 1px var(--b)}
.pk b{font-size:12.5px;margin-top:3px}
.pk small{font-size:11px;color:var(--soft);font-weight:500}
.th{position:relative;display:block;height:64px;background:var(--fill);overflow:hidden}
.th::before,.th::after{content:"";position:absolute}
.th-pill::before{right:6px;bottom:6px;width:54px;height:20px;border-radius:999px;background:var(--launch,var(--b))}
.th-orb::before{right:7px;bottom:7px;width:24px;height:24px;border-radius:50%;background:var(--launch,var(--b));box-shadow:0 0 0 3px color-mix(in srgb,var(--launch,var(--b)) 18%,transparent)}
.th-bar::before{left:6px;right:6px;bottom:6px;height:18px;border-radius:999px;background:var(--surface);border:1.5px solid var(--launch,var(--b))}
.th-mascot img{position:absolute;right:6px;bottom:5px;width:26px;height:26px}
.th-tab::before{right:0;top:16px;width:12px;height:32px;border-radius:6px 0 0 6px;background:var(--launch,var(--b))}
.th-soft::before,.th-welcome::before{inset:6px 22px;border-radius:9px;background:var(--surface);border:1px solid var(--line)}
.th-glass{background:linear-gradient(135deg,var(--tint),var(--purplebg))}
.th-glass::before{inset:6px 22px;border-radius:11px;background:color-mix(in srgb,var(--surface) 62%,transparent);border:1px solid var(--surface)}
.th-sharp::before{inset:6px 24px 9px 20px;background:var(--surface);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--b)}
.th-minimal::before{inset:6px 22px;border-radius:5px;background:var(--surface);border:1px solid var(--input-line)}
.th-welcome::after{left:22px;right:22px;top:6px;height:18px;border-radius:9px 9px 0 0;background:var(--b)}
.cs-prev{position:sticky;top:76px;background:var(--surface);border:1px solid var(--line);padding:12px}
.cs-ph{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.cs-ph h2{font-size:14px;margin:0}
.cs-frame{position:relative;width:378px;height:620px;overflow:hidden;border:1px solid var(--line);background:var(--fill)}
.cs-frame iframe{position:absolute;left:0;top:0;width:610px;height:1000px;border:0;transform:scale(.62);transform-origin:0 0;background:var(--surface)}
.cs-frame[data-view=phone] iframe{left:34px;width:390px;height:780px;transform:scale(.795)}
.cs-note{font-size:11.5px;margin:8px 0 0}
.cs-save{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:10px;width:min(760px,calc(100vw - 32px));padding:10px 10px 10px 16px;background:var(--chrome);color:var(--chrome-ink);box-shadow:0 18px 40px -16px var(--scrim)}
.cs-save #cs-count{flex:1;min-width:0;font-size:13px;color:var(--chrome-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-save b{color:var(--chrome-ink)}
.cs-save .err{min-height:0;color:var(--on-b);background:var(--err-fill);padding:2px 8px;font-weight:600}
.cs-save .err:empty{display:none}
.cs-save .sbtn{background:transparent;color:var(--chrome-ink);border-color:var(--chrome-line)}
@media (max-width:1280px){.cs{grid-template-columns:184px minmax(0,1fr)}.cs-prev{grid-column:2;position:static}}
@media (max-width:760px){.cs{grid-template-columns:1fr}.cs-prev{grid-column:auto}.cs-nav{position:static;flex-direction:row;overflow-x:auto}.cs-nav button{white-space:nowrap;border-left:0;border-bottom:2px solid transparent}.cs-nav button[aria-current=page]{border-bottom-color:var(--b)}.cs-nav hr{display:none}.pick{grid-template-columns:repeat(3,minmax(0,1fr))}.cs-frame{width:100%}}
.cs-rule{border:1px solid var(--line);padding:12px;margin-bottom:10px;background:var(--surface-2)}
.cs-rule-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.cs-rule-h .btnrow{margin:0}
.cs-hint{font-size:12px;margin:-4px 0 12px}
.cs-days button{min-width:46px}
.cs-qr{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.cs-qr img{flex:none;width:168px;height:168px;border:1px solid var(--line)}
.cs-qr p{margin:0 0 10px;word-break:break-all}
/* Where it's installed (A2): one row per website, the state in words; a left edge in the success or warning tone repeats it. */
.cs-seen{list-style:none;margin:0;padding:0;display:grid;gap:8px}.cs-seen li{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;min-height:44px;border:1px solid var(--line);border-left:3px solid var(--ok);padding:6px 6px 6px 12px;overflow-wrap:anywhere}.cs-seen li.blocked{border-left-color:var(--warn)}.cs-seen li span{flex:1 1 220px;min-width:0}
.field.cs-check input[type=checkbox]{flex:none;width:16px;height:16px;margin:0;padding:0;border:0;accent-color:var(--b)}
.cs-check label{justify-content:flex-start}
/* Match my website (admin/look-match.js): palettes, then a diff table that scrolls inside its own labelled region. */
.lm-hint{font-size:12px;margin:0 0 12px}
.lm .lm-origin{max-width:420px;margin-bottom:12px}
.lm-go{min-height:44px}
.lm-go[aria-disabled=true]{color:var(--soft);cursor:progress}
.lm-status{margin:8px 0 0;font-size:14px;line-height:20px;color:var(--mid)}
.lm-status:empty{margin:0}
.lm-status.err{color:var(--err);font-weight:600}
.lm-out{display:grid;gap:12px;margin-top:12px}
.lm-out:empty{display:none}
.lm-out p{margin:0}
.lm-h{font-size:12px;font-weight:600;color:var(--mid)}
.lm-weak{font-size:14px;font-weight:600;color:var(--ink)}
.lm-done{font-size:14px;font-weight:600;color:var(--ink)}
.lm-pals{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.lm-pal{display:grid;gap:6px;align-content:start}
.lm-opt{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-align:left;font-size:14px;line-height:20px}
.lm-opt:hover{border-color:var(--input-line)}
.lm-opt[aria-checked=true]{border-color:var(--b);box-shadow:inset 0 0 0 1px var(--b)}
.lm-opt b{font-family:var(--mono);font-size:13px;font-weight:600}
.lm-opt small{display:block;font-size:12px;line-height:16px;color:var(--mid);font-weight:500}
.lm-warn small{color:var(--warn)}
.lm-from{font-size:12px;color:var(--soft)}
.lm-sw{flex:none;display:inline-block;width:20px;height:20px;border-radius:50%;border:1px solid var(--input-line)}
.lm-val{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lm-hex{font-family:var(--mono);font-size:13px}
.lm-scroll{overflow-x:auto;border:1px solid var(--line)}
.lm-scroll:focus-visible{outline:2px solid var(--link);outline-offset:2px}
#app #view .lm-diff{min-width:440px}
#app #view .lm-diff th,#app #view .lm-diff td{padding:8px 10px}
.lm-diff caption{text-align:left;font-size:12px;font-weight:600;color:var(--mid);padding:10px 14px 4px}
#app #view .lm-diff td{font-size:14px;line-height:20px;vertical-align:middle}
#app #view .lm-diff td:last-child{min-width:180px;white-space:normal}
#app #view .lm-diff th[scope=row]{font-size:14px;font-weight:600;color:var(--ink);background:inherit;padding-block:0;text-align:left}
.lm-tick{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;white-space:nowrap}
.lm-tick input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--b)}
.lm-notes{margin:0;padding-left:18px;font-size:13px;line-height:20px;color:var(--soft)}
.lm-act{display:flex;flex-wrap:wrap;gap:8px}

/* White / Black operator controls; density changes spacing without reducing targets. */
:root{--admin-row-space:16px;--admin-panel-space:24px}
:root[data-density=compact]{--admin-row-space:10px;--admin-panel-space:16px}
button,.pbtn,.sbtn,.ghost,.linkbtn,.presence,.seg button,.seg.small button{min-height:44px}.themeb{display:inline-flex;gap:8px;align-items:center;justify-content:center;width:auto;min-width:44px;height:44px;padding-inline:12px}.tabs button{min-height:44px}.brandmark .wm{font-size:19px}.brandmark .wm small{font-size:9.5px;font-weight:700;letter-spacing:.09em}.brandmark img{content:url('brand/chola.svg')}:root[data-theme=dark] .brandmark img{content:url('brand/chola-dark.svg')}
.item{padding-block:var(--admin-row-space)}td,th{padding-block:var(--admin-row-space)}.pad{padding:var(--admin-panel-space)}.top{flex-wrap:wrap;height:auto;min-height:64px}.modal{overflow:auto}.modal>div{max-height:calc(100dvh - 32px);overflow:auto}

.pbtn,.sbtn,.ghost,.seg button,.seg2,.fields input,.themeb,.presence{border-radius:8px}.panel,.inbox{border-radius:12px}.bub{font-size:16px}.fields input[type=email],.fields input[type=password],.fields input[type=text],textarea{font-size:16px}.chk,.checks label{min-height:44px}.it{padding-block:var(--admin-row-space)}.top .brandmark .wm{font-size:19px}.top .brandmark .wm small{font-size:9.5px;letter-spacing:.09em}

/* White-first glass: effects live behind content; all type uses opaque tokens. */
body{background:var(--admin-canvas);background-attachment:fixed;min-height:100dvh}.login{background:transparent}.lside,.lmain form,.panel,.inbox,.top{background:var(--admin-glass-surface);backdrop-filter:var(--admin-glass);-webkit-backdrop-filter:var(--admin-glass)}.lside{border-right:1px solid var(--line)}.lmain form{padding:28px;border:1px solid var(--line);border-radius:24px;box-shadow:var(--admin-shadow)}.panel,.inbox{box-shadow:var(--admin-shadow)}.top{border-bottom:1px solid var(--line)}#materialb{min-height:44px;padding:8px 12px;background:var(--admin-raised);color:var(--ink);border:1px solid var(--input-line);border-radius:8px}.muted,.where,.hint,.help,.me{opacity:1}
:root[data-material=classic]{--admin-glass:blur(24px) saturate(1.6);--admin-glass-surface:rgba(255,255,255,.72);--admin-canvas:radial-gradient(ellipse at 10% 8%,#a7baff9c,transparent 58%),radial-gradient(ellipse at 92% 18%,#d2c1ff9c,transparent 56%),radial-gradient(ellipse at 45% 95%,#b8ecff8c,transparent 60%),#f5f4ff}
:root[data-material=classic][data-theme=dark]{--admin-glass-surface:rgba(27,30,49,.92);--admin-canvas:radial-gradient(ellipse at 10% 8%,#23308a70,transparent 60%),radial-gradient(ellipse at 90% 80%,#552e7670,transparent 60%),#121526}
:root[data-material=solid]{--admin-glass:none;--admin-glass-surface:var(--surface);--admin-raised:var(--surface);--admin-canvas:var(--fill);--admin-shadow:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root[data-material],:root{--admin-glass-surface:var(--surface);--admin-glass:none}}
@media(prefers-reduced-transparency:reduce){:root[data-material],:root{--admin-glass-surface:var(--surface);--admin-glass:none}}
@media(max-width:600px){.lmain{padding:16px}.lmain form{padding:24px 18px;border-radius:20px}}

/* Shared control geometry and action hierarchy. */
.pbtn,.sbtn,.ghost,.presence,.themeb{min-height:44px;border-radius:12px;font-size:14px;line-height:20px;padding:11px 16px;font-weight:600;transition:background-color var(--dur-1),border-color var(--dur-1)}
.pbtn{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}.pbtn:hover:not(:disabled){background:var(--admin-primary-hover);border-color:var(--admin-primary-hover)}.sbtn{background:var(--admin-raised);border-color:var(--line);color:var(--ink)}.sbtn:hover:not(:disabled){background:var(--surface-2);border-color:var(--line);color:var(--ink)}.ghost{border-color:transparent}.ghost:hover{background:var(--surface-2);border-color:transparent;color:var(--ink)}
.fields input[type=email],.fields input[type=password],.fields input[type=text],input[type=search],textarea,select{border:1px solid var(--input-line);border-radius:12px;background:var(--surface);color:var(--ink);font-size:16px;line-height:22px;padding:12px 14px;min-height:48px}.fields input[type=email],.fields input[type=password],.fields input[type=text]{height:48px}.fields input:focus-visible{outline:2px solid var(--link);outline-offset:2px;box-shadow:none}.fields>label,.lbl-row label{font-size:13px;line-height:20px}.lbl-row{align-items:center}.seg2{border-radius:14px}.seg2 button{border-radius:10px}.seg button{border-radius:10px}.pbtn:disabled,.sbtn:disabled{opacity:1;background:var(--surface-2);border-color:var(--line);color:var(--soft)}.pbtn:active:not(:disabled),.sbtn:active:not(:disabled){transform:translateY(1px)}

/* Four styles share White/Black and one radius vocabulary. */
:root{--admin-radius:16px;--admin-control-radius:var(--admin-radius)}
:root[data-radius="8"]{--admin-radius:8px}:root[data-radius="24"]{--admin-radius:24px;--admin-control-radius:999px}
.pbtn,.sbtn,.ghost,.presence,.themeb,.fields input[type=email],.fields input[type=password],.fields input[type=text],input[type=search],select,#materialb,#designb,#radiusb{border-radius:var(--admin-control-radius)}
textarea,.panel,.inbox,.lmain form,.bub,.seg2,.seg,.modal,.dialog,.toast{border-radius:var(--admin-radius)}
.seg button,.seg2 button{border-radius:max(4px,calc(var(--admin-radius) - 4px))}
#designb,#radiusb{max-width:160px;min-width:0;min-height:44px;padding:8px 12px}
:root[data-design=minimal]{--admin-shadow:none}
:root[data-design=welcome] .top{background:var(--tint)}
@media(max-width:800px){.top{flex-wrap:wrap;height:auto}#designb,#radiusb,#materialb{flex:1;max-width:100%;font-size:13px}}

.cs-card,.cs-prev,.box,.note{border-radius:var(--admin-radius)}.pk,.field input,.field select,.field textarea{border-radius:var(--admin-radius)}