:root{
  --bg:#15110D; --surface:#1F1B15; --side:#110E0A; --hover:rgba(245,241,237,.05); --raise:#2A251E;
  --ink:#F5F1ED; --ink-2:rgba(245,241,237,.68); --ink-3:rgba(245,241,237,.46); --ink-4:rgba(245,241,237,.26);
  --line:rgba(245,241,237,.08); --line-2:rgba(245,241,237,.14);
  --ac:255,90,54; --accent:#FF5A36; --accent-soft:rgba(var(--ac),.12); --accent-tint:rgba(var(--ac),.18);
  --green:#145C4B; --good:#B7E6B7; --good-soft:rgba(183,230,183,.10); --good-tint:rgba(183,230,183,.16);
  --est:color-mix(in srgb,var(--accent) 55%,#fff); --est-soft:rgba(var(--ac),.10);
  --warn:#FEC3BD; --warn-soft:rgba(254,195,189,.10);
  --prev:rgba(245,241,237,.34);
  --r:12px; --r-sm:8px; --r-xs:6px;   /* radius scale: xs chips/tags, sm controls, r cards */
  --shadow:inset 0 1px 0 rgba(245,241,237,.05),0 1px 2px rgba(0,0,0,.3);
  --shadow-lg:0 24px 48px -16px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.4);
  --sans:Manrope,ui-sans-serif,system-ui,sans-serif;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow-x:clip;overscroll-behavior-x:none}   /* nothing drags the page sideways: no phone pan, no trackpad swipe sliding back a page */
body{background:var(--bg);color:var(--ink);font:14px/1.45 var(--sans);-webkit-font-smoothing:antialiased;}
body::before{content:"";position:fixed;z-index:-1;pointer-events:none;width:900px;height:900px;right:-300px;top:-420px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--ac),.16),rgba(var(--ac),.04) 55%,transparent)}
body::after{content:"";position:fixed;z-index:-1;pointer-events:none;width:1000px;height:1000px;left:-480px;bottom:-560px;border-radius:50%;background:radial-gradient(closest-side,rgba(20,92,75,.22),transparent 70%)}
h1,h2,.logo{font-family:var(--display)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
svg.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.num{font-family:var(--mono);font-feature-settings:"tnum";letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}

/* ---------- shell ---------- */
.app{position:relative;display:grid;grid-template-columns:244px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;background:color-mix(in srgb,var(--side) 72%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px 10px}
.logo{display:flex;align-items:center;gap:9px;padding:6px 10px 18px;font-weight:600;letter-spacing:-.02em;font-size:18px}
.logo img{width:26px;height:auto}
.logo span{color:var(--accent)}
.nav-l{font-size:11px;font-weight:500;color:var(--ink-3);padding:16px 10px 6px;letter-spacing:.02em}
.nav a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-sm);color:var(--ink-2);font-weight:450;margin-bottom:1px}
.nav a:hover{background:var(--hover);color:var(--ink)}
.nav a.on{background:var(--hover);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.nav a.on svg{color:var(--accent)}
.nav .count{margin-left:auto;font-size:11px;color:var(--ink-3)}
.side-foot{margin-top:auto;position:relative}
.help-card{display:block;margin:0 2px 10px;padding:11px 12px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--accent-soft);font-size:13px}
.help-card b{display:block;font-weight:600}
.help-card small{display:block;color:var(--ink-2);font-size:12px;margin-top:2px}
.help-card:hover{border-color:rgba(var(--ac),.4)}
.switcher{width:100%;display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r);text-align:left}
.switcher:hover{background:var(--hover)}
.av{width:28px;height:28px;border-radius:var(--r-xs);display:grid;place-items:center;font-size:11px;font-weight:600;color:#fff;background:var(--green);flex:none}
.av.round{border-radius:50%;background:#5B5F68}
.switcher b{display:block;font-weight:500;font-size:13px;line-height:1.2}
.switcher small{color:var(--ink-3);font-size:12px}
.switcher .i{margin-left:auto;color:var(--ink-3)}

.top{position:sticky;top:0;z-index:20;height:56px;display:flex;align-items:center;gap:12px;padding:0 28px;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.crumb{display:flex;align-items:center;gap:8px;color:var(--ink-3);white-space:nowrap;min-width:0;overflow:hidden}
.crumb b{color:var(--ink);font-weight:500}
.status{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2);padding:4px 10px 4px 8px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);margin-left:6px;white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px var(--good-tint);flex:none}
.dot.warn{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.top-r{margin-left:auto;display:flex;align-items:center;gap:6px;min-width:0}
.search{display:flex;align-items:center;gap:8px;flex:0 1 240px;min-width:120px;height:32px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink-3)}
.search input{border:0;outline:0;background:none;font:inherit;color:var(--ink);width:100%}
kbd{font:11px var(--mono);color:var(--ink-3);border:1px solid var(--line-2);border-radius:var(--r-xs);padding:0 5px;background:var(--bg)}
.ib{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-sm);color:var(--ink-2);position:relative}
.ib:hover{background:var(--hover);color:var(--ink)}
.ib .pip{position:absolute;top:7px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--warn);border:1.5px solid var(--bg)}
.menu-btn{display:none}

.pop{position:absolute;z-index:40;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:6px;min-width:260px;display:none}
.pop.open{display:block}
.pop h6{font-size:12px;font-weight:500;color:var(--ink-3);padding:6px 8px}
.pop-item{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:var(--r-sm);width:100%;text-align:left}
.pop-item:hover{background:var(--bg)}
.pop-item small{display:block;color:var(--ink-3);font-size:12px}

main{min-width:0}
.page{max-width:1280px;margin:0 auto;padding:28px 28px 64px}
.hd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.hd h1{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.hd p{color:var(--ink-2);margin-top:4px}
.btn{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--shadow);font-weight:500;color:var(--ink);white-space:nowrap}
.btn:hover{border-color:var(--ink-4)}
.btn .i{color:var(--ink-3)}
.btn.dark{background:var(--accent);color:var(--on-accent,var(--bg));border-color:var(--accent)}
.btn.dark .i{color:var(--on-accent,var(--bg))}
.btn.dark:hover{filter:brightness(1.08)}

/* ---------- cards ---------- */
.card{background:linear-gradient(180deg,rgba(245,241,237,.035),rgba(245,241,237,0) 45%),color-mix(in srgb,var(--surface) 86%,transparent);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);min-width:0}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 0}
.card-h h2{font-size:16px;font-weight:600;letter-spacing:-.015em}
.card-h .sub{color:var(--ink-3);font-size:12px}
.card-h a,.link{color:var(--ink-2);font-size:13px;display:inline-flex;align-items:center;gap:4px}
.card-h a:hover,.link:hover{color:var(--ink)}
.grid{display:grid;gap:16px}
.mt{margin-top:16px}

.kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpi{padding:16px 18px 14px;display:flex;flex-direction:column;min-height:176px}
.kpi .lab{display:flex;align-items:center;justify-content:space-between;color:var(--ink-2);font-size:13px}
.kpi .val{font-size:26px;font-weight:500;letter-spacing:-.03em;margin:8px 0 6px;line-height:1.1}
.kpi .val small{font-size:15px;color:var(--ink-3);margin-left:3px;letter-spacing:0}
.delta{display:inline-flex;align-items:center;gap:3px;font:500 12px var(--mono);color:var(--good);background:var(--good-soft);padding:1px 6px;border-radius:var(--r-xs)}
.delta.neg{color:var(--warn);background:var(--warn-soft)}
.kpi .vs{color:var(--ink-3);font-size:12px;margin-left:6px}
.kpi .viz{margin-top:auto;padding-top:14px}

.tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;padding:1px 6px;border-radius:var(--r-xs);white-space:nowrap}
.tag.m{color:var(--good);background:var(--good-soft)}
.tag.e{color:var(--est);background:var(--est-soft)}
.tag.w{color:var(--warn);background:var(--warn-soft)}
.tag.n{color:var(--ink-2);background:var(--hover);box-shadow:inset 0 0 0 1px var(--line)}
.sw{width:8px;height:8px;border-radius:2px;display:inline-block;flex:none}

/* split bar */
.split{display:flex;height:8px;border-radius:3px;overflow:hidden;gap:2px}
.split span{display:block;height:100%}
.legend{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:12px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}

/* compare bars */
.cmp{display:grid;grid-template-columns:28px 1fr auto;gap:6px 8px;align-items:center;font-size:12px;color:var(--ink-3)}
.cmp .bar{height:6px;border-radius:3px;background:var(--line-2)}
.cmp .bar.now{background:var(--accent)}

/* meter */
.meter{display:flex;gap:3px;height:22px;align-items:flex-end;position:relative}
.meter i{flex:1;height:100%;border-radius:2px;background:var(--line-2)}
.meter i.f{background:var(--accent)}
.meter .tgt{position:absolute;top:-4px;bottom:-4px;width:0;border-left:1.5px dashed var(--ink-3)}

/* main impact */
.impact-row{grid-template-columns:minmax(0,1fr) 320px}
.tabs{display:inline-flex;padding:3px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
#impact .card-h{flex-wrap:wrap;row-gap:12px}
.tabs button{padding:4px 10px;border-radius:var(--r-xs);font-size:13px;color:var(--ink-2);font-weight:450;white-space:nowrap}
.tabs button:hover{color:var(--ink)}
.tabs button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow),0 0 0 1px var(--line)}
.chart-stats{display:flex;gap:32px;padding:18px 20px 0;flex-wrap:wrap}
.chart-stats .k{font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.chart-stats .v{font-size:22px;font-weight:500;letter-spacing:-.03em;margin-top:2px}
.chart-stats .v.dim{color:var(--ink-3)}
.line-key{width:14px;height:0;border-top:2px solid var(--accent);display:inline-block}
.line-key.prev{border-top:2px dashed var(--prev)}
.chart{position:relative;padding:8px 12px 12px 4px}
.chart svg{display:block;width:100%;overflow:visible}
.chart text{font:11px var(--mono);fill:var(--ink-3)}
.tip{position:absolute;pointer-events:none;background:var(--raise);border:1px solid var(--line-2);color:var(--ink);border-radius:var(--r-sm);padding:9px 11px;font-size:12px;box-shadow:var(--shadow-lg);min-width:178px;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;z-index:5}
.tip.on{opacity:1;transform:none}
.tip .d{color:rgba(255,255,255,.6);margin-bottom:6px}
.tip .r{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-top:3px}
.tip .r span{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.75)}
.tip .r b{font:500 12px var(--mono)}
.tip .chg{margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.14);color:var(--good);font:500 12px var(--mono)}
.tip .chg.neg{color:var(--warn)}

.net{padding:18px 20px 20px}
.net .big{font-size:32px;font-weight:500;letter-spacing:-.035em;margin:6px 0 2px}
.rows{margin-top:14px;border-top:1px solid var(--line)}
.rows div{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.rows div b{color:var(--ink);font-weight:500}
.roi{display:flex;align-items:baseline;justify-content:space-between;margin-top:14px}
.roi .x{font:500 20px var(--mono);color:var(--good)}
.opp{padding:16px 20px 18px;border-color:rgba(var(--ac),.28);background:radial-gradient(420px circle at 100% 0,rgba(var(--ac),.16),transparent 60%),color-mix(in srgb,var(--surface) 86%,transparent)}
.opp .kick{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--accent)}
.opp p{margin:8px 0 12px;color:var(--ink-2);font-size:13px}
.opp p b{color:var(--ink);font-weight:500}
.opp .fig{display:flex;gap:18px;margin-bottom:14px}
.opp .fig div{font-size:12px;color:var(--ink-3)}
.opp .fig b{display:block;font:500 15px var(--mono);color:var(--ink);letter-spacing:-.01em}

/* workforce */
.agents{grid-template-columns:repeat(2,minmax(0,1fr))}
.agent{padding:16px 18px;text-align:left;width:100%;display:flex;flex-direction:column;gap:14px;transition:border-color .15s,box-shadow .15s}
.agent:hover{border-color:rgba(var(--ac),.35);box-shadow:var(--shadow),0 0 0 1px rgba(var(--ac),.12)}
.agent-h{display:flex;align-items:center;gap:10px}
.agent-ic{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)!important;border:1px solid var(--line);color:var(--ink-2)}
.agent-h b{font-weight:500;display:block;line-height:1.25}
.agent-h small{display:flex;align-items:center;gap:6px;color:var(--ink-3);font-size:12px}
.agent-h small .dot{width:6px;height:6px;box-shadow:0 0 0 2px var(--good-tint)}
.mets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mets div{font-size:12px;color:var(--ink-3);min-width:0}
.mets b{display:block;font:500 15px var(--mono);color:var(--ink);letter-spacing:-.02em;margin-top:2px;white-space:nowrap}
.agent-f{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:12px;color:var(--ink-3);font-size:12px}
.agent-f svg.spark{width:96px;height:22px}

/* table */
.tbl-wrap{overflow-x:auto;padding:4px 0 6px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{font-weight:450;color:var(--ink-3);font-size:12px;text-align:left;padding:10px 20px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px 20px;border-bottom:1px solid var(--line);white-space:nowrap;color:var(--ink-2)}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(245,241,237,.025)}
td.r,th.r{text-align:right}
td b{color:var(--ink);font-weight:500}
td .num{color:var(--ink)}
.state{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.state .dot{width:6px;height:6px;box-shadow:none}
.rate{display:inline-flex;align-items:center;gap:8px}
.rate i{display:block;width:44px;height:4px;border-radius:2px;background:var(--line-2)}
.rate i span{display:block;height:100%;border-radius:2px;background:var(--good)}

.split-row{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
.feed{padding:6px 20px 12px}
.ev{display:grid;grid-template-columns:20px 1fr;gap:10px;padding:10px 0;position:relative}
.ev:not(:last-child)::before{content:"";position:absolute;left:9.5px;top:30px;bottom:-8px;width:1px;background:var(--line)}
.ev-ic{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2);margin-top:1px}
.ev-ic svg.i{width:11px;height:11px;stroke-width:2}
.ev p{font-size:13px;color:var(--ink-2)}
.ev p b{color:var(--ink);font-weight:500}
.ev .meta{display:flex;align-items:center;gap:8px;margin-top:3px;font-size:12px;color:var(--ink-3)}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100vw);background:color-mix(in srgb,var(--surface) 70%,var(--bg));border-left:1px solid var(--line);box-shadow:var(--shadow-lg);z-index:60;transform:translateX(102%);transition:transform .26s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
.drawer.on{transform:none}
/* a closed drawer is hidden, not just slid off the right edge: iPhone Safari lets the page be dragged sideways to anything parked there */
.drawer:not(.on){visibility:hidden;transition:transform .26s cubic-bezier(.2,.8,.2,1),visibility 0s .26s}
.dr-h{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.dr-b{overflow-y:auto;padding:20px;flex:1}
.dr-b section{margin-bottom:26px}
.dr-b h3{font-size:12px;font-weight:500;color:var(--ink-3);margin-bottom:10px;letter-spacing:.01em}
.dr-mets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.dr-mets div{background:color-mix(in srgb,var(--surface) 70%,var(--bg));padding:12px 14px;font-size:12px;color:var(--ink-3)}
.dr-mets b{display:block;font:500 20px var(--mono);color:var(--ink);letter-spacing:-.02em;margin-top:3px}
.chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.chain div{padding:12px;font-size:12px;color:var(--ink-3);border-right:1px solid var(--line);position:relative}
.chain div:last-child{border-right:0;background:var(--good-soft)}
.chain b{display:block;font:500 14px var(--mono);color:var(--ink);margin:4px 0 2px}
.chain em{font-style:normal;font-size:11px;color:var(--ink-3)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--line-2);border-radius:var(--r-sm);font-size:12px;color:var(--ink-2)}
.mono-logo{width:16px;height:16px;border-radius:var(--r-xs);display:grid;place-items:center;font:600 9px var(--sans);color:#fff;box-shadow:inset 0 0 0 1px rgba(245,241,237,.14)}
.bars svg{width:100%;height:96px;display:block}

/* integrations etc */
.ints{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.int{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.int-h{display:flex;align-items:center;gap:10px}
.int-h .mono-logo{width:32px;height:32px;border-radius:var(--r-xs);font-size:13px}
.int-h b{font-weight:500;display:block}
.int-h small{color:var(--ink-3);font-size:12px}
.int-f{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:10px}
.int.add{border:1px dashed var(--line-2);box-shadow:none;align-items:center;justify-content:center;color:var(--ink-3);min-height:132px;background:transparent}
.int.add:hover{color:var(--ink);border-color:var(--ink-4)}
.hbar{display:grid;grid-template-columns:150px 1fr 80px;gap:12px;align-items:center;padding:8px 0;font-size:13px;color:var(--ink-2)}
.hbar .t{height:8px;border-radius:3px;background:transparent;display:flex;overflow:hidden;gap:2px}
.hbar .t span{display:block;height:100%}
.hbar .num{text-align:right;color:var(--ink)}
.setting{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line)}
.setting:last-child{border-bottom:0}
.setting b{font-weight:500;display:block}
.setting small{color:var(--ink-3);font-size:12px}
.field{height:32px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-sm);font:inherit;background:var(--surface);color:var(--ink);min-width:0;color-scheme:dark}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.fbtn{height:28px;padding:0 10px;border:1px solid var(--line-2);border-radius:999px;font-size:12px;color:var(--ink-2);background:var(--surface)}
.fbtn.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:1320px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.agents{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1120px){.status .txt,.crumb .ws{display:none}.status{padding:6px}.impact-row,.split-row{grid-template-columns:minmax(0,1fr)}.impact-side{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  /* a long name or e-mail in the menu could make it wider than the screen, and iPhone then lets the menu be dragged sideways */
  .side>*{max-width:100%;overflow-x:clip}
  .side{overflow-x:hidden;touch-action:pan-y;position:fixed;left:0;top:0;z-index:70;width:264px;transform:translateX(-100%);transition:transform .22s;box-shadow:var(--shadow-lg)}
  .side.open{transform:none}
  .menu-btn{display:grid}
  .search{display:none}
  .top{padding:0 16px}
  .page{padding:20px 16px 48px}
}
@media (max-width:640px){
  .kpis,.agents,.impact-side{grid-template-columns:minmax(0,1fr)!important}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .kpi{min-height:0;padding:14px}
  .kpi .val{font-size:22px}
  .kpi.wide-sm{grid-column:1/-1}
  .status .txt,.crumb .ws,.ib.help{display:none}
  .status{padding:6px}
  .chart-stats{gap:20px}
  .chain{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chain div:nth-child(2){border-right:0}
  .chain div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .hbar{grid-template-columns:100px 1fr 64px}
  .hd h1{font-size:22px}
  #impact .tabs{display:grid;grid-template-columns:1fr 1fr;width:100%}
}
@media (max-width:340px){.kpis{grid-template-columns:minmax(0,1fr)!important}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- admin: new-client form ---------- */
.wiz{border:1px solid var(--line-2);border-radius:var(--r);background:color-mix(in srgb,var(--surface) 70%,var(--bg));color:var(--ink);padding:0;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;box-shadow:var(--shadow-lg)}
.wiz::backdrop{background:color-mix(in srgb,var(--bg) 60%,transparent)}
.wiz-h{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line)}
.steps{display:flex;gap:6px;padding:14px 20px 0}
.steps i{flex:1;height:3px;border-radius:2px;background:var(--line-2)}
.steps i.on{background:var(--accent)}
.wiz fieldset{border:0;padding:16px 20px;display:grid;gap:14px;min-width:0}
.wiz fieldset[hidden]{display:none}
.wiz legend{font:600 18px var(--display);letter-spacing:-.02em;padding:0;margin-bottom:6px;float:left;width:100%}
.fl{display:grid;gap:6px;font-size:13px;color:var(--ink-2);min-width:0}
.fl small{color:var(--ink-3);font-size:12px}
.fl .field,.team-row .field{width:100%;height:38px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.team-row{display:grid;grid-template-columns:1fr 1.3fr 1fr auto;gap:8px;align-items:center}
.wiz-f{display:flex;justify-content:space-between;gap:8px;padding:14px 20px;border-top:1px solid var(--line)}
.wiz-f [data-next]{margin-left:auto}
.field:focus{outline:2px solid var(--accent);outline-offset:1px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);background:var(--raise);border:1px solid var(--line-2);color:var(--ink);padding:10px 14px;border-radius:var(--r-sm);font-size:13px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:100}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:640px){.two{grid-template-columns:1fr}.team-row{grid-template-columns:1fr auto}.team-row [data-k=email],.team-row [data-k=role]{grid-column:1}}

/* ---------- login ---------- */
[hidden]{display:none!important}
.auth{min-height:100vh;display:grid;place-items:center;padding:16px}
.auth-card{width:min(400px,100%);padding:28px}
.auth-card form,.auth-card>div[id]{display:grid;gap:14px}
.auth-card h1{font:600 24px var(--display);letter-spacing:-.02em}
.auth-card p{color:var(--ink-2);font-size:13px;margin-top:-8px}
.auth-card .btn{justify-content:center;height:38px}

/* ---------- admin overview ---------- */
tr.row-link{cursor:pointer}
tr.row-link:hover td{background:rgba(var(--ac),.05)}
.staff-bar{display:flex;align-items:center;gap:10px;margin-left:6px}
.staff-bar .btn{height:30px}
td .ib{display:inline-grid;vertical-align:middle}
td .btn{vertical-align:middle}

/* view-only staff (role member): the database refuses changes anyway; hide the buttons */
.ro [data-new],.ro [data-edit],.ro [data-del],.ro [data-access],.ro [data-inv-new],.ro [data-inv-edit],.ro [data-inv-void],.ro [data-sub]{display:none!important}

/* ---------- password show/hide ---------- */
.pw-wrap{position:relative;display:block}
.pw-wrap .field{width:100%;padding-right:42px}
.pw-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:grid;place-items:center;color:var(--ink-3);border-radius:var(--r-xs)}
.pw-eye:hover{color:var(--ink);background:var(--hover)}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes shimmer{to{background-position:-200% 0}}
.card.rise{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s cubic-bezier(.4,0,.2,1) .15s forwards}
.fade{animation:fadein .9s ease .35s both}
.auth-card{animation:rise .55s cubic-bezier(.2,.7,.2,1) both}
.card{transition:border-color .2s,transform .2s,box-shadow .2s}
.kpi:hover,.int:hover{transform:translateY(-2px);border-color:rgba(var(--ac),.28)}
.btn{transition:transform .1s,background .15s,border-color .15s,color .15s}
.btn:active,.ib:active{transform:scale(.96)}
.nav a{transition:background .15s,color .15s}
tr.sk td{padding:16px 20px}
tr.sk i{display:block;height:14px;border-radius:var(--r-xs);background:linear-gradient(90deg,var(--line) 25%,var(--line-2) 50%,var(--line) 75%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}.draw{stroke-dasharray:none;stroke-dashoffset:0}}

/* ---------- authenticator code: 6 boxes, shake on error, green + check on success ---------- */
.otp{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.otp input{width:100%;aspect-ratio:5/6;max-height:60px;text-align:center;font:500 24px var(--mono);color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);outline:none;transition:border-color .15s,box-shadow .15s,transform .15s,background .3s}
.otp input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);transform:translateY(-1px)}
.otp input.filled{border-color:rgba(var(--ac),.45)}
.otp.shake{animation:shake .4s cubic-bezier(.36,.07,.19,.97)}
.otp.shake input{border-color:var(--warn)}
.otp.ok input{border-color:var(--good);background:var(--good-soft);color:var(--good);animation:pop .35s cubic-bezier(.2,.7,.2,1) both}
.otp.ok input:nth-child(2){animation-delay:.05s}.otp.ok input:nth-child(3){animation-delay:.1s}.otp.ok input:nth-child(4){animation-delay:.15s}.otp.ok input:nth-child(5){animation-delay:.2s}.otp.ok input:nth-child(6){animation-delay:.25s}
.otp-check{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--good);font-weight:600;animation:rise .4s .3s both}
.otp-check svg{width:34px;height:34px;fill:none;stroke:var(--good);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.otp-check circle{stroke-dasharray:145;stroke-dashoffset:145;animation:stroke .5s .35s ease forwards}
.otp-check path{stroke-dasharray:40;stroke-dashoffset:40;animation:stroke .35s .75s ease forwards}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes stroke{to{stroke-dashoffset:0}}

/* ---------- welcome screen after login ---------- */
.welcome{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px;cursor:pointer;
  background:radial-gradient(600px circle at 50% 42%,rgba(var(--ac),.16),transparent 60%),var(--bg);animation:fadein .35s ease both}
.welcome.out{animation:fadeout .45s ease forwards}
.welcome-in{text-align:center;max-width:560px}
.welcome-mark{width:84px;height:84px;margin:0 auto 26px;border-radius:24px;display:grid;place-items:center;position:relative;
  background:rgba(var(--ac),.08);border:1px solid rgba(var(--ac),.3);animation:markin .7s cubic-bezier(.2,.7,.2,1) both}
.welcome-mark::after{content:"";position:absolute;inset:-10px;border-radius:30px;border:1px solid rgba(var(--ac),.35);animation:ring 1.8s ease-out .4s infinite}
.welcome-mark img{width:46px;height:auto}
.welcome h1{font:600 clamp(30px,5vw,44px)/1.1 var(--display);letter-spacing:-.03em;animation:rise .6s .25s both}
.welcome p{color:var(--ink-2);margin-top:12px;font-size:15px;animation:rise .6s .45s both}
.welcome-bar{display:block;height:2px;width:160px;margin:28px auto 0;border-radius:2px;background:var(--line-2);overflow:hidden;position:relative}
.welcome-bar::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left;animation:bar 2.4s linear both}
@keyframes fadeout{to{opacity:0;transform:scale(1.02)}}
@keyframes markin{from{opacity:0;transform:scale(.7) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes ring{0%{opacity:.8;transform:scale(.9)}100%{opacity:0;transform:scale(1.35)}}
@keyframes bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.otp-check circle,.otp-check path{stroke-dashoffset:0}}

/* ---------- smoother auth: digits drop in, panels slide, card height eases ---------- */
.otp input.drop{animation:drop .34s cubic-bezier(.2,.8,.25,1.25) both}
@keyframes drop{0%{transform:translateY(-12px) scale(.82);opacity:.15}60%{transform:translateY(2px) scale(1.05);opacity:1}100%{transform:none;opacity:1}}
.auth-card{overflow:hidden}
.auth-card .leave{animation:leave .17s ease forwards}
.auth-card .enter{animation:enter .32s cubic-bezier(.2,.7,.2,1) both}
@keyframes leave{to{opacity:0;transform:translateX(-18px)}}
@keyframes enter{from{opacity:0;transform:translateX(18px)}}
.auth.auth-out{animation:fadeout .32s ease forwards}
.btn.loading{opacity:.8;cursor:progress}
.btn.loading::after{content:"";width:12px;height:12px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- billing: since go-live, value next to cost ---------- */
.since{padding:20px}
.since-top{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end;justify-content:space-between;margin-top:14px}
.since .big{font-size:40px;font-weight:500;letter-spacing:-.035em;line-height:1.05}
.since .lbl{color:var(--ink-3);font-size:13px;margin-top:4px}
.roi-badge{font-size:15px;font-weight:500;color:var(--good);background:var(--good-soft);border:1px solid rgba(183,230,183,.25);padding:7px 12px;border-radius:999px;animation:rise .4s 1.25s both,pop .5s 1.45s}
.since-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.since-stats div{font-size:12px;color:var(--ink-3)}
.since-stats b{display:block;font-size:18px;font-weight:500;color:var(--ink);margin-top:3px}
.vsb{display:grid;grid-template-columns:auto 1fr auto;gap:10px 14px;align-items:center;margin-top:20px;font-size:13px;color:var(--ink-2)}
.vsb .t{height:10px;border-radius:var(--r-xs);background:var(--line);overflow:hidden}
.vsb .t i{display:block;height:100%;width:100%;border-radius:var(--r-xs);transform-origin:left;animation:bar .9s cubic-bezier(.2,.7,.2,1) .25s both}
.vsb .t i.cost{background:var(--ink-3)}
.vsb .t i.val{background:var(--good);animation-delay:.6s}
.mbars{display:flex;align-items:flex-end;gap:10px;margin-top:24px}
.mbars>div{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--ink-3);white-space:nowrap}
.mbars i{display:block;width:100%;max-width:56px;border-radius:var(--r-xs) 6px 2px 2px;background:var(--accent);transform-origin:bottom;animation:grow .7s cubic-bezier(.2,.7,.2,1) both}
.mbars .now i{opacity:.55;animation:grow .7s cubic-bezier(.2,.7,.2,1) both,pulse 2s ease-in-out 1.4s infinite}
.mbars .now{color:var(--ink-2)}
.since .note{color:var(--ink-3);font-size:12px;margin-top:16px}
@keyframes grow{from{transform:scaleY(0)}}
@keyframes pulse{50%{opacity:.3}}
@media (max-width:640px){.since-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.mbars>div:nth-last-child(n+7){display:none}.since .big{font-size:32px}}

/* ---------- sign-ups: confirm as dossier ---------- */
.ev.su{grid-template-columns:1fr auto;gap:12px;align-items:center}
.su-act{display:flex;align-items:center;gap:10px}
.su-act .link{font-size:12px;color:var(--ink-3)}
.ev.su.just{animation:flash 1.4s ease}
.ev.su.just .tag{animation:pop .45s cubic-bezier(.2,.7,.2,1)}
@keyframes flash{0%,30%{background:var(--good-soft)}}
@media (max-width:640px){.ev.su{grid-template-columns:1fr}}

/* ---------- polish: gliding nav, breathing live dots ---------- */
.card{position:relative}
.nav{position:relative}
.nav a{position:relative;z-index:1}
.nav a.on{background:none;box-shadow:none}
.nav-pill{position:absolute;left:0;right:0;border-radius:var(--r-sm);background:var(--hover);box-shadow:inset 0 0 0 1px var(--line);pointer-events:none;transition:top .34s cubic-bezier(.2,.7,.2,1)}
.nav-pill::before{content:"";position:absolute;left:-10px;top:9px;bottom:9px;width:2px;border-radius:0 2px 2px 0;background:var(--accent)}
.status .dot,.state .dot,.agent-h .dot{animation:breathe 2.6s ease-out infinite}
@keyframes breathe{0%{box-shadow:0 0 0 0 rgba(183,230,183,.45)}70%,100%{box-shadow:0 0 0 6px rgba(183,230,183,0)}}
.end-ring{animation:endring 2.4s ease-out 1.4s infinite;transform-box:fill-box;transform-origin:center;opacity:0}
@keyframes endring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
.end-pt{animation:fadein .4s ease 1.15s both}
/* admin: calls strip in the KPI, arrow that nudges on row hover */
.strip{display:flex;align-items:flex-end;gap:2px;height:26px;margin-top:12px}
.strip i{flex:1;border-radius:1.5px;background:rgba(var(--ac),.3);transform-origin:bottom;animation:grow .5s cubic-bezier(.2,.7,.2,1) both}
.strip i.now{background:var(--accent)}
.row-go{color:var(--ink-3);transition:transform .2s,color .2s}
tr.row-link:hover .row-go{color:var(--accent);transform:translateX(3px)}
/* net result fills the height of the chart beside it, return figure at the bottom */
.impact-side .net{display:flex;flex-direction:column}
.impact-side .net .roi{margin-top:auto;padding-top:14px}
.mix{margin-top:16px}
.mix .split span{transform-origin:left;animation:bar .8s cubic-bezier(.2,.7,.2,1) .3s both}
.mix .split span+span{animation-delay:.5s}
table.tight th,table.tight td{padding-left:12px;padding-right:12px}
table.tight td.r .ib{opacity:.55;transition:opacity .2s,background .15s,color .15s}
table.tight tr:hover td.r .ib,table.tight td.r .ib:focus-visible{opacity:1}
@media (max-width:1360px){table.tight th:nth-child(6),table.tight td:nth-child(6){display:none}}

/* ---------- invoices ---------- */
.inv-due{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin:14px 20px 4px;padding:14px 16px;border:1px solid rgba(var(--ac),.3);border-radius:var(--r-sm);background:var(--accent-soft)}
.inv-due.late{border-color:rgba(254,195,189,.35);background:var(--warn-soft)}
.inv-due small{display:block;color:var(--ink-2);font-size:12px}
.inv-due b{display:block;font-size:24px;font-weight:500;letter-spacing:-.03em;margin:2px 0}
.inv-due span{color:var(--ink-3);font-size:13px}
.inv-f{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:4px 20px 16px;color:var(--ink-3);font-size:13px}
.inv-f span{display:inline-flex;align-items:center;gap:7px}
.sent{font-size:13px;color:var(--good);background:var(--good-soft);border:1px solid rgba(183,230,183,.25);border-radius:var(--r-sm);padding:10px 12px;animation:rise .35s cubic-bezier(.2,.7,.2,1) both}
.auth-card p.sent{margin-top:0;color:var(--good)}
button.link{padding:0;font-size:13px}
button.link:hover{text-decoration:underline}

/* ---------- sweep: honest controls, notes, phone layout ---------- */
.period{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink-2);font-size:13px;white-space:nowrap}
.period .i{color:var(--ink-3)}
.card-note{padding:12px 20px 16px;color:var(--ink-3);font-size:13px;border-top:1px solid var(--line)}
.setting-v{color:var(--ink);font-weight:500;text-align:right;white-space:nowrap}
#pop-me .pop-item{align-items:center;color:var(--ink-2)}
#pop-me .pop-item:hover{color:var(--ink)}
@media (max-width:640px){
  .staff-back .txt{display:none}
  .staff-back{padding:0 9px}
  .setting{flex-wrap:wrap}
  .setting-v{text-align:left}
  .kpi .viz{padding-top:10px}
}
/* period picker */
.period-dates{color:var(--ink-3);font-weight:400}
.period-pop{right:0;top:38px;min-width:230px}
.period-pop .pop-item{align-items:center;justify-content:space-between}
.period-pop .pop-item[aria-checked=true]{color:var(--ink);background:var(--hover)}
.period-pop .pop-item .i{color:var(--accent)}
@media (max-width:640px){.period-pop{right:auto;left:0}.period-dates{display:none}}
/* client team page */
.team-person{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line)}
.team-person b{display:block;font-weight:500;overflow-wrap:anywhere}
.team-person small{display:block;color:var(--ink-3);font-size:12px;overflow-wrap:anywhere}
.team-role{color:var(--ink-2);font-size:13px;white-space:nowrap}
.team-invite{display:grid;gap:10px;padding:16px 20px 18px}
.team-invite b{font-size:13px;font-weight:600}
.team-invite small{color:var(--ink-3);font-size:12px}
.team-invite .team-row{display:grid;grid-template-columns:minmax(0,1fr) 160px auto;gap:8px}
@media (max-width:640px){.team-invite .team-row{grid-template-columns:1fr}.team-person{grid-template-columns:auto minmax(0,1fr) auto}.team-role{grid-column:2;grid-row:2}}
.period-pop{min-width:260px}
.period-custom{display:grid;gap:8px;padding:8px;margin-top:4px;border-top:1px solid var(--line)}
.period-custom h6{display:flex;align-items:center;gap:6px}
.period-custom h6 .i{color:var(--accent);width:14px;height:14px}
.cal-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cal-h b{font:600 14px var(--display);text-transform:capitalize}
.cal-h .ib:disabled{opacity:.3;cursor:default}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px 0;margin-top:6px}
.cal-dow{font-size:11px;color:var(--ink-3);text-align:center;padding:4px 0}
.cal-d{height:32px;font:500 13px var(--mono);color:var(--ink);border-radius:var(--r-sm);transition:background .12s,color .12s}
.cal-d:hover:not(:disabled):not(.end){background:var(--hover)}
.cal-d:disabled{color:var(--ink-4);cursor:default}
.cal-d.mid{background:var(--accent-soft);border-radius:0;color:var(--ink)}
.cal-d.end{background:var(--accent);color:var(--on-accent,var(--bg));font-weight:600}
.cal-d.today:not(.end){box-shadow:inset 0 0 0 1px var(--line-2)}
.cal-sum{font-size:12px;color:var(--ink-2);min-height:16px;margin-top:4px}
.period-err{color:var(--warn);font-size:12px}
.period-err:empty{display:none}
.period-custom .btn{justify-content:center}

/* ---------- profile ---------- */
.av-wrap{position:relative;overflow:hidden}
.av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.profile fieldset{gap:14px}
.pf-photo{display:flex;gap:16px;align-items:center}
.pf-photo small,.pf-hint{color:var(--ink-3);font-size:12px}
.pf-hint{margin-top:-8px}
.pf-av{width:64px;height:64px;font-size:20px;flex:none}
.pf-av.loading::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45) center/22px no-repeat;animation:fadein .2s both}
.pf-btns{display:flex;gap:8px;flex-wrap:wrap}
.pf-btns label.btn{cursor:pointer}
.pf-h{font:600 14px var(--display);margin-top:6px;padding-top:14px;border-top:1px solid var(--line)}
.pf-check{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2);cursor:pointer}
.pf-check input{width:16px;height:16px;accent-color:var(--accent)}
.pf-err{color:var(--warn);font-size:13px}
.pf-err:empty{display:none}
.me-row{border-bottom:1px solid var(--line);border-radius:0;margin-bottom:6px;padding-bottom:10px}
.pf-confirm{position:absolute;inset:0;display:grid;place-items:center;padding:20px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fadein .15s both;z-index:2}
.pf-confirm-box{width:min(360px,100%);display:grid;gap:8px;padding:20px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-lg);animation:rise .25s cubic-bezier(.2,.7,.2,1) both}
.pf-confirm-box b{font:600 16px var(--display)}
.pf-confirm-box p{color:var(--ink-2);font-size:13px}
.pf-confirm-box .pf-btns{justify-content:flex-end;margin-top:8px}
.btn:disabled{opacity:.45;cursor:default}

/* ---------- admin team page ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.person{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:18px}
.person b{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;overflow-wrap:anywhere}
.person small{display:block;color:var(--ink-3);font-size:13px;overflow-wrap:anywhere;margin-top:2px}
.person-av{width:56px;height:56px;font-size:18px}
.person-f{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.person-f small{margin:0}
.person-f .ib{margin-left:auto}
.invite-card .team-invite{padding:18px 20px}

/* ---------- branded dropdowns ---------- */
.sel{position:relative;min-width:0}
.sel-native{position:absolute;inset:0;opacity:0;pointer-events:none}
.sel-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}
.sel-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-btn .i{color:var(--ink-3);transition:transform .2s}
.sel.open .sel-btn{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.sel.open .sel-btn .i{transform:rotate(180deg)}
.sel-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;min-width:max-content;padding:5px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);animation:selin .14s ease both}
.sel.up .sel-list{top:auto;bottom:calc(100% + 6px)}
.sel-opt{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 10px;border-radius:var(--r-xs);font-size:13px;color:var(--ink-2);cursor:pointer}
.sel-opt.active{background:var(--hover);color:var(--ink)}
.sel-opt[aria-selected=true]{color:var(--ink)}
.sel-opt .i{color:var(--accent);width:15px;height:15px}
@keyframes selin{from{opacity:0;transform:translateY(-4px)}}
.sel.up .sel-list{animation-name:selup}
@keyframes selup{from{opacity:0;transform:translateY(4px)}}
/* callbacks: handled button */
.cb-act{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end}
.cb-act .btn{height:28px;padding:0 10px;font-size:13px}
.cb-act .btn .i{color:var(--good)}
.cb-act .link{font-size:12px;color:var(--ink-3)}
tr.cb-leave td{transition:opacity .25s,transform .25s;opacity:0;transform:translateX(12px)}

/* ---------- one conversation: drawer with recording and transcript ---------- */
.ev-open{cursor:pointer;border-radius:var(--r-sm);margin:0 -8px;padding-left:8px;padding-right:8px;transition:background .15s}
.ev-open:hover,.ev-open:focus-visible{background:var(--hover)}
.ev-open:not(:last-child)::before{left:17.5px}
.conv-sum{font-size:15px;line-height:1.6;color:var(--ink)}
.player{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface)}
.pl-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent,var(--bg));transition:transform .12s,opacity .2s}
.pl-btn:active{transform:scale(.94)}
.pl-btn:disabled{opacity:.35;cursor:default}
.pl-btn.loading svg{opacity:0}
.pl-btn.loading{position:relative}
.pl-btn.loading::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
.player input[type=range]{width:100%;accent-color:var(--accent);height:4px}
.pl-time{font-size:12px;color:var(--ink-2);white-space:nowrap}
.pl-speed{font-size:12px;color:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r-xs);padding:3px 7px}
.pl-speed:hover{color:var(--ink)}
.pl-msg{font-size:13px;color:var(--ink-3);margin-top:8px}
.pl-msg:empty{display:none}
.transcript{display:grid;gap:10px}
.tl{max-width:88%;padding:9px 12px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);transition:border-color .2s,background .2s}
.tl.beller{justify-self:end;background:var(--accent-soft);border-color:rgba(var(--ac),.2)}
.tl[role=button]{cursor:pointer}
.tl[role=button]:hover{border-color:var(--line-2)}
.tl.now{border-color:var(--accent)}
.tl-who{display:flex;gap:8px;font-size:11px;color:var(--ink-3);margin-bottom:3px}
.tl p{font-size:13px;line-height:1.5;color:var(--ink)}
.conv-note{font-size:12px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:14px}
.hs-sum{font-size:14px;line-height:1.6;color:var(--ink-2);padding:12px 14px;border-left:2px solid var(--accent);background:var(--surface);border-radius:0 var(--r-sm) var(--r-sm) 0}
/* temporary password (admin access dialog) */
.tmp-pw{display:grid;gap:8px;padding:12px;margin:6px 0;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface)}
.tmp-pw b{font-size:13px}
.tmp-pw small,.tmp-done small{color:var(--ink-3);font-size:12px;display:block}
.tmp-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tmp-row .field{flex:1;min-width:180px}
.tmp-code{font-size:15px;color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-xs);padding:6px 10px;letter-spacing:.02em}
.tmp-done{margin:6px 0}

/* aanmeldingen */
.in-row{cursor:pointer;transition:background .15s}
.in-row:hover,.in-row:focus-visible{background:var(--hover);outline:0}
.in-row.just{animation:flash 1.4s ease}
.in-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--est);margin-right:8px;vertical-align:1px;box-shadow:0 0 0 3px var(--est-soft)}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);margin-right:6px;vertical-align:1px;animation:livepulse 2s ease-in-out infinite}
@keyframes livepulse{50%{box-shadow:0 0 0 4px var(--good-soft)}}
.rows div.long{display:block}
.rows div.long p{color:var(--ink);margin-top:4px;white-space:pre-wrap;line-height:1.55}
.rows div a{color:inherit}
@media (prefers-reduced-motion:reduce){.live-dot,.in-row.just{animation:none}}

/* admin: settings page of one client */
.cp-back{display:inline-block;color:var(--ink-3);font-size:13px;text-decoration:none;margin-bottom:12px;transition:color .15s}
.cp-back:hover{color:var(--ink)}
.cp-av{width:42px;height:42px;font-size:14px;flex:none}
.cp{display:grid;grid-template-columns:190px minmax(0,1fr);gap:28px;align-items:start}
.cp-tabs{display:grid;gap:2px;position:sticky;top:76px}
.cp-tabs a{padding:9px 12px;border-radius:var(--r-sm);color:var(--ink-2);font-size:14px;text-decoration:none;transition:background .15s,color .15s}
.cp-tabs a:hover{color:var(--ink);background:var(--hover)}
.cp-tabs a.on{color:var(--ink);background:var(--hover);box-shadow:inset 2px 0 0 var(--accent)}
.cp-tabs a.danger{color:var(--warn);margin-top:14px}
.cp-body{padding:0;max-width:720px;overflow:hidden}
.cp-body .wiz-h,.cp-body .steps{display:none}
.cp-body fieldset{border:0;padding:26px 26px 10px;display:grid;gap:16px;min-width:0}
.cp-body fieldset[hidden]{display:none}
.cp-body legend,.cp-h{font:600 19px var(--display);letter-spacing:-.02em;padding:0;float:left;width:100%}
.fs-sub{color:var(--ink-3);font-size:13px;margin-top:-6px;line-height:1.5}
.cp-body .wiz-f{padding:14px 26px;border-top:1px solid var(--line);align-items:center;margin-top:10px}
.cp-body #wiz-err{padding:0 26px}
.cp-saved{font-size:13px;color:var(--ink-3)}
.cp-acc{padding:26px;display:grid;gap:14px}
.cp-acc[hidden]{display:none}
.blk{display:grid;gap:10px;padding:20px 0 6px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.blk-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.blk-h b{color:var(--ink);font-weight:600;font-size:15px}
.ik-new{display:grid;gap:12px;padding:16px;border:1px dashed var(--line-2);border-radius:var(--r);margin-top:4px}
.ik-new .btn{justify-self:start}
.ik-new-h{color:var(--ink);font-weight:500;font-size:13px}
.ik-new[hidden]{display:none}
.ik-row{display:grid;gap:10px;font-size:13px;padding:12px 0 14px;border-bottom:1px solid var(--line)}
.ik-top{display:flex;align-items:center;gap:10px}
.ik-top b{font-weight:500;color:var(--ink)}
.ik-top span{color:var(--ink-3)}
.ik-top .link{margin-left:auto}
.ik-mail{display:flex;gap:8px}
.ik-mail .field{flex:1;min-width:0}
.ik-warn{color:var(--warn)}
.btn.danger{color:var(--warn);border-color:var(--warn);justify-self:start}
.btn.danger:hover{background:var(--warn-soft)}
@media (max-width:860px){
  .cp{grid-template-columns:1fr;gap:14px}
  .cp-tabs{position:static;display:flex;overflow-x:auto;gap:4px;scrollbar-width:none;margin:0 -4px;padding:0 4px}
  .cp-tabs::-webkit-scrollbar{display:none}
  .cp-tabs a{white-space:nowrap}
  .cp-tabs a.danger{margin-top:0}
  .cp-tabs a.on{box-shadow:inset 0 -2px 0 var(--accent)}
  .cp-body fieldset,.cp-acc{padding:20px 18px 8px}
  .cp-body .wiz-f{padding:12px 18px}
}
.auth-card .logo{user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.logo.secret-go img{animation:markin .3s cubic-bezier(.2,.7,.2,1) both}

/* ---------- hidden agency entrance: the HQ portal ---------- */
@view-transition{navigation:none}
.auth-card.secret-go{animation:hqsink .7s cubic-bezier(.6,0,.4,1) both}
@keyframes hqsink{to{transform:scale(.9);opacity:0;filter:blur(10px)}}
.auth-card.hq-wait{opacity:0}
.auth-card.secret-in{animation:hqcard .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes hqcard{from{opacity:0;transform:scale(1.04);filter:blur(8px)}}
.auth-card.secret-in form > *{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.auth-card.secret-in form > :nth-child(1){animation-delay:.15s}.auth-card.secret-in form > :nth-child(2){animation-delay:.21s}
.auth-card.secret-in form > :nth-child(3){animation-delay:.27s}.auth-card.secret-in form > :nth-child(4){animation-delay:.33s}
.auth-card.secret-in form > :nth-child(5){animation-delay:.39s}.auth-card.secret-in form > :nth-child(n+6){animation-delay:.45s}
.hq-portal{position:fixed;inset:0;z-index:500;pointer-events:none;overflow:hidden;
  background:radial-gradient(900px circle at 50% 42%,rgba(var(--ac),.26),transparent 62%),radial-gradient(1400px circle at 50% 120%,rgba(var(--ac),.18),transparent 60%),#0B0806;
  clip-path:circle(0px at var(--x) var(--y));transition:clip-path 1.05s cubic-bezier(.75,0,.15,1)}
.hq-portal.open{clip-path:circle(160vmax at var(--x) var(--y))}
.hq-portal.still{transition:none}
.hq-grid{position:absolute;left:-50%;right:-50%;top:38%;bottom:-40%;
  background-image:linear-gradient(rgba(var(--ac),.22) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ac),.22) 1px,transparent 1px);background-size:64px 64px;
  transform:perspective(500px) rotateX(64deg);transform-origin:top;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 35%,#000 60%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 35%,#000 60%,transparent);
  animation:hqgrid 1.6s linear infinite}
@keyframes hqgrid{to{background-position:0 64px}}
.hq-portal canvas{position:absolute;inset:0;width:100%;height:100%}
.hq-mark{position:absolute;left:50%;top:42%;width:132px;height:auto;translate:-50% -50%;filter:drop-shadow(0 0 32px rgba(var(--ac),.75)) drop-shadow(0 0 80px rgba(var(--ac),.35));will-change:transform}
.hq-ring{position:absolute;left:var(--x);top:var(--y);width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:2px solid rgba(var(--ac),.9);opacity:0}
.hq-portal.open:not(.still) .hq-ring{animation:hqring 1.1s cubic-bezier(.2,.7,.2,1) both}
.hq-portal.burst .hq-ring{animation:hqring 1s cubic-bezier(.2,.7,.2,1) both;left:50%;top:42%}
@keyframes hqring{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(28);border-width:.5px}}
.hq-word{position:absolute;left:0;right:0;top:calc(42% + 96px);text-align:center;font:600 clamp(18px,3vw,26px) var(--display);color:var(--ink);letter-spacing:1.4em;opacity:0;filter:blur(8px);
  transition:opacity .55s ease,letter-spacing .9s cubic-bezier(.2,.7,.2,1),filter .6s ease}
.hq-word span{color:var(--accent)}
.hq-portal.word .hq-word{opacity:1;letter-spacing:.32em;filter:none}
.hq-tag{justify-self:start;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border:1px solid rgba(var(--ac),.25);padding:3px 8px;border-radius:999px;margin-bottom:-4px}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- messages (client and admin) ---------- */
.inbox{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:16px;align-items:start}
.inbox-list{padding:6px}
.inbox-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;width:100%;text-align:left;padding:11px 12px;border-radius:var(--r-sm);transition:background .15s}
.inbox-item:hover,.inbox-item.on{background:var(--hover)}
.inbox-item.on{box-shadow:inset 0 0 0 1px var(--line-2)}
.inbox-item b{display:block;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-item small{display:block;color:var(--ink-3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-item time{font-size:12px;color:var(--ink-3);white-space:nowrap}
.inbox-item .unread{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);margin:6px 2px 0}
.inbox-item .read{width:8px;margin:6px 2px 0}
.thread{display:flex;flex-direction:column;min-height:440px}
.thread-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--line)}
.thread-h h2{font-size:16px;font-weight:600}
.thread-h .sub{color:var(--ink-3);font-size:12px;margin-top:2px}
.thread-msgs{flex:1;display:flex;flex-direction:column;gap:12px;padding:18px 20px;max-height:56vh;overflow-y:auto}
.msg{max-width:78%;display:grid;gap:4px}
.msg.mine{align-self:flex-end;justify-items:end}
.msg-meta{font-size:12px;color:var(--ink-3)}
.msg-body{padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.55;background:var(--surface);border:1px solid var(--line);overflow-wrap:anywhere}
.msg.mine .msg-body{background:var(--accent-soft);border-color:rgba(var(--ac),.25);border-bottom-right-radius:4px}
.msg.theirs .msg-body{border-bottom-left-radius:4px}
.msg.new{animation:rise .35s cubic-bezier(.2,.7,.2,1) both}
.msg-empty{color:var(--ink-3);font-size:13px}
.reply{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;padding:14px 20px 18px;border-top:1px solid var(--line)}
.reply textarea,.compose textarea{width:100%;min-height:44px;max-height:200px;padding:10px 12px;resize:vertical;font:inherit;line-height:1.5;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);color-scheme:dark}
.reply textarea:focus,.compose textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.reply small{grid-column:1/-1;color:var(--ink-3);font-size:12px}
.compose{display:grid;gap:12px;padding:18px 20px}
.compose textarea{min-height:120px}
.compose .two{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:10px}
.thread-empty{display:grid;place-items:center;min-height:440px;text-align:center;color:var(--ink-3);font-size:13px;padding:20px}
@media (max-width:900px){.inbox{grid-template-columns:minmax(0,1fr)}.inbox.reading .inbox-list-card{display:none}.inbox:not(.reading) .thread-card{display:none}.compose .two{grid-template-columns:1fr}}
.thread-back{display:none;font-size:13px;color:var(--ink-2)}
@media (max-width:900px){.thread-back{display:inline-flex}}

/* ---------- admin overview ---------- */
.ov-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1320px){.ov-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ov-row{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
@media (max-width:1120px){.ov-row{grid-template-columns:minmax(0,1fr)}}
.ov-bars{display:flex;align-items:flex-end;gap:8px;padding:28px 20px 18px;min-height:230px}
.ov-bars>div{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--ink-3);white-space:nowrap}
.ov-bars>div>span:first-child{font-size:11px;color:var(--ink-2)}
.ov-stack{width:100%;max-width:44px;display:flex;flex-direction:column-reverse;border-radius:var(--r-xs) 5px 2px 2px;overflow:hidden;transform-origin:bottom;animation:grow .7s cubic-bezier(.2,.7,.2,1) both;background:var(--line)}
.ov-stack i{display:block;width:100%}
.ov-stack i.r{background:var(--accent)}
.ov-stack i.s{background:rgba(var(--ac),.4)}
.ov-bars .now{color:var(--ink)}
.ov-bars .now .ov-stack{box-shadow:0 0 0 1px rgba(var(--ac),.5)}
@media (max-width:640px){.ov-bars>div:nth-child(-n+6){display:none}.ov-bars>div>span:first-child{font-size:11px}}
.ov-todo{display:grid;padding:8px 10px 12px}
.todo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border-radius:var(--r-sm);font-size:13px;color:var(--ink-2);transition:background .15s}
.todo:hover{background:var(--hover);color:var(--ink)}
.todo b{color:var(--ink);font-weight:600}
.todo small{color:var(--ink-3);font-size:12px;white-space:nowrap}
.todo-ic{width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--hover);color:var(--ink-2)}
.todo.msg .todo-ic{background:var(--accent-soft);color:var(--accent)}
.todo.late .todo-ic{background:var(--warn-soft);color:var(--warn)}
.todo-none{display:flex;align-items:center;gap:8px;padding:14px 10px;color:var(--good);font-size:13px}
#ov-table tfoot td{border-top:1px solid var(--line-2);border-bottom:0}

/* ---------- overview: period filter, clickable numbers, detail panels ---------- */
.ov-period{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:-6px 0 18px}
.ov-custom{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3)}
.ov-custom .sel{width:160px}
.ov-custom:not(.on) .sel-btn{color:var(--ink-3)}
button.ov-kpi{text-align:left;cursor:pointer;font:inherit;color:inherit}
.ov-kpi .lab{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ov-go{width:14px;height:14px;color:var(--ink-4);transition:transform .2s,color .2s}
.ov-kpi:hover .ov-go{color:var(--accent);transform:translateX(3px)}
.ov-kpi:hover{border-color:rgba(var(--ac),.3)}
.ov-bars>button{all:unset;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--ink-3);white-space:nowrap;cursor:pointer;border-radius:var(--r-xs);padding:2px 0}
.ov-bars>button:hover .ov-stack,.ov-bars>button:focus-visible .ov-stack{filter:brightness(1.18);box-shadow:0 0 0 1px rgba(var(--ac),.6)}
.ov-bars>button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ov-bars>button>span:first-child{font-size:11px;color:var(--ink-2)}
.ov-bars.dense{gap:4px}
.ov-bars.dense>button>span:first-child{font-size:0}
.ov-bars.dense>button:hover>span:first-child{font-size:11px}
.ov-drawer{width:min(620px,100vw)}
.ov-drawer .ov-bars{padding:20px 0 6px;min-height:200px}
.dr-big{display:grid;gap:2px;margin-bottom:20px}
.dr-big span{font-size:12px;color:var(--ink-3)}
.dr-big b{font-size:34px;font-weight:500;letter-spacing:-.03em}
.dr-big small{font-size:13px;color:var(--ink-2)}
.dr-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin-bottom:22px}
.dr-split>div{background:color-mix(in srgb,var(--surface) 70%,var(--bg));padding:12px 14px;display:grid;gap:3px}
.dr-split span{font-size:12px;color:var(--ink-3)}
.dr-split b{font-size:18px;font-weight:500}
.dr-tbl{margin:0 -20px}
.dr-tbl table th:first-child,.dr-tbl table td:first-child{padding-left:20px}
.dr-tbl table th:last-child,.dr-tbl table td:last-child{padding-right:20px}
.dr-line{font-size:13px;color:var(--ink-2);padding:4px 0}
.dr-line b{color:var(--ink)}
.dr-days{display:flex;align-items:flex-end;gap:3px;height:64px;padding-top:4px}
.dr-days i{flex:1;border-radius:2px 2px 1px 1px;background:var(--accent);opacity:.8;transform-origin:bottom;animation:grow .5s cubic-bezier(.2,.7,.2,1) both}
.dr-days i:hover{opacity:1}
.dr-actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:4px}
@media (max-width:640px){.ov-period .filters{overflow-x:auto;flex-wrap:nowrap;max-width:100%;scrollbar-width:none}.ov-custom .sel{width:130px}}
.ov-bars-wrap{padding:0 20px}
.bill-to{padding:18px 20px 18px;align-self:start}

/* ---------- admin: invoices tab ---------- */
.inv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.inv-new{display:grid;gap:12px;padding:16px;margin:14px 0;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);animation:rise .3s cubic-bezier(.2,.7,.2,1) both}
.inv-lines{display:grid;gap:8px}
.inv-line{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;gap:8px;align-items:center}
.inv-eur{position:relative;display:block}
.inv-eur span{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-size:13px}
.inv-eur .field{width:100%;padding-left:24px;text-align:right}
.inv-sum{display:grid;gap:4px;justify-self:end;min-width:240px;font-size:13px;color:var(--ink-2)}
.inv-sum div{display:flex;justify-content:space-between;gap:20px}
.inv-sum .t{border-top:1px solid var(--line-2);padding-top:6px;margin-top:2px;color:var(--ink);font-weight:600}
#inv-list{margin-top:10px}
@media (max-width:640px){.inv-line{grid-template-columns:minmax(0,1fr) 110px auto}.inv-sum{justify-self:stretch}}
/* loading: grey bars in the shape of what's coming, then the real content rises in */
.skel{display:grid;gap:14px;padding:18px 20px}
.skel-row{display:grid;grid-template-columns:1.1fr 1.4fr 2fr .9fr .8fr;gap:18px;align-items:center}
.skel i,.skel-kpi i{display:block;height:11px;border-radius:var(--r-xs);background:linear-gradient(90deg,var(--line) 25%,var(--line-2) 50%,var(--line) 75%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}
.skel-row:nth-child(2n) i:nth-child(3){width:70%}.skel-row:nth-child(3n) i:nth-child(2){width:60%}
.skel-row:nth-child(2) i{animation-delay:.08s}.skel-row:nth-child(3) i{animation-delay:.16s}.skel-row:nth-child(4) i{animation-delay:.24s}.skel-row:nth-child(5) i{animation-delay:.32s}
.skel-kpi{display:grid;gap:12px;align-content:start;min-height:0}
.skel-kpi i:nth-child(1){width:45%}.skel-kpi i:nth-child(2){height:24px;width:62%}.skel-kpi i:nth-child(3){width:78%}
.loaded{animation:rise .45s cubic-bezier(.2,.7,.2,1) both}
@media (max-width:700px){.skel-row{grid-template-columns:1fr 1fr}.skel-row i:nth-child(n+3){display:none}}
/* owner's panel for a colleague */
.sm-photo{display:flex;align-items:center;gap:16px}
.sm-av{width:64px;height:64px;font-size:20px;flex:none}
.person-f .btn{padding:5px 10px;font-size:12px}
#bill-mode .tag{font:500 12px var(--sans);letter-spacing:0;vertical-align:middle;margin-left:10px;padding:3px 8px;position:relative;top:-3px}
/* empty state: an icon, one line of title, one of help, and the next step */
.empty-state{display:grid;justify-items:center;text-align:center;gap:6px;padding:44px 20px 48px;animation:rise .45s cubic-bezier(.2,.7,.2,1) both}
.empty-state .es-ic{width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;margin-bottom:8px;color:var(--accent);background:rgba(var(--ac),.08);border:1px solid rgba(var(--ac),.18)}
.empty-state .es-ic .i{width:20px;height:20px}
.empty-state b{font:600 15px var(--display);color:var(--ink)}
.empty-state p{font-size:13px;color:var(--ink-3);max-width:340px;line-height:1.5}
.empty-state .btn{margin-top:10px}
.empty-state.sm{padding:28px 20px 30px}
/* client invoices: one compact row each, everything within reach without scrolling sideways */
.inv-list{display:grid;padding:6px 20px 4px}
.inv-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px 16px;padding:12px 0;border-top:1px solid var(--line)}
.inv-row:first-child{border-top:0}
.inv-row .inv-what{min-width:0}
.inv-row .inv-what b{display:block;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.inv-row .inv-what small{display:block;color:var(--ink-3);font-size:12px;margin-top:2px}
.inv-row .inv-amt{text-align:right;line-height:1.35}
.inv-row .inv-amt .num{display:block;color:var(--ink);font-size:14px}
.inv-row .inv-amt .tag{margin-top:3px}
.inv-row .inv-act{display:flex;align-items:center;gap:6px}
.inv-row .inv-act .btn{padding:5px 12px;font-size:12px}
@media (max-width:560px){.inv-row{gap:4px 12px}.inv-row.pay{grid-template-columns:minmax(0,1fr) auto}.inv-row.pay .inv-act{grid-column:1/-1;justify-content:flex-end}}
.inv-list.flush{padding:0}
#a-drawer .inv-new{border:0;padding:0;background:none;margin:0}
/* an armed destructive button: widens into a small red question */
.ib.sure{width:auto;padding:0 10px;gap:0;font-size:12px;font-weight:500;white-space:nowrap;color:var(--warn);background:var(--warn-soft);border:1px solid rgba(254,195,189,.35);border-radius:999px;animation:selin .15s ease both}
/* the dashboard's own confirm dialog */
dialog.ask{position:fixed;inset:0;margin:auto;width:fit-content;height:fit-content;border:0;padding:0;background:none;color:inherit;max-width:calc(100vw - 32px);overflow:visible}
dialog.ask::backdrop{background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fadein .15s ease}
dialog.ask .pf-confirm-box{width:min(400px,calc(100vw - 32px));animation:rise .22s cubic-bezier(.2,.7,.2,1) both}
dialog.ask .pf-btns{display:flex;gap:8px}
.btn.danger{background:var(--warn-soft);color:var(--warn);border-color:rgba(254,195,189,.35)}
.ov-stack i.o{background:rgba(245,241,237,.35)}
/* how a client pays: direct debit or per invoice */
.pay-way{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;margin:10px 0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.pay-way small{display:block;color:var(--ink-3);font-size:12px}
.pay-way b{font-weight:500;color:var(--ink);font-size:14px}
/* choice dialog options */
.ask-opts{display:grid;gap:8px;margin-top:6px}
.ask-opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);cursor:pointer;transition:border-color .15s,background .15s}
.ask-opt:has(input:checked){border-color:rgba(var(--ac),.55);background:rgba(var(--ac),.06)}
.ask-opt input{margin-top:3px;accent-color:var(--accent)}
.ask-opt b{display:block;font:500 14px var(--sans);color:var(--ink)}
.ask-opt small{display:block;color:var(--ink-3);font-size:12px;margin-top:2px;line-height:1.45}
.ask-opt.danger:has(input:checked){border-color:rgba(254,195,189,.45);background:var(--warn-soft)}
.pay-way .pw-scope{display:block;color:var(--ink-3);font-size:12px;margin-top:2px}
/* how a client pays: one block, four rows, one place to change it */
.pay-card{padding:18px 22px 6px}
.pay-card .card-h{padding:0 0 10px;margin-bottom:2px;border-bottom:1px solid var(--line)}
.pay-rows{display:grid}
.pay-rows>div{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:4px 16px;padding:13px 0;border-top:1px solid var(--line);font-size:13px}
.pay-rows>div:first-child{border-top:0}
.pay-rows span{color:var(--ink-3)}
.pay-rows b{font-weight:500;color:var(--ink)}
.pay-rows small{display:block;color:var(--ink-3);font-weight:400;font-size:12px;margin-top:2px}
.pay-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pay-foot{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding-top:12px;border-top:1px solid var(--line);margin-top:2px}
@media (max-width:560px){.pay-rows>div{grid-template-columns:1fr}}
/* office roles: a role per person, and who is the payments contact */
.mem-ctl{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.mem-ctl .field{width:auto;min-width:150px;padding:6px 10px;font-size:13px}
.mem-pay{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.mem-pay input{accent-color:var(--accent)}
/* view-only people at an office: no buttons that change things */
.ro-office [data-cb-done],.ro-office [data-cb-undo],.ro-office [data-dossier],.ro-office [data-ist],.ro-office [data-req-new],.ro-office [data-req-done],.ro-office #req-reply,.ro-office #req-compose{display:none!important}
.payway-ready{display:grid;gap:8px;min-width:0}
.payway-ready span{color:var(--ink-2);font-size:13px;line-height:1.5}
.payway-ready .tmp-row{display:flex;gap:8px;flex-wrap:wrap}
#sub-box,#payway-link{min-width:0;max-width:100%}

/* ---------- consistency layer: focus, press feedback, smooth hover everywhere ---------- */
:focus-visible{outline:2px solid rgba(var(--ac),.7);outline-offset:2px;border-radius:var(--r-xs)}
.btn,.ib,.fbtn,.pop-item,.inbox-item,.row-link,.inv-row,.kpi.ov-kpi{transition:background-color .15s,border-color .15s,color .15s,transform .12s,opacity .15s}
.btn:active:not(:disabled),.ib:active:not(:disabled),.fbtn:active{transform:scale(.97)}
.btn:disabled{opacity:.55;cursor:default}
@media (prefers-reduced-motion:reduce){.btn:active,.ib:active,.fbtn:active{transform:none}}
/* in-page view switches (softSwap): quick crossfade; the sidebar stays put */
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s;animation-timing-function:ease}
.side{view-transition-name:side}
/* admin on a phone: wide tables show only what matters (the row opens the rest), no sideways swiping */
@media (max-width:640px){
  #clients-page .tbl-wrap :is(th,td):not(:nth-child(1)):not(:nth-child(4)){display:none}
  #ov-table :is(th,td):not(:nth-child(1)):not(:nth-child(3)):not(:nth-child(9)){display:none}
  #clients-page .tbl-wrap,#ov-table{overflow-x:visible}
  #clients-page .tbl-wrap table,#ov-table{min-width:0;width:100%}
  #clients-page .tbl-wrap :is(th,td),#ov-table :is(th,td){white-space:normal;padding-left:10px;padding-right:10px}
  #clients-page .tbl-wrap .tag{white-space:normal}
}
/* command bar */
.cmdk-btn{gap:8px;color:var(--ink-2)}
.cmdk-btn kbd,.cmdk kbd{font:500 11px var(--mono);color:var(--ink-3);border:1px solid var(--line-2);border-radius:var(--r-xs);padding:1px 5px}
@media (max-width:700px){.cmdk-btn span,.cmdk-btn kbd{display:none}}
dialog.cmdk{border:0;padding:0;background:none;color:inherit;position:fixed;inset:0;margin:12vh auto auto;width:min(560px,calc(100vw - 32px));height:fit-content;overflow:visible}
dialog.cmdk::backdrop{background:color-mix(in srgb,var(--bg) 60%,transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.cmdk-box{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:hidden;animation:rise .18s cubic-bezier(.2,.7,.2,1) both}
.cmdk-in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.cmdk-in .i{color:var(--ink-3)}
.cmdk-in input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font:400 15px var(--sans)}
.cmdk-list{max-height:min(380px,55vh);overflow:auto;padding:6px}
.cmdk-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;padding:10px 12px;border-radius:var(--r-sm);color:var(--ink-2);font-size:14px}
.cmdk-item small{color:var(--ink-4);font-size:12px}
.cmdk-item.on,.cmdk-item:hover{background:var(--hover);color:var(--ink)}
.cmdk-item.on small{color:var(--ink-3)}
.cmdk-none{padding:14px 12px;color:var(--ink-3);font-size:13px}
/* client health: a dot in lists, a card in the client panel */
.hdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:8px;vertical-align:middle;flex:none}
.hdot.good{background:var(--good)}.hdot.warn{background:#F5C26B}.hdot.bad{background:#FF7A66;box-shadow:0 0 0 3px rgba(255,122,102,.18)}
.health-card{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;margin-bottom:14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--hover)}
.health-card .hdot{margin:6px 0 0}
.health-card b{display:block;font-weight:600;font-size:14px}
.health-card span{color:var(--ink-2);font-size:13px;line-height:1.45}
.health-card.bad{border-color:rgba(255,122,102,.35)}.health-card.warn{border-color:rgba(245,194,107,.3)}
.neg{color:var(--warn)}
/* alerts inbox */
.alerts-wrap{position:relative}
.bell{position:relative}
.bell-n{position:absolute;top:2px;right:1px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--accent);color:var(--on-accent,var(--bg));font:600 11px/16px var(--sans);text-align:center}
.alerts-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:min(380px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:hidden;animation:selin .15s ease both}
.alerts-h{display:flex;align-items:baseline;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line)}
.alerts-h b{font-weight:600}.alerts-h small{color:var(--ink-3);font-size:12px}
.alerts-list{max-height:min(420px,60vh);overflow:auto}
.alert{display:grid;grid-template-columns:8px 1fr auto;gap:10px;align-items:start;padding:11px 14px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2);line-height:1.45}
.alert:first-child{border-top:0}
.alert:hover{background:var(--hover);color:var(--ink)}
.alert i{width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--ink-4)}
.alert.good i{background:var(--good)}.alert.warn i{background:#F5C26B}.alert.bad i{background:#FF7A66}
.alert.new{background:rgba(var(--ac),.05)}
.alert b{color:var(--ink);font-weight:600}
.alert time{color:var(--ink-4);font-size:12px;white-space:nowrap}
.alerts-none{padding:18px 14px;color:var(--ink-3);font-size:13px}
@media (max-width:640px){.alerts-pop{position:fixed;left:12px;right:12px;top:64px;width:auto}}
/* quick replies */
.qr-wrap{position:relative}
.qr-btn{font-size:12px;color:var(--ink-2)}
.qr-pop{position:absolute;bottom:calc(100% + 8px);left:0;z-index:40;width:min(360px,80vw);max-height:300px;overflow:auto;padding:6px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-lg);display:grid;gap:2px;animation:selin .15s ease both}
.qr-pop[hidden]{display:none}
.qr-item{display:flex;align-items:center;gap:4px}
.qr-item>button:first-child{flex:1;min-width:0;text-align:left;padding:8px 10px;border-radius:var(--r-sm)}
.qr-item>button:first-child:hover{background:var(--hover)}
.qr-item b{display:block;font-weight:600;font-size:13px;color:var(--ink)}
.qr-item small{display:block;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qr-save{padding:9px 10px;text-align:left;font-size:12px;color:var(--accent);border-top:1px solid var(--line);margin-top:4px}
.qr-none{padding:10px;color:var(--ink-3);font-size:13px}
/* search highlights, transcript search, export buttons */
mark{background:rgba(var(--ac),.28);color:var(--ink);border-radius:3px;padding:0 2px}
.tr-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.tr-h h3{margin:0}
.tr-search{width:auto;flex:1;min-width:140px;max-width:240px;padding:6px 10px;font-size:13px}
.tr-hits{color:var(--ink-3);font-size:12px}
.export-acts{display:inline-flex;gap:8px}
/* print or save as pdf: just the page content, light and readable */
@media print{
  :root{--bg:#fff;--surface:#fff;--ink:#15110D;--ink-2:#3b342c;--ink-3:#6b645c;--ink-4:#9a938b;--line:#e6dfd6;--line-2:#d6cfc6;--hover:#f5f1ed}
  body{background:#fff!important;color:#15110D}
  .side,.top,.drawer,.scrim,.toast,.btn,.ib,.filters,.export-acts,.welcome,dialog{display:none!important}
  main,.page{margin:0!important;padding:0!important}
  .card{box-shadow:none!important;background:#fff!important;border:1px solid #e6dfd6!important;break-inside:avoid}
  *{animation:none!important;transition:none!important}
}
/* first-login tour */
.tour{position:fixed;z-index:90;width:min(300px,calc(100vw - 32px));padding:16px 16px 12px;background:var(--surface);border:1px solid rgba(var(--ac),.4);border-radius:var(--r);box-shadow:var(--shadow-lg);animation:rise .22s cubic-bezier(.2,.7,.2,1) both}
.tour.center{left:16px;right:16px;bottom:16px;margin:0 auto}
.tour-step{font-size:11px;color:var(--accent);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}
.tour b{display:block;font:600 16px var(--display);margin-bottom:4px}
.tour p{font-size:13px;line-height:1.5;color:var(--ink-2)}
.tour-acts{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.tour-acts .link{font-size:12px;color:var(--ink-3)}
.tour-focus{position:relative;z-index:89;box-shadow:0 0 0 2px rgba(var(--ac),.7),0 0 0 6px rgba(var(--ac),.15);border-radius:var(--r-sm)}
/* topic trends, heat map, chart stories, KPI arrows */
.trend{font-style:normal;font-size:11px;font-weight:600;margin-left:6px;padding:1px 6px;border-radius:999px}
.trend.up{color:color-mix(in srgb,var(--accent) 45%,#fff);background:rgba(var(--ac),.14)}.trend.down{color:var(--ink-3);background:var(--hover)}
.heat{padding:6px 20px 18px;overflow-x:auto}
.heat-row,.heat-hours{display:grid;grid-template-columns:26px repeat(24,minmax(10px,1fr));gap:3px;align-items:center}
.heat-row{margin-top:3px}
.heat-row span,.heat-hours span{font-size:11px;color:var(--ink-3)}
.heat-hours span{text-align:left}
.heat-row i{display:block;aspect-ratio:1;border-radius:3px;background:rgba(var(--ac),var(--a));box-shadow:inset 0 0 0 1px var(--line)}
.heat-row i:hover{outline:1px solid var(--ink-3)}
.story{margin-top:6px;padding-top:6px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-2)}
.peak text{font:600 11px var(--sans);fill:color-mix(in srgb,var(--accent) 45%,#fff)}
.delta.trend-d{display:inline-flex;align-items:center;gap:4px}
.delta .arr{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:6px solid currentColor;animation:arrin .5s cubic-bezier(.2,.7,.2,1) .25s both}
.delta.neg .arr{transform:rotate(180deg);animation-name:arrin-down}
@keyframes arrin{from{opacity:0;transform:translateY(5px)}}
@keyframes arrin-down{from{opacity:0;transform:rotate(180deg) translateY(5px)}to{transform:rotate(180deg)}}
/* milestone card */
.milestone{position:fixed;right:20px;bottom:20px;z-index:85;display:flex;gap:12px;width:min(340px,calc(100vw - 32px));padding:16px;background:var(--surface);border:1px solid rgba(var(--ac),.45);border-radius:var(--r);box-shadow:var(--shadow-lg),0 0 0 6px rgba(var(--ac),.06);animation:msin .5s cubic-bezier(.2,.7,.2,1) both}
.milestone.out{animation:msout .3s ease both}
.ms-ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--on-accent,var(--bg));background:var(--accent);box-shadow:0 0 0 0 rgba(var(--ac),.5);animation:mspulse 1.6s ease-out .5s 2}
.ms-ic .i{width:18px;height:18px}
.milestone small{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.milestone b{display:block;font:600 17px var(--display);margin:2px 0 4px}
.milestone p{font-size:13px;line-height:1.5;color:var(--ink-2);margin-bottom:10px}
@keyframes msin{from{opacity:0;transform:translateY(16px) scale(.97)}}
@keyframes msout{to{opacity:0;transform:translateY(10px)}}
@keyframes mspulse{to{box-shadow:0 0 0 14px rgba(var(--ac),0)}}
@media (max-width:640px){.milestone{left:16px;right:16px;bottom:16px;width:auto}}
/* callbacks work list tools */
.cb-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:0 20px 12px}
.cb-q{width:auto;min-width:200px;max-width:280px;padding:7px 10px;font-size:13px}
@media (max-width:640px){.cb-q{flex:1;max-width:none}}
/* monthly report page */
.report-acts{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.report-acts .field{width:auto;min-width:170px}
.report{padding:22px 24px}
.report-h small{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.report-h h2{font:600 24px var(--display);letter-spacing:-.02em;margin:4px 0 18px}
.report-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.report-kpis>div{padding:14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--hover);display:grid;gap:4px}
.report-kpis span{font-size:12px;color:var(--ink-3)}
.report-kpis b{font:500 26px var(--mono);letter-spacing:-.02em}
.report-kpis .delta{justify-self:start}
.report-cols{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;margin-top:22px}
.report-cols h3{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
@media (max-width:760px){.report-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.report-cols{grid-template-columns:1fr}.report{padding:18px 16px}}
/* light theme, per person (portal) */
:root[data-theme="light"]{
  --bg:#F6F2EC; --surface:#FFFFFF; --side:#EFE9E1; --hover:rgba(21,17,13,.05); --raise:#FFFFFF;
  --ink:#15110D; --ink-2:rgba(21,17,13,.72); --ink-3:rgba(21,17,13,.54); --ink-4:rgba(21,17,13,.30);
  --line:rgba(21,17,13,.09); --line-2:rgba(21,17,13,.16);
  --ac:226,71,31; --accent:#E2471F; --accent-soft:rgba(226,71,31,.10); --accent-tint:rgba(226,71,31,.16);
  --good:#1E7A4C; --good-soft:rgba(30,122,76,.09); --good-tint:rgba(30,122,76,.15);
  --est:color-mix(in srgb,var(--accent) 80%,#000); --est-soft:rgba(var(--ac),.08);
  --warn:#B42318; --warn-soft:rgba(180,35,24,.08);
  --prev:rgba(21,17,13,.30);
  --shadow:0 1px 2px rgba(21,17,13,.06),0 0 0 1px rgba(21,17,13,.02);
  --shadow-lg:0 24px 48px -16px rgba(21,17,13,.22),0 2px 8px rgba(21,17,13,.08);
  color-scheme:light;
}
[data-theme="light"] body::before{background:radial-gradient(closest-side,rgba(var(--ac),.10),rgba(var(--ac),.02) 55%,transparent)}
[data-theme="light"] body::after{background:radial-gradient(closest-side,rgba(20,92,75,.08),transparent 70%)}
[data-theme="light"] .side{background:rgba(239,233,225,.8)}
[data-theme="light"] .top{background:rgba(246,242,236,.8)}
[data-theme="light"] .card{background:#fff}
[data-theme="light"] .opp{background:radial-gradient(420px circle at 100% 0,rgba(var(--ac),.10),transparent 60%),#fff}
[data-theme="light"] .drawer,[data-theme="light"] .dr-mets div,[data-theme="light"] .dr-split>div,[data-theme="light"] .wiz{background:#fff}
[data-theme="light"] .pf-confirm{background:rgba(246,242,236,.85)}
[data-theme="light"] dialog.ask::backdrop,[data-theme="light"] dialog.cmdk::backdrop{background:rgba(21,17,13,.28)}
[data-theme="light"] .field,[data-theme="light"] .reply textarea,[data-theme="light"] .compose textarea{color-scheme:light}
[data-theme="light"] .tip .d{color:var(--ink-3)}
[data-theme="light"] .tip .r span{color:var(--ink-2)}
[data-theme="light"] .tip .chg{border-top-color:var(--line-2)}
[data-theme="light"] tbody tr:hover td{background:var(--hover)}
[data-theme="light"] .ov-stack i.o{background:rgba(21,17,13,.25)}
/* theme switch: colours glide over instead of snapping */
html.theme-vt .side{view-transition-name:none}
html.theme-vt::view-transition-old(root),html.theme-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.theme-vt::view-transition-old(root){z-index:1}
html.theme-vt::view-transition-new(root){z-index:2}
.theme-btn{display:inline-flex;align-items:center;gap:9px;margin:0 2px 8px;padding:7px 10px;border-radius:var(--r-sm);color:var(--ink-2);font-size:13px;font-weight:450;transition:background-color .15s,color .15s}
.theme-btn:hover{background:var(--hover);color:var(--ink)}
.theme-ic{width:16px;height:16px;flex:none;overflow:visible}
.theme-ic *{transform-box:view-box;transform-origin:12px 12px;transition:transform .55s cubic-bezier(.5,1.4,.4,1),opacity .35s ease}
.theme-ic .t-cut{transform-origin:18px 6px}
.t-rays{opacity:0;transform:rotate(-90deg) scale(.4)}
[data-theme="light"] .t-core{transform:scale(.55)}
[data-theme="light"] .t-cut{transform:translate(9px,-9px) scale(.6)}
[data-theme="light"] .t-rays{opacity:1;transform:none}
/* profile menu grows out of the avatar and folds back into it */
#pop-me{display:block;visibility:hidden;opacity:0;pointer-events:none;transform-origin:calc(100% - 15px) -22px;transform:scale(.12);clip-path:circle(16px at calc(100% - 15px) -22px);
  transition:transform .32s cubic-bezier(.3,1.25,.4,1),clip-path .32s cubic-bezier(.4,0,.2,1),opacity .2s ease,visibility 0s linear .32s}
#pop-me.open{visibility:visible;opacity:1;pointer-events:auto;transform:none;clip-path:circle(150% at calc(100% - 15px) -22px);transition-delay:0s}
[data-pop="pop-me"] .av{transition:transform .25s cubic-bezier(.3,1.4,.4,1)}
[data-pop="pop-me"]:has(+ #pop-me.open) .av{transform:scale(.88)}
@media (prefers-reduced-motion:reduce){#pop-me,.theme-ic *{transition:none!important}}
/* wizard progress fills instead of snapping */
.steps i{background:linear-gradient(var(--accent),var(--accent)) left/0% 100% no-repeat var(--line-2);transition:background-size .35s cubic-bezier(.2,.8,.2,1)}
.steps i.on{background:linear-gradient(var(--accent),var(--accent)) left/100% 100% no-repeat var(--line-2)}
/* the client switcher is a button: make it look like one */
.switcher[role=button]{border:1px solid var(--line-2);background:var(--surface);box-shadow:var(--shadow);transition:border-color .15s,background-color .15s}
.switcher[role=button]:hover{border-color:var(--accent);background:var(--surface)}
.switcher[role=button] .i{flex:none}
/* feed: each call its own row */
.feed .ev:not(:first-child)::after{content:"";position:absolute;left:30px;right:0;top:0;height:1px;background:var(--line)}
/* light theme: bubbles stand off the white panel, lines a touch stronger */
:root[data-theme="light"]{--line:rgba(21,17,13,.14);--line-2:rgba(21,17,13,.22)}
[data-theme="light"] .tl,[data-theme="light"] .msg-body{background:#F3EEE7;border-color:rgba(21,17,13,.10)}
[data-theme="light"] .tl.beller,[data-theme="light"] .msg.mine .msg-body{background:color-mix(in srgb,var(--accent) 14%,#fff);border-color:rgba(var(--ac),.30)}
[data-theme="light"] .tl.now{border-color:var(--accent)}
[data-theme="light"] .ev-ic{background:#F3EEE7}
/* light theme: everything that was tuned for a dark background, made fully readable */
:root[data-theme="light"]{--hover:rgba(21,17,13,.07)}
[data-theme="light"] .nav a{color:var(--ink-2);transition:background-color .15s,color .15s,box-shadow .15s}
[data-theme="light"] .nav a:hover{background:rgba(21,17,13,.08);color:var(--ink)}
[data-theme="light"] .nav a.on{background:#fff;color:var(--ink);font-weight:550;box-shadow:0 1px 2px rgba(21,17,13,.10),inset 0 0 0 1px rgba(21,17,13,.10)}
[data-theme="light"] .trend.up{color:color-mix(in srgb,var(--accent) 75%,#000);background:rgba(var(--ac),.12)}
[data-theme="light"] .trend.down{color:var(--ink-2);background:rgba(21,17,13,.07)}
[data-theme="light"] .peak text{fill:color-mix(in srgb,var(--accent) 75%,#000)}
[data-theme="light"] .roi-badge,[data-theme="light"] .sent{border-color:rgba(30,122,76,.30)}
[data-theme="light"] .inv-due.late,[data-theme="light"] .btn.danger,[data-theme="light"] .ib.sure{border-color:rgba(180,35,24,.30)}
[data-theme="light"] .ask-opt.danger:has(input:checked){border-color:rgba(180,35,24,.45)}
[data-theme="light"] .ev-ic[style*="--warn"]{border-color:rgba(180,35,24,.35)!important}
[data-theme="light"] .ev-ic[style*="--good"]{border-color:rgba(30,122,76,.35)!important}
[data-theme="light"] .hdot.warn,[data-theme="light"] .alert.warn i{background:#D99A1E}
[data-theme="light"] .hdot.bad,[data-theme="light"] .alert.bad i{background:#D93A25}
[data-theme="light"] .health-card.bad{border-color:rgba(217,58,37,.40)}
[data-theme="light"] .health-card.warn{border-color:rgba(217,154,30,.45)}
[data-theme="light"] .hs-sum{background:#F3EEE7}
[data-theme="light"] .av.round{background:#6B6F78}
[data-theme="light"] .btn.dark:hover{filter:brightness(.9)}
/* hovers that were too faint on white */
[data-theme="light"] tbody tr:hover td,[data-theme="light"] tr.row-link:hover td{background:rgba(var(--ac),.06)}
[data-theme="light"] .kpi:hover,[data-theme="light"] .int:hover,[data-theme="light"] .ov-kpi:hover,[data-theme="light"] .agent:hover{border-color:rgba(var(--ac),.45);box-shadow:0 6px 18px -8px rgba(21,17,13,.18)}
[data-theme="light"] .btn:not(.dark):hover{background:rgba(21,17,13,.06);border-color:rgba(21,17,13,.24)}
[data-theme="light"] .pop-item:hover{background:rgba(21,17,13,.06)}
[data-theme="light"] .ib:hover{background:rgba(21,17,13,.07)}
[data-theme="light"] .fbtn:hover{background:rgba(21,17,13,.06);color:var(--ink)}
[data-theme="light"] mark{background:rgba(var(--ac),.22)}
[data-theme="light"] .feed .ev:not(:first-child)::after,[data-theme="light"] .ev:not(:last-child)::before{background:rgba(21,17,13,.16)}
[data-theme="light"] .ev-ic{border-color:rgba(21,17,13,.24)}
/* rows without an icon (callbacks, sign-ups): no timeline line through the text, divider full width */
.ev:not(:has(> .ev-ic))::before{display:none}
.feed .ev:not(:has(> .ev-ic)):not(:first-child)::after{left:0}
/* heat map: named axes and a legend */
.heat-row,.heat-hours{grid-template-columns:84px repeat(24,minmax(10px,1fr))}
.heat-row>span{font-size:12px;color:var(--ink-2)}
.heat-row b{font-weight:500}.heat-row .short{display:none}
.heat-hours span{white-space:nowrap;overflow:visible;font-variant-numeric:tabular-nums}
.heat-hours .heat-ax{font-size:11px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.heat-xlab{margin:8px 0 0 87px;text-align:center;font-size:11px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.heat-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 20px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-2)}
.heat-legend .hl-t{width:100%;color:var(--ink-3)}
.heat-legend span{display:inline-flex;align-items:center;gap:6px}
.heat-legend i{width:14px;height:14px;border-radius:3px;background:rgba(var(--ac),var(--a));box-shadow:inset 0 0 0 1px var(--line-2)}
.heat-legend b{font-weight:500;color:var(--ink)}
@media (max-width:760px){.heat-row,.heat-hours{grid-template-columns:24px repeat(24,minmax(10px,1fr))}.heat-row .long{display:none}.heat-row .short{display:inline}.heat-xlab{margin-left:27px}.heat-hours .heat-ax{font-size:0}}
@media (max-width:760px){.heat{padding:6px 12px 14px}.heat-row,.heat-hours{grid-template-columns:22px repeat(24,minmax(8px,1fr));gap:2px}.heat-row{margin-top:2px}.heat-hours .h3{visibility:hidden}.heat-xlab{margin-left:24px}.heat-legend{padding:12px 12px 14px}}
/* heat map axis titles: clearly titles, not ticks */
.heat-axes{display:grid;grid-template-columns:84px 1fr;gap:3px;margin-bottom:6px}
.heat-axes span{font-size:12px;font-weight:600;color:var(--accent)}
.heat-hours span{font:400 11px var(--mono);color:var(--ink-3)}
@media (max-width:760px){.heat-axes{grid-template-columns:auto 1fr;gap:12px}}
/* an amount never breaks over two lines (no lone minus sign); the label wraps instead */
.rows div{gap:12px}
.rows div>b{white-space:nowrap;flex:none}
/* "Dag" sits on the hours line, right above Maandag; hours readable */
.heat-hours .heat-ax{font:600 12px var(--sans);color:var(--accent);text-transform:none;letter-spacing:0}
.heat-hours span{font:500 12px var(--mono);color:var(--ink-2)}
.heat-hours{margin-bottom:2px}
@media (max-width:760px){.heat-hours .heat-ax{font-size:11px;white-space:nowrap}.heat-hours span{font-size:11px}.heat-hours span:nth-child(2){visibility:hidden}}

/* ================= phone: feels like an app, not a shrunk website ================= */
.tabbar{display:none}
@media (max-width:640px){
  /* bottom tab bar */
  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:45;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);border-top:1px solid var(--line)}
  .tabbar a,.tabbar button{position:relative;display:grid;justify-items:center;gap:3px;padding:6px 2px 4px;border-radius:var(--r-sm);color:var(--ink-3);font-size:10.5px;font-weight:500;line-height:1.1;-webkit-tap-highlight-color:transparent}
  .tabbar span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar svg.i{width:21px;height:21px;stroke-width:1.8}
  .tabbar a.on{color:var(--accent)}
  .tabbar a:active,.tabbar button:active{transform:scale(.94)}
  .tabbar i{position:absolute;top:2px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--accent);color:var(--on-accent,#15110D);font:600 10px/16px var(--sans);font-style:normal;text-align:center}
  body:has(#auth:not([hidden])) .tabbar,body:has(.gate:not([hidden])) .tabbar{display:none}
  .menu-btn{display:none!important}
  .page{padding:16px 14px calc(88px + env(safe-area-inset-bottom))!important}
  .top{height:52px;padding:0 14px;padding-top:env(safe-area-inset-top);height:calc(52px + env(safe-area-inset-top))}

  /* type: one calm scale */
  .hd{margin-bottom:14px}
  .hd h1{font-size:22px;line-height:1.2}
  .hd p{font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .card-h{padding:14px 14px 8px!important;gap:10px}
  .card-h h2{font-size:15px;line-height:1.3}
  .card-h .sub{font-size:12px}
  .card-h a,.card-h .btn{white-space:nowrap;flex:none}
  .card{border-radius:14px}
  .grid{gap:10px!important}
  .kpi .lab{font-size:12px}
  .kpi .val{font-size:22px!important}

  /* filters and chips: never squeezed mid-word; wrap to a second line instead of sideways scrolling */
  .filters{flex-wrap:wrap!important;overflow:visible!important;gap:6px}
  .fbtn{white-space:nowrap;height:30px;padding:0 11px}
  .btn{white-space:nowrap}

  /* tables become lists: first cell is the title, the rest label + value */
  .tbl-wrap{overflow:visible!important;padding:0!important}
  .tbl-wrap table,#ov-table{min-width:0!important;width:100%;display:block}
  .tbl-wrap thead,#ov-table thead{display:none}
  .tbl-wrap tbody,#ov-table tbody{display:block}
  .tbl-wrap tr,#ov-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .tbl-wrap tr:last-child,#ov-table tr:last-child{border-bottom:0}
  .tbl-wrap td,#ov-table td{display:flex!important;justify-content:space-between;align-items:center;gap:10px;grid-column:1/-1;padding:0!important;border:0!important;white-space:normal!important;text-align:right;font-size:13px;min-width:0;background:none!important}
  .tbl-wrap td::before,#ov-table td::before{content:attr(data-l);color:var(--ink-3);font-size:12px;text-align:left;flex:none}
  .tbl-wrap td:first-child,#ov-table td:first-child{text-align:left;font-size:14px;font-weight:500;color:var(--ink);margin-bottom:2px}
  .tbl-wrap td:first-child::before,#ov-table td:first-child::before,.tbl-wrap td:not([data-l])::before,.tbl-wrap td[data-l=""]::before{content:none}
  .tbl-wrap td:empty{display:none!important}
  .tbl-wrap td .t,.tbl-wrap td .bar{max-width:45%}
  #clients-page .tbl-wrap :is(th,td),#ov-table :is(th,td){display:flex}

  /* dialogs slide up from the bottom like a sheet; header and buttons stay in view */
  .wiz{width:100%!important;max-width:none;max-height:92dvh;margin:auto 0 0!important;border-radius:18px 18px 0 0;border-bottom:0;overflow:auto;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom)}
  .wiz[open]{animation:sheetup .28s cubic-bezier(.2,.8,.2,1)}
  .wiz-h{position:sticky;top:0;z-index:2;background:inherit}
  .wiz-f{position:sticky;bottom:0;z-index:2;background:inherit}
  dialog.ask{margin:auto 0 0!important;width:100%!important;max-width:none}
  dialog.ask .pf-confirm-box{width:100%;border-radius:18px 18px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  dialog.cmdk{margin:12px auto auto;width:calc(100vw - 24px)}
  .drawer{width:100vw}
  .tour,.milestone{bottom:calc(76px + env(safe-area-inset-bottom))}
  .toast,#toast{bottom:calc(80px + env(safe-area-inset-bottom))!important}
}
@keyframes sheetup{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
[data-theme="light"] .tabbar{background:rgba(246,242,236,.9)}
@media (max-width:640px){
  /* list rows: title + main value on one line, the rest small underneath */
  .tbl-wrap td:first-child,#ov-table td:first-child{grid-column:1;margin:0;align-self:center}
  .tbl-wrap td:nth-child(2),#ov-table td:nth-child(2){grid-column:2;justify-content:flex-end;font-weight:500;color:var(--ink);font-size:14px;align-self:center}
  .tbl-wrap td:nth-child(2)::before,#ov-table td:nth-child(2)::before{content:none}
  .tbl-wrap td:nth-child(n+3),#ov-table td:nth-child(n+3){font-size:12px;color:var(--ink-2)}
  .tbl-wrap td:has(svg.spark){display:none!important}
}
@media (max-width:640px){
  .top-new{width:36px;height:36px;padding:0;justify-content:center;border-radius:50%}
  .top-new span{display:none}
  .card-h{flex-wrap:wrap}
  .card-h>div:first-child{flex:1 1 60%}
}
.bars-empty{margin-top:10px;padding:14px;border:1px dashed var(--line-2);border-radius:var(--r-sm);font-size:13px;color:var(--ink-3)}
@media (max-width:640px){
  /* bar charts: amounts would collide; show only the latest one (tap a bar for its amount) */
  .ov-bars>button>span.num{visibility:hidden}   /* the last one inherits, so it still hides inside a closed drawer */
  .ov-bars>button:last-child>span.num{visibility:inherit}
  .tbl-wrap td::before,#ov-table td::before{font-family:var(--sans);letter-spacing:0}
}
@media (max-width:640px){
  /* totals row (table footer) as one more list row, set apart */
  .tbl-wrap tfoot,#ov-table tfoot{display:block;border-top:1px solid var(--line-2);background:var(--hover)}
  .tbl-wrap tfoot tr,#ov-table tfoot tr{border-bottom:0}
  .tbl-wrap tfoot td:first-child,#ov-table tfoot td:first-child{font-weight:600}
  /* status cell next to a name: small, one dot */
  #ov-table td .hdot{display:none}
  #ov-table td:nth-child(2),.tbl-wrap td:nth-child(2):has(.dot,.tag){font-size:12px;font-weight:500;white-space:nowrap!important}
}
@media (max-width:640px){
  #ov-table :is(td,th):is(:nth-child(4),:nth-child(6),:nth-child(7)){display:none!important}
  #ov-table td:empty{display:none!important}
}
/* phone menu: backdrop and close button */
.side-scrim,.side-x{display:none}
@media (max-width:640px){
  .side{z-index:70;width:min(300px,84vw);padding-bottom:calc(14px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}
  .side-scrim{display:block;position:fixed;inset:0;z-index:65;border:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .22s;cursor:pointer;-webkit-tap-highlight-color:transparent}
  body:has(.side.open) .side-scrim{opacity:1;pointer-events:auto}
  .side-x{display:grid;margin-left:auto}
  .logo{align-items:center}

  /* admin client list: name + status, then three small stats; links and dashboard live in the client page */
  #clients-page .tbl-wrap tr{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px 12px;padding:14px}
  #clients-page .tbl-wrap td:nth-child(1){grid-column:1/3!important}
  #clients-page .tbl-wrap td:nth-child(2){grid-column:3!important;justify-content:flex-end}
  #clients-page .tbl-wrap :is(td):is(:nth-child(3),:nth-child(4),:nth-child(5)){display:flex!important;grid-column:auto!important;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;text-align:left;font-size:13px;color:var(--ink);padding:8px 10px!important;border-radius:var(--r-sm);background:var(--hover)!important}
  #clients-page .tbl-wrap :is(td):is(:nth-child(3),:nth-child(4),:nth-child(5))::before{font-size:11px;color:var(--ink-3)}
  #clients-page .tbl-wrap td:nth-child(n+6){display:none!important}
  #clients-page .tbl-wrap td .tag{font-size:11px}
  .tbl-wrap .hdot{display:none}
  #clients-page .card-h #q{width:100%!important;flex:1 1 100%}

  /* KPI tiles: same height, one line of context, no mini charts */
  #kpis .kpi>:nth-child(n+4){display:none}
  .kpi .vs{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px}
}
@media (max-width:640px){.card-h input[type=search]{width:100%!important;max-width:none!important;flex:1 1 100%;height:38px}}

/* ================= phone density: one compact scale (last, so it wins) ================= */
@media (max-width:640px){
  body{font-size:13px}
  .top{height:calc(48px + env(safe-area-inset-top))}
  .top .ib,.top .btn{height:32px}
  .top-new{width:32px!important;height:32px!important}
  .crumb{font-size:15px}
  .page{padding:12px 12px calc(80px + env(safe-area-inset-bottom))!important}

  /* page intro: title only; the explanation is for desktop */
  .hd{margin-bottom:10px;gap:8px}
  .hd h1{font-size:19px;letter-spacing:-.01em}
  .hd p{display:none}

  .grid{gap:8px!important}
  .card{border-radius:12px}
  .card-h{padding:12px 12px 6px!important}
  .card-h h2{font-size:14px}
  .card-h .sub{font-size:11.5px}
  .card-h a{font-size:12px}

  /* number tiles */
  .kpi{padding:11px 12px!important;gap:2px}
  .kpi .lab{font-size:11.5px}
  .kpi .val{font-size:19px!important;margin:2px 0}
  .kpi .vs,.kpi .delta{font-size:11px}
  .kpi .viz{padding-top:8px}
  .kpi .viz svg,.kpi .strip{height:18px!important;margin-top:6px}
  .kpi .viz>svg{max-height:22px}
  .kpi .meter{height:10px;gap:2px}
  .kpi .meter i{border-radius:2px}

  /* lists and rows */
  .ev{padding:8px 0;gap:8px}
  .ev p{font-size:12.5px;line-height:1.4}
  .ev .meta{font-size:11px;gap:6px}
  .feed{padding:2px 12px 8px}
  .rows div{padding:7px 0;font-size:12.5px}
  .tbl-wrap tr,#ov-table tr{padding:10px 12px!important}
  .tbl-wrap td:first-child,#ov-table td:first-child,.tbl-wrap td:nth-child(2),#ov-table td:nth-child(2){font-size:13px}
  .tbl-wrap td,#ov-table td{font-size:12px}
  .tbl-wrap td::before,#ov-table td::before{font-size:11px}
  #clients-page .tbl-wrap tr{gap:8px!important;padding:12px!important}
  #clients-page .tbl-wrap :is(td):is(:nth-child(3),:nth-child(4),:nth-child(5)){padding:6px 8px!important;font-size:12px}
  #clients-page .tbl-wrap :is(td):is(:nth-child(3),:nth-child(4),:nth-child(5))::before{font-size:10.5px}
  .av{width:26px;height:26px;font-size:10.5px}

  /* controls */
  .btn{height:30px;font-size:12.5px;padding:0 10px}
  .fbtn{height:28px;font-size:11.5px;padding:0 10px}
  .field{height:34px;font-size:13px}
  .card-h input[type=search]{height:34px}
  .tag,.chip{font-size:10.5px}

  /* tab bar */
  .tabbar{padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  .tabbar a,.tabbar button{padding:5px 2px 3px;font-size:10px;gap:2px}
  .tabbar svg.i{width:20px;height:20px}
}
@media (max-width:640px){
  .tabs{display:grid!important;grid-template-columns:1fr 1fr;width:100%}
  .tabs button{padding:5px 8px;font-size:12px}
  .chart-stats{gap:18px;padding:12px 12px 0}
  .chart-stats .k{font-size:11px}
  .chart-stats .v{font-size:18px}
}
/* admin period: one dropdown on a phone, pills on desktop */
.ovp-pick{display:none}
@media (max-width:640px){
  .ovp-pick{display:block;width:100%;height:36px}
  #ov-period .filters{display:none!important}
  #ov-period .ov-custom:not(.on){display:none}
  #ov-period .ov-custom{margin-top:8px}
  #ov-period .ov-custom .field{flex:1;min-width:0}
}
@media (max-width:640px){
  .ov-bars{gap:4px}
  .ov-bars>button>span:last-child{font-size:10px;white-space:nowrap}
  .ov-bars>button:nth-last-child(even)>span:last-child{visibility:hidden}
}
@media (max-width:640px){
  /* client card: a small direct "open dashboard" button under the stats */
  #clients-page .tbl-wrap td:nth-child(8){display:flex!important;grid-column:1/-1!important;justify-content:flex-end;padding:0!important;background:none!important}
  #clients-page .tbl-wrap td:nth-child(8)::before{content:none}
  #clients-page .row-go{width:auto;height:28px;padding:0 10px 0 12px;gap:6px;border:1px solid var(--line-2);border-radius:999px;font-size:12px;font-weight:500;color:var(--ink);background:var(--surface)}
  #clients-page .row-go::before{content:"Open dashboard"}
  #clients-page .row-go svg.i{width:14px;height:14px}

  /* menu: fits the visible screen on iPhone (100vh runs under Safari's toolbar), compact so everything shows */
  .side{height:100dvh;max-height:100dvh;padding-top:calc(10px + env(safe-area-inset-top))}
  .side .logo{padding:4px 8px 10px;font-size:16px}
  .side .nav a{padding:8px 10px;font-size:14px}
  .side .nav-l{padding:12px 10px 4px}
  .side .theme-btn{margin:0 2px 6px;padding:6px 10px}
  .side .help-card{padding:9px 11px;margin-bottom:8px}
  .side .help-card small{font-size:11.5px}
  .side .switcher{padding:7px}
}
@media (max-width:640px){.side .help-card{display:none}}
@media (max-width:640px){#clients-page .row-go{display:inline-flex!important;align-items:center;white-space:nowrap;flex-wrap:nowrap}}

/* ---------- admin: client timeline ---------- */
.tl{position:relative;margin-top:6px}
.tl-month{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding:14px 0 6px}
.tl-item{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:start;padding:8px 0}
.tl-item:not(:last-child)::before{content:"";position:absolute;left:13.5px;top:36px;bottom:-8px;width:1px;background:var(--line-2)}
.tl-month+.tl-item::before,.tl-item:has(+ .tl-month)::before{display:none}
.tl-ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2)}
.tl-ic svg.i{width:13px;height:13px}
.tl-item.good .tl-ic{color:var(--good);border-color:rgba(183,230,183,.35);background:var(--good-soft)}
.tl-item.bad .tl-ic{color:var(--warn);border-color:rgba(254,195,189,.4);background:var(--warn-soft)}
.tl-item.star .tl-ic{color:var(--accent);border-color:rgba(var(--ac),.4);background:var(--accent-soft)}
.tl-txt b{display:block;font-weight:500;font-size:13.5px;color:var(--ink)}
.tl-txt small{display:block;font-size:12px;color:var(--ink-3);margin-top:1px}
.tl-when{font-size:12px;color:var(--ink-3);white-space:nowrap;padding-top:5px}
[data-theme="light"] .tl-item.good .tl-ic{border-color:rgba(30,122,76,.3)}
[data-theme="light"] .tl-item.bad .tl-ic{border-color:rgba(180,35,24,.3)}

/* ---------- admin: Inzichten ---------- */
.ins-tabs{margin-top:4px}
.th-sort{font:inherit;color:inherit;white-space:nowrap}
.th-sort.on{color:var(--ink)}
.ins-table td.best{color:var(--accent);font-weight:600}
.q-card{margin-top:12px}
.q-points{display:grid;gap:2px;padding:4px 20px 8px}
.q-point{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.q-point:last-child{border-bottom:0}
.q-point .hdot{margin-top:6px}
.q-point b{font-weight:600;font-size:13.5px}
.q-point p{font-size:13px;color:var(--ink);margin-top:2px}
.q-point small{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.q-none{padding:4px 20px 14px;color:var(--ink-2);font-size:13px}
.ins-warn{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-bottom:12px;border:1px solid rgba(245,194,107,.35);border-radius:var(--r-sm);background:rgba(245,194,107,.08);font-size:13px;color:var(--ink-2)}
.ins-warn .hdot{margin-top:5px;flex:none}

/* showcase: brand page for sales, also full screen */
.showcase{position:relative;overflow:hidden;padding:28px 30px;border-radius:16px;border:1px solid rgba(var(--ac),.25);color:#F5F1ED;
  background:radial-gradient(700px circle at 100% 0,rgba(var(--ac),.22),transparent 60%),radial-gradient(600px circle at 0 100%,rgba(20,92,75,.35),transparent 60%),#15110D}
.showcase:fullscreen{display:flex;flex-direction:column;justify-content:center;padding:6vh 7vw;border-radius:0;font-size:1.15em}
.sc-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sc-logo{display:inline-flex;align-items:center;gap:8px;font:600 16px var(--display)}
.sc-logo img{width:22px}.sc-logo b{color:var(--accent);font-weight:600}
.sc-present{background:rgba(245,241,237,.06);border-color:rgba(245,241,237,.18);color:#F5F1ED}
.showcase:fullscreen .sc-present{opacity:.5}
.sc-eyebrow{display:block;margin-top:26px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--est)}
.showcase h2{font:600 clamp(24px,3.4vw,40px)/1.15 var(--display);letter-spacing:-.025em;margin:8px 0 24px;max-width:18ch}
.sc-big{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sc-big>div{padding:16px;border-radius:12px;background:rgba(245,241,237,.05);border:1px solid rgba(245,241,237,.09);display:grid;gap:6px}
.sc-big b{font:500 clamp(26px,3vw,42px) var(--mono);letter-spacing:-.03em;color:#fff}
.sc-big span{font-size:13px;color:rgba(245,241,237,.7)}
.sc-cols{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;margin-top:26px}
.sc-cols h3{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:rgba(245,241,237,.55);margin-bottom:10px}
.sc-rows>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid rgba(245,241,237,.09);font-size:14px;color:rgba(245,241,237,.8)}
.sc-rows b{color:#fff;font-weight:500}
.sc-topic{display:grid;grid-template-columns:minmax(0,1fr) 34% 44px;gap:12px;align-items:center;padding:7px 0;font-size:14px;color:rgba(245,241,237,.85)}
.sc-topic i{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--accent) var(--w),rgba(245,241,237,.1) var(--w))}
.sc-topic b{text-align:right;font-weight:500;color:#fff}
.sc-foot{margin-top:24px;font-size:12px;color:rgba(245,241,237,.5)}
@media (max-width:760px){.sc-big{grid-template-columns:repeat(2,minmax(0,1fr))}.sc-cols{grid-template-columns:1fr}.showcase{padding:20px 16px}.showcase h2{margin-bottom:16px}}
@media (max-width:640px){.ins-tabs{display:grid!important;grid-template-columns:repeat(3,1fr);width:100%}.q-points{padding:2px 12px 6px}.tl-item{gap:10px}}
.ins-table{min-width:0;width:100%}
.ins-table th{white-space:normal;vertical-align:bottom;padding-left:8px;padding-right:8px}
.ins-table .th-sort{white-space:normal;text-align:right;line-height:1.25}
.ins-table td{padding-left:8px;padding-right:8px}
#q-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:640px){#q-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.cp-tabsel{display:none}
.cp-body .wiz-only{display:none}
.pf-check span small{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
@media (max-width:640px){
  #cp-tabs{overflow:visible!important;display:block!important}
  #cp-tabs>a{display:none!important}
  .cp-tabsel{display:block;width:100%;height:38px;font-weight:500}
}

/* ---------- verwerkersovereenkomst: reading, signing, printing ---------- */
.dpa-dlg{width:min(760px,calc(100vw - 32px))!important;display:flex;flex-direction:column}
.dpa-dlg[open]{display:flex}
.dpa-body{overflow:auto;max-height:58vh;padding:4px 20px 12px;border-bottom:1px solid var(--line)}
.dpa-intro{margin:12px 0 4px;padding:10px 12px;border-radius:var(--r-sm);background:var(--accent-soft);font-size:13px;color:var(--ink)}
.dpa-form{display:grid;gap:12px;padding:14px 20px 16px}
.legal{font-size:13px;line-height:1.6;color:var(--ink-2)}
.legal h1{font:600 22px var(--display);color:var(--ink);margin:14px 0 2px}
.legal h2{font:600 14px var(--sans);color:var(--ink);margin:18px 0 6px}
.legal p,.legal ul,.legal ol{margin:6px 0}
.legal ul,.legal ol{padding-left:20px}
.legal table{width:100%;border-collapse:collapse;margin:8px 0;font-size:12.5px}
.legal th,.legal td{text-align:left;vertical-align:top;padding:6px 8px;border:1px solid var(--line-2)}
.legal th{color:var(--ink);font-weight:600;background:var(--hover)}
.legal-meta{font-size:12px;color:var(--ink-3)}
@media print{
  body.printing-legal>*:not(dialog.dpa-dlg){display:none!important}
  body.printing-legal dialog.dpa-dlg{position:static;display:block!important;width:auto!important;max-height:none;border:0;box-shadow:none;background:#fff;color:#15110D}
  body.printing-legal dialog.dpa-dlg::backdrop{display:none}
  body.printing-legal .dpa-dlg :is(.wiz-h,.wiz-f,.dpa-intro,.dpa-form){display:none!important}
  body.printing-legal .dpa-body{max-height:none;overflow:visible;border:0;padding:0}
  body.printing-legal .legal{color:#3b342c}
  body.printing-legal .legal :is(h1,h2,th){color:#15110D}
  body.printing-legal .legal :is(th,td){border-color:#d6cfc6}
  body.printing-legal .legal th{background:#f5f1ed}
}
.docs-card .doc-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 20px 18px;flex-wrap:wrap}
.doc-row b{display:block;font-weight:500;color:var(--ink)}
.doc-row small{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.doc-acts{display:flex;gap:8px}
.cp-dpa{margin-top:4px;font-size:12px;color:var(--warn)}
.cp-dpa.ok{color:var(--good)}
@media (max-width:640px){.dpa-body{max-height:none;padding:4px 14px 10px}.dpa-form{padding:12px 14px 14px}.docs-card .doc-row{padding:4px 12px 14px}.legal table{font-size:11.5px}.legal :is(th,td){padding:5px 6px}}
.legal table{min-width:0!important;table-layout:auto}
.legal :is(th,td){white-space:normal!important;overflow-wrap:anywhere}
/* webhook source help */
.wh-shown{display:grid;gap:8px;margin-top:6px}
.wh-help{margin-top:4px;font-size:13px;color:var(--ink-2)}
.wh-help summary{cursor:pointer;font-weight:500;color:var(--ink)}
.wh-help p{margin:8px 0;line-height:1.55}
.wh-code{margin:8px 0;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--hover);font:12px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
/* phone-only dropdowns: the custom-select wrapper must follow the select (hidden on desktop) */
.sel:has(> .cp-tabsel),.sel:has(> .ovp-pick){display:none}
@media (max-width:640px){.sel:has(> .cp-tabsel),.sel:has(> .ovp-pick){display:block;width:100%}}
/* platform picker: numbered steps */
.pf-how{margin:0;padding:12px 14px 12px 32px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--hover);display:grid;gap:8px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.pf-how li::marker{color:var(--accent);font-weight:600}
.pf-how b{color:var(--ink);font-weight:600}
.pf-how code{font:12px var(--mono);color:var(--ink)}
.crm-ev{display:grid;gap:6px;font-size:13px;color:var(--ink-2)}
.crm-ev>span{font-size:12px;color:var(--ink-3)}
.crm-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crm-acts .link{margin-left:auto}

/* Bureau: the agency's own details */
.ag-form{padding:6px 22px 20px;display:flex;flex-direction:column}
.ag-sec{padding:18px 0;border-bottom:1px solid var(--line)}
.ag-sec>b{display:block;font-size:15px}
.ag-sec>small{display:block;color:var(--ink-3);font-size:12.5px;margin:2px 0 14px}
.ag-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;align-items:start}
.ag-grid .fl small{color:var(--ink-3);font-size:11.5px}
.ag-wide{grid-column:1/-1}
.ag-color{display:flex;gap:8px;align-items:center}
.ag-color{position:relative}
/* own colour picker (mountColorPicker in store.js) */
.pk-sw{width:42px;height:38px;flex:none;border-radius:10px;border:1px solid var(--line-2);cursor:pointer;background:var(--accent)}
.pk-sw:disabled{cursor:default;opacity:.6}.pk-sw:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pk-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:30;width:min(260px,calc(100vw - 48px));padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);display:grid;gap:12px}
.pk-pop[hidden]{display:none}
.pk-sv{position:relative;height:140px;border-radius:10px;cursor:crosshair;touch-action:none;outline:none;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,hsl(var(--h,12) 100% 50%))}
.pk-sv:focus-visible{box-shadow:0 0 0 2px var(--ink)}
.pk-sv i{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 1px 6px rgba(0,0,0,.5);pointer-events:none}
.pk-h{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:999px;margin:0;cursor:pointer;outline:none;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.pk-h::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:hsl(var(--h,12) 100% 50%);box-shadow:0 0 0 2px #fff,0 1px 6px rgba(0,0,0,.5)}
.pk-h::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:hsl(var(--h,12) 100% 50%);box-shadow:0 0 0 2px #fff,0 1px 6px rgba(0,0,0,.5)}
.pk-h:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.pk-code{display:flex;gap:8px;align-items:center}.pk-now{width:28px;height:28px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2)}
.pk-code .pk-hex{flex:1;min-width:0;height:34px;font-family:var(--mono);font-size:13px;text-transform:uppercase}
.ag-foot{display:flex;justify-content:flex-end;align-items:center;gap:14px;padding-top:18px}
.ag-err{color:var(--warn);font-size:13px;margin-right:auto}
@media (max-width:640px){.ag-grid{grid-template-columns:1fr}.ag-form{padding:4px 16px 16px}}
/* Abonnement: current plan + the three plans */
.pl-now{padding:18px 20px}.pl-now>small{color:var(--ink-3);font-size:12px}
.pl-now-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:2px}.pl-now-h>b{font-size:22px}
.pl-now-h small,.pl-price small{font-size:12px;color:var(--ink-3);font-weight:400}
.pl-use{margin-top:14px;font-size:13px;color:var(--ink-2)}.pl-use i{display:block;height:6px;border-radius:3px;background:var(--hover);margin-top:8px;overflow:hidden}
.pl-use i b{display:block;height:100%;background:var(--accent);border-radius:3px}
.pl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pl-card{padding:18px 20px;display:flex;flex-direction:column;gap:8px}.pl-card.on{border-color:rgba(var(--ac),.45)}
.pl-card>b{font-size:15px}.pl-price{font-size:22px}
.pl-card ul{list-style:none;padding:0;margin:4px 0 8px;display:grid;gap:6px;font-size:13px;color:var(--ink-2);flex:1}
.pl-card li::before{content:"✓";color:var(--accent);margin-right:8px}
.pl-card .tag,.pl-card .btn{align-self:flex-start}
.pl-foot{margin-top:14px;font-size:12.5px;color:var(--ink-3)}
@media (max-width:760px){.pl-grid{grid-template-columns:1fr}}
/* agency side: numbers blurred for demos and screen shares */
.hide-nums .num,.hide-nums .money,.hide-nums .kpi .vs,.hide-nums .dr-big small,.hide-nums .val,.hide-nums .inv-amt,.hide-nums .inv-eur,.hide-nums .dr-big,.hide-nums .sc-big,.hide-nums svg text{filter:blur(7px);transition:filter .2s}
#blur-toggle[aria-pressed="true"]{color:var(--accent)}
.hide-nums .nav .num{filter:none}
/* sidebar: the agency's own pages sit at the bottom, apart from the client work */
.nav{display:flex;flex-direction:column;flex:1 0 auto}
/* a short window: the sidebar scrolls as a whole instead of the bottom block covering the menu; the help card makes room first */
aside.side{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none}
aside.side::-webkit-scrollbar{display:none}
@media (max-height:820px){ aside.side .help-card{display:none} }
.nav-own{margin-top:auto;padding-top:6px;border-top:1px solid var(--line)}
.side-foot{margin-top:10px}
/* Integraties */
.int-list{display:grid;gap:10px}
.int-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;flex-wrap:wrap}
.int-row b{display:block;font-size:15px}.int-row small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:2px}
.int-r{text-align:right}.int-r small{margin-top:6px}
@media (max-width:760px){.int-r{text-align:left}}

/* =====================================================================
   Shera "Glass" (direction B, chosen 2026-10-12): only the boxes and the layout.
   All colours stay the agency's own palette (the tokens at the top), so the dashboard keeps matching its e-mails.
   No backdrop-filter and no big shadows on cards: both made the counters and bars stutter.
   ===================================================================== */
:root{--r:18px;--r-sm:10px}
/* background: one static painted layer (accent light top right, a dot grid), nothing fixed to recompute */
/* the glow and dots live on one fixed layer of their own: Safari otherwise repaints the whole page background
   piece by piece whenever the page height changes (switching pages), which showed as a dark flash */
:root:not([data-theme="light"]) body{background:var(--bg)}
:root:not([data-theme="light"]) body::before{content:"";display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;width:auto;height:auto;border-radius:0;transform:translateZ(0);background:radial-gradient(760px 460px at 88% -8%,rgba(var(--ac),.13),transparent 70%) no-repeat,radial-gradient(640px 420px at 6% 102%,rgba(20,92,75,.16),transparent 70%) no-repeat,radial-gradient(rgba(245,241,237,.045) 1px,transparent 1.2px) 0 0/26px 26px}
:root:not([data-theme="light"]) body::after{display:none}
/* floating sidebar panel */
@media (min-width:901px){
  .app{grid-template-columns:268px minmax(0,1fr)}
  .side{margin:12px 0 12px 12px;top:12px;height:calc(100vh - 24px);border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,var(--surface),var(--side));backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:inset 0 1px 0 rgba(245,241,237,.06);padding:16px 12px 12px}
}
.nav-l{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:14px 10px 6px}
.nav a{padding:8px 10px;border-radius:10px;transition:background .25s,color .2s,box-shadow .25s}
.nav a.on{background:linear-gradient(180deg,rgba(245,241,237,.09),rgba(245,241,237,.03));box-shadow:inset 0 0 0 1px var(--line-2)}
.top{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent}
.hd h1{font-size:34px;letter-spacing:-.035em}
:root:not([data-theme="light"]) .card{background:linear-gradient(180deg,color-mix(in srgb,var(--raise) 70%,var(--surface)),color-mix(in srgb,var(--surface) 60%,var(--bg)));border-color:var(--line);box-shadow:inset 0 1px 0 rgba(245,241,237,.06)}
.btn{border-radius:10px}
.btn.dark{background:var(--accent);border-color:var(--accent)}
.kpi .val{font-weight:600;letter-spacing:-.04em}
/* overview: revenue as the hero tile, the rest around it */
@media (min-width:1321px){
  .ov-kpis{grid-template-columns:1.5fr 1fr 1fr 1fr}
  .ov-kpis>.ov-kpi:first-child{grid-row:span 2}
  .ov-kpis>.ov-kpi:last-child{grid-column:span 2}
}
.ov-kpis>.ov-kpi:first-child .val{font-size:clamp(34px,4vw,56px);margin-top:14px}
.hero-spark{display:block;margin-top:auto;padding-top:16px;height:86px}
.hero-spark svg{width:100%;height:100%;overflow:visible;clip-path:inset(0 100% 0 0);animation:reveal 1.1s .35s cubic-bezier(.2,.8,.2,1) forwards}
.hero-spark path{fill:none;stroke:var(--accent);stroke-width:1.8;vector-effect:non-scaling-stroke;stroke-linecap:round}
@keyframes reveal{to{clip-path:inset(0 0 0 0)}}
.ov-kpis>.ov-kpi:first-child{display:flex;flex-direction:column}
/* bars: accent fading lighter at the top, setup in quiet grey */
.ov-stack{border-radius:8px;max-width:48px;background:var(--line)}
.ov-stack i.s{background:rgba(var(--ac),.4)}
.ov-bars .now .ov-stack{box-shadow:none}
@media (prefers-reduced-motion:reduce){.hero-spark svg{animation:none;clip-path:none}}
.kpi .val,.net .big{font-weight:600}
@media (max-width:1320px){.ov-kpis>.ov-kpi:first-child{grid-column:1/-1}.ov-kpis>.ov-kpi:last-child{grid-column:span 2}.ov-kpis>.ov-kpi:first-child .hero-spark{height:64px}}
@media (max-width:900px){.ov-kpis>.ov-kpi:first-child .val{font-size:40px!important;margin:10px 0 4px}}
/* money views off: four cards in one row (no tall first card, no wide last one) */
.ov-kpis.four>.ov-kpi:first-child{grid-row:auto}.ov-kpis.four>.ov-kpi:last-child{grid-column:auto}

/* ---------- Glass, part 2: every page, panel and dialog in the same finish (shapes only; colours stay the palette's) ---------- */
/* opening a panel focuses the panel itself (keyboard Tab reaches the close button), so no ring flashes on open */
.drawer:focus,.drawer:focus-visible{outline:none}
/* side panels: a floating glass sheet like the sidebar */
@media (min-width:701px){
  .drawer{top:12px;right:12px;bottom:12px;width:min(560px,calc(100vw - 24px));border:1px solid var(--line);border-radius:22px;overflow:hidden;transform:translateX(calc(100% + 24px))}
  .drawer.on{transform:none}
}
:root:not([data-theme="light"]) .drawer{background:linear-gradient(180deg,color-mix(in srgb,var(--raise) 55%,var(--surface)),var(--surface) 40%);box-shadow:inset 0 1px 0 rgba(245,241,237,.06),0 30px 60px -20px rgba(0,0,0,.7)}
.dr-h{padding:20px 22px 14px;border-bottom:0}
.dr-h .ib,[data-dclose]{border-radius:50%;background:var(--hover)}
.dr-b{padding:4px 22px 24px}
.dr-b section{margin-bottom:28px}
.dr-b h3{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.dr-big{padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--hover);margin-bottom:24px}
.dr-big b{font-size:40px;font-weight:600;letter-spacing:-.04em;line-height:1.1;margin:4px 0}
.dr-split,.dr-mets{gap:10px;background:none;border:0;border-radius:0;overflow:visible}
.dr-split>div,.dr-mets div{border:1px solid var(--line);border-radius:14px;background:var(--hover)}
.dr-tbl{margin:0 -22px}
.dr-tbl table th:first-child,.dr-tbl table td:first-child{padding-left:22px}
.dr-tbl table th:last-child,.dr-tbl table td:last-child{padding-right:22px}
/* empty states: a soft panel instead of a dashed outline */
.bars-empty,.msg-empty:not(:empty){padding:16px 18px;border:0;border-radius:14px;background:var(--hover);color:var(--ink-3);font-size:13px}
/* tables: lighter header, roomier rows */
th{font-size:11.5px;font-weight:500;color:var(--ink-3);padding-top:12px;padding-bottom:12px}
td{padding-top:13px;padding-bottom:13px}
tbody tr{transition:background .2s}
/* controls */
.field{height:36px;border-radius:10px;border-color:var(--line-2);transition:border-color .2s}
.field:hover{border-color:var(--ink-4)}
textarea.field{height:auto}
.btn{height:36px;padding:0 14px}
.tabs{padding:3px;border-radius:12px;gap:2px}
.tabs button{padding:6px 12px;border-radius:9px;transition:background .2s,color .2s}
.tag{border-radius:999px;padding:2px 8px}
.pop{border-radius:16px;padding:8px}
.wiz{border-radius:22px;border-color:var(--line)}
:root:not([data-theme="light"]) .wiz{background:linear-gradient(180deg,color-mix(in srgb,var(--raise) 55%,var(--surface)),var(--surface) 40%)}
.wiz fieldset{padding:20px 24px}
.ask-opt{border-radius:12px}
/* client settings: tabs as soft pills, body as one glass card */
.cp-tabs a{border-radius:10px}
.cp-tabs a.on{box-shadow:inset 0 0 0 1px var(--line-2);background:linear-gradient(180deg,rgba(245,241,237,.08),rgba(245,241,237,.03))}
.blk{border-top-color:var(--line)}
.hd{margin-bottom:28px}
.wiz:focus,.wiz:focus-visible{outline:none}
.dr-back{margin-right:-2px;flex:none}

/* Shera's own palette (black, mint, Inter), used when an agency has no palette of its own and for the Shera demo.
   Set with <html data-palette="shera">; SmartEdge never sets it, so it keeps its warm palette. */
@font-face{font-family:'Inter';font-weight:400 700;font-display:swap;src:url(fonts/Inter.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-weight:400 700;font-display:swap;src:url(fonts/InterTight.woff2) format('woff2')}
:root[data-palette="shera"]{
  --sans:'Inter',ui-sans-serif,system-ui,sans-serif; --display:'Inter Tight',ui-sans-serif,system-ui,sans-serif;
  --ac:155,227,185; --accent:#9BE3B9; --good:#9BE3B9; --good-soft:rgba(155,227,185,.10); --good-tint:rgba(155,227,185,.16); --warn:#F0C987; --warn-soft:rgba(240,201,135,.10);
}
:root[data-palette="shera"]:not([data-theme="light"]){
  --bg:#050505; --surface:#121212; --side:#0B0B0B; --raise:#1A1A1A; --hover:rgba(255,255,255,.05);
  --ink:#F4F4F2; --ink-2:rgba(244,244,242,.66); --ink-3:rgba(244,244,242,.46); --ink-4:rgba(244,244,242,.26);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.15);
}
:root[data-palette="shera"] .num{font-family:var(--display);font-feature-settings:"tnum";letter-spacing:-.02em}
:root[data-palette="shera"]:not([data-theme="light"]) body::before{background:radial-gradient(760px 460px at 88% -8%,rgba(143,179,255,.10),transparent 70%) no-repeat,radial-gradient(640px 420px at 6% 102%,rgba(155,227,185,.07),transparent 70%) no-repeat,radial-gradient(rgba(244,244,242,.05) 1px,transparent 1.2px) 0 0/26px 26px,var(--bg)}
:root[data-palette="shera"]{--accent2:#8FB3FF}
:root[data-palette="shera"] .ov-stack i.r,:root[data-palette="shera"] .dr-days i{background:linear-gradient(180deg,var(--accent),var(--accent2))}
:root[data-palette="shera"] .ov-stack i.s{background:rgba(255,255,255,.16)}
:root[data-palette="shera"] .hero-spark path{stroke:var(--accent2)}
/* Account: tabs on the left, one glass card with the chosen section, save bar at the bottom */
.acct{display:grid;grid-template-columns:200px minmax(0,640px);gap:24px;align-items:start}
.acct-tabs{display:grid;gap:2px;position:sticky;top:76px}
.acct-tabs button{text-align:left;padding:9px 12px;border-radius:10px;color:var(--ink-2);font-size:14px;transition:background .2s,color .2s}
.acct-tabs button:hover{color:var(--ink);background:var(--hover)}
.acct-tabs button.on{color:var(--ink);background:linear-gradient(180deg,rgba(245,241,237,.08),rgba(245,241,237,.03));box-shadow:inset 0 0 0 1px var(--line-2)}
.acct-body{padding:0}
.acct-body section{display:grid;gap:18px;padding:24px 26px}
.acct-body section[hidden]{display:none}
.acct-h b{display:block;font:600 19px var(--display);letter-spacing:-.02em}.acct-h small{display:block;color:var(--ink-3);font-size:13px;margin-top:2px}
.acct-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.acct-row>span:first-child b{display:block;font-weight:500;color:var(--ink);font-size:14px}.acct-row>span:first-child small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:2px}
.acct-row select.field:not(.sel-native){width:auto;min-width:180px}
.acct-f{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:14px 26px;border-top:1px solid var(--line)}
.acct-f .pf-err{margin-right:auto}
/* an on/off switch around a real checkbox */
.switch{position:relative;display:inline-block;width:40px;height:24px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch i{position:absolute;inset:0;border-radius:999px;background:var(--line-2);transition:background .2s}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--ink);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.switch input:checked+i{background:var(--accent)}.switch input:checked+i::after{transform:translateX(16px);background:#fff}
.switch input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:760px){.acct{grid-template-columns:minmax(0,1fr)}.acct-body,.acct-body section{min-width:0}.pf-photo{flex-wrap:wrap}.acct-tabs{position:static;display:flex;overflow-x:auto}.acct-tabs button{white-space:nowrap}.acct-row{flex-wrap:wrap}.acct-row select.field{width:100%}}
/* client status: the light plus one word */
.hstat{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:2px 8px 2px 7px;border-radius:999px;font:500 11px var(--sans);color:var(--ink-2);background:var(--hover);white-space:nowrap;vertical-align:middle}
.hstat .hdot{margin:0}
.hstat.warn{color:#F5C26B}.hstat.bad{color:#FF7A66}
@media (max-width:640px){.tbl-wrap .hstat,#ov-table td .hstat{font-size:0;gap:0;padding:3px;margin-left:6px}.tbl-wrap .hstat .hdot,#ov-table td .hstat .hdot{display:inline-block}}
/* Actie nodig: every item says what clicking it does */
.todo-r{display:flex;align-items:center;gap:10px;justify-self:end}
.todo-go{font-size:12px;font-weight:500;color:var(--ink);padding:4px 10px;border-radius:999px;border:1px solid var(--line-2);white-space:nowrap;transition:background .2s,border-color .2s}
.todo:hover .todo-go{background:var(--accent);border-color:var(--accent);color:var(--on-accent,var(--bg))}
.todo-when{display:block;margin-top:2px}
.dr-inline{padding:6px 0 0;overflow:visible}.dr-inline .dr-tbl{margin:0 -26px}.dr-inline .dr-tbl table th:first-child,.dr-inline .dr-tbl table td:first-child{padding-left:26px}.dr-inline .dr-tbl table th:last-child,.dr-inline .dr-tbl table td:last-child{padding-right:26px}
/* overview, Aanpassen: every block shows whether it's visible; hidden ones fade until "Klaar" */
#overview-page .hd{align-items:flex-end}
.ov-editing [data-w]{position:relative;cursor:pointer;outline:1px dashed var(--line-2);outline-offset:3px;transition:opacity .2s}
.ov-editing [data-w].w-off{opacity:.38!important}
.w-tag{position:absolute;top:-10px;right:14px;z-index:2;font:500 11px var(--sans);padding:3px 9px;border-radius:999px;background:var(--accent);color:var(--on-accent,var(--bg));pointer-events:none}
.w-off>.w-tag{background:var(--hover);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.ov-row:has(>[data-w][hidden]){grid-template-columns:minmax(0,1fr)}
/* inline edit (test): a clickable figure shows it can be changed */
[data-edit]{cursor:pointer;transition:border-color .2s}
[data-edit]:hover{border-color:rgba(var(--ac),.45)!important}
[data-edit]:hover>span:first-child::after{content:" ✎";color:var(--accent)}
.ed-in{display:grid;gap:4px;margin-top:4px}.ed-in .field{height:34px;font-size:16px}.ed-in small{font-size:11px;color:var(--ink-3)}
/* Facturatie (agency side): plan + how they pay on top, plans, then invoices and billing details */
.bl-top{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;align-items:stretch}
.bl-side{padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.bl-side>small,.pl-now>small{color:var(--ink-3);font-size:12px}
.bl-big{font:600 22px var(--display);letter-spacing:-.02em}
.bl-side p{color:var(--ink-2);font-size:13px}.bl-side .btn{align-self:flex-start;margin:4px 0 6px}
.bl-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:13px}
.bl-row span{color:var(--ink-3)}.bl-row b{font-weight:500;text-align:right}.bl-row em{color:var(--ink-4);font-style:normal}
.bl-h{font:600 16px var(--display);margin:26px 0 12px}
.bl-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.bl-rows{padding:8px 20px 12px}
#bl-inv .empty-state{margin:10px 20px 20px}
@media (max-width:900px){.bl-top,.bl-two{grid-template-columns:minmax(0,1fr)}}
.pl-card .pl-for{color:var(--ink-3);font-size:12.5px;margin-top:-2px}
/* page entrance in the agency hub: the page's blocks rise in one after another, like the overview's cards */
.page.enter > *{animation:rise .42s cubic-bezier(.2,.7,.2,1) both}
.page.enter > :nth-child(2){animation-delay:.04s}
.page.enter > :nth-child(3){animation-delay:.08s}
.page.enter > :nth-child(n+4){animation-delay:.12s}
@media (prefers-reduced-motion:reduce){ .page.enter > *{animation:none} }

/* English: hidden for the moment until the page is translated (see the head of admin.html / index.html) */
html.i18n-wait body{visibility:hidden}
/* urgent calls waiting: first thing on the client overview */
:root .card.urgent-banner{display:flex;align-items:center;gap:12px;padding:14px 18px;margin-bottom:16px;border:1px solid rgba(255,122,102,.55);box-shadow:inset 3px 0 0 #FF7A66;background:linear-gradient(0deg,rgba(255,122,102,.08),rgba(255,122,102,.08)),var(--surface);color:var(--ink)}
.urgent-banner>span:nth-child(2){flex:1;min-width:0;display:grid;gap:2px}.urgent-banner b{font-weight:600}.urgent-banner small{color:var(--ink-2);font-size:13px}
.urgent-banner .hdot{flex:none}:root .card.urgent-banner:hover{border-color:rgba(255,122,102,.85)}
/* AI review per client (Inzichten > AI-review) */
.rv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px 20px 4px}
.rv-box{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;background:var(--hover)}
.rv-box h3{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin-bottom:8px}
.rv-box ul{display:grid;gap:6px;padding-left:0;list-style:none;font-size:13px;color:var(--ink-2);line-height:1.45}
.rv-box li b{color:var(--ink);font-weight:500}.rv-none,.rv-note{font-size:12.5px;color:var(--ink-3)}.rv-note{padding:4px 20px 0}
.hdot.up{background:var(--accent)}.hdot.dev{background:var(--ink-3)}
@media (max-width:760px){.rv-grid{grid-template-columns:minmax(0,1fr)}}