@font-face { font-family:'Fredoka'; font-style:normal; font-weight:300 700; font-display:swap; src:url('/assets/fonts/fredoka-latin.woff2') format('woff2'); }
@font-face { font-family:'Nunito'; font-style:normal; font-weight:200 1000; font-display:swap; src:url('/assets/fonts/nunito-latin.woff2') format('woff2'); }

/* ── Tokens ────────────────────────────────────────────────────────────────
   One 8-point rhythm for every gap and padding (4 is the half step), one
   readable measure for prose, and the Dogoos tones with an "ink" shade for
   text on their soft tints. */
:root {
  --teal:#1FB6AB; --teal-bright:#2AC7BB; --teal-ink:#11786F; --deep:#126F69; --accent-text:#126F69; --ink:#15201E;
  --sub:#4D5F5B; --faint:#617571; --bg:#F3F8F7; --card:#FFFFFF; --soft:#E4F7F4;
  --cream:#FDF8EE; --line:#DDEAE7; --line-strong:#C9DCD8;
  --gold:#F2A93B; --coral:#E46E66; --grape:#7959BF;
  --mint-soft:#E6F7F3; --gold-soft:#FFF4E0; --coral-soft:#FFEFED; --grape-soft:#F1ECFB;
  --mint-ink:#16675F; --gold-ink:#7A520F; --coral-ink:#9A342E; --grape-ink:#5B3FA0;
  --side:#101A18; --shadow:0 20px 55px -30px rgba(12,52,47,.35);
  --card-shadow:0 1px 2px rgba(16,40,36,.04),0 14px 34px -28px rgba(16,60,55,.45);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:40px; --s8:48px;
  --r-s:10px; --r-m:14px; --r-l:20px;
  --measure:70ch;
  --sidebar:264px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { min-width:280px; background:var(--bg); scrollbar-gutter:stable; }
body { font-family:'Nunito',system-ui,sans-serif; font-size:16px; color:var(--ink); background:var(--bg); line-height:1.5; -webkit-font-smoothing:antialiased; }
button,input,textarea,select { font:inherit; }
button { color:inherit; }
a { color:var(--accent-text); }
img { display:block; max-width:100%; }
h1,h2,h3,h4,.side-brand span { font-family:'Fredoka','Nunito',sans-serif; line-height:1.15; font-weight:600; letter-spacing:-.01em; }
h1 { font-size:clamp(1.6rem,2.4vw,2rem); }
h2 { font-size:clamp(1.3rem,2vw,1.6rem); }
h3 { font-size:1.15rem; }
h4 { font-size:1rem; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:1.25em; height:1.25em; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.25em; }
.skip-link { position:fixed; z-index:1000; top:var(--s2); left:var(--s2); padding:var(--s2) var(--s3); border-radius:var(--r-s); background:#fff; color:#111; font-weight:900; transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.eyebrow { margin-bottom:var(--s1); color:var(--teal-ink); font-size:.75rem; font-weight:1000; letter-spacing:.12em; text-transform:uppercase; }
.fatal { min-height:100vh; display:grid; place-items:center; align-content:center; gap:var(--s3); padding:var(--s6); text-align:center; }

/* ── Authentication (the six-box code stays exactly as it is) ────────────── */
.auth-screen { min-height:100svh; display:grid; grid-template-columns:minmax(320px,1.08fr) minmax(390px,.92fr); background:var(--side); }
.auth-brand { position:relative; min-height:100svh; padding:48px clamp(28px,6vw,84px); overflow:hidden; color:#fff; background:radial-gradient(circle at 85% 15%,rgba(42,199,187,.23),transparent 35%),radial-gradient(circle at 10% 80%,rgba(242,169,59,.17),transparent 33%),linear-gradient(145deg,#111C1A,#0B3733); }
.auth-brand > a { display:inline-block; }
.auth-brand-copy { position:relative; z-index:2; max-width:580px; margin-top:clamp(80px,13vh,150px); }
.auth-brand-copy .eyebrow { color:#8FE3D9; }
.auth-brand-copy h1 { max-width:9ch; font-size:clamp(3.5rem,7vw,7rem); letter-spacing:-.055em; }
.auth-brand-copy > p:last-child { max-width:47ch; margin-top:var(--s5); color:#C3DDD8; font-size:1.12rem; font-weight:700; }
.auth-rex { position:absolute; right:6%; bottom:12px; width:min(27vw,270px); }
.auth-paws { position:absolute; left:12%; bottom:42px; display:flex; gap:var(--s5); rotate:-16deg; color:rgba(127,229,220,.28); font-size:1.5rem; }
.auth-panel { display:grid; place-items:center; min-height:100svh; padding:var(--s6); background:linear-gradient(145deg,#F3F8F7,#E9F6F3); }
.auth-card { width:min(500px,100%); padding:clamp(28px,5vw,52px); border:1.5px solid var(--line); border-radius:28px; background:#fff; box-shadow:0 32px 80px -38px rgba(10,50,45,.5); }
.auth-lock { width:52px; height:52px; display:grid; place-items:center; margin-bottom:28px; border-radius:17px; color:#fff; background:linear-gradient(145deg,var(--teal-bright),var(--deep)); font-size:1.35rem; box-shadow:0 14px 28px -14px rgba(31,182,171,.8); }
.auth-step > p:not(.eyebrow), .auth-small { color:var(--sub); font-weight:700; }
.auth-step h2 { margin-bottom:var(--s3); }
.auth-loading { min-height:330px; display:flex; flex-direction:column; justify-content:center; }
.auth-loader-stage { position:relative; height:144px; margin:22px 0 12px; overflow:hidden; border-radius:20px; background:linear-gradient(180deg,var(--soft),rgba(228,247,244,.18)); }
.auth-loader-stage i { position:absolute; right:16px; bottom:22px; left:16px; height:2px; overflow:hidden; background:var(--line); }
.auth-loader-stage i::after { content:""; position:absolute; inset:0; width:45%; border-radius:999px; background:linear-gradient(90deg,transparent,var(--teal-bright),transparent); animation:auth-track 1.45s ease-in-out infinite; }
.auth-loader-rex { position:absolute; bottom:23px; left:calc(50% - 84px); width:168px; height:112px; background:url('/assets/rex-run.webp') 0 0 / 1344px 112px no-repeat; animation:auth-rex-run .72s steps(8) infinite; filter:drop-shadow(0 9px 11px rgba(10,50,45,.22)); }
.auth-loading-note { color:var(--faint) !important; font-size:.78rem; }
@keyframes auth-track { from { transform:translateX(-125%); } to { transform:translateX(225%); } }
@keyframes auth-rex-run { to { background-position:-1344px 0; } }
.auth-assurances { display:grid; gap:var(--s3); margin:26px 0; list-style:none; color:var(--sub); font-weight:800; }
.auth-assurances span { display:inline-grid; place-items:center; width:22px; height:22px; margin-right:var(--s2); border-radius:50%; background:var(--soft); color:var(--accent-text); font-size:.8rem; vertical-align:-5px; }
.auth-assurances .icon { stroke-width:2.6; }
.auth-small { margin-top:var(--s4); text-align:center; font-size:.8rem; }
.google-mark { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#fff; color:#4285F4; font-family:Arial,sans-serif; font-weight:900; }
.auth-step form { display:grid; gap:var(--s3); margin-top:var(--s5); }
.totp-qr { width:232px; height:232px; max-width:100%; display:block; margin:20px auto 8px; border:10px solid #fff; border-radius:14px; background:#fff; image-rendering:pixelated; }
.qr-help { text-align:center; color:var(--faint) !important; font-size:.78rem; }
.auth-step label { display:grid; gap:var(--s2); color:var(--sub); font-size:.84rem; font-weight:900; }
/* A single accessible autofill input, presented as six code boxes. */
.otp-code{position:relative;display:block;width:100%;margin:6px 0}
.otp-code-digits{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(6px,2vw,10px);pointer-events:none}
/* Resting code cells need a visible edge (3:1 or better) so six boxes read as six boxes, not one text field; the business workspace uses the same edge. */
:root{--code-edge:#8D847B;--code-fill:#F7F5F0}
.otp-code-digits>span{display:grid;place-items:center;min-width:0;height:56px;border:1.5px solid var(--code-edge);border-radius:12px;background:var(--code-fill);color:var(--ink);font:700 1.6rem/1 'Fredoka',sans-serif}
.otp-code-digits>span.filled{border-color:var(--deep);background:var(--soft,var(--surface,#fff))}
.otp-code.focused .current{border-color:var(--deep);box-shadow:0 0 0 3px var(--soft,var(--line))}
.otp-code .otp-code-input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:12px;background:transparent;color:transparent;caret-color:transparent;font-size:16px;letter-spacing:0;box-shadow:none;outline:none}
.otp-code .otp-code-input::selection{background:transparent;color:transparent}
.otp-code:has(.otp-code-input:disabled){opacity:.65}
@media(prefers-reduced-motion:reduce){.otp-code *{transition:none}}
.totp-factor { width:100%; min-height:44px; padding:9px 12px; border:1.5px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); font-weight:800; }
.secret-box { display:grid; grid-template-columns:1fr auto; gap:var(--s2) var(--s4); margin-top:22px; padding:var(--s4); border:1.5px solid #B8E5E0; border-radius:18px; background:var(--soft); }
.secret-box span { color:var(--sub); font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.secret-box b,.secret-box code { grid-column:1/-1; overflow-wrap:anywhere; }
.secret-box code { padding:10px; border-radius:10px; background:#fff; color:var(--ink); font-size:.98rem; font-weight:800; letter-spacing:.09em; user-select:all; }
.secret-box button { justify-self:start; margin-top:5px; }

/* ── Buttons, notices, badges ──────────────────────────────────────────── */
.button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; gap:var(--s2); border:0; border-radius:var(--r-m); padding:10px 18px; cursor:pointer; font-weight:900; line-height:1.2; text-align:center; text-decoration:none; transition:transform .16s ease,box-shadow .2s,filter .2s,background-color .2s; }
.button:hover:not(:disabled) { transform:translateY(-1px); }
.button:active:not(:disabled) { transform:translateY(0); }
.button:disabled { opacity:.45; cursor:not-allowed; }
.button .icon { width:1.1em; height:1.1em; }
.button-primary { background:linear-gradient(135deg,var(--teal-bright),var(--deep)); color:#fff; box-shadow:0 12px 25px -14px rgba(20,127,120,.8); }
.button-secondary { border:1.5px solid var(--line-strong); background:var(--card); color:var(--ink); }
.button-secondary:hover:not(:disabled) { border-color:var(--teal); }
.button-quiet { background:transparent; color:var(--sub); }
.button-quiet:hover:not(:disabled) { background:var(--mint-soft); color:var(--ink); }
.button-danger { border:1.5px solid #F0C3C0; background:#FFF2F1; color:#9A342E; }
.button-wide { width:100%; }
.button-small { min-height:36px; padding:var(--s2) var(--s3); border-radius:var(--r-s); font-size:.84rem; }
.form-error { margin-top:var(--s3); padding:var(--s3) var(--s4); border-radius:var(--r-s); background:#FFF1F0; color:#9A342E; font-size:.875rem; font-weight:800; }
.notice { display:grid; gap:var(--s1); padding:var(--s4); border-radius:var(--r-m); font-size:.875rem; line-height:1.55; }
p.notice { display:block; }
.notice b { font-weight:1000; }
.notice span { color:inherit; opacity:.9; }
.notice-warn { border:1px solid #ECD5A8; background:#FFF8E8; color:#6E4A16; }
.notice-info { border:1px solid #BCE3DF; background:#EFFAF8; color:#22524D; }
.status-badge { display:inline-flex; align-items:center; width:max-content; max-width:100%; min-height:24px; padding:3px var(--s2); border-radius:999px; background:var(--soft); color:var(--mint-ink); font-size:.72rem; font-weight:1000; letter-spacing:.03em; line-height:1.2; }
.status-badge[data-state="approved"] { background:var(--grape-soft); color:var(--grape-ink); }
.status-badge[data-state="approve"],.status-badge[data-state="pending"],.status-badge[data-state="draft"] { background:var(--gold-soft); color:var(--gold-ink); }
.status-badge[data-state="published"],.status-badge[data-state="live"],.status-badge[data-state="active"] { background:#E9F8EF; color:#22663F; }
.status-badge[data-state="failed"],.status-badge[data-state="cancelled"],.status-badge[data-state="revoked"] { background:#FFF0EF; color:#9B3A34; }
.status-badge[data-state="locked"] { background:var(--bg); color:var(--sub); }
.data-note { flex:none; color:var(--faint); font-size:.8125rem; font-weight:800; }
.section-note { max-width:var(--measure); color:var(--sub); font-size:.9rem; line-height:1.6; }
.field-help { margin-top:calc(-1 * var(--s2)); color:var(--faint); font-size:.8125rem; font-weight:700; }
.empty-note { margin-top:var(--s3); color:var(--sub); font-size:.9rem; }
.empty-card { padding:var(--s5); border:1.5px dashed var(--line-strong); border-radius:var(--r-l); background:var(--card); text-align:center; }
.empty-card h3 { font-size:1.05rem; }
.empty-card p { max-width:56ch; margin:var(--s1) auto 0; color:var(--sub); font-size:.9rem; }

/* ── App shell ─────────────────────────────────────────────────────────── */
.app-shell { min-height:100svh; display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); }
.sidebar { position:fixed; z-index:40; inset:0 auto 0 0; width:var(--sidebar); display:flex; flex-direction:column; padding:var(--s5) var(--s4) var(--s4); overflow-y:auto; overscroll-behavior:contain; color:#E7F3F0; background:radial-gradient(circle at 20% 8%,rgba(31,182,171,.17),transparent 26%),var(--side); }
.side-brand { display:flex; align-items:center; gap:var(--s3); padding:var(--s1) var(--s2) var(--s5); border-bottom:1px solid rgba(255,255,255,.08); }
.side-brand img { width:124px; }
.side-brand span { padding-left:var(--s3); border-left:1px solid rgba(255,255,255,.2); color:#8BCBC4; font-size:.85rem; }
.side-nav { display:grid; gap:var(--s4); margin-top:var(--s5); }
.nav-group { display:grid; gap:2px; }
.nav-label { padding:0 var(--s3) var(--s1); color:#7FA19B; font-size:.6875rem; font-weight:1000; letter-spacing:.14em; text-transform:uppercase; }
.side-nav button { position:relative; width:100%; min-height:44px; display:flex; align-items:center; gap:var(--s3); border:0; border-radius:12px; padding:var(--s2) var(--s3); background:transparent; color:#B9CEC9; cursor:pointer; text-align:left; font-size:.95rem; font-weight:800; transition:background-color .15s,color .15s; }
.side-nav button .icon { width:20px; height:20px; color:#7FB8B0; }
.side-nav button:hover { background:rgba(127,229,220,.08); color:#fff; }
.side-nav button.is-active { background:rgba(127,229,220,.15); color:#fff; }
.side-nav button.is-active::before { content:""; position:absolute; top:10px; bottom:10px; left:-16px; width:4px; border-radius:0 4px 4px 0; background:var(--teal-bright); }
.side-nav button.is-active .icon { color:#7FE5DC; }
.nav-text { flex:1; min-width:0; }
.nav-count { display:inline-grid; place-items:center; min-width:24px; height:22px; padding:0 7px; border-radius:999px; background:var(--gold); color:#3B2A05; font-size:.75rem; font-weight:1000; font-variant-numeric:tabular-nums; }
.nav-count[data-tone="coral"] { background:#FF8C83; color:#3D0F0B; }
.side-foot { display:grid; gap:var(--s3); margin-top:auto; padding-top:var(--s4); border-top:1px solid rgba(255,255,255,.08); }
.side-user { display:flex; gap:var(--s3); align-items:center; min-width:0; padding:0 var(--s1); }
.side-user > div { min-width:0; }
.side-user b,.side-user small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-user small { color:#86A6A1; font-size:.75rem; }
.avatar { flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(145deg,var(--teal),var(--deep)); color:#fff; font:600 .8rem/1 'Fredoka',sans-serif; }
.side-links { display:grid; gap:2px; }
.side-links button,.side-links a { display:flex; align-items:center; gap:var(--s2); min-height:36px; border:0; border-radius:var(--r-s); padding:var(--s1) var(--s2); background:transparent; color:#9DB8B3; cursor:pointer; font-size:.84rem; font-weight:800; text-decoration:none; text-align:left; }
.side-links button:hover,.side-links a:hover { background:rgba(127,229,220,.08); color:#fff; }
.menu-scrim { position:fixed; z-index:35; inset:0; background:rgba(4,15,13,.5); }
.workspace { grid-column:2; min-width:0; padding:0 clamp(var(--s4),3vw,var(--s7)) var(--s8); }
.topbar { min-height:88px; display:flex; align-items:center; gap:var(--s4); padding:var(--s5) 0 var(--s4); }
.topbar-title { flex:1; min-width:0; }
.topbar .eyebrow { margin:0 0 2px; }
.topbar h1 { font-size:clamp(1.6rem,2.4vw,2rem); }
/* A landing moves focus to the view title; its ring hugs the words. */
#viewTitle { width:fit-content; max-width:100%; border-radius:var(--r-s); }
.top-actions { display:flex; align-items:center; gap:var(--s2); }
.secure-pill { display:flex; align-items:center; gap:var(--s2); min-height:36px; padding:var(--s1) var(--s3); border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--sub); font-size:.78rem; font-weight:900; }
.secure-pill i { width:8px; height:8px; border-radius:50%; background:#39B979; box-shadow:0 0 0 4px rgba(57,185,121,.13); }
.icon-button,.menu-button { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); cursor:pointer; }
.menu-button { display:none; }
/* The rhythm between a view's blocks is a gap, so no block's own margin can
   collapse it (a tab strip once sat on the line above it). */
.view { max-width:1240px; margin:0 auto; display:flex; flex-direction:column; gap:var(--s6); }

/* ── Page structure: purpose line, section heads, panels ───────────────── */
.page-intro { display:flex; align-items:center; justify-content:space-between; gap:var(--s5); }
.page-intro > p,.page-intro > div > p { max-width:var(--measure); color:var(--sub); font-size:1.05rem; font-weight:600; line-height:1.6; }
.page-intro > img { flex:none; width:96px; height:auto; }
.page-help { border:1px solid var(--line); border-radius:var(--r-m); background:var(--card); color:var(--sub); }
.page-help summary { padding:var(--s3) var(--s4); color:var(--ink); cursor:pointer; font-size:.9rem; font-weight:900; }
.page-help summary::marker { color:var(--teal); }
.page-help[open] summary { border-bottom:1px solid var(--line); }
.page-help > p,.page-help > ul,.page-help > ol { max-width:var(--measure); margin:var(--s3) var(--s4) var(--s4); font-size:.875rem; line-height:1.6; }
.page-help > ul,.page-help > ol { padding-left:var(--s5); }
.page-help li + li { margin-top:var(--s2); }
.page-help > form { margin:var(--s3) var(--s4) var(--s4); }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s4); }
.section-head > div { min-width:0; max-width:var(--measure); }
.section-head .eyebrow { margin-bottom:var(--s1); }
.section-head h2 { font-size:1.375rem; }
.section-head h3 { font-size:1.125rem; }
.section-purpose { margin-top:var(--s1); color:var(--sub); font-size:.9375rem; line-height:1.55; }
.panel { min-width:0; padding:var(--s5); border:1px solid var(--line); border-radius:var(--r-l); background:var(--card); box-shadow:var(--card-shadow); }
.split-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5); align-items:start; }
.list-section > .filter-row { margin-bottom:var(--s4); }
.is-arrived { animation:arrive 2.2s ease; }
@keyframes arrive { 0%,45% { box-shadow:0 0 0 4px rgba(242,169,59,.55); } 100% { box-shadow:0 0 0 0 rgba(242,169,59,0); } }
.section-head.is-arrived { border-radius:var(--r-m); }

/* ── Today's desk ──────────────────────────────────────────────────────── */
.desk-hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--s5); padding:var(--s6) var(--s6) var(--s5); overflow:hidden; border-radius:24px; color:#fff; background:radial-gradient(circle at 88% 22%,rgba(127,229,220,.22),transparent 30%),linear-gradient(135deg,#12201E,#0F5D57); box-shadow:var(--shadow); }
.desk-hero .eyebrow { color:#8FE3D9; }
.desk-hero h2 { max-width:24ch; font-size:clamp(1.75rem,3.2vw,2.5rem); color:#fff; }
.desk-hero p:not(.eyebrow) { max-width:60ch; margin-top:var(--s2); color:#C9E2DD; font-size:1.05rem; font-weight:700; }
.desk-rex { align-self:end; width:150px; height:auto; margin-bottom:calc(-1 * var(--s6)); }
.health-strip { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); margin-top:var(--s5); }
.health-summary { margin-right:var(--s2); color:#E3F2EF; font-size:.875rem; font-weight:900; }
.health-chip { display:inline-flex; align-items:center; gap:var(--s2); min-height:32px; padding:var(--s1) var(--s3); border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(255,255,255,.07); color:#CFE5E1; font-size:.8125rem; font-weight:700; }
.health-chip b { color:#fff; font-weight:900; }
.health-chip i { flex:none; width:8px; height:8px; border-radius:50%; background:#5ED39A; box-shadow:0 0 0 3px rgba(94,211,154,.18); }
.health-chip[data-state="notice"] i { background:var(--gold); box-shadow:0 0 0 3px rgba(242,169,59,.22); }
.health-chip[data-state="attention"] { border-color:rgba(255,140,131,.45); background:rgba(255,140,131,.12); }
.health-chip[data-state="attention"] i { background:#FF8C83; box-shadow:0 0 0 3px rgba(255,140,131,.25); }
.desk-panel > .section-head { margin-bottom:var(--s5); }
/* What the desk could not read, said above the rows, with one way to try again. */
.desk-notices { display:grid; justify-items:start; gap:var(--s3); }
.desk-notices > .notice { justify-self:stretch; }
.desk-notices:not([hidden]) ~ .desk-groups:not(:empty) { margin-top:var(--s5); }
.desk-groups { display:grid; gap:var(--s5); }
.desk-group-title { display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s3); color:var(--faint); font:1000 .75rem/1 'Nunito',sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.desk-group-title::after { content:""; flex:1; height:1px; background:var(--line); }
.desk-group[data-group="urgent"] .desk-group-title { color:var(--coral-ink); }
.desk-list,.waiting-list { display:grid; gap:var(--s3); list-style:none; }
.desk-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:var(--s4); min-height:76px; padding:var(--s4) var(--s4) var(--s4) var(--s4); border:1px solid var(--line); border-left:4px solid var(--teal); border-radius:var(--r-m); background:var(--card); }
.desk-row[data-tone="gold"] { border-left-color:var(--gold); }
.desk-row[data-tone="coral"] { border-left-color:var(--coral); }
.desk-row[data-tone="grape"] { border-left-color:var(--grape); }
.desk-group[data-group="urgent"] .desk-row { background:linear-gradient(90deg,var(--coral-soft),var(--card) 55%); }
.desk-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:var(--mint-soft); color:var(--mint-ink); }
.desk-icon .icon { width:22px; height:22px; }
[data-tone="gold"] > .desk-icon { background:var(--gold-soft); color:var(--gold-ink); }
[data-tone="coral"] > .desk-icon { background:var(--coral-soft); color:var(--coral-ink); }
[data-tone="grape"] > .desk-icon { background:var(--grape-soft); color:var(--grape-ink); }
.desk-copy { min-width:0; }
.desk-copy b { display:block; font-size:1rem; font-weight:900; line-height:1.35; }
.desk-copy small { display:block; max-width:var(--measure); margin-top:2px; color:var(--sub); font-size:.875rem; line-height:1.5; }
.desk-count { min-width:56px; text-align:right; font:600 1.75rem/1 'Fredoka',sans-serif; font-variant-numeric:tabular-nums; }
.desk-row .button { white-space:nowrap; }
.desk-empty { display:grid; justify-items:center; gap:var(--s2); padding:var(--s5) var(--s4) var(--s4); text-align:center; }
.desk-empty img { width:132px; height:auto; }
.desk-empty p { max-width:52ch; color:var(--sub); }
.waiting-row { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:var(--s3); min-height:60px; padding:var(--s2) var(--s3); border-radius:var(--r-m); background:var(--bg); }
.waiting-row .desk-icon { width:36px; height:36px; border-radius:10px; }
.waiting-count { min-width:28px; text-align:center; font:600 1.25rem/1 'Fredoka',sans-serif; }
.waiting-title { min-width:0; color:var(--sub); font-size:.9rem; font-weight:700; }
.rex-loader { display:grid; justify-items:center; gap:var(--s2); padding:var(--s5) 0; color:var(--sub); font-weight:800; text-align:center; }
.rex-loader-run { width:120px; height:80px; background:url('/assets/rex-run.webp') 0 0 / 960px 80px no-repeat; animation:rex-loader-run .72s steps(8) infinite; }
@keyframes rex-loader-run { to { background-position:-960px 0; } }
.rex-loader-paws { display:flex; gap:var(--s3); color:var(--teal); }
.rex-loader-paws .icon { width:14px; height:14px; opacity:.2; animation:paw-trot 1.2s ease-in-out infinite; }
.rex-loader-paws .icon:nth-child(2) { animation-delay:.2s; }
.rex-loader-paws .icon:nth-child(3) { animation-delay:.4s; }
@keyframes paw-trot { 0%,100% { opacity:.2; transform:translateY(0); } 40% { opacity:1; transform:translateY(-2px); } }
#professionalAdminRoot > .rex-loader { padding:var(--s8) 0; }

/* ── Metric cards ──────────────────────────────────────────────────────── */
.metric-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:var(--s4); }
.metric-grid-small { margin:0; }
.metric-card { min-width:0; display:flex; flex-direction:column; gap:var(--s1); padding:var(--s5); border:1px solid var(--line); border-radius:var(--r-l); background:var(--card); box-shadow:var(--card-shadow); text-align:left; }
.metric-card > .metric-label,.metric-card > span:first-child { color:var(--faint); font-size:.75rem; font-weight:1000; letter-spacing:.06em; text-transform:uppercase; }
.metric-card b { display:block; margin:var(--s1) 0 2px; color:var(--ink); font:600 clamp(1.75rem,1.3rem + 1.1vw,2.25rem)/1.1 'Fredoka',sans-serif; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.metric-card small { color:var(--sub); font-size:.875rem; line-height:1.5; }
.metric-card[data-tone="mint"] { background:linear-gradient(160deg,var(--card) 55%,var(--mint-soft)); }
.metric-card[data-tone="gold"] { background:linear-gradient(160deg,var(--card) 55%,var(--gold-soft)); }
.metric-card[data-tone="grape"] { background:linear-gradient(160deg,var(--card) 55%,var(--grape-soft)); }
.metric-card[data-tone="coral"] { background:linear-gradient(160deg,var(--card) 55%,var(--coral-soft)); }
.metric-link { width:100%; font:inherit; color:inherit; cursor:pointer; }
.metric-link:hover { border-color:var(--teal); box-shadow:0 10px 26px -18px rgba(18,111,105,.55); }
.metric-card > .metric-action { display:inline-flex; align-items:center; gap:var(--s1); margin-top:auto; padding-top:var(--s3); color:var(--accent-text); font-size:.84rem; font-weight:900; letter-spacing:0; text-transform:none; }
.tier-bars { display:grid; gap:var(--s2); margin-top:var(--s3); }
.tier-row { display:grid; grid-template-columns:minmax(76px,auto) minmax(0,1fr) auto; gap:var(--s3); align-items:center; font-size:.84rem; font-weight:900; }
.tier-row i { display:block; height:8px; overflow:hidden; border-radius:999px; background:var(--line); }
.tier-row i::after { content:''; display:block; width:var(--pct); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--teal),var(--deep)); }
.tier-row b { margin:0; font:800 .84rem/1 'Nunito',sans-serif; }

/* ── Queue rows (background work, Fetch queues, cost details) ──────────── */
.queue-list,.version-list { display:grid; gap:var(--s3); }
.queue-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:var(--s3); }
#operationsQueue,#fetchOverviewQueues { grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); }
.fetch-page .queue-item { border-color:var(--line); background:var(--card); }
/* Title and value share the first line; the note gets the full width below. */
.queue-item { display:grid; grid-template-columns:40px minmax(0,1fr) auto; grid-template-areas:"icon label value" "icon note note"; gap:2px var(--s3); align-items:center; align-content:start; min-height:64px; padding:var(--s3) var(--s4); border:1px solid transparent; border-radius:var(--r-m); background:var(--bg); text-align:left; }
.queue-item > .queue-icon { grid-area:icon; align-self:start; }
.queue-item > span:nth-child(2),.queue-item > div { display:contents; }
.queue-item b { grid-area:label; }
.queue-item small { grid-area:note; }
.queue-item > strong { grid-area:value; }
.queue-item > .queue-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--soft); color:var(--mint-ink); }
.queue-item[data-tone="coral"] > .queue-icon { background:var(--coral-soft); color:var(--coral-ink); }
.queue-item[data-tone="gold"] > .queue-icon { background:var(--gold-soft); color:var(--gold-ink); }
.queue-item[data-tone="coral"] { border-color:#F3CCC8; }
.queue-item b,.queue-item small { display:block; min-width:0; }
.queue-item b { font-weight:900; }
.queue-item small { color:var(--sub); font-size:.84rem; line-height:1.5; }
.queue-item > strong { font:600 1.05rem/1.2 'Fredoka',sans-serif; text-align:right; white-space:nowrap; }
.queue-link { width:100%; font:inherit; color:inherit; cursor:pointer; }
.queue-link:hover { border-color:var(--teal); }

/* ── Lists, filters, tabs ──────────────────────────────────────────────── */
.state-strip { display:flex; align-items:center; gap:var(--s4); padding:var(--s4) var(--s5); border:1px solid var(--line); border-radius:var(--r-l); background:var(--card); }
.state-strip div { flex:1; min-width:0; }
.state-strip b,.state-strip span { display:block; }
.state-strip span { color:var(--faint); font-size:.8rem; }
.state-strip i { color:var(--teal); font-style:normal; }
.filter-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--s3) var(--s4); }
.filter-row > label,.compact-search,.period-select { display:grid; gap:6px; min-width:0; color:var(--sub); font-size:.84rem; font-weight:900; }
.compact-search { flex:1 1 280px; }
.filter-row > label:not(.compact-search) { flex:0 1 260px; }
.filter-row > .button { flex:none; }
.compact-search input,.filter-row select,.period-select select,.filter-row input { width:100%; min-height:44px; border:1.5px solid var(--line); border-radius:12px; padding:var(--s2) var(--s3); background:var(--card); color:var(--ink); font-size:1rem; font-weight:600; }
.record-list { display:grid; gap:var(--s3); margin-top:var(--s4); }
.list-section .record-list:first-of-type { margin-top:0; }
.record-card { display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(96px,.5fr)) auto; gap:var(--s4); align-items:center; min-height:76px; padding:var(--s4) var(--s5); border:1px solid var(--line); border-radius:var(--r-l); background:var(--card); }
.record-card:hover { border-color:#AFDCD7; }
.record-main { min-width:0; display:grid; grid-template-columns:minmax(0,1fr); gap:2px; justify-items:start; }
.record-main b,.record-main small { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.record-main b { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; font-weight:900; line-height:1.35; }
.record-main .status-badge { margin-top:var(--s1); }
.record-main small,.record-cell small { color:var(--faint); font-size:.78rem; font-weight:700; }
.record-cell { min-width:0; }
/* Values wrap rather than hide behind an ellipsis. */
.record-cell b,.record-cell small { display:block; overflow-wrap:anywhere; }
.record-cell b { line-height:1.35; }
.record-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--s2); }
.record-actions button,.record-actions a { min-height:40px; display:inline-flex; align-items:center; justify-content:center; border:1.5px solid var(--line-strong); border-radius:var(--r-s); padding:var(--s2) var(--s3); background:var(--card); color:var(--ink); cursor:pointer; font-size:.84rem; font-weight:900; text-decoration:none; }
.record-actions .is-primary { border-color:transparent; background:linear-gradient(135deg,var(--teal-bright),var(--deep)); color:#fff; }
.record-actions .danger-link { border-color:#E5B8B4; color:#9A342E; }
.newsroom-subsection { box-shadow:none; }
.newsroom-subsection .record-list { margin-top:0; }
.asset-library { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr)); gap:var(--s3); }
.asset-library > .empty-card { grid-column:1/-1; }
.asset-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-m); background:var(--bg); }
.asset-card > img { width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--soft); }
.asset-card > div { display:grid; gap:var(--s1); padding:var(--s3); }
.asset-card b,.asset-card small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.asset-card small { color:var(--faint); font-size:.75rem; }
.asset-card button { justify-self:start; margin-top:var(--s1); }
.load-more { display:flex; margin:var(--s4) auto 0; }
/* Choices wrap; they never scroll sideways or push the page wider. */
.tab-list { display:flex; flex-wrap:wrap; width:max-content; max-width:100%; gap:var(--s1); padding:var(--s1); border:1px solid var(--line); border-radius:var(--r-m); background:var(--card); }
.tab-list button { min-height:40px; border:0; border-radius:var(--r-s); padding:var(--s2) var(--s3); background:transparent; color:var(--sub); cursor:pointer; font-size:.9375rem; font-weight:900; white-space:nowrap; }
.tab-list button[aria-selected="true"] { background:var(--soft); color:var(--accent-text); }
.template-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr)); gap:var(--s4); }
.template-card { min-width:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-l); background:var(--card); box-shadow:var(--card-shadow); }
.template-art { min-height:128px; display:grid; place-items:center; background:linear-gradient(145deg,var(--soft),#FDF8EE); }
.template-art img { height:112px; width:auto; margin-bottom:-10px; }
.template-copy { flex:1; display:flex; flex-direction:column; padding:var(--s4) var(--s5) var(--s5); }
.template-copy h3::first-letter { text-transform:uppercase; }
.template-copy p { margin:var(--s2) 0 var(--s4); color:var(--sub); font-size:.875rem; }
.template-copy > div { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s2); margin-top:auto; }
.activation-gate { margin-bottom:var(--s4); padding:var(--s4) var(--s5); border:1px solid #E5C98D; border-radius:var(--r-m); background:#FFF8E8; color:#6E4A16; }
.activation-gate p { max-width:var(--measure); margin-top:var(--s1); font-size:.875rem; font-weight:700; }
.activation-gate[data-ready="true"] { border-color:#A8D9BC; background:#EDF9F1; color:#236340; }
#campaignRecords { margin-top:0; }

/* ── Tables ────────────────────────────────────────────────────────────── */
/* Not .table-shell: a table that does not overflow is still a scroll container, and `contain` on it swallowed the wheel so the page would not scroll while the pointer was over a table (owner, 2026-09-20). */
.table-shell { position:relative; overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-l); background:var(--card); }
table { width:100%; border-collapse:collapse; font-size:.875rem; }
th,td { padding:var(--s3) var(--s4); border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
td { height:56px; }
th { color:var(--faint); background:var(--bg); font-size:.72rem; font-weight:1000; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:rgba(228,247,244,.35); }
.table-primary,.table-secondary { display:block; }
.table-primary { color:var(--ink); font-size:.9rem; font-weight:900; }
.table-secondary { margin-top:2px; color:var(--faint); font-size:.78rem; font-weight:700; }
td > b,td > small { display:block; }
td > small { color:var(--faint); font-size:.78rem; }
td button { min-height:40px; border:1.5px solid var(--line-strong); border-radius:var(--r-s); padding:var(--s2) var(--s3); background:var(--card); cursor:pointer; font-size:.84rem; font-weight:900; white-space:nowrap; }
td select { min-height:40px; border:1.5px solid var(--line); border-radius:var(--r-s); padding:var(--s1) var(--s2); background:var(--card); color:var(--ink); font-weight:600; }
.table-empty { padding:var(--s6) var(--s4); color:var(--sub); text-align:center; }
#usersTable td:nth-child(3) { min-width:220px; max-width:380px; line-height:1.6; }
.bar-chart { min-height:230px; display:flex; align-items:end; gap:clamp(2px,.7vw,8px); margin:var(--s5) 0 var(--s6); padding-top:var(--s5); border-bottom:1px solid var(--line); }
.chart-bar { flex:1; min-width:2px; height:var(--height); position:relative; border-radius:7px 7px 0 0; background:linear-gradient(180deg,var(--teal-bright),var(--deep)); }
.chart-bar span { display:none; position:absolute; left:50%; bottom:-24px; translate:-50% 0; color:var(--faint); font-size:.68rem; white-space:nowrap; }
.chart-bar:first-child span,.chart-bar:last-child span,.chart-bar:nth-child(15n + 1) span { display:block; }

/* ── Support detail ────────────────────────────────────────────────────────
   Grouped rather than a flat list: an operator has passed a second factor and
   typed a written reason to get here, so the answer should be readable. */
.support-detail { padding:var(--s4); border-radius:var(--r-m); background:var(--bg); }
.support-group { padding:var(--s4) 0; border-top:1px solid var(--line); }
.support-group:first-child { border-top:0; padding-top:0; }
.support-group:last-child { padding-bottom:0; }
.support-group h4 { margin:0 0 var(--s2); color:var(--sub); font:1000 .75rem/1.2 'Nunito',sans-serif; letter-spacing:.09em; text-transform:uppercase; }
.support-group dl { display:grid; grid-template-columns:minmax(120px,38%) minmax(0,1fr); gap:var(--s1) var(--s4); margin:0; }
.support-group dt { color:var(--sub); font-size:.875rem; }
.support-group dd { margin:0; font-size:.9rem; font-weight:800; overflow-wrap:anywhere; }
.support-row { display:grid; gap:2px; padding:var(--s2) 0; border-bottom:1px dashed var(--line); }
.support-row:last-child { border-bottom:0; }
.support-row small { color:var(--sub); }
.support-empty { color:var(--faint); font-size:.875rem; }
.support-boundary { margin:var(--s3) 0 0; padding:var(--s3); border-radius:var(--r-s); background:var(--card); color:var(--sub); font-size:.84rem; overflow-wrap:anywhere; }
.reason-chips { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); }
.reason-chips-label { margin-right:var(--s1); color:var(--sub); font-size:.84rem; font-weight:900; }
.reason-chips button { min-height:36px; border:1.5px solid var(--line-strong); border-radius:999px; padding:var(--s1) var(--s3); background:var(--card); color:var(--ink); cursor:pointer; font-size:.84rem; font-weight:800; }
.reason-chips button:hover { border-color:var(--teal); background:var(--mint-soft); }

/* ── Dialogs ───────────────────────────────────────────────────────────────
   One scroll container per dialog: `.dialog-body` between a fixed header and
   a fixed footer. The editors used to scroll their form and preview columns
   separately, each with overscroll containment, and Chrome lets a contained
   box that has nothing to scroll swallow the wheel: over a short form the
   wheel did nothing and only the right-hand column moved (owner, 2026-10-07).
   The support and listing dialogs had no scroller at all at some sizes, so
   their footers fell off the screen. Now the body is the only scroller; the
   preview column rides along beside the fields (sticky on wide screens), and
   app.js forwards a wheel over the header, footer or backdrop to the body. */
html:has(dialog[open]) { overflow:hidden; scrollbar-gutter:stable; }
html:has(dialog[open]), body:has(dialog[open]) { overflow:hidden; }
dialog { color:var(--ink); overscroll-behavior:contain; }
dialog::backdrop { background:rgba(4,15,13,.68); backdrop-filter:blur(6px); }
.editor-dialog,.support-dialog { margin:auto; padding:0; border:0; border-radius:var(--r-l); background:var(--card); box-shadow:0 40px 100px -30px rgba(0,0,0,.7); overflow:hidden; max-width:none; }
.editor-dialog { width:min(1320px,calc(100vw - 32px)); height:min(920px,calc(100vh - 32px)); height:min(920px,calc(100dvh - 32px)); max-height:none; }
.compact-dialog { width:min(840px,calc(100vw - 32px)); height:auto; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); }
.support-dialog { width:min(640px,calc(100vw - 32px)); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); }
.dialog-shell { height:100%; max-height:inherit; display:flex; flex-direction:column; }
.dialog-shell > header,.dialog-shell > footer { flex:none; display:flex; gap:var(--s4); align-items:center; justify-content:space-between; padding:var(--s4) var(--s5); background:var(--card); }
.dialog-shell > header { align-items:flex-start; border-bottom:1px solid var(--line); }
.dialog-shell > header > div { min-width:0; }
.dialog-shell > header h2 { font-size:1.375rem; overflow-wrap:anywhere; }
.dialog-shell > header .status-badge { margin-top:var(--s2); }
.dialog-shell > footer { border-top:1px solid var(--line); }
.dialog-shell > footer > div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--s2); }
.dialog-close { flex:none; width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); cursor:pointer; }
.dialog-body { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.save-note { min-width:0; color:var(--faint); font-size:.84rem; font-weight:700; }
.editor-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); align-items:start; }
.editor-fields { display:grid; align-content:start; gap:var(--s5); padding:var(--s5); }
/* The form column stretches to its row (never a min-height: with a fixed-height
   scroller a zero minimum let the preview row draw over the form). */
.editor-grid > .editor-fields { align-self:stretch; border-right:1px solid var(--line); }
.editor-preview { position:sticky; top:0; align-self:start; padding:var(--s5); }
.editor-fields label,.support-content label,.crop-controls label,.professional-form label,.stacked-form label,.offer-form label { display:grid; gap:6px; color:var(--sub); font-size:.875rem; font-weight:900; }
.editor-fields label > span,.editor-fields legend span { float:right; color:var(--faint); font-size:.75rem; font-weight:700; }
.editor-fields input:not([type="checkbox"]),.editor-fields textarea,.editor-fields select,.support-content textarea,.crop-controls input:not([type="range"]),.professional-form input:not([type="checkbox"]),.professional-form textarea,.professional-form select,.stacked-form textarea,.offer-form input,.offer-form select,.fetch-reason-dialog textarea,.reauth-modal select { width:100%; min-height:44px; border:1.5px solid var(--line); border-radius:12px; padding:10px 12px; background:var(--card); color:var(--ink); font-size:1rem; font-weight:600; }
:is(.editor-fields,.support-content,.professional-form,.stacked-form,.offer-form,.fetch-reason-dialog) :is(input,textarea,select):focus { border-color:var(--teal); outline:none; box-shadow:0 0 0 3px rgba(31,182,171,.22); }
.editor-fields textarea,.professional-form textarea,.stacked-form textarea { resize:vertical; line-height:1.55; }
.form-group { display:grid; gap:var(--s4); min-width:0; padding:var(--s4) var(--s4) var(--s5); border:1px solid var(--line); border-radius:var(--r-m); }
.form-group > legend { padding:0 var(--s2); color:var(--ink); font:600 1rem/1.2 'Fredoka',sans-serif; }
.editor-fields fieldset:not(.form-group) { display:grid; gap:var(--s2); border:1px solid var(--line); border-radius:var(--r-m); padding:var(--s3) var(--s4) var(--s4); }
.editor-fields fieldset:not(.form-group) > legend { padding:0 var(--s2); color:var(--sub); font-size:.875rem; font-weight:1000; }
.field-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); gap:var(--s3) var(--s4); align-items:end; }
.check-field { min-height:44px; grid-template-columns:auto 1fr !important; align-items:center; align-content:center; gap:var(--s3) !important; padding:var(--s2) var(--s3); border:1.5px solid var(--line); border-radius:12px; color:var(--ink) !important; font-weight:800 !important; }
.check-field input { width:20px; height:20px; accent-color:var(--teal); }
.editor-section { min-width:0; padding:var(--s4) var(--s5) var(--s5); border:1px solid var(--line); border-radius:var(--r-m); background:var(--bg); }
.editor-section .section-head { margin-bottom:var(--s3); }
.image-picker { display:grid; grid-template-columns:145px minmax(0,1fr); gap:var(--s3); }
.image-picker img { grid-row:span 2; width:145px; height:105px; object-fit:cover; border-radius:var(--r-m); }
.image-picker:has(> img[hidden]) { grid-template-columns:repeat(2,minmax(0,1fr)); }
.body-toolbar { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:calc(-1 * var(--s2)); }
.body-toolbar button { min-height:36px; border:1px solid var(--line-strong); border-radius:var(--r-s); padding:var(--s1) var(--s3); background:var(--card); cursor:pointer; font-size:.8rem; font-weight:900; }
.body-editor { min-height:360px; margin-top:calc(-1 * var(--s2)); font-family:'Nunito',sans-serif; }
.source-row { display:grid; grid-template-columns:1.2fr .8fr 1.2fr .7fr auto; gap:var(--s2); align-items:end; margin-top:var(--s3); }
.source-row input { min-width:0; }
.source-row button { width:44px; height:44px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--card); cursor:pointer; }
.preview-head { display:flex; justify-content:space-between; gap:var(--s4); align-items:center; margin-bottom:var(--s4); }
.mini-article { width:min(690px,100%); margin:auto; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-l); background:var(--card); }
.mini-article img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.mini-article > div { padding:var(--s5); }
.mini-article .preview-meta { color:var(--deep); font-size:.72rem; font-weight:1000; text-transform:uppercase; }
.mini-article h2 { margin:var(--s2) 0; font-size:2rem; }
.mini-article .preview-excerpt { color:var(--sub); font-weight:700; }
.mini-body { margin-top:var(--s5); color:var(--ink); line-height:1.7; }
.mini-body > * + * { margin-top:1em; }
.mini-body ul,.mini-body ol { padding-left:1.3em; }
.mini-body aside { padding:var(--s3) var(--s4); border-left:4px solid var(--teal); border-radius:var(--r-s); background:var(--soft); }
.editor-validation { width:min(690px,100%); margin:var(--s3) auto 0; color:var(--sub); font-size:.8rem; }
.editor-validation:empty { display:none; }
.editor-validation.is-error { padding:var(--s3) var(--s4); border-radius:var(--r-s); background:#FFF1F0; color:#9A342E; font-weight:800; }
.locked-fields { padding:var(--s4); border:1px solid #E5D0A1; border-radius:var(--r-m); background:var(--cream); }
.locked-fields p { margin-top:var(--s1); color:var(--sub); font-size:.84rem; }
.diff-box { padding:var(--s4); border:1px solid var(--line); border-radius:var(--r-m); }
.diff-row { display:grid; grid-template-columns:100px minmax(0,1fr); gap:var(--s3); padding:var(--s2) 0; border-bottom:1px solid var(--line); font-size:.84rem; }
.diff-row:last-child { border-bottom:0; }
.diff-row b { color:var(--faint); }
.diff-row ins { color:#216B46; text-decoration:none; overflow-wrap:anywhere; }
.version-item { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:var(--s3); align-items:center; min-height:52px; padding:var(--s2) var(--s3); border-radius:var(--r-s); background:var(--bg); font-size:.84rem; }
.version-item > b { overflow-wrap:anywhere; }
.version-item button { min-height:36px; border:1px solid var(--line-strong); border-radius:var(--r-s); padding:var(--s1) var(--s3); background:var(--card); cursor:pointer; font-weight:900; }
.version-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--s2); }
.email-preview { display:block; width:100%; height:clamp(380px,calc(100vh - 280px),720px); height:clamp(380px,calc(100dvh - 280px),720px); border:1px solid var(--line); border-radius:var(--r-m); background:#fff; }
#templateForm[data-template-mode="locked"] .editor-grid { grid-template-columns:1fr; }
#templateForm[data-template-mode="locked"] .editor-fields { display:none; }
#templateForm[data-template-mode="locked"] .editor-preview { position:static; border:0; }
.upload-layout { display:grid; align-content:start; gap:var(--s4); padding:var(--s5); }
.drop-zone { display:grid; place-items:center; gap:6px; min-height:100px; padding:var(--s4); border:2px dashed #A9D7D2; border-radius:var(--r-l); background:var(--soft); color:var(--accent-text); cursor:pointer; font-weight:1000; text-align:center; }
.drop-zone input { max-width:90%; }
.drop-zone span { color:var(--sub); font-size:.78rem; }
#cropCanvas { width:100%; height:auto; border-radius:var(--r-l); background:#0E1715; }
.crop-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3) var(--s4); }
.crop-controls input[type="range"] { width:100%; accent-color:var(--teal); }
.upload-progress { position:relative; overflow:hidden; padding:var(--s3) var(--s4); border-radius:var(--r-s); background:var(--bg); }
.upload-progress i { position:absolute; inset:0 auto 0 0; width:var(--progress,0%); background:rgba(31,182,171,.16); transition:width .2s; }
.upload-progress span { position:relative; font-size:.8rem; font-weight:900; }
.support-content { display:grid; align-content:start; gap:var(--s4); padding:var(--s5); }
.support-content > p { max-width:var(--measure); color:var(--sub); font-weight:700; }
.confirm-dialog { width:min(460px,calc(100vw - 32px)); margin:auto; border:0; border-radius:var(--r-l); padding:0; background:var(--card); }
.confirm-dialog form { display:grid; justify-items:center; gap:var(--s3); padding:var(--s6) var(--s5) var(--s5); text-align:center; }
.confirm-dialog h2 { font-size:1.375rem; }
.confirm-dialog p { max-width:48ch; color:var(--sub); }
.confirm-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s2); margin-top:var(--s2); }
.confirm-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:#FFF0D3; color:#8B5B0E; font:700 1.5rem/1 'Fredoka',sans-serif; }
.confirm-dialog[data-tone="danger"] .confirm-icon { background:var(--coral-soft); color:var(--coral-ink); }
.fetch-reason-dialog label { display:block; width:100%; margin:var(--s3) 0; text-align:left; color:var(--sub); font-weight:900; }
.fetch-reason-dialog label span { display:block; margin:2px 0 6px; color:var(--faint); font-size:.78rem; font-weight:800; }
.fetch-reason-dialog .confirm-actions { justify-content:flex-end; width:100%; }
/* A real <dialog>, so it lands in the top layer above whatever it interrupts.
   As a plain div it could never paint above an open modal dialog, and the
   inert document behind one meant it could not be focused or typed into. */
.reauth-modal { max-width:none; max-height:none; width:auto; margin:auto; padding:var(--s5); border:0; background:transparent; overflow:visible; }
.reauth-modal::backdrop { background:rgba(5,17,15,.72); backdrop-filter:blur(6px); }
.reauth-modal form { display:grid; gap:var(--s3); width:min(440px,calc(100vw - 48px)); padding:var(--s6) var(--s5) var(--s5); border-radius:var(--r-l); background:var(--card); box-shadow:0 30px 80px -25px rgba(0,0,0,.7); }
.reauth-modal p:not(.eyebrow) { color:var(--sub); }
.reauth-modal label { display:grid; gap:6px; color:var(--sub); font-size:.84rem; font-weight:900; }
.reauth-modal form > div { display:flex; justify-content:flex-end; gap:var(--s2); margin-top:var(--s2); }
.toast { position:fixed; z-index:200; right:var(--s5); bottom:var(--s5); max-width:min(420px,calc(100vw - 48px)); padding:var(--s3) var(--s4); border-left:4px solid var(--teal-bright); border-radius:var(--r-m); background:#13201E; color:#fff; box-shadow:0 20px 50px -20px rgba(0,0,0,.7); font-size:.875rem; font-weight:800; }
.toast[data-tone="error"] { border-left-color:#FF8C83; }
/* Never in the way of a click; inside a dialog it sits over the header, not the actions. */
.toast { pointer-events:none; }
dialog .toast { top:var(--s3); right:auto; bottom:auto; left:50%; transform:translateX(-50%); width:max-content; max-width:min(440px,calc(100vw - 32px)); }
.toast[data-tone="success"] { border-left-color:#5ED39A; }

/* ── Fetch (Pack Desk): the sub-nav and its decision cards ─────────────── */
.tab-count { display:inline-grid; min-width:20px; height:20px; place-items:center; margin-left:6px; padding:0 6px; border-radius:999px; background:var(--gold); color:#3B2A05; font-size:.7rem; font-weight:1000; }
.fetch-page > .section-head { margin-top:var(--s6); }
.fetch-page > .section-head:first-child { margin-top:0; }
.fetch-page > .metric-grid + .section-head { margin-top:var(--s6); }
.fetch-page > .notice { margin:var(--s4) 0 0; }
.fetch-page > .page-help,.fetch-page > .queue-grid { margin-top:var(--s4); }
.fetch-page > .editor-section,.fetch-page > .table-shell,.fetch-page > form + .table-shell { margin-top:var(--s4); }
.fetch-page .section-note { margin:var(--s2) 0 0; }
.fetch-cards { display:grid; gap:var(--s3); }
.fetch-card { padding:var(--s4) var(--s5); border:1px solid var(--line); border-radius:var(--r-l); background:var(--card); box-shadow:var(--card-shadow); }
.fetch-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4); }
.fetch-card-head h4 { font-size:1.05rem; }
.fetch-card-head .overline { display:block; margin-bottom:3px; color:var(--faint); font-size:.72rem; font-weight:1000; letter-spacing:.08em; text-transform:uppercase; overflow-wrap:anywhere; }
.fetch-card p { max-width:var(--measure); margin-top:var(--s2); color:var(--sub); font-size:.9rem; font-weight:700; line-height:1.55; overflow-wrap:anywhere; }
.fetch-card p.fetch-quote { color:var(--ink); font-weight:600; }
.fetch-card small { display:block; margin-top:var(--s2); color:var(--faint); font-size:.78rem; font-weight:800; overflow-wrap:anywhere; }
.fetch-card-actions { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); }
td .fetch-card-actions { margin-top:0; flex-wrap:nowrap; }
.fetch-stars { color:var(--gold); letter-spacing:.06em; font-size:.85rem; }
.fetch-empty { padding:var(--s5); border:1.5px dashed var(--line-strong); border-radius:var(--r-l); color:var(--sub); font-weight:800; font-size:.875rem; text-align:center; }
.status-badge[data-tier="listed"] { background:var(--bg); color:var(--sub); }
.status-badge[data-tier="checked"] { background:var(--soft); color:var(--accent-text); }
.status-badge[data-tier="claimed"] { background:#EEE8FA; color:var(--grape-ink); }
.status-badge[data-tier="bookable"] { background:#FDEFD6; color:#7A520F; }
.status-badge[data-state="unlisted"],.status-badge[data-state="hidden"] { background:#FFF2F1; color:#9A342E; }
.stacked-form { display:grid; gap:var(--s3); justify-items:start; }
.stacked-form label { width:100%; }
.offer-form { display:grid; gap:var(--s4); }
.offer-form fieldset { display:grid; gap:var(--s3); min-width:0; padding:var(--s3) var(--s4) var(--s4); border:1px solid var(--line); border-radius:var(--r-m); background:var(--card); }
.offer-form legend { padding:0 var(--s2); color:var(--ink); font:600 1rem/1.2 'Fredoka',sans-serif; }
.offer-form .field-help { margin-top:0; }
.form-actions { display:flex; justify-content:flex-end; gap:var(--s2); }
#fetchOffersTable tr { cursor:pointer; }

/* ── Business workspaces ───────────────────────────────────────────────── */
#professionalAdminRoot { display:grid; gap:var(--s5); }
#professionalAdminRoot :is(form,fieldset,label,input,select,textarea) { min-width:0; max-width:100%; }
#professionalAdminRoot .page-intro img { width:104px; }
#professionalAdminRoot .panel h4 { margin:var(--s5) 0 var(--s3); font-size:1.05rem; }
#professionalAdminRoot .panel > .notice { margin-top:var(--s3); }
#professionalAdminRoot .section-head { margin-bottom:var(--s4); }
.professional-filters { margin-bottom:var(--s3); }
.professional-filters select { width:100%; min-height:44px; padding:var(--s2) var(--s3); border:1.5px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); font-size:1rem; font-weight:600; }
.pager { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); margin-top:var(--s3); color:var(--sub); font-size:.875rem; font-weight:800; }
.pager > span { padding:0 var(--s2); }
.professional-form { display:grid; gap:var(--s4); margin-top:var(--s4); }
.professional-form > .button { justify-self:start; }
.professional-form fieldset { display:grid; gap:var(--s2); padding:var(--s3) var(--s4) var(--s4); border:1px solid var(--line); border-radius:var(--r-m); }
.professional-form legend { padding:0 var(--s2); color:var(--ink); font:600 1rem/1.2 'Fredoka',sans-serif; }
.professional-form .check-field { font-size:.9rem; }
.clinical-list { display:grid; gap:var(--s2); margin:0 0 var(--s3); padding:0; list-style:none; }
.clinical-list li { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); min-height:48px; padding:var(--s2) var(--s3); border-radius:var(--r-s); background:var(--bg); font-weight:700; }
.clinical-list li[data-ending="true"] { background:var(--gold-soft); }
#professionalAdminRoot details.panel { padding:0; }
#professionalAdminRoot details.panel > summary { padding:var(--s4) var(--s5); }
#professionalAdminRoot details.panel > p,#professionalAdminRoot details.panel > form { margin:var(--s4) var(--s5) var(--s5); }
#professionalAdminRoot .page-help { margin-top:var(--s3); }

/* ── Costs ─────────────────────────────────────────────────────────────── */
.period-select { width:max-content; max-width:100%; }
.cost-fx { max-width:78ch; margin:0; color:var(--sub); font-size:.84rem; line-height:1.6; }
.cost-money { white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:900; }
.cost-basis { color:var(--sub); font-size:.84rem; line-height:1.65; }
.cost-panel .table-shell td { white-space:normal; }
.cost-coverage-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3); margin:var(--s3) 0 0; }
.cost-coverage-card { min-width:0; padding:var(--s4); border:1px solid var(--line); border-radius:var(--r-m); background:var(--card); }
.cost-coverage-head { display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--s2); justify-content:space-between; }
.cost-coverage-head h3 { font-size:.95rem; line-height:1.5; }
.cost-coverage-head .status-badge { flex-shrink:0; white-space:nowrap; }
.cost-coverage-card p { margin:var(--s2) 0; }
.cost-rate { color:var(--ink); font-size:.84rem; font-weight:900; line-height:1.6; }
.cost-source { display:inline-block; color:var(--accent-text); font-size:.8rem; font-weight:900; text-underline-offset:3px; }
.cost-scope-details { margin-top:var(--s4); }
.cost-scope-details summary { cursor:pointer; font-weight:900; }
.cost-business-detail summary { cursor:pointer; font-weight:900; min-width:180px; max-width:340px; }
.cost-usage-details { max-width:680px; min-width:320px; padding:var(--s3) 0; color:var(--sub); font-size:.8rem; line-height:1.6; }
.cost-usage-details p { margin:0 0 var(--s2); }
.cost-action-table { font-size:.8rem; min-width:560px; }
.cost-action-table th,.cost-action-table td { height:auto; padding:var(--s2); }
.cost-action-table th { white-space:normal; }
#costAiNote,#costProfessionalNote { margin:0 0 var(--s4); color:var(--sub); font-size:.84rem; line-height:1.65; }
.cost-panel > .section-note { margin-bottom:var(--s4); }
#costProfessionalEmpty { padding:var(--s4) 0; color:var(--sub); }
.historical-disclosure { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3); padding:var(--s4); }
.historical-disclosure article { display:grid; gap:var(--s1); padding:var(--s4); border:1px solid var(--line); border-radius:var(--r-m); background:var(--card); }
.historical-disclosure span { color:var(--faint); font-size:.72rem; font-weight:1000; text-transform:uppercase; letter-spacing:.07em; }
.historical-disclosure b { font:600 1.75rem/1.1 'Fredoka',sans-serif; }
.historical-disclosure small { color:var(--sub); font-size:.78rem; font-weight:700; }
.historical-disclosure > p { grid-column:1/-1; padding:var(--s3) var(--s4); border:1px solid #E5D0A1; border-radius:var(--r-s); background:var(--cream); color:var(--sub); font-size:.8rem; font-weight:900; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:1100px) {
  .record-card { grid-template-columns:minmax(0,1fr) repeat(2,minmax(90px,.5fr)) auto; }
  .record-card .record-cell:nth-of-type(3) { display:none; }
  .editor-grid { grid-template-columns:minmax(0,1fr) minmax(320px,.9fr); }
}
@media (max-width:900px) {
  .editor-grid { grid-template-columns:1fr; }
  .editor-grid > .editor-fields { border-right:0; border-bottom:1px solid var(--line); }
  .editor-preview { position:static; }
  .email-preview { height:560px; }
}
@media (max-width:820px) {
  .auth-screen { grid-template-columns:1fr; }
  .auth-brand { min-height:300px; padding:30px; }
  .auth-brand-copy { margin-top:50px; }
  .auth-brand-copy h1 { font-size:3.5rem; }
  .auth-rex { width:165px; }
  .auth-panel { min-height:calc(100svh - 300px); padding:var(--s5) var(--s4); }
  .app-shell { display:block; }
  .sidebar { transform:translateX(-105%); transition:transform .24s ease; box-shadow:20px 0 60px -30px #000; }
  .app-shell.menu-open .sidebar { transform:none; }
  .workspace { padding:0 var(--s4) var(--s7); }
  .menu-button { display:grid; }
  .topbar { min-height:72px; padding:var(--s3) 0; }
  .split-grid { grid-template-columns:1fr; }
  .view { gap:var(--s5); }
  .panel { padding:var(--s4) var(--s4) var(--s5); }
  .desk-hero { padding:var(--s5) var(--s5) var(--s4); }
  .cost-coverage-grid,.historical-disclosure { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  body { font-size:15px; }
  .secure-pill { display:none; }
  .topbar h1 { font-size:1.5rem; }
  .page-intro { align-items:flex-start; flex-direction:column; gap:var(--s3); }
  .page-intro > .button { width:100%; }
  .page-intro > img { display:none; }
  .section-head { align-items:flex-start; flex-direction:column; gap:var(--s2); }
  .desk-hero { grid-template-columns:minmax(0,1fr); padding:var(--s5) var(--s4) var(--s4); }
  .desk-rex { position:absolute; top:var(--s3); right:var(--s3); width:72px; margin:0; opacity:.95; }
  .desk-hero-copy { padding-right:76px; }
  .health-strip { margin-right:-76px; }
  .health-summary { flex-basis:100%; }
  /* Title and count share the first line; the explanation and the button
     get the full width of the card. */
  .desk-row { grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"icon title count" "detail detail detail" "action action action"; gap:var(--s2) var(--s3); padding:var(--s3) var(--s3) var(--s3) var(--s4); }
  .desk-copy { display:contents; }
  .desk-row > .desk-icon { grid-area:icon; width:40px; height:40px; }
  .desk-copy > b { grid-area:title; align-self:center; }
  .desk-copy > small { grid-area:detail; margin-top:0; }
  .desk-count { grid-area:count; min-width:40px; font-size:1.5rem; }
  .desk-row > .button { grid-area:action; justify-self:stretch; }
  .waiting-row { grid-template-columns:auto auto minmax(0,1fr); }
  .waiting-row .button { grid-column:1/-1; justify-self:start; }
  .state-strip { align-items:stretch; flex-direction:column; gap:var(--s2); }
  .state-strip i { rotate:90deg; align-self:center; }
  .filter-row > label:not(.compact-search),.compact-search { flex:1 1 100%; }
  .filter-row > .button { width:100%; }
  .record-card { grid-template-columns:minmax(0,1fr); gap:var(--s3); padding:var(--s4); }
  .record-cell { display:none !important; }
  .record-actions { justify-content:flex-start; }
  .tab-list { width:100%; }
  .tab-list button { flex:1 1 auto; }
  .metric-card { padding:var(--s4); }
  .crop-controls { grid-template-columns:1fr; }
  .image-picker { grid-template-columns:1fr; }
  .image-picker img { grid-row:auto; width:100%; height:auto; aspect-ratio:16/9; }
  .source-row { grid-template-columns:1fr 1fr; padding:var(--s3); border:1px solid var(--line); border-radius:var(--r-m); }
  .source-row label:nth-child(3) { grid-column:1/-1; }
  .source-row button { align-self:end; }
  .support-group dl { grid-template-columns:1fr; }
  .support-group dd { margin-bottom:var(--s2); }
  /* Dialogs fill the phone; the header and footer stay compact so the one
     scroll area gets the room. The header's close button replaces the
     footer's quiet Close/Cancel. */
  .editor-dialog,.compact-dialog,.support-dialog { width:calc(100vw - 16px); max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px); border-radius:var(--r-l); }
  .editor-dialog { height:calc(100vh - 16px); height:calc(100dvh - 16px); }
  .dialog-shell > header { gap:var(--s3); padding:var(--s3) var(--s4); }
  .dialog-shell > header .eyebrow { display:none; }
  .dialog-shell > header h2 { font-size:1.15rem; }
  .dialog-shell > header .status-badge { margin-top:var(--s1); }
  .dialog-shell > footer { flex-direction:column; align-items:stretch; gap:var(--s2); padding:var(--s3) var(--s4); }
  .dialog-shell > footer .save-note { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.78rem; }
  .dialog-shell > footer .save-note:empty,.dialog-shell > footer > div:empty { display:none; }
  .dialog-shell > footer > div { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
  .dialog-shell > footer .button-quiet { display:none; }
  .dialog-shell > footer .button { min-height:44px; }
  .editor-fields,.editor-preview,.upload-layout,.support-content { padding:var(--s4); }
  .form-group { padding:var(--s3) var(--s3) var(--s4); }
  .confirm-dialog form { padding:var(--s5) var(--s4) var(--s4); }
  .confirm-actions .button { flex:1 1 auto; }
  .toast { right:var(--s3); bottom:var(--s3); left:var(--s3); max-width:none; }
  /* Tables become one card per row, each value under its column name. */
  .stack-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .stack-table,.stack-table tbody,.stack-table tr,.stack-table td { display:block; width:100%; }
  .stack-table tr { padding:var(--s3) var(--s4); border-bottom:1px solid var(--line); }
  .stack-table tbody tr:last-child { border-bottom:0; }
  .stack-table td { display:grid; grid-template-columns:minmax(96px,36%) minmax(0,1fr); gap:var(--s3); height:auto; padding:var(--s1) 0; border:0; white-space:normal; overflow-wrap:anywhere; }
  .stack-table td::before { content:attr(data-label); color:var(--faint); font-size:.72rem; font-weight:1000; letter-spacing:.05em; text-transform:uppercase; line-height:1.9; }
  .stack-table td[data-label=""],.stack-table td:not([data-label]) { grid-template-columns:minmax(0,1fr); }
  .stack-table td[data-label=""]::before,.stack-table td:not([data-label])::before { content:none; }
  .stack-table td.table-empty,.stack-table td.fetch-empty { display:block; text-align:center; }
  /* The first column is the card's title, full width; every other value sits beside its name. */
  .stack-table td:first-child { grid-template-columns:minmax(0,1fr); padding-bottom:var(--s2); }
  .stack-table td:first-child::before { content:none; }
  .stack-table td[data-label]:not([data-label=""]):not(:first-child) > * { grid-column:2; }
  .stack-table tbody tr:hover td { background:transparent; }
  #usersTable td:nth-child(3) { min-width:0; max-width:none; }
  td .fetch-card-actions { flex-wrap:wrap; }
}
@media (max-width:560px) {
  .auth-brand { min-height:265px; }
  .auth-brand-copy { margin-top:36px; }
  .auth-brand-copy h1 { font-size:2.8rem; }
  .auth-brand-copy > p:last-child { display:none; }
  .auth-rex { width:128px; right:0; }
  .auth-card { padding:26px 20px; border-radius:22px; }
  .otp-code-digits>span { height:52px; font-size:1.45rem; }
}
@media (max-width:360px) {
  .workspace { padding-left:var(--s3); padding-right:var(--s3); }
  .topbar h1 { font-size:1.35rem; }
  .auth-brand { padding:24px 18px; }
  .otp-code-digits { gap:5px; }
  .otp-code-digits>span { height:48px; font-size:1.3rem; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }

/* ── Dark theme ────────────────────────────────────────────────────────── */
@media (prefers-color-scheme:dark) {
  :root { --code-edge:#807363; --code-fill:#0E1614; --ink:#F1F8F6; --sub:#BFD1CD; --faint:#93ABA6; --bg:#0E1614; --card:#16211E; --soft:#17332F; --cream:#292318; --line:#293D38; --line-strong:#36504A; --teal-ink:#5FD3C7; --accent-text:#7FE0D6;
    --mint-soft:#163A34; --gold-soft:#3A2F17; --coral-soft:#3B201E; --grape-soft:#2A2340; --mint-ink:#8FE6DB; --gold-ink:#F2C979; --coral-ink:#FFA9A2; --grape-ink:#C9B4F5; --card-shadow:0 1px 2px rgba(0,0,0,.25); color-scheme:dark; }
  .auth-panel { background:linear-gradient(145deg,#111B18,#14241F); }
  .auth-card,.otp,.secret-box code { background:var(--card); color:var(--ink); }
  .button-primary { background:linear-gradient(135deg,#2AC7BB,#126F69); }
  .button-danger,.form-error { background:#341F1F; border-color:#613434; color:#F0A8A3; }
  .notice-warn,.activation-gate { background:#2D271A; border-color:#554826; color:#EBCB8D; }
  .activation-gate[data-ready="true"] { background:#173024; border-color:#2D6042; color:#9BE0B6; }
  .notice-info { background:#132B27; border-color:#28534D; color:#A8DDD6; }
  .status-badge[data-state="published"],.status-badge[data-state="live"],.status-badge[data-state="active"] { background:#173024; color:#9BE0B6; }
  .status-badge[data-state="failed"],.status-badge[data-state="cancelled"],.status-badge[data-state="revoked"],.status-badge[data-state="unlisted"],.status-badge[data-state="hidden"] { background:#3B201E; color:#FFA9A2; }
  .status-badge[data-tier="claimed"] { background:var(--grape-soft); }
  .status-badge[data-tier="bookable"] { background:var(--gold-soft); color:var(--gold-ink); }
  .record-actions .is-primary { color:#fff; }
  .record-actions .danger-link { border-color:#613434; color:#FFA9A2; }
  .template-art { background:linear-gradient(145deg,#17332F,#292318); }
  .locked-fields { border-color:#554826; }
  .historical-disclosure > p { border-color:#554826; }
  .mini-article,.email-preview { background:#fff; }
  .mini-article { color:#15201E; }
  .mini-article .preview-excerpt { color:#52635F; }
  .mini-article .preview-meta { color:#126F69; }
  .mini-body { color:#15201E; }
  .mini-body aside { background:#E4F7F4; }
  .diff-row ins { color:#83DCAC; }
  .confirm-icon { background:#3A2F17; color:#F2C979; }
  tbody tr:hover td { background:rgba(23,51,47,.45); }
  .desk-group[data-group="urgent"] .desk-row { background:linear-gradient(90deg,#2C1B19,var(--card) 55%); }
  .metric-card[data-tone] { background:var(--card); border-top:3px solid var(--teal); }
  .metric-card[data-tone="gold"] { border-top-color:var(--gold); }
  .metric-card[data-tone="grape"] { border-top-color:#A88BE8; }
  .metric-card[data-tone="coral"] { border-top-color:#FF8C83; }
  .toast { background:#0B1311; border:1px solid var(--line); }
}