@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600&display=swap');
/* Premium themes (Eduardo 2026-10-23). Each one is a skin over the existing dark or light base: the head script sets
   <html data-theme="dark|light" data-skin="…">, so every component rule written for dark / light keeps working and the
   skin only remaps the colour roles (canvas, surfaces, text, action, edges, ambient light). Status colours (OPEN red,
   CLEAR green, …) never change: colour = status across the portal.
   Selectors carry two attributes so they beat the inline :root / :root[data-theme="light"] blocks whatever the order.
   Contrast (WCAG): text on canvas 14.8–18.4:1, muted text 6–11:1, white on filled buttons 5.6–6.8:1. */

/* ---------- Rosé Noir — owner only: black with a plum undertone, rose pink action, champagne gold edges ---------- */
:root[data-theme][data-skin="rose"]{
  --navy:#0B0709; --dark-blue:#1E1219; --crystal:#D9BFCB; --white:#FBF3F6; --turquoise:#F0D79A;
  --bg:#0B0709; --surface:#150D12; --surface-2:#1E1219; --surface-3:#2A1822; --border:#3A2330;
  --text:#FBF3F6; --text-muted:#D9BFCB;
  --accent:#F27BB1; --accent-fill:#B8336F; --accent-ink:#1A0610;
  --menu-bg:#120A0F; --accent-tint:rgba(242,123,177,0.15);
  --glass-bg:rgba(242,123,177,0.07);
  --glass-shadow:0 10px 34px rgba(0,0,0,0.55), inset 0 1px 0 rgba(240,215,154,0.18);
  --ambient-bg:
    radial-gradient(680px circle at 10% 10%, rgba(242,123,177,0.20), transparent 60%),
    radial-gradient(560px circle at 92% 6%, rgba(240,215,154,0.12), transparent 60%),
    radial-gradient(760px circle at 50% 104%, rgba(120,30,72,0.30), transparent 62%);
  --theme-sel:rgba(242,123,177,0.34);
  /* rose gold + champagne, no dark (brown-looking) gold over black (Eduardo 10/23) */
  --gold:#F0D79A; --gold-hi:#FFF4D6; --gold-lo:#E9A9BF; --rose-gold:#F2B8C6;
  --border:#4A2A3B;                               /* plum hairlines */
  --glass-border:rgba(240,215,154,0.42);
}
/* Rosé Noir gold (Eduardo 10/23 "golden shining borders"; polished 10/23 "all messed up"): main panels get one still
   champagne-to-rose-gold hairline (brighter on the top-left edge, like light on metal) that warms on hover; inputs and
   menus get gold hairlines, the top / bottom bars a gold edge. The Team sheet keeps its own drawn frame, no ring. */
:root[data-theme][data-skin="rose"] :is(.overview-card, .dashboard-card, .tmw-bar){ position:relative; border-color:transparent; box-shadow:0 14px 34px rgba(0,0,0,0.42), 0 2px 6px rgba(0,0,0,0.3); }
:root[data-theme][data-skin="rose"] :is(.overview-card, .dashboard-card, .tmw-bar)::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; z-index:0; opacity:.72; transition:opacity .25s ease-out;
  background:linear-gradient(150deg, var(--gold-hi), var(--gold) 22%, rgba(242,184,198,0.55) 55%, rgba(240,215,154,0.35) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
:root[data-theme][data-skin="rose"] :is(.overview-card, .dashboard-card, .tmw-bar):hover::before{ opacity:1; }
/* the Team sheet in Rosé: plum paper, champagne ink for the frame and lot tags, rose hairlines for the grid */
:root[data-theme][data-skin="rose"] :is(.team-wall, .chat-pop){ --sheet-paper:#170E14; --sheet-ink:rgba(240,215,154,0.78); --sheet-ink-soft:rgba(242,184,198,0.26);
  --sheet-line:rgba(242,123,177,0.045); --sheet-line2:rgba(242,123,177,0.09); }
:root[data-theme][data-skin="rose"] .bp-art{ opacity:.1; }
:root[data-theme][data-skin="rose"] header{ border-bottom:1px solid rgba(240,215,154,0.5); box-shadow:0 1px 18px rgba(242,184,198,0.14); }
:root[data-theme][data-skin="rose"] .tabbar{ border-top-color:rgba(240,215,154,0.5); }
:root[data-theme][data-skin="rose"] :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]){ border-color:rgba(242,184,198,0.34); }
:root[data-theme][data-skin="rose"] :is(.tmw-pop, .theme-pop, .staff-bell-panel){ border-color:rgba(240,215,154,0.55); box-shadow:0 18px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(242,184,198,0.16); }
:root[data-theme][data-skin="rose"] .theme-opt[aria-checked="true"]{ border-color:var(--gold); }
/* Rosé Noir: more gold, more shine (Eduardo 10/23 "this should be gold"): switches, ticks and the active tab are polished
   gold metal with a slow light passing over it. */
:root[data-theme][data-skin="rose"]{
  --gold-metal:linear-gradient(115deg, #8A6A2E 0%, #C8962E 18%, #F0D79A 34%, #FFF4D6 46%, #F0D79A 56%, #D9A94A 74%, #8A6A2E 100%); }
/* Rosé gold is still (Eduardo 10/23 "remove that moving light"): no looping shine anywhere; the metal gradient rests at
   its brightest band */
@keyframes goldShine{ 0%, 100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
:root[data-theme][data-skin="rose"] .ios-toggle input:checked + .ios-toggle-track,
:root[data-theme][data-skin="rose"] :is(.tg-group-check, .tg-row-check):checked{
  background:var(--gold-metal); background-size:260% 100%; background-position:46% 50%; border-color:#E2B65A;
  box-shadow:inset 0 1px 0 rgba(255,250,235,.55), inset 0 -1px 0 rgba(90,60,10,.35), 0 0 10px rgba(240,215,154,.28); }
:root[data-theme][data-skin="rose"] :is(.tg-group-check, .tg-row-check):indeterminate{ background:rgba(226,182,90,.45); }
:root[data-theme][data-skin="rose"] .ios-toggle input:checked + .ios-toggle-track::before,
:root[data-theme][data-skin="rose"] :is(.tg-group-check, .tg-row-check):checked::after{ background:linear-gradient(180deg, #FFFDF6, #F3E6C8); box-shadow:0 1px 3px rgba(60,35,5,.45); }
:root[data-theme][data-skin="rose"] input:is([type="checkbox"], [type="radio"]){ accent-color:#D9A94A; }
:root[data-theme][data-skin="rose"] .m-tab.active::before{ background:var(--gold-metal); background-size:260% 100%; background-position:46% 50%; box-shadow:0 0 12px rgba(240,215,154,.55); }
/* Rosé Noir gold, round two (Eduardo 10/23 "add them, nothing too forced"): a slow gold line under the top bar, gold
   rings on your picture and the chat icon, gold edges on count badges, gold for what is selected (filter chips, the open
   Waiting on, today on the calendar), gold progress, a slim gold scrollbar, and one quiet light pass over the dashboard
   tiles and the Team sheet when they open (once, not looping). */
:root[data-theme][data-skin="rose"] header::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
  background:var(--gold-metal); background-size:260% 100%; background-position:46% 50%; opacity:.9; }
:root[data-theme][data-skin="rose"] .user-chip .bs-av{ box-shadow:0 0 0 1.5px #D9A94A, 0 0 10px rgba(240,215,154,.28); }
:root[data-theme][data-skin="rose"] .bubble-ic{ border-color:rgba(226,182,90,.62); }
:root[data-theme][data-skin="rose"] :is(.staff-bell-count, .chat-badge, .tab .tab-badge, .m-tab .m-tab-badge){ box-shadow:0 0 0 1.5px #E2B65A, 0 0 8px rgba(240,215,154,.25); }
:root[data-theme][data-skin="rose"] :is(.tmw-chip, .tmw-btn.active, .tmw-held-toggle[aria-expanded="true"], .filter-chip.active){ border-color:#D9A94A; }
:root[data-theme][data-skin="rose"] .filter-chip.active{ background:var(--gold-metal); background-size:260% 100%; background-position:46% 50%; color:#2A1A06; box-shadow:0 2px 10px rgba(240,215,154,.3); }
:root[data-theme][data-skin="rose"] .cal-day.today span{ background:var(--gold-metal); background-size:260% 100%; background-position:46% 50%; color:#2A1A06; box-shadow:0 0 8px rgba(240,215,154,.35); }
:root[data-theme][data-skin="rose"] :is(.tr-bar i, .queue-progress i){ background:var(--gold-metal); background-size:260% 100%; background-position:46% 50%; }
:root[data-theme][data-skin="rose"] *{ scrollbar-color:rgba(217,169,74,.55) transparent; }
:root[data-theme][data-skin="rose"] ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, #F0D79A, #C8962E); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
:root[data-theme][data-skin="rose"] .team-wall{ --sheet-ink:rgba(240,215,154,.9); }
@media (prefers-reduced-motion: reduce){ :root[data-theme][data-skin="rose"] :is(header, .dash-stat, .stat-tile, .sheet)::after, :root[data-theme][data-skin="rose"] :is(.tr-bar i, .queue-progress i){ animation:none; }
  :root[data-theme][data-skin="rose"] :is(.dash-stat, .stat-tile, .sheet)::after{ display:none; } }
@media (prefers-reduced-motion: reduce){ :root[data-theme][data-skin="rose"] :is(.ios-toggle-track, .tg-group-check, .tg-row-check){ animation:none !important; }
  :root[data-theme][data-skin="rose"] .m-tab.active::before{ animation:none; } }
@media (prefers-reduced-motion: reduce){ :root[data-theme][data-skin="rose"] :is(.overview-card, .dashboard-card, .tmw-bar)::before{ transition:none; } }

/* ---------- Carbon Volt — graphite black, one volt-lime signal ---------- */
:root[data-theme][data-skin="volt"]{
  --navy:#0C0D0E; --dark-blue:#1B1E21; --crystal:#AEB5BD; --white:#F3F5F7; --turquoise:#C8F04A;
  --bg:#0C0D0E; --surface:#141618; --surface-2:#1B1E21; --surface-3:#24282C; --border:#2E3338;
  --text:#F3F5F7; --text-muted:#AEB5BD;
  --accent:#C8F04A; --accent-fill:#4F6B0A; --accent-ink:#0C0D0E;
  --menu-bg:#111315; --accent-tint:rgba(200,240,74,0.12);
  --glass-bg:rgba(255,255,255,0.035);
  --glass-border:rgba(255,255,255,0.11);
  --glass-shadow:0 10px 30px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
  --ambient-bg:
    radial-gradient(620px circle at 88% 8%, rgba(200,240,74,0.09), transparent 60%),
    radial-gradient(780px circle at 8% 100%, rgba(140,150,160,0.10), transparent 62%);
  --theme-sel:rgba(200,240,74,0.30);
}

:root[data-theme][data-skin="acid"]{
  --navy:#080808; --dark-blue:#151613; --crystal:#C4C7B2; --white:#F6F7EE; --turquoise:#DCEB15;
  --bg:#080808; --surface:#111210; --surface-2:#181915; --surface-3:#21231C; --border:#2C2E24;
  --text:#F6F7EE; --text-muted:#C4C7B2;
  --accent:#DCEB15; --accent-fill:#6B7300; --accent-ink:#0A0A0A;
  --menu-bg:#0E0F0C; --accent-tint:rgba(220,235,21,0.13);
  --glass-bg:rgba(220,235,21,0.035);
  --glass-border:rgba(220,235,21,0.30);
  --glass-shadow:0 10px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
  --ambient-bg:
    radial-gradient(700px circle at 50% 108%, rgba(220,235,21,0.12), transparent 60%),
    radial-gradient(520px circle at 92% 4%, rgba(220,235,21,0.06), transparent 60%);
  --theme-sel:rgba(220,235,21,0.32);
}
/* Acid Yellow extras: the laptop's yellow deck = a still yellow edge on the main panels and the bars; filled actions are
   yellow with black text, like its black keys on the yellow deck */
:root[data-theme][data-skin="acid"] :is(.overview-card, .dashboard-card, .tmw-bar){ border-color:rgba(220,235,21,0.34); }
:root[data-theme][data-skin="acid"] header{ border-bottom:1px solid rgba(220,235,21,0.55); }
:root[data-theme][data-skin="acid"] .tabbar{ border-top-color:rgba(220,235,21,0.55); }
:root[data-theme][data-skin="acid"] :is(.team-send, .note-stick, .av-up, .tc-fab, .detail-action-btn.primary, .ts-opts button[aria-checked="true"], .ts-custom button, .ios-toggle input:checked + .ios-toggle-track, .tg-group-check:checked, .tg-row-check:checked){
  background:#DCEB15 !important; border-color:#DCEB15 !important; color:#0A0A0A !important; }
:root[data-theme][data-skin="acid"] .filter-chip.active{ background:#DCEB15; border-color:#DCEB15; color:#0A0A0A; box-shadow:0 2px 10px rgba(220,235,21,.3); }
:root[data-theme][data-skin="acid"] .cal-day.today span{ background:#DCEB15; color:#0A0A0A; }
:root[data-theme][data-skin="acid"] input:is([type="checkbox"], [type="radio"]){ accent-color:#DCEB15; }

/* ---------- Aurora Indigo — deep indigo night, periwinkle action, mint aurora detail ---------- */
:root[data-theme][data-skin="aurora"]{
  --navy:#080A1F; --dark-blue:#151A42; --crystal:#BFC5F2; --white:#F2F3FF; --turquoise:#5EEAD4;
  --bg:#080A1F; --surface:#0E1230; --surface-2:#151A42; --surface-3:#1D2352; --border:#2A3170;
  --text:#F2F3FF; --text-muted:#BFC5F2;
  --accent:#8C9BFF; --accent-fill:#4F57D9; --accent-ink:#080A1F;
  --menu-bg:#0B0E27; --accent-tint:rgba(140,155,255,0.16);
  --glass-bg:rgba(140,155,255,0.08);
  --glass-border:rgba(191,197,242,0.24);
  --glass-shadow:0 10px 34px rgba(2,3,18,0.6), inset 0 1px 0 rgba(191,197,242,0.10);
  --ambient-bg:
    radial-gradient(700px circle at 14% 8%, rgba(140,155,255,0.20), transparent 60%),
    radial-gradient(520px circle at 90% 12%, rgba(94,234,212,0.12), transparent 60%),
    radial-gradient(800px circle at 60% 106%, rgba(124,75,234,0.18), transparent 62%);
  --theme-sel:rgba(140,155,255,0.36);
}

/* ---------- Ivory Brass — warm light: ivory paper, brass ink (light base) ---------- */
:root[data-theme][data-skin="brass"]{
  --navy:#FFFFFF; --dark-blue:#F1E9DB; --crystal:#6A5D49; --white:#1F1A12; --turquoise:#86652A;
  --bg:#F3EDE2; --surface:#FBF8F2; --surface-2:#F1E9DB; --surface-3:#E7DCC8; --border:#D9CBB2; --border-soft:#E5DAC6;
  --text:#1F1A12; --text-muted:#6A5D49; --text-faint:rgba(106,93,73,0.7);
  --accent:#86652A; --accent-fill:#75561F; --accent-ink:#FFFFFF;
  --menu-bg:#FAF6EE; --accent-tint:rgba(134,101,42,0.13);
  --danger-tint:rgba(200,50,56,0.11); --danger-fill:#C8323A; --performed:#2F5FB8;
  --glass-bg:rgba(251,248,242,0.84); --glass-bg-strong:rgba(251,248,242,0.95);
  --glass-border:rgba(90,70,30,0.15); --glass-border-strong:rgba(90,70,30,0.26);
  --glass-shadow:0 8px 28px rgba(80,60,20,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
  --w20:rgba(90,70,30,0.022);--w30:rgba(90,70,30,0.033);--w40:rgba(90,70,30,0.044);--w45:rgba(90,70,30,0.050);--w50:rgba(90,70,30,0.055);--w60:rgba(90,70,30,0.066);--w65:rgba(90,70,30,0.072);--w70:rgba(90,70,30,0.077);--w80:rgba(90,70,30,0.088);--w90:rgba(90,70,30,0.099);--w100:rgba(90,70,30,0.110);--w120:rgba(90,70,30,0.132);--w140:rgba(90,70,30,0.154);--w150:rgba(90,70,30,0.165);--w180:rgba(90,70,30,0.198);
  --ambient-bg:
    radial-gradient(660px circle at 10% 8%, rgba(214,180,120,0.30), transparent 60%),
    radial-gradient(560px circle at 92% 6%, rgba(240,226,200,0.60), transparent 60%),
    radial-gradient(760px circle at 50% 104%, rgba(200,170,120,0.26), transparent 62%);
  --theme-sel:rgba(134,101,42,0.30);
}
:root[data-theme][data-skin="brass"] .tabbar{ background:rgba(241,233,219,0.94); border-top-color:rgba(90,70,30,0.16); box-shadow:0 -4px 18px rgba(80,60,20,0.08); }
:root[data-theme][data-skin="brass"] *{ scrollbar-color:rgba(90,70,30,0.30) transparent; }
:root[data-theme][data-skin="brass"] *::-webkit-scrollbar-thumb{ background-color:rgba(90,70,30,0.28); }
:root[data-theme][data-skin="brass"] input::placeholder,
:root[data-theme][data-skin="brass"] textarea::placeholder{ color:rgba(106,93,73,0.65); }

/* Browser surfaces follow the theme too: text selection and the caret */
:root[data-skin] ::selection{ background:var(--theme-sel); color:var(--text); }
:root[data-skin] input, :root[data-skin] textarea{ caret-color:var(--accent); }

/* ---------- theme picker (portal-shared.js mountThemePicker): opens from the header theme button ---------- */
.theme-pop{ position:fixed; z-index:3100; width:min(320px, calc(100vw - 24px)); max-height:min(560px, calc(100vh - 90px)); overflow:auto;
  background:var(--menu-bg); border:1px solid var(--border); border-radius:14px; padding:10px; color:var(--text);
  box-shadow:0 18px 50px rgba(0,0,0,0.38); display:flex; flex-direction:column; gap:4px; font-size:13px;
  animation:themePopIn .22s cubic-bezier(.2,.9,.3,1) both; }
@keyframes themePopIn{ from{ opacity:0; transform:translateY(-6px) scale(.98); } to{ opacity:1; transform:none; } }
.theme-pop-head{ display:flex; justify-content:space-between; align-items:baseline; padding:4px 6px 8px; }
.theme-pop-head b{ font-size:13px; }
.theme-pop-head + .theme-pop-head, .style-seg + .theme-pop-head{ margin-top:6px; }
/* Style: two cards side by side, each with a tiny preview of its material */
.style-seg{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:0 2px 6px; }
.style-opt{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:8px; border-radius:10px; border:1px solid var(--border); background:transparent;
  color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.style-opt:hover{ background:var(--w60, rgba(255,255,255,.04)); }
.style-opt[aria-checked="true"]{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.style-opt b{ font-size:12.5px; }
.style-opt small{ font-size:10.5px; color:var(--text-muted); line-height:1.3; }
.style-pv{ position:relative; width:100%; height:34px; border-radius:7px; margin-bottom:4px; overflow:hidden; background:var(--bg); }
.style-pv i{ position:absolute; border-radius:4px; }
.style-pv i:nth-child(1){ left:6px; top:6px; width:44%; height:22px; }
.style-pv i:nth-child(2){ right:6px; top:6px; width:36%; height:9px; }
.style-pv i:nth-child(3){ right:6px; top:19px; width:24%; height:9px; background:var(--accent); }
.style-original .style-pv{ background:radial-gradient(60px 40px at 20% 10%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%), var(--bg); }
.style-original .style-pv i:nth-child(1), .style-original .style-pv i:nth-child(2){ background:color-mix(in srgb, var(--accent) 14%, rgba(255,255,255,.06)); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); box-shadow:0 0 10px color-mix(in srgb, var(--accent) 35%, transparent); }
.style-clean .style-pv i:nth-child(1), .style-clean .style-pv i:nth-child(2){ background:var(--surface); border:1px solid var(--border); }
.theme-pop-head span{ font-size:11.5px; color:var(--text-muted); }
.theme-opt{ display:grid; grid-template-columns:54px 1fr auto; align-items:center; gap:12px; width:100%; text-align:left; padding:8px; border-radius:10px;
  background:none; border:1px solid transparent; color:var(--text); font:inherit; cursor:pointer; }
.theme-opt:hover{ background:var(--accent-tint); }
.theme-opt[aria-checked="true"]{ border-color:var(--accent); background:var(--accent-tint); }
.theme-opt:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.theme-opt-name{ font-weight:650; display:flex; align-items:center; gap:6px; }
.theme-opt-note{ display:block; font-size:11.5px; color:var(--text-muted); margin-top:1px; }
.theme-opt-tag{ font-size:9.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; padding:1px 6px; border-radius:999px; background:#D9B25F; color:#1A0610; }
.theme-opt[data-theme-id="acid-yellow"] .theme-opt-tag{ background:#DCEB15; color:#0A0A0A; }
.theme-opt-check{ width:18px; height:18px; color:var(--accent); opacity:0; }
.theme-opt[aria-checked="true"] .theme-opt-check{ opacity:1; }
/* the swatch is a tiny preview of the theme itself: canvas, a surface card, the action colour and the detail line */
.theme-sw{ position:relative; width:54px; height:38px; border-radius:8px; overflow:hidden; border:1px solid rgba(127,127,127,0.28); }
.theme-sw i{ position:absolute; display:block; }
.theme-sw .sw-card{ left:7px; top:7px; right:16px; bottom:7px; border-radius:4px; }
.theme-sw .sw-dot{ right:6px; top:7px; width:7px; height:7px; border-radius:50%; }
.theme-sw .sw-line{ left:12px; bottom:12px; width:18px; height:2px; border-radius:2px; }
.theme-pop-foot{ font-size:11.5px; color:var(--text-muted); padding:8px 6px 2px; border-top:1px solid var(--border); margin-top:4px; }
@media (prefers-reduced-motion: reduce){ .theme-pop{ animation:none; } }


/* ======================= Style: Clean (Eduardo 10/23, "based on how Claude has") =======================
   A second look modelled on Claude's app, for every colour theme. The colour theme keeps only its accent (and light /
   dark); the surfaces become Claude's warm neutrals: charcoal #1F1E1D / #262624 / #30302E in dark, cream #F5F4ED / white
   in light. Serif page titles, plain sans everywhere else (numbers too, tabular), neutral grey buttons, quiet rows,
   pill segmented controls, hairline borders, no glass, glow, blur or gradients; shadows only on what floats. */
:root[data-theme][data-style="clean"]{
  --bg:#1F1E1D; --surface:#262624; --surface-2:#30302E; --surface-3:#3A3A37; --border:#3B3A36;
  --text:#F2F1EC; --text-muted:#A6A39B; --text-faint:#86837B;
  --navy:#1F1E1D; --dark-blue:#262624; --crystal:#A6A39B; --white:#F2F1EC;
  --menu-bg:#2B2B29; --glass-blur:none; --glass-shadow:none; --ambient-bg:none; --ts:none;
  --w20:rgba(255,255,255,.02); --w40:rgba(255,255,255,.035); --w50:rgba(255,255,255,.045); --w60:rgba(255,255,255,.055); --w100:rgba(255,255,255,.075); --w140:rgba(255,255,255,.1);
  --cl-hover:rgba(255,255,255,.055); --cl-pill:#3A3A37; --cl-shadow:0 1px 2px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.35);
}
:root[data-theme="light"][data-style="clean"]{
  --bg:#F5F4ED; --surface:#FFFFFF; --surface-2:#F0EEE6; --surface-3:#E8E6DC; --border:#E3E0D6;
  --text:#1F1E1D; --text-muted:#6B6A63; --text-faint:#8A887F;
  --navy:#F5F4ED; --dark-blue:#FFFFFF; --crystal:#6B6A63; --white:#1F1E1D; --menu-bg:#FFFFFF;
  --w20:rgba(0,0,0,.02); --w40:rgba(0,0,0,.03); --w50:rgba(0,0,0,.035); --w60:rgba(0,0,0,.045); --w100:rgba(0,0,0,.06); --w140:rgba(0,0,0,.08);
  --cl-hover:rgba(0,0,0,.04); --cl-pill:#E8E6DC; --cl-shadow:0 1px 2px rgba(0,0,0,.06), 0 10px 30px rgba(0,0,0,.10);
}
:root[data-style="clean"] #appRoot{ --glass-bg:var(--surface) !important; --glass-bg-strong:var(--surface) !important;
  --glass-border:var(--border) !important; --glass-border-strong:var(--border) !important; }
:root[data-style="clean"] body{ background:var(--bg) !important; }
:root[data-style="clean"] *{ text-shadow:none !important; }
:root[data-style="clean"] *:not(.bubble-ic){ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
:root[data-style="clean"] ::selection{ background:color-mix(in srgb, var(--accent) 30%, transparent); }

/* type: serif titles, sans for everything else (numbers stay aligned) */
:root[data-style="clean"] :is(.page-title, h1, .welcome-hi, .chat-title h2, .sheet-title b){ font-family:'Source Serif 4', Georgia, 'Times New Roman', serif !important; font-weight:500 !important; letter-spacing:-.01em !important; text-transform:none !important; }
:root[data-style="clean"] .page-title{ font-size:30px; }
:root[data-style="clean"] #drawOdometer,
:root[data-style="clean"] .account-notify-row-sub,
:root[data-style="clean"] .account-phone-input,
:root[data-style="clean"] .activity-time,
:root[data-style="clean"] .attention-alert-when,
:root[data-style="clean"] .attention-job-code,
:root[data-style="clean"] .attention-ticket,
:root[data-style="clean"] .chart-row-value,
:root[data-style="clean"] .ck-jobs .ck-name,
:root[data-style="clean"] .countdown-pill,
:root[data-style="clean"] .deadline-days,
:root[data-style="clean"] .deadline-table td:last-child,
:root[data-style="clean"] .deadline-ticket,
:root[data-style="clean"] .deadline-when,
:root[data-style="clean"] .detail-field .v,
:root[data-style="clean"] .detail-num,
:root[data-style="clean"] .dm-callsave textarea,
:root[data-style="clean"] .donut-legend2-value,
:root[data-style="clean"] .draw-footage,
:root[data-style="clean"] .field-row .v,
:root[data-style="clean"] .group-header-count,
:root[data-style="clean"] .jc-total,
:root[data-style="clean"] .job-code-input,
:root[data-style="clean"] .job-code-suggestion,
:root[data-style="clean"] .leaflet-tooltip,
:root[data-style="clean"] .m-attn-detail,
:root[data-style="clean"] .m-attn-num,
:root[data-style="clean"] .map-status-row .cnt,
:root[data-style="clean"] .ops-alert-ticket b,
:root[data-style="clean"] .ops-tr-code,
:root[data-style="clean"] .panel-header .num,
:root[data-style="clean"] .project-chip,
:root[data-style="clean"] .queue-code-tag,
:root[data-style="clean"] .queue-group-count,
:root[data-style="clean"] .sheet-ticket-num,
:root[data-style="clean"] .sidebar-item-badge,
:root[data-style="clean"] .stat-tile .stat-value,
:root[data-style="clean"] .stat-val,
:root[data-style="clean"] .subgroup-count,
:root[data-style="clean"] .tg-days,
:root[data-style="clean"] .tg-table .tg-ticket-num,
:root[data-style="clean"] .ticket-card .v,
:root[data-style="clean"] .ticket-row .num,
:root[data-style="clean"] .tl-one,
:root[data-style="clean"] .tl-tickets,
:root[data-style="clean"] .tl-x-note span,
:root[data-style="clean"] .tl-x-ticket,
:root[data-style="clean"] .tl-x-tickets,
:root[data-style="clean"] .tm-ck-jobs .tm-ck-name,
:root[data-style="clean"] .util-rank-ft,
:root[data-style="clean"] .vh-num{ font-family:Inter, system-ui, sans-serif !important; font-variant-numeric:tabular-nums; letter-spacing:0 !important; }

/* chrome: top bar and tab bar sit on the page colour, one hairline */
:root[data-style="clean"] header{ background:var(--bg) !important; border-bottom:1px solid var(--border) !important; box-shadow:none !important; }
:root[data-style="clean"] header::after{ display:none; }
:root[data-style="clean"] .tabbar{ background:var(--bg) !important; border-top:1px solid var(--border) !important; box-shadow:none !important; }
:root[data-style="clean"] :is(.tab, .m-tab){ color:var(--text-muted) !important; }
:root[data-style="clean"] :is(.tab, .m-tab).active{ color:var(--text) !important; }
:root[data-style="clean"] :is(.tab, .m-tab).active svg{ background:var(--cl-pill); border-radius:999px; padding:3px 12px; box-sizing:content-box; transform:none; }
:root[data-style="clean"] .m-tab.active::before{ display:none !important; }
:root[data-style="clean"] :is(.staff-bell-btn, header .theme-toggle, .hamburger-btn, #menuToggle){ background:transparent !important; border-color:transparent !important; box-shadow:none !important; }
:root[data-style="clean"] :is(.staff-bell-btn, header .theme-toggle, .hamburger-btn, #menuToggle):hover{ background:var(--cl-hover) !important; }
:root[data-style="clean"] .user-chip{ background:transparent; border-color:transparent; }
:root[data-style="clean"] .user-chip:hover{ background:var(--cl-hover); }
:root[data-style="clean"] .ts-tint{ background:var(--surface-2) !important; border-color:var(--border) !important; box-shadow:none !important; }

/* panels: one surface step up, soft radius, hairline; no rings, sheens or passes */
:root[data-style="clean"] :is(.overview-card, .dashboard-card, .stat-tile, .dash-stat, .dash-card, .m-section, .tmw-bar, .bulk-action-bar, .panel, .bottom-sheet, .sidebar, .detail-panel){
  background:var(--surface) !important; border:1px solid var(--border) !important; box-shadow:none !important; }
:root[data-style="clean"] :is(.overview-card, .dashboard-card, .stat-tile, .dash-stat, .dash-card, .m-section, .tmw-bar, .bulk-action-bar){ border-radius:14px !important; }
:root[data-style="clean"] :is(.overview-card, .dashboard-card, .tmw-bar)::before, :root[data-style="clean"] :is(.dash-stat, .stat-tile, .sheet)::after{ display:none !important; }

/* buttons: neutral grey; the action keeps its colour in the label only */
:root[data-style="clean"] :is(.m-tool-btn, .tm-side-btn){ background:var(--surface-2) !important; border:1px solid var(--border) !important; box-shadow:none !important; border-radius:12px !important; }
:root[data-style="clean"] :is(.m-tool-btn, .tm-side-btn):hover{ background:var(--surface-3) !important; }
:root[data-style="clean"] :is(.tc-fab, .ck-run, .sync-run, .review-btn, .start-btn, .proj-btn, .ck-btn, .action-btn, .tickets-sidebar button, .m-proj-btn, .m-action-btn, .page button.m-big-btn){ box-shadow:none !important; }
:root[data-style="clean"] button:is([class*="primary"], .team-send, .note-stick, .av-up){ background:var(--accent-fill) !important; color:#fff !important; border-color:transparent !important; box-shadow:none !important; }
:root[data-style="clean"] :is(.tmw-btn, .tmw-held-toggle, .filter-chip, .wall-tidy, .wall-add, .team-meet-edit, .cal-nav button, .email-log-btn){
  background:var(--surface-2) !important; border:1px solid var(--border) !important; color:var(--text) !important; border-radius:999px !important; box-shadow:none !important; }
:root[data-style="clean"] :is(.tmw-btn, .tmw-held-toggle, .filter-chip, .wall-tidy, .cal-nav button):hover{ background:var(--surface-3) !important; }
:root[data-style="clean"] .filter-chip.active, :root[data-style="clean"] .tmw-btn.active{ background:var(--text) !important; color:var(--bg) !important; border-color:var(--text) !important; }
:root[data-style="clean"] :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]){ background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:10px; box-shadow:none !important; color:var(--text) !important; }
:root[data-style="clean"] :is(input, select, textarea):focus{ border-color:color-mix(in srgb, var(--accent) 60%, var(--border)) !important; outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent) !important; }

/* lists: quiet rows, hover = soft grey */
:root[data-style="clean"] :is(.tg-jobcode-head, .tg-project, .sidebar-item, .ticket-row, .sheet-ticket-row, .group-header, .subgroup-header, .tg-table tbody tr){ box-shadow:none !important; }
:root[data-style="clean"] .tg-jobcode-head{ background:transparent !important; border:0 !important; border-bottom:1px solid var(--border) !important; border-radius:0 !important; }
:root[data-style="clean"] :is(.tg-jobcode-head, .sidebar-item, .ticket-row, .sheet-ticket-row):hover{ background:var(--cl-hover) !important; }
:root[data-style="clean"] .tg-table tbody tr td{ background:transparent !important; border-color:var(--border) !important; }
:root[data-style="clean"] .tg-table tbody tr:hover td{ background:var(--cl-hover) !important; }

/* switches and ticks: the theme accent, flat */
:root[data-style="clean"] :is(.ios-toggle input:checked + .ios-toggle-track, .tg-group-check:checked, .tg-row-check:checked){ background:var(--accent) !important; border-color:var(--accent) !important; box-shadow:none !important; animation:none !important; }
:root[data-style="clean"] :is(.tr-bar i, .queue-progress i){ background:var(--accent) !important; animation:none !important; }
:root[data-style="clean"] input:is([type="checkbox"], [type="radio"]){ accent-color:var(--accent); }

/* floating things: the only shadows */
:root[data-style="clean"] :is(.tmw-pop, .theme-pop, .staff-bell-panel, .cal-daypop, .tp-pop, .m-sheet, .history-popover, .timeline-popover, .ts-menu, .team-at-pop, .team-emoji-pop){
  background:var(--menu-bg) !important; border:1px solid var(--border) !important; border-radius:14px !important; box-shadow:var(--cl-shadow) !important; }

/* Team sheet: same drawing, calmer ink on the page colour */
:root[data-theme][data-style="clean"] :is(.team-wall, .chat-pop){ --sheet-paper:var(--surface); --sheet-ink:color-mix(in srgb, var(--text) 55%, transparent); --sheet-ink-soft:var(--border);
  --sheet-line:color-mix(in srgb, var(--text) 3%, transparent); --sheet-line2:color-mix(in srgb, var(--text) 6%, transparent); }
:root[data-style="clean"] .bp{ background:var(--bg) !important; }
:root[data-style="clean"] .bp-art{ display:none; }
:root[data-style="clean"] .sheet{ box-shadow:none !important; border:1px solid var(--border); border-radius:14px; }
:root[data-style="clean"] .sheet-mark{ display:none; }
:root[data-style="clean"] .sheet-frame{ border-color:var(--border) !important; border-radius:10px; }
:root[data-style="clean"] .wall-toggle{ border-radius:999px !important; background:var(--surface-2) !important; border-color:var(--border) !important; }
:root[data-style="clean"] .wall-toggle button{ border-radius:999px !important; font-family:Inter, system-ui, sans-serif !important; text-transform:none !important; letter-spacing:0 !important; }
:root[data-style="clean"] .wall-toggle button[aria-selected="true"]{ background:var(--text) !important; color:var(--bg) !important; }
:root[data-style="clean"] .wall-toggle button small{ display:none; }
:root[data-style="clean"] .note{ box-shadow:0 1px 1px rgba(0,0,0,.08), 0 6px 14px -8px rgba(0,0,0,.4); }

/* Work chat, Claude-like: plain messages, yours in a grey bubble on the right, a rounded box to type in */
:root[data-style="clean"] .chat-pop{ background:var(--bg) !important; border:1px solid var(--border) !important; border-radius:16px !important; box-shadow:var(--cl-shadow) !important; }
:root[data-style="clean"] .chat-pop .team-chat-head{ border-bottom:1px solid var(--border) !important; }
:root[data-style="clean"] .chat-pop .chat-title{ border-right:0 !important; }
:root[data-style="clean"] .chat-pop .chat-title h2{ font-size:16px; color:var(--text) !important; }
:root[data-style="clean"] .chat-pop .chat-title span{ display:none; }
:root[data-style="clean"] .chat-pop .team-meet-wrap{ border-top:0 !important; }
:root[data-style="clean"] .chat-pop .team-meet{ border-radius:999px !important; background:var(--surface-2) !important; color:var(--text) !important; }
:root[data-style="clean"] .chat-pop .team-day{ font-family:Inter, system-ui, sans-serif !important; letter-spacing:.4px; color:var(--text-faint) !important; }
:root[data-style="clean"] .chat-pop .team-day::before, :root[data-style="clean"] .chat-pop .team-day::after{ background:var(--border) !important; }
:root[data-style="clean"] .chat-pop .team-msg-head time{ font-family:Inter, system-ui, sans-serif !important; }
:root[data-style="clean"] .chat-pop .team-msg.is-mine{ grid-template-columns:1fr auto; justify-items:end; }
:root[data-style="clean"] .chat-pop .team-msg.is-mine > .team-av, :root[data-style="clean"] .chat-pop .team-msg.is-mine > span:first-child{ display:none; }
:root[data-style="clean"] .chat-pop .team-msg.is-mine .team-msg-head b{ display:none; }
:root[data-style="clean"] .chat-pop .team-msg.is-mine .team-msg-main{ display:flex; flex-direction:column; align-items:flex-end; max-width:85%; }
:root[data-style="clean"] .chat-pop .team-msg.is-mine .team-bubble{ border-radius:14px 4px 14px 14px; border-left-width:1px; border-right:3px solid var(--accent); }
:root[data-style="clean"] .chat-pop .team-msg.is-mine .team-reacts{ margin-left:0; margin-right:10px; justify-content:flex-end; }
@media (hover: hover){ :root[data-style="clean"] .chat-pop .team-msg.is-mine{ grid-template-columns:1fr; } :root[data-style="clean"] .chat-pop .team-msg.is-mine .team-acts{ right:auto; left:8px; } }
:root[data-style="clean"] .chat-pop .team-msg.is-mine .team-acts{ order:-1; }
:root[data-style="clean"] .chat-pop .team-msg:hover{ background:transparent !important; }
:root[data-style="clean"] .chat-pop .team-compose{ background:transparent !important; border-top:0 !important; padding:8px 10px 10px; }
:root[data-style="clean"] .chat-pop .team-compose textarea{ background:var(--surface) !important; border-radius:14px !important; }
:root[data-style="clean"] .chat-pop .team-send{ border-radius:999px !important; font-family:Inter, system-ui, sans-serif !important; text-transform:none !important; letter-spacing:0 !important; font-size:13px !important; }
:root[data-style="clean"] .bubble-ic{ background:var(--surface-2) !important; border-color:var(--border) !important; box-shadow:0 6px 18px rgba(0,0,0,.3) !important; }

/* theme decorations that move hold still */
:root[data-style="clean"] :is(.chat-bubble, .chat-badge){ animation:none !important; }
:root[data-style="clean"] :is(.staff-bell-count, .chat-badge, .tab .tab-badge, .m-tab .m-tab-badge, .user-chip .bs-av){ box-shadow:none !important; }