/* MaanSuk Mailer — design system v2
   The website brand: blue with violet, magenta, orange, green and sky accents. Antonio for page titles and big numbers, Inter for everything else.
   Light and dark themes share one set of tokens. */
:root{
  --ink:#0b1220;--text:#0b1220;--slate:#3b4757;--muted:#5a6676;--faint:#8a95a5;
  --border:#e2e8ee;--line:#edf1f5;--bg:#f1f4f7;--card:#ffffff;--soft:#f7f9fb;--input:#ffffff;
  --brand:#1b66c9;--brand-2:#3d82db;--brand-dark:#0f2a57;--brand-press:#0a1f42;--tint:#eef4fc;--tint-2:#dce9f9;--tint-edge:#9dbde6;--ring:rgba(27,102,201,.22);
  --ok:#0f6e56;--ok-bg:#e4f3ec;--warn:#854f0b;--warn-bg:#fff2d9;--warn-edge:#efdfb8;--bad:#b3261e;--bad-bg:#fcebe9;--bad-edge:#f1c2bd;
  --side:#0b1220;--side-2:#141a36;--side-text:#c6d0da;--side-muted:#8795a3;--green:#21c78a;
  --shadow:0 1px 2px rgba(15,25,35,.04),0 10px 28px -20px rgba(15,25,35,.25);
  --shadow-hover:0 2px 4px rgba(15,25,35,.05),0 18px 36px -22px rgba(15,25,35,.35);
  --r:16px;--r-sm:11px;--r-xs:8px;
  --font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--display:"Space Grotesk",Inter,system-ui,sans-serif;
  color-scheme:light;
}
:root[data-theme=dark]{
  --ink:#06101a;--text:#e9eef3;--slate:#b7c2cc;--muted:#8d9ba7;--faint:#6d7b88;
  --border:#232c47;--line:#19213a;--bg:#080c19;--card:#10162a;--soft:#0c1222;--input:#0c1222;
  --brand:#6f9cff;--brand-2:#8bb0ff;--brand-dark:#a9c4ff;--brand-press:#c4d6ff;--tint:rgba(111,156,255,.10);--tint-2:rgba(111,156,255,.18);--tint-edge:rgba(111,156,255,.45);--ring:rgba(111,156,255,.3);
  --ok:#5fd0ab;--ok-bg:rgba(95,208,171,.14);--warn:#e7b862;--warn-bg:rgba(231,184,98,.14);--warn-edge:rgba(231,184,98,.35);--bad:#f28b84;--bad-bg:rgba(242,139,132,.14);--bad-edge:rgba(242,139,132,.4);
  --side:#070b18;--side-2:#0f1530;--side-text:#c6d0da;--side-muted:#8795a3;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px -20px rgba(0,0,0,.6);--shadow-hover:0 2px 4px rgba(0,0,0,.35),0 18px 36px -22px rgba(0,0,0,.7);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;color:var(--text);font-family:var(--font);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
body{background:radial-gradient(1100px 420px at 18% -8%,rgba(123,77,255,.08),transparent 60%),var(--bg)}
:root[data-theme=dark] body{background:radial-gradient(1100px 420px at 18% -8%,rgba(123,77,255,.10),transparent 60%),var(--bg)}
a{color:var(--brand);text-decoration:none;transition:color .15s}a:hover{color:var(--brand-dark)}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em;font-family:var(--display)}
h1{font-size:20px}h2{font-size:15px}h3{font-size:13px}
p{margin:0}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
button{font:inherit}
input,select,textarea{font:inherit;color:var(--text)}
.muted{color:var(--muted)}.slate{color:var(--slate)}.small{font-size:12px}.tiny{font-size:11px}.strong{font-weight:600}.bold{font-weight:700}
.ok-text{color:var(--ok)}.warn-text{color:var(--warn)}.bad-text{color:var(--bad)}.brand-text{color:var(--brand-dark)}
.right{text-align:right}.center{text-align:center}.nowrap{white-space:nowrap}.grow{flex-grow:1}.hide{display:none}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.col{display:flex;flex-direction:column;gap:6px}.wrap{flex-wrap:wrap}
.gap-4{gap:4px}.gap-8{gap:8px}.gap-16{gap:16px}.gap-24{gap:24px}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mb-16{margin-bottom:16px}
.num{font-family:var(--display);font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{width:248px;flex:0 0 248px;background:linear-gradient(180deg,var(--side),var(--side-2));color:var(--side-text);display:flex;flex-direction:column;padding:20px 14px 16px;position:sticky;top:0;height:100vh;border-right:1px solid rgba(255,255,255,.04)}
.logo{display:flex;align-items:center;gap:12px;padding:6px 10px 22px;color:#fff}
.logo .mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--brand-2),var(--brand));display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 18px -8px rgba(91,63,214,.55)}
.logo b{display:block;font-size:15px;letter-spacing:-.01em;font-family:var(--display)}.logo span{display:block;font-size:11px;color:var(--side-muted);font-weight:500}
.logo.has-image{flex-direction:column;align-items:flex-start;gap:8px;padding:4px 6px 20px}
.logo-tile{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:12px;padding:8px 12px;max-width:100%;box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.logo-tile img{display:block;height:34px;max-width:170px;object-fit:contain}
/* the white logo sits directly on the dark panel, no tile */
.logo-tile.bare{background:transparent;box-shadow:none;padding:2px 0}.logo-tile.bare img{height:50px;max-width:190px}
/* pages whose background follows the theme (sign-in) carry both logos and show one */
img.theme-dark,.auth-logo img.theme-dark{display:none}
:root[data-theme=dark] .has-dark img.theme-light{display:none}:root[data-theme=dark] .has-dark img.theme-dark{display:block}
/* near-square logo files are cropped to their mark (class added by partials/logo_fit.ejs) */
.logo-tile img.sq{width:64px;height:48px;object-fit:cover}.logo-tile.bare img.sq{width:84px;height:62px}
.auth-logo img.sq{width:104px;height:76px;object-fit:cover}
.logo-preview img.sq{width:88px;height:64px;object-fit:cover}
.logo-caption{font-size:11px;color:var(--side-muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding-left:2px}
.auth-logo{display:flex;justify-content:center;padding:4px 0 2px}.auth-logo img{height:64px;max-width:240px;object-fit:contain}
.logo-preview{border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;align-items:center;justify-content:center;min-height:72px;background:var(--card)}.logo-preview img{height:44px;max-width:220px;object-fit:contain}
.logo-preview.dark{background:linear-gradient(180deg,var(--side),var(--side-2))}.logo-preview.dark .theme-dark{display:block;height:48px}
.nav{display:flex;flex-direction:column;gap:3px}
.nav a{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 14px;border-radius:11px;color:var(--side-text);font-size:14px;font-weight:500;transition:background .15s,color .15s}
.nav a svg{opacity:.85;transition:opacity .15s}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}.nav a:hover svg{opacity:1}
.nav a.active{background:linear-gradient(90deg,rgba(123,77,255,.30),rgba(123,77,255,.08));color:#fff;font-weight:600}
.nav a.active::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--green)}
.nav a.active svg{opacity:1;color:#8beaff}
.nav .badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#ff8a1c;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.side-status{margin:0 0 12px;padding:14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:8px}
.side-status .t{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#fff}
.side-status .d{font-size:12px;color:#aab5c0;line-height:1.5}
.side-status .bar{background:rgba(255,255,255,.12)}.side-status .bar i{background:var(--green)}
.side-user{display:flex;align-items:center;gap:10px;padding:8px 8px 4px}
.avatar{width:32px;height:32px;border-radius:50%;background:#26394a;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-family:var(--display);letter-spacing:.02em}
.avatar.light{background:var(--tint-2);color:var(--brand-dark);font-size:11px;box-shadow:0 0 0 2px var(--card)}
.side-user .txt{min-width:0;flex:1 1 auto}.side-user .txt b{display:block;font-size:13px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.side-user .txt span{display:block;font-size:11px;color:var(--side-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-user form{margin-left:auto}.side-user button,.theme-toggle{background:none;border:0;color:var(--side-muted);cursor:pointer;padding:6px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
.side-user button:hover,.theme-toggle:hover{color:#fff;background:rgba(255,255,255,.08)}
.theme-toggle .sun{display:none}:root[data-theme=dark] .theme-toggle .sun{display:block}:root[data-theme=dark] .theme-toggle .moon{display:none}
.main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--border);padding:0 32px;display:flex;flex-direction:column}
.topbar .bar-row{min-height:66px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 0}
.topbar .sub{font-size:12px;color:var(--muted);margin-top:1px}
.tabs{display:inline-flex;gap:2px;flex-wrap:wrap;padding:4px;border-radius:12px;background:var(--line);margin:0 0 12px;align-self:flex-start;max-width:100%}
.tabs a{padding:8px 12px;font-size:13px;font-weight:500;color:var(--slate);border-radius:9px;display:inline-flex;align-items:center;gap:8px;transition:background .15s,color .15s}
.tabs a:hover{color:var(--text)}
.tabs a.active{color:var(--brand-dark);font-weight:600;background:var(--card);box-shadow:0 1px 2px rgba(15,25,35,.10)}
.tabs .n{padding:1px 7px;border-radius:9px;background:var(--card);font-size:11px;font-weight:700;color:var(--slate);box-shadow:inset 0 0 0 1px var(--border)}
.tabs a.active .n{background:var(--tint-2);color:var(--brand-dark);box-shadow:none}.tabs .n.warn{background:var(--warn-bg);color:var(--warn);box-shadow:none}
.content{padding:24px 32px 56px;display:flex;flex-direction:column;gap:22px;max-width:1280px;width:100%}
.content.narrow{max-width:900px}

/* ---------- flash & bands ---------- */
.flash{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:12px;font-size:13px;border:1px solid}
.flash.ok{background:var(--ok-bg);border-color:transparent;color:var(--ok)}
.flash.bad{background:var(--bad-bg);border-color:transparent;color:var(--bad)}
.flash.warn{background:var(--warn-bg);border-color:transparent;color:var(--warn)}
.band{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:var(--r);background:var(--tint);border:1px solid var(--tint-edge);flex-wrap:wrap}
.band.warn{background:var(--warn-bg);border-color:var(--warn-edge)}.band.bad{background:var(--bad-bg);border-color:var(--bad-edge)}
.band .ic{width:40px;height:40px;border-radius:12px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.band.warn .ic{background:var(--warn)}.band.bad .ic{background:var(--bad)}
.band .t{font-size:15px;font-weight:600;font-family:var(--display)}.band .d{font-size:13px;color:var(--slate)}
/* hero band: dark teal gradient with the send ring */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:22px;padding:22px 26px;border-radius:20px;color:#fff;background:linear-gradient(110deg,#1b66c9,#5b3fd6 60%,#b2368f);box-shadow:0 20px 40px -24px rgba(58,42,140,.55);flex-wrap:wrap}
.hero::after{content:"";position:absolute;right:-80px;top:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(139,234,255,.22),transparent 65%);pointer-events:none}
.hero .eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8beaff;margin-bottom:6px}
.hero .t{font-size:19px;font-weight:700;font-family:var(--display);letter-spacing:-.01em;line-height:1.25}
.hero .d{font-size:13px;color:#c7dcdc;margin-top:6px;line-height:1.5;max-width:620px}
.hero .btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff}.hero .btn:hover{background:rgba(255,255,255,.18);color:#fff}
.hero .btn-primary{background:#fff;border-color:#fff;color:#0b1220}.hero .btn-primary:hover{background:#eef0ff;color:#0b1220}
.hero.warn{background:linear-gradient(120deg,#1d1508,#4a3208 55%,#8a5a12 100%)}.hero.warn .eyebrow{color:#f4d79a}.hero.warn .d{color:#efe2c7}
.hero.bad{background:linear-gradient(120deg,#1e0b0a,#5a1a16 55%,#9c3028 100%)}.hero.bad .eyebrow{color:#ffb4ad}.hero.bad .d{color:#f3d4d1}
.ring{position:relative;width:132px;height:132px;flex:0 0 132px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring .track{stroke:rgba(255,255,255,.14)}.ring .fill{stroke:#8beaff;stroke-dasharray:var(--c);stroke-dashoffset:var(--c);animation:ring 1.2s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes ring{to{stroke-dashoffset:var(--o)}}
.ring .lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}
.ring .lbl b{font-family:var(--display);font-size:26px;font-weight:700}.ring .lbl span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#c9d6ff;margin-top:4px}

/* ---------- cards & grids ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
a.card{transition:transform .18s,box-shadow .18s,border-color .18s}a.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--tint-edge)}
.card.pad{padding:20px 22px}.card.pad-sm{padding:16px 18px}
.card-h{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.card-b{padding:16px 22px}
.card.warn{border-color:var(--warn-edge);background:color-mix(in srgb,var(--warn-bg) 55%,var(--card))}
.card.dark{background:linear-gradient(135deg,#0b1220,#113a3f);color:#fff;border-color:transparent}
.grid{display:grid;gap:16px}.grid > *{min-width:0}
.line-row > summary > .small,.line-row > summary > div{min-width:0;overflow:hidden;text-overflow:ellipsis}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.span-2{grid-column:span 2}
.kpi{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px 22px}
.kpi .l{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.kpi .v{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}.kpi .v small{font-size:14px;font-weight:500;color:var(--muted);font-family:var(--font)}
.kpi .d{font-size:12px;color:var(--slate)}.kpi.sm .v{font-size:24px}
.kpi .ic{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:10px;background:var(--tint);color:var(--brand);display:flex;align-items:center;justify-content:center}
.kpi .ic.ok{background:var(--ok-bg);color:var(--ok)}.kpi .ic.warn{background:var(--warn-bg);color:var(--warn)}.kpi .ic.bad{background:var(--bad-bg);color:var(--bad)}

/* ---------- pills, dots, chips ---------- */
.pill{height:22px;padding:0 9px;border-radius:11px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;letter-spacing:.03em}
.pill.lg{height:26px;padding:0 10px;font-size:12px;font-weight:600;letter-spacing:0}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.brand{background:var(--tint-2);color:var(--brand-dark)}.pill.ok{background:var(--ok-bg);color:var(--ok)}.pill.warn{background:var(--warn-bg);color:var(--warn)}.pill.bad{background:var(--bad-bg);color:var(--bad)}.pill.grey{background:var(--line);color:var(--slate)}
.pill.brand i{animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.pill.dept{height:auto;padding:3px 9px;border-radius:10px;font-size:12px;font-weight:600;letter-spacing:0}
.pill.none{border:1px dashed #c9a24a;background:transparent;color:var(--warn)}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 10px;padding:0}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}.dot.info{background:var(--faint)}.dot.brand{background:var(--brand)}
.sw{width:10px;height:10px;border-radius:3px;display:inline-block;flex:0 0 10px}
.chip{height:32px;padding:0 12px;border-radius:16px;background:var(--card);border:1px solid var(--border);color:var(--slate);font-size:12px;font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:border-color .15s,background .15s}
.chip:hover{border-color:var(--tint-edge);color:var(--text)}
.chip.active{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
:root[data-theme=dark] .chip.active{background:var(--brand);border-color:var(--brand);color:#06101a}
.tag{padding:6px 10px;border-radius:8px;background:var(--soft);border:1px solid var(--line);font-size:12px;color:var(--slate)}.tag b{color:var(--text)}.tag.warn{background:var(--warn-bg);border-color:transparent;color:var(--warn)}

/* ---------- bars & charts ---------- */
.bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;display:flex}
.bar.lg{height:8px;border-radius:4px}.bar.xl{height:10px;border-radius:5px}
.bar i{display:block;height:100%;background:var(--brand);transform-origin:left;animation:grow .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes grow{from{transform:scaleX(0)}}
.bar i.ok{background:var(--ok)}.bar i.warn{background:var(--warn)}.bar i.grey{background:var(--faint)}.bar i.c1{background:var(--brand)}.bar i.c2{background:var(--ok)}.bar i.c3{background:var(--warn)}.bar i.c4{background:#4a6fa5}.bar i.c5{background:#8a5fb0}
.chart{display:flex;align-items:flex-end;gap:8px;height:160px;border-bottom:1px solid var(--border);padding:0 4px}
.chart .c{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;min-width:0;position:relative}
.chart .c span{display:block;border-radius:3px 3px 0 0;transform-origin:bottom;animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{transform:scaleY(0)}}
.chart .c .s{background:var(--brand)}.chart .c .o{background:#b4a3ff}.chart .c .b{background:var(--bad)}.chart .c .e{background:var(--line);height:4%}
.chart .c:hover span{filter:brightness(1.08)}
.chart .c:hover::after{content:attr(data-tip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:11px;padding:5px 9px;border-radius:7px;white-space:nowrap;margin-bottom:6px;z-index:2;box-shadow:0 6px 16px -8px rgba(0,0,0,.4)}
.axis{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);padding:0 4px}
.legend{display:flex;gap:14px;font-size:12px;color:var(--slate);flex-wrap:wrap}.legend span{display:inline-flex;align-items:center;gap:6px}
.window{position:relative;height:14px;border-radius:7px;background:var(--line);overflow:hidden}
.window i{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2))}.window b{position:absolute;top:0;width:2px;height:100%;background:var(--text)}

/* ---------- heatmap ---------- */
.heat{display:flex;flex-direction:column;gap:3px}
.heat-row{display:grid;grid-template-columns:34px repeat(24,minmax(0,1fr));gap:3px;align-items:center}
.heat-head span{font-size:10px;color:var(--muted);text-align:left}
.heat-label{font-size:11px;color:var(--slate);font-weight:600}
.heat-cell{display:block;height:18px;border-radius:4px;background:color-mix(in srgb,var(--brand) calc(var(--v) * 100%),var(--line));transition:transform .12s}
.heat-cell:hover{transform:scale(1.15)}
input[type=color]{border:1px solid var(--border);border-radius:8px;background:var(--input);cursor:pointer}

/* ---------- buttons ---------- */
.btn{height:38px;padding:0 14px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--card);color:var(--text);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s,transform .1s,box-shadow .15s;box-shadow:0 1px 1px rgba(15,25,35,.04)}
.btn:hover{background:var(--soft);color:var(--text);border-color:#cfd8df}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.chip:focus-visible,.tabs a:focus-visible{outline:0;box-shadow:0 0 0 3px var(--ring)}
.btn-primary{background:linear-gradient(180deg,var(--brand-2),var(--brand));border-color:transparent;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 18px -10px rgba(91,63,214,.55)}
.btn-primary:hover{background:linear-gradient(180deg,var(--brand),var(--brand-dark));color:#fff;border-color:transparent}
:root[data-theme=dark] .btn-primary{color:#06101a}:root[data-theme=dark] .btn-primary:hover{color:#06101a;background:linear-gradient(180deg,var(--brand-2),var(--brand))}
.btn-teal{background:var(--card);border-color:var(--tint-edge);color:var(--brand-dark)}.btn-teal:hover{background:var(--tint)}
.btn-danger{color:var(--bad);border-color:var(--bad-edge)}.btn-danger:hover{background:var(--bad-bg);color:var(--bad)}
.btn-sm{height:32px;padding:0 10px;font-size:12px}.btn-xs{height:28px;padding:0 9px;font-size:12px}
.btn-icon{width:38px;padding:0;justify-content:center}.btn-sm.btn-icon{width:32px}
.btn[disabled],.btn.disabled{opacity:.5;cursor:not-allowed;transform:none}
.link-btn{background:none;border:0;padding:0;color:var(--brand);font-weight:600;cursor:pointer;font-size:13px}.link-btn:hover{color:var(--brand-dark)}
.link-btn.danger{color:var(--bad)}
form.inline{display:inline}

/* ---------- menus ---------- */
details.menu{position:relative}
details.menu summary{list-style:none;cursor:pointer}details.menu summary::-webkit-details-marker{display:none}
details.menu .dd{position:absolute;right:0;top:calc(100% + 6px);min-width:210px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 34px -14px rgba(15,25,35,.35);padding:6px;z-index:30;display:flex;flex-direction:column;animation:drop .14s ease-out}
@keyframes drop{from{opacity:0;transform:translateY(-4px)}}
details.menu .dd a,details.menu .dd button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:9px 10px;border:0;background:none;border-radius:8px;color:var(--text);font-size:13px;font-weight:500;cursor:pointer}
details.menu .dd a:hover,details.menu .dd button:hover{background:var(--soft)}
details.menu .dd .danger{color:var(--bad)}details.menu .dd hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.export-menu .dd{min-width:250px;padding:8px}
.export-menu .dd-title{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:4px 10px 6px}
.export-menu .dd a{padding:8px 10px;gap:10px}
.export-menu .fmt{width:44px;height:26px;border-radius:7px;font-size:10px;font-weight:800;letter-spacing:.04em;display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;color:#fff;font-family:var(--display)}
.fmt.xlsx{background:#1d7a4a}.fmt.csv{background:#44525e}.fmt.pdf{background:#b3261e}.fmt.docx{background:#2b579a}.fmt.html{background:#ff8a1c}.fmt.json{background:#5b4bb5}
.export-menu summary svg:last-child{opacity:.6}

/* ---------- block email editor ---------- */
.bed{border:1px solid var(--border);border-radius:14px;background:var(--card);overflow:hidden}
.bed-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--soft);flex-wrap:wrap}
.bed-body{display:flex;min-height:420px}
.bed-canvas-wrap{flex:1 1 auto;min-width:0;background:#e9eef1;padding:24px 16px;overflow:auto}
:root[data-theme=dark] .bed-canvas-wrap{background:#0c1419}
.bed-canvas{width:600px;max-width:100%;margin:0 auto;background:#fff;color:#243434;border-radius:10px;box-shadow:0 10px 30px -18px rgba(0,0,0,.35);padding:28px 32px;min-height:300px;color-scheme:light}
.bed-block{position:relative;border:1px dashed transparent;border-radius:6px;margin:0 -8px;padding:4px 8px;transition:border-color .12s}
.bed-block:hover{border-color:#b9d9d9}.bed-block.sel{border-color:var(--brand);border-style:solid}
.bed-handles{position:absolute;top:-14px;right:4px;display:none;gap:2px;align-items:center;background:#0b1220;border-radius:8px;padding:3px 4px;z-index:3;box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.bed-block.sel .bed-handles,.bed-block:hover .bed-handles{display:flex}
.bed-handles .bed-tag{font-size:10px;font-weight:700;color:#c9d6ff;padding:0 6px;letter-spacing:.06em;text-transform:uppercase}
.bed-handles button{width:24px;height:22px;border:0;border-radius:5px;background:transparent;color:#fff;font-size:13px;cursor:pointer;line-height:1}
.bed-handles button:hover{background:rgba(255,255,255,.14)}.bed-handles button.danger:hover{background:#b3261e}
.bed-edit{outline:0;min-height:1em}.bed-edit:focus{box-shadow:0 0 0 2px rgba(27,102,201,.28);border-radius:4px}
.bed-edit p{margin:0 0 12px}.bed-edit p:last-child{margin-bottom:0}.bed-edit a{color:#1b66c9}
.bed-ph{padding:24px;text-align:center;border:1px dashed #c9d2db;border-radius:8px;color:#8a97a6;font-size:13px}
.bed-empty{padding:60px 20px;text-align:center;color:#8a97a6}
.bed-side{flex:0 0 280px;border-left:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:16px;overflow:auto;background:var(--card)}
.bed-side-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.bed-pal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.bed-pal-grid button{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:var(--card);color:var(--text);font-size:12px;font-weight:600;cursor:pointer;text-align:left}
.bed-pal-grid button:hover{border-color:var(--tint-edge);background:var(--tint)}
.bed-pal-grid b{width:26px;height:26px;border-radius:7px;background:var(--tint-2);color:var(--brand-dark);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-family:var(--display);flex:0 0 26px}
.bed-props{display:flex;flex-direction:column;gap:12px}
.bed-props .field input,.bed-props .field select,.bed-props .field textarea{height:36px;font-size:13px}.bed-props .field textarea{height:auto}
.bed-code{display:none;padding:12px}.bed.mode-html .bed-code{display:block}.bed.mode-html .bed-body{display:none}
.bed-textarea{width:100%;min-height:320px;border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.5;background:var(--input);color:var(--text)}
.bed-mini{position:absolute;display:none;gap:2px;background:#0b1220;border-radius:8px;padding:4px;z-index:50;box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.bed-mini button{border:0;background:transparent;color:#fff;font-size:12px;font-weight:600;padding:5px 8px;border-radius:5px;cursor:pointer}.bed-mini button:hover{background:rgba(255,255,255,.14)}
@media (max-width:900px){.bed-body{flex-direction:column}.bed-side{flex-basis:auto;border-left:0;border-top:1px solid var(--line)}.bed-canvas{padding:18px}}

/* ---------- motion ---------- */
.reveal{animation:fadeUp .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}}
.heat-cell{animation:pop .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)}
@keyframes pop{from{opacity:0;transform:scale(.6)}}
.kpi .v.counting{color:var(--text)}
.table tbody tr.reveal{animation-duration:.4s}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto}
table.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{padding:10px 12px;text-align:left;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;background:var(--soft);white-space:nowrap}
.table td{padding:12px;border-top:1px solid var(--line);vertical-align:middle}
.table th:first-child,.table td:first-child{padding-left:22px}.table th:last-child,.table td:last-child{padding-right:22px}
.table tr.hl{background:color-mix(in srgb,var(--warn-bg) 45%,var(--card))}.table tbody tr{transition:background .12s}.table tbody tr:hover td{background:var(--soft)}
.table .who{display:flex;align-items:center;gap:10px}.table .who .txt{min-width:0}.table .who .txt b{display:block;font-weight:600}.table .who .txt span{display:block;color:var(--muted);font-size:12px}
.status{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12px}.status i{width:7px;height:7px;border-radius:50%;background:currentColor}
.pager{display:flex;align-items:center;gap:8px;padding:12px 22px;border-top:1px solid var(--line);flex-wrap:wrap}
.pager a,.pager span.cur{height:32px;min-width:32px;padding:0 8px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;color:var(--text)}
.pager a:hover{background:var(--soft)}.pager span.cur{background:var(--brand);color:#fff;font-weight:600}
.toolbar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.search{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--soft);color:var(--muted);min-width:240px;transition:border-color .15s,box-shadow .15s}
.search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring);background:var(--input)}
.search input{border:0;outline:0;background:transparent;font-size:13px;color:var(--text);width:100%}
.select{height:36px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--input);font-size:13px;color:var(--text)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label,.label{font-size:13px;font-weight:600}
.field .help{font-size:12px;color:var(--muted)}
.input,.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=number],.field input[type=search],.field input[type=url],.field input[type=tel],.field select,.field textarea{height:40px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--input);font-size:14px;width:100%;transition:border-color .15s,box-shadow .15s}
.field textarea{height:auto;min-height:120px;padding:10px 12px;line-height:1.5;resize:vertical}
.field textarea.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;min-height:260px}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus,.select:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.check{display:flex;align-items:center;gap:8px;font-size:13px}.check input{width:16px;height:16px;accent-color:var(--brand)}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;background:var(--card)}
.seg label,.seg a{padding:0 14px;height:40px;display:inline-flex;align-items:center;font-size:13px;font-weight:500;color:var(--slate);cursor:pointer;border-left:1px solid var(--border);background:var(--card)}
.seg label:first-child,.seg a:first-child{border-left:0}
.seg input{display:none}.seg label:has(input:checked),.seg a.active{background:var(--brand);color:#fff;font-weight:600;border-left-color:rgba(255,255,255,.25)}
:root[data-theme=dark] .seg label:has(input:checked),:root[data-theme=dark] .seg a.active{color:#06101a}
.seg.sm label,.seg.sm a{height:36px;padding:0 12px;font-size:12px}
.plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.plan{display:flex;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.plan:hover{border-color:var(--tint-edge);transform:translateY(-1px)}
.plan input{margin-top:3px;accent-color:var(--brand)}.plan b{display:block;font-size:14px;font-weight:600}.plan span{display:block;font-size:12px;color:var(--muted);line-height:1.45}
.plan:has(input:checked){border:2px solid var(--brand);background:var(--tint);padding:13px 15px}.plan:has(input:checked) b{color:var(--brand-dark)}.plan:has(input:checked) span{color:var(--slate)}

/* ---------- steps ---------- */
.steps{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:8px}
.steps li{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--muted)}
.steps li a{color:inherit;display:flex;align-items:center;gap:8px}
.steps li.on{color:var(--text);font-weight:600}.steps li.done{color:var(--slate)}
.steps .n{width:26px;height:26px;border-radius:50%;border:1px solid var(--border);font-size:12px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700}
.steps li.on .n{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 0 0 4px var(--ring)}.steps li.done .n{background:var(--ok-bg);border-color:transparent;color:var(--ok)}
.steps .sep{width:32px;height:1px;background:var(--border)}

/* ---------- dark explain panel ---------- */
.dark-panel{background:linear-gradient(140deg,#0f2a57,#3a2a8c 62%,#7b2d8f);color:#fff;border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:16px;box-shadow:0 20px 40px -26px rgba(58,42,140,.6)}
.dark-panel .eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;color:#8beaff;text-transform:uppercase}
.dark-panel h2{color:#fff}
.dark-panel ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.dark-panel ol li{display:flex;gap:12px;font-size:13px;line-height:1.5;color:#d7dee5}
.dark-panel ol li .n{width:22px;height:22px;border-radius:50%;background:rgba(139,234,255,.16);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;color:#8beaff;font-family:var(--display)}
.dark-panel .kv{border-top:1px solid rgba(255,255,255,.12);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.dark-panel .kv div{display:flex;justify-content:space-between;font-size:13px}.dark-panel .kv span{color:#aab5c0}.dark-panel .kv b{font-weight:700;font-family:var(--display)}
.dark-panel .todo{padding:12px 14px;border-radius:10px;background:rgba(244,199,106,.14);color:#f4c76a;font-size:12px;line-height:1.5}
.dark-panel a{color:#b4a3ff}
.dark-panel .btn-primary{background:#fff;color:#0b1220;border-color:#fff}.dark-panel .btn-primary:hover{background:#eef0ff;color:#0b1220}

/* ---------- check rows ---------- */
.check-row{display:flex;gap:12px;padding:12px 22px;border-bottom:1px solid var(--line);align-items:flex-start}
.check-row:last-child{border-bottom:0}.check-row .dot{margin-top:5px}
.check-row b{display:block;font-size:13px;font-weight:600}.check-row p{font-size:12px;color:var(--muted);line-height:1.5}
.check-row .fix{margin-top:6px;font-size:12px;color:var(--text);padding:8px 10px;background:var(--soft);border:1px solid var(--border);border-radius:8px;line-height:1.5}
.check-row.bad{background:color-mix(in srgb,var(--bad-bg) 50%,var(--card))}.check-row .act{margin-left:auto;white-space:nowrap;font-size:12px;font-weight:600}
a.check-row{transition:background .12s}a.check-row:hover{background:var(--soft)}
.line-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;flex-wrap:wrap;background:var(--card)}
.line-row.missing{border:1px dashed #c9a24a;background:color-mix(in srgb,var(--warn-bg) 45%,var(--card))}
.empty{padding:44px 22px;text-align:center;color:var(--muted);font-size:13px}.empty b{display:block;color:var(--text);font-size:15px;margin-bottom:6px;font-family:var(--display)}
.subnav{display:flex;flex-direction:column;gap:2px;flex:0 0 200px}
.subnav a{padding:9px 12px;border-radius:10px;color:var(--slate);font-size:13px;font-weight:500;border:1px solid transparent}.subnav a.active,.subnav a:hover{background:var(--card);border-color:var(--border);color:var(--brand-dark);font-weight:600}
.two-col{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}.two-col > .lead{flex:1 1 560px;min-width:0}.two-col > .aside{flex:0 1 360px;min-width:280px}
.preview-frame{width:100%;height:420px;border:1px solid var(--border);border-radius:12px;background:#fff}
.events{list-style:none;margin:0;padding:0}.events li{display:flex;gap:12px;padding:10px 22px;border-top:1px solid var(--line);font-size:13px}.events li time{color:var(--muted);font-size:12px;white-space:nowrap;min-width:150px}
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth .box{width:100%;max-width:420px;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:32px;display:flex;flex-direction:column;gap:18px;box-shadow:var(--shadow-hover)}
kbd.key{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:var(--soft);border:1px solid var(--border);padding:6px 10px;border-radius:8px;word-break:break-all;color:var(--text)}
.menu-toggle{display:none}
.tabbar{display:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){.grid-4,.grid-6{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.span-2{grid-column:span 2}}
@media (max-width:900px){
  .shell{flex-direction:column}
  .sidebar{width:auto;flex:none;height:auto;position:sticky;top:0;z-index:30;padding:8px 12px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 8px;border-right:0}
  .logo{padding:4px 2px;flex:1 1 auto}.logo .mark{width:32px;height:32px}
  .logo.has-image{flex-direction:row;align-items:center;gap:10px;padding:2px}.logo-tile{padding:5px 9px;border-radius:9px}.logo-tile img{height:26px;max-width:130px}.logo-caption{display:none}
  .logo-tile.bare img{height:38px;max-width:140px}
  .logo-tile img.sq{width:48px;height:36px}.logo-tile.bare img.sq{width:60px;height:44px}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
  .sidebar .nav,.sidebar .side-status,.sidebar .side-user,.sidebar .grow{display:none}
  .sidebar.open .nav{display:flex;flex-direction:column;width:100%;padding:8px 0 4px;border-top:1px solid rgba(255,255,255,.08);margin-top:8px}
  .sidebar.open .side-user{display:flex;width:100%;border-top:1px solid rgba(255,255,255,.08);padding-top:10px}
  .sidebar.open .side-status{display:flex;width:100%}
  .nav a{padding:11px 12px;font-size:15px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom));justify-content:space-around}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 6px;min-width:56px;color:var(--muted);font-size:10.5px;font-weight:600;border-radius:8px}
  .tabbar a.active{color:var(--brand-dark)}.tabbar a.active svg{stroke:var(--brand)}
  .topbar{position:static;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--card)}
  .content{padding:16px 16px calc(84px + env(safe-area-inset-bottom));gap:16px}
  .topbar{padding:0 16px}.topbar .bar-row{min-height:0;padding:12px 0;gap:10px}.topbar h1{font-size:18px}
  .topbar .btn{height:36px;padding:0 12px;font-size:12px}
  .tabs{display:flex;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;align-self:stretch}.tabs::-webkit-scrollbar{display:none}.tabs a{white-space:nowrap;padding:8px 10px}
  .grid-2,.grid-3,.grid-4,.grid-6{grid-template-columns:1fr}.span-2{grid-column:span 1}
  .grid-4,.grid-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{padding:14px 16px}.kpi .v{font-size:22px}.kpi.sm .v{font-size:20px}.kpi .ic{width:28px;height:28px;top:12px;right:12px}
  .card.pad{padding:16px}.card-h{padding:14px 16px}.card-b{padding:14px 16px}
  .table th:first-child,.table td:first-child{padding-left:16px}.table th:last-child,.table td:last-child{padding-right:16px}
  .plan-grid{grid-template-columns:1fr}
  .subnav{flex-direction:row;flex-wrap:nowrap;flex-basis:auto;overflow-x:auto;width:100%;gap:6px;padding-bottom:4px;scrollbar-width:none}.subnav::-webkit-scrollbar{display:none}.subnav a{white-space:nowrap;border:1px solid var(--border);background:var(--card);padding:8px 11px}
  .two-col{gap:16px}.two-col > .aside{flex:1 1 100%;min-width:0}
  .steps{flex-wrap:wrap;gap:6px 8px}.steps .sep{display:none}.steps li{font-size:12px}
  .band{padding:14px 16px}.band .t{font-size:14px}
  .hero{padding:18px}.hero .t{font-size:17px}.ring{width:104px;height:104px;flex-basis:104px}.ring .lbl b{font-size:20px}
  .toolbar{padding:12px 16px;gap:8px}.search{min-width:0;flex:1 1 100%}.select{max-width:100%}
  .chart{gap:4px;height:130px}.axis span:nth-child(2),.axis span:nth-child(3){display:none}
  .dark-panel{padding:18px}
  .pager{padding:10px 16px}
  .check-row{padding:12px 16px;flex-wrap:wrap}.check-row .grow{flex:1 1 220px}.check-row .act{margin-left:auto}
  .auth{padding:16px;align-items:flex-start;padding-top:48px}.auth .box{padding:24px}
  .preview-frame{height:320px}
  .heat-cell{height:12px}.heat-row{gap:2px}
}
@media (max-width:480px){
  /* long emails and URLs may break anywhere on small phones; tables keep scrolling sideways instead */
  .content,.auth,.main{overflow-wrap:anywhere}.table td,.table th{overflow-wrap:normal}
  /* segmented controls (sending days, filters) become wrapping pills so they never run past the edge */
  .seg{display:flex;flex-wrap:wrap;gap:6px;border:0;background:transparent;overflow:visible;border-radius:0}
  .seg label,.seg a{flex:1 1 auto;justify-content:center;height:36px;padding:0 10px;border:1px solid var(--border)!important;border-radius:var(--r-sm)}
  .grid-4,.grid-6{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi .v{font-size:20px}.kpi .d{font-size:11px}
  .topbar .bar-row{flex-direction:column;align-items:stretch}.topbar .bar-row > .grow{display:none}.topbar .bar-row .btn,.topbar .bar-row form{width:100%}.topbar .bar-row form .btn,.topbar .bar-row .btn{justify-content:center}
  .topbar .bar-row > a.btn-icon{width:38px;align-self:flex-start}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.sidebar,.topbar .btn,.toolbar,.pager,.tabbar{display:none}.content{max-width:none;padding:0}.card{box-shadow:none;break-inside:avoid}}

/* ====================================================================================================
   v12 look (2026-11-12). Floating brand sidebar with the signed-in person on top, a cut-out active item,
   a soft tinted page and borderless cards. Everything an administrator can change in Settings → Appearance
   is one attribute on <html> or the single variable --brand-base; the rules below derive the rest.
   ==================================================================================================== */
:root{
  --brand-base:#1b66c9;
  --brand:var(--brand-base);--brand-2:color-mix(in srgb,var(--brand-base) 86%,#fff);--brand-dark:color-mix(in srgb,var(--brand-base) 72%,#000);--brand-press:color-mix(in srgb,var(--brand-base) 50%,#000);
  --tint:color-mix(in srgb,var(--brand-base) 7%,#fff);--tint-2:color-mix(in srgb,var(--brand-base) 14%,#fff);--tint-edge:color-mix(in srgb,var(--brand-base) 40%,#fff);--ring:color-mix(in srgb,var(--brand-base) 24%,transparent);
  --bg:color-mix(in srgb,var(--brand-base) 8%,#f0f3f4);
  --tone-1:var(--brand-base);--tone-2:#2f74c0;--tone-3:#7a5fc4;--tone-4:#b87514;--tone-5:#8494a1;
  --side-a:color-mix(in srgb,var(--brand-base) 90%,#000);--side-b:color-mix(in srgb,var(--brand-base) 56%,#0f2a57);
  --side-ink:#fff;--side-text:rgba(255,255,255,.88);--side-muted:rgba(255,255,255,.66);--side-line:rgba(255,255,255,.16);--side-soft:rgba(255,255,255,.11);--side-well:rgba(0,0,0,.17);
  --shell-gap:14px;--side-r:24px;
  --shadow:0 1px 2px rgba(16,40,45,.04),0 14px 34px -24px rgba(16,40,45,.30);
  accent-color:var(--brand);
}
/* the two companion colours follow the brand colour round the wheel where the browser can work that out */
@supports (color:oklch(from red l c h)){:root{--tone-2:oklch(from var(--brand-base) calc(l + .03) c calc(h + 58));--tone-3:oklch(from var(--brand-base) calc(l + .05) c calc(h + 108))}}
:root[data-theme=dark]{
  --brand:color-mix(in srgb,var(--brand-base) 60%,#fff);--brand-2:color-mix(in srgb,var(--brand-base) 48%,#fff);--brand-dark:color-mix(in srgb,var(--brand-base) 36%,#fff);--brand-press:color-mix(in srgb,var(--brand-base) 26%,#fff);
  --tint:color-mix(in srgb,var(--brand) 10%,transparent);--tint-2:color-mix(in srgb,var(--brand) 18%,transparent);--tint-edge:color-mix(in srgb,var(--brand) 45%,transparent);--ring:color-mix(in srgb,var(--brand) 30%,transparent);
  --bg:#080c19;--tone-4:#d9a441;--tone-5:#7d8b97;
  --side-a:color-mix(in srgb,var(--brand-base) 44%,#070b18);--side-b:color-mix(in srgb,var(--brand-base) 20%,#070b18);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px -20px rgba(0,0,0,.6);
}
@supports (color:oklch(from red l c h)){:root[data-theme=dark]{--brand:oklch(from var(--brand-base) calc(l + .2) c h);--tone-2:oklch(from var(--brand-base) calc(l + .22) c calc(h + 58));--tone-3:oklch(from var(--brand-base) calc(l + .24) c calc(h + 108))}}
:root[data-side=dark]{--side-a:#0b1220;--side-b:#1a1844}
:root[data-side=light]{--side-a:var(--card);--side-b:var(--card);--side-ink:var(--text);--side-text:var(--slate);--side-muted:var(--muted);--side-line:var(--line);--side-soft:var(--soft);--side-well:var(--soft)}
:root[data-bg=plain]{--bg:#f1f4f7}:root[data-theme=dark][data-bg=plain]{--bg:#080c19}
:root[data-round=sm]{--r:8px;--r-sm:6px;--r-xs:5px;--side-r:12px}
:root[data-round=lg]{--r:22px;--r-sm:14px;--r-xs:10px;--side-r:30px}
:root{--zoom:1}:root[data-scale=small]{--zoom:.92;zoom:.92}:root[data-scale=large]{--zoom:1.1;zoom:1.1}
/* the whole page is zoomed, so a full-height element has to ask for the window height divided by the zoom */
.shell{min-height:calc(100vh / var(--zoom))}
.logo-tile.two .lg-main{display:none}
:root[data-side=light]:not([data-theme=dark]) .logo-tile.two .lg-main{display:block}:root[data-side=light]:not([data-theme=dark]) .logo-tile.two .lg-white{display:none}

body,:root[data-theme=dark] body{background:var(--bg)}
::selection{background:color-mix(in srgb,var(--brand) 28%,transparent)}
html{scrollbar-color:color-mix(in srgb,var(--brand-base) 30%,var(--border)) transparent}
.table td{font-variant-numeric:tabular-nums}
/* only the small key hints: a bare "kbd" rule also caught the long command boxes in Settings (kbd.key) and stopped them wrapping on phones */
.palette-in kbd,.side-search kbd{font:600 10.5px/1.5 var(--font);padding:1px 6px;border-radius:5px;border:1px solid var(--border);background:var(--soft);color:var(--muted);white-space:nowrap}
kbd.key{white-space:normal;overflow-wrap:anywhere}

/* ---- sidebar: colours for every width ---- */
.sidebar{background:linear-gradient(180deg,var(--side-a),var(--side-b));color:var(--side-text);border-right:0}
.logo{color:var(--side-ink)}.logo span,.logo-caption{color:var(--side-muted)}
.nav a{color:var(--side-text)}.nav a:hover{background:var(--side-soft);color:var(--side-ink)}
.nav a.active{background:var(--side-soft);color:var(--side-ink)}.nav a.active svg{color:var(--side-ink)}
.side-status{background:var(--side-well);border-color:transparent}.side-status .t{color:var(--side-ink)}.side-status .d{color:var(--side-muted)}.side-status .bar{background:var(--side-line)}
.side-user{gap:6px;padding:4px 2px 2px}
.side-user button,.theme-toggle{color:var(--side-muted);min-width:34px;height:34px}
.side-user button:hover,.theme-toggle:hover{color:var(--side-ink);background:var(--side-soft)}
.menu-toggle{background:var(--side-soft)!important;color:var(--side-ink)!important}
.side-search{flex:1 1 auto;min-width:0;gap:7px;padding:0 9px!important;border-radius:10px!important;background:var(--side-soft)!important;color:var(--side-text)!important;font-size:12.5px;justify-content:flex-start!important}
.side-search span{flex:1 1 auto;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-search kbd{background:transparent;border-color:var(--side-line);color:var(--side-muted);padding:0 4px;font-size:10px}
.side-search:hover{color:var(--side-ink)!important}
.side-me{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;padding:18px 12px 16px;margin:0 0 14px;border-radius:18px;background:var(--side-well);color:var(--side-ink);transition:background .15s}
.side-me:hover{background:color-mix(in srgb,var(--side-well) 60%,var(--side-soft));color:var(--side-ink)}
.side-me .txt{min-width:0;max-width:100%}
.side-me b{display:block;font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-me .txt span{display:block;font-size:11.5px;color:var(--side-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar.me{width:56px;height:56px;font-size:18px;background:var(--side-soft);color:var(--side-ink);box-shadow:0 0 0 3px var(--side-a),0 0 0 5px color-mix(in srgb,var(--green) 85%,transparent)}
:root[data-side=light] .sidebar{box-shadow:var(--shadow)}
:root[data-side=light] .avatar.me{background:var(--tint-2);color:var(--brand-dark);box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--tint-edge)}
:root[data-side=light] .nav a.active{background:var(--tint-2);color:var(--brand-dark)}:root[data-side=light] .nav a.active svg{color:var(--brand)}
:root[data-side=light] .side-status .bar i{background:var(--brand)}

/* ---- desktop: the sidebar floats, and the active item opens into the page ---- */
@media (min-width:901px){
  .shell{padding:var(--shell-gap) 0 var(--shell-gap) var(--shell-gap)}
  .sidebar{height:calc(100vh / var(--zoom) - 2 * var(--shell-gap));top:var(--shell-gap);border-radius:var(--side-r);padding:16px 14px 12px;box-shadow:0 22px 44px -26px color-mix(in srgb,var(--side-b) 80%,transparent)}
  .logo.has-image{align-items:center;padding:2px 6px 14px}
  .logo-tile.bare img{height:44px}.logo-tile.bare img.sq{width:76px;height:56px}
  .nav{gap:4px}
  .nav a{padding:11px 16px;border-radius:999px}
  .nav a.active::before{display:none}
  :root:not([data-side=light]) .nav a.active{background:var(--bg);color:var(--brand-dark);margin-right:-14px;border-radius:999px 0 0 999px}
  :root:not([data-side=light]) .nav a.active svg{color:var(--brand)}
  :root:not([data-side=light]) .nav a.active::before,:root:not([data-side=light]) .nav a.active::after{content:"";display:block;position:absolute;right:0;left:auto;width:22px;height:22px;background:transparent;pointer-events:none}
  /* the two concave corners: a quarter circle cut out of a square of page colour */
  :root:not([data-side=light]) .nav a.active::before{top:-22px;bottom:auto;border-radius:0;background:radial-gradient(circle at 0 0,transparent 21.5px,var(--bg) 22px)}
  :root:not([data-side=light]) .nav a.active::after{top:100%;border-radius:0;background:radial-gradient(circle at 0 100%,transparent 21.5px,var(--bg) 22px)}
  .nav a.active .badge{margin-right:12px}
  .topbar{background:color-mix(in srgb,var(--bg) 84%,transparent);border-bottom:0;padding:0 28px}
  .topbar .bar-row{min-height:70px}
  .topbar h1{font-size:23px;letter-spacing:-.02em}
  .content{padding:6px 28px 56px}
}
@media (min-width:901px) and (max-height:720px){.side-me{flex-direction:row;text-align:left;padding:10px 12px;gap:10px}.avatar.me{width:38px;height:38px;font-size:13px}.side-status{display:none}}
@media (max-width:900px){
  .sidebar .side-me{display:none}
  .sidebar.open .side-me{display:flex;flex-direction:row;text-align:left;width:100%;margin:10px 0 0;padding:10px 12px;gap:10px}
  .sidebar.open .avatar.me{width:38px;height:38px;font-size:13px}
  .sidebar.open .nav{border-top-color:var(--side-line)}.sidebar.open .side-user{border-top-color:var(--side-line)}
  .topbar{background:transparent;border-bottom:0}
}

/* ---- cards carry a shadow, not an outline (dark keeps the outline: shadows do not read on black) ---- */
.card{border-color:transparent}
:root[data-theme=dark] .card{border-color:var(--border)}
.hero{border-radius:calc(var(--r) + 4px);background:linear-gradient(120deg,color-mix(in srgb,var(--brand-base) 58%,#0f2a57),var(--brand-base));box-shadow:0 22px 40px -26px color-mix(in srgb,var(--brand-base) 70%,#000)}
.hero .t{font-size:21px}.hero .d{color:rgba(255,255,255,.84)}
/* a paused campaign is not an alarm: the banner stays in the brand colour and only a real server problem turns it red */
.hero.warn{background:linear-gradient(120deg,color-mix(in srgb,var(--brand-base) 58%,#0f2a57),var(--brand-base))}.hero.warn .d{color:rgba(255,255,255,.84)}
.card.dark{background:linear-gradient(135deg,color-mix(in srgb,var(--brand-base) 40%,#070b18),color-mix(in srgb,var(--brand-base) 78%,#000))}

/* ---- compact density ---- */
:root[data-density=compact] .content{gap:14px}
:root[data-density=compact] .card.pad{padding:14px 16px}:root[data-density=compact] .card-h{padding:11px 16px}:root[data-density=compact] .card-b{padding:11px 16px}
:root[data-density=compact] .table td{padding:7px 12px}:root[data-density=compact] .table th{padding:7px 12px}
:root[data-density=compact] .nav a{padding:8px 16px}:root[data-density=compact] .kpi{padding:14px 16px;gap:6px}
:root[data-density=compact] .topbar .bar-row{min-height:54px;padding:8px 0}
:root[data-density=compact] .side-me{padding:12px}:root[data-density=compact] .ticket{padding:11px 22px}

/* ---- dashboard ---- */
.dash-top{display:grid;grid-template-columns:minmax(0,2fr) minmax(270px,1fr);gap:16px}
.progress-card{display:flex;flex-direction:column;gap:14px}
.progress-card .body{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.progress-card .ring{width:112px;height:112px;flex:0 0 112px}
.progress-card .ring .track{stroke:var(--line)}.progress-card .ring .fill{stroke:var(--brand)}
.progress-card .ring .lbl b{color:var(--text);font-size:23px}.progress-card .ring .lbl span{color:var(--muted)}
.progress-card .say{flex:1 1 150px;min-width:0;display:flex;flex-direction:column;gap:4px}
.progress-card .say b{font-family:var(--display);font-size:15px}.progress-card .say span{font-size:12.5px;color:var(--slate);line-height:1.5}
.kpi.tone{background:color-mix(in srgb,var(--tone) 9%,var(--card));box-shadow:none}
.kpi.tone .ic{background:color-mix(in srgb,var(--tone) 17%,var(--card));color:var(--tone)}
.kpi.tone .bar{background:color-mix(in srgb,var(--tone) 17%,var(--card))}.kpi.tone .bar i{background:var(--tone)}
.t1{--tone:var(--tone-1)}.t2{--tone:var(--tone-2)}.t3{--tone:var(--tone-3)}.t4{--tone:var(--tone-4)}.t5{--tone:var(--tone-5)}
:root[data-theme=dark] .kpi.tone .ic{color:color-mix(in srgb,var(--tone) 55%,#fff)}
.dept-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dept-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:18px 20px;border-radius:var(--r);color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--tone) 90%,#000),color-mix(in srgb,var(--tone) 60%,#000));box-shadow:0 18px 32px -22px color-mix(in srgb,var(--tone) 80%,#000);transition:transform .18s,box-shadow .18s}
a.dept-card:hover{color:#fff;transform:translateY(-2px);box-shadow:0 22px 36px -22px color-mix(in srgb,var(--tone) 90%,#000)}
:root[data-theme=dark] .dept-card{background:linear-gradient(135deg,color-mix(in srgb,var(--tone) 52%,#070b18),color-mix(in srgb,var(--tone) 30%,#070b18))}
.dept-card .name{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:-.01em}
.dept-card .v{font-family:var(--display);font-size:28px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}.dept-card .v small{font-size:13px;font-weight:500;color:rgba(255,255,255,.82)}
.dept-card .d{font-size:12px;color:rgba(255,255,255,.86)}
.dept-card .bar{background:rgba(255,255,255,.24)}.dept-card .bar i{background:#fff}
.dept-card .deco{position:absolute;right:-14px;top:-12px;width:96px;height:96px;opacity:.13;pointer-events:none}.dept-card .deco svg{width:100%;height:100%}
.tickets{overflow:hidden}
.ticket{position:relative;display:flex;align-items:center;gap:18px;padding:16px 26px;color:inherit;flex-wrap:wrap;transition:background .15s}
a.ticket:hover{background:var(--soft);color:inherit}
.ticket + .ticket{border-top:1.5px dashed var(--border)}
.ticket + .ticket::before,.ticket + .ticket::after{content:"";position:absolute;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--bg)}
.ticket + .ticket::before{left:-9px}.ticket + .ticket::after{right:-9px}
.donut{position:relative;width:168px;height:168px;margin:0 auto;flex:0 0 auto}
.donut svg{width:100%;height:100%;transform:rotate(-90deg)}.donut circle{fill:none;stroke-width:5.4}
.donut .lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.donut .lbl b{font-family:var(--display);font-size:22px;font-variant-numeric:tabular-nums}.donut .lbl span{font-size:11px;color:var(--muted);margin-top:3px}
.share-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:13px}
.share-list li{display:flex;align-items:center;gap:9px;min-width:0}.share-list i{width:10px;height:10px;border-radius:3px;flex:0 0 10px;background:var(--tone)}
.share-list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.share-list b{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600}.share-list em{font-style:normal;color:var(--muted);font-size:12px;min-width:38px;text-align:right}
.quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.quick a,.quick button{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--r-sm);border:0;background:color-mix(in srgb,var(--tone) 9%,var(--card));color:var(--text);font:600 13px var(--font);cursor:pointer;text-align:left;width:100%;transition:background .15s}
.quick a:hover,.quick button:hover{background:color-mix(in srgb,var(--tone) 17%,var(--card));color:var(--text)}
.quick a:focus-visible,.quick button:focus-visible{outline:0;box-shadow:0 0 0 3px var(--ring)}
.quick .ic{width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--tone) 18%,var(--card));color:var(--tone);display:flex;align-items:center;justify-content:center;flex:0 0 30px}
:root[data-theme=dark] .quick .ic{color:color-mix(in srgb,var(--tone) 55%,#fff)}
.quick form{display:contents}
@media (max-width:1100px){.dash-top{grid-template-columns:1fr}}
@media (max-width:760px){.dept-cards{grid-template-columns:1fr}.ticket{padding:14px 18px;gap:12px}.quick{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.quick{grid-template-columns:1fr}}

/* ---- quick search ---- */
dialog.palette{border:0;padding:0;background:transparent;color:var(--text);width:min(620px,calc(100vw - 24px));max-width:none;margin:12vh auto auto}
dialog.palette::backdrop{background:rgba(8,20,24,.46)}
.palette-in{background:var(--card);border-radius:var(--r);border:1px solid var(--border);box-shadow:0 30px 70px -30px rgba(0,0,0,.55);overflow:hidden}
.palette-box{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);color:var(--muted)}
.palette-box input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;font-size:15px;color:var(--text)}
.palette-box input::-webkit-search-cancel-button{display:none}
.palette-list{max-height:min(52vh,420px);overflow:auto;padding:6px}
.palette-group{padding:10px 10px 4px;font-size:11px;font-weight:700;color:var(--muted)}
.palette-item{display:flex;flex-direction:column;gap:1px;padding:9px 10px;border-radius:9px;color:var(--text)}
.palette-item span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette-item.sel,.palette-item:hover{background:var(--tint);color:var(--text)}
.palette-empty{padding:26px 16px;text-align:center;color:var(--muted);font-size:13px}
.palette-foot{display:flex;gap:16px;padding:9px 14px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
@media (max-width:600px){dialog.palette{margin-top:10px}.palette-foot{display:none}}

/* ---- filters (Build a report, and the filter bars above lists) ---- */
.filters .filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 18px;padding:18px 22px}
.filters .field{min-width:0;display:flex;flex-direction:column;gap:6px;border:0;padding:0;margin:0}
.filters .field.wide{grid-column:1 / -1}
.filters .field > label,.filters .field > .label,.filters legend.label{font-size:12px;font-weight:600;color:var(--slate);padding:0}
.filters .field > .select,.filters .field > input.select{width:100%}
.filters input.select::placeholder{color:var(--faint)}
.filter-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 22px;border-top:1px solid var(--line);background:var(--soft);border-radius:0 0 var(--r) var(--r)}
.daterange{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
/* inside a field every control is normally full width; in a row of controls each keeps its own width */
.daterange .select,.filters .field .row > .select,.toolbar .daterange .select{width:auto;flex:0 1 auto}
.filters details.multi > summary.select,.filters .field > select.select{height:38px}
.daterange input[type=date]{min-width:0;max-width:150px}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.picks label{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 12px;border-radius:16px;border:1px solid var(--border);background:var(--card);font-size:12.5px;font-weight:500;color:var(--slate);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.picks label:hover{border-color:var(--tint-edge);color:var(--text)}
.picks input{position:absolute;opacity:0;pointer-events:none}
.picks label:has(input:checked){background:var(--tint-2);border-color:var(--brand);color:var(--brand-dark);font-weight:600}
.picks label:has(input:focus-visible){box-shadow:0 0 0 3px var(--ring)}
.picks em{font-style:normal;font-weight:400;font-size:11.5px;color:var(--muted)}
details.multi > summary.select{display:flex;align-items:center;gap:8px;justify-content:space-between;width:100%}
details.multi > summary.select span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.multi .dd{left:0;right:auto;min-width:min(420px,calc(100vw - 48px));max-height:320px;overflow:auto;padding:6px}
details.multi .dd label{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:13px;cursor:pointer}
details.multi .dd label:hover{background:var(--soft)}
details.multi .dd label span{flex:1 1 auto;min-width:0}details.multi .dd label em{font-style:normal;font-size:11px;color:var(--muted)}
details.cols > summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--brand-dark)}
.pill.grey{background:var(--line);color:var(--slate)}
:root[data-density=compact] .filters .filter-grid{gap:12px 14px;padding:14px 16px}
@media (max-width:1100px){.filters .filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.filters .filter-grid{grid-template-columns:1fr;padding:14px 16px}.filter-foot{padding:12px 16px}.daterange input[type=date]{max-width:none;flex:1 1 130px}}

/* ---- Settings → Appearance ---- */
/* a fieldset is as wide as its widest content unless told otherwise, which pushed the page sideways on phones */
fieldset.field{min-width:0}
.choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.choice label{position:relative;display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--card);cursor:pointer;transition:border-color .15s,background .15s}
.choice label:hover{border-color:var(--tint-edge)}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice label:has(input:checked){border-color:var(--brand);background:var(--tint);box-shadow:inset 0 0 0 1px var(--brand)}
.choice label:has(input:focus-visible){box-shadow:0 0 0 3px var(--ring)}
.choice b{font-size:13px;font-weight:600}.choice span{font-size:12px;color:var(--muted);line-height:1.4}
.swatches{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.swatch{width:28px;height:28px;border-radius:50%;border:2px solid var(--card);box-shadow:0 0 0 1px var(--border);cursor:pointer;padding:0;background:var(--c)}
.swatch:hover,.swatch:focus-visible{outline:0;box-shadow:0 0 0 2px var(--ring),0 0 0 1px var(--border)}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px 16px}
.checks label{display:flex;align-items:center;gap:9px;font-size:13px;cursor:pointer}

/* ---------- v12.3: refresh button, chart cards ---------- */
.refresh-btn svg{transition:transform .2s}.refresh-btn.spinning svg{animation:ms-spin .7s linear infinite}@keyframes ms-spin{to{transform:rotate(360deg)}}
@media (max-width:760px){.refresh-btn span{display:none}.refresh-btn{padding-inline:10px}}
@media (prefers-reduced-motion:reduce){.refresh-btn.spinning svg{animation:none}}
@media print{.refresh-btn{display:none}.vz-card{break-inside:avoid}}
.vz-card.card.pad{padding:18px 20px}
.link-cell{max-width:440px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== Outreach: pipeline board and hot leads ===== */
:root{--hot:#c2410c;--hot-bg:#fde8dc;--warm:#1b66c9;--warm-bg:#dfeafa;--in:#7c2d12;--in-bg:#ffedd5;--us:#312e81;--us-bg:#e0e7ff}
:root[data-theme=dark]{--hot:#ff9b6a;--hot-bg:rgba(255,155,106,.16);--warm:#7fb4f5;--warm-bg:rgba(127,180,245,.16);--in:#fdba74;--in-bg:rgba(253,186,116,.14);--us:#c7d2fe;--us-bg:rgba(199,210,254,.14)}
.kanban{display:flex;gap:12px;overflow-x:auto;padding:4px 18px 18px;align-items:flex-start}
.kcol{flex:0 0 250px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain}
.kcol-h{display:flex;align-items:center;gap:8px;position:sticky;top:-10px;background:var(--soft);margin:-10px -10px 0;padding:10px 14px 4px;z-index:1}
.kcol-h h3{font-size:14px}
.kcol-hint{padding:0 4px}
.kdot{width:10px;height:10px;border-radius:50%;background:var(--faint);flex:none}
.k-emailed .kdot{background:#5d8fd6}.k-opened .kdot{background:var(--brand)}.k-clicked .kdot{background:#7c3aed}.k-replied .kdot{background:#d97706}.k-booked .kdot{background:var(--hot)}.k-won .kdot{background:var(--ok)}.k-lost .kdot{background:var(--faint)}
.kn{margin-left:auto;font-size:12px;font-weight:700;color:var(--slate);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:1px 9px}
.kcard{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-xs);padding:10px 11px;color:var(--text);box-shadow:var(--shadow);transition:box-shadow .15s,border-color .15s}
.kcard:hover{color:var(--text);border-color:var(--tint-edge);box-shadow:var(--shadow-hover)}
.kc-top{display:flex;align-items:flex-start;gap:8px}
.kc-name{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.kc-name b{font-size:13.5px;line-height:1.3}
.kc-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kc-tags{display:flex;flex-wrap:wrap;gap:5px}
.kc-next{color:var(--brand);border-top:1px solid var(--line);padding-top:6px}
.ktag{font-size:11px;font-weight:600;border-radius:6px;padding:2px 7px;background:var(--tint);color:var(--slate)}
.ktag.m-in{background:var(--in-bg);color:var(--in);font-weight:700}.ktag.m-us{background:var(--us-bg);color:var(--us);font-weight:700}
.kscore{min-width:32px;height:24px;padding:0 6px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:13px;background:var(--line);color:var(--slate);flex:none}
.kscore.hot{background:var(--hot);color:#fff}.kscore.warm{background:var(--warm-bg);color:var(--warm)}
:root[data-theme=dark] .kscore.hot{color:#1a0b03}
.kscore.lg{min-width:48px;height:48px;border-radius:12px;font-size:18px}
.kempty{text-align:center;padding:16px 6px;border:1px dashed var(--border);border-radius:var(--r-xs)}
.hot-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:14px 22px;border-top:1px solid var(--line)}
.lead-score{display:flex;align-items:center;gap:12px}
.sig-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:5px 0;border-bottom:1px solid var(--line)}
.fu-step{border:1px solid var(--border);border-radius:var(--r-sm);padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--soft)}
.win-days{display:flex;flex-wrap:wrap;gap:6px}
.win-days label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:13px;cursor:pointer;background:var(--card)}
@media (max-width:600px){.kanban{padding:4px 12px 14px}.kcol{flex-basis:236px}.hot-row{padding:14px}}

/* ====================================================================================================
   Website brand (maansuktech.com): the same blue, violet, magenta, orange, green and sky as the site and its
   enquiries admin, Antonio for page titles and big numbers, Inter for the rest. Both fonts ship with the app.
   ==================================================================================================== */
@font-face{font-family:"Antonio";src:url("fonts/antonio.woff2") format("woff2");font-weight:100 700;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --violet:#7b4dff;--plum:#5b3fd6;--berry:#b2368f;--magenta:#ff3d9a;--orange:#ff8a1c;--mint:#21c78a;--sky:#29b6f6;--navy:#0f2a57;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --head:"Antonio","Oswald","Arial Narrow",sans-serif;
  --ink:#0b1220;--text:#0b1220;--slate:#3b4757;--muted:#5a6676;--faint:#8a95a5;
  --bg:#f5f2fd;
  --tone-1:var(--brand-base);--tone-2:#7b4dff;--tone-3:#ff3d9a;--tone-4:#ff8a1c;--tone-5:#21c78a;
  --side-a:var(--brand-base);--side-b:#5b3fd6;
  --shadow:0 1px 2px rgba(16,32,64,.04),0 12px 32px -18px rgba(27,52,110,.22);
  --shadow-hover:0 2px 4px rgba(16,32,64,.05),0 22px 40px -22px rgba(27,52,110,.32);
}
:root[data-bg=plain]{--bg:#f4f6fb}
:root[data-theme=dark]{
  --text:#eaf0fb;--slate:#b6c2d6;--muted:#8d9ab0;--faint:#68758c;
  --bg:#080c19;--tone-2:#9a7bff;--tone-3:#ff6db3;--tone-4:#ffa04d;--tone-5:#4fd8a5;
  --side-a:color-mix(in srgb,var(--brand-base) 55%,#070b18);--side-b:#241a52;
}
@supports (color:oklch(from red l c h)){:root{--tone-2:#7b4dff;--tone-3:#ff3d9a}:root[data-theme=dark]{--tone-2:#9a7bff;--tone-3:#ff6db3}}

/* the page: the website's soft pastel washes, kept off the left edge so the open nav tab still meets a flat colour */
body{background:radial-gradient(900px 520px at 100% -6%,rgba(41,182,246,.13),transparent 62%),radial-gradient(760px 520px at 62% 108%,rgba(255,61,154,.08),transparent 60%),radial-gradient(700px 420px at 38% -10%,rgba(123,77,255,.10),transparent 62%),var(--bg);background-attachment:fixed}
:root[data-bg=plain] body{background:var(--bg)}
:root[data-theme=dark] body{background:radial-gradient(900px 520px at 100% -6%,rgba(41,182,246,.08),transparent 62%),radial-gradient(700px 420px at 38% -10%,rgba(123,77,255,.12),transparent 62%),var(--bg);background-attachment:fixed}

/* the sidebar: the website's blue → violet → berry */
:root:not([data-side]) .sidebar,:root[data-side=brand] .sidebar{background:linear-gradient(168deg,var(--side-a) 0%,var(--side-b) 62%,color-mix(in srgb,var(--side-b) 45%,#b2368f) 100%)}
:root[data-theme=dark]:not([data-side=light]):not([data-side=dark]) .sidebar{background:linear-gradient(168deg,var(--side-a),var(--side-b) 70%,#3a1846)}
.side-status .bar i{background:linear-gradient(90deg,var(--mint),var(--sky))}

/* type: Antonio where the website uses it, on titles and big figures */
.topbar h1,.auth h1{font-family:var(--head);font-weight:600;letter-spacing:.01em;font-size:30px;line-height:1.05}
@media (min-width:901px){.topbar h1{font-size:32px;letter-spacing:.01em}}
.kpi .v,.ring .lbl b,.hero .t,.side-me b,.empty b,.dark-panel h3,.kscore.lg{font-family:var(--head);letter-spacing:.01em}
.kpi .v{font-size:38px;font-weight:600}
.hero .t{font-size:26px;font-weight:600}
.side-me b{font-size:19px;font-weight:600}
.dark-panel h3{font-size:24px;font-weight:600}
.kscore.lg{font-size:24px;font-weight:600}

/* buttons: the website's blue → violet call to action */
.btn-primary,:root[data-theme=dark] .btn-primary{background:linear-gradient(120deg,var(--brand-base),#7b4dff);border-color:transparent;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 22px -12px rgba(91,63,214,.75)}
.btn-primary:hover,:root[data-theme=dark] .btn-primary:hover{background:linear-gradient(120deg,color-mix(in srgb,var(--brand-base) 85%,#000),#6a3dff);color:#fff}
.hero .btn-primary,.dark-panel .btn-primary{background:#fff;color:var(--ink);box-shadow:none}.hero .btn-primary:hover,.dark-panel .btn-primary:hover{background:#eef0ff;color:var(--ink)}
.steps li.on .n{background:linear-gradient(120deg,var(--brand-base),#7b4dff);border-color:transparent;color:#fff;box-shadow:0 0 0 4px var(--ring)}

/* banners and dark panels: the website's navy → indigo → purple */
.hero,.hero.warn{background:linear-gradient(110deg,var(--brand-base),#5b3fd6 60%,#b2368f);box-shadow:0 22px 40px -26px rgba(91,63,214,.7)}
.card.dark,.dark-panel{background:linear-gradient(140deg,#0f2a57,#3a2a8c 62%,#7b2d8f)}
.dark-panel .eyebrow,.hero .eyebrow{color:#8beaff}
.dark-panel a{color:#c9d6ff}

/* outreach: each pipeline stage takes one of the website's colours */
:root{--hot:#e8590c;--hot-bg:#ffeadb;--warm:#1b66c9;--warm-bg:#e3edfb;--in:#b4440a;--in-bg:#fff0e0;--us:#5b3fd6;--us-bg:#efe9ff}
:root[data-theme=dark]{--hot:#ffa04d;--hot-bg:rgba(255,138,28,.16);--warm:#8bb0ff;--warm-bg:rgba(111,156,255,.16);--in:#ffb877;--in-bg:rgba(255,138,28,.14);--us:#c3b2ff;--us-bg:rgba(123,77,255,.18)}
.k-prospect .kdot{background:var(--faint)}.k-emailed .kdot{background:var(--sky)}.k-opened .kdot{background:var(--brand-base)}.k-clicked .kdot{background:var(--violet)}.k-replied .kdot{background:var(--orange)}.k-booked .kdot{background:var(--magenta)}.k-won .kdot{background:var(--mint)}
.kscore.hot,:root[data-theme=dark] .kscore.hot{background:linear-gradient(135deg,#f0660f,#e0267f);color:#fff}
.chart .c .o{background:#b4a3ff}
.topbar .sub{margin-top:5px}
@media (max-width:900px){.topbar h1{font-size:26px}}
.auth-title{display:block;font-family:var(--head);font-size:28px;font-weight:600;letter-spacing:.01em;line-height:1.1}
:root .hero .btn-primary,:root[data-theme=dark] .hero .btn-primary,:root .dark-panel .btn-primary,:root[data-theme=dark] .dark-panel .btn-primary{background:#fff;color:#0b1220;box-shadow:none}
:root .hero .btn-primary:hover,:root[data-theme=dark] .hero .btn-primary:hover,:root .dark-panel .btn-primary:hover,:root[data-theme=dark] .dark-panel .btn-primary:hover{background:#eef0ff;color:#0b1220}