/* PingLater — extra skins + theme picker.
   Dark / Light tokens stay in each page stylesheet; this file adds the
   atmospheres and the Settings swatches. Loaded after page CSS. */

/* ---------- Shared extra tokens (defaults = current Dark) ---------- */
:root {
  --logo-wrap-bg: #1A2820;
  --logo-text: #FFFFFF;
  --logo-subtitle: #6E7B74;
  --text-secondary: #8A8A8A;
  --accent-glow: rgba(74, 222, 128, 0.28);
  --accent-secondary: #4ADE80;
  --scrollbar-thumb: rgba(245, 245, 240, 0.18);
  --scrollbar-thumb-hover: rgba(245, 245, 240, 0.28);
}

/* ---------- Light (token echo so every page stays consistent) ---------- */
body[data-theme="light"] {
  color-scheme: light;
  --logo-wrap-bg: #FFFFFF;
  --logo-text: #122018;
  --logo-subtitle: #7A8880;
  --text-secondary: #5B6570;
  --accent-glow: rgba(34, 197, 94, 0.22);
  --accent-secondary: #0F9A4A;
  --scrollbar-thumb: rgba(26, 31, 28, 0.18);
  --scrollbar-thumb-hover: rgba(26, 31, 28, 0.28);
}

/* ================================================================== */
/* 1. Hollow Eve — candlelit bone, pumpkin, moon. Not a movie skin.   */
/* ================================================================== */
body[data-theme="pumpkin"] {
  color-scheme: dark;
  --bg-primary: #0C0810;
  --bg-secondary: #16111C;
  --bg-hover: #221A28;
  --bg-tertiary: #120C16;
  --bg-card: #1C1522;
  --text-primary: #F3EBE1;
  --text-muted: #A89888;
  --text-subtle: #7A6C60;
  --text-secondary: #A89888;
  --accent: #E08A3C;
  --accent-dim: rgba(224, 138, 60, 0.14);
  --accent-hover: #F0B25A;
  --accent-glow: rgba(253, 230, 138, 0.22);
  --accent-secondary: #FDE68A;
  --border: rgba(243, 235, 225, 0.07);
  --border-hover: rgba(224, 138, 60, 0.38);
  --danger: #E85D4C;
  --danger-dim: rgba(232, 93, 76, 0.12);
  --warning: #F0B25A;
  --shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
  --logo-wrap-bg: #1C1522;
  --logo-text: #F3EBE1;
  --logo-subtitle: #8A7A68;
  --scrollbar-thumb: rgba(224, 138, 60, 0.28);
  --scrollbar-thumb-hover: rgba(224, 138, 60, 0.42);
}

body[data-theme="pumpkin"]::before {
  background-image:
    radial-gradient(ellipse 240px 200px at 78% -12%, rgba(253, 230, 138, 0.16), transparent 58%),
    radial-gradient(ellipse 200px 140px at 8% 108%, rgba(224, 138, 60, 0.08), transparent 55%),
    linear-gradient(rgba(243, 235, 225, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 235, 225, 0.028) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px, 22px 22px;
}

body[data-theme="pumpkin"] .logo-text {
  font-family: Georgia, 'Palatino Linotype', 'Times New Roman', serif;
  letter-spacing: 0.5px;
  color: var(--logo-text);
  text-shadow: 0 0 22px rgba(253, 230, 138, 0.28);
}

body[data-theme="pumpkin"] .logo-wrapper {
  background: var(--logo-wrap-bg);
  box-shadow: 0 0 20px rgba(253, 230, 138, 0.12), 0 2px 8px rgba(0, 0, 0, 0.4);
}

body[data-theme="pumpkin"] .logo-subtitle {
  color: var(--logo-subtitle);
}

body[data-theme="pumpkin"] .logo-icon .logo-bell {
  filter: drop-shadow(0 0 10px rgba(224, 138, 60, 0.45));
}

body[data-theme="pumpkin"] .tab-btn.active::after {
  background: linear-gradient(90deg, #E08A3C, #FDE68A);
}

/* ================================================================== */
/* 2. Synthwave — midnight purple, magenta grid, cyan spark           */
/* ================================================================== */
body[data-theme="synthwave"] {
  color-scheme: dark;
  --bg-primary: #0E0618;
  --bg-secondary: #1A0B2E;
  --bg-hover: #2A1250;
  --bg-tertiary: #140820;
  --bg-card: #1F0E38;
  --text-primary: #F6F2FF;
  --text-muted: #A898C8;
  --text-subtle: #7E6E9A;
  --text-secondary: #A898C8;
  --accent: #FF2EC8;
  --accent-dim: rgba(255, 46, 200, 0.14);
  --accent-hover: #FF5AD6;
  --accent-glow: rgba(255, 46, 200, 0.35);
  --accent-secondary: #00E5FF;
  --border: rgba(255, 46, 200, 0.16);
  --border-hover: rgba(0, 229, 255, 0.45);
  --danger: #FF4D6D;
  --danger-dim: rgba(255, 77, 109, 0.14);
  --warning: #FFB020;
  --shadow: 0 6px 24px rgba(255, 46, 200, 0.16);
  --logo-wrap-bg: #220C40;
  --logo-text: #FFFFFF;
  --logo-subtitle: #00E5FF;
  --scrollbar-thumb: rgba(255, 46, 200, 0.32);
  --scrollbar-thumb-hover: rgba(0, 229, 255, 0.4);
}

body[data-theme="synthwave"]::before {
  background-image:
    radial-gradient(ellipse 160px 80px at 50% -8%, rgba(255, 140, 0, 0.28), rgba(255, 46, 200, 0.08) 42%, transparent 70%),
    linear-gradient(to top, rgba(255, 46, 200, 0.16), transparent 42%),
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(255, 46, 200, 0.14) 26px 27px),
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(255, 46, 200, 0.1) 26px 27px);
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 38%, transparent 72%);
  mask-image: linear-gradient(to top, #000 0%, #000 38%, transparent 72%);
}

body[data-theme="synthwave"] .logo-text {
  color: var(--logo-text);
  letter-spacing: 1px;
  text-shadow:
    0 0 10px rgba(255, 46, 200, 0.55),
    0 0 22px rgba(0, 229, 255, 0.25);
}

body[data-theme="synthwave"] .logo-wrapper {
  background: var(--logo-wrap-bg);
  box-shadow: 0 0 16px rgba(255, 46, 200, 0.28);
}

body[data-theme="synthwave"] .logo-subtitle {
  color: var(--logo-subtitle);
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.45);
}

body[data-theme="synthwave"] .logo-icon .logo-bell {
  filter: drop-shadow(0 0 10px rgba(255, 46, 200, 0.55));
}

body[data-theme="synthwave"] .tab-btn.active {
  color: var(--accent-secondary);
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.45);
}

body[data-theme="synthwave"] .tab-btn.active::after {
  background: linear-gradient(90deg, #FF2EC8, #00E5FF);
  box-shadow: 0 0 10px rgba(255, 46, 200, 0.55);
}

body[data-theme="synthwave"] .snooze-btn:not(:disabled),
body[data-theme="synthwave"] .primary-btn:not(:disabled) {
  box-shadow: 0 0 16px rgba(255, 46, 200, 0.28);
}

/* ================================================================== */
/* 3. CRT — phosphor terminal, scanlines, vignette                    */
/* ================================================================== */
body[data-theme="crt"] {
  color-scheme: dark;
  --bg-primary: #020805;
  --bg-secondary: #07140C;
  --bg-hover: #0C1F14;
  --bg-tertiary: #04100A;
  --bg-card: #0A1A10;
  --text-primary: #C6F5C8;
  --text-muted: #6FAA70;
  --text-subtle: #4A7A4C;
  --text-secondary: #6FAA70;
  --accent: #3DFF7A;
  --accent-dim: rgba(61, 255, 122, 0.12);
  --accent-hover: #62FF94;
  --accent-glow: rgba(61, 255, 122, 0.32);
  --accent-secondary: #9AFFB4;
  --border: rgba(61, 255, 122, 0.16);
  --border-hover: rgba(61, 255, 122, 0.42);
  --danger: #FF5A5A;
  --danger-dim: rgba(255, 90, 90, 0.12);
  --warning: #E8D44D;
  --shadow: 0 0 14px rgba(61, 255, 122, 0.12);
  --logo-wrap-bg: #031108;
  --logo-text: #7CFF9C;
  --logo-subtitle: #4A9A58;
  --scrollbar-thumb: rgba(61, 255, 122, 0.28);
  --scrollbar-thumb-hover: rgba(61, 255, 122, 0.42);
}

body[data-theme="crt"]::before {
  background-image:
    radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, 0.38) 100%),
    linear-gradient(rgba(61, 255, 122, 0.035) 1px, transparent 1px);
  background-size: 100% 100%, 100% 3px;
}

body[data-theme="crt"]::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.16) 0px,
    rgba(0, 0, 0, 0.16) 1px,
    transparent 1px,
    transparent 3px
  );
}

body[data-theme="crt"] .logo-text {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  letter-spacing: 1.2px;
  color: var(--logo-text);
  text-shadow: 0 0 10px rgba(61, 255, 122, 0.5);
}

body[data-theme="crt"] .logo-wrapper {
  background: var(--logo-wrap-bg);
  border: 1px solid rgba(61, 255, 122, 0.28);
  box-shadow: 0 0 14px rgba(61, 255, 122, 0.18);
}

body[data-theme="crt"] .logo-subtitle {
  color: var(--logo-subtitle);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

body[data-theme="crt"] .logo-icon .logo-bell {
  filter: drop-shadow(0 0 8px rgba(61, 255, 122, 0.5));
}

body[data-theme="crt"] .tab-btn.active::after {
  box-shadow: 0 0 8px rgba(61, 255, 122, 0.55);
}

body[data-theme="crt"] .snooze-btn:not(:disabled),
body[data-theme="crt"] .primary-btn:not(:disabled) {
  box-shadow: 0 0 14px rgba(61, 255, 122, 0.28);
}

/* ================================================================== */
/* 4. 8-bit — chunky edges, NES night, pink + gold                    */
/* ================================================================== */
body[data-theme="pixel"] {
  color-scheme: dark;
  --bg-primary: #12102A;
  --bg-secondary: #1C1840;
  --bg-hover: #2A2460;
  --bg-tertiary: #161232;
  --bg-card: #221C4C;
  --text-primary: #F4F1FF;
  --text-muted: #9B93C8;
  --text-subtle: #6E6690;
  --text-secondary: #9B93C8;
  --accent: #FF4D8D;
  --accent-dim: rgba(255, 77, 141, 0.14);
  --accent-hover: #FFD93D;
  --accent-glow: rgba(255, 217, 61, 0.28);
  --accent-secondary: #FFD93D;
  --border: rgba(255, 255, 255, 0.12);
  --border-hover: rgba(255, 217, 61, 0.5);
  --danger: #FF3B3B;
  --danger-dim: rgba(255, 59, 59, 0.14);
  --warning: #FFD93D;
  --shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --logo-wrap-bg: #2A2460;
  --logo-text: #FFD93D;
  --logo-subtitle: #FF4D8D;
  --scrollbar-thumb: rgba(255, 77, 141, 0.35);
  --scrollbar-thumb-hover: rgba(255, 217, 61, 0.45);
}

body[data-theme="pixel"]::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 2px, transparent 2px);
  background-size: 8px 8px;
}

body[data-theme="pixel"] .logo-text {
  color: var(--logo-text);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-size: 16px;
  text-shadow: 2px 2px 0 #2A2460;
}

body[data-theme="pixel"] .logo-wrapper {
  background: var(--logo-wrap-bg);
  border-radius: 0;
  border: 2px solid #FFD93D;
  box-shadow: 3px 3px 0 #FF4D8D;
}

body[data-theme="pixel"] .logo-subtitle {
  color: var(--logo-subtitle);
}

body[data-theme="pixel"] .tab-btn.active::after {
  border-radius: 0;
  height: 3px;
  background: #FFD93D;
}

body[data-theme="pixel"].full-page .container {
  border-radius: 0;
}

/* ================================================================== */
/* 5. Starry Night — Prussian blue, gold stars                        */
/* ================================================================== */
body[data-theme="starry"] {
  color-scheme: dark;
  --bg-primary: #0A1024;
  --bg-secondary: #141C38;
  --bg-hover: #1C2750;
  --bg-tertiary: #0E1630;
  --bg-card: #182044;
  --text-primary: #E8EEF8;
  --text-muted: #8B9BB8;
  --text-subtle: #6A7A96;
  --text-secondary: #8B9BB8;
  --accent: #E8C547;
  --accent-dim: rgba(232, 197, 71, 0.14);
  --accent-hover: #F5D76A;
  --accent-glow: rgba(232, 197, 71, 0.28);
  --accent-secondary: #7EB6E8;
  --border: rgba(232, 197, 71, 0.12);
  --border-hover: rgba(232, 197, 71, 0.38);
  --danger: #E86B6B;
  --danger-dim: rgba(232, 107, 107, 0.12);
  --warning: #E8C547;
  --shadow: 0 8px 28px rgba(6, 10, 24, 0.55);
  --logo-wrap-bg: #1A2250;
  --logo-text: #F5E6A8;
  --logo-subtitle: #8B9BB8;
  --scrollbar-thumb: rgba(232, 197, 71, 0.28);
  --scrollbar-thumb-hover: rgba(232, 197, 71, 0.42);
}

body[data-theme="starry"]::before {
  background-image:
    radial-gradient(1px 1px at 8% 12%, #fff8dc, transparent),
    radial-gradient(1.5px 1.5px at 22% 28%, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1px 1px at 36% 8%, #ffe9a0, transparent),
    radial-gradient(1.2px 1.2px at 48% 22%, #ffffff, transparent),
    radial-gradient(1px 1px at 61% 6%, #fff3c4, transparent),
    radial-gradient(1.6px 1.6px at 74% 18%, rgba(255, 255, 220, 0.9), transparent),
    radial-gradient(1px 1px at 86% 10%, #ffffff, transparent),
    radial-gradient(1px 1px at 93% 26%, #ffe9a0, transparent),
    radial-gradient(1.3px 1.3px at 14% 48%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 29% 62%, #fff8dc, transparent),
    radial-gradient(1px 1px at 55% 54%, #ffffff, transparent),
    radial-gradient(1.4px 1.4px at 70% 70%, #ffe9a0, transparent),
    radial-gradient(1px 1px at 82% 58%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1px 1px at 41% 78%, #fff3c4, transparent),
    radial-gradient(1.5px 1.5px at 91% 80%, #ffffff, transparent),
    radial-gradient(ellipse 70% 45% at 18% 82%, rgba(40, 80, 170, 0.32), transparent),
    radial-gradient(ellipse 50% 36% at 82% 18%, rgba(90, 70, 160, 0.22), transparent);
  background-size: 100% 100%;
}

body[data-theme="starry"] .logo-text {
  color: var(--logo-text);
  font-style: italic;
  letter-spacing: 0.4px;
  text-shadow: 0 0 18px rgba(232, 197, 71, 0.35);
}

body[data-theme="starry"] .logo-wrapper {
  background: var(--logo-wrap-bg);
  box-shadow: 0 0 18px rgba(232, 197, 71, 0.16);
}

body[data-theme="starry"] .logo-subtitle {
  color: var(--logo-subtitle);
}

body[data-theme="starry"] .logo-icon .logo-bell {
  filter: drop-shadow(0 0 10px rgba(232, 197, 71, 0.4));
}

body[data-theme="starry"] .tab-btn.active::after {
  background: linear-gradient(90deg, #E8C547, #7EB6E8);
  box-shadow: 0 0 8px rgba(232, 197, 71, 0.45);
}

/* ================================================================== */
/* 6. Newsprint — warm paper, ink. Atmosphere only, no overlays.      */
/* ================================================================== */
body[data-theme="newsprint"] {
  color-scheme: light;
  --bg-primary: #E8E2D4;
  --bg-secondary: #F4EEE0;
  --bg-hover: #DDD6C6;
  --bg-tertiary: #E2DCCA;
  --bg-card: #F7F1E4;
  --text-primary: #161616;
  --text-muted: #4A4A4A;
  --text-subtle: #6A6A6A;
  --text-secondary: #4A4A4A;
  --accent: #1A1A1A;
  --accent-dim: rgba(26, 26, 26, 0.08);
  --accent-hover: #2E2E2E;
  --accent-glow: rgba(26, 26, 26, 0.12);
  --accent-secondary: #3A3A3A;
  --border: rgba(26, 26, 26, 0.16);
  --border-hover: rgba(26, 26, 26, 0.4);
  --danger: #2A2A2A;
  --danger-dim: rgba(26, 26, 26, 0.1);
  --warning: #3A3A3A;
  --shadow: 0 2px 8px rgba(26, 26, 26, 0.1);
  --logo-wrap-bg: #F7F1E4;
  --logo-text: #111111;
  --logo-subtitle: #4A4A4A;
  --scrollbar-thumb: rgba(26, 26, 26, 0.22);
  --scrollbar-thumb-hover: rgba(26, 26, 26, 0.36);
}

body[data-theme="newsprint"]::before {
  background-image:
    repeating-linear-gradient(0deg, rgba(26, 26, 26, 0.03) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(26, 26, 26, 0.02) 0 1px, transparent 1px 11px);
  background-size: auto;
}

body[data-theme="newsprint"] .logo-text {
  font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--logo-text);
  text-shadow: none;
}

body[data-theme="newsprint"] .logo-wrapper {
  background: var(--logo-wrap-bg);
  box-shadow: none;
  border: 2px solid #1A1A1A;
}

body[data-theme="newsprint"] .logo-subtitle {
  color: var(--logo-subtitle);
  letter-spacing: 2.4px;
}

body[data-theme="newsprint"] .logo-icon .logo-bell {
  filter: none;
}

body[data-theme="newsprint"] .tab-btn.active {
  color: #111111;
  font-weight: 700;
}

body[data-theme="newsprint"] .tab-btn.active::after {
  background: #1A1A1A;
  box-shadow: none;
  height: 2px;
  border-radius: 0;
}

body[data-theme="newsprint"] .tabs {
  border-bottom-color: rgba(26, 26, 26, 0.22);
}

body[data-theme="newsprint"] .section-title,
body[data-theme="newsprint"] .option-label {
  color: rgba(22, 22, 22, 0.62);
}

body[data-theme="newsprint"] .repeat-toggle {
  color: rgba(22, 22, 22, 0.72);
}

body[data-theme="newsprint"] .footer {
  color: rgba(22, 22, 22, 0.5);
}

body[data-theme="newsprint"] .footer a {
  color: rgba(22, 22, 22, 0.7);
}

body[data-theme="newsprint"] .snooze-btn:not(:disabled),
body[data-theme="newsprint"] .primary-btn:not(:disabled),
body[data-theme="newsprint"] .calendar-confirm-btn:not(:disabled),
body[data-theme="newsprint"] .close-tab-btn {
  color: #F4EEE0;
  box-shadow: none;
}

body[data-theme="newsprint"] .snooze-btn:disabled {
  background: #F4EEE0;
  border: 1px solid rgba(26, 26, 26, 0.16);
  color: var(--text-muted);
}

body[data-theme="newsprint"] .time-btn,
body[data-theme="newsprint"] .preset-btn,
body[data-theme="newsprint"] .custom-time-toggle,
body[data-theme="newsprint"] .multi-tabs-btn,
body[data-theme="newsprint"] .repeat-toggle,
body[data-theme="newsprint"] .custom-select-trigger,
body[data-theme="newsprint"] .toggle-group,
body[data-theme="newsprint"] .notes-input,
body[data-theme="newsprint"] .nl-time-input,
body[data-theme="newsprint"] .add-category-btn {
  box-shadow: none;
}

body[data-theme="newsprint"] .time-input,
body[data-theme="newsprint"] .time-input-small,
body[data-theme="newsprint"] .datetime-input {
  color-scheme: light;
}

body[data-theme="newsprint"] .slider {
  background-color: #C8C0B0;
}

body[data-theme="newsprint"] .slider::before {
  background-color: #F7F1E4;
}

body[data-theme="newsprint"] .switch input:checked + .slider::before {
  background-color: #F4EEE0;
}

body[data-theme="newsprint"] .toast {
  color: #F4EEE0;
}

body[data-theme="newsprint"] .theme-swatch.is-selected,
body[data-theme="newsprint"] .theme-swatch[aria-checked="true"] {
  box-shadow: none;
}

body[data-theme="newsprint"] .theme-swatch-preview {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

/* Same accent hue, turned down so the large snooze slab doesn't glare.
   Icons, chips, and the active tab stay on the full accent.
   Light and newsprint are already quiet. */
body[data-theme="synthwave"] .snooze-btn:not(:disabled),
body[data-theme="synthwave"] #multi-tabs-snooze:not(:disabled) {
  background: #D126A4;
  color: #1A0814;
  box-shadow: none;
}
body[data-theme="synthwave"] .snooze-btn:hover:not(:disabled),
body[data-theme="synthwave"] #multi-tabs-snooze:hover:not(:disabled) {
  background: #BD2294;
  box-shadow: none;
}

body[data-theme="crt"] .snooze-btn:not(:disabled),
body[data-theme="crt"] #multi-tabs-snooze:not(:disabled) {
  background: #32D164;
  color: #102117;
  box-shadow: none;
}
body[data-theme="crt"] .snooze-btn:hover:not(:disabled),
body[data-theme="crt"] #multi-tabs-snooze:hover:not(:disabled) {
  background: #2DBD5A;
  box-shadow: none;
}

body[data-theme="pixel"] .snooze-btn:not(:disabled),
body[data-theme="pixel"] #multi-tabs-snooze:not(:disabled) {
  background: #D13F74;
  color: #1A0810;
  box-shadow: none;
}
body[data-theme="pixel"] .snooze-btn:hover:not(:disabled),
body[data-theme="pixel"] #multi-tabs-snooze:hover:not(:disabled) {
  background: #BD3968;
  box-shadow: none;
}

body[data-theme="starry"] .snooze-btn:not(:disabled),
body[data-theme="starry"] #multi-tabs-snooze:not(:disabled) {
  background: #BEA23A;
  color: #1C1608;
  box-shadow: none;
}
body[data-theme="starry"] .snooze-btn:hover:not(:disabled),
body[data-theme="starry"] #multi-tabs-snooze:hover:not(:disabled) {
  background: #AC9235;
  box-shadow: none;
}

body[data-theme="pumpkin"] .snooze-btn:not(:disabled),
body[data-theme="pumpkin"] #multi-tabs-snooze:not(:disabled) {
  background: #B87131;
  color: #100904;
}
body[data-theme="pumpkin"] .snooze-btn:hover:not(:disabled),
body[data-theme="pumpkin"] #multi-tabs-snooze:hover:not(:disabled) {
  background: #A6662C;
}

/* ---------- Shared logo tokens when a page uses the variables ---------- */
.logo-wrapper {
  background: var(--logo-wrap-bg);
}

.logo-text {
  color: var(--logo-text);
}

.logo-subtitle {
  color: var(--logo-subtitle);
}

.logo-icon .logo-letter {
  fill: var(--logo-text, #FFFFFF);
}

.logo-icon .logo-bell {
  fill: var(--accent);
}

#snooze-tab::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}

#snooze-tab::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Light still wins for its explicit logo colors (higher-specificity page CSS
   plus this echo so pages without those rules stay readable). */
body[data-theme="light"] .logo-wrapper {
  background: var(--logo-wrap-bg);
  box-shadow: 0 2px 8px rgba(22, 32, 26, 0.06);
}

body[data-theme="light"] .logo-text {
  color: var(--logo-text);
  font-style: normal;
  text-shadow: none;
}

body[data-theme="light"] .logo-subtitle {
  color: var(--logo-subtitle);
}

/* ================================================================== */
/* Theme picker                                                       */
/* ================================================================== */
.theme-picker-row {
  flex-direction: column;
  align-items: stretch;
}

.theme-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 2px;
}

.theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  font-family: inherit;
}

.theme-swatch:hover {
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

.theme-swatch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.theme-swatch.is-selected,
.theme-swatch[aria-checked="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 12px var(--accent-glow);
}

.theme-swatch-preview {
  position: relative;
  display: block;
  height: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.theme-swatch-preview::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 7px;
  height: 4px;
  border-radius: 99px;
}

.theme-swatch-name {
  display: block;
  padding: 0 6px 7px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  min-height: 2.5em;
  text-align: center;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

.theme-swatch.is-selected .theme-swatch-name,
.theme-swatch[aria-checked="true"] .theme-swatch-name {
  color: var(--accent);
}

/* Frozen previews — always show the skin, not the current theme */
.theme-swatch[data-theme-id="dark"] .theme-swatch-preview {
  background:
    linear-gradient(180deg, #1A1F1C 0%, #252A27 100%);
}
.theme-swatch[data-theme-id="dark"] .theme-swatch-preview::after {
  background: #4ADE80;
}

.theme-swatch[data-theme-id="light"] .theme-swatch-preview {
  background:
    linear-gradient(180deg, #E8ECEA 0%, #FFFFFF 100%);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
.theme-swatch[data-theme-id="light"] .theme-swatch-preview::after {
  background: #22C55E;
}

.theme-swatch[data-theme-id="pumpkin"] .theme-swatch-preview {
  background:
    radial-gradient(ellipse 28px 22px at 78% 20%, rgba(253, 230, 138, 0.55), transparent 70%),
    linear-gradient(180deg, #0C0810 0%, #16111C 100%);
}
.theme-swatch[data-theme-id="pumpkin"] .theme-swatch-preview::after {
  background: linear-gradient(90deg, #E08A3C, #FDE68A);
}

.theme-swatch[data-theme-id="synthwave"] .theme-swatch-preview {
  background:
    radial-gradient(ellipse 22px 12px at 50% 0%, rgba(255, 140, 0, 0.7), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 46, 200, 0.35) 7px 8px),
    linear-gradient(180deg, #1A0B2E 40%, #FF2EC8 160%);
}
.theme-swatch[data-theme-id="synthwave"] .theme-swatch-preview::after {
  background: linear-gradient(90deg, #FF2EC8, #00E5FF);
}

.theme-swatch[data-theme-id="crt"] .theme-swatch-preview {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #020805 0%, #07140C 100%);
}
.theme-swatch[data-theme-id="crt"] .theme-swatch-preview::after {
  background: #3DFF7A;
  box-shadow: 0 0 6px #3DFF7A;
}

.theme-swatch[data-theme-id="pixel"] .theme-swatch-preview {
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 2px, transparent 2px),
    linear-gradient(180deg, #12102A, #2A2460);
  background-size: 6px 6px, 6px 6px, auto;
}
.theme-swatch[data-theme-id="pixel"] .theme-swatch-preview::after {
  border-radius: 0;
  background: #FFD93D;
  box-shadow: 2px 2px 0 #FF4D8D;
}

.theme-swatch[data-theme-id="starry"] .theme-swatch-preview {
  background:
    radial-gradient(1.2px 1.2px at 20% 30%, #fff8dc, transparent),
    radial-gradient(1px 1px at 70% 22%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 82% 60%, #ffe9a0, transparent),
    linear-gradient(180deg, #0A1024 0%, #1C2750 100%);
}
.theme-swatch[data-theme-id="starry"] .theme-swatch-preview::after {
  background: #E8C547;
}

.theme-swatch[data-theme-id="newsprint"] .theme-swatch-preview {
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(26, 26, 26, 0.14) 3px 4px),
    linear-gradient(180deg, #E8E2D4 0%, #F4EEE0 100%);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
.theme-swatch[data-theme-id="newsprint"] .theme-swatch-preview::after {
  border-radius: 0;
  height: 2px;
  background: #1A1A1A;
}

body[data-theme="pixel"] .theme-swatch {
  border-radius: 0;
}

body[data-theme="light"] .theme-swatch-preview {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

@media (max-width: 380px) {
  .theme-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}