/* ════════════════════════════════════════════════════════════════
   Timer Pro — 50-Theme Catalog & Design Tokens
   Each theme defines --t-* tokens mapped across the app & viewer.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Clean & Light ────────────────────────────────────────────── */

body[data-theme="daylight"] {
  --t-primary: #4648d4; --t-primary-2: #6063ee; --t-on-primary: #ffffff;
  --t-brand-1: #5b5fe6; --t-brand-2: #8127cf; --t-accent: #b91d96;
  --t-bg-0: #fcf8ff; --t-bg-1: #f4f0fa;
  --t-elev-1: #f4f0fa; --t-elev-2: #eee9f5; --t-elev-3: #e8e3ef;
  --t-text: #1c1b1f; --t-muted: #4a454f;
  --t-border: #e7e0ec; --t-border-strong: #cac4d0;
  --t-glass: rgba(255, 255, 255, .72); --t-glass-strong: rgba(255, 255, 255, .9);
  --t-glow: rgba(91, 95, 230, .5);
  --t-sh-1: rgba(28, 27, 31, .06); --t-sh-2: rgba(70, 72, 212, .1); --t-sh-3: rgba(70, 72, 212, .16);
}

body[data-theme="sandstone"] {
  --t-primary: #c2410c; --t-primary-2: #ea580c; --t-on-primary: #ffffff;
  --t-brand-1: #f97316; --t-brand-2: #b45309; --t-accent: #b45309;
  --t-bg-0: #fffbf5; --t-bg-1: #fff4e6;
  --t-elev-1: #fdf3e7; --t-elev-2: #f9e9d8; --t-elev-3: #f3ddc6;
  --t-text: #2a1a0e; --t-muted: #6b4a32;
  --t-border: #f0dcc4; --t-border-strong: #dcc09c;
  --t-glass: rgba(255, 252, 247, .78); --t-glass-strong: rgba(255, 252, 247, .92);
  --t-glow: rgba(249, 115, 22, .45);
  --t-sh-1: rgba(66, 32, 6, .07); --t-sh-2: rgba(194, 65, 12, .12); --t-sh-3: rgba(194, 65, 12, .18);
}

body[data-theme="meadow"] {
  --t-primary: #047857; --t-primary-2: #059669; --t-on-primary: #ffffff;
  --t-brand-1: #059669; --t-brand-2: #0f766e; --t-accent: #0d9488;
  --t-bg-0: #f6fdf9; --t-bg-1: #eafaf1;
  --t-elev-1: #eafaf1; --t-elev-2: #ddf5e8; --t-elev-3: #cdeeda;
  --t-text: #06231a; --t-muted: #3d5f52;
  --t-border: #cdeadb; --t-border-strong: #a7d8c1;
  --t-glass: rgba(246, 255, 250, .78); --t-glass-strong: rgba(246, 255, 250, .92);
  --t-glow: rgba(16, 185, 129, .45);
  --t-sh-1: rgba(6, 35, 26, .07); --t-sh-2: rgba(4, 120, 87, .12); --t-sh-3: rgba(4, 120, 87, .18);
}

body[data-theme="blossom"] {
  --t-primary: #be185d; --t-primary-2: #db2777; --t-on-primary: #ffffff;
  --t-brand-1: #ec4899; --t-brand-2: #a855f7; --t-accent: #9333ea;
  --t-bg-0: #fff7fb; --t-bg-1: #ffeef6;
  --t-elev-1: #ffeef6; --t-elev-2: #fde3ee; --t-elev-3: #f9d3e3;
  --t-text: #2b0d1c; --t-muted: #6b3550;
  --t-border: #fbdae8; --t-border-strong: #f2b9d1;
  --t-glass: rgba(255, 247, 251, .78); --t-glass-strong: rgba(255, 247, 251, .92);
  --t-glow: rgba(236, 72, 153, .45);
  --t-sh-1: rgba(43, 13, 28, .07); --t-sh-2: rgba(190, 24, 93, .12); --t-sh-3: rgba(190, 24, 93, .18);
}

body[data-theme="arctic"] {
  --t-primary: #0369a1; --t-primary-2: #0284c7; --t-on-primary: #ffffff;
  --t-brand-1: #0ea5e9; --t-brand-2: #1e40af; --t-accent: #4f46e5;
  --t-bg-0: #f7fbfe; --t-bg-1: #eef6fc;
  --t-elev-1: #eef6fc; --t-elev-2: #e3eff8; --t-elev-3: #d5e6f3;
  --t-text: #0b1f2c; --t-muted: #3f5b6d;
  --t-border: #d9e9f4; --t-border-strong: #b6d3e7;
  --t-glass: rgba(247, 251, 254, .78); --t-glass-strong: rgba(247, 251, 254, .92);
  --t-glow: rgba(14, 165, 233, .45);
  --t-sh-1: rgba(11, 31, 44, .07); --t-sh-2: rgba(3, 105, 161, .12); --t-sh-3: rgba(3, 105, 161, .18);
}

body[data-theme="solarized-light"] {
  --t-primary: #268bd2; --t-primary-2: #2aa198; --t-on-primary: #ffffff;
  --t-brand-1: #268bd2; --t-brand-2: #6c71c4; --t-accent: #b58900;
  --t-bg-0: #fdf6e3; --t-bg-1: #eee8d5;
  --t-elev-1: #f7f0dc; --t-elev-2: #eee8d5; --t-elev-3: #e0d8c3;
  --t-text: #073642; --t-muted: #586e75;
  --t-border: #e6dfc9; --t-border-strong: #d3cbaf;
  --t-glass: rgba(253, 246, 227, .8); --t-glass-strong: rgba(253, 246, 227, .94);
  --t-glow: rgba(38, 139, 210, .4);
  --t-sh-1: rgba(7, 54, 66, .06); --t-sh-2: rgba(38, 139, 210, .1); --t-sh-3: rgba(38, 139, 210, .16);
}

body[data-theme="github-light"] {
  --t-primary: #0969da; --t-primary-2: #218bfc; --t-on-primary: #ffffff;
  --t-brand-1: #0969da; --t-brand-2: #8250df; --t-accent: #cf222e;
  --t-bg-0: #ffffff; --t-bg-1: #f6f8fa;
  --t-elev-1: #f6f8fa; --t-elev-2: #eaeef2; --t-elev-3: #d0d7de;
  --t-text: #1f2328; --t-muted: #656d76;
  --t-border: #d0d7de; --t-border-strong: #afb8c1;
  --t-glass: rgba(255, 255, 255, .82); --t-glass-strong: rgba(255, 255, 255, .95);
  --t-glow: rgba(9, 105, 218, .4);
  --t-sh-1: rgba(31, 35, 40, .06); --t-sh-2: rgba(9, 105, 218, .1); --t-sh-3: rgba(9, 105, 218, .16);
}

body[data-theme="catppuccin-latte"] {
  --t-primary: #1e66f5; --t-primary-2: #7287fd; --t-on-primary: #ffffff;
  --t-brand-1: #1e66f5; --t-brand-2: #8839ef; --t-accent: #ea76cb;
  --t-bg-0: #eff1f5; --t-bg-1: #e6e9ef;
  --t-elev-1: #e6e9ef; --t-elev-2: #dce0e8; --t-elev-3: #ccd0da;
  --t-text: #4c4f69; --t-muted: #6c6f85;
  --t-border: #ccd0da; --t-border-strong: #bcc0cc;
  --t-glass: rgba(239, 241, 245, .8); --t-glass-strong: rgba(239, 241, 245, .94);
  --t-glow: rgba(30, 102, 245, .4);
  --t-sh-1: rgba(76, 79, 105, .06); --t-sh-2: rgba(30, 102, 245, .1); --t-sh-3: rgba(30, 102, 245, .16);
}

body[data-theme="rose-quartz"] {
  --t-primary: #d946ef; --t-primary-2: #ec4899; --t-on-primary: #ffffff;
  --t-brand-1: #e879f9; --t-brand-2: #f43f5e; --t-accent: #fb7185;
  --t-bg-0: #fff5f7; --t-bg-1: #ffebf0;
  --t-elev-1: #ffebf0; --t-elev-2: #ffe0e7; --t-elev-3: #ffd1dc;
  --t-text: #3b1424; --t-muted: #7a3854;
  --t-border: #ffced9; --t-border-strong: #fca5a5;
  --t-glass: rgba(255, 245, 247, .8); --t-glass-strong: rgba(255, 245, 247, .94);
  --t-glow: rgba(217, 70, 239, .4);
  --t-sh-1: rgba(59, 20, 36, .06); --t-sh-2: rgba(217, 70, 239, .1); --t-sh-3: rgba(217, 70, 239, .16);
}

body[data-theme="ivory"] {
  --t-primary: #854d0e; --t-primary-2: #a16207; --t-on-primary: #ffffff;
  --t-brand-1: #ca8a04; --t-brand-2: #78350f; --t-accent: #d97706;
  --t-bg-0: #fefce8; --t-bg-1: #fef9c3;
  --t-elev-1: #fef9c3; --t-elev-2: #fef08a; --t-elev-3: #fde047;
  --t-text: #422006; --t-muted: #713f12;
  --t-border: #fef08a; --t-border-strong: #fde047;
  --t-glass: rgba(254, 252, 232, .8); --t-glass-strong: rgba(254, 252, 232, .94);
  --t-glow: rgba(202, 138, 4, .4);
  --t-sh-1: rgba(66, 32, 6, .06); --t-sh-2: rgba(133, 77, 14, .1); --t-sh-3: rgba(133, 77, 14, .16);
}

/* ── 2. Classic Dark ─────────────────────────────────────────────── */

body[data-theme="midnight"] {
  --t-primary: #c0c2ff; --t-primary-2: #2c2e9b; --t-on-primary: #1a1d8a;
  --t-brand-1: #4648d4; --t-brand-2: #6b1b9c; --t-accent: #f0abfc;
  --t-bg-0: #131318; --t-bg-1: #0d0d12;
  --t-elev-1: #1b1b22; --t-elev-2: #1f1f27; --t-elev-3: #2a2a33;
  --t-text: #e6e1e9; --t-muted: #c9c4cf;
  --t-border: #302c38; --t-border-strong: #49454f;
  --t-glass: rgba(255, 255, 255, .06); --t-glass-strong: rgba(255, 255, 255, .1);
  --t-glow: rgba(140, 120, 255, .5);
  --t-sh-1: rgba(0, 0, 0, .35); --t-sh-2: rgba(0, 0, 0, .42); --t-sh-3: rgba(0, 0, 0, .55);
}

body[data-theme="obsidian"] {
  --t-primary: #e5e5e5; --t-primary-2: #404040; --t-on-primary: #0a0a0a;
  --t-brand-1: #1f1f1f; --t-brand-2: #3d3d3d; --t-accent: #fafafa;
  --t-bg-0: #0a0a0a; --t-bg-1: #050505;
  --t-elev-1: #141414; --t-elev-2: #1c1c1c; --t-elev-3: #262626;
  --t-text: #f5f5f5; --t-muted: #a3a3a3;
  --t-border: #262626; --t-border-strong: #3f3f3f;
  --t-glass: rgba(255, 255, 255, .05); --t-glass-strong: rgba(255, 255, 255, .1);
  --t-glow: rgba(255, 255, 255, .3);
  --t-sh-1: rgba(0, 0, 0, .5); --t-sh-2: rgba(0, 0, 0, .55); --t-sh-3: rgba(0, 0, 0, .7);
}

body[data-theme="dracula"] {
  --t-primary: #bd93f9; --t-primary-2: #6272a4; --t-on-primary: #282a36;
  --t-brand-1: #ff79c6; --t-brand-2: #bd93f9; --t-accent: #8be9fd;
  --t-bg-0: #282a36; --t-bg-1: #1e1f29;
  --t-elev-1: #343746; --t-elev-2: #44475a; --t-elev-3: #6272a4;
  --t-text: #f8f8f2; --t-muted: #6272a4;
  --t-border: #44475a; --t-border-strong: #6272a4;
  --t-glass: rgba(189, 147, 249, .08); --t-glass-strong: rgba(255, 121, 198, .12);
  --t-glow: rgba(189, 147, 249, .5);
  --t-sh-1: rgba(0, 0, 0, .4); --t-sh-2: rgba(40, 42, 54, .5); --t-sh-3: rgba(40, 42, 54, .7);
}

body[data-theme="one-dark"] {
  --t-primary: #61afef; --t-primary-2: #2c313a; --t-on-primary: #282c34;
  --t-brand-1: #61afef; --t-brand-2: #c678dd; --t-accent: #98c379;
  --t-bg-0: #282c34; --t-bg-1: #21252b;
  --t-elev-1: #2c313a; --t-elev-2: #353b45; --t-elev-3: #3e4451;
  --t-text: #abb2bf; --t-muted: #5c6370;
  --t-border: #3e4451; --t-border-strong: #5c6370;
  --t-glass: rgba(97, 175, 239, .08); --t-glass-strong: rgba(198, 120, 221, .12);
  --t-glow: rgba(97, 175, 239, .5);
  --t-sh-1: rgba(0, 0, 0, .4); --t-sh-2: rgba(33, 37, 43, .5); --t-sh-3: rgba(33, 37, 43, .7);
}

body[data-theme="solarized-dark"] {
  --t-primary: #268bd2; --t-primary-2: #073642; --t-on-primary: #002b36;
  --t-brand-1: #268bd2; --t-brand-2: #2aa198; --t-accent: #b58900;
  --t-bg-0: #002b36; --t-bg-1: #001e26;
  --t-elev-1: #073642; --t-elev-2: #094352; --t-elev-3: #0f5264;
  --t-text: #839496; --t-muted: #586e75;
  --t-border: #094352; --t-border-strong: #116b80;
  --t-glass: rgba(38, 139, 210, .08); --t-glass-strong: rgba(42, 161, 152, .12);
  --t-glow: rgba(38, 139, 210, .5);
  --t-sh-1: rgba(0, 0, 0, .45); --t-sh-2: rgba(0, 30, 38, .5); --t-sh-3: rgba(0, 43, 54, .7);
}

body[data-theme="github-dark"] {
  --t-primary: #58a6ff; --t-primary-2: #1f6beb; --t-on-primary: #0d1117;
  --t-brand-1: #58a6ff; --t-brand-2: #bc8cff; --t-accent: #3fb950;
  --t-bg-0: #0d1117; --t-bg-1: #010409;
  --t-elev-1: #161b22; --t-elev-2: #21262d; --t-elev-3: #30363d;
  --t-text: #c9d1d9; --t-muted: #8b949e;
  --t-border: #30363d; --t-border-strong: #484f58;
  --t-glass: rgba(88, 166, 255, .08); --t-glass-strong: rgba(188, 140, 255, .12);
  --t-glow: rgba(88, 166, 255, .5);
  --t-sh-1: rgba(0, 0, 0, .45); --t-sh-2: rgba(1, 4, 9, .5); --t-sh-3: rgba(13, 17, 23, .7);
}

body[data-theme="monokai"] {
  --t-primary: #a6e22e; --t-primary-2: #f92672; --t-on-primary: #272822;
  --t-brand-1: #f92672; --t-brand-2: #66d9ef; --t-accent: #fd971f;
  --t-bg-0: #272822; --t-bg-1: #1e1f1c;
  --t-elev-1: #3e3d32; --t-elev-2: #49483e; --t-elev-3: #75715e;
  --t-text: #f8f8f2; --t-muted: #75715e;
  --t-border: #49483e; --t-border-strong: #75715e;
  --t-glass: rgba(249, 38, 114, .08); --t-glass-strong: rgba(102, 217, 239, .12);
  --t-glow: rgba(166, 226, 46, .5);
  --t-sh-1: rgba(0, 0, 0, .45); --t-sh-2: rgba(39, 40, 34, .5); --t-sh-3: rgba(39, 40, 34, .7);
}

body[data-theme="gruvbox"] {
  --t-primary: #fabd2f; --t-primary-2: #83a598; --t-on-primary: #282828;
  --t-brand-1: #fe8019; --t-brand-2: #d3869b; --t-accent: #b8bb26;
  --t-bg-0: #282828; --t-bg-1: #1d2021;
  --t-elev-1: #3c3836; --t-elev-2: #504945; --t-elev-3: #665c54;
  --t-text: #ebdbb2; --t-muted: #a89984;
  --t-border: #504945; --t-border-strong: #7c6f64;
  --t-glass: rgba(250, 189, 47, .08); --t-glass-strong: rgba(254, 128, 25, .12);
  --t-glow: rgba(250, 189, 47, .5);
  --t-sh-1: rgba(0, 0, 0, .45); --t-sh-2: rgba(40, 40, 40, .5); --t-sh-3: rgba(40, 40, 40, .7);
}

/* ── 3. Calm & Minimal ───────────────────────────────────────────── */

body[data-theme="nord"] {
  --t-primary: #88c0d0; --t-primary-2: #5e81ac; --t-on-primary: #2e3440;
  --t-brand-1: #88c0d0; --t-brand-2: #81a1c1; --t-accent: #b48ead;
  --t-bg-0: #2e3440; --t-bg-1: #242933;
  --t-elev-1: #3b4252; --t-elev-2: #434c5e; --t-elev-3: #4c566a;
  --t-text: #eceff4; --t-muted: #d8dee9;
  --t-border: #434c5e; --t-border-strong: #4c566a;
  --t-glass: rgba(136, 192, 208, .08); --t-glass-strong: rgba(129, 161, 193, .12);
  --t-glow: rgba(136, 192, 208, .5);
  --t-sh-1: rgba(0, 0, 0, .4); --t-sh-2: rgba(46, 52, 64, .5); --t-sh-3: rgba(46, 52, 64, .7);
}

body[data-theme="catppuccin-mocha"] {
  --t-primary: #89b4fa; --t-primary-2: #cba6f7; --t-on-primary: #1e1e2e;
  --t-brand-1: #89b4fa; --t-brand-2: #f5c2e7; --t-accent: #a6e3a1;
  --t-bg-0: #1e1e2e; --t-bg-1: #181825;
  --t-elev-1: #252536; --t-elev-2: #313244; --t-elev-3: #45475a;
  --t-text: #cdd6f4; --t-muted: #a6adc8;
  --t-border: #313244; --t-border-strong: #45475a;
  --t-glass: rgba(137, 180, 250, .08); --t-glass-strong: rgba(203, 166, 247, .12);
  --t-glow: rgba(137, 180, 250, .5);
  --t-sh-1: rgba(0, 0, 0, .4); --t-sh-2: rgba(30, 30, 46, .5); --t-sh-3: rgba(30, 30, 46, .7);
}

body[data-theme="catppuccin-frappe"] {
  --t-primary: #8caaee; --t-primary-2: #ca9ee6; --t-on-primary: #303446;
  --t-brand-1: #8caaee; --t-brand-2: #f4b8e4; --t-accent: #a6d189;
  --t-bg-0: #303446; --t-bg-1: #292c3c;
  --t-elev-1: #383c4e; --t-elev-2: #414559; --t-elev-3: #51576d;
  --t-text: #c6d0f5; --t-muted: #a5adce;
  --t-border: #414559; --t-border-strong: #51576d;
  --t-glass: rgba(140, 170, 238, .08); --t-glass-strong: rgba(202, 158, 230, .12);
  --t-glow: rgba(140, 170, 238, .5);
  --t-sh-1: rgba(0, 0, 0, .4); --t-sh-2: rgba(48, 52, 70, .5); --t-sh-3: rgba(48, 52, 70, .7);
}

body[data-theme="tokyo-night"] {
  --t-primary: #7aa2f7; --t-primary-2: #bb9af7; --t-on-primary: #1a1b26;
  --t-brand-1: #7aa2f7; --t-brand-2: #f7768e; --t-accent: #7dcfff;
  --t-bg-0: #1a1b26; --t-bg-1: #16161e;
  --t-elev-1: #24283b; --t-elev-2: #2f354f; --t-elev-3: #414868;
  --t-text: #c0caf5; --t-muted: #9aa5ce;
  --t-border: #2f354f; --t-border-strong: #414868;
  --t-glass: rgba(122, 162, 247, .08); --t-glass-strong: rgba(187, 154, 247, .12);
  --t-glow: rgba(122, 162, 247, .5);
  --t-sh-1: rgba(0, 0, 0, .4); --t-sh-2: rgba(26, 27, 38, .5); --t-sh-3: rgba(26, 27, 38, .7);
}

body[data-theme="night-owl"] {
  --t-primary: #82aaff; --t-primary-2: #c792ea; --t-on-primary: #011627;
  --t-brand-1: #82aaff; --t-brand-2: #ecc48d; --t-accent: #7fdbca;
  --t-bg-0: #011627; --t-bg-1: #000d18;
  --t-elev-1: #0b253a; --t-elev-2: #11324d; --t-elev-3: #1d3b5a;
  --t-text: #d6deeb; --t-muted: #5f7e97;
  --t-border: #11324d; --t-border-strong: #1d3b5a;
  --t-glass: rgba(130, 170, 255, .08); --t-glass-strong: rgba(199, 146, 234, .12);
  --t-glow: rgba(130, 170, 255, .5);
  --t-sh-1: rgba(0, 0, 0, .45); --t-sh-2: rgba(1, 22, 39, .5); --t-sh-3: rgba(1, 22, 39, .7);
}

body[data-theme="zen"] {
  --t-primary: #94a3b8; --t-primary-2: #475569; --t-on-primary: #0f172a;
  --t-brand-1: #64748b; --t-brand-2: #334155; --t-accent: #cbd5e1;
  --t-bg-0: #0f172a; --t-bg-1: #020617;
  --t-elev-1: #1e293b; --t-elev-2: #334155; --t-elev-3: #475569;
  --t-text: #e2e8f0; --t-muted: #94a3b8;
  --t-border: #334155; --t-border-strong: #475569;
  --t-glass: rgba(148, 163, 184, .06); --t-glass-strong: rgba(148, 163, 184, .1);
  --t-glow: rgba(148, 163, 184, .35);
  --t-sh-1: rgba(0, 0, 0, .4); --t-sh-2: rgba(15, 23, 42, .5); --t-sh-3: rgba(15, 23, 42, .7);
}

/* ── 4. Apple-Inspired ───────────────────────────────────────────── */

body[data-theme="apple-light"] {
  --t-primary: #0071e3; --t-primary-2: #409cff; --t-on-primary: #ffffff;
  --t-brand-1: #0071e3; --t-brand-2: #5e5ce6; --t-accent: #ff9f0a;
  --t-bg-0: #f5f5f7; --t-bg-1: #e8e8ed;
  --t-elev-1: #ffffff; --t-elev-2: #e8e8ed; --t-elev-3: #d2d2d7;
  --t-text: #1d1d1f; --t-muted: #86868b;
  --t-border: #d2d2d7; --t-border-strong: #86868b;
  --t-glass: rgba(255, 255, 255, .8); --t-glass-strong: rgba(255, 255, 255, .95);
  --t-glow: rgba(0, 113, 227, .4);
  --t-sh-1: rgba(0, 0, 0, .04); --t-sh-2: rgba(0, 113, 227, .08); --t-sh-3: rgba(0, 113, 227, .15);
}

body[data-theme="apple-dark"] {
  --t-primary: #0a84ff; --t-primary-2: #5e5ce6; --t-on-primary: #ffffff;
  --t-brand-1: #0a84ff; --t-brand-2: #bf5af2; --t-accent: #ff9f0a;
  --t-bg-0: #1d1d1f; --t-bg-1: #000000;
  --t-elev-1: #2c2c2e; --t-elev-2: #3a3a3c; --t-elev-3: #48484a;
  --t-text: #f5f5f7; --t-muted: #86868b;
  --t-border: #3a3a3c; --t-border-strong: #48484a;
  --t-glass: rgba(255, 255, 255, .08); --t-glass-strong: rgba(255, 255, 255, .14);
  --t-glow: rgba(10, 132, 255, .5);
  --t-sh-1: rgba(0, 0, 0, .5); --t-sh-2: rgba(0, 0, 0, .6); --t-sh-3: rgba(0, 0, 0, .75);
}

body[data-theme="apple-midnight"] {
  --t-primary: #2997ff; --t-primary-2: #0071e3; --t-on-primary: #ffffff;
  --t-brand-1: #1d2b45; --t-brand-2: #0071e3; --t-accent: #64d2ff;
  --t-bg-0: #0b1326; --t-bg-1: #040814;
  --t-elev-1: #152238; --t-elev-2: #1e2f4d; --t-elev-3: #283d63;
  --t-text: #f0f4fc; --t-muted: #8fa0c0;
  --t-border: #1e2f4d; --t-border-strong: #283d63;
  --t-glass: rgba(41, 151, 255, .08); --t-glass-strong: rgba(41, 151, 255, .14);
  --t-glow: rgba(41, 151, 255, .5);
  --t-sh-1: rgba(0, 0, 0, .45); --t-sh-2: rgba(11, 19, 38, .5); --t-sh-3: rgba(11, 19, 38, .7);
}

body[data-theme="apple-graphite"] {
  --t-primary: #98989d; --t-primary-2: #636366; --t-on-primary: #ffffff;
  --t-brand-1: #636366; --t-brand-2: #48484a; --t-accent: #aeaeb2;
  --t-bg-0: #1c1c1e; --t-bg-1: #121214;
  --t-elev-1: #2c2c2e; --t-elev-2: #3a3a3c; --t-elev-3: #48484a;
  --t-text: #f2f2f7; --t-muted: #8e8e93;
  --t-border: #3a3a3c; --t-border-strong: #48484a;
  --t-glass: rgba(255, 255, 255, .07); --t-glass-strong: rgba(255, 255, 255, .12);
  --t-glow: rgba(152, 152, 157, .4);
  --t-sh-1: rgba(0, 0, 0, .45); --t-sh-2: rgba(28, 28, 30, .5); --t-sh-3: rgba(28, 28, 30, .7);
}

body[data-theme="apple-sunrise"] {
  --t-primary: #ff9500; --t-primary-2: #ff2d55; --t-on-primary: #ffffff;
  --t-brand-1: #ff9500; --t-brand-2: #ff3b30; --t-accent: #ffcc00;
  --t-bg-0: #1a0f18; --t-bg-1: #0f080e;
  --t-elev-1: #291726; --t-elev-2: #381f34; --t-elev-3: #4a2845;
  --t-text: #fff0f5; --t-muted: #c79db3;
  --t-border: #381f34; --t-border-strong: #4a2845;
  --t-glass: rgba(255, 149, 0, .08); --t-glass-strong: rgba(255, 45, 85, .12);
  --t-glow: rgba(255, 149, 0, .5);
  --t-sh-1: rgba(0, 0, 0, .45); --t-sh-2: rgba(26, 15, 24, .5); --t-sh-3: rgba(26, 15, 24, .7);
}

/* ── 5. Neon & Electric ─────────────────────────────────────────── */

body[data-theme="neon-green"] {
  --t-primary: #39ff88; --t-primary-2: #0b5c34; --t-on-primary: #00160c;
  --t-brand-1: #0a3b26; --t-brand-2: #086e45; --t-accent: #7dff4d;
  --t-bg-0: #050a07; --t-bg-1: #010402;
  --t-elev-1: #0a1410; --t-elev-2: #0e1c16; --t-elev-3: #14281f;
  --t-text: #d6ffe9; --t-muted: #7fcfa6;
  --t-border: #143d2a; --t-border-strong: #1f6b46;
  --t-glass: rgba(57, 255, 136, .06); --t-glass-strong: rgba(57, 255, 136, .12);
  --t-glow: rgba(57, 255, 136, .6);
  --t-sh-1: rgba(0, 0, 0, .45); --t-sh-2: rgba(0, 40, 20, .5); --t-sh-3: rgba(0, 60, 30, .6);
}

body[data-theme="neon-orange"] {
  --t-primary: #ff9a3c; --t-primary-2: #7c2d12; --t-on-primary: #1a0a00;
  --t-brand-1: #7c2d12; --t-brand-2: #b8410a; --t-accent: #ffd166;
  --t-bg-0: #0b0705; --t-bg-1: #050302;
  --t-elev-1: #17100b; --t-elev-2: #1f1610; --t-elev-3: #2b1e14;
  --t-text: #ffeede; --t-muted: #d3a983;
  --t-border: #3a2517; --t-border-strong: #6b4224;
  --t-glass: rgba(255, 154, 60, .07); --t-glass-strong: rgba(255, 154, 60, .13);
  --t-glow: rgba(255, 138, 32, .6);
  --t-sh-1: rgba(0, 0, 0, .45); --t-sh-2: rgba(40, 15, 0, .5); --t-sh-3: rgba(60, 20, 0, .6);
}

body[data-theme="cyberpunk"] {
  --t-primary: #ff2e88; --t-primary-2: #7a0f43; --t-on-primary: #1a0014;
  --t-brand-1: #7b1fa2; --t-brand-2: #0891b2; --t-accent: #00e5ff;
  --t-bg-0: #08060f; --t-bg-1: #030209;
  --t-elev-1: #120d1f; --t-elev-2: #191128; --t-elev-3: #241834;
  --t-text: #f4eaff; --t-muted: #b39ecb;
  --t-border: #33204a; --t-border-strong: #5b2e7a;
  --t-glass: rgba(255, 46, 136, .07); --t-glass-strong: rgba(0, 229, 255, .12);
  --t-glow: rgba(255, 46, 136, .6);
  --t-sh-1: rgba(0, 0, 0, .45); --t-sh-2: rgba(40, 0, 30, .5); --t-sh-3: rgba(60, 0, 45, .62);
}

body[data-theme="neon-blue"] {
  --t-primary: #00d4ff; --t-primary-2: #005580; --t-on-primary: #001524;
  --t-brand-1: #006699; --t-brand-2: #00bfff; --t-accent: #80e5ff;
  --t-bg-0: #020b14; --t-bg-1: #01050a;
  --t-elev-1: #061626; --t-elev-2: #092138; --t-elev-3: #0d2d4d;
  --t-text: #e0f7ff; --t-muted: #70c4e8;
  --t-border: #0b3454; --t-border-strong: #104b78;
  --t-glass: rgba(0, 212, 255, .07); --t-glass-strong: rgba(0, 212, 255, .13);
  --t-glow: rgba(0, 212, 255, .65);
  --t-sh-1: rgba(0, 0, 0, .45); --t-sh-2: rgba(0, 30, 50, .5); --t-sh-3: rgba(0, 50, 80, .6);
}

body[data-theme="synthwave"] {
  --t-primary: #ff6ac1; --t-primary-2: #782167; --t-on-primary: #24001a;
  --t-brand-1: #9d8cff; --t-brand-2: #ff6ac1; --t-accent: #50e3c2;
  --t-bg-0: #1a1025; --t-bg-1: #0f0817;
  --t-elev-1: #261738; --t-elev-2: #321e4a; --t-elev-3: #432863;
  --t-text: #f3e5ff; --t-muted: #b89ec9;
  --t-border: #3f255c; --t-border-strong: #643b91;
  --t-glass: rgba(255, 106, 193, .08); --t-glass-strong: rgba(157, 140, 255, .14);
  --t-glow: rgba(255, 106, 193, .6);
  --t-sh-1: rgba(0, 0, 0, .45); --t-sh-2: rgba(26, 16, 37, .5); --t-sh-3: rgba(38, 23, 56, .65);
}

body[data-theme="vaporwave"] {
  --t-primary: #ff71ce; --t-primary-2: #01cdfe; --t-on-primary: #29001b;
  --t-brand-1: #ff71ce; --t-brand-2: #05ffa1; --t-accent: #b967ff;
  --t-bg-0: #140d21; --t-bg-1: #0a0612;
  --t-elev-1: #211536; --t-elev-2: #2e1e4a; --t-elev-3: #3e2863;
  --t-text: #fff2fc; --t-muted: #caa6d4;
  --t-border: #3b255e; --t-border-strong: #623c9e;
  --t-glass: rgba(255, 113, 206, .08); --t-glass-strong: rgba(1, 205, 254, .14);
  --t-glow: rgba(255, 113, 206, .6);
  --t-sh-1: rgba(0, 0, 0, .45); --t-sh-2: rgba(20, 13, 33, .5); --t-sh-3: rgba(30, 18, 50, .65);
}

/* ── 6. Vibrant & Dynamic ────────────────────────────────────────── */

body[data-theme="starnight"] {
  --t-primary: #93c5fd; --t-primary-2: #1e3a8a; --t-on-primary: #0b1030;
  --t-brand-1: #3b5bdb; --t-brand-2: #6d5bd0; --t-accent: #fde68a;
  --t-bg-0: #070b1c; --t-bg-1: #04060f;
  --t-elev-1: #0d1330; --t-elev-2: #131a3d; --t-elev-3: #1b2450;
  --t-text: #e8ecff; --t-muted: #a8b3d8;
  --t-border: #1e2a55; --t-border-strong: #33437c;
  --t-glass: rgba(147, 197, 253, .07); --t-glass-strong: rgba(147, 197, 253, .12);
  --t-glow: rgba(147, 197, 253, .55);
  --t-sh-1: rgba(0, 0, 0, .4); --t-sh-2: rgba(3, 7, 30, .5); --t-sh-3: rgba(3, 7, 30, .65);
}

body[data-theme="cosmos"] {
  --t-primary: #e9a6ff; --t-primary-2: #4c1d95; --t-on-primary: #1a0430;
  --t-brand-1: #7c3aed; --t-brand-2: #be1d8f; --t-accent: #f472b6;
  --t-bg-0: #0d0718; --t-bg-1: #05030d;
  --t-elev-1: #170e2a; --t-elev-2: #1e1338; --t-elev-3: #2a1b4d;
  --t-text: #f3e9ff; --t-muted: #bda9d6;
  --t-border: #2b1c48; --t-border-strong: #452d6e;
  --t-glass: rgba(233, 166, 255, .07); --t-glass-strong: rgba(233, 166, 255, .12);
  --t-glow: rgba(233, 166, 255, .5);
  --t-sh-1: rgba(0, 0, 0, .4); --t-sh-2: rgba(20, 4, 40, .5); --t-sh-3: rgba(20, 4, 40, .65);
}

body[data-theme="aurora"] {
  --t-primary: #5eead4; --t-primary-2: #115e59; --t-on-primary: #04231e;
  --t-brand-1: #0f766e; --t-brand-2: #6d28d9; --t-accent: #86efac;
  --t-bg-0: #061418; --t-bg-1: #030b0e;
  --t-elev-1: #0b2027; --t-elev-2: #102b33; --t-elev-3: #163b45;
  --t-text: #e6fffb; --t-muted: #9fc9c6;
  --t-border: #16414b; --t-border-strong: #24707d;
  --t-glass: rgba(94, 234, 212, .07); --t-glass-strong: rgba(94, 234, 212, .12);
  --t-glow: rgba(94, 234, 212, .55);
  --t-sh-1: rgba(0, 0, 0, .4); --t-sh-2: rgba(0, 30, 35, .5); --t-sh-3: rgba(0, 40, 45, .62);
}

body[data-theme="sunset"] {
  --t-primary: #fb923c; --t-primary-2: #7c2d12; --t-on-primary: #2a1005;
  --t-brand-1: #e2622f; --t-brand-2: #7c2d84; --t-accent: #fbbf24;
  --t-bg-0: #140a12; --t-bg-1: #0a0509;
  --t-elev-1: #20111c; --t-elev-2: #2a1724; --t-elev-3: #3a2031;
  --t-text: #ffeef2; --t-muted: #d5aab8;
  --t-border: #40233a; --t-border-strong: #6d3a58;
  --t-glass: rgba(251, 146, 60, .07); --t-glass-strong: rgba(244, 114, 182, .12);
  --t-glow: rgba(251, 146, 60, .5);
  --t-sh-1: rgba(0, 0, 0, .4); --t-sh-2: rgba(45, 10, 30, .5); --t-sh-3: rgba(60, 15, 40, .62);
}

body[data-theme="ocean"] {
  --t-primary: #38bdf8; --t-primary-2: #075985; --t-on-primary: #04213a;
  --t-brand-1: #0a3d62; --t-brand-2: #0e7490; --t-accent: #22d3ee;
  --t-bg-0: #04121f; --t-bg-1: #020a13;
  --t-elev-1: #0a1e30; --t-elev-2: #0f2941; --t-elev-3: #143753;
  --t-text: #e2f4ff; --t-muted: #97bcd6;
  --t-border: #17364f; --t-border-strong: #2a5c81;
  --t-glass: rgba(56, 189, 248, .07); --t-glass-strong: rgba(56, 189, 248, .12);
  --t-glow: rgba(56, 189, 248, .55);
  --t-sh-1: rgba(0, 0, 0, .4); --t-sh-2: rgba(0, 25, 45, .5); --t-sh-3: rgba(0, 35, 60, .62);
}

body[data-theme="northern-lights"] {
  --t-primary: #34d399; --t-primary-2: #065f46; --t-on-primary: #022c22;
  --t-brand-1: #059669; --t-brand-2: #7c3aed; --t-accent: #a7f3d0;
  --t-bg-0: #051411; --t-bg-1: #020a08;
  --t-elev-1: #0a211c; --t-elev-2: #102e27; --t-elev-3: #173d34;
  --t-text: #ecfdf5; --t-muted: #80c7b0;
  --t-border: #144539; --t-border-strong: #1d6957;
  --t-glass: rgba(52, 211, 153, .08); --t-glass-strong: rgba(124, 58, 237, .12);
  --t-glow: rgba(52, 211, 153, .55);
  --t-sh-1: rgba(0, 0, 0, .4); --t-sh-2: rgba(5, 20, 17, .5); --t-sh-3: rgba(5, 20, 17, .7);
}

body[data-theme="lava"] {
  --t-primary: #f87171; --t-primary-2: #991b1b; --t-on-primary: #450a0a;
  --t-brand-1: #dc2626; --t-brand-2: #ea580c; --t-accent: #fde047;
  --t-bg-0: #180808; --t-bg-1: #0d0303;
  --t-elev-1: #260e0e; --t-elev-2: #361414; --t-elev-3: #4a1c1c;
  --t-text: #fef2f2; --t-muted: #dca2a2;
  --t-border: #4a1c1c; --t-border-strong: #7f1d1d;
  --t-glass: rgba(248, 113, 113, .08); --t-glass-strong: rgba(234, 88, 12, .14);
  --t-glow: rgba(248, 113, 113, .6);
  --t-sh-1: rgba(0, 0, 0, .45); --t-sh-2: rgba(24, 8, 8, .5); --t-sh-3: rgba(24, 8, 8, .75);
}

/* ── 7. Royal & Luxury ───────────────────────────────────────────── */

body[data-theme="royal"] {
  --t-primary: #f5d67b; --t-primary-2: #5b3a06; --t-on-primary: #241703;
  --t-brand-1: #3f1d78; --t-brand-2: #7e22ce; --t-accent: #fcd34d;
  --t-bg-0: #120b1d; --t-bg-1: #090512;
  --t-elev-1: #1d1230; --t-elev-2: #26183d; --t-elev-3: #33224f;
  --t-text: #f6efff; --t-muted: #c2b0d8;
  --t-border: #33234d; --t-border-strong: #574077;
  --t-glass: rgba(245, 214, 123, .07); --t-glass-strong: rgba(245, 214, 123, .12);
  --t-glow: rgba(245, 214, 123, .45);
  --t-sh-1: rgba(0, 0, 0, .42); --t-sh-2: rgba(25, 5, 45, .5); --t-sh-3: rgba(35, 8, 60, .62);
}

body[data-theme="champagne"] {
  --t-primary: #fbbf24; --t-primary-2: #78350f; --t-on-primary: #451a03;
  --t-brand-1: #b45309; --t-brand-2: #d97706; --t-accent: #fef08a;
  --t-bg-0: #16120b; --t-bg-1: #0c0a05;
  --t-elev-1: #241d12; --t-elev-2: #302718; --t-elev-3: #403420;
  --t-text: #fefce8; --t-muted: #d4c598;
  --t-border: #3a2e1c; --t-border-strong: #5c4a2c;
  --t-glass: rgba(251, 191, 36, .08); --t-glass-strong: rgba(217, 119, 6, .13);
  --t-glow: rgba(251, 191, 36, .45);
  --t-sh-1: rgba(0, 0, 0, .45); --t-sh-2: rgba(22, 18, 11, .5); --t-sh-3: rgba(22, 18, 11, .7);
}

body[data-theme="emerald"] {
  --t-primary: #34d399; --t-primary-2: #064e3b; --t-on-primary: #022c22;
  --t-brand-1: #047857; --t-brand-2: #065f46; --t-accent: #a7f3d0;
  --t-bg-0: #061712; --t-bg-1: #030d0a;
  --t-elev-1: #0d261e; --t-elev-2: #123328; --t-elev-3: #1a4537;
  --t-text: #ecfdf5; --t-muted: #80c7b0;
  --t-border: #164032; --t-border-strong: #235c49;
  --t-glass: rgba(52, 211, 153, .08); --t-glass-strong: rgba(4, 120, 87, .13);
  --t-glow: rgba(52, 211, 153, .5);
  --t-sh-1: rgba(0, 0, 0, .45); --t-sh-2: rgba(6, 23, 18, .5); --t-sh-3: rgba(6, 23, 18, .7);
}

body[data-theme="ruby"] {
  --t-primary: #f43f5e; --t-primary-2: #881337; --t-on-primary: #4c0519;
  --t-brand-1: #be123c; --t-brand-2: #9f1239; --t-accent: #fecdd3;
  --t-bg-0: #1a0a10; --t-bg-1: #0d0407;
  --t-elev-1: #281019; --t-elev-2: #361522; --t-elev-3: #4a1d2e;
  --t-text: #fff1f2; --t-muted: #d99aa5;
  --t-border: #401827; --t-border-strong: #66263e;
  --t-glass: rgba(244, 63, 94, .08); --t-glass-strong: rgba(190, 18, 60, .13);
  --t-glow: rgba(244, 63, 94, .5);
  --t-sh-1: rgba(0, 0, 0, .45); --t-sh-2: rgba(26, 10, 16, .5); --t-sh-3: rgba(26, 10, 16, .7);
}

/* ── 8. Natural & Earthy ─────────────────────────────────────────── */

body[data-theme="forest"] {
  --t-primary: #4ade80; --t-primary-2: #14532d; --t-on-primary: #052e16;
  --t-brand-1: #15803d; --t-brand-2: #166534; --t-accent: #86efac;
  --t-bg-0: #0a140d; --t-bg-1: #040a06;
  --t-elev-1: #122116; --t-elev-2: #182e1f; --t-elev-3: #213d2a;
  --t-text: #f0fdf4; --t-muted: #8bcfa0;
  --t-border: #1a3823; --t-border-strong: #285435;
  --t-glass: rgba(74, 222, 128, .08); --t-glass-strong: rgba(21, 128, 61, .13);
  --t-glow: rgba(74, 222, 128, .5);
  --t-sh-1: rgba(0, 0, 0, .45); --t-sh-2: rgba(10, 20, 13, .5); --t-sh-3: rgba(10, 20, 13, .7);
}

body[data-theme="terracotta"] {
  --t-primary: #fb923c; --t-primary-2: #7c2d12; --t-on-primary: #431407;
  --t-brand-1: #c2410c; --t-brand-2: #9a3412; --t-accent: #ffedd5;
  --t-bg-0: #160e0a; --t-bg-1: #0b0704;
  --t-elev-1: #241711; --t-elev-2: #301e17; --t-elev-3: #422a1f;
  --t-text: #fff7ed; --t-muted: #d4a995;
  --t-border: #3b251c; --t-border-strong: #59392b;
  --t-glass: rgba(251, 146, 60, .08); --t-glass-strong: rgba(194, 65, 12, .13);
  --t-glow: rgba(251, 146, 60, .5);
  --t-sh-1: rgba(0, 0, 0, .45); --t-sh-2: rgba(22, 14, 10, .5); --t-sh-3: rgba(22, 14, 10, .7);
}

body[data-theme="slate"] {
  --t-primary: #38bdf8; --t-primary-2: #0369a1; --t-on-primary: #0c4a6e;
  --t-brand-1: #0284c7; --t-brand-2: #334155; --t-accent: #bae6fd;
  --t-bg-0: #0f172a; --t-bg-1: #080d1a;
  --t-elev-1: #1e293b; --t-elev-2: #28364f; --t-elev-3: #334155;
  --t-text: #f8fafc; --t-muted: #94a3b8;
  --t-border: #29384d; --t-border-strong: #3b506e;
  --t-glass: rgba(56, 189, 248, .08); --t-glass-strong: rgba(2, 132, 199, .13);
  --t-glow: rgba(56, 189, 248, .5);
  --t-sh-1: rgba(0, 0, 0, .45); --t-sh-2: rgba(15, 23, 42, .5); --t-sh-3: rgba(15, 23, 42, .7);
}

body[data-theme="dusk"] {
  --t-primary: #a855f7; --t-primary-2: #581c87; --t-on-primary: #3b0764;
  --t-brand-1: #7e22ce; --t-brand-2: #c026d3; --t-accent: #e9d5ff;
  --t-bg-0: #130a1c; --t-bg-1: #09040e;
  --t-elev-1: #1f112e; --t-elev-2: #2b173f; --t-elev-3: #3a1f54;
  --t-text: #faf5ff; --t-muted: #c4a7e7;
  --t-border: #351c4f; --t-border-strong: #532c7a;
  --t-glass: rgba(168, 85, 247, .08); --t-glass-strong: rgba(126, 34, 206, .13);
  --t-glow: rgba(168, 85, 247, .5);
  --t-sh-1: rgba(0, 0, 0, .45); --t-sh-2: rgba(19, 10, 28, .5); --t-sh-3: rgba(19, 10, 28, .7);
}

/* ════════════════════════════════════════════════════════════════
   Theme effects — opt-in atmospherics driven by data-theme-fx
   ════════════════════════════════════════════════════════════════ */

@keyframes tpTwinkle {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
@keyframes tpDrift {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-14px, 12px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes tpAuroraShift {
  0% { transform: translate3d(-6%, 0, 0) rotate(0deg); }
  50% { transform: translate3d(6%, 4%, 0) rotate(8deg); }
  100% { transform: translate3d(-6%, 0, 0) rotate(0deg); }
}

/* Star field: two layers of pin-point stars that breathe */
body[data-theme-fx="stars"] .section.v2-hero,
body[data-theme-fx="stars"] .timer-card:not(.is-paused):not(.is-done) {
  background:
    radial-gradient(120% 80% at 50% 8%, color-mix(in srgb, var(--t-brand-2) 55%, transparent), transparent 70%),
    linear-gradient(168deg, color-mix(in srgb, var(--t-brand-1) 42%, var(--t-bg-1)) 0%, var(--t-bg-1) 62%, var(--t-bg-0) 100%);
}
body[data-theme-fx="stars"] .section.v2-hero::after,
body[data-theme-fx="stars"] .timer-card:not(.is-paused):not(.is-done)::after,
body[data-theme-fx="stars"] .bg::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.7px 1.7px at 12% 18%, rgba(255, 255, 255, .95), transparent 60%),
    radial-gradient(1.4px 1.4px at 32% 62%, rgba(255, 255, 255, .8), transparent 60%),
    radial-gradient(2px 2px at 58% 28%, rgba(255, 255, 255, 1), transparent 60%),
    radial-gradient(1.3px 1.3px at 74% 74%, rgba(255, 255, 255, .75), transparent 60%),
    radial-gradient(1.8px 1.8px at 88% 36%, rgba(255, 255, 255, .9), transparent 60%),
    radial-gradient(1.2px 1.2px at 22% 84%, rgba(255, 255, 255, .65), transparent 60%),
    radial-gradient(1.5px 1.5px at 46% 8%, rgba(255, 255, 255, .85), transparent 60%),
    radial-gradient(1.1px 1.1px at 66% 52%, rgba(255, 255, 255, .6), transparent 60%);
  background-repeat: repeat;
  background-size: 180px 180px;
  animation: tpTwinkle 5.5s ease-in-out infinite;
  transform: none;
  pointer-events: none;
}
body[data-theme-fx="stars"] .bg::after { position: fixed; }

/* Aurora ribbons: soft colour clouds sliding behind the timer */
body[data-theme-fx="aurora"] .section.v2-hero::after,
body[data-theme-fx="aurora"] .timer-card:not(.is-paused):not(.is-done)::after,
body[data-theme-fx="aurora"] .bg::after {
  content: "";
  position: absolute; inset: -30%;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--t-primary) 45%, transparent), transparent) 18% 24% / 55% 55% no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, var(--t-accent) 40%, transparent), transparent) 76% 66% / 60% 60% no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, var(--t-brand-2) 55%, transparent), transparent) 52% 88% / 65% 55% no-repeat;
  filter: blur(28px);
  opacity: .55;
  animation: tpAuroraShift 18s ease-in-out infinite;
  pointer-events: none;
}
body[data-theme-fx="aurora"] .bg::after { position: fixed; inset: -20%; opacity: .45; }

/* Neon: everything that matters gets a light bloom */
body[data-theme-fx="neon"] #timer-display,
body[data-theme-fx="neon"] #fs-timer-display {
  color: var(--t-primary);
  text-shadow: 0 0 6px var(--t-glow), 0 0 22px var(--t-glow), 0 0 44px var(--t-glow);
}
body[data-theme-fx="neon"] .progress-ring-circle {
  stroke: var(--t-primary) !important;
  filter: drop-shadow(0 0 6px var(--t-glow)) drop-shadow(0 0 14px var(--t-glow));
}
body[data-theme-fx="neon"] .timer-visual::before {
  border-color: color-mix(in srgb, var(--t-primary) 22%, transparent) !important;
}
body[data-theme-fx="neon"] .section.v2-hero {
  border: 1px solid color-mix(in srgb, var(--t-primary) 35%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--t-primary) 12%, transparent), 0 18px 40px var(--t-sh-3),
    inset 0 0 60px color-mix(in srgb, var(--t-primary) 8%, transparent);
}
body[data-theme-fx="neon"] .timer-card:not(.is-paused):not(.is-done) {
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--t-primary) 14%, transparent), transparent 70%),
    linear-gradient(160deg, var(--t-elev-2), var(--t-bg-0));
  border: 1px solid color-mix(in srgb, var(--t-primary) 32%, transparent);
  box-shadow: 0 30px 80px var(--t-sh-3), inset 0 0 80px color-mix(in srgb, var(--t-primary) 8%, transparent);
}
body[data-theme-fx="neon"] .section.v2-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--t-primary) 16%, transparent), transparent 62%);
  animation: none;
  pointer-events: none;
}
body[data-theme-fx="neon"] .v2-hero-label,
body[data-theme-fx="neon"] .timer-controls button,
body[data-theme-fx="neon"] .v2-preset { text-shadow: 0 0 10px color-mix(in srgb, var(--t-primary) 30%, transparent); }
body[data-theme-fx="neon"] .timer-display,
body[data-theme-fx="neon"] .timer-card { text-shadow: none; }

/* Desktop rail decorations follow the same effect groups */
@media (min-width: 1024px) {
  body[data-theme-fx="stars"] .section.v2-hero,
  body[data-theme-fx="aurora"] .section.v2-hero { background: none; }
  body[data-theme-fx="stars"] .section.v2-hero::after,
  body[data-theme-fx="aurora"] .section.v2-hero::after { content: none; }
  body[data-theme-fx="neon"] .section.v2-hero { border: none; box-shadow: none; }

  body[data-theme-fx="stars"] .v2-col-main {
    background:
      radial-gradient(90% 45% at 50% 4%, color-mix(in srgb, var(--t-brand-2) 55%, transparent), transparent 70%),
      linear-gradient(178deg, color-mix(in srgb, var(--t-brand-1) 40%, var(--t-bg-1)) 0%, var(--t-bg-1) 58%, var(--t-bg-0) 100%);
  }
  body[data-theme-fx="stars"] .v2-col-main::after {
    background-image:
      radial-gradient(1.7px 1.7px at 12% 18%, rgba(255, 255, 255, .95), transparent 60%),
      radial-gradient(1.4px 1.4px at 32% 62%, rgba(255, 255, 255, .8), transparent 60%),
      radial-gradient(2px 2px at 58% 28%, rgba(255, 255, 255, 1), transparent 60%),
      radial-gradient(1.3px 1.3px at 74% 74%, rgba(255, 255, 255, .75), transparent 60%),
      radial-gradient(1.8px 1.8px at 88% 36%, rgba(255, 255, 255, .9), transparent 60%),
      radial-gradient(1.2px 1.2px at 22% 84%, rgba(255, 255, 255, .65), transparent 60%);
    background-size: 170px 170px;
    inset: 0;
    animation: tpTwinkle 5.5s ease-in-out infinite;
  }
  body[data-theme-fx="aurora"] .v2-col-main::after {
    background:
      radial-gradient(closest-side, color-mix(in srgb, var(--t-primary) 45%, transparent), transparent) 20% 22% / 70% 45% no-repeat,
      radial-gradient(closest-side, color-mix(in srgb, var(--t-accent) 40%, transparent), transparent) 70% 62% / 75% 45% no-repeat,
      radial-gradient(closest-side, color-mix(in srgb, var(--t-brand-2) 55%, transparent), transparent) 40% 90% / 80% 40% no-repeat;
    filter: blur(30px);
    opacity: .5;
    inset: -35%;
    animation: tpAuroraShift 18s ease-in-out infinite;
  }
  body[data-theme-fx="neon"] .v2-col-main {
    background: linear-gradient(180deg, var(--t-bg-1), var(--t-bg-0));
    border-right: 1px solid color-mix(in srgb, var(--t-primary) 30%, transparent);
    box-shadow: 8px 0 40px color-mix(in srgb, var(--t-primary) 10%, transparent);
  }
  body[data-theme-fx="neon"] .v2-col-main::after {
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--t-primary) 14%, transparent), transparent 60%);
    inset: 0;
    filter: none;
    animation: none;
  }
  body[data-theme-fx="neon"] .section.v2-hero { border: none; box-shadow: none; }
}

/* ════════════════════════════════════════════════════════════════
   Theme picker — shared UI used by the app settings and the viewer
   ════════════════════════════════════════════════════════════════ */

.tp-theme-group + .tp-theme-group { margin-top: 14px; }
.tp-theme-group-label {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--t-muted); margin-bottom: 8px; display: block; text-align: left;
}
.tp-theme-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px; width: 100%;
}
.tp-theme-card {
  position: relative; display: block; width: 100%; padding: 0;
  border: 1px solid var(--t-border); border-radius: 14px;
  background: var(--t-elev-1); color: var(--t-text);
  overflow: hidden; cursor: pointer; text-align: left;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.tp-theme-card:hover { transform: translateY(-2px); border-color: var(--t-border-strong); box-shadow: 0 8px 20px var(--t-sh-2); }
.tp-theme-card[aria-pressed="true"] { border-color: var(--t-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--t-primary) 40%, transparent); }
.tp-theme-preview { display: block; height: 46px; position: relative; }
.tp-theme-preview::after {
  content: ""; position: absolute; left: 8px; bottom: 7px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .85);
  border-right-color: transparent; transform: rotate(-35deg);
}
.tp-theme-name {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 8px 7px; font-size: 11px; font-weight: 600; line-height: 1.2;
}
.tp-theme-card[aria-pressed="true"] .tp-theme-name::after {
  content: "check"; font-family: 'Material Symbols Outlined';
  margin-left: auto; font-size: 14px; color: var(--t-primary);
}
.tp-theme-fx-tag {
  position: absolute; top: 6px; right: 6px;
  font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 5px; border-radius: 999px;
  background: rgba(0, 0, 0, .38); color: #fff; backdrop-filter: blur(4px);
}
.tp-theme-locked { opacity: .5; pointer-events: none; }