@font-face{font-family:"Bricolage";src:url(/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Instrument";src:url(/fonts/instrument.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{
  --chrome:#0B3B3A;
  --bg:#EEF3F1;--panel:#fff;--ink:#12201F;--muted:#4E6361;--line:#D5E0DD;
  --accent:#0B3B3A;--accent-ink:#fff;--accent-soft:#DFEBE8;--in:#E5EDEB;
  --pop:#FFB400;--pop-hover:#E5A000;--pop-ink:#12201F;--pop-soft:#FFF1CC;
  --out-bg:#0B3B3A;--out-ink:#fff;
  --t-green:#DDF2E8;--c-green:#149B72;--t-blue:#E0EBFC;--c-blue:#3B7BE9;--t-purple:#ECE6FB;--c-purple:#7C4DDB;--t-orange:#FDEBD3;--c-orange:#EE8A12;--t-pink:#FBE1E4;--c-pink:#D9304A;
  --shadow:0 1px 2px rgba(11,59,58,.05),0 10px 28px rgba(11,59,58,.08);
  --warn:#8A4209;--warn-bg:#FFF1CC;--danger:#B42318;--danger-bg:#FDECEA;--ok:#17714A;
  --head:"Bricolage","Trebuchet MS",ui-sans-serif,system-ui,sans-serif;
  --body:"Instrument",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --chrome:#051D1C;
  --bg:#0A2B2A;--panel:#103937;--ink:#EAF2F0;--muted:#A3BAB6;--line:#215250;
  --accent:#FFB400;--accent-ink:#12201F;--accent-soft:rgba(255,180,0,.16);--in:#17443F;
  --out-bg:#1D625D;--out-ink:#fff;
  --t-green:#173A30;--c-green:#4CD3A5;--t-blue:#17294A;--c-blue:#7DAAF5;--t-purple:#2A2148;--c-purple:#A98BF0;--t-orange:#3D2A12;--c-orange:#F5A94A;--t-pink:#3E1B22;--c-pink:#F27C8D;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  --pop-soft:rgba(255,180,0,.16);
  --warn:#FFC64D;--warn-bg:rgba(255,180,0,.14);--danger:#F2877D;--danger-bg:#3A1714;--ok:#5DD39E;color-scheme:dark}}
:root[data-theme=dark]{
  --chrome:#051D1C;
  --bg:#0A2B2A;--panel:#103937;--ink:#EAF2F0;--muted:#A3BAB6;--line:#215250;
  --accent:#FFB400;--accent-ink:#12201F;--accent-soft:rgba(255,180,0,.16);--in:#17443F;
  --out-bg:#1D625D;--out-ink:#fff;
  --t-green:#173A30;--c-green:#4CD3A5;--t-blue:#17294A;--c-blue:#7DAAF5;--t-purple:#2A2148;--c-purple:#A98BF0;--t-orange:#3D2A12;--c-orange:#F5A94A;--t-pink:#3E1B22;--c-pink:#F27C8D;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  --pop-soft:rgba(255,180,0,.16);
  --warn:#FFC64D;--warn-bg:rgba(255,180,0,.14);--danger:#F2877D;--danger-bg:#3A1714;--ok:#5DD39E;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.5 var(--body);word-spacing:.05em;-webkit-font-smoothing:antialiased}
h1,h2,h3{word-spacing:0}
h1,h2,h3{font-family:var(--head);margin:0;line-height:1.15;letter-spacing:-.022em;text-wrap:balance}
h1{font-size:34px;font-weight:800}h2{font-size:21px;font-weight:700}h3{font-size:17px;font-weight:700}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app{display:grid;grid-template-columns:236px minmax(0,1fr);grid-template-rows:70px 1fr;min-height:100%;background:var(--chrome)}
/* chrome: the dark L-shaped frame. Only these elements switch to light-on-dark tokens, so menus and popups stay normal. */
.side,.tabbar,.top-brand,.top-ws,.gsearch input,.gs-ico,.gs-kbd,.top-btn,.avatar-btn{--ink:#fff;--muted:rgba(255,255,255,.74);--line:rgba(255,255,255,.2);--panel:rgba(255,255,255,.08);--in:rgba(255,255,255,.12);--accent:#FFB400;--accent-ink:#12201F;--accent-soft:rgba(255,180,0,.17);--warn:#FFC64D;--warn-bg:rgba(255,180,0,.15);color:var(--ink)}
/* sidebar */
.side{padding:12px 12px 16px;position:sticky;top:70px;height:calc(100vh - 70px);display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 18px;font-family:var(--head);font-weight:700;font-size:20px}
.brand-mark{width:30px;height:30px;border-radius:9px 9px 9px 3px;background:var(--accent);display:grid;place-items:center;color:var(--accent-ink)}
.nav{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:12px;font-size:16.5px;border:0;background:none;cursor:pointer;text-align:left;color:var(--muted);font-weight:500;width:100%}
.nav svg{width:19px;height:19px;flex:none}
.nav:hover{background:var(--in);color:var(--ink)}
.nav.on{background:var(--in);color:var(--ink);font-weight:600}
.nav.on svg{color:var(--accent)}
.nav .badge{margin-left:auto}
.side-foot{margin-top:auto;padding:10px;font-size:14px;color:var(--muted)}
.mode{display:inline-flex;align-items:center;gap:6px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.dot.test{background:#D98A1F}
/* main */
main{padding:10px 32px 48px 30px;min-width:0;background:var(--bg);border-radius:28px 0 0 0;min-height:calc(100vh - 70px)}
.page-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0}
.page-head h1{margin-right:auto}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:var(--panel);padding:9px 16px;border-radius:999px;cursor:pointer;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--pop);border-color:var(--pop);color:var(--pop-ink);font-weight:700}
.btn.primary:hover{background:var(--pop-hover);border-color:var(--pop-hover)}
.btn.danger{color:var(--danger)}
.btn.sm{padding:5px 10px;font-size:14px}
.btn.ghost{border-color:transparent;background:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px}
.pad{padding:18px}
.muted{color:var(--muted)}
.small{font-size:14px}
.badge{background:var(--accent);color:var(--accent-ink);border-radius:20px;font-size:12px;font-weight:600;padding:1px 7px;min-width:20px;text-align:center}
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:13px;font-weight:500;background:var(--in);color:var(--muted);white-space:nowrap}
.pill.accent{background:var(--accent-soft);color:var(--accent)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.danger{background:var(--danger-bg);color:var(--danger)}
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;font-size:13px;background:var(--in)}
.tag button{border:0;background:none;padding:0;cursor:pointer;color:var(--muted);font-size:15px;line-height:1}
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=search],input[type=url],input[type=password],select,textarea{
  border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:9px 12px;width:100%;min-width:0}
textarea{resize:vertical;min-height:84px;line-height:1.45}
label.f{display:block;font-size:14px;font-weight:600;margin:0 0 5px}
.field{margin-bottom:14px}
.hint{font-size:13.5px;color:var(--muted);margin-top:4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.banner{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--warn-bg);color:var(--warn);padding:10px 14px;border-radius:10px;margin-bottom:18px;font-size:15px}
.banner .btn{margin-left:auto}
/* dashboard */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.stat{padding:16px 18px}
.stat b{display:block;font-family:var(--head);font-size:30px;line-height:1.1}
.stat span{font-size:14px;color:var(--muted)}
.dash{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;align-items:start}
.dash .stack{display:grid;gap:16px}
.dash>*,.wf>*,.wfed>*,.settings>*,.settings .stack>*,.dash .stack>*,.split>*,.dbody>*{min-width:0}
.bars{display:grid;gap:10px;margin-top:14px}
.bar{display:grid;grid-template-columns:110px 1fr 34px;gap:10px;align-items:center;font-size:15px}
.bar i{display:block;height:10px;border-radius:5px;background:var(--accent);min-width:3px}
.bar .track{background:var(--in);border-radius:5px}
.list{list-style:none;margin:12px 0 0;padding:0}
.list li{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line);align-items:flex-start}
.list li:first-child{border-top:0}
.list .grow{flex:1;min-width:0}
.clip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dir{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:14px;background:var(--in)}
.dir.out{background:var(--accent-soft);color:var(--accent)}
.empty{text-align:center;padding:36px 20px}
.empty p{max-width:420px;margin:8px auto 16px;color:var(--muted)}
/* split view */
.split{display:grid;grid-template-columns:minmax(290px,370px) 1fr;gap:16px;height:calc(100vh - 112px);min-height:520px}
.split>section{min-height:0;display:flex;flex-direction:column}
.listcol{overflow:hidden}
.filters{padding:12px;display:grid;gap:8px;border-bottom:1px solid var(--line)}
.filters .grid2{gap:8px}
.bulk{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:8px 12px;background:var(--accent-soft);border-bottom:1px solid var(--line);font-size:14px}
.rows{overflow:auto;flex:1}
.crow{display:flex;gap:10px;align-items:center;padding:11px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.crow:hover{background:var(--bg)}
.crow.on{background:var(--accent-soft)}
.crow input{flex:none;width:16px;height:16px;accent-color:var(--accent)}
.crow .who{flex:1;min-width:0}
.crow .who b{font-weight:600;display:block}
.crow .meta{text-align:right;font-size:13px;color:var(--muted);flex:none}
.unread b::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:6px;vertical-align:middle}
.detailcol{overflow:hidden}
.dhead{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.dhead .who{flex:1;min-width:180px}
.back{display:none}
.dbody{display:grid;grid-template-columns:1fr 290px;flex:1;min-height:0}
.dbody.one{grid-template-columns:1fr}
.convo{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line)}
.dbody.one .convo{border-right:0}
.info{overflow:auto;padding:16px 18px;display:grid;gap:18px;align-content:start}
.info h3{margin-bottom:8px}
/* thread */
.thread{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:78%;display:flex;flex-direction:column}
.msg.out{align-self:flex-end;align-items:flex-end}
.msg .bub{padding:9px 13px;border-radius:16px 16px 4px 16px;background:var(--out-bg);color:var(--out-ink);white-space:pre-wrap;word-break:break-word}
.msg.in .bub{background:var(--in);color:var(--ink);border-radius:16px 16px 16px 4px}
.msg.failed .bub,.msg.blocked .bub{background:var(--danger-bg);color:var(--danger)}
.msg small{font-size:12.5px;color:var(--muted);margin-top:3px;padding:0 4px}
.day{align-self:center;font-size:13px;color:var(--muted);padding:4px 0}
.composer{border-top:1px solid var(--line);padding:12px;display:grid;gap:8px}
.composer textarea{min-height:70px}
.composer .row{justify-content:space-between}
.composer select{flex:1;min-width:140px}
.composer .sends{margin-left:auto}
/* workflows */
.wf{display:grid;grid-template-columns:260px 1fr;gap:16px;align-items:start}
.wfed{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
.steps{display:grid;gap:0;margin-top:6px}
.step{display:grid;grid-template-columns:34px 1fr;gap:12px;position:relative;padding-bottom:14px}
.step::before{content:"";position:absolute;left:16px;top:34px;bottom:0;width:2px;background:var(--line)}
.step:last-child::before{display:none}
.num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:15px}
.step.trigger .num{background:var(--accent);color:var(--accent-ink)}
.scard{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--panel)}
.scard .top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.scard .top b{margin-right:auto}
.icon-btn{border:1px solid var(--line);background:var(--panel);border-radius:6px;width:28px;height:28px;cursor:pointer;display:grid;place-items:center;color:var(--muted)}
.icon-btn:hover{color:var(--ink)}
.addrow{display:flex;gap:6px;flex-wrap:wrap;margin-left:46px}
.inline{display:flex;gap:8px;align-items:center}
.inline input[type=number]{width:90px}
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:500;font-size:15px}
.switch input{appearance:none;width:38px;height:22px;border-radius:11px;background:var(--line);position:relative;cursor:pointer;transition:background .15s;margin:0}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.switch input:checked{background:var(--accent)}
.switch input:checked::after{transform:translateX(16px)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px dashed var(--muted);background:none;border-radius:6px;padding:3px 8px;font-size:13.5px;cursor:pointer;color:var(--muted)}
.chip:hover{color:var(--accent);border-color:var(--accent)}
.preview{background:var(--in);border-radius:12px;padding:12px 14px;white-space:pre-wrap;font-size:15px}
.settings{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.settings .stack{display:grid;gap:16px}
ol.guide{padding-left:20px;margin:10px 0 0}
ol.guide li{margin-bottom:10px}
code{background:var(--in);padding:1px 5px;border-radius:4px;font-size:14px}
/* modal & toast */
.overlay{position:fixed;inset:0;background:rgba(10,15,25,.45);display:grid;place-items:center;padding:16px;z-index:50}
.modal{background:var(--panel);border-radius:14px;width:min(520px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal header{padding:18px 20px 6px}
.modal .mb{padding:10px 20px;overflow:auto}
.modal footer{padding:14px 20px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--line)}
.toasts{position:fixed;bottom:20px;right:20px;display:grid;gap:8px;z-index:60;width:min(440px,calc(100% - 24px));pointer-events:none}
.toast{background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:10px;font-size:15px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.toast.err{background:var(--danger);color:#fff}
.tabbar{display:none}
.camps{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;align-items:start}
.camps>*{min-width:0}
.cstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 10px}
.cstats b{display:block;font-family:var(--head);font-size:22px;line-height:1.1}
.cstats span{font-size:13.5px;color:var(--muted)}
.inline.small input[type=number]{width:76px;padding:5px 8px}
@media (max-width:1399px){.dbody{grid-template-columns:1fr}.dbody .info{border-top:1px solid var(--line)}.convo{border-right:0}.dbody{overflow:auto}.convo{min-height:460px}.wfed{grid-template-columns:1fr}}
@media (max-width:1050px){.dash,.settings{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.wf{grid-template-columns:1fr}}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  main{padding:16px 14px calc(84px + env(safe-area-inset-bottom))}
  h1{font-size:26px}
  main{border-radius:22px 22px 0 0;min-height:calc(100vh - 70px)}
  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(56px,1fr);overflow-x:auto;scrollbar-width:none;position:fixed;bottom:0;left:0;right:0;background:var(--chrome);border-top:0;padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:40}
  .tabbar .nav{flex-direction:column;gap:2px;font-size:11px;padding:6px 1px;align-items:center;position:relative}
  .tabbar .nav .badge{position:absolute;top:0;right:8px;margin:0;font-size:11px;padding:0 5px}
  .split{grid-template-columns:1fr;height:auto;min-height:0}
  .split .listcol .rows{max-height:none}
  .split.has-detail .listcol{display:none}
  .split:not(.has-detail) .detailcol{display:none}
  .back{display:inline-flex}
  .toasts{right:12px;bottom:calc(76px + env(safe-area-inset-bottom))}
  .thread{min-height:320px}
  .grid2{grid-template-columns:1fr}
  .filters .grid2{grid-template-columns:1fr 1fr}
  .camps{grid-template-columns:1fr}
  .bar{grid-template-columns:90px 1fr 28px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== launch additions ===== */
.skip{position:absolute;left:-9999px;top:8px;background:var(--panel);padding:8px 12px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
body.auth .side,body.auth .tabbar,body.auth .top{display:none}
body.auth .app{grid-template-columns:1fr;grid-template-rows:1fr}
body.auth main{padding:0;border-radius:0;background:transparent}
body.auth .app{background:var(--chrome)}
body.auth .authcard{box-shadow:0 30px 80px rgba(0,0,0,.35);border:0;border-radius:24px;padding:30px}
body.auth .authcard .btn.primary{width:100%;justify-content:center;padding:14px 18px;font-size:17px}
.authwrap{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.authcard{width:min(420px,100%)}
.authcard h1{font-size:24px}
.authcard form{margin-top:4px}
.brand-logo{width:30px;height:30px;border-radius:8px;object-fit:cover}
.wsw{display:block;padding:0 4px 12px}
.wsw select{font-size:14.5px;padding:7px 8px}
.acct{display:flex;align-items:center;gap:6px;margin-top:8px;justify-content:space-between}
.acct .clip{max-width:110px}
.setup{margin-bottom:16px}
.checklist{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px}
.checklist li{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:15px}
.checklist li:first-child{border-top:0}
.checklist .grow{flex:1}
.checklist .tick{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:13px;flex:none}
.checklist li.done{color:var(--muted)}
.checklist li.done .tick{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;justify-self:start}
.seg button{border:0;background:none;padding:5px 14px;font-size:14px;cursor:pointer;color:var(--muted)}
.seg button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.msg.email .bub{border-radius:12px;max-width:100%}
.msg .subj{display:block;margin-bottom:4px}
.secnav{display:flex;gap:6px;flex-wrap:wrap;margin:-6px 0 16px}
.secnav .chip{border-style:solid;color:var(--ink);background:var(--panel)}
.panel.flash{box-shadow:0 0 0 3px var(--accent)}
.panel{scroll-margin-top:16px}
.plainlist{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
.numlist{display:grid;gap:6px;max-height:320px;overflow:auto}
.numrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.numrow input{accent-color:var(--accent);width:16px;height:16px}
.numrow .grow{flex:1}
@media (max-width:860px){
  .tabbar{grid-template-columns:repeat(5,1fr);grid-auto-flow:row;overflow:visible}
  .tabbar .nav span{white-space:nowrap}
  .secnav{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
}

.morelist{display:grid;gap:4px}
.morelist .nav{font-size:16px}
.pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex:none;max-width:60%}
.numrow .pills{max-width:55%}
.step.branch>.scard{background:var(--bg)}
.arms{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.arm{border:1px dashed var(--line);border-radius:10px;padding:10px;background:var(--panel);min-width:0}
.armh{font-weight:600;font-size:14px;margin-bottom:8px;color:var(--accent)}
.arm .step{grid-template-columns:28px 1fr;gap:8px}
.arm .step .num{width:28px;height:28px;font-size:12px}
.arm .step::before{left:13px;top:28px}
.addrow.in-arm{margin-left:0}
@media (max-width:1100px){.arms{grid-template-columns:1fr}}
.subsec{border-top:1px solid var(--line);margin-top:18px;padding-top:14px}
.msg.call{align-self:flex-start}
.msg.call .bub{background:var(--warn-bg);color:var(--warn);border-radius:12px}
.cstats.cres{grid-template-columns:repeat(3,1fr);margin-top:0;padding-top:10px;border-top:1px solid var(--line, rgba(0,0,0,.08))}
.cstats.cres b{font-size:19px}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer}
.linkbtn:disabled{opacity:.6;cursor:default}
.fmfields{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px 18px;margin:8px 0 4px}
.fmfields select{width:auto;flex:1}
.hookrow{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px}
.chk{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);border-radius:99px;cursor:pointer}
.chk input{margin:0}
.stars{color:#f5a524;letter-spacing:1px}.stars i{color:var(--line);font-style:normal}
.msg.formmsg .bub,.msg.reviewmsg .bub{background:var(--accent-soft);color:var(--ink)}
code.secret{word-break:break-all}
.syncpill{background:none;border:1px solid var(--line);border-radius:99px;padding:3px 10px;font:inherit;font-size:13px;color:var(--muted);cursor:pointer;margin:4px 0;text-align:left}
.syncpill.warn{border-color:var(--warn);color:var(--warn);background:var(--warn-bg)}
.teamlist select{width:auto}
.teamlist li{gap:8px}

.gcard{border:1px solid var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.gcard .checklist li{align-items:flex-start;padding:10px 0}
.gcard .checklist .tick{margin-top:2px}

.srcs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:640px){.srcs{grid-template-columns:1fr}}
.src{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:14px;flex-wrap:wrap}
.src .grow{flex:1;min-width:150px}.src p{margin:2px 0 0}
.srci{font-size:22px;line-height:1;width:40px;height:40px;border-radius:10px;background:var(--accent-soft);display:grid;place-items:center;flex:none}
.src .btn{align-self:center}

/* ===== Sign-ups (forms + text keywords) ===== */
.lede{color:var(--muted);max-width:72ch;margin:-8px 0 18px;font-size:15.5px}
.grow{flex:1}
.nowrap{white-space:nowrap}
.ink{color:var(--ink)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
details.menu{position:relative}
details.menu>summary{list-style:none}
details.menu>summary::-webkit-details-marker{display:none}
details.menu[open]>summary svg{transform:rotate(180deg)}
.menu-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:30;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(10,15,25,.14);padding:6px;width:290px;display:grid;gap:2px}
.menu-pop button{display:flex;gap:12px;align-items:center;text-align:left;border:0;background:none;padding:10px;border-radius:8px;cursor:pointer}
.menu-pop button:hover,.menu-pop button:focus-visible{background:var(--bg)}
.menu-pop small{display:block;color:var(--muted);font-size:13.5px}
.suico{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:inline-grid;place-items:center;flex:none}
.suico svg{width:19px;height:19px}
.suico.lg{width:42px;height:42px;border-radius:12px}.suico.lg svg{width:22px;height:22px}
.sustats{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:16px;padding:2px 2px}
.sustats b{font-family:var(--head);font-size:26px;line-height:1;margin-right:6px}
.sustats span{color:var(--muted);font-size:14.5px}
.sugrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;align-items:stretch}
.sucard{padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0;transition:border-color .15s,box-shadow .15s}
.sucard:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.sucard header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sucard .suico{width:26px;height:26px;border-radius:7px}.sucard .suico svg{width:15px;height:15px}
.sukind{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.sucard h3{font-size:17px}
.suhow{display:block;background:var(--bg);border-radius:9px;padding:10px 12px;font-size:15.5px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.suhow.mono{font-size:14px;white-space:nowrap}
.kwchip{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--accent);color:var(--accent-ink);padding:1px 7px;border-radius:6px;font-size:.92em;letter-spacing:.04em}
.sucard footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;flex-wrap:wrap}
.sucard.off{opacity:.72}.sucard.off .kwchip{background:var(--muted)}
.sucard.add{border:1.5px dashed var(--line);border-radius:12px;background:none;align-items:flex-start;justify-content:center;gap:8px;min-height:150px}
.toggle{appearance:none;border:0;padding:0;width:38px;height:22px;border-radius:11px;background:var(--line);position:relative;cursor:pointer;flex:none;transition:background .15s}
.toggle i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.toggle.on{background:var(--accent)}.toggle.on i{transform:translateX(16px)}
.suempty{padding:36px 24px;text-align:center}
.suempty>p{margin:6px 0 22px}
.suchoice{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:980px;margin:0 auto 18px;text-align:left}
.suchoice:has(> :nth-child(4)){grid-template-columns:1fr 1fr;max-width:760px}
.choice{display:flex;flex-direction:column;gap:6px;border:1.5px solid color-mix(in srgb,var(--accent) 40%,var(--line));background:var(--panel);border-radius:14px;padding:18px;cursor:pointer;box-shadow:0 2px 8px rgba(16,24,40,.08);transition:border-color .15s,transform .15s,box-shadow .15s}
.choice:hover,.choice:focus-visible{border-color:var(--accent);box-shadow:0 8px 24px rgba(15,110,100,.16);transform:translateY(-1px)}
.choice b{font-family:var(--head);font-size:18px}
.choice .muted{font-size:15px}
.mini{display:flex;flex-direction:column;gap:6px;background:var(--bg);border-radius:10px;padding:14px;margin-bottom:8px;height:108px;justify-content:center}
.mini i{font-style:normal}
.mini.phone .b{max-width:78%;padding:6px 10px;border-radius:14px;font-size:14px;line-height:1.3}
.mini.phone .out{align-self:flex-end;background:var(--out-bg);color:var(--out-ink);font-weight:600;letter-spacing:.04em;border-bottom-right-radius:4px}
.mini.phone .in{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:4px}
.mini.sheet i{display:block;height:14px;border-radius:5px;background:var(--panel);border:1px solid var(--line)}
.mini.sheet i:nth-child(2){width:75%}
.mini.sheet .btnish{width:40%;background:var(--accent);border-color:var(--accent);height:18px}
/* editor */
.suback{margin:-4px 0 10px;font-size:15px}.suback .linkbtn{text-decoration:none}
.suhead{gap:12px;margin-bottom:10px;flex-wrap:nowrap}
.titlein{font-family:var(--head);font-size:24px!important;font-weight:700;border-color:transparent!important;background:none!important;padding:4px 8px!important;margin-left:-8px;flex:1;min-width:0}
.titlein:hover{border-color:var(--line)!important}.titlein:focus{border-color:var(--accent)!important;background:var(--panel)!important}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
.tab{border:0;background:none;padding:10px 14px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.tab:hover:not(:disabled){color:var(--ink)}
.tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.tab:disabled{opacity:.45;cursor:not-allowed}
.tab .count{background:var(--in);color:var(--muted);border-radius:10px;font-size:12.5px;padding:0 7px}
.sued{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.sued section{padding:18px 0;border-top:1px solid var(--line)}
.sued section:first-child{padding-top:0;border-top:0}
.sued section h3{margin-bottom:12px}
.sued details summary{cursor:pointer;font-weight:600}
.edfoot{padding-top:16px;border-top:1px solid var(--line)}
.supreview{position:sticky;top:20px}
.prevlabel{text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;font-weight:600;margin:2px 0 8px}
.kwword input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:28px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;max-width:280px;padding:10px 14px}
.checks{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chk2{font-size:13.5px;padding:3px 9px;border-radius:20px;background:var(--in);color:var(--muted)}
.chk2.ok{background:var(--accent-soft);color:var(--accent)}
.phoneprev{border:1px solid var(--line);border-radius:30px;background:var(--panel);padding:12px;box-shadow:0 10px 30px rgba(10,15,25,.08)}
.ph-top{text-align:center;padding:6px 0 10px;border-bottom:1px solid var(--line);display:grid;font-size:14px}
.ph-top span{color:var(--muted);font-size:12.5px}
.ph-body{display:flex;flex-direction:column;gap:8px;padding:16px 4px 26px;min-height:220px}
.bub{max-width:82%;padding:8px 12px;border-radius:18px;font-size:15px;line-height:1.38;white-space:pre-wrap;word-wrap:break-word}
.bub.me{align-self:flex-end;background:var(--out-bg);color:var(--out-ink);border-bottom-right-radius:5px;font-weight:600;letter-spacing:.03em}
.bub.them{align-self:flex-start;background:var(--in);border-bottom-left-radius:5px}
.formprev{background:#fff;color:#172033;border:1px solid var(--line);border-radius:14px;padding:20px;font-size:14px;box-shadow:0 10px 30px rgba(10,15,25,.08)}
.formprev h4{font-family:var(--head);font-size:19px;margin:0 0 4px}
.formprev>p{color:var(--muted);margin:0 0 12px}
.fp-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fp-f{margin-bottom:9px}.fp-f label{display:block;font-weight:600;font-size:13px;margin-bottom:3px}.fp-f i{font-weight:400;color:var(--muted)}
.fp-in{height:32px;border:1px solid #D5DAE1;border-radius:7px;background:#fff}.fp-in.ta{height:58px}
.fp-consent{display:flex;gap:8px;font-size:12.5px;color:var(--muted);margin:4px 0 12px;line-height:1.35}
.fp-consent .box{width:14px;height:14px;border:1.5px solid #9AA3AF;border-radius:3px;flex:none;margin-top:1px}
.fp-btn{color:#fff;text-align:center;border-radius:8px;padding:10px;font-weight:600}
/* share */
.sushare{display:grid;grid-template-columns:340px minmax(0,1fr);gap:18px;align-items:start}
.sushare .stack{display:grid;gap:16px;min-width:0}
.qrcard{text-align:center}
.qrcard>p{margin:4px 0 14px}
.qrbox{width:240px;height:240px;margin:0 auto 12px;display:grid;place-items:center;background:#fff;border-radius:14px;border:1px solid var(--line);padding:6px}
.qrbox svg{width:100%;height:100%}
.posterbox{text-align:left;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.bigline{font-size:20px;margin:10px 0 12px}
.suhow.big{font-size:20px;padding:14px 16px}
textarea.code{min-height:96px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:13.5px;font-weight:700;flex:none}
@media (max-width:1100px){.sued,.sushare{grid-template-columns:1fr}.supreview{position:static;max-width:380px}.qrcard{max-width:420px}}
@media (max-width:900px){.suchoice,.suchoice:has(> :nth-child(4)){grid-template-columns:1fr 1fr}}
@media (max-width:640px){.suchoice,.suchoice:has(> :nth-child(4)){grid-template-columns:1fr}.suhead .switch{font-size:0;gap:0}.titlein{font-size:20px!important}.kwword input{font-size:24px;max-width:100%}.sustats{gap:18px}}
a.btn{text-decoration:none;color:inherit}
a.btn.primary{color:var(--accent-ink)}
.fmfields label span{min-width:112px}
.cstats.cres:has(> :nth-child(4)){grid-template-columns:repeat(4,1fr)}
.trackrow{display:flex;align-items:flex-start;margin:-4px 0 14px;font-weight:500}
.trackrow input{margin-top:1px}

/* ===== The new look: top bar, sidebar footer, onboarding, dashboard ===== */
.top{grid-column:1/-1;position:sticky;top:0;z-index:35;display:flex;align-items:center;gap:14px;height:70px;padding:0 22px 0 24px;background:var(--chrome)}
.top-brand{width:196px;flex:none}
.top-brand .brand{padding:0;font-size:22px;font-weight:800;gap:11px;letter-spacing:-.02em}
.top-brand .brand-mark{width:38px;height:38px;border-radius:12px 12px 12px 4px}
.top-brand .brand-logo{width:38px;height:38px}
.top-ws select option{color:#12201F;background:#fff}
.top-ws select{width:188px;height:42px;border-radius:11px;padding:0 34px 0 14px;font-weight:500;appearance:none;background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23FFFFFF' stroke-opacity='.8' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center}
.top-grow{flex:1}
.gsearch{position:relative;width:min(380px,36vw)}
.gsearch input{height:42px;border-radius:12px;padding:0 66px 0 42px;font-size:15px;background:var(--panel);width:100%;-webkit-appearance:none;appearance:none}
.gsearch input::-webkit-search-cancel-button{display:none}
.gsearch .gs-ico{position:absolute;left:14px;top:12px;width:18px;height:18px;color:var(--muted);pointer-events:none}
.gs-kbd{position:absolute;right:10px;top:9px;font:600 12px var(--body);color:var(--muted);background:var(--in);border-radius:7px;padding:4px 8px;pointer-events:none}
.top-pop{position:relative}
.top-btn{position:relative;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.top-btn:hover{border-color:var(--muted)}
.top-btn svg{width:20px;height:20px}
.top-dot{position:absolute;top:8px;right:9px;width:9px;height:9px;border-radius:50%;background:#E5484D;border:2px solid var(--chrome);box-sizing:content-box}
.avatar-btn{width:42px;height:42px;border-radius:50%;border:0;background:var(--accent-soft);color:var(--accent);font:700 14px var(--head);cursor:pointer;letter-spacing:.02em}
.avatar-btn:hover{filter:brightness(.96)}
.pop{position:absolute;right:0;top:calc(100% + 8px);z-index:50;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);width:360px;max-width:calc(100vw - 24px);overflow:hidden}
.pop[hidden]{display:none}
.gresults{left:0;right:auto;width:min(520px,calc(100vw - 24px));max-height:70vh;overflow:auto;padding:6px}
.gr-h{font:600 11.5px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 10px 4px}
.gr{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:10px;cursor:pointer;width:100%;border:0;background:none;text-align:left}
.gr:hover,.gr.on{background:var(--accent-soft)}
.gr .gi{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;font-weight:700;font-size:13px}
.gr .gi svg{width:17px;height:17px}
.gr .gt{min-width:0;flex:1}.gr .gt b{display:block;font-weight:600}.gr .gt span{display:block;color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr .gk{font-size:13px;color:var(--muted)}
.gnone{padding:22px 12px;text-align:center;color:var(--muted)}
.pop-h{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px}
.pop-h b{font:700 16px var(--head)}
.nrow{display:flex;gap:12px;align-items:flex-start;padding:11px 16px;cursor:pointer;width:100%;border:0;background:none;text-align:left;border-top:1px solid var(--line)}
.nrow:hover{background:var(--bg)}
.nrow .gi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}.nrow .gi svg{width:18px;height:18px}
.nrow b{display:block;font-weight:600;font-size:15px}.nrow span{display:block;color:var(--muted);font-size:14px}
.nrow .when{margin-left:auto;font-size:13px;color:var(--muted);white-space:nowrap}
.pop-empty{padding:26px 16px 30px;text-align:center;color:var(--muted)}
.pop-empty b{display:block;color:var(--ink);margin-bottom:4px}
.acctpop{width:290px}
.acct-h{padding:16px;border-bottom:1px solid var(--line)}
.acct-h b{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-h .pill{margin-top:6px}
.mi{display:flex;align-items:center;gap:12px;width:100%;padding:11px 16px;border:0;background:none;cursor:pointer;text-align:left;color:var(--ink);text-decoration:none;font-size:15.5px}
.mi:hover{background:var(--bg)}.mi svg{width:18px;height:18px;color:var(--muted);flex:none}
.mi.danger{color:var(--danger)}.mi.danger svg{color:var(--danger)}
/* sidebar footer */
.side-foot{margin-top:auto;padding:14px 4px 0;display:grid;gap:10px;color:var(--muted);font-size:14.5px}
.side-foot .mode{gap:9px;padding:0 8px;font-weight:500}
.side-foot .dot{width:9px;height:9px}
.pillbtn{display:flex;align-items:center;gap:9px;width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:14.5px;font-weight:500;cursor:pointer;text-align:left}
.pillbtn:hover{border-color:var(--muted)}
.pillbtn svg{width:18px;height:18px;flex:none;color:var(--muted)}
.pillbtn.warn{border-color:var(--warn);color:var(--warn);background:var(--warn-bg)}.pillbtn.warn svg{color:var(--warn)}
.pillbtn.plan{background:var(--accent-soft);border-color:transparent;color:var(--accent);font-weight:600}.pillbtn.plan svg{color:var(--accent)}
/* onboarding */
.ob{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:30px 30px 32px;display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:34px;box-shadow:var(--shadow)}
.ob-eyebrow{font:700 13px var(--body);letter-spacing:.06em;color:var(--accent);text-transform:uppercase}
.ob h1{font-size:40px;line-height:1.1;margin:10px 0 10px;letter-spacing:-.02em}
.ob-sub{color:var(--muted);font-size:17.5px;margin:0 0 24px}
.obsteps{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:9px}
.obsteps:before{content:"";position:absolute;left:18px;top:30px;bottom:30px;width:2px;background:var(--line)}
.obstep{position:relative;display:flex;align-items:center;gap:16px}
.obnum{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--in);color:var(--muted);font:700 15px var(--head);border:3px solid var(--panel);box-sizing:content-box;margin:-3px}
.obnum.on{background:var(--accent);color:var(--accent-ink)}
.obnum.done{background:var(--accent);color:var(--accent-ink)}
.obnum svg{width:20px;height:20px}
.obcard{flex:1;min-width:0;display:flex;align-items:center;gap:16px;padding:11px 18px 11px 12px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.obstep.now .obcard{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 22%,var(--line))}
.obtile{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;flex:none}
.obtile svg{width:27px;height:27px}
.obtxt{min-width:0;flex:1}
.obtxt b{display:block;font:700 17px var(--head);letter-spacing:-.01em}
.obtxt span{display:block;color:var(--muted);font-size:15.5px;margin-top:2px}
.obgo{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 20px;border-radius:11px;border:1px solid var(--line);background:var(--panel);font:600 15px var(--body);cursor:pointer;flex:none;color:var(--ink)}
.obgo:hover{border-color:var(--muted)}
.obgo svg{width:16px;height:16px}
.obstep.now .obgo{background:var(--pop);border-color:var(--pop);color:var(--pop-ink)}
.obstep.now .obgo:hover{filter:brightness(1.08)}
.okpill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:9px;background:var(--t-green);color:var(--c-green);font:600 13.5px var(--body);white-space:nowrap;flex:none}
.okpill svg{width:15px;height:15px}
.ob-side{display:flex;flex-direction:column;gap:20px;min-width:0}
.ob-prog{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center;font-size:15.5px;color:var(--ink);font-weight:500;padding-top:6px}
.ob-prog .bar-track{grid-column:1;height:9px;border-radius:5px;background:var(--in);overflow:hidden}
.ob-prog .bar-track i{display:block;height:100%;background:var(--accent);border-radius:5px}
.ob-prog .pct{grid-column:2;grid-row:2;font-weight:600}
.ob-prog .txt{grid-column:1/-1}
.ob-skip{justify-self:start;grid-column:1/-1;font-size:14.5px}
.ob-help{flex:1;min-height:0;border-radius:24px;background:var(--accent-soft);padding:14px 14px 14px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}
.ob-help .illo{width:100%;height:auto;display:block;max-height:340px}
.helpcard{background:color-mix(in srgb,var(--panel) 62%,transparent);border-radius:18px;text-align:center;padding:16px 22px 20px;margin-top:auto}
.helpcard .bulb{width:46px;height:46px;border-radius:50%;background:var(--t-green);color:var(--c-green);display:grid;place-items:center;margin:-38px auto 6px;border:4px solid var(--accent-soft);box-sizing:content-box}
.helpcard .bulb svg{width:24px;height:24px}
.helpcard b{display:block;font:700 18px var(--head)}
.helpcard p{margin:6px 0 0;color:var(--muted);font-size:15.5px}
/* dashboard */
.hero{position:relative;padding:18px 0;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:center}
.hero-mode{display:inline-flex;align-items:center;gap:9px;font:700 13px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.hero-mode .dot{width:9px;height:9px}
.hero h1{font-size:32px;letter-spacing:-.02em;margin:4px 0 4px;line-height:1.1}
.hero p{margin:0 0 14px;color:var(--muted);font-size:16.5px}
.hero .acts{display:flex;gap:10px;flex-wrap:wrap}
.hbtn{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel);font:600 14.5px var(--body);cursor:pointer;color:var(--ink)}
.hbtn:hover{border-color:var(--muted)}.hbtn svg{width:20px;height:20px}
.hbtn.primary{background:var(--pop);border-color:var(--pop);color:var(--pop-ink)}.hbtn.primary:hover{background:var(--pop-hover);border-color:var(--pop-hover)}
.hero .illo{width:100%;height:auto;display:block}
.setupchip{display:inline-flex;align-items:center;gap:6px;margin-left:12px;font:600 13px var(--body);letter-spacing:0;text-transform:none;color:var(--warn);background:var(--warn-bg);border:0;border-radius:99px;padding:4px 11px;cursor:pointer}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0}
.kpi{display:grid;grid-template-columns:54px minmax(0,1fr) auto;grid-template-rows:1fr auto;column-gap:14px;align-items:center;padding:12px 14px 10px;background:var(--panel);border:1px solid var(--line);border-radius:16px;cursor:pointer;text-align:left;font:inherit;color:inherit;position:relative;overflow:hidden}
.kpi:hover{border-color:var(--muted)}
.kpi .obtile{grid-row:1/3;width:54px;height:54px;align-self:center}
.kpi .kt{grid-column:2;grid-row:1/3;display:grid;gap:1px;min-width:0}
.kpi b{font:800 28px/1.1 var(--head);display:block}
.kpi .kl{font-weight:600;font-size:16.5px}
.kpi .ks{color:var(--muted);font-size:13.8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .kc{grid-column:3;grid-row:1;justify-self:end;align-self:start;width:18px;height:18px;color:var(--muted)}
.kpi .spark{grid-column:3;grid-row:2;width:88px;height:30px;justify-self:end;overflow:visible}
.dgrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.dgrid>*{min-width:0}
.dcol{display:grid;gap:16px}
.dpanel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.dp-h{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.dp-h>svg{width:22px;height:22px;flex:none;color:var(--ink)}
.dp-h .t{flex:1;min-width:0}.dp-h h2{font-size:18px}.dp-h .t span{display:block;color:var(--muted);font-size:15px;margin-top:2px}
.dp-h select{width:auto;height:40px;border-radius:11px;padding:0 32px 0 14px;font-weight:500;appearance:none;background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%235F6B7A' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center}
.act-empty{text-align:center;padding:36px 16px 40px;display:grid;justify-items:center;gap:4px}
.act-empty>svg{width:44px;height:44px;color:var(--muted);margin-bottom:8px}
.act-empty b{font:700 17px var(--head)}
.act-empty p{margin:2px 0 14px;color:var(--muted);max-width:44ch}
.actlist{list-style:none;margin:10px 0 0;padding:0}
.actrow{display:flex;align-items:center;gap:12px;padding:8px 4px;border-top:1px solid var(--line);cursor:pointer}
.actrow:first-child{border-top:0}
.actrow:hover{background:var(--bg)}
.actrow .obtile{width:34px;height:34px;border-radius:10px}.actrow .obtile svg{width:17px;height:17px}
.actrow .tx{flex:1;min-width:0}.actrow .tx b{font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actrow .tx span{display:block;color:var(--muted);font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actrow .ago{color:var(--muted);font-size:14px;white-space:nowrap}
.actmore{display:block;text-align:center;padding:12px 0 2px;border-top:1px solid var(--line);margin-top:6px}
.qa{display:grid;gap:8px;margin-top:12px}
.qrow{display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;border-radius:12px;border:0;cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit}
.qrow .obtile{width:40px;height:40px;border-radius:11px;background:transparent}.qrow .obtile svg{width:22px;height:22px}
.qrow .tx{flex:1;min-width:0}.qrow .tx b{display:block;font-weight:600}.qrow .tx span{display:block;color:var(--muted);font-size:14.5px}
.qrow>svg{width:17px;height:17px;color:var(--muted)}
.qrow.green{background:var(--t-green)}.qrow.blue{background:var(--t-blue)}.qrow.orange{background:var(--t-orange)}.qrow.purple{background:var(--t-purple)}
.qrow:hover{filter:brightness(.97)}
.gs-list{list-style:none;margin:6px 0 0;padding:0}
.gs-prog{display:flex;align-items:center;gap:12px;margin:10px 0 2px}.gs-prog .bar-track{flex:1;height:8px;border-radius:5px;background:var(--in);overflow:hidden}.gs-prog .bar-track i{display:block;height:100%;background:var(--accent);border-radius:5px}.gs-prog b{font-size:14.5px;white-space:nowrap}
.dwide{grid-column:1/-1}
.gs-list li{display:flex;align-items:center;gap:12px;padding:8px 4px;border-top:1px solid var(--line);cursor:pointer;font-size:15.5px}
.gs-list li:first-child{border-top:0}
.gs-list .ring{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;color:var(--accent-ink)}
.gs-list li.done{color:var(--muted)}.gs-list li.done .ring{background:var(--accent);border-color:var(--accent)}
.gs-list .ring svg{width:13px;height:13px}
.gs-list>li>span{flex:1}.gs-list li>svg{width:16px;height:16px;color:var(--muted)}
.dextra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px;align-items:start}
.dextra>*{min-width:0}
@media (max-width:1180px){.ob{grid-template-columns:1fr}.ob-help{max-width:520px}.hero{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.dgrid>.dpanel:first-child{grid-column:1/-1}}
@media (max-width:860px){.dgrid{grid-template-columns:1fr}}
@media (max-width:860px){
  .app{grid-template-columns:1fr;grid-template-rows:60px 1fr}
  .top{height:60px;padding:0 12px;gap:10px}
  .top-brand{width:auto}.top-brand .brand span.clip{display:none}
  .top-ws,.gs-kbd{display:none}
  .gsearch{flex:1;width:auto;order:0}.top-grow{display:none}
  main{padding:4px 14px calc(84px + env(safe-area-inset-bottom))}
  .pop{position:fixed;left:12px;right:12px;top:66px;width:auto;max-width:none}
  .gresults{left:12px;width:auto}
  .ob{padding:20px 16px 22px;border-radius:18px}.ob h1{font-size:30px}.ob-sub{font-size:16.5px}
  .obsteps:before{left:15px}.obnum{width:32px;height:32px}
  .obcard{flex-wrap:wrap;gap:12px;padding:12px}.obtile{width:46px;height:46px;border-radius:12px}.obtxt{flex-basis:calc(100% - 70px)}
  .obgo,.okpill{margin-left:58px}
  .hero{padding:18px 0}.hero h1{font-size:28px}.hero .acts .hbtn{height:44px;padding:0 15px;flex:1 1 calc(50% - 6px);justify-content:center}
  .kpi{grid-template-columns:44px minmax(0,1fr);padding:14px}.kpi .obtile{width:44px;height:44px}.kpi .spark,.kpi .kc{display:none}
  .kpis{gap:10px}
}
@media (max-width:420px){.kpi{grid-template-columns:38px minmax(0,1fr);padding:12px 10px;column-gap:10px}.kpi .obtile{width:38px;height:38px}.kpi .kt b{font-size:22px}}

.pillbtn{font-size:14px;padding:10px 11px}
.hero .illo.wide{width:100%;height:auto;display:block;margin:-6px 0}
/* Google account strip on Home: quiet, one line per item */
.gcard{padding:14px 18px!important;border:1px solid var(--line)!important;background:var(--panel);border-radius:16px;margin-bottom:14px}
.gcard h2{font-size:16px}
.gcard>p{margin:2px 0 6px!important;font-size:14px}
.gcard .checklist li{padding:7px 0;font-size:15px}
.gcard .checklist .tick{width:20px;height:20px}
.ob-main .setup{margin-bottom:14px}
@media (max-width:1180px){.hero .illo.wide{display:none}}

.obtxt b,.kpi .kl,.qrow .tx b,.actrow .tx b{font-family:var(--body)}
.obtxt b{font-weight:700;letter-spacing:0}
.kpi{column-gap:12px}.kpi .spark{width:52px}
.gcard{box-shadow:none!important}
.gcard .gsteps{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.gcard .gsteps li{border-top:0;align-items:flex-start}
@media (max-width:1180px){.gcard .gsteps{grid-template-columns:1fr}}

.ob-art{flex:1;display:grid;place-items:center;min-height:0;padding:10px 0 34px}
.ob-help .illo{width:104%;max-width:none;max-height:none}
.dgrid{align-items:stretch}
@media (max-width:860px){
  .obcard{flex-wrap:nowrap;gap:10px;padding:10px}
  .obtile{width:42px;height:42px;border-radius:12px}.obtile svg{width:21px;height:21px}
  .obtxt{flex:1 1 auto}.obtxt b{font-size:16px}.obtxt span{font-size:14px}
  .obgo{margin-left:0;height:38px;padding:0 12px;font-size:15px}.okpill{display:none}
  .obgo svg{display:none}
}

/* Settings: section list, cards and right-hand column */
.page-head.stacked{display:block;margin:18px 0 20px}
.pg-sub{color:var(--muted);font-size:16.5px;margin:4px 0 0}
.settings3{display:grid;grid-template-columns:278px minmax(0,1fr);gap:16px;align-items:start}
.settings3 .col-m{max-width:940px}
.settings3>*{min-width:0}
.settings3 .stack{display:grid;gap:16px}
.settings3>.panel{padding:8px}
.settings3 .stack>.panel{border-radius:16px;padding:20px 22px}
.setnav{position:sticky;top:86px;display:grid;gap:2px;border-radius:16px!important}
.sn{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:11px;border:0;background:none;text-align:left;cursor:pointer;width:100%;color:var(--ink);font:inherit}
.sn:hover{background:var(--in)}
.sn.on{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.sn>svg{width:22px;height:22px;flex:none;color:var(--muted)}
.sn.on>svg,.sn.on b{color:var(--accent)}
.sn b{display:block;font-size:16px;font-weight:600}
.sn small{display:block;font-size:14px;color:var(--muted);margin-top:1px}
.sh{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sh>svg{width:22px;height:22px;flex:none}
.sh .t{flex:1;min-width:0}
.sh h2{font-size:18px;letter-spacing:0;word-spacing:.08em}
.sh .t span{display:block;color:var(--muted);font-size:15px;margin-top:2px}
.sh .right{flex:none;display:flex;align-items:center}
.sh .right .btn{height:40px;border-radius:11px}
.sh .right .btn svg{width:18px;height:18px}
.pill.withdot{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;font-size:14px;font-weight:600}
.pill.warn.withdot{background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.lbl{font-size:15px;margin:18px 0 6px}
.mlist{list-style:none;margin:0;padding:0}
.mrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.mrow:first-child{border-top:0}
.mrow .clip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mrow select{width:auto;min-width:120px}
.mfull{margin-left:auto;flex:none}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;flex:none;background:var(--t-green);color:var(--c-green)}
.av.b{background:var(--t-blue);color:var(--c-blue)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.fgrid .field{margin:0}
.pw{position:relative}
.pw input{padding-right:42px}
.pw .eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);border:0;background:none;padding:6px;cursor:pointer;color:var(--muted);display:grid}
.pw .eye svg{width:18px;height:18px}
.usage{margin:0 0 4px}
.featgrid{list-style:none;margin:14px 0 6px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.featgrid li{display:flex;align-items:center;gap:8px;font-size:15px}
.featgrid li svg{width:16px;height:16px;flex:none;color:var(--c-green)}
.featgrid li.off{color:var(--muted)}
.featgrid .dash{width:16px;text-align:center;font-style:normal}
.brgrid{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:12px}
.brgrid .field{margin:0 0 12px}
.brgrid input[type=color]{width:100%;height:40px;padding:3px;border-radius:10px}
#sec-data .row{gap:10px}
@media (max-width:1280px){
  .settings3{grid-template-columns:250px minmax(0,1fr)}
  .setnav{grid-row:1/span 2}
  .settings3 .col-m,.settings3 .col-r{grid-column:2}
}
@media (max-width:1050px){
  .settings3{grid-template-columns:1fr}
  .setnav{position:static;grid-row:auto;display:flex;overflow-x:auto;gap:4px}
  .sn{width:auto;flex:none;padding:9px 12px}
  .sn small,.sn>svg{display:none}
  .settings3 .col-m,.settings3 .col-r{grid-column:1}
}
@media (max-width:520px){.featgrid{grid-template-columns:1fr}.sh{flex-wrap:wrap}.sh .right{width:100%}}
h1,h2,h3{word-spacing:.06em}

/* Contacts, Inbox and Workflows: page header, three panels, avatars, stage tags */
.page-head.sub{display:flex;align-items:flex-start;gap:12px;margin:18px 0 16px}
.page-head.sub .hd{flex:1;min-width:0}
.page-head.sub .pg-sub{margin:4px 0 0}
.hact{flex:none;justify-content:flex-end}
.hact .btn{height:42px;border-radius:11px;padding:0 16px}
.btn svg{width:18px;height:18px;flex:none}
.split3{display:grid;grid-template-columns:minmax(290px,360px) minmax(0,1fr) 272px;gap:16px;align-items:start}
.split3.nodetail{grid-template-columns:minmax(290px,360px) minmax(0,1fr)}
.split3>*{min-width:0}
.split3>section{min-height:0;display:flex;flex-direction:column;border-radius:16px;overflow:hidden}
.split3 .listcol,.split3 .convcol{height:calc(100vh - 152px);min-height:560px;position:sticky;top:86px}
.split3 .infocol{overflow:visible;align-self:stretch;display:grid;align-content:start;padding:18px 20px;gap:15px;min-height:calc(100vh - 152px)}
.split3 .rows,.split3 .thread{scrollbar-width:thin}
.split3 .convo{flex:1;border:0}
.split3 .filters{padding:16px 16px 12px;border-bottom:0}
.sbox{position:relative}
.sbox>svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}
.sbox input{padding-left:38px}
.lsub{display:flex;align-items:center;gap:10px}
.lsub .chk{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--muted);cursor:pointer}
.lsub .grow{flex:1;text-align:center}
select.plain{width:auto;border:0;background-color:transparent;padding:4px 22px 4px 4px;font-weight:500;cursor:pointer}
.crow{padding:14px 16px;gap:14px}
.rtags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.rtags .tag{border-radius:7px;padding:2px 9px}
.crow .meta{display:grid;justify-items:end;gap:6px;line-height:1.3}
.cav{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:16px;flex:none;position:relative}
.cav.big{width:54px;height:54px;font-size:18px}
.pdot{position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:50%;background:var(--c-green);border:2px solid var(--panel)}
.crow.on .pdot{border-color:var(--accent-soft)}
.avsel{position:relative;flex:none;display:grid}
.avsel input{position:absolute;left:-5px;top:-5px;width:19px;height:19px;opacity:0;z-index:2;margin:0}
.crow:hover .avsel input,.selmode .avsel input,.avsel input:checked{opacity:1}
.spill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:7px;font-size:13.5px;font-weight:600;white-space:nowrap;background:var(--in);color:var(--muted)}
.spill.green{background:var(--t-green);color:var(--c-green)}
.spill.blue{background:var(--t-blue);color:var(--c-blue)}
.spill.sky{background:#E3EEFC;color:#2F6FD6}
.spill.orange{background:#FCF0D5;color:#A5670A}
.spill.red{background:var(--t-pink);color:var(--c-pink)}
select.spill{appearance:none;width:auto;border:0;cursor:pointer;padding:3px 24px 3px 10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23667085' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center}
.irow{align-items:flex-start}
.ibody{flex:1;min-width:0;display:grid;gap:3px}
.i1,.i2{display:flex;align-items:center;justify-content:space-between;gap:8px}
.i1 b{font-weight:600;font-size:16.5px}
.i3{display:flex;justify-content:flex-end;gap:6px;margin-top:2px}
.chi{flex:none;display:grid;color:var(--c-blue)}
.chi.out{color:var(--c-green)}
.chi svg{width:16px;height:16px}
.tabs3{display:flex;gap:4px;background:var(--in);border-radius:11px;padding:4px}
.tabs3 button{flex:1;border:0;background:none;padding:7px 6px;border-radius:8px;font:inherit;font-size:14.5px;font-weight:500;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.tabs3 button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.08);font-weight:600}
.tabs3 .cnt{background:var(--in);border-radius:10px;padding:0 7px;font-size:13px;min-width:20px;text-align:center}
.tabs3 button.on .cnt{background:var(--accent-soft);color:var(--accent)}
.chead{display:flex;align-items:center;gap:12px;padding:18px 20px;flex-wrap:wrap}
.ctitle{flex:1;min-width:230px}
.ctitle h2{font-size:20px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cmeta{margin-top:4px;line-height:1.45}
.vip{display:inline-grid;color:#F2A20C}
.vip svg{width:18px;height:18px}
.cact{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.icon-btn.sq{width:44px;height:44px;border-radius:12px;color:var(--ink);cursor:pointer}
.icon-btn.sq svg{width:20px;height:20px}
.icon-btn.call{color:var(--c-blue)}
.icon-btn.mailb{color:var(--ink)}
.icon-btn.sq[disabled]{opacity:.4;cursor:not-allowed}
.cact .btn.primary{height:44px;border-radius:12px;padding:0 14px}
.menu-pop.narrow{width:190px}
.menu-pop .danger{color:var(--danger)}
.chead .back{display:none}
.split3 .thread{padding:6px 20px 14px}
.msg .bub{border-radius:18px 18px 4px 18px;padding:11px 15px}
.msg.in .bub{border-radius:18px 18px 18px 4px}
.msg small svg{width:17px;height:17px;color:var(--c-green);vertical-align:-4px;margin-left:5px}
.split3 .composer{border-top:1px solid var(--line);padding:14px 20px 16px}
.split3 .composer textarea{min-height:84px;border-radius:12px}
.tplwrap{display:inline-flex;align-items:center;gap:6px;flex:1;min-width:150px;color:var(--muted)}
.tplwrap svg{width:20px;height:20px;flex:none}
.tplwrap select{border:0;background-color:transparent;padding-left:0;color:var(--muted)}
.composer .sends .btn{height:42px;border-radius:11px;padding:0 18px}
.composer .sends .btn.sm{height:42px;font-size:15px}
.ih{display:flex;align-items:center;justify-content:space-between}
.ih h3{font-size:17px}
.ibox{display:flex;align-items:center;gap:12px}
.ibox b{font-size:16px}
.clines{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}
.clines li{display:flex;align-items:center;gap:10px}
.clines svg{width:18px;height:18px;color:var(--muted);flex:none}
.stsel{position:relative}
.stsel select{padding-left:34px;height:42px;border-radius:11px}
.sdot{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:11px;height:11px;border-radius:50%;background:var(--muted)}
.sdot.green{background:var(--c-green)}.sdot.blue{background:var(--c-blue)}.sdot.sky{background:#5B93E8}.sdot.orange{background:var(--c-orange)}.sdot.red{background:var(--c-pink)}
.infocol h3{font-size:16px;margin-bottom:8px}
/* workflows */
.wf{grid-template-columns:minmax(250px,300px) minmax(0,1fr)!important}
.wflist{overflow:hidden}
.wflist .filters{padding:14px}
.wflist .crow{gap:12px;padding:13px 14px}
.wflist .crow.on{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.wico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--in);color:var(--muted);flex:none}
.wico svg{width:19px;height:19px}
.wflist .crow.on .wico{color:var(--accent)}
.wfhead{margin-bottom:16px;flex-wrap:wrap}
.wfhead input[type=text]{flex:1 1 220px;min-width:160px;font-weight:600;font-size:17px}
.wfhead .btn{height:42px}
.wfside{display:grid;gap:16px;align-content:start;min-width:0}
.scard{border-radius:12px}
.scard .top{gap:10px}
.scard .top>svg{width:19px;height:19px;flex:none;color:var(--ink)}
.icon-btn svg{width:16px;height:16px}
.wfbot{display:flex;align-items:center;gap:14px;margin:14px 0 0 46px;flex-wrap:wrap}
.banner>.dot{flex:none}
@media (max-width:1399px){
  .split3{grid-template-columns:minmax(290px,360px) minmax(0,1fr);height:auto;min-height:0}
  .split3 .listcol{grid-row:1/span 2;height:calc(100vh - 152px);position:sticky;top:86px}
  .split3 .convcol{height:calc(100vh - 152px);min-height:520px;position:static}
  .split3 .infocol{overflow:visible;min-height:0;align-self:auto}
  .split3.nodetail .listcol{grid-row:auto}
}
@media (max-width:860px){
  .page-head.sub{flex-wrap:wrap}
  .hact{width:100%;justify-content:flex-start}
  .split3{grid-template-columns:1fr;height:auto}
  .split3 .listcol{grid-row:auto;height:auto;position:static}
  .split3.has-detail .listcol{display:none}
  .split3:not(.has-detail) .convcol,.split3:not(.has-detail) .infocol{display:none}
  .split3 .convcol{height:auto;min-height:0;position:static}
  .split3 .thread{min-height:320px}
  .chead .back{display:inline-flex}
  .wf{grid-template-columns:1fr!important}
}
/* the workflow step header shares the class name "top" with the app's top bar: keep it a plain row */
.scard .top{position:static;height:auto;padding:0;background:none;border:0;grid-column:auto;z-index:auto}

/* Campaign drafts: message on the left, contacts on the right */
.campgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:start}
.campgrid>.panel{border-radius:16px;padding:20px 22px}
.page-head.sub .linkbtn{margin-bottom:6px;display:inline-block}
.page-head.sub h1 .pill{font-size:14px;vertical-align:middle;margin-left:8px}
.kfacts{display:grid;gap:0;margin:0}
.kfacts>div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line)}
.kfacts>div:last-child{border-bottom:0}
.kfacts dt{color:var(--muted);font-size:15px}
.kfacts dd{margin:0;font-size:15.5px;font-weight:600;text-align:right}
.krow{display:flex;align-items:center;gap:12px;padding:8px 4px;border-bottom:1px solid var(--line)}
.klist{max-height:420px;overflow:auto;scrollbar-width:thin}
.krow:last-child{border-bottom:0}
.krow .grow{display:grid;min-width:0}
.kres{border:1px solid var(--line);border-radius:12px;padding:2px 10px;margin:0 0 10px;background:var(--in)}
.krowcard{cursor:pointer}
.krowcard:hover{border-color:var(--accent)}
.clip3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ktabs{max-width:460px;margin:0 0 16px}
@media (max-width:980px){.campgrid{grid-template-columns:1fr}}

/* Older screens brought in line: Chatbot, Templates, Sign-ups */
.settings .stack>.panel{border-radius:16px;padding:20px 22px}
.settings .stack>.panel .field:first-of-type{margin-top:0}
.wf>.wflist{align-self:start}
.wfed>.panel{border-radius:16px;padding:20px 22px}
.page-head.sub .hd{min-width:0}
.gcard .sh{margin-bottom:6px}
.gcard .sh h2{font-size:16px}
.camps>.panel{border-radius:16px;padding:20px 22px}
.sucard{border-radius:16px}

/* Calls: dialer and recent calls */
.callgrid{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:16px;align-items:start}
.callside{display:grid;gap:16px;min-width:0}
.callgrid>.panel{border-radius:16px;padding:20px 22px}
.dialnum{display:flex;gap:8px;align-items:center;margin:2px 0 12px}
.dialnum input{flex:1;font-size:22px;letter-spacing:.02em;text-align:center;padding:12px}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.key{font:600 20px var(--head,inherit);padding:11px 0;border-radius:14px;border:1px solid var(--line);background:var(--panel);cursor:pointer;color:var(--ink)}
.key:hover{background:var(--in)}
.key:active{background:var(--accent-soft)}
.callgo{width:100%;justify-content:center;font-size:17px;padding:13px}
.callgo svg{width:20px;height:20px}
.cdir{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--in);color:var(--muted);flex:none}
.cdir.out{background:var(--accent-soft);color:var(--accent)}
.cdir svg{width:18px;height:18px}
.msg.call .bub{display:inline-flex;align-items:center;gap:8px}
.msg.call .bub svg{width:16px;height:16px}
.msg.call.out{align-self:flex-end}
.msg.call.out .bub{background:var(--accent-soft);color:var(--accent);text-align:left}
@media (max-width:860px){.callgrid{grid-template-columns:1fr}}

/* In-browser phone: the call panel that stays on screen while you move around the app */
.ph-dock{position:fixed;right:20px;bottom:20px;z-index:70;width:min(340px,calc(100% - 24px))}
.ph-dock[hidden]{display:none}
.ph-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 40px rgba(16,24,40,.22);padding:16px 18px}
.ph-card.live{border-color:var(--accent)}
.ph-top{display:flex;align-items:center;gap:12px}
.ph-av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-weight:700;flex:none}
.ph-top b{display:block}
.ph-time{font:600 18px var(--head,inherit);font-variant-numeric:tabular-nums}
.ph-status{margin:12px 0;font-weight:600;color:var(--accent)}
.ph-status.end{color:var(--muted)}
.ph-keys{margin:0 0 12px;gap:8px}
.ph-keys .key{padding:10px 0;font-size:18px}
.ph-btns{display:flex;gap:8px}
.ph-btns .btn{flex:1;justify-content:center}
.softcard{margin-bottom:16px}
@media (max-width:860px){.ph-dock{right:12px;left:12px;width:auto;bottom:calc(76px + env(safe-area-inset-bottom))}}
.ph-dock:not([hidden]) ~ .toasts{bottom:236px}
@media (max-width:860px){.ph-dock:not([hidden]) ~ .toasts{bottom:calc(250px + env(safe-area-inset-bottom))}}
.ph-top .grow{text-align:left;min-width:0}
.ph-top .grow span{display:block}
.msg.call .bub{white-space:nowrap}

/* Call recordings */
.reccard{margin-top:16px;border-radius:16px;padding:20px 22px;max-width:760px}
.reclink{color:inherit;font-weight:600;text-decoration:underline}
.recwarn{color:var(--warn,#a15c00)}

/* Calls, tidied: a compact dialer, a clean recent list, and a one-line recording card */
.dialer .dialnum{margin:0 0 12px}
.dialer .dialnum input{font-size:20px}
.dialnote{margin:10px 0 0;text-align:center;font-size:14px;color:var(--muted)}
.dialfrom{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;font-size:14px;color:var(--muted)}
.dialfrom select{width:auto;padding:5px 8px;font-size:14px}
.krow .cav{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--in);color:var(--muted);font:700 12px var(--head,inherit);flex:none}
.krow .cav.out{background:var(--accent-soft);color:var(--accent)}
.krow .ktime{white-space:nowrap}
.krow{padding:10px 4px}
.reccard{margin-top:0;max-width:none}
.reccard .sh{margin-bottom:0}
.reccard .sh .right{display:flex;align-items:center;gap:10px}
.recform{display:grid;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.recform .field{margin:0}
.recform .row{display:flex}

/* Live sending: the switch lives in a card at the top of Texting, and the sidebar status is a button */
.livecard{display:flex;align-items:center;gap:12px;padding:14px 16px;margin:8px 0 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.livecard.on{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));background:var(--accent-soft)}
.livecard .grow{display:grid;gap:2px;min-width:0}
.livecard .dot{flex:none}
.modebtn{background:none;border:0;font:inherit;color:inherit;cursor:pointer;text-align:left;border-radius:8px;padding:4px 8px!important}
.modebtn:hover{background:var(--in);color:var(--ink)}

/* ---- carrier registration guide + pre-send check ---- */
.a2pcard{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);margin:10px 0}
.a2pcard .obtile{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--in);color:var(--muted)}
.a2pcard .obtile svg{width:20px;height:20px}
.a2pcard .grow{min-width:0;display:grid;gap:1px}.a2pcard .grow span{color:var(--muted);font-size:14.5px}
.a2pcard.ok .obtile{background:var(--accent-soft);color:var(--accent)}
.a2pcard.review{background:var(--warn-bg);border-color:transparent}.a2pcard.review .obtile{color:var(--warn);background:transparent}
.a2pcard.todo{background:var(--danger-bg);border-color:transparent}.a2pcard.todo .obtile{color:var(--danger);background:transparent}
.a2p-bar{list-style:none;margin:0 0 16px;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.a2p-bar button{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font:600 13.5px var(--body);color:var(--muted);cursor:pointer}
.a2p-bar li.on button{border-color:var(--accent);color:var(--ink);background:var(--accent-soft)}
.a2p-bar li.done button{color:var(--ink)}
.a2p-bar span{width:22px;height:22px;border-radius:50%;background:var(--in);display:grid;place-items:center;font-size:13px}
.a2p-bar li.on span{background:var(--accent);color:var(--accent-ink,#fff)}
.a2p-bar li.done span{background:var(--accent);color:var(--accent-ink,#fff)}.a2p-bar span svg{width:12px;height:12px}
.a2p-have{display:grid;gap:8px}
.a2p-list{margin:0;padding-left:20px;display:grid;gap:6px}
.a2p-tips{margin-top:16px;padding:12px 14px;border-radius:10px;background:var(--in);font-size:15px}
.ckcard{margin:16px 0 0}
.cklist{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px}
.ck{display:flex;align-items:center;gap:12px;padding:9px 2px;border-top:1px solid var(--line)}.ck:first-child{border-top:0}
.ck .grow{min-width:0;display:grid;gap:1px}.ck .grow b{font-weight:600}.ck .grow span{display:block}
.ck .btn{flex:none}
.ckic{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 13px var(--body);background:var(--in);color:var(--muted)}
.ck.ok .ckic{background:var(--accent-soft);color:var(--accent)}.ckic svg{width:13px;height:13px}
.ck.warn .ckic{background:var(--warn-bg);color:var(--warn)}
@media (max-width:600px){.ck{flex-wrap:wrap}.ck .btn{margin-left:36px}.a2pcard{flex-wrap:wrap}}

/* ---- setup guide ---- */
.crumbs{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--muted);margin:2px 0 6px}
.crumbs .linkbtn{font-size:15px}
.gd-grid{display:grid;grid-template-columns:220px minmax(0,1fr) 300px;gap:18px;align-items:start}
.gd-nav{position:sticky;top:84px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:8px}
.gd-nav ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.gd-nav button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:11px;border:0;background:none;font:500 14.5px var(--body);color:var(--ink);cursor:pointer;text-align:left}
.gd-nav button:hover{background:var(--bg)}.gd-nav button.on{background:var(--accent-soft);font-weight:600}
.gd-num{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font:600 12px var(--body);background:var(--in);color:var(--muted)}
.gd-nav button.on .gd-num{background:var(--accent);color:var(--accent-ink)}
.gd-num.done,.gd-big.done{background:var(--accent);color:var(--accent-ink)}.gd-num svg,.gd-big svg{width:14px;height:14px}
.gd-main{display:grid;gap:10px;min-width:0}
.gd-welcome{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:16px;border:1px solid color-mix(in srgb,var(--accent) 14%,var(--line));background:var(--accent-soft)}
.gd-welcome .obtile{width:42px;height:42px;border-radius:12px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex:none}.gd-welcome .obtile svg{width:22px;height:22px}
.gd-welcome .grow,.gd-head .grow,.gd-next .grow{min-width:0;display:grid;gap:1px}.gd-welcome .grow span,.gd-head .grow span,.gd-next .grow span{color:var(--muted);font-size:15px}
.gd-welcome .icon-btn{font-size:20px;line-height:1}
.gd-sec{background:var(--panel);border:1px solid var(--line);border-radius:16px;scroll-margin-top:84px}
.gd-head{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:16px}
.gd-head:hover{background:var(--bg)}
.gd-head .grow b{font:700 16px var(--head)}
.gd-big{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 15px var(--head);background:var(--accent-soft);color:var(--accent)}
.gd-big.sm{width:34px;height:34px;font-size:14px}
.gd-min{flex:none;font-size:13.5px;color:var(--muted);background:var(--in);border-radius:999px;padding:3px 10px;white-space:nowrap}
.gd-pm{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);font-size:18px;line-height:1}
.gd-body{padding:2px 18px 16px 72px}
.gd-h{font:700 14px var(--head);margin:14px 0 8px}
.gd-need{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.gd-n{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;background:var(--in)}
.gd-n .obtile{width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--panel);color:var(--accent)}.gd-n .obtile svg{width:19px;height:19px}
.gd-n b{display:block;font-size:15px;line-height:1.25}.gd-n span span,.gd-n div>span{display:block;color:var(--muted);font-size:13.5px;line-height:1.3}
.gd-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.gd-list li+li{border-top:1px solid var(--line)}
.gd-list button{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.gd-list button:hover{background:var(--bg)}
.gd-list .grow{min-width:0;display:grid}.gd-list .grow span{color:var(--muted);font-size:14.5px}
.gd-list>li>button>svg{width:16px;height:16px;color:var(--muted);flex:none}
.gd-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.gd-steps li{display:flex;gap:12px;align-items:flex-start}
.gd-steps .grow{min-width:0;display:grid;gap:6px;padding-top:2px}
.gd-steps code{font-size:14px}
.gd-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px}
.gd-faq{margin:0}.gd-faq dt{font-weight:600;margin-top:12px}.gd-faq dd{margin:2px 0 0;color:var(--muted)}
.gd-side{display:grid;gap:14px;position:sticky;top:84px}
.gd-side h2{font-size:17px;margin:0 0 10px}
.gd-prog{display:flex;align-items:center;gap:12px}
.gd-ring{width:40px;height:40px;border-radius:50%;flex:none;background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--in) 0);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);mask:radial-gradient(circle,transparent 58%,#000 60%)}
.gd-bar{position:relative;display:flex;align-items:center;gap:10px;margin-top:10px}
.gd-bar i{display:block;height:8px;border-radius:5px;background:var(--accent);min-width:4px;flex:none;max-width:calc(100% - 44px)}
.gd-bar::before{content:"";position:absolute;left:0;right:44px;height:8px;border-radius:5px;background:var(--in);z-index:0}
.gd-bar i{position:relative;z-index:1}.gd-bar span{margin-left:auto;font-size:14px;color:var(--muted)}
.gd-next{display:grid;gap:12px;padding:12px;border-radius:14px;background:var(--accent-soft)}
.gd-help{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gd-help a{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.gd-help svg{width:34px;height:34px;padding:8px;border-radius:10px;background:var(--in);color:var(--accent);flex:none}
.gd-help b{display:block;font-size:15.5px}.gd-help span span{display:block;color:var(--muted);font-size:14px}
.gd-tip{display:flex;gap:10px;padding:14px 16px;border-radius:16px;background:var(--warn-bg);color:var(--warn)}
.gd-tip svg{width:22px;height:22px;flex:none}.gd-tip b{display:block}.gd-tip span{color:var(--ink);font-size:15px}
@media (max-width:1180px){.gd-grid{grid-template-columns:minmax(0,1fr) 280px}.gd-nav{display:none}}
@media (max-width:860px){.gd-grid{grid-template-columns:1fr}.gd-side{position:static}.gd-body{padding:2px 16px 16px}.gd-head{gap:10px}.gd-min{display:none}}
.gd-next .gd-big{background:var(--panel)}

/* ---- appointments ---- */
.aphd{margin:18px 0 8px;font-size:16px}
.aplist{overflow:hidden}
.aprow{display:flex;gap:14px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.aprow:first-child,.apdaterow+.aprow{border-top:0}
.aprow.off{opacity:.65}
.aptime{width:76px;flex:none;display:flex;flex-direction:column;gap:2px}.aptime span{font-size:13px;color:var(--muted)}
.apmain{flex:1;min-width:0}.apnote{margin-top:2px;color:var(--ink)}.apmoved{margin-top:6px;padding:6px 8px;border-radius:8px;background:var(--warn-bg,#fff4e0);color:var(--ink)}.apmoved .btn{margin-left:4px}
.apbtns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.apdaterow{padding:10px 16px 0;background:var(--panel);font-weight:600}
.apsetup{margin-bottom:16px}.apsetup h2{margin-top:0}
.tab .count.warn{background:var(--warn-bg);color:var(--warn)}
#bkEd{max-width:760px}#bkEd section{padding:18px 0;border-top:1px solid var(--line)}#bkEd section:first-of-type{padding-top:0;border-top:0}
.svrow{display:grid;grid-template-columns:minmax(120px,1.4fr) auto minmax(100px,1.6fr) auto;gap:8px;align-items:center;margin-bottom:8px}
.hrsrow{display:flex;align-items:center;gap:12px;padding:5px 0}.hrsrow .switch{width:140px}
.hrsin{display:flex;align-items:center;gap:8px}.hrsin.dim{opacity:.45}
@media (max-width:640px){.aprow{flex-wrap:wrap}.apbtns{justify-content:flex-start;width:100%}.svrow{grid-template-columns:1fr 1fr}.svrow input[type=text]{grid-column:1/-1}}
@media (max-width:640px){.hrsrow{flex-wrap:wrap;gap:2px 12px}.hrsrow .switch{width:100%}.hrsin input[type=time]{width:auto;min-width:0;flex:1}.hrsin{flex-wrap:wrap}}

/* reports */
.repkpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0}
.repkpi{background:var(--panel, #fff);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.repkpi b{font-family:var(--head);font-size:28px;line-height:1.1}
.repkpi span{font-size:14px;color:var(--muted)}
.repkpi em{font-style:normal;font-size:13px;color:var(--muted)}
.repgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.report .panel{margin:12px 0}.report .repgrid .panel{margin:0}
.repchart{width:100%;height:auto;display:block;color:var(--text, #222)}
.repkey{margin:6px 0 0}.dotk{display:inline-block;width:10px;height:10px;border-radius:3px;margin:0 4px 0 10px}.dotk:first-child{margin-left:0}
.reptable table{width:100%;border-collapse:collapse;font-size:14.5px}
.reptable th{text-align:left;font-weight:600;color:var(--muted);font-size:13px;padding:6px 8px;border-bottom:1px solid var(--line)}
.reptable td{padding:7px 8px;border-bottom:1px solid var(--line)}
.reptable .num{text-align:right;font-variant-numeric:tabular-nums}
.printonly{display:none}
@media (max-width:760px){.repkpis{grid-template-columns:repeat(2,minmax(0,1fr))}.repgrid{grid-template-columns:1fr}}
@media print{
  #side,#tabbar,#top,.top,.banner,.hact,.toast,.nav{display:none !important}
  body,html{background:#fff !important}
  #main,.main{margin:0 !important;padding:0 !important;max-width:none !important}
  .printonly{display:block}
  .panel,.repkpi{break-inside:avoid;box-shadow:none !important}
  .pg-sub{display:none}
}
.aiwrap{flex:0 1 150px;min-width:130px}
.aisum{background:var(--accent-soft);border-radius:10px;padding:12px 14px;line-height:1.5}
.dupgroup{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0 0 10px;display:grid;gap:6px}
.dupkeep,.dupdrop{display:flex;align-items:center;gap:10px}.dupkeep .pill,.dupdrop .pill{flex:none;width:76px;justify-content:center;text-align:center}
.duprow{display:flex;flex-direction:column;min-width:0}

/* chat button preview */
.chatprev{position:relative;background:#f4f6f9;border:1px solid var(--line);border-radius:14px;height:380px;overflow:hidden;box-shadow:0 10px 30px rgba(10,15,25,.08)}
.chatprev .cp-site{padding:16px;display:grid;gap:10px}.chatprev .cp-site i{display:block;height:12px;border-radius:6px;background:#dfe4ec}.chatprev .cp-site i.s{width:55%}
.chatprev .cp-btn{position:absolute;bottom:14px;right:14px;color:#fff;font-weight:600;font-size:14px;padding:10px 16px;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.2)}.chatprev .cp-btn.l{right:auto;left:14px}
.chatprev .cp-win{position:absolute;bottom:60px;right:14px;width:210px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.18);font-size:13px}.chatprev .cp-win.l{right:auto;left:14px}
.chatprev .cp-head{color:#fff;padding:10px 12px;font-weight:600;line-height:1.3}.chatprev .cp-body{padding:10px;display:grid;gap:8px}
.chatprev .fp-in{height:28px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;color:var(--muted)}.chatprev .fp-in.ta{height:48px}

/* calendar screen */
.calsync{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;margin:0 0 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel,#fff)}
.calsync .gico{display:grid;place-items:center;flex:none}.calsync b{display:block}.calsync .grow{flex:1 1 220px;min-width:0}.calsync.on{padding:8px 14px}.calsync.bad{border-color:var(--danger,#c0392b)}
.calwrap{padding:0;overflow:hidden}.calbar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}.callabel{font-size:16px}
.calkey i{display:inline-block;width:10px;height:10px;border-radius:3px;background:repeating-linear-gradient(45deg,#cfd6e2 0 3px,#e8ecf3 3px 6px);margin-right:4px;vertical-align:-1px}
.calhead,.calbody{display:grid;grid-template-columns:44px repeat(7,minmax(0,1fr))}.calhead{border-bottom:1px solid var(--line)}
.calhead div{text-align:center;padding:6px 2px;display:grid}.calhead small{color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.04em}.calhead b{font-size:16px}
.calhead .today b{background:var(--accent);color:var(--accent-ink);border-radius:999px;width:28px;height:28px;display:grid;place-items:center;margin:0 auto}
.calbody{max-height:620px;overflow-y:auto}.calgut .calhr{position:relative;border-top:1px solid transparent}.calgut .calhr span{position:absolute;top:-7px;right:6px;font-size:11px;color:var(--muted)}
.calcol{position:relative;border-left:1px solid var(--line);background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 48px}.calcol.today{background-color:rgba(15,110,100,.04)}
.calev{position:absolute;left:2px;right:2px;overflow:hidden;text-align:left;border:0;border-left:3px solid var(--accent);background:rgba(15,110,100,.14);color:var(--ink);border-radius:6px;padding:2px 5px;font-size:12px;line-height:1.25;cursor:pointer}
.calev small{display:block;color:var(--muted)}.calev.completed{opacity:.65}.calev.noshow{border-left-color:var(--danger,#c0392b);background:rgba(192,57,43,.12)}.calev.moved{outline:2px dashed var(--warn,#d98a00)}
.calbusy{position:absolute;left:0;right:0;background:repeating-linear-gradient(45deg,#dfe4ee 0 4px,#eef1f6 4px 8px);color:var(--muted);font-size:11px;padding:2px 4px;pointer-events:auto;z-index:0}
.calev{z-index:1}.calnow{position:absolute;left:0;right:0;height:2px;background:#e5484d;z-index:2}
@media(max-width:700px){.calhead,.calbody{grid-template-columns:34px repeat(7,minmax(0,1fr))}.calev{font-size:11px;padding:1px 3px}.calev small{display:none}}

/* AI strip above the message box */
.aibar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 8px;border-radius:10px;background:var(--pop-soft);border:1px solid rgba(255,180,0,.55)}
.aibadge{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:13px;color:#fff;background:linear-gradient(90deg,#0B3B3A,#2F7F78);border-radius:999px;padding:3px 10px}.aibadge svg{width:13px;height:13px}
.aichip{border:1px solid rgba(255,180,0,.7);background:var(--panel);color:var(--ink);border-radius:999px;padding:4px 10px;font-size:13px;cursor:pointer}.aichip:hover:not(:disabled){background:var(--pop-soft)}.aichip:disabled{opacity:.5;cursor:default}
.aibar.busy{opacity:.8}

/* chat button: status strip and the live-chat preview */
.chatstat{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fbfcfd;margin-bottom:16px}
.chatstat.ok{background:var(--accent-soft,#e6f4f1);border-color:transparent}.chatstat .grow{flex:1;min-width:200px;line-height:1.45}
.chatprev .cp-win.chatty{width:230px}.chatprev .cp-head small{display:block;font-weight:400;font-size:11px;opacity:.9}
.chatprev .cb{max-width:85%;padding:6px 9px;border-radius:12px;font-size:12px;line-height:1.35}.chatprev .cb.b{background:#f2f4f7;justify-self:start;border-bottom-left-radius:4px}.chatprev .cb.v{color:#fff;justify-self:end;border-bottom-right-radius:4px}
.chatprev .cp-type{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:5px 6px 5px 10px;color:var(--muted);font-size:12px;margin-top:2px}.chatprev .cp-type span{flex:1}.chatprev .cp-type i{width:18px;height:18px;border-radius:50%;display:block}

.sucard .suacts{width:100%;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* saved segments */
.segbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}.segbar select{flex:1 1 150px;min-width:0}
.segbar .segacts{gap:6px;flex-wrap:wrap}.linkbtn.danger{color:var(--danger)}

/* send later */
.msg.sched .bub{background:transparent;border:1.5px dashed var(--accent);color:inherit}.msg.sched small{color:var(--muted)}
.warnt{color:var(--warn,#B25E09)}

/* Home: the Google steps stack on a phone instead of squeezing the text into a narrow column */
@media (max-width:860px){
  .gsteps li{flex-wrap:wrap}
  .gsteps li .grow{flex:1 1 calc(100% - 40px)}
  .gsteps li>.row{margin-left:32px;justify-content:flex-start!important}
}

/* theme switch */
.themeseg{display:flex;gap:4px;padding:3px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.themeseg button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;background:none;border-radius:9px;padding:7px 8px;font-size:14px;font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap}
.themeseg button svg{width:16px;height:16px}
.themeseg button.on{background:var(--panel);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.themeseg button:not(.on):hover{color:var(--ink)}
.acct-theme{padding:8px 12px 10px;border-top:1px solid var(--line);margin-top:4px}
.acct-theme .lbl{display:block;font-size:13px;color:var(--muted);margin:2px 4px 6px}
.acct-theme .themeseg button span{display:none}.acct-theme .themeseg button{padding:7px 0}

/* Loading: the sparrow hops, its call goes out in two waves, and it blinks now and then */
.sloader{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--muted);font-size:15px;padding:24px 0}
.sloader .sp{width:140px;height:111px;overflow:visible}
.sloader.sm{flex-direction:row;gap:10px;padding:0;font-size:14px}
.sloader.sm .sp{width:52px;height:41px}
.sp-shadow{fill:#0B3B3A;opacity:.12;transform-box:fill-box;transform-origin:center;animation:sp-shadow 1.2s ease-in-out infinite}
.sp-bird{transform-box:fill-box;transform-origin:50% 100%;animation:sp-hop 1.2s ease-in-out infinite}
.sp-eye{transform-box:fill-box;transform-origin:center;animation:sp-blink 3.6s infinite}
.sp-w1,.sp-w2{opacity:0;transform-box:fill-box;transform-origin:0 50%;animation:sp-wave 1.2s ease-out infinite}
.sp-w2{animation-delay:.18s}
@keyframes sp-hop{0%,100%{transform:translateY(0) scale(1.03,.97)}12%{transform:translateY(0) scale(1,1)}45%{transform:translateY(-14%) scale(.98,1.02)}70%{transform:translateY(0) scale(1.04,.96)}82%{transform:translateY(0) scale(1,1)}}
@keyframes sp-shadow{0%,12%,70%,100%{transform:scaleX(1);opacity:.12}45%{transform:scaleX(.7);opacity:.06}}
@keyframes sp-wave{0%,30%{opacity:0;transform:scale(.6)}45%{opacity:1;transform:scale(1)}85%,100%{opacity:0;transform:scale(1.15)}}
@keyframes sp-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@media (prefers-reduced-motion:reduce){.sp-bird,.sp-shadow,.sp-eye{animation:none}.sp-w1,.sp-w2{animation:sp-fade 2.4s ease-in-out infinite}.sp-w2{animation-delay:.4s}}
@keyframes sp-fade{0%,100%{opacity:.25}50%{opacity:1}}

/* The sparrow logo: the light-bodied drawing on the dark frame, the normal one on light cards */
.brand-bird{width:44px;height:34px;display:block;flex:none}
.top-brand .brand-bird{width:48px;height:37px}