/* Brutus CRM 7 — design tokens, taken verbatim from brutuscrm.ai (see CRMBuild/13_UI_DESIGN.md) */
:root {
  /* Brand */
  --cyan:        #29abe2;
  --cyan-bright: #4cc6ff;
  --blue:        #2f6fb0;
  --blue-deep:   #1c4a86;
  --red:         #e8412f;
  --red-soft:    #ff6a4d;

  /* Dark surface system */
  --bg:        #070d18;
  --bg-2:      #0b1322;
  --panel:     #0f1b2e;
  --panel-2:   #131f34;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);

  /* Text */
  --ink:       #eef4ff;
  --muted:     #9fb1c9;
  --muted-2:   #6e8099;

  /* Gradients & effects */
  --grad-brand: linear-gradient(120deg, #4cc6ff 0%, #29abe2 38%, #2f6fb0 70%, #1c4a86 100%);
  --grad-hot:   linear-gradient(120deg, #ff6a4d 0%, #e8412f 100%);
  --grad-text:  linear-gradient(100deg, #8fe1ff 0%, #29abe2 45%, #6aa9ff 100%);
  --ring:       0 0 0 1px var(--line);
  --shadow:     0 24px 60px -24px rgba(0,0,0,.65);
  --shadow-glow: 0 0 0 1px rgba(76,198,255,.18), 0 30px 80px -30px rgba(41,171,226,.45);
  --radius:    18px;
  --radius-sm: 12px;
  --ease:      cubic-bezier(.22,.61,.36,1);

  /* Type */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-head: 'Space Grotesk', var(--font-body);
  /* The CRM5 TV board's serif. Palatino's metric clones follow it so a Linux or Android TV (no Palatino) lands on the
     same widths: the totals and agent-card lines are fitted to Palatino Linotype Bold, and a generic serif there
     (Noto Serif, Georgia: up to 18% wider) would run past the column (rounding audit review, Brian 2026-10-21). */
  --font-wall: "Palatino Linotype", Palatino, "Book Antiqua", "TeX Gyre Pagella", "URW Palladio L", P052, serif;

  /* Semantic — CRM concepts (13_UI_DESIGN §semantic mapping) */
  --lead-cold: var(--muted-2);
  --lead-warm: var(--cyan);
  --lead-hot:  var(--red-soft);
}

/* ── Light theme (user directive 2026-08-19): high-contrast option for people who have a hard
      time seeing the separation on the dark UI. A class on <html> swaps the token set above;
      strong dark-on-white text and HEAVY borders are the point. Applied by window.brutusTheme()
      from Employee.ThemeKey (/mysettings). ── */
html.theme-light {
  --cyan: #0b7ac0; --cyan-bright: #095e94; --blue: #175a99; --blue-deep: #103e6a;
  --red: #c62828; --red-soft: #d84315;
  --bg: #eef1f5; --bg-2: #e3e8ef; --panel: #ffffff; --panel-2: #f3f6fa;
  --line: rgba(15,30,60,.25); --line-2: rgba(15,30,60,.45);
  --ink: #101822; --muted: #3f4f63; --muted-2: #5d7089;
  --grad-brand: linear-gradient(120deg, #095e94 0%, #0b7ac0 38%, #175a99 70%, #103e6a 100%);
  --grad-text:  linear-gradient(100deg, #095e94 0%, #0b7ac0 45%, #175a99 100%);
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(30,45,70,.35);
  --shadow-glow: 0 0 0 1px rgba(11,122,192,.3), 0 16px 44px -22px rgba(11,122,192,.35);
}
html.theme-light ::selection { background: rgba(11,122,192,.22); }

/* ── Palette themes (user-supplied swatches 2026-08-19): two more LIGHT bases and three DARK. ── */

/* Salt & Pepper — #FFFFFF · #D4D4D4 · #B3B3B3 · #2B2B2B (monochrome light) */
html.theme-salt {
  --cyan: #2b2b2b; --cyan-bright: #000000; --blue: #454545; --blue-deep: #1c1c1c;
  --red: #c62828; --red-soft: #d84315;
  --bg: #efefef; --bg-2: #e2e2e2; --panel: #ffffff; --panel-2: #f5f5f5;
  --line: rgba(0,0,0,.28); --line-2: rgba(0,0,0,.48);
  --ink: #1d1d1d; --muted: #4f4f4f; --muted-2: #757575;
  --grad-brand: linear-gradient(120deg, #454545 0%, #2b2b2b 45%, #1c1c1c 100%);
  --grad-text:  linear-gradient(100deg, #1c1c1c 0%, #2b2b2b 50%, #454545 100%);
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(0,0,0,.35);
  --shadow-glow: 0 0 0 1px rgba(43,43,43,.3), 0 16px 44px -22px rgba(43,43,43,.35);
}
html.theme-salt ::selection { background: rgba(43,43,43,.18); }

/* Yacht Club — #F2F0EF · #BBBDBC · #245F73 · #733E24 (light, deep teal accent, rust for hot) */
html.theme-yacht {
  --cyan: #245f73; --cyan-bright: #1b4856; --blue: #2d6d83; --blue-deep: #173d4a;
  --red: #a13a1c; --red-soft: #733e24;
  --bg: #f2f0ef; --bg-2: #e6e3e1; --panel: #ffffff; --panel-2: #f7f5f4;
  --line: rgba(36,50,60,.28); --line-2: rgba(36,50,60,.48);
  --ink: #1d2b33; --muted: #46555e; --muted-2: #68797f;
  --grad-brand: linear-gradient(120deg, #2d6d83 0%, #245f73 45%, #173d4a 100%);
  --grad-text:  linear-gradient(100deg, #173d4a 0%, #245f73 50%, #2d6d83 100%);
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(23,61,74,.35);
  --shadow-glow: 0 0 0 1px rgba(36,95,115,.3), 0 16px 44px -22px rgba(36,95,115,.35);
}
html.theme-yacht ::selection { background: rgba(36,95,115,.2); }

/* Calm Blue — #90D5FF · #57B9FF · #77B1D4 · #517891 (light, soft blues) */
html.theme-calm {
  --cyan: #1f7ec2; --cyan-bright: #16639b; --blue: #517891; --blue-deep: #355063;
  --red: #c62828; --red-soft: #d84315;
  --bg: #e5f1fa; --bg-2: #d8e9f6; --panel: #ffffff; --panel-2: #f1f8fd;
  --line: rgba(31,60,85,.28); --line-2: rgba(31,60,85,.48);
  --ink: #142c3d; --muted: #3d586c; --muted-2: #5d788c;
  --grad-brand: linear-gradient(120deg, #57b9ff 0%, #1f7ec2 45%, #355063 100%);
  --grad-text:  linear-gradient(100deg, #16639b 0%, #1f7ec2 50%, #517891 100%);
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(31,60,85,.35);
  --shadow-glow: 0 0 0 1px rgba(31,126,194,.3), 0 16px 44px -22px rgba(31,126,194,.35);
}
html.theme-calm ::selection { background: rgba(87,185,255,.3); }

/* Lavender Lullaby — #B5C7EB · #9EF0FF · #A4A5F5 · #8E70CF (light lavender pastels) */
html.theme-lavender {
  --cyan: #7a5cb8; --cyan-bright: #5f4496; --blue: #6a6bd0; --blue-deep: #4a4b9e;
  --red: #c62828; --red-soft: #d84315;
  --bg: #edeffa; --bg-2: #e1e4f5; --panel: #ffffff; --panel-2: #f5f6fd;
  --line: rgba(60,55,110,.28); --line-2: rgba(60,55,110,.48);
  --ink: #211d3a; --muted: #4c4870; --muted-2: #6c6892;
  --grad-brand: linear-gradient(120deg, #a4a5f5 0%, #8e70cf 45%, #4a4b9e 100%);
  --grad-text:  linear-gradient(100deg, #5f4496 0%, #7a5cb8 50%, #6a6bd0 100%);
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(60,55,110,.35);
  --shadow-glow: 0 0 0 1px rgba(142,112,207,.3), 0 16px 44px -22px rgba(142,112,207,.35);
}
html.theme-lavender ::selection { background: rgba(164,165,245,.35); }

/* Retro Calm — #81D8D0 · #D99E82 · #D7D982 · #AE82D9 (light, mint & plum) */
html.theme-retro {
  --cyan: #1c968c; --cyan-bright: #14756d; --blue: #8e5cc2; --blue-deep: #6a3f99;
  --red: #c05c34; --red-soft: #d99e82;
  --bg: #ecf6f4; --bg-2: #dfefec; --panel: #ffffff; --panel-2: #f4faf9;
  --line: rgba(25,80,75,.28); --line-2: rgba(25,80,75,.48);
  --ink: #143430; --muted: #3e5c58; --muted-2: #5f7c78;
  --grad-brand: linear-gradient(120deg, #81d8d0 0%, #1c968c 45%, #6a3f99 100%);
  --grad-text:  linear-gradient(100deg, #14756d 0%, #1c968c 50%, #8e5cc2 100%);
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(25,80,75,.35);
  --shadow-glow: 0 0 0 1px rgba(28,150,140,.3), 0 16px 44px -22px rgba(28,150,140,.35);
}
html.theme-retro ::selection { background: rgba(129,216,208,.4); }

/* Ocean Tide — #00D1D1 · #4052D6 · #00ADAD · #005C5C (dark, bright teal + indigo) */
html.theme-ocean {
  --cyan: #00d1d1; --cyan-bright: #4de8e8; --blue: #4052d6; --blue-deep: #005c5c;
  --bg: #041414; --bg-2: #061d1d; --panel: #0a2727; --panel-2: #0e3232;
  --ink: #e9fbfb; --muted: #8cc4c4; --muted-2: #558b8b;
  --grad-brand: linear-gradient(120deg, #4de8e8 0%, #00d1d1 38%, #00adad 70%, #005c5c 100%);
  --grad-text:  linear-gradient(100deg, #b8f6f6 0%, #00d1d1 45%, #4052d6 100%);
  --shadow-glow: 0 0 0 1px rgba(77,232,232,.18), 0 30px 80px -30px rgba(0,209,209,.45);
}
html.theme-ocean ::selection { background: rgba(0,209,209,.3); }

/* Peach Skyline — #FFDBBB · #BADDFF · #BAFFF5 · #496580 (light peach, slate accent) */
html.theme-peach {
  --cyan: #496580; --cyan-bright: #35506a; --blue: #3c6a94; --blue-deep: #2a4a68;
  --red: #c62828; --red-soft: #d84315;
  --bg: #fdf0e3; --bg-2: #f8e5d1; --panel: #ffffff; --panel-2: #fff7ee;
  --line: rgba(73,101,128,.32); --line-2: rgba(73,101,128,.52);
  --ink: #23303d; --muted: #496580; --muted-2: #6d8196;
  --grad-brand: linear-gradient(120deg, #badcff 0%, #496580 55%, #2a4a68 100%);
  --grad-text:  linear-gradient(100deg, #35506a 0%, #496580 50%, #3c6a94 100%);
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(73,101,128,.35);
  --shadow-glow: 0 0 0 1px rgba(73,101,128,.3), 0 16px 44px -22px rgba(73,101,128,.35);
}
html.theme-peach ::selection { background: rgba(186,221,255,.5); }

/* Frozen Lake — #6D8196 · #ADD8E6 · #FFFAFA · #000080 (light ice, navy accent) */
html.theme-frozen {
  --cyan: #000080; --cyan-bright: #000060; --blue: #2e4a9e; --blue-deep: #1c2f6b;
  --red: #c62828; --red-soft: #d84315;
  --bg: #ecf4f9; --bg-2: #ddebf3; --panel: #fffafa; --panel-2: #f3f8fb;
  --line: rgba(45,65,90,.3); --line-2: rgba(45,65,90,.5);
  --ink: #101a3a; --muted: #43566a; --muted-2: #6d8196;
  --grad-brand: linear-gradient(120deg, #add8e6 0%, #2e4a9e 55%, #000080 100%);
  --grad-text:  linear-gradient(100deg, #1c2f6b 0%, #000080 50%, #2e4a9e 100%);
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(45,65,90,.35);
  --shadow-glow: 0 0 0 1px rgba(0,0,128,.25), 0 16px 44px -22px rgba(0,0,128,.3);
}
html.theme-frozen ::selection { background: rgba(173,216,230,.5); }

/* Shared light-theme scrollbars (the dark default thumb vanishes on white) */
html.theme-light *, html.theme-salt *, html.theme-yacht *, html.theme-calm *,
html.theme-lavender *, html.theme-retro *, html.theme-peach *, html.theme-frozen * { scrollbar-color: #b3b8bf transparent; }
html.theme-light *::-webkit-scrollbar-thumb, html.theme-salt *::-webkit-scrollbar-thumb,
html.theme-yacht *::-webkit-scrollbar-thumb, html.theme-calm *::-webkit-scrollbar-thumb,
html.theme-lavender *::-webkit-scrollbar-thumb, html.theme-retro *::-webkit-scrollbar-thumb,
html.theme-peach *::-webkit-scrollbar-thumb, html.theme-frozen *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-light *::-webkit-scrollbar-thumb:hover, html.theme-salt *::-webkit-scrollbar-thumb:hover,
html.theme-yacht *::-webkit-scrollbar-thumb:hover, html.theme-calm *::-webkit-scrollbar-thumb:hover,
html.theme-lavender *::-webkit-scrollbar-thumb:hover, html.theme-retro *::-webkit-scrollbar-thumb:hover,
html.theme-peach *::-webkit-scrollbar-thumb:hover, html.theme-frozen *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Gothic Noir — #000000 · #D1D0D0 · #988686 · #5C4E4E (black, warm mauve accents) */
html.theme-noir {
  --cyan: #a89494; --cyan-bright: #c9b8b8; --blue: #7d6a6a; --blue-deep: #5c4e4e;
  --bg: #000000; --bg-2: #0d0b0b; --panel: #151112; --panel-2: #1e1819;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #e9e5e5; --muted: #988686; --muted-2: #6e5f5f;
  --grad-brand: linear-gradient(120deg, #c9b8b8 0%, #a89494 38%, #7d6a6a 70%, #5c4e4e 100%);
  --grad-text:  linear-gradient(100deg, #e6dcdc 0%, #a89494 45%, #c1adad 100%);
  --shadow-glow: 0 0 0 1px rgba(201,184,184,.16), 0 30px 80px -30px rgba(168,148,148,.4);
}
html.theme-noir ::selection { background: rgba(168,148,148,.3); }

/* Harbor Haze — #909EAE · #5C8DC5 · #AD9E90 · #736F60 (dark slate, driftwood neutrals) */
html.theme-harbor {
  --cyan: #5c8dc5; --cyan-bright: #85aedd; --blue: #47709d; --blue-deep: #2e4a68;
  --bg: #14181e; --bg-2: #1a2028; --panel: #212934; --panel-2: #29323f;
  --ink: #eae5df; --muted: #ad9e90; --muted-2: #736f60;
  --grad-brand: linear-gradient(120deg, #85aedd 0%, #5c8dc5 38%, #47709d 70%, #2e4a68 100%);
  --grad-text:  linear-gradient(100deg, #c4d7ee 0%, #5c8dc5 45%, #90b3da 100%);
  --shadow-glow: 0 0 0 1px rgba(133,174,221,.18), 0 30px 80px -30px rgba(92,141,197,.45);
}
html.theme-harbor ::selection { background: rgba(92,141,197,.32); }

/* Spiced Mocha — #6F4E37 · #D47E30 · #F5F5DC · #6D3B07 (dark brown, orange accent, beige ink) */
html.theme-mocha {
  --cyan: #d47e30; --cyan-bright: #eda45c; --blue: #a35d1d; --blue-deep: #6d3b07;
  --bg: #171009; --bg-2: #1f150c; --panel: #291c10; --panel-2: #332415;
  --line: rgba(245,245,220,.12); --line-2: rgba(245,245,220,.2);
  --ink: #f5f5dc; --muted: #c9b393; --muted-2: #96805f;
  --grad-brand: linear-gradient(120deg, #eda45c 0%, #d47e30 38%, #a35d1d 70%, #6d3b07 100%);
  --grad-text:  linear-gradient(100deg, #ffe1b8 0%, #d47e30 45%, #e59a4d 100%);
  --shadow-glow: 0 0 0 1px rgba(237,164,92,.18), 0 30px 80px -30px rgba(212,126,48,.45);
}
html.theme-mocha ::selection { background: rgba(212,126,48,.32); }

/* Velocity (bike shop) — #242C3B · #353F54 · #34C8E8 → #4E4AF2 (dark navy, cyan→royal-blue gradient).
   Hand-made (Brian 2026-09-11) from Sourasith's Figma community file "Online Bike Shopping App"
   (figma.com/community/file/1149336740234053658). The design puts white text on #34C8E8 (2.0:1), so
   --grad-brand's cyan end is deepened to #0D7CB2 — white on every point of the gradient is ≥4.6:1
   (the avatar, pager, chat bubble and login button all put #fff on it). The bright #34C8E8 family lives
   on in --cyan-bright, --grad-text and the glow. Measured: ink 12.7:1 on --panel, muted 6.0:1,
   accent 5.6:1 (4.7:1 on --panel-2), muted-2 4.6:1.
   Reds: the default --red-soft #FF6A4D is only 3.7:1 on --panel-2 here, so it is lifted to #FF8F76
   (5.7:1 on --panel, 4.7:1 on --panel-2, 4.6:1 on .btn-call.danger's 8% red tint over --panel-2).
   --red keeps #E8412F: it is also the fill behind white co-browse text, and no one red reaches 4.5:1
   both as text on this navy and under white text. .neg reads --red-soft instead (screen only, below). */
html.theme-velocity {
  --cyan: #72afff; --cyan-bright: #4fd2ee; --blue: #4e4af2; --blue-deep: #2f2bb8;
  --red-soft: #ff8f76;
  --bg: #1d2330; --bg-2: #242c3b; --panel: #2a3345; --panel-2: #353f54;
  --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.18);
  --ink: #ffffff; --muted: #aab3c5; --muted-2: #939cb0;
  --grad-brand: linear-gradient(135deg, #0d7cb2 0%, #3a5ae8 60%, #4e4af2 100%);
  --grad-text:  linear-gradient(100deg, #8be6f8 0%, #4fd2ee 40%, #a3a0ff 100%);
  --shadow:      0 24px 60px -24px rgba(0,0,0,.7);
  --shadow-glow: 0 0 0 1px rgba(79,210,238,.2), 0 30px 80px -30px rgba(78,74,242,.55);
  --radius: 22px;
}
html.theme-velocity ::selection { background: rgba(78,74,242,.38); }
/* Velocity signature extras — screen only (print keeps the plain token look). No backdrop-filter:
   the "frosted glass" is a 1px inset top-left highlight + a deeper soft shadow, so nothing re-rasterises
   while scrolling. :where() holds these at (0,1,1): they beat the bare .panel/.btn-primary/.stat-card
   rules but lose to every two-class rule (.stat-card:hover glow, .btn-call.danger, …) and to inline
   styles. Only box-shadow/border-radius/colors change — no size, padding or layout. */
@media screen {
  html.theme-velocity :where(.panel, .stat-card) {
    box-shadow: inset 1px 1px 0 rgba(255,255,255,.09), 0 18px 44px -22px rgba(0,0,0,.75);
  }
  html.theme-velocity :where(.btn-primary, .btn-play) {
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 20px -8px rgba(78,74,242,.7);
  }
  html.theme-velocity :where(.btn-primary, .btn-play):hover:where(:not(:disabled)) {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 26px -8px rgba(79,210,238,.6);
  }
  html.theme-velocity .shell-nav nav a.active {
    color: #fff; background: var(--grad-brand); border-color: transparent;
    box-shadow: 0 6px 18px -8px rgba(78,74,242,.8);
  }
  html.theme-velocity .shell-nav nav a.active .nav-ico { color: #fff; }
  /* Negative money (.neg, Accounting/Payroll/MyTeam tables): --red #E8412F is 3.2:1 on --panel here;
     --red-soft is 5.7:1. Screen only, so printouts keep the default --red on white. */
  html.theme-velocity .neg { color: var(--red-soft); }
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  margin: 0;
  font-size: 14.5px;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(41,171,226,.35); }
* { scrollbar-width: thin; scrollbar-color: var(--panel-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--panel-2); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: var(--blue); }
*::-webkit-scrollbar-track { background: transparent; }

/* ── DevExpress dark theme → Brutus palette ───────────────── */
.dxbl-grid {
  --dxbl-grid-bg: transparent;
  --dxbl-grid-border-color: var(--line);
  --dxbl-grid-header-bg: var(--bg-2);
  --dxbl-grid-row-hover-bg: rgba(41,171,226,.07);
  --dxbl-grid-selection-bg: rgba(41,171,226,.16);
  border-color: var(--line) !important;
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-family: var(--font-body);
}
.dxbl-grid .dxbl-grid-header-content { font-family: var(--font-head); letter-spacing: .02em; }
.dxbl-grid .dxbl-grid-table { background: transparent !important; color: var(--ink) !important; }
.dxbl-grid .dxbl-grid-header-row,
.dxbl-grid thead th { background: var(--bg-2) !important; color: var(--muted) !important; border-color: var(--line) !important; }
.dxbl-grid tbody td { border-color: var(--line) !important; }
.dxbl-grid tbody tr:hover td { background: rgba(41,171,226,.06) !important; }
.dxbl-grid tbody tr.dxbl-grid-selected-row td,
.dxbl-grid tbody tr[aria-selected="true"] td { background: rgba(41,171,226,.16) !important; box-shadow: inset 2px 0 0 var(--cyan); }
.dxbl-grid .dxbl-pager, .dxbl-grid .dxbl-grid-pager { background: var(--bg-2) !important; border-color: var(--line) !important; }
.dxbl-text-edit, .dxbl-btn-tool { background: var(--bg-2) !important; border-color: var(--line-2) !important; color: var(--ink) !important; }
.dxbl-grid .dxbl-grid-search-box { max-width: 280px; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.muted { color: var(--muted); }

/* ── App shell ─────────────────────────────────────────────── */
.shell { display: flex; min-height: 100vh; }
.shell-nav {
  width: 236px; flex-shrink: 0; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  border-right: 1px solid var(--line); padding: 20px 14px 16px;
  position: sticky; top: 0; height: 100vh; box-sizing: border-box;
}
.shell-brand {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
.nav-section {
  display: block; color: var(--muted-2); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; padding: 14px 12px 5px;
  font-family: var(--font-head);
}
.shell-nav nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.shell-nav nav a {
  display: flex; align-items: center; gap: 11px;
  color: var(--muted); text-decoration: none; padding: 9px 12px;
  border-radius: var(--radius-sm); font-weight: 500; transition: all .15s var(--ease);
  border: 1px solid transparent;
}
.nav-ico { display: inline-flex; width: 17px; height: 17px; opacity: .8; }
.nav-ico svg { width: 17px; height: 17px; }
.shell-nav nav a:hover { color: var(--ink); background: rgba(255,255,255,.05); }

/* Collapsible admin nav groups (MainLayout — user directive 2026-08-20) */
.nav-group {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  font: inherit; font-size: .92rem; color: var(--muted);
  padding: 7px 14px; border-radius: 8px;
}
.nav-group:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.nav-caret { margin-left: auto; font-size: .7rem; opacity: .7; }
.nav-sub { margin-left: 10px; border-left: 1px solid var(--line); padding-left: 4px; }
.nav-sub a { font-size: .88rem; padding-top: 5px; padding-bottom: 5px; }
.shell-nav nav a.active {
  color: var(--ink); background: linear-gradient(90deg, rgba(41,171,226,.16), rgba(41,171,226,.04));
  border-color: rgba(76,198,255,.22);
}
.shell-nav nav a.active .nav-ico { color: var(--cyan-bright); opacity: 1; }

/* ── Icons-only menu (Brian 2026-09-08): html.nav-mini is set before first paint (App.razor) and
   toggled by the « » button; labels collapse to hover titles (brutusNav.titles), sections/search/
   forms hide, the avatar stays as the way back. ── */
.nav-mini-btn {
  align-self: flex-end; margin: -14px 0 8px; background: none; border: 1px solid var(--line);
  color: var(--muted); border-radius: 8px; cursor: pointer; padding: 1px 8px; font: inherit; font-size: .85rem; line-height: 1.3;
}
.nav-mini-btn:hover { color: var(--ink); background: rgba(255,255,255,.05); }
/* The glyph follows the <html> class, which is right from the first paint (Blazor's own state catches up after connect) */
.nav-mini-btn::before { content: '«'; }
html.nav-mini .nav-mini-btn::before { content: '»'; }
html.nav-mini .shell-nav { width: 66px; padding: 16px 8px 12px; }
html.nav-mini .shell-brand { margin-bottom: 14px; }
html.nav-mini .shell-brand .brand-icon { height: 34px; }
html.nav-mini .nav-mini-btn { align-self: center; margin: -6px 0 8px; }
/* search, carets, footer forms and the user-line text hide; section headers stay as thin dividers */
html.nav-mini .nav-search, html.nav-mini .nav-caret,
html.nav-mini .shell-footer form, html.nav-mini .shell-userline > div { display: none !important; }
html.nav-mini .nav-section { height: 0; padding: 0; margin: 8px 6px 4px; border-top: 1px solid var(--line); font-size: 0; overflow: hidden; }
html.nav-mini .shell-nav nav a, html.nav-mini .nav-group {
  justify-content: center; padding: 8px 0; gap: 0; font-size: 0;   /* the text node vanishes, the icon keeps its own size */
}
html.nav-mini .nav-ico { width: 20px; height: 20px; font-size: 1.05rem; line-height: 20px; justify-content: center; }
html.nav-mini .nav-ico svg { width: 20px; height: 20px; }
/* group children keep a 2px left rule (inset shadow — no layout shift, icons stay centered) */
html.nav-mini .nav-sub { margin: 0; padding: 0; border-left: none; box-shadow: inset 2px 0 0 var(--line); }
html.nav-mini .shell-nav nav .nav-sub a { padding: 5px 0; opacity: .85; }
html.nav-mini .shell-userline { justify-content: center; }
html.nav-mini .shell-footer { padding-top: 10px; }
html.nav-mini .avatar { cursor: pointer; }
.shell-footer { border-top: 1px solid var(--line); padding-top: 12px; }
.shell-userline { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--grad-brand); color: #fff; font-weight: 700; font-size: .8rem;
  font-family: var(--font-head); flex-shrink: 0;
}
.shell-user { display: block; color: var(--ink); font-size: .85rem; font-weight: 600; }
.link-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 0; font: inherit; font-size: .78rem;
}
.link-btn:hover { color: var(--cyan); }
.shell-main {
  flex: 1; padding: 26px 34px 40px; min-width: 0;
  background:
    radial-gradient(1100px 500px at 85% -20%, rgba(41,171,226,.07), transparent 60%),
    var(--bg);
}

/* ── Login ─────────────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center;
  background:
    radial-gradient(900px 500px at 70% -10%, rgba(41,171,226,.16), transparent 60%),
    radial-gradient(700px 420px at 10% 110%, rgba(28,74,134,.25), transparent 60%),
    var(--bg);
}
.login-card {
  width: min(400px, 92vw); background: var(--panel); border: 1px solid var(--line-2);
  border-radius: var(--radius); padding: 34px 32px; box-shadow: var(--shadow-glow);
}
.login-brand {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--font-head); font-weight: 700; font-size: 1.3rem;
}
.brand-icon { height: 40px; width: auto; }
.login-brand { justify-content: center; }
.login-icon { height: 84px; width: auto; }
.brand-wordmark { height: 26px; width: auto; }
.shell-brand { justify-content: center; }
.shell-brand .brand-icon { height: 46px; }
.login-sub { color: var(--muted); margin: 10px 0 22px; }
.login-error {
  background: rgba(232,65,47,.12); border: 1px solid rgba(232,65,47,.4);
  color: var(--red-soft); border-radius: var(--radius-sm);
  padding: 10px 14px; margin-bottom: 16px; font-size: .9rem;
}
.login-card label { display: block; color: var(--muted); font-size: .85rem; margin: 14px 0 6px; }
.login-card input {
  width: 100%; box-sizing: border-box; background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 11px 13px; font: inherit; outline: none; transition: border-color .15s var(--ease);
}
.login-card input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(41,171,226,.18); }
.login-btn {
  width: 100%; margin-top: 22px; padding: 12px; border: none; cursor: pointer;
  border-radius: var(--radius-sm); background: var(--grad-brand); color: #fff;
  font: inherit; font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.login-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }

/* ── Pages: shared chrome ─────────────────────────────────── */
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 1.55rem; }
.split { display: flex; gap: 18px; align-items: flex-start; }
.split > .panel:first-child { flex: 1.3; min-width: 0; }
.panel {
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 140%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: 0 14px 40px -22px rgba(0,0,0,.6);
}
.panel h3 { margin-top: 0; }
.edit-panel { flex: 1; max-width: 520px; max-height: 78vh; overflow-y: auto; }
.filter-bar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.filter-bar input, .filter-bar select { min-width: 160px; width: auto !important; flex: 0 1 auto; }
.filter-bar input[placeholder] { flex: 1 1 260px; max-width: 420px; }

/* DevExpress pager + buttons → brand accent */
.dxbl-pager .dxbl-btn.dxbl-active, .dxbl-pager .dxbl-btn[aria-current="page"],
.dxbl-page-size-selector .dxbl-btn.dxbl-active {
  background: var(--grad-brand) !important; border-color: transparent !important; color: #fff !important;
}
.dxbl-btn-primary { background: var(--grad-brand) !important; border-color: transparent !important; }

.field { margin-bottom: 12px; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
.field label { display: block; color: var(--muted); font-size: .85rem; margin-bottom: 5px; }
.field input, .field select, .field textarea, .filter-bar input, .filter-bar select {
  width: 100%; box-sizing: border-box; background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 9px 12px; font: inherit; outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus, .filter-bar input:focus {
  border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(41,171,226,.18);
}
.field input:disabled { opacity: .55; }

/* Native picker glyphs (clock on time fields, calendar on date fields): Chromium draws them
   near-black regardless of theme, so they vanish on the dark surfaces (report 2026-08-20 —
   the callback Time box). Repaint the same-shape glyph in the theme's ink color instead:
   white on the dark themes, dark on the light ones, all 100+ themes covered by the token. */
input[type=time]::-webkit-calendar-picker-indicator,
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator {
  background-color: var(--ink);
  opacity: .8;
  cursor: pointer;
  -webkit-mask: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm.5-13H11v6l5.2 3.1.8-1.3-4.5-2.7z"/%3E%3C/svg%3E') center / 15px 15px no-repeat;
  mask: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm.5-13H11v6l5.2 3.1.8-1.3-4.5-2.7z"/%3E%3C/svg%3E') center / 15px 15px no-repeat;
}
input[type=time]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator {
  -webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14zM5 8V6h14v2z"/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14zM5 8V6h14v2z"/%3E%3C/svg%3E');
}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Sortable column headers (SortTh.razor) — every lb-table grid */
.sort-th { cursor: pointer; user-select: none; white-space: nowrap; }
.sort-th:hover { color: var(--cyan-bright); }
.sort-arrow { color: var(--cyan); font-size: .68em; margin-left: 3px; vertical-align: middle; }

.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 7px; margin: 8px 0 14px; }
.check-grid label, .check-inline { color: var(--ink); font-size: .92rem; display: flex; align-items: center; gap: 7px; cursor: pointer; }
.check-grid input[type=checkbox], .check-inline input[type=checkbox] { accent-color: var(--cyan); width: 16px; height: 16px; }

.btn-row { display: flex; gap: 10px; margin-top: 16px; }
.btn-primary {
  padding: 10px 22px; border: none; cursor: pointer; border-radius: var(--radius-sm);
  background: var(--grad-brand); color: #fff; font: inherit; font-weight: 600;
  transition: transform .15s var(--ease);
}
.btn-primary:hover:where(:not(:disabled)) { transform: translateY(-1px); }
.btn-ghost {
  padding: 10px 22px; cursor: pointer; border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); border: 1px solid var(--line-2); font: inherit;
}
.btn-ghost:hover:where(:not(:disabled)) { color: var(--ink); background: rgba(255,255,255,.05); }

.mini-card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 12px; margin-bottom: 7px; font-size: .92rem;
}
.chip {
  display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .75rem;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line-2); margin-left: 6px;
}
.chip-on  { color: #8ff0b4; border-color: rgba(80,220,140,.4); }
.chip-off { color: var(--red-soft); border-color: rgba(232,65,47,.4); }
.chip-warm { color: var(--cyan-bright); border-color: rgba(76,198,255,.4); }
.chip-hot { color: var(--red-soft); border-color: rgba(255,106,77,.45); }

.perm-group { margin-bottom: 8px; }
.perm-group summary { cursor: pointer; color: var(--cyan-bright); font-weight: 600; padding: 6px 0; }

h4 {
  margin: 20px 0 8px; color: var(--cyan-bright); font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
}

/* ── Home dashboard ────────────────────────────────────────── */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.stat-card {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 140%);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
  transition: all .18s var(--ease);
  container-type: inline-size;   /* .stat-value measures itself against the card (cqw) */
}
.stat-card:hover { border-color: rgba(76,198,255,.35); transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.stat-label { color: var(--muted); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; font-family: var(--font-head); }
/* The value reads to the cent now (rounding audit, Brian 2026-10-21): "$1,234,567.89" is 6.7em of Space Grotesk 700 where
   "$1.2M" was five characters, and at 2rem it ran past a 183px card (five cards beside the rail on a 1366 screen). The
   second font-size shrinks it to the card - 100cqw / 7 fits a seven-figure amount - and a card 224px or wider inside
   keeps the 2rem it always had. The first is the fallback for an engine without container units. */
.stat-value { color: var(--ink); font-size: 2rem; font-size: min(2rem, calc(100cqw / 7)); font-weight: 700; font-family: var(--font-head); line-height: 1.1; }
.stat-sub { color: var(--muted-2); font-size: .82rem; }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.quick-card {
  display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 16px; transition: all .15s var(--ease);
}
.quick-card:hover { border-color: rgba(76,198,255,.35); background: var(--panel-2); }
.quick-card strong { font-family: var(--font-head); }

/* ── Copilot ───────────────────────────────────────────────── */
.copilot-thread { display: flex; flex-direction: column; gap: 12px; min-height: 180px; max-height: 52vh; overflow-y: auto; padding: 4px 2px; }
.copilot-msg { max-width: 88%; }
.copilot-msg.mine { align-self: flex-end; text-align: right; }
.copilot-who { display: block; color: var(--muted-2); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; font-family: var(--font-head); }
.copilot-text {
  display: inline-block; text-align: left; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 14px; line-height: 1.5;
}
.copilot-msg.mine .copilot-text { background: rgba(41,171,226,.13); border-color: rgba(76,198,255,.3); }
.copilot-input { display: flex; gap: 10px; margin-top: 14px; }
.copilot-input input {
  flex: 1; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 11px 14px; font: inherit; outline: none;
}
.copilot-input input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(41,171,226,.18); }
.copilot-summary { border-color: rgba(76,198,255,.35); background: rgba(41,171,226,.07); line-height: 1.55; }

/* tags + folders */
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 4px; }
.tag-x { cursor: pointer; margin-left: 5px; color: var(--muted-2); }
.tag-x:hover { color: var(--red-soft); }
.tag-input {
  background: transparent; border: 1px dashed var(--line-2); border-radius: 999px;
  color: var(--ink); padding: 2px 12px; font: inherit; font-size: .8rem; width: 90px; outline: none;
}
.tag-input:focus { border-color: var(--cyan); width: 150px; }
.folder-row { display: flex; gap: 7px; }
.folder-btn {
  width: 36px; height: 32px; cursor: pointer; border-radius: var(--radius-sm); font: inherit;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line-2);
}
.folder-btn.on { background: var(--grad-brand); color: #fff; border-color: transparent; }

/* Run Payments */
.run-iframe-mount { min-height: 340px; margin-bottom: 8px; }
/* The CardConnect tokenizer iframe defaults to 300x150 — the stacked fields (number, exp month,
   exp year, CVV) run ~340px tall, so the year dropdown and CVV get clipped without this. */
.run-iframe-mount iframe { width: 100%; height: 340px; border: 0; display: block; }
.zip-in {
  width: 140px; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 9px 11px; font: inherit; outline: none;
}
.zip-in:focus { border-color: var(--cyan); }
/* Feedback #405 (Adam 2026-09-18): the amount to charge is the FIRST thing on the card screen, with the live "Customer
   pays" figure beside it. Tokens only, like .zip-in, so every theme follows. */
.charge-amount { padding: 10px 12px; margin-bottom: 10px; }
.charge-amount-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 4px; }
.charge-amount .amt-in {
  font: inherit; font-size: 1.25rem; font-weight: 700; width: 170px; max-width: 100%;
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 8px 11px; outline: none;
}
.charge-amount .amt-in:focus { border-color: var(--cyan); }
.charge-amount .amt-in:disabled { opacity: .7; cursor: not-allowed; }
.charge-amount-pays { text-align: right; }
.charge-amount .pays { font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.charge-fee-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }

/* ── Reports ───────────────────────────────────────────────── */
.col-chart { display: flex; align-items: flex-end; gap: 6px; height: 178px; padding-top: 8px; }
.col-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; }
.col-bar { width: 100%; max-width: 34px; min-height: 2px; border-radius: 5px 5px 0 0;
  background: var(--grad-brand); transition: height .3s var(--ease); }
.col-wrap:hover .col-bar { filter: brightness(1.25); }
.col-label { font-size: .66rem; color: var(--muted-2); white-space: nowrap; }
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.bar-label { width: 110px; flex-shrink: 0; font-size: .85rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { flex: 1; height: 18px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--grad-brand); border-radius: 999px; min-width: 2px; transition: width .4s var(--ease); }
.bar-fill.hot { background: var(--grad-hot); }
/* 150px and nowrap: "4,567 · $1,234,567.89" to the cent (Brian 2026-10-21) split onto two lines at 120px; the track is flex: 1 and gives up the 30px. */
.bar-val { width: 150px; flex-shrink: 0; text-align: right; font-size: .82rem; color: var(--ink); white-space: nowrap; }
.lb-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.lb-table th { text-align: left; color: var(--muted); font-family: var(--font-head); font-size: .76rem;
  text-transform: uppercase; letter-spacing: .06em; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.lb-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.lb-table tbody tr:hover td { background: rgba(41,171,226,.06); }
.lb-table td:first-child { color: var(--cyan-bright); font-weight: 700; font-family: var(--font-head); width: 36px; }
.lb-table td:last-child, .lb-table th:last-child { text-align: right; }

/* ── TV Wallboard ──────────────────────────────────────────── */
.wall { position: fixed; inset: 0; background:
  radial-gradient(1200px 600px at 80% -10%, rgba(41,171,226,.16), transparent 60%),
  radial-gradient(900px 500px at 10% 110%, rgba(28,74,134,.30), transparent 60%), var(--bg);
  color: var(--ink); padding: 2.2vh 2.4vw; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; }
.wall-head { display: flex; align-items: center; gap: 18px; }
.wall-logo { height: 56px; }
.wall-clock { font-family: var(--font-head); font-size: 1.7rem; color: var(--muted); }
.wall-test { margin-left: auto; display: flex; gap: 6px; opacity: .25; transition: opacity .2s; }
.wall-test:hover { opacity: 1; }
.wall-test button { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: .8rem; cursor: pointer; }
.wall-title-txt { font-family: var(--font-head); font-size: 1.7rem; color: var(--cyan-bright); font-weight: 700; }
.wall-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4vw; margin: 2.4vh 0; }
.wall-goals { display: flex; gap: 1.6vw; margin-bottom: 2.2vh; }
.goal { flex: 1; }
.goal-head { display: flex; justify-content: space-between; color: var(--muted); font-size: 1vw; letter-spacing: .06em; margin-bottom: .8vh; text-transform: uppercase; }
.goal-track { height: 2.2vh; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 99px; overflow: hidden; }
.goal-fill { height: 100%; background: var(--grad-brand); border-radius: 99px; transition: width .6s var(--ease); }
.goal-fill.hit { background: linear-gradient(90deg, #4cd47a, #ffd24c); }
.wall-milestone { position: absolute; top: 12%; left: 50%; transform: translateX(-50%) scale(.6); opacity: 0;
  font-family: var(--font-head); font-weight: 800; font-size: 5vw; color: #ffd24c;
  text-shadow: 0 0 40px rgba(255,210,76,.6); animation: flashIn .5s var(--ease) forwards; white-space: nowrap; }
.wall-milestone.out { animation: none; opacity: 0; transition: opacity .6s ease; }
/* 🏆 #480 morning accolades — one card at a time, queued by brutusWall.kudos */
.wall-kudos { position: absolute; top: 10%; left: 50%; transform: translate(-50%, 0) scale(.6); opacity: 0; max-width: 84vw;
  background: rgba(7,13,24,.9); border: 3px solid #ffd24c; border-radius: 24px; padding: 2.6vh 3vw; text-align: center;
  box-shadow: 0 0 0 6px rgba(255,255,255,.04), 0 30px 90px -20px #ffd24c; animation: kudosIn .5s var(--ease) forwards; }
.wall-kudos.out { animation: kudosOut .6s var(--ease) forwards; }
.wall-kudos-missed { border-color: #ff6a4d; box-shadow: 0 0 0 6px rgba(255,255,255,.04), 0 30px 90px -20px #ff6a4d; }
.wall-kudos-head { font-size: 1.3vw; letter-spacing: .18em; color: var(--muted); margin-bottom: .8vh; }
.wall-kudos-text { font-family: var(--font-head); font-weight: 700; font-size: 3vw; line-height: 1.2; color: #fff; white-space: pre-line; overflow-wrap: anywhere; }
.wall-kudos.long .wall-kudos-text { font-size: 2.2vw; }
.wall-kudos.xlong .wall-kudos-text { font-size: 1.7vw; line-height: 1.3; }
@keyframes kudosIn { from { transform: translate(-50%, 0) scale(.6); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }
@keyframes kudosOut { to { transform: translate(-50%, -20%) scale(.9); opacity: 0; } }
/* 🔇 #509 the browser is holding the TV's sound back (autoplay policy after a PC or Chrome restart nobody clicked).
   brutusWall.showSoundOff puts ONE of these on <body>; the first click, key or touch anywhere removes it. Top right, over
   the header's empty end, above the wall stage (50) and the flashes; fixed colours on purpose so it reads the same in
   every theme, and big enough to read from across the sales floor. */
.wall-sound-off { position: fixed; top: 1.6vh; right: 1.6vw; z-index: 10000; max-width: min(44vw, 640px);
  display: flex; align-items: center; gap: .6em; padding: .7em 1.1em; border-radius: 999px; cursor: pointer;
  background: #ffd24c; color: #1a1300; border: 3px solid #ff6a4d; box-shadow: 0 10px 40px -8px rgba(0,0,0,.6);
  font-family: var(--font-head, inherit); font-weight: 800; font-size: clamp(15px, 1.4vw, 34px); line-height: 1.25;
  animation: soundOffPulse 2.4s ease-in-out infinite; }
@keyframes soundOffPulse { 0%, 100% { box-shadow: 0 10px 40px -8px rgba(0,0,0,.6), 0 0 0 0 rgba(255,106,77,.55); }
  50% { box-shadow: 0 10px 40px -8px rgba(0,0,0,.6), 0 0 0 .5em rgba(255,106,77,0); } }
@media (prefers-reduced-motion: reduce) { .wall-sound-off { animation: none; } }
/* 🏆 #480 part two — the TV card on every Brutus screen (AppreciationTicker in MainLayout). Fixed, centred, at the BOTTOM
   of the viewport (#480 review). It used to hang under the topbar, which is where every MainLayout
   page keeps its .page-head button row (y≈103–148): on the Workspace it sat on Search / campaigns / Play order / Auto-call
   / Play and swallowed the clicks for 7 s a card, cards chaining with no gap. The host passes the pointer through;
   the CARD takes it, and a click anywhere on it dismisses it (F3 review). For one build the card was click-through
   with ✕ the only target - but it is 96% opaque, so a click on it went to a control nobody could see: a New Sale
   commit button, or at 1366 wide a disposition tile at the left edge of the Workspace's edit panel. A click on a card
   now only ever removes that card. ✕ stays as the visible cue (a 44px box in the gutter the card already reserves on
   the right; it has no handler of its own, its click bubbles to the card). While a sale, payment or merchandise popup
   is open the card is not shown at all - the :has rule under the keyframes.
   bottom: calc(2vh + 80px) = just above a one-row .dossier-foot at the
   end of its scroll (overlay padding 2vh + panel padding 18px + a 55px foot; measured 6px clear at 768 and 1080 tall,
   where 72px sat on its top 17-23px); it also clears the #cobrowse-banner pill (bottom: 18px) and #blazor-error-ui.
   8400 = above dossier (900) / topbar (800), under the incoming-call alert (8500), modals (9000), notify (9999),
   co-browse (10000). Colours are self-contained so the card reads the same on every theme (#9fb1c9 = the dark --muted;
   the light themes redefine --muted to a dark grey that would vanish on this card). */
.app-kudos-host { position: fixed; bottom: calc(2vh + 80px); left: 0; right: 0; z-index: 8400; display: flex; justify-content: center; pointer-events: none; }
.app-kudos { pointer-events: auto; cursor: pointer; position: relative; max-width: min(720px, 92vw); background: rgba(7,13,24,.96); border: 3px solid #ffd24c; border-radius: 18px; padding: 14px 44px 14px 22px; text-align: center; box-shadow: 0 0 0 6px rgba(255,255,255,.04), 0 24px 60px -20px #ffd24c; animation: appKudosIn .45s var(--ease) forwards; }
.app-kudos-missed { border-color: #ff6a4d; box-shadow: 0 0 0 6px rgba(255,255,255,.04), 0 24px 60px -20px #ff6a4d; }
.app-kudos-head { font-size: .72rem; letter-spacing: .18em; color: #9fb1c9; margin-bottom: 4px; }
.app-kudos-text { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; line-height: 1.25; color: #fff; white-space: pre-line; overflow-wrap: anywhere; }
.app-kudos-x { pointer-events: auto; position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: flex; align-items: flex-start; justify-content: center; padding: 7px 0 0; background: transparent; border: 0; color: #9fb1c9; cursor: pointer; font-size: 1rem; }
@keyframes appKudosIn { from { transform: translateY(16px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
/* A sale, payment or merchandise popup is open (.pay-modal-backdrop, app.css:40): no card. The popup is centred, so its
   commit row (SOFT / Mail / Courier / Credit Card / ACH, Charge) sits where the card lands on every screen under 1080
   tall, and the card paints over it (8400 vs 1200). While the card was click-through, a click on it fired the button
   hidden underneath - a sale saved with the wrong type, or a charge; the card takes the click itself now, but it would
   still hide that row for its whole stay. A lower z-index on the host does NOT solve it: at 1100 the card still paints
   on top, because the popup lives inside the sticky edit panel's stacking context. The stay timer keeps running: a
   card that arrives mid-sale is simply not shown (the history page keeps it). */
body:has(.pay-modal-backdrop) .app-kudos-host { display: none; }
/* 🏆 #480 week-to-date podium strip (1st/2nd/3rd by $ in, 1st in cold sales) */
.wall-podium { display: flex; flex-wrap: wrap; justify-content: center; gap: .6vh 1vw; margin: .4vh 1vw 1vh; }
/* 1.3vw / 1vw, from 1.45vw / 1.2vw: the cents (Brian 2026-10-21) made each chip ~45px wider, and four chips with
   13-character display names no longer sat on one row; a second podium row costs the Top-10 column ~55px. */
.podium-chip { padding: .5vh 1vw; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line-2);
  font-size: 1.3vw; font-weight: 600; color: var(--muted); white-space: nowrap; }
.podium-chip b { margin-left: .4vw; color: #fff; }
.podium-chip.p1 { border-color: #ffd24c; color: #ffd24c; }
.podium-chip.p2 { border-color: #c8c8c8; color: #dedede; }
.podium-chip.p3 { border-color: #cd7f32; color: #e3a86a; }
.podium-chip.pcold { border-color: #8fe1ff; color: #8fe1ff; }
.wall-kpi { background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 140%); border: 1px solid var(--line-2);
  border-radius: 20px; padding: 2.4vh 2vw; text-align: center; box-shadow: var(--shadow); }
.wall-kpi .k-val { display: block; font-family: var(--font-head); font-weight: 700; font-size: 4.2vw; line-height: 1;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wall-kpi .k-lab { display: block; margin-top: 1vh; color: var(--muted); font-size: 1.1vw; letter-spacing: .08em; text-transform: uppercase; }
.wall-board { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6vw; flex: 1; min-height: 0; }
.wall-col { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 2vh 1.6vw; overflow: hidden; }
.wall-col h3 { font-size: 1.5vw; margin: 0 0 1.4vh; color: var(--cyan-bright); }
.wall-leader { display: flex; align-items: center; gap: 1vw; padding: 1.1vh 0; border-bottom: 1px solid var(--line); font-size: 1.5vw; }
.wl-rank { width: 2.2vw; height: 2.2vw; display: grid; place-items: center; border-radius: 50%; background: var(--grad-brand); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.2vw; flex-shrink: 0; }
.wl-name { flex: 1; font-weight: 600; }
.wl-stat { color: var(--muted); }
.wall-recent { display: flex; align-items: baseline; gap: 1vw; padding: 1.1vh 0; border-bottom: 1px solid var(--line); font-size: 1.4vw; }
.wr-amt { font-family: var(--font-head); font-weight: 700; }
.wr-who { font-weight: 600; }
.wr-co { color: var(--muted); margin-left: auto; }

/* ── CRM5 TV parity board ──────────────────────────────────────────────
   Three columns (alternating Top-10 · orange Company Totals · On The Phone) over a strip of
   rotating agent stat cards. Palatino + DarkOrange/green palette matches the CRM5 TVDisplay. */
/* Everything must FIT the screen at once — full top-10, totals, on-phone, AND the agent strip —
   so every font is capped in vh: shorter screens shrink text instead of clipping rows. */
.wall.wall-inset { padding-bottom: 7vh; }   /* the /wallboard ⏱ between-calls banner floats here */
.wall5-board { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 1.4vw; flex: 1 1 auto; min-height: 0; margin-top: 1vh; }
.wall5-board .wall5-col { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 1.2vh 1.4vw; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.wall5-board .wall-leader { padding: .3vh 0; font-size: min(1.35vw, 2.2vh); }
.wall5-board .wl-rank { width: min(2.2vw, 3.2vh); height: min(2.2vw, 3.2vh); font-size: min(1.2vw, 1.8vh); }
/* The Top-10 column must show all ten rows whatever the strips above and the agent cards below leave it, the way the
   totals column's lines do (rounding audit review, Brian 2026-10-21: the cents make a two-row podium more common, and
   under one rows 8-10 were clipped). A row is as tall as its rank bubble (3.2vh, over the 2.2vh font's line box), so
   the bubble follows the font and both follow the column: (height - 12vh for the title and the rows' own padding) / 15.5
   (ten bubbles at 1.45 are 14.5; the half is a few pixels of slack for a serif whose title line box runs taller).
   On a roomy column the caps above still win, so nothing moves until the column is short. Scoped to engines with
   container units; the two rules above are the fallback. */
@supports (height: 1cqh) {
  .wall5-board .wall5-col:first-child { container-type: size; }
  /* Floor at 1.6vh (review 2026-10-21): the top rows stay legible when goals + six cards squeeze the column; the tail may clip, as it did before. */
  .wall5-board .wall-leader { --wl-font: max(1.6vh, min(1.35vw, 2.2vh, calc((100cqh - 12vh) / 15.5))); font-size: var(--wl-font); }
  .wall5-board .wl-rank { width: calc(var(--wl-font) * 1.45); height: calc(var(--wl-font) * 1.45); font-size: calc(var(--wl-font) * .82); }
}
.wall5-title { font-family: var(--font-wall); font-size: min(1.6vw, 2.8vh); margin: 0 0 .8vh; padding: .5vh .8vw; border-radius: 10px; color: #0b0b0b; text-align: center; flex-shrink: 0; }
.wall5-title.t-week { background: darkorange; }
.wall5-title.t-annual { background: #02ec02; }
.wall5-title.t-calls { background: var(--panel-2); color: var(--cyan-bright); }
.wall5-totals h3 { font-family: var(--font-wall); font-size: min(1.5vw, 2.6vh); margin: 0 0 .6vh; color: var(--cyan-bright); text-align: center; }
/* The totals column must show EVERY line whatever strips are above the board (#484 / #494 review). With the #480 podium
   on, the fixed min(1.9vw, 3.4vh) x 1.5 lines needed 556px of a 482px column at 1080p: "Total In and Out" was clipped off
   the bottom, and a tenth line took "Total In" - the figure #494 is about - with it. So the column is a size container
   and the font is the smaller of the old cap and what fits: (column height - 4.2vh for the h3) / 11.9, where 11.9 = NINE
   lines x 1.3 line-height + slack. Add 1.3 for every line added to BoardView (13.2 if a Repeat line comes back). The
   first font-size is the fallback for an engine without container units (before Chromium 105), and the @supports rule
   is that fallback with the goals strip showing, where 2.85vh still cut "Total In and Out" (12 of 40px at 1080p;
   2.1vh fits it under a two-row podium as well). flex-grow with max-height: 1.5em gives the old 1.5 spacing back
   whenever the column has the room - a week with no podium yet, a morning with no agent cards - and leaves the lines
   at 1.3 when it has not; it needs no line count, so the divisor above stays the ONE number to change.
   WIDTH (rounding audit, Brian 2026-10-21): the lines now read to the cent and nowrap, so a fourth term caps the font
   at a 15em line: "Total In and Out: $123,456.78" is 13.2em in Palatino Linotype Bold (a seven-figure total 13.9em), and
   the slack covers Palatino's metric clones in --font-wall (Book Antiqua is 13.89em too; Georgia would be 16.46em,
   which is why a generic serif is not left to chance). At 1080p that is 34.9px against the 36.5px of 1.9vw - a 4% step
   the eye does not see - and it scales with the screen, so a 4K TV fits the same nine lines. */
.wall5-board .wall5-totals { container-type: size; }
.wall5-totals div { font-family: var(--font-wall); font-weight: 700; font-size: min(1.6vw, 2.85vh); font-size: min(1.9vw, 3.4vh, calc((100cqh - 4.2vh) / 11.9), calc(100cqw / 15)); color: darkorange; text-align: center; line-height: 1.3; flex: 1 1 auto; max-height: 1.5em; white-space: nowrap; }
@supports not (height: 1cqh) { .wall-goals ~ .wall5-board .wall5-totals div { font-size: min(1.6vw, 2.1vh); } }
.wall5-agents { display: flex; gap: 1vw; margin-top: 1.2vh; min-height: 0; overflow: hidden; flex-shrink: 0; }
.agent-card { flex: 1 1 0; min-width: 0; background: var(--panel); border: 2px solid darkorange; border-radius: 14px;
  padding: .8vh .7vw; text-align: center; font-family: var(--font-wall); animation: acIn .45s ease; }
.agent-card.idle { background: #7a1010; }   /* CRM5: whole card goes red when the agent isn't calling */
.agent-card .ac-name { color: #02ec02; font-weight: 700; font-size: min(1.35vw, 2.2vh); border-bottom: 1px solid var(--line); padding-bottom: .4vh; margin-bottom: .4vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-card .ac-line { color: #fff; font-weight: 700; font-size: min(1.05vw, 1.8vh); line-height: 1.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-card .ac-sec { color: hotpink; font-weight: 700; font-size: min(1.05vw, 1.8vh); line-height: 1.6; }
.agent-card .c-orange { color: darkorange; }
.agent-card .c-blue { color: #43bbeb; }
.agent-card .c-purple { color: mediumpurple; }
.agent-card .c-green { color: #02ec02; }
@keyframes acIn { from { transform: translateX(30%); opacity: 0; } to { transform: none; opacity: 1; } }   /* enters from the RIGHT (2026-08-21) */

/* Campaign-document picker with page-1 previews — agents SEE what they're attaching. */
.doc-pick-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.doc-pick { position: relative; width: 190px; cursor: pointer; border: 2px solid var(--line-2); border-radius: 10px;
  padding: 6px; background: var(--panel-2); text-align: center; user-select: none; }
.doc-pick:hover { border-color: var(--muted-2); }
.doc-pick.on { border-color: var(--cyan-bright); box-shadow: 0 0 0 1px var(--cyan-bright); }
.doc-pick img { width: 100%; height: 230px; object-fit: contain; background: #fff; border-radius: 6px; display: block; }
.doc-pick .doc-fallback { display: none; width: 100%; height: 230px; place-items: center; font-size: 2rem; background: var(--panel); border-radius: 6px; }
.doc-pick .doc-name { display: block; margin-top: 5px; font-size: .88rem; line-height: 1.25; word-break: break-word; max-height: 2.6em; overflow: hidden; }
.doc-pick .doc-check { position: absolute; top: 4px; right: 6px; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: var(--cyan-bright); color: #04222b; font-weight: 800; }
.doc-thumb-sm { width: 44px; height: 58px; object-fit: contain; background: #fff; border-radius: 4px; border: 1px solid var(--line-2); }

/* celebration overlay */
.wall-stage { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.wall-flash { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.4); text-align: center;
  background: rgba(7,13,24,.86); border: 3px solid var(--accent); border-radius: 28px; padding: 5vh 6vw;
  box-shadow: 0 0 0 6px rgba(255,255,255,.04), 0 40px 120px -20px var(--accent);
  animation: flashIn .5s var(--ease) forwards, flashPulse 1.2s ease-in-out .5s infinite alternate; }
.wall-flash.out { animation: flashOut .8s var(--ease) forwards; }
.wall-emoji { font-size: 7vw; line-height: 1; animation: emojiBounce .6s ease infinite alternate; }
.wall-title { font-family: var(--font-head); font-weight: 700; font-size: 4.5vw; letter-spacing: .02em; margin-top: 1vh; }
.wall-amount { font-family: var(--font-head); font-weight: 700; font-size: 6vw; color: #fff; line-height: 1.05; }
.wall-agent { font-size: 2.6vw; font-weight: 600; margin-top: 1vh; }
.wall-meta { font-size: 1.4vw; color: var(--muted); margin-top: .6vh; }
@keyframes flashIn { from { transform: translate(-50%,-50%) scale(.3); opacity: 0; } to { transform: translate(-50%,-50%) scale(1); opacity: 1; } }
@keyframes flashOut { to { transform: translate(-50%,-50%) scale(1.3); opacity: 0; } }
@keyframes flashPulse { from { box-shadow: 0 0 0 6px rgba(255,255,255,.04), 0 40px 120px -20px var(--accent); } to { box-shadow: 0 0 0 10px rgba(255,255,255,.10), 0 50px 160px -10px var(--accent); } }
@keyframes emojiBounce { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-18px) rotate(6deg); } }
.wall-rain { position: absolute; inset: 0; pointer-events: none; }
.rain-piece { position: absolute; top: -8vh; animation: rainFall linear forwards; }
@keyframes rainFall { to { transform: translateY(116vh) rotate(360deg); opacity: .85; } }

/* ── Mail ──────────────────────────────────────────────────── */
.mail-row { cursor: pointer; transition: border-color .12s; }
.mail-row:hover { border-color: rgba(76,198,255,.35); }
.mail-row.on { border-color: var(--cyan); background: rgba(41,171,226,.08); }
.mail-row.unread { border-left: 3px solid var(--cyan); }
.mail-line1 { display: flex; justify-content: space-between; gap: 8px; font-size: .9rem; }
.mail-when { color: var(--muted-2); font-size: .78rem; white-space: nowrap; }
.mail-subj { font-size: .88rem; margin: 2px 0; }
.mail-snip { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-body { background: #fff; color: #111; border-radius: var(--radius-sm); padding: 16px; max-height: 56vh; overflow: auto; }

/* ── Notification toasts ───────────────────────────────────── */
#notify-host { position: fixed; top: 18px; right: 18px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.notify-toast {
  display: flex; gap: 12px; align-items: flex-start; width: 320px;
  background: var(--panel-2); border: 1px solid var(--line-2); border-left: 3px solid var(--cyan);
  border-radius: var(--radius-sm); padding: 13px 15px; box-shadow: var(--shadow);
  transform: translateX(380px); opacity: 0; transition: all .35s var(--ease);
}
.notify-toast.in { transform: translateX(0); opacity: 1; }
.nt-kind { font-size: 1.3rem; line-height: 1; }
.nt-title { font-weight: 600; font-size: .9rem; color: var(--ink); }
.nt-text { color: var(--muted); font-size: .82rem; margin-top: 2px; }

.neg { color: var(--red); }

/* ── Deploy action bar ─────────────────────────────────────── */
.deploy-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }

/* ── Address autocomplete ──────────────────────────────────── */
.addr-ac { position: relative; }
/* #448: state picker + street box on one line; the list below still spans the whole .addr-ac. */
.addr-row { display: flex; gap: 6px; align-items: center; }
.addr-state { flex: 0 0 150px; min-width: 0; }
.addr-input { width: 100%; flex: 1 1 auto; min-width: 0; }
.addr-list { position: absolute; z-index: 60; left: 0; right: 0; margin-top: 2px; max-height: 240px; overflow: auto; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.addr-item { padding: 8px 12px; cursor: pointer; font-size: .9rem; border-bottom: 1px solid var(--line-2); }
.addr-item:last-child { border-bottom: none; }
.addr-item:hover { background: var(--panel-2); color: var(--cyan-bright); }

/* ── Shell top bar (persistent softphone) ──────────────────── */
/* Sticky: the phone (and its keypad) stay reachable at the top of every page while scrolling. */
.shell-topbar { display: flex; justify-content: flex-end; align-items: center; padding: 8px 4px 14px; border-bottom: 1px solid var(--line-2); margin-bottom: 16px; position: sticky; top: 0; z-index: 800; background: var(--bg); box-shadow: 0 6px 18px rgba(4, 8, 16, .35); }

/* The question bar sits at the LEFT of the top bar, which is justify-content:flex-end, so it takes
   the leftover space and pushes chat + phone to the right where they already live. */
.qbar { position: relative; margin-right: auto; }
.qbar-btn { background: transparent; border: 1px solid var(--line-2); color: var(--muted); border-radius: var(--radius-sm); padding: 5px 12px; font: inherit; font-size: .85rem; cursor: pointer; }
.qbar-btn:hover { color: var(--ink); border-color: var(--cyan); }
.qbar-box { display: flex; align-items: center; gap: 6px; }
.qbar-input { background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink); border-radius: var(--radius-sm); padding: 6px 10px; font: inherit; font-size: .85rem; width: min(320px, 42vw); }
.qbar-input:focus { border-color: var(--cyan); outline: none; }
.qbar-go { background: var(--panel-2); border: 1px solid var(--line-2); color: var(--ink); border-radius: var(--radius-sm); padding: 6px 12px; font: inherit; font-size: .85rem; cursor: pointer; }
.qbar-go:disabled { opacity: .45; cursor: default; }
.qbar-x { background: transparent; border: none; color: var(--muted-2); font: inherit; cursor: pointer; padding: 4px 6px; }
.qbar-x:hover { color: var(--ink); }
/* Absolutely placed so an answer of any length never grows the sticky top bar and shoves the page
   down mid-call. z-index sits under the incoming-call escalation (2654) and over ordinary content. */
.qbar-answer { position: absolute; top: calc(100% + 6px); left: 0; z-index: 820; width: min(560px, 76vw); max-height: 48vh; overflow: auto; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 12px 14px; box-shadow: var(--shadow); font-size: .88rem; text-align: left; }
.qbar-answer-text { white-space: pre-wrap; color: var(--ink); }
.qbar-src { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: .8rem; }
.qbar-src a { color: var(--muted); }
@media (max-width: 720px) { .qbar-input { width: 46vw; } .qbar-answer { width: 88vw; } }

/* Panel form on /help (Brian 2026-10-02) — always open, full width, answer in the page flow. */
.qbar-inline { margin: 0 0 16px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); }
.qbar-inline .qbar-box { gap: 8px; }
.qbar-inline .qbar-input { flex: 1; width: auto; }
/* In flow here, not hanging off the top bar — so no absolute placement and no z-index. */
.qbar-inline .qbar-answer { position: static; width: auto; max-height: none; margin-top: 12px; box-shadow: none; background: var(--bg-2); }
.qbar-head { font-family: var(--font-head); font-size: .95rem; color: var(--ink); margin-bottom: 10px; }
.qbar-hint { margin-top: 10px; color: var(--muted-2); font-size: .8rem; }

/* ── Modal overlay (add-lead, etc.) ────────────────────────── */
.modal-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(4,8,16,.7); display: grid; place-items: center; padding: 20px; overflow: auto; }
.modal-card { width: min(640px, 96vw); max-height: 92vh; overflow: auto; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-glow); }

/* ── 🎁 Gift-cert ask box + chip (feedback #510) ───────────────── */
/* IN FLOW at the top of the lead column — never fixed, never a modal. The modal layer (9000) would cover the sticky
   softphone bar (z 800; 8500 with an incoming call), i.e. Hang Up and Answer; a fixed box would cover the ⏱ auto-dial
   Now/Cancel and the ⭐ dial-confirm banner, and slide under the bar when it wraps. No backdrop: it waits for Got it. */
.gc-pop { margin: 0 0 12px; padding: 14px 16px; border: 2px solid #7b3fa0; border-left-width: 8px; border-radius: var(--radius-sm); background: color-mix(in srgb, #7b3fa0 14%, var(--panel)); color: var(--ink); box-shadow: var(--shadow); }
.gc-pop-head { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; overflow-wrap: anywhere; }
.gc-pop-asks { margin: 0 0 12px; padding-left: 20px; }
.gc-pop-asks li { margin: 6px 0; font-size: 1rem; overflow-wrap: anywhere; }
.gc-pop-why { display: block; font-size: .8rem; }
.gc-pop-ok { background: #7b3fa0; color: #fff; border: none; border-radius: var(--radius-sm); padding: 8px 24px; font: inherit; font-weight: 700; cursor: pointer; }
.gc-pop-ok:hover { filter: brightness(1.15); }
/* The office's note on a RETURNED sale (Home / Daily History / My Stats panel, My Sales). The tint is mixed from the
   theme's own --red and --panel and the text is --ink, so it reads on every theme (Brian 2026-10-21: the fixed
   #fff5f5 box put the dark themes' near-white text on pale pink). */
.return-note { margin-top: 5px; padding: 6px 8px; border-left: 3px solid var(--red); border-radius: 4px;
  background: color-mix(in srgb, var(--red) 14%, var(--panel)); color: var(--ink); font-size: .9rem; overflow-wrap: anywhere; }
.return-note strong { color: var(--ink); }
.gc-chip-line { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.gc-chip-line .gc-chip { margin-left: 0; background: #7b3fa0; color: #fff; border-color: #7b3fa0; font-weight: 600; font-size: .85rem; border-radius: var(--radius-sm); overflow-wrap: anywhere; }

/* ── Employee editor tabs ──────────────────────────────────── */
.emp-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line-2); margin: 8px 0 14px; }
.emp-tab { background: transparent; border: none; color: var(--muted); padding: 8px 14px; font: inherit; cursor: pointer; border-bottom: 2px solid transparent; }
.emp-tab:hover { color: var(--ink); }
.emp-tab.active { color: var(--ink); border-bottom-color: var(--cyan-bright); font-weight: 600; }
.emp-photo-row { display: flex; align-items: center; gap: 16px; }
.emp-photo { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line-2); }
.emp-photo-empty { display: grid; place-items: center; color: var(--muted-2); background: var(--panel-2); font-size: .8rem; }

/* ── Controller row status colors (tinted for the dark grid) ── */
tr.ctrl-ready    td { background: rgba(245, 222, 80, .16) !important; }
tr.ctrl-otd      td { background: rgba(80, 215, 235, .16) !important; }
tr.ctrl-received td { background: rgba(70, 200, 120, .16) !important; }
tr.ctrl-credit   td { background: rgba(150, 120, 230, .18) !important; }
tr.ctrl-ach      td { background: rgba(160, 210, 90, .16) !important; }
tr.ctrl-mailin   td { background: rgba(240, 110, 180, .16) !important; }
tr.ctrl-mailout  td { background: rgba(150, 150, 160, .16) !important; }
tr.ctrl-returned td { background: rgba(240, 100, 70, .18) !important; }
tr.ctrl-delete   td { background: rgba(20, 20, 24, .55) !important; }
tr.ctrl-deposited td { background: rgba(70, 120, 230, .20) !important; }

/* ── Controller quick edit (feedback #402): Check # / Rating / Deposited typed right in the grid, accounting only ──
   Nothing here may change a row's HEIGHT mid-keying (no wrapping, one-glyph ⏳/⚠): accounting types a check # and ticks
   Deposited 0-1 s apart, and a row that grows pushes the next click onto the wrong sale. A 6px radius (not the 12px
   --radius-sm) suits a compact grid input; #d97706 reads on both the dark and the light themes. */
.qe-cell { display: inline-flex; align-items: center; gap: 4px; width: 100%; white-space: nowrap; }
.qe-input { width: 100%; min-width: 70px; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 6px; font: inherit; font-size: .85rem; }
.qe-stars { display: inline-flex; align-items: center; white-space: nowrap; }
.qe-stars > span:not(.qe-flag) { cursor: pointer; font-size: 1.05rem; user-select: none; }
.qe-flag { color: #d97706; cursor: help; }
.qe-wait { cursor: progress; font-size: .85rem; }
.qe-msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The message line above the grid while quick edit is on: a FIXED one-line height, so no message (a long skip list, an
   emoji like ⏳ from a fallback font with taller metrics) can make it grow or shrink between two clicks. */
.qe-msg > span { display: block; height: 1.45em; line-height: 1.45em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-call.qe-on { outline: 2px solid var(--cyan-bright); }

/* ── Controller filters & saved views ──────────────────────── */
.head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.view-select { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 7px 10px; font: inherit; }
.save-view-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.save-view-bar input[type=text], .save-view-bar input:not([type]) { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 7px 10px; font: inherit; min-width: 220px; }
.filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.filter-dd { position: relative; }
.filter-dd > summary { list-style: none; cursor: pointer; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 7px 12px; user-select: none; display: inline-flex; align-items: center; gap: 6px; }
.filter-dd > summary::-webkit-details-marker { display: none; }
.filter-dd > summary::after { content: "▾"; color: var(--muted-2); }
.filter-dd[open] > summary { border-color: var(--cyan-bright); }
.filter-dd .dd-body { position: absolute; z-index: 50; margin-top: 6px; min-width: 220px; max-height: 320px; overflow: auto; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 10px 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; }
.dd-badge { background: var(--grad-brand); color: #fff; border-radius: 999px; font-size: .72rem; padding: 1px 7px; }
.filter-date { display: inline-flex; gap: 6px; align-items: center; }
.filter-date label { color: var(--muted); font-size: .85rem; }
.filter-date input[type=date] { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 6px 8px; font: inherit; }
.ctrl-search { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 7px 12px; font: inherit; min-width: 280px; }

/* ── Co-browse ─────────────────────────────────────────────── */
.cobrowse-viewer { background: #fff; border-radius: var(--radius-sm); height: 74vh; overflow-y: auto; overflow-x: hidden; position: relative; }
.cobrowse-viewer .cb-empty { color: var(--muted-2); padding: 40px; text-align: center; }
.cobrowse-viewer .replayer-wrapper { transform-origin: top left; }
.cobrowse-viewer iframe { border: 0; }
#cobrowse-consent { position: fixed; inset: 0; z-index: 10000; background: rgba(4,8,16,.7); display: grid; place-items: center; }
#cobrowse-consent .cb-card { width: min(440px, 92vw); background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-glow); }
#cobrowse-consent .cb-title { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--ink); }
#cobrowse-consent .cb-text { color: var(--muted); margin: 12px 0 20px; line-height: 1.5; }
#cobrowse-consent .cb-btns { display: flex; gap: 10px; justify-content: flex-end; }
#cobrowse-consent .cb-allow { background: var(--grad-brand); color: #fff; border: none; border-radius: var(--radius-sm); padding: 10px 22px; font: inherit; font-weight: 600; cursor: pointer; }
#cobrowse-consent .cb-deny { background: transparent; color: var(--muted); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 10px 22px; font: inherit; cursor: pointer; }
#cobrowse-banner { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; align-items: center; gap: 12px; background: var(--panel-2); border: 1px solid var(--red-soft); border-radius: 999px; padding: 9px 16px; color: var(--ink); font-size: .88rem; box-shadow: var(--shadow); }
#cobrowse-banner .cb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: emojiBounce 1s infinite alternate; }
#cobrowse-banner .cb-stop { background: var(--red); color: #fff; border: none; border-radius: 999px; padding: 5px 14px; font: inherit; font-size: .8rem; cursor: pointer; }
#cobrowse-banner.cb-controlling { border-color: var(--red); box-shadow: 0 0 0 2px var(--red-soft), var(--shadow); }
#cobrowse-ctlbar { position: fixed; top: 0; left: 0; right: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 16px; background: var(--red); color: #fff; font-weight: 600; font-size: .92rem; }
#cobrowse-ctlbar .cb-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; animation: emojiBounce 1s infinite alternate; }
#cobrowse-ctlbar .cb-stop { background: #fff; color: var(--red); border: none; border-radius: 999px; padding: 5px 14px; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
#cobrowse-ctlring { position: fixed; inset: 0; z-index: 10000; pointer-events: none; box-shadow: inset 0 0 0 4px var(--red); }

/* ── Incoming call alert ───────────────────────────────────── */
.incoming-overlay { position: fixed; inset: 0; z-index: 8500; background: rgba(4,8,16,.72); display: grid; place-items: center; }
.incoming-card { width: min(420px, 92vw); background: var(--panel); border: 2px solid var(--cyan); border-radius: var(--radius); padding: 30px 28px; text-align: center; box-shadow: var(--shadow-glow); animation: incomingPulse 1.2s infinite alternate; }
.incoming-card .ic-title { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; }
.incoming-card .ic-num { font-size: 1.6rem; font-weight: 700; margin-top: 8px; letter-spacing: .02em; }
.incoming-card .ic-co { font-size: 1.05rem; margin-top: 4px; color: var(--cyan); }
@keyframes incomingPulse { from { box-shadow: 0 0 0 0 rgba(41,171,226,.45); } to { box-shadow: 0 0 0 14px rgba(41,171,226,0); } }

/* ── Briefcase — the CRM5 color code, verbatim (agents know these on sight) ── */
.bc-table td { white-space: nowrap; }
tr.bc-green td, .chip.bc-green { background: limegreen; color: #111; }
tr.bc-orange td, .chip.bc-orange { background: orange; color: #fff; }
tr.bc-purple td, .chip.bc-purple { background: purple; color: #fff; }
tr.bc-lightblue td, .chip.bc-lightblue { background: lightblue; color: #111; }
tr.bc-darkblue td, .chip.bc-darkblue { background: darkblue; color: #fff; }
tr.bc-red td, .chip.bc-red { background: #d0342c; color: #fff; }
tr.bc-yellow td, .chip.bc-yellow { background: #ffe94a; color: #111; }
.bc-table tr[class^="bc-"] td .muted { color: inherit; opacity: .75; }
.bc-table tr[class^="bc-"] td .btn-call { background: rgba(0,0,0,.35); color: #fff; border-color: transparent; }
.bc-table tbody tr { cursor: pointer; }
.bc-table tbody tr:hover td { color: #fff; }
.bc-table tbody tr:hover td .muted { color: #fff; opacity: .8; }
.bc-table tr.bc-sel td { box-shadow: inset 0 3px 0 -1px var(--cyan), inset 0 -3px 0 -1px var(--cyan); color: #fff; }
.bc-table tr.bc-sel td .muted { color: #fff; opacity: .8; }
.bc-table tr.bc-sel td:first-child { box-shadow: inset 3px 0 0 var(--cyan), inset 0 3px 0 -1px var(--cyan), inset 0 -3px 0 -1px var(--cyan); }
.bc-table tr.bc-sel td:last-child { box-shadow: inset -3px 0 0 var(--cyan), inset 0 3px 0 -1px var(--cyan), inset 0 -3px 0 -1px var(--cyan); }
.mini-card.pickable { cursor: pointer; }
.mini-card.pickable.picked { box-shadow: inset 0 0 0 2px var(--cyan); background: rgba(41,171,226,.10); }

/* ── Call transcript + summary ─────────────────────────────── */
.call-summary { margin-bottom: 12px; border-left: 3px solid var(--cyan); }
.transcript-body { max-height: 320px; overflow-y: auto; min-width: 340px; max-width: none; }
.tr-turn { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid var(--line); }
.tr-turn:last-child { border-bottom: 0; }
.tr-who { font-weight: 600; font-size: .78rem; white-space: nowrap; }
.tr-at { font-size: .72rem; white-space: nowrap; }
.tr-s0 { color: var(--cyan); }
.tr-s1 { color: #4cd47a; }
.tr-s2 { color: #e8a33d; }
.tr-s3 { color: #c98bdb; }
.tr-turn.tr-ours { background: rgba(41,171,226,.07); }   /* our agent's lines */

/* ── My Email ──────────────────────────────────────────────── */
.mail-row { cursor: pointer; }
.mail-row.on { box-shadow: inset 0 0 0 2px var(--cyan); }
.mail-row.unread strong { color: var(--cyan); }
.mail-body { white-space: pre-wrap; max-height: 52vh; overflow-y: auto; line-height: 1.5; }
/* Links in a RECEIVED email (#443, Adam 2026-09-30: "still cannot see any links in emails need to
   fix color so can visually see everything in an email"). DevExpress's blazing-dark.bs5.min.css loads
   FIRST (App.razor:14) and its Bootstrap 5.3 block for `:root,[data-bs-theme=light]` ships
   --bs-link-color:#fff / --bs-link-color-rgb:255,255,255, then `a { color: rgba(var(--bs-link-color-rgb),1) }`.
   We never set data-bs-theme anywhere (0 hits across src/Brutus.Web), so the :root branch wins, and a
   TYPE selector on `a` beats .mail-body's inherited color:#111 while .mail-body (:785) paints the pane
   #fff. White on white, underline included. Reading the sender's own colours back is not an option:
   SanitizeReceivedHtml strips <style>/<link> so their page CSS cannot restyle the whole CRM. #0b5cd5 is
   the same blue EmailBodyHtml.LinkStyle sends OUT, so a link looks the same in Brutus as it does in the
   customer's inbox. No !important on purpose: a sender's own inline color= on a coloured button still
   wins, as it should. */
.mail-body a, .mail-body a:visited { color: #0b5cd5; text-decoration: underline; }
.mail-body a:hover { color: #073f96; }
.lead-place { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1rem; font-weight: 600; margin: 2px 0 6px; }

/* Lead header: action buttons on their own row, then the company identity line beneath them. */
/* Click-to-pop wrapper (feedback #143) around the clean read-along script (#142). */
.script-details > summary { cursor: pointer; font-weight: 700; padding: 6px 2px; list-style: none; }
.script-details > summary::-webkit-details-marker { display: none; }
.script-details > summary::before { content: '▸ '; color: var(--muted); }
.script-details[open] > summary::before { content: '▾ '; }
/* Read-along campaign script (feedback #142) — the pitch is the focus, in clean readable type. */
.script-panel { margin: 8px 0 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 160%); overflow: hidden; }
.script-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; background: var(--panel-2); font-weight: 700; border-bottom: 1px solid var(--line); }
.script-ism { padding: 10px 16px; font-size: 1.05rem; font-weight: 600; color: var(--accent, #4cc6ff);
  border-bottom: 1px dashed var(--line-2); }
.script-body { white-space: pre-wrap; padding: 12px 18px; line-height: 1.6; max-height: 46vh; overflow-y: auto;
  font-size: 1rem; }
.script-body.zoom-0 { font-size: .9rem; line-height: 1.5; }
.script-body.zoom-1 { font-size: 1.05rem; }
.script-body.zoom-2 { font-size: 1.2rem; line-height: 1.7; }
.script-body.zoom-3 { font-size: 1.4rem; line-height: 1.8; }
/* #508 script as a picture/PDF: the pages stack as inline images on white paper (dark theme too — the page IS
   the paper). A+/A− (zoom-N) change the page width; past 100% the box scrolls sideways. ⤢ (.script-full) is an
   IN-PLACE tall mode, never a fixed overlay: the sticky topbar (z-index 800) holds the Softphone, and a
   full-screen layer would cover hang-up, mute and the keypad mid-call. */
.script-img { max-height: 70vh; overflow: auto; padding: 8px; background: #fff; }
.script-img img { display: block; width: 100%; max-width: none; height: auto; margin: 0 auto 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.script-img img:last-child { margin-bottom: 0; }
.script-img.zoom-0 img { width: 85%; }
.script-img.zoom-1 img { width: 100%; }
.script-img.zoom-2 img { width: 140%; }
.script-img.zoom-3 img { width: 180%; }
.script-img.script-full { max-height: none; }
/* Campaigns → Script: the admin's preview of exactly those pages, small. */
.script-file-preview { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; max-height: 340px; overflow: auto;
  padding: 6px; background: #fff; border: 1px solid var(--line-2); border-radius: 6px; }
.script-file-preview img { width: 150px; height: auto; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.script-disclosure { border-top: 1px solid var(--line-2); background: rgba(255,180,80,.06); }
.script-tag { padding: 8px 16px 0; font-size: .78rem; font-weight: 700; color: #ffb84d; letter-spacing: .03em; }
.script-extras { border-top: 1px solid var(--line-2); padding: 4px 14px 8px; }
.script-extras details { margin: 4px 0; }
.script-extras summary { cursor: pointer; padding: 4px 0; font-weight: 600; }

.lead-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.lead-actions .btn-call, .lead-actions .btn-primary { font-size: .78rem; padding: 5px 9px; }
/* Editing a long lead form: pin the bar so Cancel/💾 Save stay reachable while scrolling. */
.lead-actions.actions-sticky {
  position: sticky; top: 0; z-index: 30;
  background: var(--panel); padding: 8px; margin: -8px -8px 8px;
  border-radius: var(--radius-sm); box-shadow: 0 10px 16px -12px rgba(0,0,0,.6);
}
.lead-identity { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; font-size: 1.15rem; }
.lead-identity .chip { font-size: .92rem; vertical-align: middle; }
/* Without the appointment sections the right panel is short — pin it so dispositions stay on screen (feedback #86). */
.edit-panel.dispo-sticky { position: sticky; top: 10px; align-self: flex-start; max-height: calc(100vh - 20px); overflow-y: auto; }
/* #521: the Workspace's 📜 Script tab widens the right-hand panel. Its share grows as well as its cap (flex 1 -> 1.4, an even split
   with the lead column), or a laptop-width screen never reaches the cap and the tab is no wider at all (review of 6de7f8e44).
   One scroll on that tab: the panel. The script file is shown whole inside it (no 70vh inner box), and the tab row stays pinned at
   the top, so ☎ No Answer and the tabs never scroll away mid-call. */
.edit-panel.script-wide { flex: 1.4; max-width: 760px; }
.edit-panel.script-wide > .ws-tabrow { position: sticky; top: 0; z-index: 2; background: var(--panel); padding: 4px 0; }
.edit-panel.script-wide .script-img { max-height: none; }

/* ── Import ────────────────────────────────────────────────── */
.file-input { color: var(--muted); margin: 8px 0 12px; }
.file-input::file-selector-button {
  background: var(--grad-brand); color: #fff; border: none; border-radius: var(--radius-sm);
  padding: 10px 18px; margin-right: 12px; font: inherit; font-weight: 600; cursor: pointer;
}
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.map-cell label { display: block; font-size: .78rem; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-sample { display: block; font-size: .72rem; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-scroll { overflow-x: auto; }
.preview-table { border-collapse: collapse; font-size: .82rem; width: 100%; }
.preview-table th {
  text-align: left; color: var(--cyan-bright); background: var(--bg-2); padding: 7px 10px;
  border: 1px solid var(--line); font-family: var(--font-head); white-space: nowrap;
}
.preview-table td { padding: 6px 10px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* DevExpress editor sizing + dark blending */
.w-70 { width: 70px !important; } .w-90 { width: 90px !important; }
.w-180 { width: 180px !important; } .w-220 { width: 220px !important; } .w-320 { width: 320px !important; }

/* Sale line items (workspace sale dialog) */
.sale-lines { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.sale-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sale-line-name { flex: 1; min-width: 120px; color: var(--ink); font-size: .92rem; }
.sale-line-total { min-width: 70px; text-align: right; color: var(--cyan); font-weight: 600; }
.sale-line-memo { flex-basis: 100%; background: var(--surface-2, #1a1f2b); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); padding: 5px 8px; font-size: .88rem; }
.btn-x { background: transparent; border: none; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.btn-x:hover { color: var(--danger, #e5484d); }
.btn-x-text { background: transparent; border: none; color: var(--cyan); font-size: .85rem; cursor: pointer; padding: 2px 6px; }
.btn-x-text:hover { text-decoration: underline; }
.btn-x-text.danger { color: var(--danger, #e5484d); }
/* ⭐ Primary-number picker on the lead — at .85rem it was a speck next to the Call buttons and
   agents kept missing it (user request 2026-08-21). Big enough to hit, and it lights up when set. */
.star-pick { font-size: 1.7rem; line-height: 1; padding: 0 5px; vertical-align: middle;
  transition: transform .12s ease, opacity .12s ease, color .12s ease; }
.star-pick:hover { text-decoration: none; transform: scale(1.18); }
.star-pick.on { color: #f5c518; text-shadow: 0 0 8px rgba(245, 197, 24, .55); }
.star-pick.off { color: var(--muted-2, #8a8a8a); opacity: .55; }
.star-pick.off:hover { opacity: 1; color: #f5c518; }
/* 🔒/🔓 From-number lock beside the picker (Brian 2026-09-08): lit when the number is locked to the campaign. */
.from-lock { font-size: 1.15rem; line-height: 1; padding: 0 4px; vertical-align: middle; }
.from-lock.off { opacity: .55; }
.from-lock.off:hover { opacity: 1; text-decoration: none; }
.from-lock:disabled { opacity: .3; cursor: not-allowed; text-decoration: none; }

/* Campaign logo bar on the open lead (feedback #224) — big enough to read across a desk. */
.camp-logo-bar { display: flex; align-items: center; gap: 14px; margin: 8px 0 10px; }
.camp-logo-bar img { max-height: 92px; max-width: 340px; border-radius: 8px; background: #fff; padding: 5px 9px; }
.camp-logo-name { font-size: 1.15rem; font-weight: 700; color: var(--cyan-bright); letter-spacing: .3px; }
/* Lodge/association contact under the campaign name (feedback #231). */
.camp-logo-contact { font-size: .92rem; font-weight: 600; color: var(--text, #ddd); margin-top: 2px; }
@media (max-width: 900px) { .camp-logo-bar img { max-height: 64px; max-width: 220px; } }

/* Custom reports (user directive 2026-08-21). On screen it's a normal panel; printed — which is
   how it becomes a PDF — it drops all app chrome and prints as a plain black-on-white document. */
.report-sheet { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.report-head { border-bottom: 2px solid var(--line); padding-bottom: 10px; margin-bottom: 14px; }
.report-section { margin: 0 0 22px; break-inside: avoid; }
.report-section h3 { margin: 0 0 8px; font-size: 1.05rem; }
@media print {
  @page { margin: 12mm; }
  body { background: #fff !important; color: #000 !important; }
  .no-print, nav, header, footer, .nav-rail, .sidebar, .app-nav, .page-head { display: none !important; }
  .report-sheet { border: none; border-radius: 0; padding: 0; background: #fff !important; color: #000 !important; }
  .report-sheet h2, .report-sheet h3, .report-sheet td, .report-sheet th, .report-sheet .muted { color: #000 !important; }
  .report-sheet .lb-table { width: 100%; border-collapse: collapse; }
  .report-sheet .lb-table th, .report-sheet .lb-table td { border-bottom: 1px solid #bbb; padding: 4px 6px; font-size: 11pt; }
  .report-sheet .lb-table thead { display: table-header-group; }   /* repeat headers on each page */
  .report-sheet tr { break-inside: avoid; }
}

/* Reminders / appointments / tasks */
.reminder-pop { border-left: 3px solid var(--cyan); }
.reminder-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.reminder-stars { color: #ffd166; min-width: 60px; font-size: .85rem; }
.reminder-text { flex: 1; color: var(--ink); }
.appt-row { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.appt-time { min-width: 72px; color: var(--cyan); font-weight: 600; }
.appt-dur { min-width: 48px; font-size: .85rem; }
.appt-title { flex: 1; color: var(--ink); }
.task-overdue td { color: #ffb4ab !important; }
.consent-note { margin: 8px 0; padding: 7px 10px; border-radius: var(--radius-sm); background: rgba(255,210,76,.12); border: 1px solid rgba(255,210,76,.4); color: #ffd166; font-size: .9rem; }
.research-panel { margin: 10px 0; border-left: 3px solid var(--cyan); background: rgba(41,171,226,.05); }
.chat-panel { margin: 10px 0; border-left: 3px solid #8b5cf6; }
.chat-log { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.chat-msg { padding: 7px 11px; border-radius: 12px; max-width: 85%; white-space: pre-wrap; font-size: .92rem; line-height: 1.35; }
.chat-msg.from-user { align-self: flex-end; background: var(--grad-brand); color: #fff; }
.chat-msg.from-ai { align-self: flex-start; background: rgba(255,255,255,.05); color: var(--ink); border: 1px solid var(--line); }
.chat-input-row { display: flex; gap: 8px; }
.chat-input { flex: 1; background: var(--surface-2, #1a1f2b); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); padding: 8px 10px; }
.lb-top td { font-weight: 600; color: var(--cyan-bright, var(--cyan)); }
.role-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; color: var(--ink); }
.role-item:hover { background: rgba(255,255,255,.04); }
.role-item.on { background: var(--grad-brand); color: #fff; }
.role-item.on .muted { color: rgba(255,255,255,.8); }

/* Reports drill-down */
.clickable { cursor: pointer; }
.bar-row.clickable:hover .bar-label, tr.clickable:hover td { color: var(--cyan); }
.drill-detail { margin: 4px 0 10px; padding: 8px 10px; background: rgba(255,255,255,.03); border-radius: var(--radius-sm); }
.drill-row { display: flex; gap: 14px; align-items: baseline; padding: 3px 0; font-size: .88rem; }
.drill-co { flex: 1; color: var(--ink); }
.drill-row a { color: var(--cyan); text-decoration: none; }
.drill-row a:hover { text-decoration: underline; }
.dxbl-text-edit, .dxbl-combobox, .dxbl-spin-edit, .dxbl-date-edit, .dxbl-memo {
  border-radius: var(--radius-sm) !important;
}
.dxbl-text-edit input, .dxbl-memo textarea { color: var(--ink) !important; }
.dxbl-listbox, .dxbl-dropdown-dialog, .dxbl-popup {
  background: var(--panel-2) !important; border-color: var(--line-2) !important; color: var(--ink) !important;
}

/* ── Workspace ─────────────────────────────────────────────── */
.btn-play {
  padding: 11px 30px; border: none; cursor: pointer; border-radius: var(--radius-sm);
  background: var(--grad-brand); color: #fff; font: inherit; font-family: var(--font-head);
  font-weight: 700; font-size: 1.05rem; transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.btn-play:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.play-campaign {
  background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 10px 12px; font: inherit;
}
.contact-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.btn-call {
  padding: 7px 14px; border: 1px solid rgba(76,198,255,.4); cursor: pointer;
  border-radius: var(--radius-sm); background: rgba(41,171,226,.12); color: var(--cyan-bright); font: inherit;
}
.btn-call:hover:where(:not(:disabled)) { background: rgba(41,171,226,.25); }
.dispo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.btn-dispo {
  padding: 11px 8px; cursor: pointer; border-radius: var(--radius-sm); font: inherit; font-weight: 600;
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-2);
}
.btn-dispo:hover:where(:not(:disabled)) { border-color: var(--cyan); }
.btn-dispo.warn { color: #ffd479; border-color: rgba(255,200,100,.35); }
.btn-dispo.danger { color: var(--red-soft); border-color: rgba(232,65,47,.4); }

/* Brian 2026-09-10: nothing here styled :disabled, so all 166 gated buttons in the app rendered
   exactly like live ones and just did nothing when clicked — which is how the lead dossier's Send
   button read as broken instead of as "pick an agent first". The four button hovers skip disabled
   controls via :where(:not(:disabled)) — :where adds no specificity, so .warn/.danger still win. */
button:disabled, .btn-dispo:disabled, .btn-call:disabled, .btn-primary:disabled, .btn-ghost:disabled {
  opacity: .4; cursor: not-allowed;
}

/* ── Softphone ─────────────────────────────────────────────── */
.softphone { display: flex; align-items: center; gap: 10px; position: relative; }
.softphone .sp-keypad { position: absolute; top: calc(100% + 8px); right: 0; z-index: 3000; display: grid; grid-template-columns: repeat(3, 46px); gap: 6px; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-glow); }
.softphone .sp-keypad .btn-call { min-width: 0; padding: 6px 0 4px; text-align: center; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.softphone .sp-keypad .kp-d { font-size: 1.05rem; font-weight: 600; }
.softphone .sp-keypad .kp-l { font-size: .55rem; letter-spacing: .08em; color: var(--muted); min-height: .7em; }
.softphone .line-live { box-shadow: inset 0 0 0 2px var(--cyan); }
.softphone .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted-2); display: inline-block; }
.softphone .dot-on { background: #4cd47a; box-shadow: 0 0 8px rgba(76,212,122,.7); }
.softphone .dot-busy { background: var(--cyan-bright); box-shadow: 0 0 8px rgba(76,198,255,.7); }
.softphone .dot-off { background: var(--red); box-shadow: 0 0 8px rgba(232,65,47,.6); }
.btn-call.danger { color: var(--red-soft); border-color: rgba(232,65,47,.4); background: rgba(232,65,47,.08); }

/* "New version available" banner (zero-downtime deploys) */
.ver-banner {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 14px; font-size: .9rem; color: #fff;
  background: linear-gradient(90deg, #1b2c4f, #2e5eaa);
  border-bottom: 1px solid rgba(255,255,255,.25);
}
.ver-banner .btn-swap {
  background: #fff; color: #1b2c4f; border: none; border-radius: 16px;
  padding: 4px 14px; font-weight: 700; cursor: pointer; font-size: .85rem;
}
.ver-banner .btn-later {
  background: transparent; color: rgba(255,255,255,.75); border: none; cursor: pointer; font-size: .95rem;
}

/* ══ Generated palette themes (Figma "100 color combinations", user directive 2026-08-19) ══
   Produced by scratchpad gen.js from the card swatches: light base when ≥2 light swatches,
   else dark; accents pushed to ≥4.2:1 contrast, ink ≥9.5:1. Regenerate rather than hand-edit. */
/* Stormy morning — #6A89A7 · #BDDDFC · #88BDF2 · #384959 (dark, generated from the Figma palette) */
html.theme-stormy-morning {
  --cyan: #88BDF2; --cyan-bright: #a9cff6; --blue: #BDDDFC; --blue-deep: #849bb0;
  --bg: #101419; --bg-2: #151b21; --panel: #1f2831; --panel-2: #2c353d;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #e1f0fe; --muted: #909ca8; --muted-2: #69747f;
  --grad-brand: linear-gradient(120deg, #acd1f6 0%, #88BDF2 45%, #849bb0 100%);
  --grad-text:  linear-gradient(100deg, #a9cff6 0%, #88BDF2 50%, #BDDDFC 100%);
  --shadow-glow: 0 0 0 1px rgba(136,189,242,0.25), 0 18px 50px -24px rgba(136,189,242,0.35);
}
html.theme-stormy-morning ::selection { background: rgba(136,189,242,0.3); }

/* Mossy hollow — #636B2F · #BAC095 · #D4DE95 · #3D4127 (light, generated from the Figma palette) */
html.theme-mossy-hollow {
  --cyan: #636B2F; --cyan-bright: #4f5626; --blue: #3D4127; --blue-deep: #2c2f1c;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(21,23,14,0.35);
  --bg: #eaefca; --bg-2: #dde5ac; --panel: #ffffff; --panel-2: #f3f6e1;
  --line: rgba(21,23,14,0.28); --line-2: rgba(21,23,14,0.48);
  --ink: #15170e; --muted: #2b2e1b; --muted-2: #5a5c4d;
  --grad-brand: linear-gradient(120deg, #3D4127 0%, #636B2F 45%, #2c2f1c 100%);
  --grad-text:  linear-gradient(100deg, #4f5626 0%, #636B2F 50%, #3D4127 100%);
  --shadow-glow: 0 0 0 1px rgba(99,107,47,0.25), 0 18px 50px -24px rgba(99,107,47,0.35);
}
html.theme-mossy-hollow ::selection { background: rgba(99,107,47,0.22); }
html.theme-mossy-hollow * { scrollbar-color: #b3b8bf transparent; }
html.theme-mossy-hollow *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-mossy-hollow *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Blue eclipse — #272757 · #8686AC · #505081 · #0F0E47 (dark, generated from the Figma palette) */
html.theme-blue-eclipse {
  --cyan: #7a7999; --cyan-bright: #9f9fb6; --blue: #272757; --blue-deep: #1b1b3d;
  --bg: #040414; --bg-2: #05051b; --panel: #080827; --panel-2: #171734;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #c9c9da; --muted: #78788f; --muted-2: #51516b;
  --grad-brand: linear-gradient(120deg, #a2a1b8 0%, #7a7999 45%, #1b1b3d 100%);
  --grad-text:  linear-gradient(100deg, #9f9fb6 0%, #7a7999 50%, #272757 100%);
  --shadow-glow: 0 0 0 1px rgba(122,121,153,0.25), 0 18px 50px -24px rgba(122,121,153,0.35);
}
html.theme-blue-eclipse ::selection { background: rgba(122,121,153,0.3); }

/* Lush forest — #2E6F40 · #CFFFDC · #68BA7F · #253D2C (dark, generated from the Figma palette) */
html.theme-lush-forest {
  --cyan: #CFFFDC; --cyan-bright: #dcffe6; --blue: #68BA7F; --blue-deep: #498259;
  --bg: #0a110c; --bg-2: #0e1710; --panel: #142218; --panel-2: #222f26;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #e9ffef; --muted: #90a295; --muted-2: #65766a;
  --grad-brand: linear-gradient(120deg, #ddffe7 0%, #CFFFDC 45%, #498259 100%);
  --grad-text:  linear-gradient(100deg, #dcffe6 0%, #CFFFDC 50%, #68BA7F 100%);
  --shadow-glow: 0 0 0 1px rgba(207,255,220,0.25), 0 18px 50px -24px rgba(207,255,220,0.35);
}
html.theme-lush-forest ::selection { background: rgba(207,255,220,0.3); }

/* Green juice — #4CBB17 · #48872B · #39542C · #293325 (dark, generated from the Figma palette) */
html.theme-green-juice {
  --cyan: #4CBB17; --cyan-bright: #7ece58; --blue: #48872B; --blue-deep: #325f1e;
  --bg: #0c0e0a; --bg-2: #10130e; --panel: #171c14; --panel-2: #252a22;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #aee097; --muted: #6f8e60; --muted-2: #506646;
  --grad-brand: linear-gradient(120deg, #82cf5d 0%, #4CBB17 45%, #325f1e 100%);
  --grad-text:  linear-gradient(100deg, #7ece58 0%, #4CBB17 50%, #48872B 100%);
  --shadow-glow: 0 0 0 1px rgba(76,187,23,0.25), 0 18px 50px -24px rgba(76,187,23,0.35);
}
html.theme-green-juice ::selection { background: rgba(76,187,23,0.3); }

/* Chili spice — #CD1C18 · #FFA896 · #9B1313 · #38000A (dark, generated from the Figma palette) */
html.theme-chili-spice {
  --cyan: #907077; --cyan-bright: #af989d; --blue: #CD1C18; --blue-deep: #901411;
  --bg: #100003; --bg-2: #150004; --panel: #1f0006; --panel-2: #2c0f15;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #ffd8d0; --muted: #a17d7b; --muted-2: #745253;
  --grad-brand: linear-gradient(120deg, #b19ba0 0%, #907077 45%, #901411 100%);
  --grad-text:  linear-gradient(100deg, #af989d 0%, #907077 50%, #CD1C18 100%);
  --shadow-glow: 0 0 0 1px rgba(144,112,119,0.25), 0 18px 50px -24px rgba(144,112,119,0.35);
}
html.theme-chili-spice ::selection { background: rgba(144,112,119,0.3); }

/* Chocolate truffle — #713600 · #C05800 · #FDFBD4 · #38240D (dark, generated from the Figma palette) */
html.theme-chocolate-truffle {
  --cyan: #c56514; --cyan-bright: #d59056; --blue: #713600; --blue-deep: #4f2600;
  --bg: #100a04; --bg-2: #150e05; --panel: #1f1407; --panel-2: #2c2216;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #fefdec; --muted: #a09b8c; --muted-2: #746d5e;
  --grad-brand: linear-gradient(120deg, #d6935b 0%, #c56514 45%, #4f2600 100%);
  --grad-text:  linear-gradient(100deg, #d59056 0%, #c56514 50%, #713600 100%);
  --shadow-glow: 0 0 0 1px rgba(197,101,20,0.25), 0 18px 50px -24px rgba(197,101,20,0.35);
}
html.theme-chocolate-truffle ::selection { background: rgba(197,101,20,0.3); }

/* Ink wash — #4A4A4A · #CBCBCB · #FFFFE3 · #6D8196 (light, generated from the Figma palette) */
html.theme-ink-wash {
  --cyan: #65788c; --cyan-bright: #516070; --blue: #4A4A4A; --blue-deep: #353535;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(26,26,26,0.35);
  --bg: #fffff1; --bg-2: #ffffe9; --panel: #ffffff; --panel-2: #fffff7;
  --line: rgba(26,26,26,0.28); --line-2: rgba(26,26,26,0.48);
  --ink: #1a1a1a; --muted: #343434; --muted-2: #616161;
  --grad-brand: linear-gradient(120deg, #6D8196 0%, #65788c 45%, #353535 100%);
  --grad-text:  linear-gradient(100deg, #516070 0%, #65788c 50%, #4A4A4A 100%);
  --shadow-glow: 0 0 0 1px rgba(101,120,140,0.25), 0 18px 50px -24px rgba(101,120,140,0.35);
}
html.theme-ink-wash ::selection { background: rgba(101,120,140,0.22); }
html.theme-ink-wash * { scrollbar-color: #b3b8bf transparent; }
html.theme-ink-wash *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-ink-wash *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Golden taupe — #D4AF37 · #BDB76B · #FDFBD4 · #CE8946 (dark, generated from the Figma palette) */
html.theme-golden-taupe {
  --cyan: #D4AF37; --cyan-bright: #e0c56f; --blue: #CE8946; --blue-deep: #906031;
  --bg: #2a1c0f; --bg-2: #382514; --panel: #53371d; --panel-2: #5d432b;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #fefdec; --muted: #b6aa95; --muted-2: #94826c;
  --grad-brand: linear-gradient(120deg, #e1c773 0%, #D4AF37 45%, #906031 100%);
  --grad-text:  linear-gradient(100deg, #e0c56f 0%, #D4AF37 50%, #CE8946 100%);
  --shadow-glow: 0 0 0 1px rgba(212,175,55,0.25), 0 18px 50px -24px rgba(212,175,55,0.35);
}
html.theme-golden-taupe ::selection { background: rgba(212,175,55,0.3); }

/* Wisteria bloom — #D3D3FF · #9400D3 · #D8BFD8 · #ED80E9 (light, generated from the Figma palette) */
html.theme-wisteria-bloom {
  --cyan: #9400D3; --cyan-bright: #7600a9; --blue: #bf67bc; --blue-deep: #8a4a87;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(52,0,74,0.35);
  --bg: #e9e9ff; --bg-2: #ddddff; --panel: #ffffff; --panel-2: #f3f3ff;
  --line: rgba(52,0,74,0.28); --line-2: rgba(52,0,74,0.48);
  --ink: #34004a; --muted: #680094; --muted-2: #8938ac;
  --grad-brand: linear-gradient(120deg, #ED80E9 0%, #9400D3 45%, #8a4a87 100%);
  --grad-text:  linear-gradient(100deg, #7600a9 0%, #9400D3 50%, #bf67bc 100%);
  --shadow-glow: 0 0 0 1px rgba(148,0,211,0.25), 0 18px 50px -24px rgba(148,0,211,0.35);
}
html.theme-wisteria-bloom ::selection { background: rgba(148,0,211,0.22); }
html.theme-wisteria-bloom * { scrollbar-color: #b3b8bf transparent; }
html.theme-wisteria-bloom *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-wisteria-bloom *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Burnt sienna — #E35336 · #F5F5DC · #F4A460 · #A0522D (dark, generated from the Figma palette) */
html.theme-burnt-sienna {
  --cyan: #eb856f; --cyan-bright: #f1a797; --blue: #F4A460; --blue-deep: #ab7343;
  --bg: #2c170d; --bg-2: #3c1f11; --panel: #582d19; --panel-2: #623a27;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #fbfbef; --muted: #b7a495; --muted-2: #967b6a;
  --grad-brand: linear-gradient(120deg, #f1aa9a 0%, #eb856f 45%, #ab7343 100%);
  --grad-text:  linear-gradient(100deg, #f1a797 0%, #eb856f 50%, #F4A460 100%);
  --shadow-glow: 0 0 0 1px rgba(235,133,111,0.25), 0 18px 50px -24px rgba(235,133,111,0.35);
}
html.theme-burnt-sienna ::selection { background: rgba(235,133,111,0.3); }

/* Blooming romance — #660033 · #E673AC · #469110 · #00520A (dark, generated from the Figma palette) */
html.theme-blooming-romance {
  --cyan: #578e5e; --cyan-bright: #86ae8b; --blue: #469110; --blue-deep: #31660b;
  --bg: #1c000e; --bg-2: #260013; --panel: #38001c; --panel-2: #440f2a;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #f4c0da; --muted: #a56f8a; --muted-2: #7f4964;
  --grad-brand: linear-gradient(120deg, #89b08e 0%, #578e5e 45%, #31660b 100%);
  --grad-text:  linear-gradient(100deg, #86ae8b 0%, #578e5e 50%, #469110 100%);
  --shadow-glow: 0 0 0 1px rgba(87,142,94,0.25), 0 18px 50px -24px rgba(87,142,94,0.35);
}
html.theme-blooming-romance ::selection { background: rgba(87,142,94,0.3); }

/* Desert dusk — #A2574F · #E68057 · #BF7587 · #993A8B (dark, generated from the Figma palette) */
html.theme-desert-dusk {
  --cyan: #E68057; --cyan-bright: #eda486; --blue: #993A8B; --blue-deep: #6b2961;
  --bg: #2a1026; --bg-2: #391634; --panel: #54204c; --panel-2: #5e2d57;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #f9ddd1; --muted: #b48e99; --muted-2: #93687f;
  --grad-brand: linear-gradient(120deg, #eea689 0%, #E68057 45%, #6b2961 100%);
  --grad-text:  linear-gradient(100deg, #eda486 0%, #E68057 50%, #993A8B 100%);
  --shadow-glow: 0 0 0 1px rgba(230,128,87,0.25), 0 18px 50px -24px rgba(230,128,87,0.35);
}
html.theme-desert-dusk ::selection { background: rgba(230,128,87,0.3); }

/* Lavender fields — #FDFBD4 · #BDB96A · #C1BFFF · #CF6DFC (light, generated from the Figma palette) */
html.theme-lavender-fields {
  --cyan: #9a51bd; --cyan-bright: #7b4197; --blue: #8e8b50; --blue-deep: #66643a;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(72,38,88,0.35);
  --bg: #fefdea; --bg-2: #fdfcdd; --panel: #ffffff; --panel-2: #fefef3;
  --line: rgba(72,38,88,0.28); --line-2: rgba(72,38,88,0.48);
  --ink: #482658; --muted: #914cb0; --muted-2: #a973c1;
  --grad-brand: linear-gradient(120deg, #CF6DFC 0%, #9a51bd 45%, #66643a 100%);
  --grad-text:  linear-gradient(100deg, #7b4197 0%, #9a51bd 50%, #8e8b50 100%);
  --shadow-glow: 0 0 0 1px rgba(154,81,189,0.25), 0 18px 50px -24px rgba(154,81,189,0.35);
}
html.theme-lavender-fields ::selection { background: rgba(154,81,189,0.22); }
html.theme-lavender-fields * { scrollbar-color: #b3b8bf transparent; }
html.theme-lavender-fields *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-lavender-fields *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Hydrangea — #FF8DA1 · #FFC2BA · #FF9CE9 · #AD56C4 (light, generated from the Figma palette) */
html.theme-hydrangea {
  --cyan: #a150b6; --cyan-bright: #814092; --blue: #cd7182; --blue-deep: #94515e;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(61,30,69,0.35);
  --bg: #ffe1dd; --bg-2: #ffcfc9; --panel: #ffffff; --panel-2: #ffeeec;
  --line: rgba(61,30,69,0.28); --line-2: rgba(61,30,69,0.48);
  --ink: #3d1e45; --muted: #793c89; --muted-2: #9667a3;
  --grad-brand: linear-gradient(120deg, #AD56C4 0%, #a150b6 45%, #94515e 100%);
  --grad-text:  linear-gradient(100deg, #814092 0%, #a150b6 50%, #cd7182 100%);
  --shadow-glow: 0 0 0 1px rgba(161,80,182,0.25), 0 18px 50px -24px rgba(161,80,182,0.35);
}
html.theme-hydrangea ::selection { background: rgba(161,80,182,0.22); }
html.theme-hydrangea * { scrollbar-color: #b3b8bf transparent; }
html.theme-hydrangea *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-hydrangea *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Cactus flower — #E491A6 · #845763 · #92E4BA · #90C67F (dark, generated from the Figma palette) */
html.theme-cactus-flower {
  --cyan: #92E4BA; --cyan-bright: #b1eccd; --blue: #90C67F; --blue-deep: #658b59;
  --bg: #25181b; --bg-2: #322125; --panel: #493036; --panel-2: #543c42;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #cef3e0; --muted: #96a199; --muted-2: #7c7a77;
  --grad-brand: linear-gradient(120deg, #b3eccf 0%, #92E4BA 45%, #658b59 100%);
  --grad-text:  linear-gradient(100deg, #b1eccd 0%, #92E4BA 50%, #90C67F 100%);
  --shadow-glow: 0 0 0 1px rgba(146,228,186,0.25), 0 18px 50px -24px rgba(146,228,186,0.35);
}
html.theme-cactus-flower ::selection { background: rgba(146,228,186,0.3); }

/* Wildflowers — #A8DCAB · #519755 · #DBAAA7 · #BE91BE (dark, generated from the Figma palette) */
html.theme-wildflowers {
  --cyan: #A8DCAB; --cyan-bright: #c0e6c3; --blue: #519755; --blue-deep: #396a3b;
  --bg: #132213; --bg-2: #192e1a; --panel: #254426; --panel-2: #324f33;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #e5f4e6; --muted: #94aa95; --muted-2: #6e876f;
  --grad-brand: linear-gradient(120deg, #c2e7c4 0%, #A8DCAB 45%, #396a3b 100%);
  --grad-text:  linear-gradient(100deg, #c0e6c3 0%, #A8DCAB 50%, #519755 100%);
  --shadow-glow: 0 0 0 1px rgba(168,220,171,0.25), 0 18px 50px -24px rgba(168,220,171,0.35);
}
html.theme-wildflowers ::selection { background: rgba(168,220,171,0.3); }

/* Country garden — #FFFFE3 · #DBD4FF · #808034 · #723480 (light, generated from the Figma palette) */
html.theme-country-garden {
  --cyan: #777730; --cyan-bright: #5f5f26; --blue: #723480; --blue-deep: #52255c;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(40,18,45,0.35);
  --bg: #fffff1; --bg-2: #ffffe9; --panel: #ffffff; --panel-2: #fffff7;
  --line: rgba(40,18,45,0.28); --line-2: rgba(40,18,45,0.48);
  --ink: #28122d; --muted: #50245a; --muted-2: #77547e;
  --grad-brand: linear-gradient(120deg, #808034 0%, #777730 45%, #52255c 100%);
  --grad-text:  linear-gradient(100deg, #5f5f26 0%, #777730 50%, #723480 100%);
  --shadow-glow: 0 0 0 1px rgba(119,119,48,0.25), 0 18px 50px -24px rgba(119,119,48,0.35);
}
html.theme-country-garden ::selection { background: rgba(119,119,48,0.22); }
html.theme-country-garden * { scrollbar-color: #b3b8bf transparent; }
html.theme-country-garden *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-country-garden *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Lotus garden — #ADEBB3 · #FF857A · #EBAEE6 · #6B403C (light, generated from the Figma palette) */
html.theme-lotus-garden {
  --cyan: #b25d55; --cyan-bright: #8e4a44; --blue: #6B403C; --blue-deep: #4d2e2b;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(37,22,21,0.35);
  --bg: #d6f5d9; --bg-2: #bfefc4; --panel: #ffffff; --panel-2: #e8f9ea;
  --line: rgba(37,22,21,0.28); --line-2: rgba(37,22,21,0.48);
  --ink: #251615; --muted: #4b2d2a; --muted-2: #735b59;
  --grad-brand: linear-gradient(120deg, #FF857A 0%, #b25d55 45%, #4d2e2b 100%);
  --grad-text:  linear-gradient(100deg, #8e4a44 0%, #b25d55 50%, #6B403C 100%);
  --shadow-glow: 0 0 0 1px rgba(178,93,85,0.25), 0 18px 50px -24px rgba(178,93,85,0.35);
}
html.theme-lotus-garden ::selection { background: rgba(178,93,85,0.22); }
html.theme-lotus-garden * { scrollbar-color: #b3b8bf transparent; }
html.theme-lotus-garden *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-lotus-garden *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Iris garden — #A47DAB · #692475 · #82AB7D · #6A6B4E (dark, generated from the Figma palette) */
html.theme-iris-garden {
  --cyan: #a47bab; --cyan-bright: #bda0c3; --blue: #82AB7D; --blue-deep: #5b7858;
  --bg: #1d0a20; --bg-2: #270e2c; --panel: #3a1440; --panel-2: #46224b;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #c7d9c5; --muted: #8c868d; --muted-2: #705f73;
  --grad-brand: linear-gradient(120deg, #bfa3c4 0%, #a47bab 45%, #5b7858 100%);
  --grad-text:  linear-gradient(100deg, #bda0c3 0%, #a47bab 50%, #82AB7D 100%);
  --shadow-glow: 0 0 0 1px rgba(164,123,171,0.25), 0 18px 50px -24px rgba(164,123,171,0.35);
}
html.theme-iris-garden ::selection { background: rgba(164,123,171,0.3); }

/* Fresh peach — #FFD3AC · #FFB5AB · #E39A7B · #DBB06B (light, generated from the Figma palette) */
html.theme-fresh-peach {
  --cyan: #8e7245; --cyan-bright: #725b37; --blue: #b67c63; --blue-deep: #835947;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(79,54,43,0.35);
  --bg: #ffe9d6; --bg-2: #ffddbe; --panel: #ffffff; --panel-2: #fff3e8;
  --line: rgba(79,54,43,0.28); --line-2: rgba(79,54,43,0.48);
  --ink: #4f362b; --muted: #946450; --muted-2: #ac8677;
  --grad-brand: linear-gradient(120deg, #DBB06B 0%, #8e7245 45%, #835947 100%);
  --grad-text:  linear-gradient(100deg, #725b37 0%, #8e7245 50%, #b67c63 100%);
  --shadow-glow: 0 0 0 1px rgba(142,114,69,0.25), 0 18px 50px -24px rgba(142,114,69,0.35);
}
html.theme-fresh-peach ::selection { background: rgba(142,114,69,0.22); }
html.theme-fresh-peach * { scrollbar-color: #b3b8bf transparent; }
html.theme-fresh-peach *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-fresh-peach *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Golden hour — #FFBF00 · #CFB53B · #E0B0FF · #CCC550 (light, generated from the Figma palette) */
html.theme-golden-hour {
  --cyan: #8f6b00; --cyan-bright: #725600; --blue: #9a872c; --blue-deep: #6f6120;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(72,63,21,0.35);
  --bg: #ffdf80; --bg-2: #ffcd38; --panel: #ffffff; --panel-2: #ffedb8;
  --line: rgba(72,63,21,0.28); --line-2: rgba(72,63,21,0.48);
  --ink: #483f15; --muted: #7e6e23; --muted-2: #9a8e53;
  --grad-brand: linear-gradient(120deg, #c7b580 0%, #8f6b00 45%, #6f6120 100%);
  --grad-text:  linear-gradient(100deg, #725600 0%, #8f6b00 50%, #9a872c 100%);
  --shadow-glow: 0 0 0 1px rgba(143,107,0,0.25), 0 18px 50px -24px rgba(143,107,0,0.35);
}
html.theme-golden-hour ::selection { background: rgba(143,107,0,0.22); }
html.theme-golden-hour * { scrollbar-color: #b3b8bf transparent; }
html.theme-golden-hour *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-golden-hour *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Spiced chai — #FDFBD4 · #D47E30 · #8D5A2B · #825E34 (dark, generated from the Figma palette) */
html.theme-spiced-chai {
  --cyan: #da9250; --cyan-bright: #e4b181; --blue: #8D5A2B; --blue-deep: #633f1e;
  --bg: #241a0f; --bg-2: #312314; --panel: #48341d; --panel-2: #53402b;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #fefdec; --muted: #b2a995; --muted-2: #8d806c;
  --grad-brand: linear-gradient(120deg, #e5b385 0%, #da9250 45%, #633f1e 100%);
  --grad-text:  linear-gradient(100deg, #e4b181 0%, #da9250 50%, #8D5A2B 100%);
  --shadow-glow: 0 0 0 1px rgba(218,146,80,0.25), 0 18px 50px -24px rgba(218,146,80,0.35);
}
html.theme-spiced-chai ::selection { background: rgba(218,146,80,0.3); }

/* Cherry blossom — #F2C7C7 · #FFFFFF · #D5F3D8 · #FFB7C5 (light, generated from the Figma palette) */
html.theme-cherry-blossom {
  --cyan: #8f666e; --cyan-bright: #725258; --blue: #9b8181; --blue-deep: #705d5d;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(83,60,64,0.35);
  --bg: #ffffff; --bg-2: #ffffff; --panel: #ffffff; --panel-2: #ffffff;
  --line: rgba(83,60,64,0.28); --line-2: rgba(83,60,64,0.48);
  --ink: #533c40; --muted: #8f676f; --muted-2: #a8888f;
  --grad-brand: linear-gradient(120deg, #FFB7C5 0%, #8f666e 45%, #705d5d 100%);
  --grad-text:  linear-gradient(100deg, #725258 0%, #8f666e 50%, #9b8181 100%);
  --shadow-glow: 0 0 0 1px rgba(143,102,110,0.25), 0 18px 50px -24px rgba(143,102,110,0.35);
}
html.theme-cherry-blossom ::selection { background: rgba(143,102,110,0.22); }
html.theme-cherry-blossom * { scrollbar-color: #b3b8bf transparent; }
html.theme-cherry-blossom *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-cherry-blossom *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Evening rose — #DCA1A1 · #996666 · #8E4585 · #4A4A4A (dark, generated from the Figma palette) */
html.theme-evening-rose {
  --cyan: #ae7ba8; --cyan-bright: #c5a0c0; --blue: #DCA1A1; --blue-deep: #9a7171;
  --bg: #151515; --bg-2: #1c1c1c; --panel: #292929; --panel-2: #363636;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #efd5d5; --muted: #9c8d8d; --muted-2: #746a6a;
  --grad-brand: linear-gradient(120deg, #c6a3c2 0%, #ae7ba8 45%, #9a7171 100%);
  --grad-text:  linear-gradient(100deg, #c5a0c0 0%, #ae7ba8 50%, #DCA1A1 100%);
  --shadow-glow: 0 0 0 1px rgba(174,123,168,0.25), 0 18px 50px -24px rgba(174,123,168,0.35);
}
html.theme-evening-rose ::selection { background: rgba(174,123,168,0.3); }

/* Pastel garden — #C75F71 · #F0B8B8 · #A2AE9D · #54463A (dark, generated from the Figma palette) */
html.theme-pastel-garden {
  --cyan: #cf7886; --cyan-bright: #dc9ea8; --blue: #F0B8B8; --blue-deep: #a88181;
  --bg: #171410; --bg-2: #1f1b16; --panel: #2e2720; --panel-2: #3b342d;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #f8dfdf; --muted: #a3928f; --muted-2: #7b6d69;
  --grad-brand: linear-gradient(120deg, #dda1aa 0%, #cf7886 45%, #a88181 100%);
  --grad-text:  linear-gradient(100deg, #dc9ea8 0%, #cf7886 50%, #F0B8B8 100%);
  --shadow-glow: 0 0 0 1px rgba(207,120,134,0.25), 0 18px 50px -24px rgba(207,120,134,0.35);
}
html.theme-pastel-garden ::selection { background: rgba(207,120,134,0.3); }

/* Tuscan sunset — #E35336 · #FFD3AC · #9988A1 · #8A2B0E (dark, generated from the Figma palette) */
html.theme-tuscan-sunset {
  --cyan: #b87e6d; --cyan-bright: #cca296; --blue: #E35336; --blue-deep: #9f3a26;
  --bg: #260c04; --bg-2: #341005; --panel: #4c1808; --panel-2: #572617;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #ffebda; --muted: #b49282; --muted-2: #906858;
  --grad-brand: linear-gradient(120deg, #cda599 0%, #b87e6d 45%, #9f3a26 100%);
  --grad-text:  linear-gradient(100deg, #cca296 0%, #b87e6d 50%, #E35336 100%);
  --shadow-glow: 0 0 0 1px rgba(184,126,109,0.25), 0 18px 50px -24px rgba(184,126,109,0.35);
}
html.theme-tuscan-sunset ::selection { background: rgba(184,126,109,0.3); }

/* Zesty lemon — #FFFF66 · #FFE566 · #D6D58B · #B3B347 (light, generated from the Figma palette) */
html.theme-zesty-lemon {
  --cyan: #73732e; --cyan-bright: #5c5c25; --blue: #9a8a3d; --blue-deep: #6f632c;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(63,63,25,0.35);
  --bg: #ffffb3; --bg-2: #ffff88; --panel: #ffffff; --panel-2: #ffffd4;
  --line: rgba(63,63,25,0.28); --line-2: rgba(63,63,25,0.48);
  --ink: #3f3f19; --muted: #74742f; --muted-2: #93935d;
  --grad-brand: linear-gradient(120deg, #B3B347 0%, #73732e 45%, #6f632c 100%);
  --grad-text:  linear-gradient(100deg, #5c5c25 0%, #73732e 50%, #9a8a3d 100%);
  --shadow-glow: 0 0 0 1px rgba(115,115,46,0.25), 0 18px 50px -24px rgba(115,115,46,0.35);
}
html.theme-zesty-lemon ::selection { background: rgba(115,115,46,0.22); }
html.theme-zesty-lemon * { scrollbar-color: #b3b8bf transparent; }
html.theme-zesty-lemon *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-zesty-lemon *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* California beaches — #FFC067 · #66F4FF · #66C4FF · #7D99AA (light, generated from the Figma palette) */
html.theme-california-beaches {
  --cyan: #3d759a; --cyan-bright: #315e7b; --blue: #b28548; --blue-deep: #806034;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(44,54,60,0.35);
  --bg: #b3faff; --bg-2: #88f6ff; --panel: #ffffff; --panel-2: #d4fcff;
  --line: rgba(44,54,60,0.28); --line-2: rgba(44,54,60,0.48);
  --ink: #2c363c; --muted: #586b77; --muted-2: #7d8c95;
  --grad-brand: linear-gradient(120deg, #66C4FF 0%, #3d759a 45%, #806034 100%);
  --grad-text:  linear-gradient(100deg, #315e7b 0%, #3d759a 50%, #b28548 100%);
  --shadow-glow: 0 0 0 1px rgba(61,117,154,0.25), 0 18px 50px -24px rgba(61,117,154,0.35);
}
html.theme-california-beaches ::selection { background: rgba(61,117,154,0.22); }
html.theme-california-beaches * { scrollbar-color: #b3b8bf transparent; }
html.theme-california-beaches *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-california-beaches *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Freshly squeezed — #FFBF00 · #F2CF7E · #FFE642 · #FF7900 (light, generated from the Figma palette) */
html.theme-freshly-squeezed {
  --cyan: #b25500; --cyan-bright: #8e4400; --blue: #b28500; --blue-deep: #806000;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(89,42,0,0.35);
  --bg: #fff3a1; --bg-2: #ffec6c; --panel: #ffffff; --panel-2: #fff8ca;
  --line: rgba(89,42,0,0.28); --line-2: rgba(89,42,0,0.48);
  --ink: #592a00; --muted: #b35500; --muted-2: #c47a38;
  --grad-brand: linear-gradient(120deg, #FF7900 0%, #b25500 45%, #806000 100%);
  --grad-text:  linear-gradient(100deg, #8e4400 0%, #b25500 50%, #b28500 100%);
  --shadow-glow: 0 0 0 1px rgba(178,85,0,0.25), 0 18px 50px -24px rgba(178,85,0,0.35);
}
html.theme-freshly-squeezed ::selection { background: rgba(178,85,0,0.22); }
html.theme-freshly-squeezed * { scrollbar-color: #b3b8bf transparent; }
html.theme-freshly-squeezed *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-freshly-squeezed *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Pistachio dream — #80EF80 · #E3F0A3 · #BADBA2 · #42D674 (light, generated from the Figma palette) */
html.theme-pistachio-dream {
  --cyan: #288145; --cyan-bright: #206737; --blue: #539a53; --blue-deep: #3c6f3c;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(23,75,41,0.35);
  --bg: #f1f8d1; --bg-2: #e9f3b7; --panel: #ffffff; --panel-2: #f7fbe5;
  --line: rgba(23,75,41,0.28); --line-2: rgba(23,75,41,0.48);
  --ink: #174b29; --muted: #288246; --muted-2: #579e6f;
  --grad-brand: linear-gradient(120deg, #42D674 0%, #288145 45%, #3c6f3c 100%);
  --grad-text:  linear-gradient(100deg, #206737 0%, #288145 50%, #539a53 100%);
  --shadow-glow: 0 0 0 1px rgba(40,129,69,0.25), 0 18px 50px -24px rgba(40,129,69,0.35);
}
html.theme-pistachio-dream ::selection { background: rgba(40,129,69,0.22); }
html.theme-pistachio-dream * { scrollbar-color: #b3b8bf transparent; }
html.theme-pistachio-dream *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-pistachio-dream *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Mango popsicle — #F2B949 · #EDD377 · #F2E829 · #F27430 (light, generated from the Figma palette) */
html.theme-mango-popsicle {
  --cyan: #b45624; --cyan-bright: #90451d; --blue: #a78133; --blue-deep: #785d25;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(85,41,17,0.35);
  --bg: #f9f494; --bg-2: #f5ed58; --panel: #ffffff; --panel-2: #fbf9c3;
  --line: rgba(85,41,17,0.28); --line-2: rgba(85,41,17,0.48);
  --ink: #552911; --muted: #a95122; --muted-2: #bc7753;
  --grad-brand: linear-gradient(120deg, #F27430 0%, #b45624 45%, #785d25 100%);
  --grad-text:  linear-gradient(100deg, #90451d 0%, #b45624 50%, #a78133 100%);
  --shadow-glow: 0 0 0 1px rgba(180,86,36,0.25), 0 18px 50px -24px rgba(180,86,36,0.35);
}
html.theme-mango-popsicle ::selection { background: rgba(180,86,36,0.22); }
html.theme-mango-popsicle * { scrollbar-color: #b3b8bf transparent; }
html.theme-mango-popsicle *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-mango-popsicle *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Guava — #FF8559 · #FFB578 · #E65447 · #CF5376 (dark, generated from the Figma palette) */
html.theme-guava {
  --cyan: #FF8559; --cyan-bright: #ffa787; --blue: #FFB578; --blue-deep: #b37f54;
  --bg: #34151e; --bg-2: #461c28; --panel: #67293b; --panel-2: #703647;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #ffefe2; --muted: #bf9c9c; --muted-2: #a1747a;
  --grad-brand: linear-gradient(120deg, #ffaa8b 0%, #FF8559 45%, #b37f54 100%);
  --grad-text:  linear-gradient(100deg, #ffa787 0%, #FF8559 50%, #FFB578 100%);
  --shadow-glow: 0 0 0 1px rgba(255,133,89,0.25), 0 18px 50px -24px rgba(255,133,89,0.35);
}
html.theme-guava ::selection { background: rgba(255,133,89,0.3); }

/* Glowing horizon — #FFB343 · #42EAFF · #4272FF · #FF7E42 (light, generated from the Figma palette) */
html.theme-glowing-horizon {
  --cyan: #b2572e; --cyan-bright: #8e4625; --blue: #4272FF; --blue-deep: #3052b8;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(23,40,89,0.35);
  --bg: #a1f5ff; --bg-2: #6cefff; --panel: #ffffff; --panel-2: #caf9ff;
  --line: rgba(23,40,89,0.28); --line-2: rgba(23,40,89,0.48);
  --ink: #172859; --muted: #2e50b3; --muted-2: #5c77c4;
  --grad-brand: linear-gradient(120deg, #FF7E42 0%, #b2572e 45%, #3052b8 100%);
  --grad-text:  linear-gradient(100deg, #8e4625 0%, #b2572e 50%, #4272FF 100%);
  --shadow-glow: 0 0 0 1px rgba(178,87,46,0.25), 0 18px 50px -24px rgba(178,87,46,0.35);
}
html.theme-glowing-horizon ::selection { background: rgba(178,87,46,0.22); }
html.theme-glowing-horizon * { scrollbar-color: #b3b8bf transparent; }
html.theme-glowing-horizon *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-glowing-horizon *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Sunny day — #FFBF00 · #807040 · #007EFF · #2400FF (dark, generated from the Figma palette) */
html.theme-sunny-day {
  --cyan: #FFBF00; --cyan-bright: #ffd147; --blue: #007EFF; --blue-deep: #0058b3;
  --bg: #0a0046; --bg-2: #0e005f; --panel: #14008c; --panel-2: #220f93;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #ffe28c; --muted: #9c838c; --muted-2: #6d568c;
  --grad-brand: linear-gradient(120deg, #ffd24d 0%, #FFBF00 45%, #0058b3 100%);
  --grad-text:  linear-gradient(100deg, #ffd147 0%, #FFBF00 50%, #007EFF 100%);
  --shadow-glow: 0 0 0 1px rgba(255,191,0,0.25), 0 18px 50px -24px rgba(255,191,0,0.35);
}
html.theme-sunny-day ::selection { background: rgba(255,191,0,0.3); }

/* Retro sunset — #BE5103 · #FFCE1B · #069494 · #B7410E (dark, generated from the Figma palette) */
html.theme-retro-sunset {
  --cyan: #FFCE1B; --cyan-bright: #ffdc5b; --blue: #069494; --blue-deep: #046868;
  --bg: #331204; --bg-2: #451805; --panel: #652408; --panel-2: #6e3117;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #ffe998; --muted: #be965c; --muted-2: #a06f3f;
  --grad-brand: linear-gradient(120deg, #ffdd5f 0%, #FFCE1B 45%, #046868 100%);
  --grad-text:  linear-gradient(100deg, #ffdc5b 0%, #FFCE1B 50%, #069494 100%);
  --shadow-glow: 0 0 0 1px rgba(255,206,27,0.25), 0 18px 50px -24px rgba(255,206,27,0.35);
}
html.theme-retro-sunset ::selection { background: rgba(255,206,27,0.3); }

/* Bubblegum pop — #FF69B4 · #069494 · #FFFFFF · #00F0FF (light, generated from the Figma palette) */
html.theme-bubblegum-pop {
  --cyan: #068080; --cyan-bright: #056666; --blue: #009aa6; --blue-deep: #006f78;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(2,52,52,0.35);
  --bg: #ffffff; --bg-2: #ffffff; --panel: #ffffff; --panel-2: #ffffff;
  --line: rgba(2,52,52,0.28); --line-2: rgba(2,52,52,0.48);
  --ink: #023434; --muted: #046868; --muted-2: #3b8989;
  --grad-brand: linear-gradient(120deg, #069494 0%, #068080 45%, #006f78 100%);
  --grad-text:  linear-gradient(100deg, #056666 0%, #068080 50%, #009aa6 100%);
  --shadow-glow: 0 0 0 1px rgba(6,128,128,0.25), 0 18px 50px -24px rgba(6,128,128,0.35);
}
html.theme-bubblegum-pop ::selection { background: rgba(6,128,128,0.22); }
html.theme-bubblegum-pop * { scrollbar-color: #b3b8bf transparent; }
html.theme-bubblegum-pop *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-bubblegum-pop *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Cotton candy skies — #B298E7 · #B8E3E9 · #F5B8D5 · #F9BEDD (light, generated from the Figma palette) */
html.theme-cotton-candy-skies {
  --cyan: #7c69a1; --cyan-bright: #635481; --blue: #aa8094; --blue-deep: #7a5c6b;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(62,53,81,0.35);
  --bg: #dcf1f4; --bg-2: #c8e9ee; --panel: #ffffff; --panel-2: #ebf7f9;
  --line: rgba(62,53,81,0.28); --line-2: rgba(62,53,81,0.48);
  --ink: #3e3551; --muted: #7d6aa2; --muted-2: #9a8bb6;
  --grad-brand: linear-gradient(120deg, #B298E7 0%, #7c69a1 45%, #7a5c6b 100%);
  --grad-text:  linear-gradient(100deg, #635481 0%, #7c69a1 50%, #aa8094 100%);
  --shadow-glow: 0 0 0 1px rgba(124,105,161,0.25), 0 18px 50px -24px rgba(124,105,161,0.35);
}
html.theme-cotton-candy-skies ::selection { background: rgba(124,105,161,0.22); }
html.theme-cotton-candy-skies * { scrollbar-color: #b3b8bf transparent; }
html.theme-cotton-candy-skies *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-cotton-candy-skies *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Electric kiwi — #CCFF00 · #FFFF00 · #DFFF00 · #000000 (light, generated from the Figma palette) */
html.theme-electric-kiwi {
  --cyan: #637c00; --cyan-bright: #4f6300; --blue: #7c8f00; --blue-deep: #596700;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(0,0,0,0.35);
  --bg: #ffff80; --bg-2: #ffff38; --panel: #ffffff; --panel-2: #ffffb8;
  --line: rgba(0,0,0,0.28); --line-2: rgba(0,0,0,0.48);
  --ink: #000000; --muted: #000000; --muted-2: #383838;
  --grad-brand: linear-gradient(120deg, #CCFF00 0%, #637c00 45%, #596700 100%);
  --grad-text:  linear-gradient(100deg, #4f6300 0%, #637c00 50%, #7c8f00 100%);
  --shadow-glow: 0 0 0 1px rgba(99,124,0,0.25), 0 18px 50px -24px rgba(99,124,0,0.35);
}
html.theme-electric-kiwi ::selection { background: rgba(99,124,0,0.22); }
html.theme-electric-kiwi * { scrollbar-color: #b3b8bf transparent; }
html.theme-electric-kiwi *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-electric-kiwi *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Watermelon Splash — #FC6C85 · #89F336 · #4A4A4A · #ADEBB3 (light, generated from the Figma palette) */
html.theme-watermelon-splash {
  --cyan: #bd5064; --cyan-bright: #974050; --blue: #589c23; --blue-deep: #3f7019;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(26,26,26,0.35);
  --bg: #d6f5d9; --bg-2: #bfefc4; --panel: #ffffff; --panel-2: #e8f9ea;
  --line: rgba(26,26,26,0.28); --line-2: rgba(26,26,26,0.48);
  --ink: #1a1a1a; --muted: #343434; --muted-2: #616161;
  --grad-brand: linear-gradient(120deg, #FC6C85 0%, #bd5064 45%, #3f7019 100%);
  --grad-text:  linear-gradient(100deg, #974050 0%, #bd5064 50%, #589c23 100%);
  --shadow-glow: 0 0 0 1px rgba(189,80,100,0.25), 0 18px 50px -24px rgba(189,80,100,0.35);
}
html.theme-watermelon-splash ::selection { background: rgba(189,80,100,0.22); }
html.theme-watermelon-splash * { scrollbar-color: #b3b8bf transparent; }
html.theme-watermelon-splash *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-watermelon-splash *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Alchemical reaction — #9D00FF · #DE811D · #6BFF00 · #5B8040 (dark, generated from the Figma palette) */
html.theme-alchemical-reaction {
  --cyan: #6BFF00; --cyan-bright: #94ff47; --blue: #9D00FF; --blue-deep: #6e00b3;
  --bg: #2b0046; --bg-2: #3a005f; --panel: #56008c; --panel-2: #600f93;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #bcff8c; --muted: #91948c; --muted-2: #7d618c;
  --grad-brand: linear-gradient(120deg, #97ff4d 0%, #6BFF00 45%, #6e00b3 100%);
  --grad-text:  linear-gradient(100deg, #94ff47 0%, #6BFF00 50%, #9D00FF 100%);
  --shadow-glow: 0 0 0 1px rgba(107,255,0,0.25), 0 18px 50px -24px rgba(107,255,0,0.35);
}
html.theme-alchemical-reaction ::selection { background: rgba(107,255,0,0.3); }

/* Electropop — #CCFF00 · #FF6B00 · #F900FF · #5200FF (dark, generated from the Figma palette) */
html.theme-electropop {
  --cyan: #CCFF00; --cyan-bright: #daff47; --blue: #FF6B00; --blue-deep: #b34b00;
  --bg: #170046; --bg-2: #1f005f; --panel: #2d008c; --panel-2: #3a0f93;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #e8ff8c; --muted: #99948c; --muted-2: #74618c;
  --grad-brand: linear-gradient(120deg, #dbff4d 0%, #CCFF00 45%, #b34b00 100%);
  --grad-text:  linear-gradient(100deg, #daff47 0%, #CCFF00 50%, #FF6B00 100%);
  --shadow-glow: 0 0 0 1px rgba(204,255,0,0.25), 0 18px 50px -24px rgba(204,255,0,0.35);
}
html.theme-electropop ::selection { background: rgba(204,255,0,0.3); }

/* Cool revival — #00FFFF · #00AEFF · #00DE94 · #00FF52 (light, generated from the Figma palette) */
html.theme-cool-revival {
  --cyan: #0079b2; --cyan-bright: #00618e; --blue: #009a67; --blue-deep: #006f4a;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(0,61,89,0.35);
  --bg: #80ffff; --bg-2: #38ffff; --panel: #ffffff; --panel-2: #b8ffff;
  --line: rgba(0,61,89,0.28); --line-2: rgba(0,61,89,0.48);
  --ink: #003d59; --muted: #007ab3; --muted-2: #3897c4;
  --grad-brand: linear-gradient(120deg, #00AEFF 0%, #0079b2 45%, #006f4a 100%);
  --grad-text:  linear-gradient(100deg, #00618e 0%, #0079b2 50%, #009a67 100%);
  --shadow-glow: 0 0 0 1px rgba(0,121,178,0.25), 0 18px 50px -24px rgba(0,121,178,0.35);
}
html.theme-cool-revival ::selection { background: rgba(0,121,178,0.22); }
html.theme-cool-revival * { scrollbar-color: #b3b8bf transparent; }
html.theme-cool-revival *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-cool-revival *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Neon jungle — #89F336 · #38A711 · #F23598 · #A835F2 (dark, generated from the Figma palette) */
html.theme-neon-jungle {
  --cyan: #89F336; --cyan-bright: #aaf66e; --blue: #38A711; --blue-deep: #27750c;
  --bg: #2e0f43; --bg-2: #3f145a; --panel: #5c1d85; --panel-2: #662b8c;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #e2facd; --muted: #aa9daf; --muted-2: #8f71a0;
  --grad-brand: linear-gradient(120deg, #acf772 0%, #89F336 45%, #27750c 100%);
  --grad-text:  linear-gradient(100deg, #aaf66e 0%, #89F336 50%, #38A711 100%);
  --shadow-glow: 0 0 0 1px rgba(137,243,54,0.25), 0 18px 50px -24px rgba(137,243,54,0.35);
}
html.theme-neon-jungle ::selection { background: rgba(137,243,54,0.3); }

/* Sharp edge — #898989 · #D9D9D9 · #FF4D4D · #4DFFBC (light, generated from the Figma palette) */
html.theme-sharp-edge {
  --cyan: #cd3e3e; --cyan-bright: #a43232; --blue: #898989; --blue-deep: #636363;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(48,48,48,0.35);
  --bg: #a6ffde; --bg-2: #74ffcb; --panel: #ffffff; --panel-2: #cdffec;
  --line: rgba(48,48,48,0.28); --line-2: rgba(48,48,48,0.48);
  --ink: #303030; --muted: #606060; --muted-2: #838383;
  --grad-brand: linear-gradient(120deg, #FF4D4D 0%, #cd3e3e 45%, #636363 100%);
  --grad-text:  linear-gradient(100deg, #a43232 0%, #cd3e3e 50%, #898989 100%);
  --shadow-glow: 0 0 0 1px rgba(205,62,62,0.25), 0 18px 50px -24px rgba(205,62,62,0.35);
}
html.theme-sharp-edge ::selection { background: rgba(205,62,62,0.22); }
html.theme-sharp-edge * { scrollbar-color: #b3b8bf transparent; }
html.theme-sharp-edge *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-sharp-edge *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Electric fusion — #00F0FF · #00FF81 · #FFA900 · #FF6800 (light, generated from the Figma palette) */
html.theme-electric-fusion {
  --cyan: #bf4e00; --cyan-bright: #993e00; --blue: #bf7e00; --blue-deep: #8a5b00;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(89,36,0,0.35);
  --bg: #80ffc0; --bg-2: #38ff9d; --panel: #ffffff; --panel-2: #b8ffdc;
  --line: rgba(89,36,0,0.28); --line-2: rgba(89,36,0,0.48);
  --ink: #592400; --muted: #b34900; --muted-2: #c47138;
  --grad-brand: linear-gradient(120deg, #FF6800 0%, #bf4e00 45%, #8a5b00 100%);
  --grad-text:  linear-gradient(100deg, #993e00 0%, #bf4e00 50%, #bf7e00 100%);
  --shadow-glow: 0 0 0 1px rgba(191,78,0,0.25), 0 18px 50px -24px rgba(191,78,0,0.35);
}
html.theme-electric-fusion ::selection { background: rgba(191,78,0,0.22); }
html.theme-electric-fusion * { scrollbar-color: #b3b8bf transparent; }
html.theme-electric-fusion *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-electric-fusion *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Fireworks — #ED2100 · #E88A38 · #960016 · #BF00AC (dark, generated from the Figma palette) */
html.theme-fireworks {
  --cyan: #f05238; --cyan-bright: #f48270; --blue: #BF00AC; --blue-deep: #860078;
  --bg: #2a0006; --bg-2: #380008; --panel: #53000c; --panel-2: #5d0f1b;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #f5caa5; --muted: #b17565; --muted-2: #914d46;
  --grad-brand: linear-gradient(120deg, #f58674 0%, #f05238 45%, #860078 100%);
  --grad-text:  linear-gradient(100deg, #f48270 0%, #f05238 50%, #BF00AC 100%);
  --shadow-glow: 0 0 0 1px rgba(240,82,56,0.25), 0 18px 50px -24px rgba(240,82,56,0.35);
}
html.theme-fireworks ::selection { background: rgba(240,82,56,0.3); }

/* Space berries — #FD3DB5 · #FFB8DC · #FB6A2C · #8C1946 (dark, generated from the Figma palette) */
html.theme-space-berries {
  --cyan: #FB6A2C; --cyan-bright: #fc9467; --blue: #FD3DB5; --blue-deep: #b12b7f;
  --bg: #270714; --bg-2: #340a1b; --panel: #4d0e27; --panel-2: #581c34;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #ffdfef; --muted: #b4879b; --muted-2: #915d73;
  --grad-brand: linear-gradient(120deg, #fc976b 0%, #FB6A2C 45%, #b12b7f 100%);
  --grad-text:  linear-gradient(100deg, #fc9467 0%, #FB6A2C 50%, #FD3DB5 100%);
  --shadow-glow: 0 0 0 1px rgba(251,106,44,0.25), 0 18px 50px -24px rgba(251,106,44,0.35);
}
html.theme-space-berries ::selection { background: rgba(251,106,44,0.3); }

/* Pop art — #00F0FF · #FF46A2 · #FFFF00 · #EE4B2B (light, generated from the Figma palette) */
html.theme-pop-art {
  --cyan: #ce4125; --cyan-bright: #a5341e; --blue: #ed4197; --blue-deep: #ab2f6d;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(83,26,15,0.35);
  --bg: #ffff80; --bg-2: #ffff38; --panel: #ffffff; --panel-2: #ffffb8;
  --line: rgba(83,26,15,0.28); --line-2: rgba(83,26,15,0.48);
  --ink: #531a0f; --muted: #a7351e; --muted-2: #ba6150;
  --grad-brand: linear-gradient(120deg, #EE4B2B 0%, #ce4125 45%, #ab2f6d 100%);
  --grad-text:  linear-gradient(100deg, #a5341e 0%, #ce4125 50%, #ed4197 100%);
  --shadow-glow: 0 0 0 1px rgba(206,65,37,0.25), 0 18px 50px -24px rgba(206,65,37,0.35);
}
html.theme-pop-art ::selection { background: rgba(206,65,37,0.22); }
html.theme-pop-art * { scrollbar-color: #b3b8bf transparent; }
html.theme-pop-art *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-pop-art *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Urban graffiti — #FF2400 · #2CFF05 · #00F0FF · #5A5A5A (light, generated from the Figma palette) */
html.theme-urban-graffiti {
  --cyan: #dc1f00; --cyan-bright: #b01900; --blue: #009aa6; --blue-deep: #006f78;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(32,32,32,0.35);
  --bg: #96ff82; --bg-2: #5aff3c; --panel: #ffffff; --panel-2: #c4ffb9;
  --line: rgba(32,32,32,0.28); --line-2: rgba(32,32,32,0.48);
  --ink: #202020; --muted: #3f3f3f; --muted-2: #696969;
  --grad-brand: linear-gradient(120deg, #FF2400 0%, #dc1f00 45%, #006f78 100%);
  --grad-text:  linear-gradient(100deg, #b01900 0%, #dc1f00 50%, #009aa6 100%);
  --shadow-glow: 0 0 0 1px rgba(220,31,0,0.25), 0 18px 50px -24px rgba(220,31,0,0.35);
}
html.theme-urban-graffiti ::selection { background: rgba(220,31,0,0.22); }
html.theme-urban-graffiti * { scrollbar-color: #b3b8bf transparent; }
html.theme-urban-graffiti *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-urban-graffiti *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Neon noir — #000000 · #2CFF05 · #BF00FF · #2D2D2D (dark, generated from the Figma palette) */
html.theme-neon-noir {
  --cyan: #2CFF05; --cyan-bright: #67ff4b; --blue: #BF00FF; --blue-deep: #8600b3;
  --bg: #000000; --bg-2: #000000; --panel: #000000; --panel-2: #0f0f0f;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #a0ff8f; --muted: #5d9453; --muted-2: #3d6136;
  --grad-brand: linear-gradient(120deg, #6bff50 0%, #2CFF05 45%, #8600b3 100%);
  --grad-text:  linear-gradient(100deg, #67ff4b 0%, #2CFF05 50%, #BF00FF 100%);
  --shadow-glow: 0 0 0 1px rgba(44,255,5,0.25), 0 18px 50px -24px rgba(44,255,5,0.35);
}
html.theme-neon-noir ::selection { background: rgba(44,255,5,0.3); }

/* Tropical punch — #FF8243 · #FFC0CB · #FCE883 · #069494 (light, generated from the Figma palette) */
html.theme-tropical-punch {
  --cyan: #068080; --cyan-bright: #056666; --blue: #dc713a; --blue-deep: #9e512a;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(2,52,52,0.35);
  --bg: #fef4c1; --bg-2: #fded9e; --panel: #ffffff; --panel-2: #fef9dc;
  --line: rgba(2,52,52,0.28); --line-2: rgba(2,52,52,0.48);
  --ink: #023434; --muted: #046868; --muted-2: #3b8989;
  --grad-brand: linear-gradient(120deg, #069494 0%, #068080 45%, #9e512a 100%);
  --grad-text:  linear-gradient(100deg, #056666 0%, #068080 50%, #dc713a 100%);
  --shadow-glow: 0 0 0 1px rgba(6,128,128,0.25), 0 18px 50px -24px rgba(6,128,128,0.35);
}
html.theme-tropical-punch ::selection { background: rgba(6,128,128,0.22); }
html.theme-tropical-punch * { scrollbar-color: #b3b8bf transparent; }
html.theme-tropical-punch *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-tropical-punch *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Cobalt sky — #0047AB · #000080 · #82C8E5 · #6D8196 (dark, generated from the Figma palette) */
html.theme-cobalt-sky {
  --cyan: #487bc3; --cyan-bright: #7ba0d4; --blue: #000080; --blue-deep: #00005a;
  --bg: #000023; --bg-2: #000030; --panel: #000046; --panel-2: #0f0f51;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #c7e6f3; --muted: #7385aa; --muted-2: #4c5788;
  --grad-brand: linear-gradient(120deg, #7fa3d5 0%, #487bc3 45%, #00005a 100%);
  --grad-text:  linear-gradient(100deg, #7ba0d4 0%, #487bc3 50%, #000080 100%);
  --shadow-glow: 0 0 0 1px rgba(72,123,195,0.25), 0 18px 50px -24px rgba(72,123,195,0.35);
}
html.theme-cobalt-sky ::selection { background: rgba(72,123,195,0.3); }

/* Technicolor dream — #FF00FF · #00FFFF · #CCFF00 · #191970 (light, generated from the Figma palette) */
html.theme-technicolor-dream {
  --cyan: #cd00cd; --cyan-bright: #a400a4; --blue: #191970; --blue-deep: #121251;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(9,9,39,0.35);
  --bg: #e6ff80; --bg-2: #d7ff38; --panel: #ffffff; --panel-2: #f1ffb8;
  --line: rgba(9,9,39,0.28); --line-2: rgba(9,9,39,0.48);
  --ink: #090927; --muted: #12124e; --muted-2: #464675;
  --grad-brand: linear-gradient(120deg, #FF00FF 0%, #cd00cd 45%, #121251 100%);
  --grad-text:  linear-gradient(100deg, #a400a4 0%, #cd00cd 50%, #191970 100%);
  --shadow-glow: 0 0 0 1px rgba(205,0,205,0.25), 0 18px 50px -24px rgba(205,0,205,0.35);
}
html.theme-technicolor-dream ::selection { background: rgba(205,0,205,0.22); }
html.theme-technicolor-dream * { scrollbar-color: #b3b8bf transparent; }
html.theme-technicolor-dream *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-technicolor-dream *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Jewel box — #50C878 · #0F52BA · #9966CC · #CFB53B (dark, generated from the Figma palette) */
html.theme-jewel-box {
  --cyan: #CFB53B; --cyan-bright: #dcca72; --blue: #0F52BA; --blue-deep: #0b3982;
  --bg: #041733; --bg-2: #051f45; --panel: #082d66; --panel-2: #173a6f;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #e9dea7; --muted: #8b948c; --muted-2: #5e707f;
  --grad-brand: linear-gradient(120deg, #ddcb76 0%, #CFB53B 45%, #0b3982 100%);
  --grad-text:  linear-gradient(100deg, #dcca72 0%, #CFB53B 50%, #0F52BA 100%);
  --shadow-glow: 0 0 0 1px rgba(207,181,59,0.25), 0 18px 50px -24px rgba(207,181,59,0.35);
}
html.theme-jewel-box ::selection { background: rgba(207,181,59,0.3); }

/* Quite clear — #CBCBCB · #F2F2F2 · #174D38 · #4D1717 (light, generated from the Figma palette) */
html.theme-quite-clear {
  --cyan: #174D38; --cyan-bright: #123e2d; --blue: #4D1717; --blue-deep: #371111;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(27,8,8,0.35);
  --bg: #f9f9f9; --bg-2: #f5f5f5; --panel: #ffffff; --panel-2: #fbfbfb;
  --line: rgba(27,8,8,0.28); --line-2: rgba(27,8,8,0.48);
  --ink: #1b0808; --muted: #361010; --muted-2: #624545;
  --grad-brand: linear-gradient(120deg, #4D1717 0%, #174D38 45%, #371111 100%);
  --grad-text:  linear-gradient(100deg, #123e2d 0%, #174D38 50%, #4D1717 100%);
  --shadow-glow: 0 0 0 1px rgba(23,77,56,0.25), 0 18px 50px -24px rgba(23,77,56,0.35);
}
html.theme-quite-clear ::selection { background: rgba(23,77,56,0.22); }
html.theme-quite-clear * { scrollbar-color: #b3b8bf transparent; }
html.theme-quite-clear *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-quite-clear *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Quiet luxury — #F7E6CA · #E8D59E · #D9BBB0 · #AD9C8E (light, generated from the Figma palette) */
html.theme-quiet-luxury {
  --cyan: #796f52; --cyan-bright: #615942; --blue: #96877b; --blue-deep: #6c6159;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(61,55,50,0.35);
  --bg: #fbf3e5; --bg-2: #f9ecd6; --panel: #ffffff; --panel-2: #fdf8f0;
  --line: rgba(61,55,50,0.28); --line-2: rgba(61,55,50,0.48);
  --ink: #3d3732; --muted: #796d63; --muted-2: #968d85;
  --grad-brand: linear-gradient(120deg, #E8D59E 0%, #796f52 45%, #6c6159 100%);
  --grad-text:  linear-gradient(100deg, #615942 0%, #796f52 50%, #96877b 100%);
  --shadow-glow: 0 0 0 1px rgba(121,111,82,0.25), 0 18px 50px -24px rgba(121,111,82,0.35);
}
html.theme-quiet-luxury ::selection { background: rgba(121,111,82,0.22); }
html.theme-quiet-luxury * { scrollbar-color: #b3b8bf transparent; }
html.theme-quiet-luxury *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-quiet-luxury *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Night sands — #CBBD93 · #FAE8B4 · #80775C · #574A24 (light, generated from the Figma palette) */
html.theme-night-sands {
  --cyan: #574A24; --cyan-bright: #463b1d; --blue: #80775C; --blue-deep: #5c5642;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(30,26,13,0.35);
  --bg: #fdf4da; --bg-2: #fbedc5; --panel: #ffffff; --panel-2: #fef9ea;
  --line: rgba(30,26,13,0.28); --line-2: rgba(30,26,13,0.48);
  --ink: #1e1a0d; --muted: #3d3419; --muted-2: #68614c;
  --grad-brand: linear-gradient(120deg, #80775C 0%, #574A24 45%, #5c5642 100%);
  --grad-text:  linear-gradient(100deg, #463b1d 0%, #574A24 50%, #80775C 100%);
  --shadow-glow: 0 0 0 1px rgba(87,74,36,0.25), 0 18px 50px -24px rgba(87,74,36,0.35);
}
html.theme-night-sands ::selection { background: rgba(87,74,36,0.22); }
html.theme-night-sands * { scrollbar-color: #b3b8bf transparent; }
html.theme-night-sands *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-night-sands *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Old photograph — #FDFBD4 · #D9D7B6 · #878672 · #545333 (light, generated from the Figma palette) */
html.theme-old-photograph {
  --cyan: #545333; --cyan-bright: #434229; --blue: #878672; --blue-deep: #616052;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(29,29,18,0.35);
  --bg: #fefdea; --bg-2: #fdfcdd; --panel: #ffffff; --panel-2: #fefef3;
  --line: rgba(29,29,18,0.28); --line-2: rgba(29,29,18,0.48);
  --ink: #1d1d12; --muted: #3b3a24; --muted-2: #666554;
  --grad-brand: linear-gradient(120deg, #878672 0%, #545333 45%, #616052 100%);
  --grad-text:  linear-gradient(100deg, #434229 0%, #545333 50%, #878672 100%);
  --shadow-glow: 0 0 0 1px rgba(84,83,51,0.25), 0 18px 50px -24px rgba(84,83,51,0.35);
}
html.theme-old-photograph ::selection { background: rgba(84,83,51,0.22); }
html.theme-old-photograph * { scrollbar-color: #b3b8bf transparent; }
html.theme-old-photograph *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-old-photograph *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Cappuccino — #D6B588 · #C6C0B9 · #705E46 · #422701 (dark, generated from the Figma palette) */
html.theme-cappuccino {
  --cyan: #8d7b65; --cyan-bright: #ada090; --blue: #D6B588; --blue-deep: #967f5f;
  --bg: #120b01; --bg-2: #180e01; --panel: #241501; --panel-2: #312310;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #e5e3e0; --muted: #948c82; --muted-2: #6d6356;
  --grad-brand: linear-gradient(120deg, #afa393 0%, #8d7b65 45%, #967f5f 100%);
  --grad-text:  linear-gradient(100deg, #ada090 0%, #8d7b65 50%, #D6B588 100%);
  --shadow-glow: 0 0 0 1px rgba(141,123,101,0.25), 0 18px 50px -24px rgba(141,123,101,0.35);
}
html.theme-cappuccino ::selection { background: rgba(141,123,101,0.3); }

/* Breakfast tea — #FFD3AC · #CCBEB1 · #664C36 · #331C08 (light, generated from the Figma palette) */
html.theme-breakfast-tea {
  --cyan: #331C08; --cyan-bright: #291606; --blue: #664C36; --blue-deep: #493727;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(18,10,3,0.35);
  --bg: #ffe9d6; --bg-2: #ffddbe; --panel: #ffffff; --panel-2: #fff3e8;
  --line: rgba(18,10,3,0.28); --line-2: rgba(18,10,3,0.48);
  --ink: #120a03; --muted: #241406; --muted-2: #54483d;
  --grad-brand: linear-gradient(120deg, #664C36 0%, #331C08 45%, #493727 100%);
  --grad-text:  linear-gradient(100deg, #291606 0%, #331C08 50%, #664C36 100%);
  --shadow-glow: 0 0 0 1px rgba(51,28,8,0.25), 0 18px 50px -24px rgba(51,28,8,0.35);
}
html.theme-breakfast-tea ::selection { background: rgba(51,28,8,0.22); }
html.theme-breakfast-tea * { scrollbar-color: #b3b8bf transparent; }
html.theme-breakfast-tea *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-breakfast-tea *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Cozy campfire — #895129 · #AD7A32 · #8A6E29 · #660F09 (dark, generated from the Figma palette) */
html.theme-cozy-campfire {
  --cyan: #a97a76; --cyan-bright: #c19f9c; --blue: #AD7A32; --blue-deep: #795523;
  --bg: #1c0403; --bg-2: #260503; --panel: #380805; --panel-2: #441714;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #dac3a3; --muted: #967461; --muted-2: #764f41;
  --grad-brand: linear-gradient(120deg, #c3a29f 0%, #a97a76 45%, #795523 100%);
  --grad-text:  linear-gradient(100deg, #c19f9c 0%, #a97a76 50%, #AD7A32 100%);
  --shadow-glow: 0 0 0 1px rgba(169,122,118,0.25), 0 18px 50px -24px rgba(169,122,118,0.35);
}
html.theme-cozy-campfire ::selection { background: rgba(169,122,118,0.3); }

/* Stone path — #A49A87 · #A5A58D · #968F83 · #E8E5DF (dark, generated from the Figma palette) */
html.theme-stone-path {
  --cyan: #E8E5DF; --cyan-bright: #eeece8; --blue: #A49A87; --blue-deep: #736c5f;
  --bg: #22201e; --bg-2: #2e2c28; --panel: #44403b; --panel-2: #4f4b47;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #f8f6f4; --muted: #acaaa6; --muted-2: #888581;
  --grad-brand: linear-gradient(120deg, #efede9 0%, #E8E5DF 45%, #736c5f 100%);
  --grad-text:  linear-gradient(100deg, #eeece8 0%, #E8E5DF 50%, #A49A87 100%);
  --shadow-glow: 0 0 0 1px rgba(232,229,223,0.25), 0 18px 50px -24px rgba(232,229,223,0.35);
}
html.theme-stone-path ::selection { background: rgba(232,229,223,0.3); }

/* Desert mirage — #C2B280 · #E35336 · #98A869 · #272757 (dark, generated from the Figma palette) */
html.theme-desert-mirage {
  --cyan: #E35336; --cyan-bright: #eb836e; --blue: #C2B280; --blue-deep: #887d5a;
  --bg: #0b0b18; --bg-2: #0e0e21; --panel: #151530; --panel-2: #23233c;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #e4dcc6; --muted: #8d8887; --muted-2: #646169;
  --grad-brand: linear-gradient(120deg, #eb8772 0%, #E35336 45%, #887d5a 100%);
  --grad-text:  linear-gradient(100deg, #eb836e 0%, #E35336 50%, #C2B280 100%);
  --shadow-glow: 0 0 0 1px rgba(227,83,54,0.25), 0 18px 50px -24px rgba(227,83,54,0.35);
}
html.theme-desert-mirage ::selection { background: rgba(227,83,54,0.3); }

/* Honeycomb — #FFC107 · #F9E076 · #FFFDD0 · #895129 (light, generated from the Figma palette) */
html.theme-honeycomb {
  --cyan: #8f6b07; --cyan-bright: #725606; --blue: #895129; --blue-deep: #633a1e;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(48,28,14,0.35);
  --bg: #fffee8; --bg-2: #fffdda; --panel: #ffffff; --panel-2: #fffef2;
  --line: rgba(48,28,14,0.28); --line-2: rgba(48,28,14,0.48);
  --ink: #301c0e; --muted: #60391d; --muted-2: #83654f;
  --grad-brand: linear-gradient(120deg, #FFC107 0%, #8f6b07 45%, #633a1e 100%);
  --grad-text:  linear-gradient(100deg, #725606 0%, #8f6b07 50%, #895129 100%);
  --shadow-glow: 0 0 0 1px rgba(143,107,7,0.25), 0 18px 50px -24px rgba(143,107,7,0.35);
}
html.theme-honeycomb ::selection { background: rgba(143,107,7,0.22); }
html.theme-honeycomb * { scrollbar-color: #b3b8bf transparent; }
html.theme-honeycomb *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-honeycomb *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Urban loft — #9C9A9A · #A35E47 · #000000 · #464646 (dark, generated from the Figma palette) */
html.theme-urban-loft {
  --cyan: #A35E47; --cyan-bright: #bd8b7b; --blue: #9C9A9A; --blue-deep: #6d6c6c;
  --bg: #000000; --bg-2: #000000; --panel: #000000; --panel-2: #0f0f0f;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #d2d2d2; --muted: #7a7a7a; --muted-2: #505050;
  --grad-brand: linear-gradient(120deg, #bf8e7e 0%, #A35E47 45%, #6d6c6c 100%);
  --grad-text:  linear-gradient(100deg, #bd8b7b 0%, #A35E47 50%, #9C9A9A 100%);
  --shadow-glow: 0 0 0 1px rgba(163,94,71,0.25), 0 18px 50px -24px rgba(163,94,71,0.35);
}
html.theme-urban-loft ::selection { background: rgba(163,94,71,0.3); }

/* Charming seaside — #B3EBF2 · #85D1DB · #B6F2D1 · #C9FDF2 (light, generated from the Figma palette) */
html.theme-charming-seaside {
  --cyan: #507d84; --cyan-bright: #40646a; --blue: #6b8e90; --blue-deep: #4d6668;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(44,68,72,0.35);
  --bg: #e4fef9; --bg-2: #d5fdf5; --panel: #ffffff; --panel-2: #f0fefb;
  --line: rgba(44,68,72,0.28); --line-2: rgba(44,68,72,0.48);
  --ink: #2c4448; --muted: #4a757b; --muted-2: #729398;
  --grad-brand: linear-gradient(120deg, #85D1DB 0%, #507d84 45%, #4d6668 100%);
  --grad-text:  linear-gradient(100deg, #40646a 0%, #507d84 50%, #6b8e90 100%);
  --shadow-glow: 0 0 0 1px rgba(80,125,132,0.25), 0 18px 50px -24px rgba(80,125,132,0.35);
}
html.theme-charming-seaside ::selection { background: rgba(80,125,132,0.22); }
html.theme-charming-seaside * { scrollbar-color: #b3b8bf transparent; }
html.theme-charming-seaside *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-charming-seaside *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Beachfront views — #EDE8D0 · #6E632E · #DBD1ED · #ABBEED (light, generated from the Figma palette) */
html.theme-beachfront-views {
  --cyan: #6E632E; --cyan-bright: #584f25; --blue: #808eb2; --blue-deep: #5c6680;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(39,35,16,0.35);
  --bg: #f6f4e8; --bg-2: #f1edda; --panel: #ffffff; --panel-2: #faf9f2;
  --line: rgba(39,35,16,0.28); --line-2: rgba(39,35,16,0.48);
  --ink: #272310; --muted: #4d4520; --muted-2: #746e51;
  --grad-brand: linear-gradient(120deg, #ABBEED 0%, #6E632E 45%, #5c6680 100%);
  --grad-text:  linear-gradient(100deg, #584f25 0%, #6E632E 50%, #808eb2 100%);
  --shadow-glow: 0 0 0 1px rgba(110,99,46,0.25), 0 18px 50px -24px rgba(110,99,46,0.35);
}
html.theme-beachfront-views ::selection { background: rgba(110,99,46,0.22); }
html.theme-beachfront-views * { scrollbar-color: #b3b8bf transparent; }
html.theme-beachfront-views *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-beachfront-views *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Under the moonlight — #CCCCFF · #A3A3CC · #5C5C99 · #292966 (dark, generated from the Figma palette) */
html.theme-under-the-moonlight {
  --cyan: #7c7ca2; --cyan-bright: #a1a1bc; --blue: #CCCCFF; --blue-deep: #8f8fb3;
  --bg: #0c0c1c; --bg-2: #101026; --panel: #171738; --panel-2: #252544;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #e8e8ff; --muted: #9090ab; --muted-2: #666684;
  --grad-brand: linear-gradient(120deg, #a3a3be 0%, #7c7ca2 45%, #8f8fb3 100%);
  --grad-text:  linear-gradient(100deg, #a1a1bc 0%, #7c7ca2 50%, #CCCCFF 100%);
  --shadow-glow: 0 0 0 1px rgba(124,124,162,0.25), 0 18px 50px -24px rgba(124,124,162,0.35);
}
html.theme-under-the-moonlight ::selection { background: rgba(124,124,162,0.3); }

/* Minty fresh — #98FBCB · #BFFFED · #7FCFA8 · #558B71 (light, generated from the Figma palette) */
html.theme-minty-fresh {
  --cyan: #497862; --cyan-bright: #3a604e; --blue: #5f9a7e; --blue-deep: #446f5b;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(30,49,40,0.35);
  --bg: #dffff6; --bg-2: #cdfff1; --panel: #ffffff; --panel-2: #edfffa;
  --line: rgba(30,49,40,0.28); --line-2: rgba(30,49,40,0.48);
  --ink: #1e3128; --muted: #3c614f; --muted-2: #678476;
  --grad-brand: linear-gradient(120deg, #558B71 0%, #497862 45%, #446f5b 100%);
  --grad-text:  linear-gradient(100deg, #3a604e 0%, #497862 50%, #5f9a7e 100%);
  --shadow-glow: 0 0 0 1px rgba(73,120,98,0.25), 0 18px 50px -24px rgba(73,120,98,0.35);
}
html.theme-minty-fresh ::selection { background: rgba(73,120,98,0.22); }
html.theme-minty-fresh * { scrollbar-color: #b3b8bf transparent; }
html.theme-minty-fresh *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-minty-fresh *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Siltstone — #CBBD93 · #FFF5B8 · #FFB16E · #CCA25A (light, generated from the Figma palette) */
html.theme-siltstone {
  --cyan: #8e713f; --cyan-bright: #725a32; --blue: #b27b4c; --blue-deep: #805937;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(71,57,32,0.35);
  --bg: #fffadc; --bg-2: #fff7c8; --panel: #ffffff; --panel-2: #fffceb;
  --line: rgba(71,57,32,0.28); --line-2: rgba(71,57,32,0.48);
  --ink: #473920; --muted: #85693b; --muted-2: #a08a66;
  --grad-brand: linear-gradient(120deg, #CCA25A 0%, #8e713f 45%, #805937 100%);
  --grad-text:  linear-gradient(100deg, #725a32 0%, #8e713f 50%, #b27b4c 100%);
  --shadow-glow: 0 0 0 1px rgba(142,113,63,0.25), 0 18px 50px -24px rgba(142,113,63,0.35);
}
html.theme-siltstone ::selection { background: rgba(142,113,63,0.22); }
html.theme-siltstone * { scrollbar-color: #b3b8bf transparent; }
html.theme-siltstone *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-siltstone *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Emerald odyssey — #00674F · #73E6CB · #3EBB9E · #0A3C30 (dark, generated from the Figma palette) */
html.theme-emerald-odyssey {
  --cyan: #489281; --cyan-bright: #7bb1a4; --blue: #3EBB9E; --blue-deep: #2b836f;
  --bg: #03110d; --bg-2: #041612; --panel: #06211a; --panel-2: #152e28;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #c0f4e8; --muted: #729b91; --muted-2: #4d7168;
  --grad-brand: linear-gradient(120deg, #7fb3a7 0%, #489281 45%, #2b836f 100%);
  --grad-text:  linear-gradient(100deg, #7bb1a4 0%, #489281 50%, #3EBB9E 100%);
  --shadow-glow: 0 0 0 1px rgba(72,146,129,0.25), 0 18px 50px -24px rgba(72,146,129,0.35);
}
html.theme-emerald-odyssey ::selection { background: rgba(72,146,129,0.3); }

/* Mountain mist — #6D8196 · #B0C4DE · #01796F · #5A5A5A (dark, generated from the Figma palette) */
html.theme-mountain-mist {
  --cyan: #58a7a1; --cyan-bright: #87c0bb; --blue: #B0C4DE; --blue-deep: #7b899b;
  --bg: #191919; --bg-2: #222222; --panel: #323232; --panel-2: #3e3e3e;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #dbe4f0; --muted: #9499a0; --muted-2: #72767a;
  --grad-brand: linear-gradient(120deg, #8ac1bd 0%, #58a7a1 45%, #7b899b 100%);
  --grad-text:  linear-gradient(100deg, #87c0bb 0%, #58a7a1 50%, #B0C4DE 100%);
  --shadow-glow: 0 0 0 1px rgba(88,167,161,0.25), 0 18px 50px -24px rgba(88,167,161,0.35);
}
html.theme-mountain-mist ::selection { background: rgba(88,167,161,0.3); }

/* Morning dew — #AFEEEE · #ADEBB3 · #C4C4C4 · #D3D3D3 (light, generated from the Figma palette) */
html.theme-morning-dew {
  --cyan: #5b7b5d; --cyan-bright: #49624a; --blue: #888888; --blue-deep: #626262;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(64,64,64,0.35);
  --bg: #d7f7f7; --bg-2: #c1f2f2; --panel: #ffffff; --panel-2: #e9fafa;
  --line: rgba(64,64,64,0.28); --line-2: rgba(64,64,64,0.48);
  --ink: #404040; --muted: #6e6e6e; --muted-2: #8e8e8e;
  --grad-brand: linear-gradient(120deg, #ADEBB3 0%, #5b7b5d 45%, #626262 100%);
  --grad-text:  linear-gradient(100deg, #49624a 0%, #5b7b5d 50%, #888888 100%);
  --shadow-glow: 0 0 0 1px rgba(91,123,93,0.25), 0 18px 50px -24px rgba(91,123,93,0.35);
}
html.theme-morning-dew ::selection { background: rgba(91,123,93,0.22); }
html.theme-morning-dew * { scrollbar-color: #b3b8bf transparent; }
html.theme-morning-dew *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-morning-dew *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Olive grove — #808000 · #228B22 · #636B2F · #F2F0EF (dark, generated from the Figma palette) */
html.theme-olive-grove {
  --cyan: #a4a448; --cyan-bright: #bdbd7b; --blue: #228B22; --blue-deep: #186118;
  --bg: #1b1e0d; --bg-2: #252812; --panel: #363b1a; --panel-2: #424728;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #f9f8f8; --muted: #a7a99b; --muted-2: #80836e;
  --grad-brand: linear-gradient(120deg, #bfbf7f 0%, #a4a448 45%, #186118 100%);
  --grad-text:  linear-gradient(100deg, #bdbd7b 0%, #a4a448 50%, #228B22 100%);
  --shadow-glow: 0 0 0 1px rgba(164,164,72,0.25), 0 18px 50px -24px rgba(164,164,72,0.35);
}
html.theme-olive-grove ::selection { background: rgba(164,164,72,0.3); }

/* Coastal morning — #93C572 · #89CFF0 · #F5F5DC · #82C8E5 (light, generated from the Figma palette) */
html.theme-coastal-morning {
  --cyan: #5f7f4a; --cyan-bright: #4c663b; --blue: #6296ab; --blue-deep: #476c7b;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(51,69,40,0.35);
  --bg: #fafaee; --bg-2: #f7f7e4; --panel: #ffffff; --panel-2: #fcfcf5;
  --line: rgba(51,69,40,0.28); --line-2: rgba(51,69,40,0.48);
  --ink: #334528; --muted: #597745; --muted-2: #7e956e;
  --grad-brand: linear-gradient(120deg, #93C572 0%, #5f7f4a 45%, #476c7b 100%);
  --grad-text:  linear-gradient(100deg, #4c663b 0%, #5f7f4a 50%, #6296ab 100%);
  --shadow-glow: 0 0 0 1px rgba(95,127,74,0.25), 0 18px 50px -24px rgba(95,127,74,0.35);
}
html.theme-coastal-morning ::selection { background: rgba(95,127,74,0.22); }
html.theme-coastal-morning * { scrollbar-color: #b3b8bf transparent; }
html.theme-coastal-morning *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-coastal-morning *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Eucalyptus grove — #B2AC88 · #898989 · #F2F0EF · #4B6E48 (dark, generated from the Figma palette) */
html.theme-eucalyptus-grove {
  --cyan: #F2F0EF; --cyan-bright: #f6f4f3; --blue: #B2AC88; --blue-deep: #7d785f;
  --bg: #151f14; --bg-2: #1c291b; --panel: #293d28; --panel-2: #364935;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #f9f8f8; --muted: #a2a9a1; --muted-2: #788477;
  --grad-brand: linear-gradient(120deg, #f6f5f4 0%, #F2F0EF 45%, #7d785f 100%);
  --grad-text:  linear-gradient(100deg, #f6f4f3 0%, #F2F0EF 50%, #B2AC88 100%);
  --shadow-glow: 0 0 0 1px rgba(242,240,239,0.25), 0 18px 50px -24px rgba(242,240,239,0.35);
}
html.theme-eucalyptus-grove ::selection { background: rgba(242,240,239,0.3); }

/* Soft spring — #6395EE · #90B8D6 · #88CFA8 · #85DECB (light, generated from the Figma palette) */
html.theme-soft-spring {
  --cyan: #4a70b3; --cyan-bright: #3b5a8f; --blue: #6c8aa0; --blue-deep: #4e6373;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(35,52,83,0.35);
  --bg: #c2efe5; --bg-2: #a0e5d6; --panel: #ffffff; --panel-2: #ddf6f0;
  --line: rgba(35,52,83,0.28); --line-2: rgba(35,52,83,0.48);
  --ink: #233453; --muted: #4568a7; --muted-2: #6e89ba;
  --grad-brand: linear-gradient(120deg, #6395EE 0%, #4a70b3 45%, #4e6373 100%);
  --grad-text:  linear-gradient(100deg, #3b5a8f 0%, #4a70b3 50%, #6c8aa0 100%);
  --shadow-glow: 0 0 0 1px rgba(74,112,179,0.25), 0 18px 50px -24px rgba(74,112,179,0.35);
}
html.theme-soft-spring ::selection { background: rgba(74,112,179,0.22); }
html.theme-soft-spring * { scrollbar-color: #b3b8bf transparent; }
html.theme-soft-spring *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-soft-spring *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Autumn leaves — #FFB343 · #DB9A39 · #B37E2E · #614419 (dark, generated from the Figma palette) */
html.theme-autumn-leaves {
  --cyan: #FFB343; --cyan-bright: #ffc878; --blue: #DB9A39; --blue-deep: #996c28;
  --bg: #1b1307; --bg-2: #24190a; --panel: #35250e; --panel-2: #41321c;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #ffddaa; --muted: #aa9068; --muted-2: #826b49;
  --grad-brand: linear-gradient(120deg, #ffca7b 0%, #FFB343 45%, #996c28 100%);
  --grad-text:  linear-gradient(100deg, #ffc878 0%, #FFB343 50%, #DB9A39 100%);
  --shadow-glow: 0 0 0 1px rgba(255,179,67,0.25), 0 18px 50px -24px rgba(255,179,67,0.35);
}
html.theme-autumn-leaves ::selection { background: rgba(255,179,67,0.3); }

/* Winter chill — #B8E3E9 · #93B1B5 · #4F7C82 · #0B2E33 (dark, generated from the Figma palette) */
html.theme-winter-chill {
  --cyan: #6b8084; --cyan-bright: #94a4a6; --blue: #B8E3E9; --blue-deep: #819fa3;
  --bg: #030d0e; --bg-2: #041113; --panel: #06191c; --panel-2: #15272a;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #dff2f5; --muted: #84979a; --muted-2: #586b6e;
  --grad-brand: linear-gradient(120deg, #97a6a9 0%, #6b8084 45%, #819fa3 100%);
  --grad-text:  linear-gradient(100deg, #94a4a6 0%, #6b8084 50%, #B8E3E9 100%);
  --shadow-glow: 0 0 0 1px rgba(107,128,132,0.25), 0 18px 50px -24px rgba(107,128,132,0.35);
}
html.theme-winter-chill ::selection { background: rgba(107,128,132,0.3); }

/* Spring energy — #89F336 · #FFFC30 · #4FE0CB · #00BF33 (light, generated from the Figma palette) */
html.theme-spring-energy {
  --cyan: #008523; --cyan-bright: #006a1c; --blue: #589c23; --blue-deep: #3f7019;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(0,67,18,0.35);
  --bg: #fffe98; --bg-2: #fffd5e; --panel: #ffffff; --panel-2: #fffec5;
  --line: rgba(0,67,18,0.28); --line-2: rgba(0,67,18,0.48);
  --ink: #004312; --muted: #008624; --muted-2: #38a154;
  --grad-brand: linear-gradient(120deg, #00BF33 0%, #008523 45%, #3f7019 100%);
  --grad-text:  linear-gradient(100deg, #006a1c 0%, #008523 50%, #589c23 100%);
  --shadow-glow: 0 0 0 1px rgba(0,133,35,0.25), 0 18px 50px -24px rgba(0,133,35,0.35);
}
html.theme-spring-energy ::selection { background: rgba(0,133,35,0.22); }
html.theme-spring-energy * { scrollbar-color: #b3b8bf transparent; }
html.theme-spring-energy *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-spring-energy *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Pumpkin spice season — #BE5103 · #8C4C1F · #544823 · #332216 (dark, generated from the Figma palette) */
html.theme-pumpkin-spice-season {
  --cyan: #c35f17; --cyan-bright: #d48c58; --blue: #8C4C1F; --blue-deep: #623516;
  --bg: #0e0a06; --bg-2: #130d08; --panel: #1c130c; --panel-2: #2a211b;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #e2b18e; --muted: #8f6f57; --muted-2: #674f3d;
  --grad-brand: linear-gradient(120deg, #d58f5d 0%, #c35f17 45%, #623516 100%);
  --grad-text:  linear-gradient(100deg, #d48c58 0%, #c35f17 50%, #8C4C1F 100%);
  --shadow-glow: 0 0 0 1px rgba(195,95,23,0.25), 0 18px 50px -24px rgba(195,95,23,0.35);
}
html.theme-pumpkin-spice-season ::selection { background: rgba(195,95,23,0.3); }

/* Island oasis — #CCFF00 · #FFF37E · #9DE05A · #FFAE25 (light, generated from the Figma palette) */
html.theme-island-oasis {
  --cyan: #9a6916; --cyan-bright: #7b5412; --blue: #7b9a00; --blue-deep: #596f00;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(89,61,13,0.35);
  --bg: #fff9bf; --bg-2: #fff69a; --panel: #ffffff; --panel-2: #fffcdb;
  --line: rgba(89,61,13,0.28); --line-2: rgba(89,61,13,0.48);
  --ink: #593d0d; --muted: #9a6916; --muted-2: #b08a49;
  --grad-brand: linear-gradient(120deg, #FFAE25 0%, #9a6916 45%, #596f00 100%);
  --grad-text:  linear-gradient(100deg, #7b5412 0%, #9a6916 50%, #7b9a00 100%);
  --shadow-glow: 0 0 0 1px rgba(154,105,22,0.25), 0 18px 50px -24px rgba(154,105,22,0.35);
}
html.theme-island-oasis ::selection { background: rgba(154,105,22,0.22); }
html.theme-island-oasis * { scrollbar-color: #b3b8bf transparent; }
html.theme-island-oasis *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-island-oasis *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Autumn orchard — #8E4585 · #DAA520 · #2E6F40 · #660033 (dark, generated from the Figma palette) */
html.theme-autumn-orchard {
  --cyan: #DAA520; --cyan-bright: #e4be5e; --blue: #660033; --blue-deep: #470024;
  --bg: #1c000e; --bg-2: #260013; --panel: #38001c; --panel-2: #440f2a;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #eed79b; --muted: #a27d66; --muted-2: #7d524c;
  --grad-brand: linear-gradient(120deg, #e5c063 0%, #DAA520 45%, #470024 100%);
  --grad-text:  linear-gradient(100deg, #e4be5e 0%, #DAA520 50%, #660033 100%);
  --shadow-glow: 0 0 0 1px rgba(218,165,32,0.25), 0 18px 50px -24px rgba(218,165,32,0.35);
}
html.theme-autumn-orchard ::selection { background: rgba(218,165,32,0.3); }

/* Tropical rainforest — #50C878 · #7E8C54 · #4F7942 · #71AA34 (dark, generated from the Figma palette) */
html.theme-tropical-rainforest {
  --cyan: #7cb144; --cyan-bright: #a1c778; --blue: #50C878; --blue-deep: #388c54;
  --bg: #162212; --bg-2: #1d2e18; --panel: #2b4324; --panel-2: #384e31;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #e0f5e6; --muted: #94aa95; --muted-2: #70876e;
  --grad-brand: linear-gradient(120deg, #a3c87c 0%, #7cb144 45%, #388c54 100%);
  --grad-text:  linear-gradient(100deg, #a1c778 0%, #7cb144 50%, #50C878 100%);
  --shadow-glow: 0 0 0 1px rgba(124,177,68,0.25), 0 18px 50px -24px rgba(124,177,68,0.35);
}
html.theme-tropical-rainforest ::selection { background: rgba(124,177,68,0.3); }

/* Wildflower meadow — #FBF9E7 · #FDB813 · #82C8E5 · #7CFC00 (light, generated from the Figma palette) */
html.theme-wildflower-meadow {
  --cyan: #996f0c; --cyan-bright: #7a590a; --blue: #4a9900; --blue-deep: #356e00;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(43,65,74,0.35);
  --bg: #fdfcf3; --bg-2: #fcfaec; --panel: #ffffff; --panel-2: #fefdf8;
  --line: rgba(43,65,74,0.28); --line-2: rgba(43,65,74,0.48);
  --ink: #2b414a; --muted: #4f798b; --muted-2: #7696a5;
  --grad-brand: linear-gradient(120deg, #FDB813 0%, #996f0c 45%, #356e00 100%);
  --grad-text:  linear-gradient(100deg, #7a590a 0%, #996f0c 50%, #4a9900 100%);
  --shadow-glow: 0 0 0 1px rgba(153,111,12,0.25), 0 18px 50px -24px rgba(153,111,12,0.35);
}
html.theme-wildflower-meadow ::selection { background: rgba(153,111,12,0.22); }
html.theme-wildflower-meadow * { scrollbar-color: #b3b8bf transparent; }
html.theme-wildflower-meadow *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-wildflower-meadow *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Harvest moon — #800020 · #FFCE1B · #A52A2A · #BE5103 (dark, generated from the Figma palette) */
html.theme-harvest-moon {
  --cyan: #FFCE1B; --cyan-bright: #ffdc5b; --blue: #BE5103; --blue-deep: #853902;
  --bg: #230009; --bg-2: #30000c; --panel: #460012; --panel-2: #510f20;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.2);
  --ink: #ffe998; --muted: #b18760; --muted-2: #8c5945;
  --grad-brand: linear-gradient(120deg, #ffdd5f 0%, #FFCE1B 45%, #853902 100%);
  --grad-text:  linear-gradient(100deg, #ffdc5b 0%, #FFCE1B 50%, #BE5103 100%);
  --shadow-glow: 0 0 0 1px rgba(255,206,27,0.25), 0 18px 50px -24px rgba(255,206,27,0.35);
}
html.theme-harvest-moon ::selection { background: rgba(255,206,27,0.3); }

/* Winter berry — #8E0A1E · #2E6F40 · #ADD8E6 · #FFFFFF (light, generated from the Figma palette) */
html.theme-winter-berry {
  --cyan: #8E0A1E; --cyan-bright: #720818; --blue: #2E6F40; --blue-deep: #21502e;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(50,4,11,0.35);
  --bg: #ffffff; --bg-2: #ffffff; --panel: #ffffff; --panel-2: #ffffff;
  --line: rgba(50,4,11,0.28); --line-2: rgba(50,4,11,0.48);
  --ink: #32040b; --muted: #630715; --muted-2: #853e48;
  --grad-brand: linear-gradient(120deg, #2E6F40 0%, #8E0A1E 45%, #21502e 100%);
  --grad-text:  linear-gradient(100deg, #720818 0%, #8E0A1E 50%, #2E6F40 100%);
  --shadow-glow: 0 0 0 1px rgba(142,10,30,0.25), 0 18px 50px -24px rgba(142,10,30,0.35);
}
html.theme-winter-berry ::selection { background: rgba(142,10,30,0.22); }
html.theme-winter-berry * { scrollbar-color: #b3b8bf transparent; }
html.theme-winter-berry *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-winter-berry *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Summer breeze — #FFEB3B · #F88379 · #82C8E5 · #E6D8C4 (light, generated from the Figma palette) */
html.theme-summer-breeze {
  --cyan: #ad5b55; --cyan-bright: #8a4944; --blue: #6296ab; --blue-deep: #476c7b;
  --red: #c62828; --red-soft: #d84315;
  --ring: 0 0 0 1px var(--line);
  --shadow: 0 12px 30px -18px rgba(87,46,42,0.35);
  --bg: #fff59d; --bg-2: #ffef66; --panel: #ffffff; --panel-2: #fff9c8;
  --line: rgba(87,46,42,0.28); --line-2: rgba(87,46,42,0.48);
  --ink: #572e2a; --muted: #ae5c55; --muted-2: #c0807a;
  --grad-brand: linear-gradient(120deg, #F88379 0%, #ad5b55 45%, #476c7b 100%);
  --grad-text:  linear-gradient(100deg, #8a4944 0%, #ad5b55 50%, #6296ab 100%);
  --shadow-glow: 0 0 0 1px rgba(173,91,85,0.25), 0 18px 50px -24px rgba(173,91,85,0.35);
}
html.theme-summer-breeze ::selection { background: rgba(173,91,85,0.22); }
html.theme-summer-breeze * { scrollbar-color: #b3b8bf transparent; }
html.theme-summer-breeze *::-webkit-scrollbar-thumb { background: #b3b8bf; }
html.theme-summer-breeze *::-webkit-scrollbar-thumb:hover { background: #8f97a1; }

/* Incoming-call popup: the CAMPAIGN is the first thing an agent must read (feedback #217) */
.ic-camp {
  font-size: 1.45rem; font-weight: 800; letter-spacing: .3px;
  color: var(--cyan-bright); margin: 2px 0 6px; text-transform: uppercase;
}
.ic-camp.unknown { color: var(--muted); font-weight: 600; text-transform: none; font-size: 1.05rem; }

/* Feedback #234 + follow-up 2026-08-25: display:none REMOVED the week-number cells and slid the
   day numbers out from under their weekday headers. visibility:hidden blanks the numbers while
   keeping the cells' space, so the grid stays aligned. */
.dxbl-calendar-week-number, th.dxbl-calendar-week-number, td.dxbl-calendar-week-number { visibility: hidden !important; }

/* ── Brutus Tach — the call-floor RPM gauge (user mock 2026-08-27) ─────────────── */
.tach-scope{ position:relative; color:#e9edf3; font-family:'Barlow','Segoe UI',system-ui,sans-serif; overflow:hidden; }
/* John Chenault 2026-09-10: /rpm used to be position:fixed over the WHOLE app, so the nav rail was
   covered and the only way off the page was the browser's back arrow. It is now an ordinary panel
   that sits inside the layout — the rail stays visible and clickable — and the ⛶ button in its own
   header puts it back over the whole screen for a TV. Height is a box, not the viewport, so the
   dial is sized off its container (see .tach-page svg.tach-dial) instead of 84vh. */
.tach-page{ position:relative; display:flex; flex-direction:column; overflow:hidden;
  /* The panel is always dark, whatever the app theme is. These two came free from .tach-scope while
     the outer div carried it; without them the header takes body colour and disappears on the light
     themes (--ink is near-black there, and so is this gradient). */
  color:#e9edf3; font-family:'Barlow','Segoe UI',system-ui,sans-serif;
  height:calc(100vh - 210px); min-height:460px; border:1px solid #1b222d; border-radius:14px;
  background: radial-gradient(120% 90% at 50% 8%, #131a24 0%, #0b0e12 55%, #07090c 100%); }
.tach-page.is-full{ position:fixed; inset:0; z-index:900; height:auto; min-height:0; border:0; border-radius:0; }
/* The gauge lives in its own child element: rpm-tach.js REPLACES the innerHTML of the element it is
   given, so the header row has to sit outside it or it gets wiped on the first paint. */
.tach-page .tach-body{ flex:1; min-height:0; display:flex; flex-direction:column; }
.tach-page .tach-hd{ display:flex; align-items:center; gap:1.2vmin; padding:1.6vmin 2.4vmin 0; flex:0 0 auto; }
/* NOT ".mark": the DevExpress Bootstrap build (blazing-dark.bs5.min.css) ships Bootstrap's .mark utility,
   which paints a pale peach highlight box (--bs-highlight-bg #fee4d1) behind it — the near-white TACH vanished. */
.tach-page .tach-hd .tach-mark{ font-family:'Chakra Petch','Arial Narrow',sans-serif; font-weight:700; font-size:2.6vmin; letter-spacing:.14em; text-transform:uppercase; }
.tach-page .tach-hd .tach-mark b{ color:#ffb01f; }
.tach-page .tach-hd .sub{ font-size:1.7vmin; color:#5c6675; letter-spacing:.28em; text-transform:uppercase; padding-top:.4vmin; }
.tach-page .tach-hd .spacer{ flex:1; }
.tach-page .tach-hd .clock{ font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:2.4vmin; color:#949eae; font-variant-numeric:tabular-nums; }
.tach-page .tach-hd a, .tach-page .tach-hd .hdbtn{ color:#5c6675; text-decoration:none; font-size:1.8vmin; }
/* A real <button>, so Enter and Space both work and neither scrolls the page — styled to look like
   the link it replaced. */
.tach-page .tach-hd .hdbtn{ background:none; border:0; padding:0; cursor:pointer; font-family:inherit; letter-spacing:inherit; }
.tach-page .tach-hd .hdbtn:hover{ color:#e9edf3; }
.tach-scope .tach-main{ flex:1; display:flex; align-items:center; justify-content:center; gap:2.4vmin; padding:0 2.4vmin; min-height:0; }
/* #498 (Adam 2026-10-09 "it still does not show every name"): the column used to be content-height,
   centred by .tach-main, and clipped at BOTH ends past ~7 names on the TV. align-self:stretch gives it
   the panel's full height — a definite height is what lets a column flexbox wrap at all; under the
   centred .tach-main alone it is content-height and flex-wrap does nothing — so it now continues into
   a second/third column instead of cutting Andrew… off the top and Tim/William… off the bottom. */
.tach-scope .tach-names{ display:flex; flex-direction:column; flex-wrap:wrap; align-content:flex-start; align-self:stretch;
  gap:.9vmin; flex:0 0 auto; max-width:24vw; max-height:100%; overflow:hidden; }
.tach-scope .tach-name{ font-family:'Chakra Petch','Arial Narrow',sans-serif; font-weight:600; font-size:2.2vmin;
  color:#ffb01f; letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:rgba(18,22,29,.7); border:1px solid #212a37; border-radius:.6vmin; padding:.7vmin 1.3vmin; }
.tach-scope.redline .tach-name{ color:#ff5a50; border-color:rgba(255,59,48,.4); }
.tach-scope .tach-dialwrap{ position:relative; height:100%; display:flex; align-items:center; min-width:0; }
/* (Must come AFTER the .tach-scope rule above — same specificity, later wins.) */
.tach-page .tach-dialwrap{ flex:1 1 auto; justify-content:center; }
/* Fills whatever height the panel gives it (max-width keeps a wide, short window from pushing the
   dial off the side — the SVG just letterboxes inside its viewBox, it never distorts). */
.tach-page svg.tach-dial{ height:100%; max-height:100%; width:auto; max-width:100%; display:block; filter:drop-shadow(0 0 3vmin rgba(0,0,0,.55)); }
/* #498: when the names wrap into a third column the dial yields width (max-width) instead of being
   clipped by .tach-scope's overflow:hidden — the SVG letterboxes inside its viewBox, it never distorts. */
.tach-embed .tach-dialwrap{ flex:1 1 auto; justify-content:center; }
.tach-embed svg.tach-dial{ height:100%; width:auto; max-width:100%; display:block; }
.tach-scope.redline svg.tach-dial{ filter:drop-shadow(0 0 3.2vmin rgba(255,59,48,.45)); }
.tach-scope .tach-side{ display:flex; flex-direction:column; gap:1.6vmin; width:28vw; max-width:32rem; flex:0 0 auto; }
/* On the page the tile column used to be 28vw of the WHOLE screen; inside a panel that ate a third
   of the width and squeezed the dial, so it is now a share of the panel. (Must come AFTER the
   .tach-scope rule above — same specificity, later wins.) */
.tach-page .tach-side{ width:30%; }
.tach-scope .tach-tile{ background:linear-gradient(180deg, rgba(30,38,50,.55), rgba(15,19,26,.85));
  border:1px solid #212a37; border-radius:1vmin; padding:1.7vmin 2.2vmin 1.9vmin; }
.tach-scope .tach-tile .lbl{ font-size:1.7vmin; letter-spacing:.3em; text-transform:uppercase; color:#5c6675; font-weight:600; margin-bottom:.7vmin; }
.tach-scope .tach-tile .val{ font-family:'Chakra Petch',sans-serif; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.tach-scope .tach-tile .note{ font-size:1.7vmin; color:#949eae; margin-top:.8vmin; }
.tach-scope .tach-tile.oncall .val{ font-size:9vmin; color:#ffb01f; text-shadow:0 0 2.4vmin rgba(255,176,31,.35); }
.tach-scope .tach-tile.oncall .val small{ font-size:3.2vmin; color:#5c6675; font-weight:600; }
.tach-scope.redline .tach-tile.oncall .val{ color:#ff3b30; text-shadow:0 0 2.6vmin rgba(255,59,48,.5); }
.tach-scope .row2{ display:grid; grid-template-columns:1fr 1fr; gap:1.6vmin; }
.tach-scope .tach-tile .val.mid{ font-size:4.6vmin; color:#e9edf3; }
.tach-scope .tach-tile .val.mid small.pct{ font-size:2.2vmin; color:#5c6675; }
.tach-scope .meter{ height:1.1vmin; border-radius:.6vmin; background:#1b222d; margin-top:1.2vmin; overflow:hidden; }
.tach-scope .meter i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,#ff8a00,#ffb01f); border-radius:.6vmin; transition:width .6s cubic-bezier(.2,.7,.3,1); }
.tach-scope.redline .meter i{ background:linear-gradient(90deg,#c81e14,#ff3b30); }
.tach-scope .tach-ft{ flex:0 0 auto; display:flex; align-items:center; padding:0 2.4vmin 1.8vmin; gap:2vmin; }
.tach-scope .tach-status{ font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:4.2vmin; letter-spacing:.22em; text-transform:uppercase; color:#949eae; }
.tach-scope .tach-status.s-run{ color:#ffb01f; text-shadow:0 0 2vmin rgba(255,176,31,.3); }
.tach-scope .tach-status.s-red{ color:#ff3b30; text-shadow:0 0 2.4vmin rgba(255,59,48,.55); }
.tach-scope .tach-ft .spacer{ flex:1; }
.tach-scope .tach-ft .quip{ font-size:2vmin; color:#5c6675; text-align:right; }
.tach-scope .tach-flash{ position:absolute; inset:0; pointer-events:none; opacity:0; box-shadow:inset 0 0 18vmin rgba(255,59,48,.55); }
.tach-scope.redline .tach-flash{ animation:tachflash 1.1s ease-in-out infinite; }
@keyframes tachflash{ 0%,100%{opacity:.25} 50%{opacity:.9} }
.tach-scope.redline .tach-status.s-red{ animation:tachblink 1.1s steps(2,jump-none) infinite; }
@keyframes tachblink{ 0%,100%{opacity:1} 50%{opacity:.55} }
@media (prefers-reduced-motion: reduce){ .tach-scope.redline .tach-flash, .tach-scope.redline .tach-status.s-red{ animation:none; } .tach-scope.redline .tach-flash{ opacity:.5; } }
/* embedded (wallboard corner): container decides the height, names shrink.
   #498: NO row cap — the names column takes the panel's full height (align-items:stretch) and wraps
   into more columns; the tighter row (~28px pitch) fits ~10 names per column in the 26vh box at 1080p,
   and BoardView switches to "First L." past 9 names so the dial keeps its width. Measured on Chromium
   152 at a 516x281 panel: 6/8/10/15 names all fully visible (dial 281px wide to 10 names, 214px at 15
   full names — compact names give it back).
   Fallback if the TV's older engine does not widen a column-wrap flexbox (second column invisible):
     .tach-embed .tach-names{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(auto-fill,1.6rem); grid-auto-columns:max-content; align-content:start; }
     .tach-embed .tach-name{ height:1.6rem; line-height:1.2rem; box-sizing:border-box; }
   — also measured 15/15. */
.tach-embed{ display:flex; }
.tach-embed .tach-main{ padding:0; gap:1vmin; align-items:stretch; }
.tach-embed .tach-names{ max-width:none; height:100%; max-height:100%; flex-wrap:wrap; align-content:flex-start; gap:.5vmin; }
.tach-embed .tach-name{ font-size:.8rem; padding:.15rem .5rem; border-radius:.4rem; }

/* ── Dossier layout (Campaigns / Employees, Brian 2026-09-09 "everything is crammed"): the /leads
   pattern — a full-width sortable list, click a row, the record opens in a wide overlay instead of
   a 520px side panel. .edit-panel is untouched (7 other pages still use it). ── */
.list-panel .lb-table tbody tr { cursor: pointer; }
.list-panel .lb-table tbody tr:hover { background: rgba(255,255,255,.045); }
.list-panel .lb-table td { padding: 8px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.dossier-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(4,8,16,.72); overflow-y: auto; padding: 2vh 2vw; }
/* width:100%, not 96vw (2026-09-16): the overlay already pads 2vw each side, so 96vw + 4vw of padding + the vertical
   scrollbar overflowed by about 20px and every dossier scrolled sideways at 1366 / 1440 / 1536 wide. 100% is the
   overlay's content box, which already excludes both. Settings overrides this inline and is unaffected. */
.dossier { width: 100%; max-width: 1500px; min-height: 92vh; margin: 0 auto; cursor: default; }
.dossier-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.dossier-head h2 { margin: 0; font-size: 1.35rem; }
.dossier-head .spacer { flex: 1; }
.dossier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-items: start; }
.dossier-grid.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1100px) { .dossier-grid, .dossier-grid.three { grid-template-columns: 1fr; } }
.dossier h4 { margin: 18px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line-2);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.dossier h4 .muted { text-transform: none; letter-spacing: 0; }
.dossier .field-row { flex-wrap: wrap; }
.dossier .field-row .field { min-width: 150px; }
.dossier-foot { position: sticky; bottom: 0; background: var(--panel); padding: 12px 0 0; margin-top: 18px;
  border-top: 1px solid var(--line-2); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* ── Controller sale dossier (Brian 2026-09-16) ──────────────────────────────────────────────────
   TOKEN-ONLY on purpose: CRM7 themes by html.theme-* class and no theme overrides any dossier class, so
   these follow all ~90 themes with no per-theme block. A hardcoded colour here would break every one.
   .dossier-stick - .dossier-head is not sticky (only .dossier-foot is), but the Controller's status buttons
   must never scroll away (standing directive), so head + actions + tabs ride in ONE sticky band. It is
   OPAQUE (var(--panel)) because .panel paints a GRADIENT and content must not show through as it scrolls;
   the negative margin covers .panel's 18px padding so rows cannot peek past the edges.
   .sale-actions - the eight status buttons were a 2-column grid four rows tall; one wrapping row keeps the
   band short enough to stay sticky without eating the screen. */
/* top:-2vh, not 0: .dossier-overlay has 2vh padding, and a sticky element stops at the scroll container's PADDING
   edge - at 0 a 2vh strip of scrolled content stayed visible above the band. -2vh pins it flush to the top; its
   resting position is unchanged. */
.dossier-stick { position: sticky; top: -2vh; z-index: 3; background: var(--panel);
  margin: -18px -18px 0; padding: 18px 18px 0; border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--line-2); }
.dossier-stick .emp-tabs { margin: 12px 0 0; border-bottom: none; }
.sale-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; margin-top: 12px; }
.sale-actions .btn-dispo { padding: 9px 12px; }
.sale-actions .field { margin: 0; flex: 1 1 220px; max-width: 360px; }
/* An open sale must never hide an INCOMING CALL (review 2026-09-16). .shell-topbar is sticky at z-index 800, which
   makes it a stacking context: the softphone's .incoming-overlay (z-index 8500) is only 8500 INSIDE that 800, so any
   .dossier-overlay (900) painted over the Answer / Decline alert. While that alert exists, lift the whole topbar
   above every dossier. Global on purpose - the same covering applied on /campaigns, /employees and /leads. */
.shell-topbar:has(.incoming-overlay) { z-index: 8500; }

/* ── 🚀 Release log (/deploy → Releases, Brian 2026-09-11) ──────────── */
.rl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.rl-month { margin-bottom: 10px; padding-top: 6px; padding-bottom: 6px; }
.rl-toggle { display: flex; align-items: baseline; gap: 8px; width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--line-2); color: var(--ink); font: inherit; font-weight: 700; padding: 8px 4px; cursor: pointer; text-align: left; }
.rl-toggle:hover { color: var(--cyan-bright); }
.rl-toggle.rl-week { font-weight: 600; padding-left: 20px; border-bottom-style: dashed; }
.rl-count { font-weight: 400; font-size: .85rem; }
.rl-day { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; margin: 12px 0 6px 20px; }
.rl-card { border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 14px; margin: 0 0 8px 20px; }
.rl-card.rl-live { border-color: rgba(80,220,140,.6); box-shadow: inset 0 0 0 1px rgba(80,220,140,.25); }
.rl-card.rl-op { border-style: dashed; }
.rl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.rl-ver { font-size: 1.05rem; }
.rl-title { font-weight: 600; }
.rl-muted { color: var(--muted); }
.rl-items { margin: 6px 0 0; padding-left: 18px; }
.rl-items li { margin: 3px 0; line-height: 1.45; }
.rl-items .chip { margin-left: 6px; font-size: .72rem; }
.rl-area { font-weight: 600; margin-right: 6px; }
.rl-area::after { content: " —"; font-weight: 400; color: var(--muted); }
.rl-via { color: var(--muted); font-size: .76rem; margin-left: 4px; }
.rl-notes { color: var(--muted); font-size: .88rem; margin-top: 6px; }