/* ============================================================
   THEME ENGINE  (two independent axes)
   1) COLOR FAMILY  -> html[data-theme="id"] sets a hue (--tint),
      three accents and the font. 12 families.
   2) APPEARANCE    -> html[data-mode="dark|light"] turns that hue
      into dark or light surfaces (bg/panel/text/…) via color-mix.
   Because surfaces are generated from --tint, EVERY family works in
   both light and dark, and flipping appearance never changes family.
   Components below only ever read tokens (never raw colors).
   ============================================================ */
:root {
  /* ---- default family: Indigo ---- */
  --tint: #6366f1;
  --accent: #6366f1; --accent-2: #818cf8; --accent-3: #22d3ee;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius: 14px;
  --radius-btn: 11px;
  --radius-input: 10px;
  /* Surface treatment — a "style" (look & feel) overrides these to reskin every
     panel/button/shape at once, independently of the color theme. */
  --surface: linear-gradient(160deg, var(--panel-2), var(--panel));
  --surface-border-color: var(--border);
  --elev: var(--shadow);
  --mx: 50%; --my: 30%;

  /* ---- DARK surfaces (default appearance) — strongly hue-tinted so each theme reads distinctly ---- */
  --bg:      color-mix(in srgb, var(--tint) 22%, #080b12);
  --panel:   color-mix(in srgb, var(--tint) 30%, #0d1118);
  --panel-2: color-mix(in srgb, var(--tint) 40%, #131822);
  --border:  color-mix(in srgb, var(--tint) 52%, #222a38);
  --text:    color-mix(in srgb, var(--tint) 9%,  #eff3fc);
  --muted:   color-mix(in srgb, var(--tint) 34%, #97a4bb);
  --input-bg:color-mix(in srgb, var(--tint) 18%, #070a10);
  --link: var(--accent-2);
  --green:#34d399; --red:#f87171; --amber:#f59e0b; --orange:#fb923c;
  --glow-blend: screen;
  --glow1: color-mix(in srgb, var(--accent) 48%, transparent);
  --glow2: color-mix(in srgb, var(--accent-3) 34%, transparent);
  --shadow: 0 12px 34px -12px rgba(0,0,0,.66);
  --app-bg:
    radial-gradient(920px 540px at 88% -12%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 60%),
    radial-gradient(900px 540px at -8% 6%,  color-mix(in srgb, var(--accent-3) 26%, transparent), transparent 60%),
    radial-gradient(1100px 700px at 50% 118%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 62%),
    linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 48%, #000));

  /* ---- gradients + tints derived from the palette ---- */
  --grad-brand:   linear-gradient(115deg, var(--accent), var(--accent-3) 50%, var(--accent-2));
  --grad-primary: linear-gradient(135deg, var(--accent), var(--accent-2) 55%, var(--accent-3));
  --grad-primary-hover: linear-gradient(135deg, var(--accent-2), var(--accent-3) 55%, var(--accent));
  --grad-success: linear-gradient(135deg, var(--green), var(--accent-3));
  --grad-info:    linear-gradient(135deg, var(--accent-3), var(--accent-2));
  --grad-warn:    linear-gradient(135deg, var(--amber), var(--orange));
  --grad-danger:  linear-gradient(135deg, var(--red), #ef4444);
  --btn-soft:       linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent-3) 10%, transparent));
  --btn-soft-hover: linear-gradient(180deg, color-mix(in srgb, var(--accent) 32%, transparent), color-mix(in srgb, var(--accent-3) 18%, transparent));
  --shadow-glow: 0 8px 24px -8px color-mix(in srgb, var(--accent) 55%, transparent);
  --tint-08: color-mix(in srgb, var(--accent) 8%, transparent);
  --tint-14: color-mix(in srgb, var(--accent) 14%, transparent);
  --tint-24: color-mix(in srgb, var(--accent) 24%, transparent);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ================= APPEARANCE: LIGHT ================= */
html[data-mode="light"] {
  --bg:      color-mix(in srgb, var(--tint) 17%, #f5f7fb);
  --panel:   color-mix(in srgb, var(--tint) 6%,  #ffffff);
  --panel-2: color-mix(in srgb, var(--tint) 15%, #eef2f8);
  --border:  color-mix(in srgb, var(--tint) 34%, #ccd7e5);
  --text:    color-mix(in srgb, var(--tint) 34%, #111b30);
  --muted:   color-mix(in srgb, var(--tint) 36%, #55647f);
  --input-bg:#ffffff;
  --link: color-mix(in srgb, var(--accent) 74%, #0b1220);
  --green:#059669; --red:#dc2626; --amber:#d97706; --orange:#ea580c;
  --glow-blend: multiply;
  --glow1: color-mix(in srgb, var(--accent) 20%, transparent);
  --glow2: color-mix(in srgb, var(--accent-3) 14%, transparent);
  --shadow: 0 12px 32px -14px rgba(30,50,90,.22);
  --app-bg:
    radial-gradient(920px 540px at 88% -12%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(900px 540px at -8% 6%,  color-mix(in srgb, var(--accent-3) 13%, transparent), transparent 60%),
    radial-gradient(1100px 700px at 50% 118%, color-mix(in srgb, var(--accent-2) 11%, transparent), transparent 62%),
    linear-gradient(180deg, #ffffff, var(--bg));
}

/* ================= COLOR FAMILIES ================= */
/* Each sets only hue + accents + font; light/dark handled above. */
html[data-theme="indigo"]   { --tint:#6366f1; --accent:#6366f1; --accent-2:#818cf8; --accent-3:#22d3ee; --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
html[data-theme="ocean"]    { --tint:#0e7490; --accent:#14b8a6; --accent-2:#2dd4bf; --accent-3:#38bdf8; --font:"Avenir Next", Avenir, "Segoe UI", sans-serif; }
html[data-theme="emerald"]  { --tint:#15803d; --accent:#10b981; --accent-2:#34d399; --accent-3:#a3e635; --font:Futura, "Century Gothic", "Trebuchet MS", sans-serif; }
html[data-theme="sunset"]   { --tint:#b23a5b; --accent:#fb7185; --accent-2:#fb923c; --accent-3:#f59e0b; --font:Baskerville, Georgia, "Times New Roman", serif; }
html[data-theme="rose"]     { --tint:#db2777; --accent:#ec4899; --accent-2:#f472b6; --accent-3:#fb7185; --font:"Avenir Next Rounded", "Avenir Next", "Segoe UI", sans-serif; }
html[data-theme="grape"]    { --tint:#7c3aed; --accent:#a855f7; --accent-2:#c084fc; --accent-3:#22d3ee; --font:Optima, Candara, "Segoe UI", sans-serif; }
html[data-theme="crimson"]  { --tint:#dc2626; --accent:#ef4444; --accent-2:#f87171; --accent-3:#fb923c; --font:"Helvetica Neue", Helvetica, Arial, sans-serif; }
html[data-theme="slate"]    { --tint:#64748b; --accent:#64748b; --accent-2:#94a3b8; --accent-3:#38bdf8; --font:"SF Mono", Menlo, Consolas, ui-monospace, monospace; }
html[data-theme="nord"]     { --tint:#4c566a; --accent:#5e81ac; --accent-2:#81a1c1; --accent-3:#88c0d0; --font:"Lucida Grande", "Lucida Sans Unicode", "Segoe UI", sans-serif; }
html[data-theme="terminal"] { --tint:#16a34a; --accent:#22c55e; --accent-2:#4ade80; --accent-3:#a3e635; --font:"Courier New", Courier, ui-monospace, monospace; }
html[data-theme="sepia"]    { --tint:#a1662f; --accent:#a1662f; --accent-2:#c08341; --accent-3:#6b8e23; --font:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; }
html[data-theme="mocha"]    { --tint:#b4794e; --accent:#c08457; --accent-2:#d9a679; --accent-3:#e0b978; --font:Georgia, "Times New Roman", serif; }
html[data-theme="amber"]    { --tint:#b45309; --accent:#f59e0b; --accent-2:#fbbf24; --accent-3:#fb923c; --font:"Trebuchet MS", "Segoe UI", sans-serif; }
html[data-theme="azure"]    { --tint:#0369a1; --accent:#0ea5e9; --accent-2:#38bdf8; --accent-3:#22d3ee; --font:Verdana, Geneva, "Segoe UI", sans-serif; }
html[data-theme="fuchsia"]  { --tint:#a21caf; --accent:#d946ef; --accent-2:#e879f9; --accent-3:#a855f7; --font:"Gill Sans", "Gill Sans MT", "Segoe UI", sans-serif; }
html[data-theme="wine"]     { --tint:#881337; --accent:#be123c; --accent-2:#e11d48; --accent-3:#f43f5e; --font:Didot, "Bodoni 72", Georgia, serif; }
html[data-theme="sunburst"] { --tint:#ea580c; --accent:#f97316; --accent-2:#facc15; --accent-3:#ef4444; --font:"Trebuchet MS", "Segoe UI", sans-serif; }
html[data-theme="electric"] { --tint:#0891b2; --accent:#06b6d4; --accent-2:#d946ef; --accent-3:#a3e635; --font:Futura, "Century Gothic", "Trebuchet MS", sans-serif; }
html[data-theme="candy"]    { --tint:#db2777; --accent:#f472b6; --accent-2:#c084fc; --accent-3:#2dd4bf; --font:"Avenir Next Rounded", "Avenir Next", "Segoe UI", sans-serif; }
html[data-theme="galaxy"]   { --tint:#6d28d9; --accent:#8b5cf6; --accent-2:#e879f9; --accent-3:#38bdf8; --font:Optima, Candara, "Segoe UI", sans-serif; }
/* Elegant display themes — distinctive serif faces with ITALIC headings (--head-style). */
html[data-theme="velvet"]   { --tint:#6b2d5c; --accent:#b5179e; --accent-2:#e15bc6; --accent-3:#f6c453; --font:"Hoefler Text", Baskerville, Garamond, Georgia, serif; --head-style:italic; }
html[data-theme="riviera"]  { --tint:#0d6e78; --accent:#17a2b8; --accent-2:#4dd0c4; --accent-3:#eac26a; --font:Cochin, Optima, "Palatino Linotype", Palatino, serif; --head-style:italic; }
html[data-theme="meadow"]   { --tint:#55772f; --accent:#7aa93f; --accent-2:#b5c95a; --accent-3:#e3b24a; --font:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --head-style:italic; }
html[data-theme="dusk"]     { --tint:#4a3b86; --accent:#8b5cf6; --accent-2:#ec6aa8; --accent-3:#f9b64d; --font:"Bodoni 72", Didot, "Hoefler Text", Georgia, serif; --head-style:italic; }
html[data-theme="bourbon"]  { --tint:#996515; --accent:#c8922a; --accent-2:#daa944; --accent-3:#d4763a; --font:"Optima", "Gill Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
/* ============================================================================
   GILDED: Imperial Dark Gold (Glass & Obsidian Edition)
   - Dark Mode: Imperial obsidian noir, antique molten gold & royal gold-leaf luster
   - Light Mode: Rich honeyed parchment, deep burnished bronze-gold & warm topaz
   ============================================================================ */
html[data-theme="gilded"] {
  --tint: #c48822;
  --accent: #c48822;
  --accent-2: #e5b958;
  --accent-3: #7d4d05;
  --gold-glow: #c48822;
  --font: "Cinzel", "Didot", "Avenir Next", -apple-system, serif;
  --bg: #090602;
  --panel: rgba(22, 16, 6, 0.74);
  --panel-2: rgba(36, 26, 10, 0.65);
  --border: rgba(196, 136, 34, 0.28);
  --text: #f5eedb;
  --muted: #a89470;
  --input-bg: rgba(14, 10, 3, 0.80);
  --shadow-glow: 0 8px 30px -6px rgba(196, 136, 34, 0.42);
  --app-bg:
    radial-gradient(1100px 520px at 50% -70px, rgba(196, 136, 34, 0.24), transparent 70%),
    radial-gradient(900px 480px at 85% 18%, rgba(229, 185, 88, 0.16), transparent 60%),
    radial-gradient(800px 420px at 15% 82%, rgba(125, 77, 5, 0.22), transparent 65%),
    linear-gradient(180deg, #090602 0%, #040201 100%);
  background-attachment: fixed;
}
html[data-theme="gilded"][data-mode="light"] {
  --tint: #a36c10;
  --accent: #a36c10;
  --accent-2: #c48822;
  --accent-3: #593704;
  --gold-glow: #a36c10;
  --bg: #faf6ec;
  --panel: rgba(255, 252, 244, 0.90);
  --panel-2: rgba(246, 237, 216, 0.78);
  --border: rgba(163, 108, 16, 0.26);
  --text: #2c1a04;
  --muted: #7d5718;
  --input-bg: rgba(255, 255, 255, 0.94);
  --shadow-glow: 0 8px 30px -6px rgba(163, 108, 16, 0.38);
  --app-bg:
    radial-gradient(1100px 520px at 50% -80px, rgba(229, 185, 88, 0.28), transparent 70%),
    radial-gradient(900px 480px at 90% 15%, rgba(196, 136, 34, 0.16), transparent 60%),
    radial-gradient(800px 420px at 10% 85%, rgba(163, 108, 16, 0.14), transparent 65%),
    linear-gradient(180deg, #faf6ec 0%, #f4ebd6 100%);
}

/* Headings: Imperial Roman Serif */
html[data-theme="gilded"] h1, html[data-theme="gilded"] h2, html[data-theme="gilded"] h3, html[data-theme="gilded"] h4,
html[data-theme="gilded"] .month-bar .title {
  font-family: "Cinzel", "Didot", "Bodoni 72", "Baskerville", serif;
  letter-spacing: .04em;
  color: #caa048;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
html[data-theme="gilded"][data-mode="light"] h1,
html[data-theme="gilded"][data-mode="light"] h2,
html[data-theme="gilded"][data-mode="light"] h3,
html[data-theme="gilded"][data-mode="light"] h4,
html[data-theme="gilded"][data-mode="light"] .month-bar .title {
  color: #593704;
  text-shadow: none;
}

/* Brand Wordmark: Shimmering Gold Foil */
html[data-theme="gilded"] .brand {
  font-family: "Cinzel", "Didot", serif;
  font-weight: 800;
  letter-spacing: .04em;
  background: linear-gradient(120deg, #caa048 0%, #e5b958 25%, #fff6d9 45%, #a87216 70%, #caa048 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(196, 136, 34, 0.5));
  animation: gilded-gold-sheen 8s ease-in-out infinite;
}
html[data-theme="gilded"][data-mode="light"] .brand {
  background: linear-gradient(120deg, #593704 0%, #8c5806 25%, #d49f2b 45%, #a36c10 70%, #593704 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(163, 108, 16, 0.45));
  animation: gilded-gold-sheen 8s ease-in-out infinite;
}

/* Regal Imperial Crown Emblem */
html[data-theme="gilded"] .brand::before {
  content: "👑 ";
  font-size: 1.1em;
  vertical-align: middle;
  margin-right: 4px;
  display: inline-block;
  animation: gilded-crown-pulse 4.5s ease-in-out infinite;
}
html[data-theme="gilded"] .login-title::before {
  content: "👑 ";
  font-size: 1.05em;
  display: inline-block;
}

/* Frosted Glass-Material Surfaces */
html[data-theme="gilded"] .card,
html[data-theme="gilded"] .stat,
html[data-theme="gilded"] .modal,
html[data-theme="gilded"] .login-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(26, 18, 7, 0.74), rgba(15, 10, 4, 0.84)) !important;
  border: 1px solid rgba(196, 136, 34, 0.28) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 160, 0.26),
    0 2px 6px rgba(0, 0, 0, 0.35),
    0 10px 30px -6px rgba(125, 77, 5, 0.35) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease !important;
}
html[data-theme="gilded"][data-mode="light"] .card,
html[data-theme="gilded"][data-mode="light"] .stat,
html[data-theme="gilded"][data-mode="light"] .modal,
html[data-theme="gilded"][data-mode="light"] .login-card {
  background: linear-gradient(145deg, rgba(255, 252, 244, 0.92), rgba(246, 237, 216, 0.84)) !important;
  border: 1px solid rgba(163, 108, 16, 0.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 6px rgba(163, 108, 16, 0.12),
    0 10px 24px -6px rgba(163, 108, 16, 0.20) !important;
}

html[data-theme="gilded"] .card:not(.station-card) > * {
  position: relative;
  z-index: 1;
}

/* Top-edge Molten Gold Ray */
html[data-theme="gilded"] .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #8c5806 20%, #e5b958 50%, #fff4cf 65%, #c48822 80%, transparent);
  opacity: 0.45;
  transition: opacity 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
  pointer-events: none;
  z-index: 2;
}
html[data-theme="gilded"][data-mode="light"] .card::before {
  background: linear-gradient(90deg, transparent, #a36c10 20%, #c48822 50%, #ffffff 65%, #8c5806 80%, transparent);
  opacity: 0.55;
}

/* Hover Movement & Elevation */
html[data-theme="gilded"] .card:hover,
html[data-theme="gilded"] .stat:hover {
  transform: translateY(-2.5px);
  border-color: rgba(229, 185, 88, 0.75) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 160, 0.45),
    0 0 0 1px rgba(196, 136, 34, 0.40),
    0 16px 36px -8px rgba(163, 108, 16, 0.45),
    0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="gilded"][data-mode="light"] .card:hover,
html[data-theme="gilded"][data-mode="light"] .stat:hover {
  border-color: rgba(163, 108, 16, 0.75) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 0 0 1px rgba(163, 108, 16, 0.35),
    0 16px 36px -8px rgba(163, 108, 16, 0.35),
    0 4px 14px rgba(90, 52, 2, 0.18) !important;
}
html[data-theme="gilded"] .card:hover::before {
  opacity: 1;
  height: 3px;
  box-shadow: 0 0 14px rgba(229, 185, 88, 0.85);
}
html[data-theme="gilded"][data-mode="light"] .card:hover::before {
  box-shadow: 0 0 14px rgba(163, 108, 16, 0.85);
}

/* Watermark: Imperial Crown Motif */
html[data-theme="gilded"] .card:not(.station-card)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  width: 76px;
  height: 76px;
  background-color: var(--accent-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 19h20v2.5H2z'/%3E%3Cpath d='M3 17l2-10 4.5 5 2.5-8 2.5 8 4.5-5 2 10z'/%3E%3Ccircle cx='3.5' cy='7' r='1.8'/%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Ccircle cx='20.5' cy='7' r='1.8'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 19h20v2.5H2z'/%3E%3Cpath d='M3 17l2-10 4.5 5 2.5-8 2.5 8 4.5-5 2 10z'/%3E%3Ccircle cx='3.5' cy='7' r='1.8'/%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Ccircle cx='20.5' cy='7' r='1.8'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  animation: gilded-crest-float 8s ease-in-out infinite;
  transition: opacity 0.35s ease, filter 0.35s ease, transform 0.35s ease;
}
html[data-theme="gilded"] .card:not(.station-card):hover::after {
  opacity: 0.28;
  transform: translateY(-50%) scale(1.18) rotate(3deg);
  filter: drop-shadow(0 0 16px rgba(229, 185, 88, 0.75));
}
html[data-theme="gilded"][data-mode="light"] .card:not(.station-card):hover::after {
  filter: drop-shadow(0 0 16px rgba(163, 108, 16, 0.65));
}

/* Stat Tile Watermark */
html[data-theme="gilded"] .stat::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 12px;
  width: 24px;
  height: 24px;
  background-color: var(--accent-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 19h20v2.5H2z'/%3E%3Cpath d='M3 17l2-10 4.5 5 2.5-8 2.5 8 4.5-5 2 10z'/%3E%3Ccircle cx='3.5' cy='7' r='1.8'/%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Ccircle cx='20.5' cy='7' r='1.8'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 19h20v2.5H2z'/%3E%3Cpath d='M3 17l2-10 4.5 5 2.5-8 2.5 8 4.5-5 2 10z'/%3E%3Ccircle cx='3.5' cy='7' r='1.8'/%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Ccircle cx='20.5' cy='7' r='1.8'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.32;
  pointer-events: none;
  animation: gilded-crest-float 8s ease-in-out infinite;
  transition: transform .18s ease, opacity .18s ease, filter .18s ease;
}
html[data-theme="gilded"] .stat:hover::after {
  transform: translateY(-2px) scale(1.18);
  opacity: 0.90;
  filter: drop-shadow(0 0 8px rgba(229, 185, 88, 0.8));
}

/* Station Card Balance Metric */
html[data-theme="gilded"] .station-card .sc-balance {
  position: relative;
  overflow: hidden;
}
html[data-theme="gilded"] .station-card .sc-balance::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background-color: var(--accent-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 19h20v2.5H2z'/%3E%3Cpath d='M3 17l2-10 4.5 5 2.5-8 2.5 8 4.5-5 2 10z'/%3E%3Ccircle cx='3.5' cy='7' r='1.8'/%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Ccircle cx='20.5' cy='7' r='1.8'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 19h20v2.5H2z'/%3E%3Cpath d='M3 17l2-10 4.5 5 2.5-8 2.5 8 4.5-5 2 10z'/%3E%3Ccircle cx='3.5' cy='7' r='1.8'/%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Ccircle cx='20.5' cy='7' r='1.8'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.35;
  pointer-events: none;
  animation: gilded-crest-float 8s ease-in-out infinite;
  transition: transform .18s ease, opacity .18s ease, filter .18s ease;
}
html[data-theme="gilded"] .station-card:hover .sc-balance::after {
  transform: translateY(-50%) scale(1.24);
  opacity: 0.95;
  filter: drop-shadow(0 0 10px rgba(229, 185, 88, 0.85));
}

/* Luxury Primary Button with Light Glint Beam */
html[data-theme="gilded"] .btn.primary,
html[data-theme="gilded"] .login-submit {
  position: relative;
  overflow: hidden;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #4d2e00 0%, #7d4d05 20%, #a87010 45%, #c48822 75%, #4a2a00 100%) !important;
  color: #fffaf0 !important;
  font-family: "Cinzel", "Didot", serif !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  border: 1px solid rgba(229, 185, 88, 0.75) !important;
  box-shadow: 0 4px 18px -2px rgba(110, 68, 4, 0.65), inset 0 1px 0 rgba(255, 235, 170, 0.5) !important;
  text-shadow: 0 1px 2px rgba(20, 10, 0, 0.9) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html[data-theme="gilded"][data-mode="light"] .btn.primary,
html[data-theme="gilded"][data-mode="light"] .login-submit {
  background: linear-gradient(135deg, #593704 0%, #8c5806 25%, #a36c10 50%, #c48822 80%, #7d4d05 100%) !important;
  border: 1px solid rgba(163, 108, 16, 0.85) !important;
  box-shadow: 0 4px 18px -2px rgba(163, 108, 16, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}
html[data-theme="gilded"] .btn.primary::after,
html[data-theme="gilded"] .login-submit::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -80%;
  width: 35%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 245, 210, 0.5), transparent);
  transform: rotate(25deg);
  pointer-events: none;
}
html[data-theme="gilded"] .btn.primary:hover::after,
html[data-theme="gilded"] .login-submit:hover::after {
  left: 150%;
  transition: left 0.75s ease-in-out;
}
html[data-theme="gilded"] .btn.primary:hover,
html[data-theme="gilded"] .login-submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
  box-shadow: 0 6px 24px -2px rgba(196, 136, 34, 0.75), inset 0 1px 0 rgba(255, 240, 190, 0.7) !important;
}

/* Tabs & Active Pills */
html[data-theme="gilded"] .tab.active,
html[data-theme="gilded"] .pill.active {
  background: linear-gradient(135deg, rgba(125, 77, 5, 0.90) 0%, rgba(196, 136, 34, 0.92) 100%) !important;
  border-color: rgba(229, 185, 88, 0.85) !important;
  color: #fff9e6 !important;
  box-shadow: 0 0 16px -2px rgba(196, 136, 34, 0.55), inset 0 1px 0 rgba(255, 235, 170, 0.45) !important;
  animation: gilded-tab-pulse 4s ease-in-out infinite alternate;
}
html[data-theme="gilded"][data-mode="light"] .tab.active,
html[data-theme="gilded"][data-mode="light"] .pill.active {
  background: linear-gradient(135deg, rgba(163, 108, 16, 0.90) 0%, rgba(196, 136, 34, 0.90) 100%) !important;
  border-color: rgba(163, 108, 16, 0.85) !important;
  color: #ffffff !important;
}

/* Theme-Toggle Coin Flip */
html[data-theme="gilded"] #theme-toggle {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-radius: 999px !important;
}
html[data-theme="gilded"] #theme-toggle:hover {
  transform: rotate(35deg) scale(1.15);
  box-shadow: 0 0 18px rgba(196, 136, 34, 0.85), inset 0 0 8px rgba(229, 185, 88, 0.6) !important;
}

/* Input Focus Glow */
html[data-theme="gilded"] input:focus,
html[data-theme="gilded"] select:focus,
html[data-theme="gilded"] textarea:focus {
  border-color: rgba(229, 185, 88, 0.85) !important;
  box-shadow: 0 0 0 3px rgba(196, 136, 34, 0.25), 0 0 16px -2px rgba(196, 136, 34, 0.45) !important;
}

/* Table Row Hover */
html[data-theme="gilded"] table tbody tr {
  transition: background-color 0.16s ease;
}
html[data-theme="gilded"] table tbody tr:hover td {
  background-color: rgba(196, 136, 34, 0.12) !important;
}
html[data-theme="gilded"] table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 #c48822 !important;
}


/* ============================================================================
   SAKURA MIST: Japanese Cherry Blossom & Jade (Frosted Glass Edition)
   - Dark Mode: Kyoto midnight blossom, glowing petal pink, misty matcha jade & amber lanterns
   - Light Mode: Morning spring garden mist, soft rosewater silk, warm apricot sunlight
   ============================================================================ */
html[data-theme="sakura"] {
  --tint: #f2728f;
  --accent: #f2728f;
  --accent-2: #48bb78;
  --accent-3: #f6ad55;
  --sakura-glow: #f2728f;
  --font: "Century Gothic", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #120910;
  --panel: rgba(28, 14, 25, 0.74);
  --panel-2: rgba(44, 22, 39, 0.65);
  --border: rgba(242, 114, 143, 0.28);
  --text: #fdf2f7;
  --muted: #b892a4;
  --input-bg: rgba(18, 9, 16, 0.80);
  --shadow-glow: 0 8px 30px -6px rgba(242, 114, 143, 0.40);
  --app-bg:
    radial-gradient(1100px 520px at 50% -70px, rgba(242, 114, 143, 0.22), transparent 70%),
    radial-gradient(900px 480px at 85% 18%, rgba(72, 187, 120, 0.15), transparent 60%),
    radial-gradient(800px 420px at 15% 82%, rgba(246, 173, 85, 0.16), transparent 65%),
    linear-gradient(180deg, #120910 0%, #070306 100%);
  background-attachment: fixed;
}
html[data-theme="sakura"][data-mode="light"] {
  --tint: #d84b6f;
  --accent: #d84b6f;
  --accent-2: #38a169;
  --accent-3: #ea8a32;
  --sakura-glow: #d84b6f;
  --bg: #fdf5f8;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-2: rgba(254, 240, 246, 0.78);
  --border: rgba(242, 114, 143, 0.28);
  --text: #3c1626;
  --muted: #8c4e68;
  --input-bg: rgba(255, 255, 255, 0.94);
  --shadow-glow: 0 8px 30px -6px rgba(216, 75, 111, 0.35);
  --app-bg:
    radial-gradient(1100px 520px at 50% -80px, rgba(242, 114, 143, 0.28), transparent 70%),
    radial-gradient(900px 480px at 90% 15%, rgba(72, 187, 120, 0.16), transparent 60%),
    radial-gradient(800px 420px at 10% 85%, rgba(246, 173, 85, 0.18), transparent 65%),
    linear-gradient(180deg, #fdf5f8 0%, #fce7f0 100%);
}

/* Headings: Clean, serene modern typography */
html[data-theme="sakura"] h1, html[data-theme="sakura"] h2, html[data-theme="sakura"] h3, html[data-theme="sakura"] h4,
html[data-theme="sakura"] .month-bar .title {
  font-family: "Century Gothic", "Apple SD Gothic Neo", -apple-system, sans-serif;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: #fce7f3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
html[data-theme="sakura"][data-mode="light"] h1,
html[data-theme="sakura"][data-mode="light"] h2,
html[data-theme="sakura"][data-mode="light"] h3,
html[data-theme="sakura"][data-mode="light"] h4,
html[data-theme="sakura"][data-mode="light"] .month-bar .title {
  color: #831843;
  text-shadow: none;
}

/* Brand Wordmark: Blooming Blossom Petal Sheen */
html[data-theme="sakura"] .brand {
  font-family: "Century Gothic", "Apple SD Gothic Neo", -apple-system, sans-serif;
  font-weight: 800;
  letter-spacing: -0.015em;
  background: linear-gradient(120deg, #fce7f3 0%, #f2728f 25%, #ffffff 45%, #48bb78 70%, #f6ad55 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(242, 114, 143, 0.5));
  animation: sakura-bloom-sheen 8s ease-in-out infinite;
}
html[data-theme="sakura"][data-mode="light"] .brand {
  background: linear-gradient(120deg, #9d174d 0%, #db2777 25%, #be185d 45%, #2e7d32 70%, #d97706 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(216, 75, 111, 0.45));
  animation: sakura-bloom-sheen 8s ease-in-out infinite;
}

/* Cherry Blossom Flower Emblem */
html[data-theme="sakura"] .brand::before {
  content: "🌸 ";
  font-size: 1.1em;
  vertical-align: middle;
  margin-right: 4px;
  display: inline-block;
  animation: sakura-petal-flutter 5s ease-in-out infinite;
}
html[data-theme="sakura"] .login-title::before {
  content: "🌸 ";
  font-size: 1.05em;
  display: inline-block;
}

/* Frosted Glass Surfaces */
html[data-theme="sakura"] .card,
html[data-theme="sakura"] .stat,
html[data-theme="sakura"] .modal,
html[data-theme="sakura"] .login-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(34, 17, 30, 0.74), rgba(20, 10, 18, 0.82)) !important;
  border: 1px solid rgba(242, 114, 143, 0.26) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 235, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.35),
    0 10px 30px -6px rgba(242, 114, 143, 0.25) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease !important;
}
html[data-theme="sakura"][data-mode="light"] .card,
html[data-theme="sakura"][data-mode="light"] .stat,
html[data-theme="sakura"][data-mode="light"] .modal,
html[data-theme="sakura"][data-mode="light"] .login-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(254, 242, 247, 0.84)) !important;
  border: 1px solid rgba(242, 114, 143, 0.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 6px rgba(242, 114, 143, 0.10),
    0 10px 24px -6px rgba(242, 114, 143, 0.18) !important;
}

html[data-theme="sakura"] .card:not(.station-card) > * {
  position: relative;
  z-index: 1;
}

/* Top-edge Blossom Ray */
html[data-theme="sakura"] .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f2728f 20%, #fbcfe8 50%, #ffffff 65%, #48bb78 80%, transparent);
  opacity: 0.50;
  transition: opacity 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
  pointer-events: none;
  z-index: 2;
}
html[data-theme="sakura"][data-mode="light"] .card::before {
  background: linear-gradient(90deg, transparent, #d84b6f 20%, #f472b6 50%, #ffffff 65%, #38a169 80%, transparent);
  opacity: 0.55;
}

/* Hover Movement & Elevation */
html[data-theme="sakura"] .card:hover,
html[data-theme="sakura"] .stat:hover {
  transform: translateY(-2.5px);
  border-color: rgba(242, 114, 143, 0.75) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 1px rgba(242, 114, 143, 0.35),
    0 16px 36px -8px rgba(242, 114, 143, 0.40),
    0 4px 14px rgba(0, 0, 0, 0.25) !important;
}
html[data-theme="sakura"][data-mode="light"] .card:hover,
html[data-theme="sakura"][data-mode="light"] .stat:hover {
  border-color: rgba(216, 75, 111, 0.70) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 0 0 1px rgba(216, 75, 111, 0.35),
    0 16px 36px -8px rgba(216, 75, 111, 0.35),
    0 4px 14px rgba(131, 24, 67, 0.16) !important;
}
html[data-theme="sakura"] .card:hover::before {
  opacity: 1;
  height: 3px;
  box-shadow: 0 0 14px rgba(242, 114, 143, 0.85);
}
html[data-theme="sakura"][data-mode="light"] .card:hover::before {
  box-shadow: 0 0 14px rgba(216, 75, 111, 0.85);
}

/* Watermark: Japanese Cherry Blossom Motif */
html[data-theme="sakura"] .card:not(.station-card)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  width: 76px;
  height: 76px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='black'%3E%3Cpath d='M11 2 C12.2 4.5 13 6.8 11 9 C9 6.8 9.8 4.5 11 2 Z M17.5 6 C15.5 7.5 13.2 7.5 12 6.2 C14.2 5.5 16.2 5 17.5 6 Z M18.5 13 C16 12.5 14.2 11 13.5 9.2 C15.5 9.5 17.5 10.8 18.5 13 Z M14 18.5 C12.2 16.5 12 14.2 13 12.5 C14.2 14.2 14.5 16.2 14 18.5 Z M5.5 16 C7 14 8.8 13 10.5 12.8 C9.5 14.8 8 16 5.5 16 Z M3.5 9 C5.8 9 7.8 10 8.5 11.8 C6.5 11.2 4.5 10.2 3.5 9 Z'/%3E%3Ccircle cx='11' cy='11' r='2.2'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='black'%3E%3Cpath d='M11 2 C12.2 4.5 13 6.8 11 9 C9 6.8 9.8 4.5 11 2 Z M17.5 6 C15.5 7.5 13.2 7.5 12 6.2 C14.2 5.5 16.2 5 17.5 6 Z M18.5 13 C16 12.5 14.2 11 13.5 9.2 C15.5 9.5 17.5 10.8 18.5 13 Z M14 18.5 C12.2 16.5 12 14.2 13 12.5 C14.2 14.2 14.5 16.2 14 18.5 Z M5.5 16 C7 14 8.8 13 10.5 12.8 C9.5 14.8 8 16 5.5 16 Z M3.5 9 C5.8 9 7.8 10 8.5 11.8 C6.5 11.2 4.5 10.2 3.5 9 Z'/%3E%3Ccircle cx='11' cy='11' r='2.2'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
  animation: sakura-petal-drift 10s ease-in-out infinite;
  transition: opacity 0.35s ease, filter 0.35s ease, transform 0.35s ease;
}
html[data-theme="sakura"] .card:not(.station-card):hover::after {
  opacity: 0.30;
  transform: translateY(-50%) scale(1.22) rotate(14deg);
  filter: drop-shadow(0 0 16px rgba(242, 114, 143, 0.75));
}

/* Stat Tile Watermark */
html[data-theme="sakura"] .stat::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 12px;
  width: 24px;
  height: 24px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='black'%3E%3Cpath d='M11 2 C12.2 4.5 13 6.8 11 9 C9 6.8 9.8 4.5 11 2 Z M17.5 6 C15.5 7.5 13.2 7.5 12 6.2 C14.2 5.5 16.2 5 17.5 6 Z M18.5 13 C16 12.5 14.2 11 13.5 9.2 C15.5 9.5 17.5 10.8 18.5 13 Z M14 18.5 C12.2 16.5 12 14.2 13 12.5 C14.2 14.2 14.5 16.2 14 18.5 Z M5.5 16 C7 14 8.8 13 10.5 12.8 C9.5 14.8 8 16 5.5 16 Z M3.5 9 C5.8 9 7.8 10 8.5 11.8 C6.5 11.2 4.5 10.2 3.5 9 Z'/%3E%3Ccircle cx='11' cy='11' r='2.2'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='black'%3E%3Cpath d='M11 2 C12.2 4.5 13 6.8 11 9 C9 6.8 9.8 4.5 11 2 Z M17.5 6 C15.5 7.5 13.2 7.5 12 6.2 C14.2 5.5 16.2 5 17.5 6 Z M18.5 13 C16 12.5 14.2 11 13.5 9.2 C15.5 9.5 17.5 10.8 18.5 13 Z M14 18.5 C12.2 16.5 12 14.2 13 12.5 C14.2 14.2 14.5 16.2 14 18.5 Z M5.5 16 C7 14 8.8 13 10.5 12.8 C9.5 14.8 8 16 5.5 16 Z M3.5 9 C5.8 9 7.8 10 8.5 11.8 C6.5 11.2 4.5 10.2 3.5 9 Z'/%3E%3Ccircle cx='11' cy='11' r='2.2'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.32;
  pointer-events: none;
  animation: sakura-petal-drift 10s ease-in-out infinite;
  transition: transform .18s ease, opacity .18s ease, filter .18s ease;
}
html[data-theme="sakura"] .stat:hover::after {
  transform: translateY(-2px) scale(1.18);
  opacity: 0.90;
  filter: drop-shadow(0 0 8px rgba(242, 114, 143, 0.8));
}

/* Station Card Balance Metric */
html[data-theme="sakura"] .station-card .sc-balance {
  position: relative;
  overflow: hidden;
}
html[data-theme="sakura"] .station-card .sc-balance::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='black'%3E%3Cpath d='M11 2 C12.2 4.5 13 6.8 11 9 C9 6.8 9.8 4.5 11 2 Z M17.5 6 C15.5 7.5 13.2 7.5 12 6.2 C14.2 5.5 16.2 5 17.5 6 Z M18.5 13 C16 12.5 14.2 11 13.5 9.2 C15.5 9.5 17.5 10.8 18.5 13 Z M14 18.5 C12.2 16.5 12 14.2 13 12.5 C14.2 14.2 14.5 16.2 14 18.5 Z M5.5 16 C7 14 8.8 13 10.5 12.8 C9.5 14.8 8 16 5.5 16 Z M3.5 9 C5.8 9 7.8 10 8.5 11.8 C6.5 11.2 4.5 10.2 3.5 9 Z'/%3E%3Ccircle cx='11' cy='11' r='2.2'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='black'%3E%3Cpath d='M11 2 C12.2 4.5 13 6.8 11 9 C9 6.8 9.8 4.5 11 2 Z M17.5 6 C15.5 7.5 13.2 7.5 12 6.2 C14.2 5.5 16.2 5 17.5 6 Z M18.5 13 C16 12.5 14.2 11 13.5 9.2 C15.5 9.5 17.5 10.8 18.5 13 Z M14 18.5 C12.2 16.5 12 14.2 13 12.5 C14.2 14.2 14.5 16.2 14 18.5 Z M5.5 16 C7 14 8.8 13 10.5 12.8 C9.5 14.8 8 16 5.5 16 Z M3.5 9 C5.8 9 7.8 10 8.5 11.8 C6.5 11.2 4.5 10.2 3.5 9 Z'/%3E%3Ccircle cx='11' cy='11' r='2.2'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.35;
  pointer-events: none;
  animation: sakura-petal-drift 10s ease-in-out infinite;
  transition: transform .18s ease, opacity .18s ease, filter .18s ease;
}
html[data-theme="sakura"] .station-card:hover .sc-balance::after {
  transform: translateY(-50%) scale(1.24);
  opacity: 0.95;
  filter: drop-shadow(0 0 10px rgba(242, 114, 143, 0.85));
}

/* Silky Blossom Primary Button with Light Glint Beam */
html[data-theme="sakura"] .btn.primary,
html[data-theme="sakura"] .login-submit {
  position: relative;
  overflow: hidden;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #be185d 0%, #db2777 30%, #f2728f 70%, #48bb78 100%) !important;
  color: #ffffff !important;
  font-family: "Century Gothic", "Apple SD Gothic Neo", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 4px 18px -2px rgba(216, 75, 111, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html[data-theme="sakura"][data-mode="light"] .btn.primary,
html[data-theme="sakura"][data-mode="light"] .login-submit {
  background: linear-gradient(135deg, #9d174d 0%, #db2777 35%, #f2728f 80%, #38a169 100%) !important;
  border: 1px solid rgba(242, 114, 143, 0.65) !important;
  box-shadow: 0 4px 18px -2px rgba(216, 75, 111, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}
html[data-theme="sakura"] .btn.primary::after,
html[data-theme="sakura"] .login-submit::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -80%;
  width: 35%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: rotate(25deg);
  pointer-events: none;
}
html[data-theme="sakura"] .btn.primary:hover::after,
html[data-theme="sakura"] .login-submit:hover::after {
  left: 150%;
  transition: left 0.75s ease-in-out;
}
html[data-theme="sakura"] .btn.primary:hover,
html[data-theme="sakura"] .login-submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
  box-shadow: 0 6px 24px -2px rgba(242, 114, 143, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

/* Tabs & Active Pills */
html[data-theme="sakura"] .tab.active,
html[data-theme="sakura"] .pill.active {
  background: linear-gradient(135deg, rgba(219, 39, 119, 0.88) 0%, rgba(242, 114, 143, 0.90) 65%, rgba(72, 187, 120, 0.88) 100%) !important;
  border-color: rgba(255, 255, 255, 0.75) !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px -2px rgba(242, 114, 143, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  animation: sakura-tab-pulse 4s ease-in-out infinite alternate;
}
html[data-theme="sakura"][data-mode="light"] .tab.active,
html[data-theme="sakura"][data-mode="light"] .pill.active {
  background: linear-gradient(135deg, rgba(216, 75, 111, 0.90) 0%, rgba(242, 114, 143, 0.90) 70%, rgba(56, 161, 105, 0.90) 100%) !important;
  border-color: rgba(216, 75, 111, 0.85) !important;
  color: #ffffff !important;
}

/* Theme-Toggle Blossom Spin */
html[data-theme="sakura"] #theme-toggle {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-radius: 999px !important;
}
html[data-theme="sakura"] #theme-toggle:hover {
  transform: rotate(45deg) scale(1.15);
  box-shadow: 0 0 18px rgba(242, 114, 143, 0.85), inset 0 0 8px rgba(255, 255, 255, 0.6) !important;
}

/* Input Focus Glow */
html[data-theme="sakura"] input:focus,
html[data-theme="sakura"] select:focus,
html[data-theme="sakura"] textarea:focus {
  border-color: rgba(242, 114, 143, 0.85) !important;
  box-shadow: 0 0 0 3px rgba(242, 114, 143, 0.25), 0 0 16px -2px rgba(242, 114, 143, 0.4) !important;
}

/* Table Row Hover */
html[data-theme="sakura"] table tbody tr {
  transition: background-color 0.16s ease;
}
html[data-theme="sakura"] table tbody tr:hover td {
  background-color: rgba(242, 114, 143, 0.12) !important;
}
html[data-theme="sakura"] table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 #f2728f !important;
}
/* Zephyr: Masterpiece Air & Wind theme */
html[data-theme="zephyr"] {
  --tint: #0284c7;
  --accent: #0ea5e9;
  --accent-2: #38bdf8;
  --accent-3: #14b8a6;
  --font: "Space Grotesk", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #070d18;
  --panel: #0d1829;
  --panel-2: #14233c;
  --border: rgba(56, 189, 248, 0.22);
  --text: #f0f9ff;
  --muted: #94a3b8;
  --input-bg: #091222;
  --shadow-glow: 0 8px 28px -6px rgba(14, 165, 233, 0.45);
  --app-bg: radial-gradient(1000px 480px at 50% -60px, rgba(14, 165, 233, 0.22), transparent 70%), linear-gradient(180deg, #070d18 0%, #03070e 100%);
}
html[data-theme="zephyr"][data-mode="light"] {
  --bg: #f0f9ff;
  --panel: #ffffff;
  --panel-2: #e0f2fe;
  --border: rgba(2, 132, 199, 0.22);
  --text: #082f49;
  --muted: #475569;
  --input-bg: #ffffff;
  --shadow-glow: 0 4px 16px -6px rgba(2, 132, 199, 0.25);
  --app-bg: radial-gradient(900px 450px at 50% -60px, rgba(56, 189, 248, 0.20), transparent 70%), linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
}
html[data-theme="zephyr"] h1, html[data-theme="zephyr"] h2, html[data-theme="zephyr"] h3, html[data-theme="zephyr"] h4,
html[data-theme="zephyr"] .brand, html[data-theme="zephyr"] .login-title, html[data-theme="zephyr"] .month-bar .title {
  font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
  letter-spacing: -0.015em;
  font-weight: 700;
}
html[data-theme="zephyr"] .brand {
  letter-spacing: -0.01em;
  font-weight: 800;
}

/* Ignis: Masterpiece Fire & Flame theme */
html[data-theme="ignis"] {
  --tint: #e11d48;
  --accent: #f43f5e;
  --accent-2: #f97316;
  --accent-3: #fbbf24;
  --font: "Oxanium", "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #140806;
  --panel: #1f0c08;
  --panel-2: #2d130d;
  --border: rgba(249, 115, 22, 0.26);
  --text: #fff5f2;
  --muted: #b08d85;
  --input-bg: #120705;
  --shadow-glow: 0 6px 20px -6px rgba(244, 63, 94, 0.45);
  --app-bg: radial-gradient(1000px 480px at 50% -60px, rgba(244, 63, 94, 0.22), transparent 70%), linear-gradient(180deg, #140806 0%, #0a0403 100%);
}
html[data-theme="ignis"][data-mode="light"] {
  --bg: #fff7f5;
  --panel: #ffffff;
  --panel-2: #ffede8;
  --border: rgba(225, 29, 72, 0.22);
  --text: #431407;
  --muted: #7c2d12;
  --input-bg: #ffffff;
  --shadow-glow: 0 4px 16px -6px rgba(244, 63, 94, 0.26);
  --app-bg: radial-gradient(900px 450px at 50% -60px, rgba(249, 115, 22, 0.18), transparent 70%), linear-gradient(180deg, #ffffff 0%, #fff7f5 100%);
}
html[data-theme="ignis"] h1, html[data-theme="ignis"] h2, html[data-theme="ignis"] h3, html[data-theme="ignis"] h4,
html[data-theme="ignis"] .brand, html[data-theme="ignis"] .login-title, html[data-theme="ignis"] .month-bar .title {
  font-family: "Oxanium", "Space Grotesk", sans-serif;
  letter-spacing: 0.02em;
  font-weight: 700;
}

/* Dune: Masterpiece Sand & Earth theme */
html[data-theme="dune"] {
  --tint: #b45309;
  --accent: #d4a373;
  --accent-2: #e09f3e;
  --accent-3: #bc6c25;
  --font: "Marcellus", "Outfit", Georgia, serif;
  --bg: #15110d;
  --panel: #201a14;
  --panel-2: #2c241c;
  --border: rgba(224, 159, 62, 0.24);
  --text: #fefbf6;
  --muted: #a89887;
  --input-bg: #130f0b;
  --shadow-glow: 0 6px 20px -6px rgba(212, 163, 115, 0.40);
  --app-bg: radial-gradient(1000px 480px at 50% -60px, rgba(212, 163, 115, 0.20), transparent 70%), linear-gradient(180deg, #15110d 0%, #0d0a08 100%);
}
html[data-theme="dune"][data-mode="light"] {
  --bg: #fcf9f4;
  --panel: #ffffff;
  --panel-2: #f5eee2;
  --border: rgba(194, 139, 85, 0.26);
  --text: #3c2a1e;
  --muted: #705846;
  --input-bg: #ffffff;
  --shadow-glow: 0 4px 16px -6px rgba(194, 139, 85, 0.22);
  --app-bg: radial-gradient(900px 450px at 50% -60px, rgba(224, 159, 62, 0.18), transparent 70%), linear-gradient(180deg, #ffffff 0%, #fcf9f4 100%);
}
html[data-theme="dune"] h1, html[data-theme="dune"] h2, html[data-theme="dune"] h3, html[data-theme="dune"] h4,
html[data-theme="dune"] .brand, html[data-theme="dune"] .login-title, html[data-theme="dune"] .month-bar .title {
  font-family: "Marcellus", "Outfit", Georgia, serif;
  letter-spacing: 0.02em;
  font-weight: 600;
}

/* Hydro: Masterpiece Water & Tide theme */
html[data-theme="hydro"] {
  --tint: #0284c7;
  --accent: #06b6d4;
  --accent-2: #38bdf8;
  --accent-3: #14b8a6;
  --font: "Sora", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #040e1a;
  --panel: #091a2e;
  --panel-2: #0f2742;
  --border: rgba(6, 182, 212, 0.24);
  --text: #ecfeff;
  --muted: #83a5b8;
  --input-bg: #030a13;
  --shadow-glow: 0 6px 20px -6px rgba(6, 182, 212, 0.40);
  --app-bg: radial-gradient(1000px 480px at 50% -60px, rgba(6, 182, 212, 0.22), transparent 70%), linear-gradient(180deg, #040e1a 0%, #02070e 100%);
}
html[data-theme="hydro"][data-mode="light"] {
  --bg: #f0fdfa;
  --panel: #ffffff;
  --panel-2: #e0f7f6;
  --border: rgba(2, 132, 199, 0.22);
  --text: #083344;
  --muted: #3b6b7a;
  --input-bg: #ffffff;
  --shadow-glow: 0 4px 16px -6px rgba(6, 182, 212, 0.24);
  --app-bg: radial-gradient(900px 450px at 50% -60px, rgba(6, 182, 212, 0.18), transparent 70%), linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%);
}
html[data-theme="hydro"] h1, html[data-theme="hydro"] h2, html[data-theme="hydro"] h3, html[data-theme="hydro"] h4,
html[data-theme="hydro"] .brand, html[data-theme="hydro"] .login-title, html[data-theme="hydro"] .month-bar .title {
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
  letter-spacing: -0.015em;
  font-weight: 700;
}

/* Andalus: Islamic Heritage & Sacred Geometry theme */
html[data-theme="andalus"] {
  --tint: #022c1b;
  --accent: #046a38;
  --accent-2: #d4af37;
  --accent-3: #0f766e;
  --font: "Amiri", "Marcellus", "Cinzel", Georgia, serif;
  --bg: #021a10;
  --panel: #052a1b;
  --panel-2: #0a3824;
  --border: rgba(212, 175, 55, 0.28);
  --text: #f4fbf7;
  --muted: #8ea89a;
  --input-bg: #01120b;
  --shadow-glow: 0 8px 28px -6px rgba(212, 175, 55, 0.45);
  --app-bg:
    radial-gradient(1100px 550px at 50% -80px, rgba(4, 106, 56, 0.35), transparent 70%),
    radial-gradient(850px 450px at 90% 20%, rgba(212, 175, 55, 0.18), transparent 60%),
    radial-gradient(750px 450px at 10% 70%, rgba(15, 118, 110, 0.22), transparent 65%),
    linear-gradient(180deg, #021a10 0%, #010e08 60%, #010805 100%);
  background-attachment: fixed;
}
html[data-theme="andalus"][data-mode="light"] {
  --bg: #f4f9f6;
  --panel: #ffffff;
  --panel-2: #e2ede7;
  --border: rgba(180, 140, 40, 0.28);
  --text: #022415;
  --muted: #3a5c4b;
  --input-bg: #ffffff;
  --shadow-glow: 0 4px 18px -6px rgba(212, 175, 55, 0.32);
  --app-bg:
    radial-gradient(950px 450px at 50% -60px, rgba(4, 106, 56, 0.18), transparent 70%),
    radial-gradient(800px 400px at 85% 20%, rgba(212, 175, 55, 0.12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #edf5f0 100%);
}
html[data-theme="andalus"] h1, html[data-theme="andalus"] h2, html[data-theme="andalus"] h3, html[data-theme="andalus"] h4,
html[data-theme="andalus"] .month-bar .title {
  font-family: "Amiri", "Marcellus", Georgia, serif;
  letter-spacing: 0.025em;
  font-weight: 700;
  color: #e5c158;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
html[data-theme="andalus"][data-mode="light"] h1,
html[data-theme="andalus"][data-mode="light"] h2,
html[data-theme="andalus"][data-mode="light"] h3,
html[data-theme="andalus"][data-mode="light"] h4 {
  color: #855d0a;
  text-shadow: none;
}
html[data-theme="andalus"] .brand {
  font-family: "Amiri", "Marcellus", Georgia, serif;
  letter-spacing: 0.03em;
  font-weight: 700;
  background: linear-gradient(110deg, #d4af37 0%, #ecd078 20%, #ffffff 32%, #d4af37 45%, #046a38 70%, #d4af37 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(212, 175, 55, 0.45));
  animation: andalus-gold-sheen 8s ease-in-out infinite;
}
html[data-theme="andalus"] .brand::before {
  content: "۞ ";
  font-size: 1.15em;
  color: #d4af37;
  vertical-align: middle;
  margin-right: 3px;
  display: inline-block;
  animation: th-twinkle 4s ease-in-out infinite, andalus-star-breathe 6s ease-in-out infinite;
}
html[data-theme="andalus"] .login-title::before {
  content: "۞ ";
  color: #d4af37;
  font-size: 0.95em;
  display: inline-block;
  animation: th-twinkle 4s ease-in-out infinite;
}
html[data-theme="andalus"] .btn.primary,
html[data-theme="andalus"] .login-submit {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #022c1b 0%, #046a38 45%, #067a42 75%, #d4af37 100%) !important;
  color: #fffef5 !important;
  font-family: "Amiri", "Marcellus", Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.035em !important;
  border: 1px solid rgba(212, 175, 55, 0.65) !important;
  box-shadow: 0 4px 16px -2px rgba(2, 44, 27, 0.6), inset 0 1px 0 rgba(229, 193, 88, 0.45) !important;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html[data-theme="andalus"] .btn.primary::after,
html[data-theme="andalus"] .login-submit::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -80%;
  width: 35%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 245, 200, 0.45), transparent);
  transform: rotate(25deg);
  pointer-events: none;
  transition: none;
}
html[data-theme="andalus"] .btn.primary:hover::after,
html[data-theme="andalus"] .login-submit:hover::after {
  left: 150%;
  transition: left 0.75s ease-in-out;
}
html[data-theme="andalus"] .btn.primary:hover,
html[data-theme="andalus"] .login-submit:hover {
  background: linear-gradient(135deg, #046a38 0%, #067a42 45%, #0a8a4b 75%, #e5c158 100%) !important;
  box-shadow: 0 6px 24px -2px rgba(212, 175, 55, 0.65), inset 0 1px 0 rgba(255, 230, 140, 0.6) !important;
  transform: translateY(-2px);
}
html[data-theme="andalus"] .card,
html[data-style="arabesque"] .card,
html[data-theme="andalus"] .stat,
html[data-style="arabesque"] .stat,
html[data-theme="andalus"] .modal,
html[data-style="arabesque"] .modal,
html[data-theme="andalus"] .login-card,
html[data-style="arabesque"] .login-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(5, 42, 27, 0.76), rgba(2, 26, 16, 0.86)) !important;
  border: 1px solid rgba(212, 175, 55, 0.28) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 2px 5px -1px rgba(0, 0, 0, 0.35),
    0 8px 26px -4px rgba(4, 106, 56, 0.28) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease !important;
}
html[data-theme="andalus"][data-mode="light"] .card,
html[data-style="arabesque"][data-mode="light"] .card,
html[data-theme="andalus"][data-mode="light"] .stat,
html[data-style="arabesque"][data-mode="light"] .stat,
html[data-theme="andalus"][data-mode="light"] .modal,
html[data-style="arabesque"][data-mode="light"] .modal,
html[data-theme="andalus"][data-mode="light"] .login-card,
html[data-style="arabesque"][data-mode="light"] .login-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(240, 247, 242, 0.88)) !important;
  border: 1px solid rgba(180, 140, 40, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 5px rgba(212, 175, 55, 0.12),
    0 8px 22px -4px rgba(212, 175, 55, 0.20) !important;
}

html[data-theme="andalus"] .card:not(.station-card) > *,
html[data-style="arabesque"] .card:not(.station-card) > * {
  position: relative;
  z-index: 1;
}

/* Top Horizon Ray */
html[data-theme="andalus"] .card::before,
html[data-style="arabesque"] .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #046a38 20%, #d4af37 50%, #fef9c3 65%, #0f766e 80%, transparent);
  opacity: 0.50;
  transition: opacity 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
  pointer-events: none;
  z-index: 2;
}
html[data-theme="andalus"][data-mode="light"] .card::before,
html[data-style="arabesque"][data-mode="light"] .card::before {
  background: linear-gradient(90deg, transparent, #046a38 20%, #d4af37 50%, #ffffff 65%, #046a38 80%, transparent);
}

html[data-theme="andalus"] .card:hover,
html[data-style="arabesque"] .card:hover,
html[data-theme="andalus"] .stat:hover,
html[data-style="arabesque"] .stat:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.70) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    0 0 0 1px rgba(212, 175, 55, 0.40),
    0 16px 36px -8px rgba(4, 106, 56, 0.45),
    0 4px 14px rgba(0, 0, 0, 0.30) !important;
}
html[data-theme="andalus"][data-mode="light"] .card:hover,
html[data-style="arabesque"][data-mode="light"] .card:hover,
html[data-theme="andalus"][data-mode="light"] .stat:hover,
html[data-style="arabesque"][data-mode="light"] .stat:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    0 0 0 1px rgba(212, 175, 55, 0.45),
    0 16px 36px -8px rgba(212, 175, 55, 0.38),
    0 4px 14px rgba(180, 140, 40, 0.20) !important;
}

html[data-theme="andalus"] .card:hover::before,
html[data-style="arabesque"] .card:hover::before {
  opacity: 1;
  height: 3px;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.85);
}

/* Background Watermark: Sacred Geometric Star of Andalus (Rub el Hizb) */
html[data-theme="andalus"] .card:not(.station-card)::after,
html[data-style="arabesque"] .card:not(.station-card)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  width: 74px;
  height: 74px;
  background-color: var(--accent-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='0.8' fill='black' fill-opacity='0.18'/%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='0.8' fill='black' fill-opacity='0.18' transform='rotate(45 12 12)'/%3E%3Cpolygon points='12 3 14.5 9.5 21 12 14.5 14.5 12 21 9.5 14.5 3 12 9.5 9.5' fill='black' fill-opacity='0.35'/%3E%3Ccircle cx='12' cy='12' r='2.8' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='0.8' fill='black' fill-opacity='0.18'/%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='0.8' fill='black' fill-opacity='0.18' transform='rotate(45 12 12)'/%3E%3Cpolygon points='12 3 14.5 9.5 21 12 14.5 14.5 12 21 9.5 14.5 3 12 9.5 9.5' fill='black' fill-opacity='0.35'/%3E%3Ccircle cx='12' cy='12' r='2.8' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  animation: andalus-star-float 9s ease-in-out infinite;
  transition: opacity 0.35s ease, filter 0.35s ease;
}
html[data-theme="andalus"] .card:not(.station-card):hover::after,
html[data-style="arabesque"] .card:not(.station-card):hover::after {
  opacity: 0.25;
  filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.75));
}

/* Stat tile watermark */
html[data-theme="andalus"] .stat::after,
html[data-style="arabesque"] .stat::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 12px;
  width: 22px;
  height: 22px;
  background-color: var(--accent-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='0.8' fill='black' fill-opacity='0.25'/%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='0.8' fill='black' fill-opacity='0.25' transform='rotate(45 12 12)'/%3E%3Cpolygon points='12 3 14.5 9.5 21 12 14.5 14.5 12 21 9.5 14.5 3 12 9.5 9.5' fill='black'/%3E%3Ccircle cx='12' cy='12' r='2.5' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='0.8' fill='black' fill-opacity='0.25'/%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='0.8' fill='black' fill-opacity='0.25' transform='rotate(45 12 12)'/%3E%3Cpolygon points='12 3 14.5 9.5 21 12 14.5 14.5 12 21 9.5 14.5 3 12 9.5 9.5' fill='black'/%3E%3Ccircle cx='12' cy='12' r='2.5' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.30;
  pointer-events: none;
  animation: andalus-star-float 9s ease-in-out infinite;
  transition: transform .14s ease, opacity .14s ease;
}
html[data-theme="andalus"] .stat:hover::after,
html[data-style="arabesque"] .stat:hover::after {
  transform: translateY(-2px) scale(1.15);
  opacity: 0.90;
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.8));
}

/* Station Card Balance */
html[data-theme="andalus"] .station-card .sc-balance::after,
html[data-style="arabesque"] .station-card .sc-balance::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background-color: var(--accent-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='0.8' fill='black' fill-opacity='0.25'/%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='0.8' fill='black' fill-opacity='0.25' transform='rotate(45 12 12)'/%3E%3Cpolygon points='12 3 14.5 9.5 21 12 14.5 14.5 12 21 9.5 14.5 3 12 9.5 9.5' fill='black'/%3E%3Ccircle cx='12' cy='12' r='2.5' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='0.8' fill='black' fill-opacity='0.25'/%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='0.8' fill='black' fill-opacity='0.25' transform='rotate(45 12 12)'/%3E%3Cpolygon points='12 3 14.5 9.5 21 12 14.5 14.5 12 21 9.5 14.5 3 12 9.5 9.5' fill='black'/%3E%3Ccircle cx='12' cy='12' r='2.5' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.35;
  pointer-events: none;
  animation: andalus-star-float 9s ease-in-out infinite;
  transition: transform .14s ease, opacity .14s ease;
}
html[data-theme="andalus"] .station-card:hover .sc-balance::after,
html[data-style="arabesque"] .station-card:hover .sc-balance::after {
  transform: translateY(-50%) scale(1.22);
  opacity: 0.95;
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.8));
}
/* Active navigation tabs with living lantern pulse */
html[data-theme="andalus"] .tab.active,
html[data-theme="andalus"] .pill.active {
  background: linear-gradient(135deg, #022c1b 0%, #046a38 50%, #067a42 100%) !important;
  border-color: rgba(212, 175, 55, 0.8) !important;
  color: #fffef2 !important;
  box-shadow: 0 0 14px -2px rgba(212, 175, 55, 0.45), inset 0 1px 0 rgba(255, 230, 140, 0.4) !important;
  animation: andalus-lantern-pulse 4s ease-in-out infinite alternate;
}
/* Table row inspection highlight */
html[data-theme="andalus"] table tbody tr {
  transition: background-color 0.16s ease;
}
html[data-theme="andalus"] table tbody tr:hover td {
  background-color: rgba(4, 106, 56, 0.18) !important;
}
html[data-theme="andalus"] table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 #d4af37 !important;
}

/* Mundial: World Cup & Championship Trophy (Black & Gold Edition) */
html[data-theme="mundial"] {
  --tint: #b45309;
  --accent: #f59e0b;
  --accent-2: #fbbf24;
  --accent-3: #d97706;
  --font: "Syne", "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #070709;
  --panel: #0f1015;
  --panel-2: #171922;
  --border: rgba(245, 158, 11, 0.30);
  --text: #fffdfa;
  --muted: #a39e94;
  --input-bg: #0b0c10;
  --shadow-glow: 0 8px 28px -6px rgba(245, 158, 11, 0.42);
  --app-bg:
    radial-gradient(1100px 520px at 50% -70px, rgba(245, 158, 11, 0.18), transparent 70%),
    radial-gradient(900px 460px at 85% 15%, rgba(251, 191, 36, 0.12), transparent 60%),
    radial-gradient(800px 420px at 15% 85%, rgba(217, 119, 6, 0.10), transparent 60%),
    linear-gradient(180deg, #070709 0%, #030304 100%);
}
html[data-theme="mundial"][data-mode="light"] {
  --tint: #92400e;
  --accent: #b45309;
  --accent-2: #92400e;
  --accent-3: #78350f;
  --bg: #faf8f5;
  --panel: #ffffff;
  --panel-2: #f4ede2;
  --border: rgba(180, 83, 9, 0.28);
  --text: #18150f;
  --muted: #6b6455;
  --input-bg: #ffffff;
  --shadow-glow: 0 4px 18px -6px rgba(180, 83, 9, 0.35);
  --app-bg:
    radial-gradient(1000px 480px at 50% -60px, rgba(180, 83, 9, 0.14), transparent 70%),
    radial-gradient(800px 400px at 85% 15%, rgba(217, 119, 6, 0.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #faf6ef 100%);
}
html[data-theme="mundial"] h1, html[data-theme="mundial"] h2, html[data-theme="mundial"] h3, html[data-theme="mundial"] h4,
html[data-theme="mundial"] .brand, html[data-theme="mundial"] .login-title, html[data-theme="mundial"] .month-bar .title {
  font-family: "Syne", "Outfit", sans-serif;
  letter-spacing: -0.015em;
  font-weight: 800;
  color: #f59e0b;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
html[data-theme="mundial"][data-mode="light"] h1,
html[data-theme="mundial"][data-mode="light"] h2,
html[data-theme="mundial"][data-mode="light"] h3,
html[data-theme="mundial"][data-mode="light"] h4 {
  color: #b45309;
  text-shadow: none;
}
html[data-theme="mundial"] .brand {
  background: linear-gradient(135deg, #fef08a 0%, #fbbf24 45%, #f59e0b 80%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(245, 158, 11, 0.55));
}
html[data-theme="mundial"] .brand::before {
  content: "⚽ ";
  font-size: 1.1em;
  vertical-align: middle;
  margin-right: 2px;
}
html[data-theme="mundial"] .login-title::before {
  content: "🏆 ";
  font-size: 1.05em;
}
html[data-theme="mundial"] .btn.primary,
html[data-theme="mundial"] .login-submit {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 45%, #fbbf24 100%) !important;
  color: #0b0904 !important;
  font-family: "Outfit", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  border: 1px solid rgba(254, 240, 138, 0.75) !important;
  box-shadow: 0 4px 16px -2px rgba(245, 158, 11, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
html[data-theme="mundial"] .btn.primary:hover,
html[data-theme="mundial"] .login-submit:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #fef08a 100%) !important;
  box-shadow: 0 6px 24px -2px rgba(245, 158, 11, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  color: #000000 !important;
  transform: translateY(-1px);
}
/* Mundial: Glass + Material hybrid surfaces */
html[data-theme="mundial"] .card,
html[data-theme="mundial"] .stat,
html[data-theme="mundial"] .modal,
html[data-theme="mundial"] .login-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(23, 25, 34, 0.78), rgba(15, 16, 21, 0.88)) !important;
  border: 1px solid rgba(245, 158, 11, 0.30) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 2px 5px -1px rgba(0, 0, 0, 0.45),
    0 8px 26px -4px rgba(245, 158, 11, 0.22) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease !important;
}
html[data-theme="mundial"][data-mode="light"] .card,
html[data-theme="mundial"][data-mode="light"] .stat,
html[data-theme="mundial"][data-mode="light"] .modal,
html[data-theme="mundial"][data-mode="light"] .login-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 244, 236, 0.90)) !important;
  border: 1px solid rgba(180, 83, 9, 0.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 5px rgba(180, 83, 9, 0.10),
    0 8px 22px -4px rgba(180, 83, 9, 0.18) !important;
}

html[data-theme="mundial"] .card:not(.station-card) > * {
  position: relative;
  z-index: 1;
}

/* Top Horizon Ray */
html[data-theme="mundial"] .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d97706 20%, #f59e0b 50%, #fef08a 65%, #fbbf24 80%, transparent);
  opacity: 0.50;
  transition: opacity 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
  pointer-events: none;
  z-index: 2;
}
html[data-theme="mundial"][data-mode="light"] .card::before {
  background: linear-gradient(90deg, transparent, #b45309 20%, #f59e0b 50%, #ffffff 65%, #d97706 80%, transparent);
}

html[data-theme="mundial"] .card:hover,
html[data-theme="mundial"] .stat:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 158, 11, 0.75) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 0 1px rgba(245, 158, 11, 0.45),
    0 16px 36px -8px rgba(245, 158, 11, 0.42),
    0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="mundial"][data-mode="light"] .card:hover,
html[data-theme="mundial"][data-mode="light"] .stat:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 0 0 1px rgba(180, 83, 9, 0.45),
    0 16px 36px -8px rgba(245, 158, 11, 0.35),
    0 4px 14px rgba(180, 83, 9, 0.18) !important;
}

html[data-theme="mundial"] .card:hover::before {
  opacity: 1;
  height: 3px;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.85);
}

/* Background Watermark: 32-Panel Soccer Ball Silhouette */
html[data-theme="mundial"] .card:not(.station-card)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  width: 74px;
  height: 74px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='12 7.5 15.5 10 14 14 10 14 8.5 10' fill='black'/%3E%3Cpath d='M12 7.5V2M15.5 10l4.5-2M14 14l3.5 3.5M10 14l-3.5 3.5M8.5 10L4 8'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='12 7.5 15.5 10 14 14 10 14 8.5 10' fill='black'/%3E%3Cpath d='M12 7.5V2M15.5 10l4.5-2M14 14l3.5 3.5M10 14l-3.5 3.5M8.5 10L4 8'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  animation: mundial-ball-spin 36s linear infinite;
  transition: opacity 0.35s ease, filter 0.35s ease;
}
html[data-theme="mundial"] .card:not(.station-card):hover::after {
  opacity: 0.26;
  filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.75));
}

/* Stat tile watermark */
html[data-theme="mundial"] .stat::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 12px;
  width: 22px;
  height: 22px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='12 7.5 15.5 10 14 14 10 14 8.5 10' fill='black'/%3E%3Cpath d='M12 7.5V2M15.5 10l4.5-2M14 14l3.5 3.5M10 14l-3.5 3.5M8.5 10L4 8'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='12 7.5 15.5 10 14 14 10 14 8.5 10' fill='black'/%3E%3Cpath d='M12 7.5V2M15.5 10l4.5-2M14 14l3.5 3.5M10 14l-3.5 3.5M8.5 10L4 8'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.30;
  pointer-events: none;
  animation: th-spin-s 12s linear infinite;
  transition: transform .14s ease, opacity .14s ease;
}
html[data-theme="mundial"] .stat:hover::after {
  transform: translateY(-2px) scale(1.15);
  opacity: 0.90;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.8));
}

/* Station Card Balance */
html[data-theme="mundial"] .station-card .sc-balance::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background-color: var(--accent-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='12 7.5 15.5 10 14 14 10 14 8.5 10' fill='black'/%3E%3Cpath d='M12 7.5V2M15.5 10l4.5-2M14 14l3.5 3.5M10 14l-3.5 3.5M8.5 10L4 8'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='12 7.5 15.5 10 14 14 10 14 8.5 10' fill='black'/%3E%3Cpath d='M12 7.5V2M15.5 10l4.5-2M14 14l3.5 3.5M10 14l-3.5 3.5M8.5 10L4 8'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.35;
  pointer-events: none;
  animation: th-spin-c 12s linear infinite;
  transition: transform .14s ease, opacity .14s ease;
}
html[data-theme="mundial"] .station-card:hover .sc-balance::after {
  transform: translateY(-50%) scale(1.22);
  opacity: 0.95;
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.8));
}

/* Nimbus · Snowmoon: moonlit snow by night, overcast sky by day — bluish sky accent */
html[data-theme="nimbus"] {
  --tint: #6c9bd2;
  --accent: #8fb9e8;
  --accent-2: #b9d2ec;
  --accent-3: #e8f0fa;
  --sky-moon: #eaf2fb;
  --sky-cloud: #44597c;
  --font: "Plus Jakarta Sans", "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #1b2538;
  --panel: #2a3850;
  --panel-2: #35486a;
  --border: rgba(160, 190, 225, 0.22);
  --text: #eef4fc;
  --muted: #aebdd6;
  --input-bg: #212c42;
  --shadow-glow: 0 8px 30px -8px rgba(143, 185, 232, 0.40);
  --app-bg:
    radial-gradient(520px 520px at 82% 14%, rgba(233, 241, 251, 0.55), rgba(160, 190, 225, 0.16) 28%, transparent 56%),
    radial-gradient(1000px 520px at 50% 116%, rgba(150, 180, 220, 0.20), transparent 60%),
    linear-gradient(180deg, #1b2538 0%, #141d2e 100%);
  background-attachment: fixed;
}
html[data-theme="nimbus"][data-mode="light"] {
  --accent: #35719f;
  --accent-2: #5b8fbf;
  --accent-3: #6f8296;
  --sky-moon: #f3f6fa;
  --sky-cloud: #9fb0c6;
  --bg: #c5cedb;
  --panel: #dde4ed;
  --panel-2: #c9d3e0;
  --border: rgba(55, 78, 110, 0.22);
  --text: #263447;
  --muted: #58697e;
  --input-bg: #e4e9f1;
  --shadow-glow: 0 6px 20px -8px rgba(53, 113, 159, 0.30);
  --app-bg:
    radial-gradient(900px 460px at 78% 12%, rgba(242, 245, 249, 0.78), transparent 46%),
    radial-gradient(1100px 540px at 50% -60px, rgba(150, 170, 195, 0.30), transparent 66%),
    linear-gradient(180deg, #c5cedb 0%, #b7c2d1 100%);
}
html[data-theme="nimbus"] h1, html[data-theme="nimbus"] h2, html[data-theme="nimbus"] h3, html[data-theme="nimbus"] h4,
html[data-theme="nimbus"] .month-bar .title {
  font-family: "Plus Jakarta Sans", "Outfit", -apple-system, sans-serif;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: #b9d2ec;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
html[data-theme="nimbus"][data-mode="light"] h1,
html[data-theme="nimbus"][data-mode="light"] h2,
html[data-theme="nimbus"][data-mode="light"] h3,
html[data-theme="nimbus"][data-mode="light"] h4 {
  color: #2f5f86;
  text-shadow: none;
}

/* Sky: Celestial Azure, Solar Amber & Stratosphere (Glass-Material Edition) */
html[data-theme="sky"] {
  --tint: #0284c7;
  --accent: #0284c7;
  --accent-2: #38bdf8;
  --accent-3: #fbbf24;
  --sky-sun: #f59e0b;
  --sky-cloud: #f0f9ff;
  --font: "Plus Jakarta Sans", "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #061122;
  --panel: rgba(11, 28, 54, 0.72);
  --panel-2: rgba(18, 44, 82, 0.65);
  --border: rgba(125, 211, 252, 0.24);
  --text: #f0f9ff;
  --muted: #94a9c9;
  --input-bg: rgba(6, 18, 38, 0.78);
  --shadow-glow: 0 8px 30px -6px rgba(56, 189, 248, 0.45);
  --app-bg:
    radial-gradient(1100px 520px at 50% -70px, rgba(14, 165, 233, 0.32), transparent 70%),
    radial-gradient(900px 460px at 85% 15%, rgba(251, 191, 36, 0.18), transparent 60%),
    radial-gradient(850px 420px at 15% 85%, rgba(2, 132, 199, 0.22), transparent 65%),
    linear-gradient(180deg, #061122 0%, #030813 100%);
  background-attachment: fixed;
}
html[data-theme="sky"][data-mode="light"] {
  --bg: #f0f8ff;
  --panel: rgba(255, 255, 255, 0.84);
  --panel-2: rgba(224, 242, 254, 0.76);
  --border: rgba(2, 132, 199, 0.20);
  --text: #082845;
  --muted: #386082;
  --input-bg: rgba(255, 255, 255, 0.92);
  --shadow-glow: 0 6px 20px -6px rgba(2, 132, 199, 0.32);
  --app-bg:
    radial-gradient(1000px 500px at 50% -60px, rgba(56, 189, 248, 0.24), transparent 70%),
    radial-gradient(850px 420px at 85% 15%, rgba(251, 191, 36, 0.20), transparent 60%),
    linear-gradient(180deg, #f0f8ff 0%, #dbeafe 100%);
}
html[data-theme="sky"] h1, html[data-theme="sky"] h2, html[data-theme="sky"] h3, html[data-theme="sky"] h4,
html[data-theme="sky"] .month-bar .title {
  font-family: "Plus Jakarta Sans", "Outfit", -apple-system, sans-serif;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: #38bdf8;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
html[data-theme="sky"][data-mode="light"] h1,
html[data-theme="sky"][data-mode="light"] h2,
html[data-theme="sky"][data-mode="light"] h3,
html[data-theme="sky"][data-mode="light"] h4 {
  color: #0369a1;
  text-shadow: none;
}
html[data-theme="sky"] .brand {
  font-family: "Plus Jakarta Sans", "Outfit", -apple-system, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(115deg, #38bdf8 0%, #7dd3fc 25%, #ffffff 45%, #fbbf24 70%, #38bdf8 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(56, 189, 248, 0.5));
  animation: sky-sheen 8s ease-in-out infinite;
}
html[data-theme="sky"] .brand::before {
  content: "⛅ ";
  font-size: 1.1em;
  vertical-align: middle;
  margin-right: 3px;
  display: inline-block;
  animation: sun-radiance 5s ease-in-out infinite;
}
html[data-theme="sky"] .login-title::before {
  content: "🌤️ ";
  font-size: 1.05em;
  display: inline-block;
}

/* Glass + Material Hybrid Surfaces */
html[data-theme="sky"] .card,
html[data-theme="sky"] .stat,
html[data-theme="sky"] .modal,
html[data-theme="sky"] .login-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(14, 34, 64, 0.72), rgba(7, 20, 40, 0.78)) !important;
  border: 1px solid rgba(125, 211, 252, 0.24) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 2px 4px -1px rgba(0, 0, 0, 0.20),
    0 8px 24px -4px rgba(2, 132, 199, 0.24) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease !important;
}
html[data-theme="sky"][data-mode="light"] .card,
html[data-theme="sky"][data-mode="light"] .stat,
html[data-theme="sky"][data-mode="light"] .modal,
html[data-theme="sky"][data-mode="light"] .login-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.90), rgba(240, 249, 255, 0.82)) !important;
  border: 1px solid rgba(2, 132, 199, 0.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 5px rgba(2, 132, 199, 0.10),
    0 8px 20px -4px rgba(2, 132, 199, 0.16) !important;
}

/* Ensure content sits above the sky watermark */
html[data-theme="sky"] .card:not(.station-card) > * {
  position: relative;
  z-index: 1;
}

/* Top-edge sunlit horizon ray on card hover */
html[data-theme="sky"] .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #38bdf8 25%, #fbbf24 50%, #38bdf8 75%, transparent);
  opacity: 0.45;
  transition: opacity 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
  pointer-events: none;
  z-index: 2;
}
html[data-theme="sky"] .card:hover,
html[data-theme="sky"] .stat:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.65) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 1px rgba(56, 189, 248, 0.35),
    0 16px 36px -8px rgba(2, 132, 199, 0.45),
    0 4px 14px rgba(0, 0, 0, 0.25) !important;
}
html[data-theme="sky"] .card:hover::before {
  opacity: 1;
  height: 3px;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.85);
}

/* Non-obstructing background sky watermark:
   Centered vertically along the right background (top: 50%; translateY(-50%)),
   z-index: 0 so it never competes for space with buttons, pagination, or table numbers */
html[data-theme="sky"] .card:not(.station-card)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  width: 74px;
  height: 74px;
  background-color: var(--accent-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M12 2v2M4.93 4.93l1.41 1.41M19.07 4.93l-1.41 1.41M2 8h2M20 8h2'/%3E%3Cpath d='M17.5 19H9a5 5 0 0 1-1-9.9 6.5 6.5 0 0 1 12 2.9A4 4 0 0 1 17.5 19z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M12 2v2M4.93 4.93l1.41 1.41M19.07 4.93l-1.41 1.41M2 8h2M20 8h2'/%3E%3Cpath d='M17.5 19H9a5 5 0 0 1-1-9.9 6.5 6.5 0 0 1 12 2.9A4 4 0 0 1 17.5 19z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  animation: th-sky-float 8s ease-in-out infinite;
  transition: opacity 0.35s ease, filter 0.35s ease;
}
html[data-theme="sky"] .card:not(.station-card):hover::after {
  opacity: 0.24;
  filter: drop-shadow(0 0 14px rgba(251, 191, 36, 0.6));
}

/* Stat tile sky watermark */
html[data-theme="sky"] .stat::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 12px;
  width: 22px;
  height: 22px;
  background-color: var(--accent-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M12 2v2M4.93 4.93l1.41 1.41M19.07 4.93l-1.41 1.41M2 8h2M20 8h2'/%3E%3Cpath d='M17.5 19H9a5 5 0 0 1-1-9.9 6.5 6.5 0 0 1 12 2.9A4 4 0 0 1 17.5 19z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M12 2v2M4.93 4.93l1.41 1.41M19.07 4.93l-1.41 1.41M2 8h2M20 8h2'/%3E%3Cpath d='M17.5 19H9a5 5 0 0 1-1-9.9 6.5 6.5 0 0 1 12 2.9A4 4 0 0 1 17.5 19z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.32;
  pointer-events: none;
  animation: th-sky-float 8s ease-in-out infinite;
  transition: transform .14s ease, opacity .14s ease;
}
html[data-theme="sky"] .stat:hover::after {
  transform: translateY(-2px) scale(1.15);
  opacity: 0.90;
  background-color: var(--accent-3);
}

/* Station Card Balance Metric */
html[data-theme="sky"] .station-card .sc-balance {
  position: relative;
  overflow: hidden;
}
html[data-theme="sky"] .station-card .sc-balance::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background-color: var(--accent-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M12 2v2M4.93 4.93l1.41 1.41M19.07 4.93l-1.41 1.41M2 8h2M20 8h2'/%3E%3Cpath d='M17.5 19H9a5 5 0 0 1-1-9.9 6.5 6.5 0 0 1 12 2.9A4 4 0 0 1 17.5 19z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M12 2v2M4.93 4.93l1.41 1.41M19.07 4.93l-1.41 1.41M2 8h2M20 8h2'/%3E%3Cpath d='M17.5 19H9a5 5 0 0 1-1-9.9 6.5 6.5 0 0 1 12 2.9A4 4 0 0 1 17.5 19z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.35;
  pointer-events: none;
  animation: th-sky-float-c 8s ease-in-out infinite;
  transition: transform .14s ease, opacity .14s ease;
}
html[data-theme="sky"] .station-card:hover .sc-balance::after {
  transform: translateY(-50%) scale(1.22);
  opacity: 0.95;
  background-color: var(--accent-3);
}

/* Material Pill Buttons with Glass Sheen */
html[data-theme="sky"] .btn.primary,
html[data-theme="sky"] .login-submit {
  position: relative;
  overflow: hidden;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #0369a1 0%, #0284c7 45%, #0ea5e9 80%, #38bdf8 100%) !important;
  color: #ffffff !important;
  font-family: "Plus Jakarta Sans", "Outfit", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.025em !important;
  border: 1px solid rgba(186, 230, 253, 0.6) !important;
  box-shadow: 0 4px 16px -2px rgba(2, 132, 199, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html[data-theme="sky"] .btn.primary::after,
html[data-theme="sky"] .login-submit::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -80%;
  width: 35%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: rotate(25deg);
  pointer-events: none;
}
html[data-theme="sky"] .btn.primary:hover::after,
html[data-theme="sky"] .login-submit:hover::after {
  left: 150%;
  transition: left 0.75s ease-in-out;
}
html[data-theme="sky"] .btn.primary:hover,
html[data-theme="sky"] .login-submit:hover {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 45%, #38bdf8 80%, #fbbf24 100%) !important;
  box-shadow: 0 6px 24px -2px rgba(56, 189, 248, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
  transform: translateY(-2px);
}

/* Navigation Tabs & Active Pills */
html[data-theme="sky"] .tab.active,
html[data-theme="sky"] .pill.active {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.88) 0%, rgba(14, 165, 233, 0.88) 100%) !important;
  border-color: rgba(125, 211, 252, 0.75) !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px -2px rgba(56, 189, 248, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  animation: sky-tab-breathe 4s ease-in-out infinite alternate;
}

/* Table Rows: Sky Blue wash + Amber Left Bar */
html[data-theme="sky"] table tbody tr {
  transition: background-color 0.16s ease;
}
html[data-theme="sky"] table tbody tr:hover td {
  background-color: rgba(14, 165, 233, 0.12) !important;
}
html[data-theme="sky"] table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 #fbbf24 !important;
}

/* ============================================================================
   SOLUNA: Celestial Sun & Moon Duality (Glass-Material Edition)
   - Day / Light Mode: Solar golden sunlight, corona flares & radiant amber rays
   - Night / Dark Mode: Deep midnight obsidian, silver moonbeams & lunar starlight
   ============================================================================ */
/* Default / Dark Mode: Luna (Moon) */
html[data-theme="soluna"] {
  --tint: #c084fc;
  --accent: #c084fc;
  --accent-2: #e2e8f0;
  --accent-3: #38bdf8;
  --luna-glow: #a855f7;
  --font: "Outfit", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #070b16;
  --panel: rgba(15, 23, 42, 0.74);
  --panel-2: rgba(30, 41, 59, 0.65);
  --border: rgba(192, 132, 252, 0.26);
  --text: #f8fafc;
  --muted: #94a3b8;
  --input-bg: rgba(8, 14, 28, 0.78);
  --shadow-glow: 0 8px 30px -6px rgba(192, 132, 252, 0.40);
  --app-bg:
    radial-gradient(1100px 520px at 50% -70px, rgba(192, 132, 252, 0.24), transparent 70%),
    radial-gradient(900px 480px at 85% 15%, rgba(56, 189, 248, 0.16), transparent 60%),
    radial-gradient(800px 420px at 15% 85%, rgba(99, 102, 241, 0.18), transparent 65%),
    linear-gradient(180deg, #070b16 0%, #03050a 100%);
  background-attachment: fixed;
}
/* Light Mode: Sol (Sun) */
html[data-theme="soluna"][data-mode="light"] {
  --tint: #f59e0b;
  --accent: #f59e0b;
  --accent-2: #fbbf24;
  --accent-3: #f97316;
  --sol-glow: #f59e0b;
  --bg: #fffdf7;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-2: rgba(254, 243, 199, 0.76);
  --border: rgba(245, 158, 11, 0.28);
  --text: #451a03;
  --muted: #92400e;
  --input-bg: rgba(255, 255, 255, 0.94);
  --shadow-glow: 0 8px 30px -6px rgba(245, 158, 11, 0.45);
  --app-bg:
    radial-gradient(1100px 520px at 50% -80px, rgba(251, 191, 36, 0.32), transparent 70%),
    radial-gradient(900px 480px at 90% 15%, rgba(249, 115, 22, 0.16), transparent 60%),
    radial-gradient(800px 420px at 10% 80%, rgba(245, 158, 11, 0.18), transparent 65%),
    linear-gradient(180deg, #fffdf7 0%, #fef3c7 100%);
}

/* Headings: Starlight silver in dark mode, molten sun-gold in light mode */
html[data-theme="soluna"] h1, html[data-theme="soluna"] h2, html[data-theme="soluna"] h3, html[data-theme="soluna"] h4,
html[data-theme="soluna"] .month-bar .title {
  font-family: "Outfit", "Plus Jakarta Sans", sans-serif;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: #e2e8f0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
html[data-theme="soluna"][data-mode="light"] h1,
html[data-theme="soluna"][data-mode="light"] h2,
html[data-theme="soluna"][data-mode="light"] h3,
html[data-theme="soluna"][data-mode="light"] h4,
html[data-theme="soluna"][data-mode="light"] .month-bar .title {
  color: #b45309;
  text-shadow: none;
}

/* Brand Wordmark: Dual dynamic lunar/solar gradient */
html[data-theme="soluna"] .brand {
  font-family: "Outfit", "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, #e2e8f0 0%, #cbd5e1 25%, #ffffff 45%, #c084fc 70%, #38bdf8 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(192, 132, 252, 0.5));
  animation: soluna-lunar-sheen 8s ease-in-out infinite;
}
html[data-theme="soluna"][data-mode="light"] .brand {
  background: linear-gradient(120deg, #d97706 0%, #f59e0b 25%, #ffffff 45%, #fbbf24 70%, #f97316 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(245, 158, 11, 0.5));
  animation: soluna-solar-sheen 8s ease-in-out infinite;
}

/* Dynamic Emblem: Moon by night, Sun by day */
html[data-theme="soluna"] .brand::before {
  content: "🌙 ";
  font-size: 1.1em;
  vertical-align: middle;
  margin-right: 3px;
  display: inline-block;
  animation: lunar-halo-pulse 5s ease-in-out infinite;
}
html[data-theme="soluna"][data-mode="light"] .brand::before {
  content: "☀️ ";
  font-size: 1.1em;
  animation: solar-corona-spin 6s linear infinite;
}
html[data-theme="soluna"] .login-title::before {
  content: "🌙 ";
  font-size: 1.05em;
  display: inline-block;
}
html[data-theme="soluna"][data-mode="light"] .login-title::before {
  content: "☀️ ";
  display: inline-block;
}

/* Glass + Material Hybrid Surfaces */
html[data-theme="soluna"] .card,
html[data-theme="soluna"] .stat,
html[data-theme="soluna"] .modal,
html[data-theme="soluna"] .login-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(17, 26, 48, 0.74), rgba(10, 16, 32, 0.82)) !important;
  border: 1px solid rgba(192, 132, 252, 0.24) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 2px 5px -1px rgba(0, 0, 0, 0.25),
    0 8px 26px -4px rgba(192, 132, 252, 0.20) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease !important;
}
html[data-theme="soluna"][data-mode="light"] .card,
html[data-theme="soluna"][data-mode="light"] .stat,
html[data-theme="soluna"][data-mode="light"] .modal,
html[data-theme="soluna"][data-mode="light"] .login-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(254, 249, 235, 0.84)) !important;
  border: 1px solid rgba(245, 158, 11, 0.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 5px rgba(245, 158, 11, 0.12),
    0 8px 22px -4px rgba(245, 158, 11, 0.20) !important;
}

/* Ensure content sits above the watermark */
html[data-theme="soluna"] .card:not(.station-card) > * {
  position: relative;
  z-index: 1;
}

/* Top-edge Horizon Ray: Silver Moonlight (Dark) vs Solar Ray (Light) */
html[data-theme="soluna"] .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c084fc 20%, #e2e8f0 50%, #38bdf8 80%, transparent);
  opacity: 0.45;
  transition: opacity 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
  pointer-events: none;
  z-index: 2;
}
html[data-theme="soluna"][data-mode="light"] .card::before {
  background: linear-gradient(90deg, transparent, #f59e0b 20%, #fbbf24 50%, #ffffff 65%, #f59e0b 80%, transparent);
  opacity: 0.55;
}
html[data-theme="soluna"] .card:hover,
html[data-theme="soluna"] .stat:hover {
  transform: translateY(-2px);
  border-color: rgba(192, 132, 252, 0.65) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    0 0 0 1px rgba(192, 132, 252, 0.35),
    0 16px 36px -8px rgba(192, 132, 252, 0.35),
    0 4px 14px rgba(0, 0, 0, 0.30) !important;
}
html[data-theme="soluna"][data-mode="light"] .card:hover,
html[data-theme="soluna"][data-mode="light"] .stat:hover {
  border-color: rgba(245, 158, 11, 0.70) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.60),
    0 0 0 1px rgba(245, 158, 11, 0.40),
    0 16px 36px -8px rgba(245, 158, 11, 0.40),
    0 4px 14px rgba(180, 83, 9, 0.20) !important;
}
html[data-theme="soluna"] .card:hover::before {
  opacity: 1;
  height: 3px;
  box-shadow: 0 0 12px rgba(192, 132, 252, 0.85);
}
html[data-theme="soluna"][data-mode="light"] .card:hover::before {
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.85);
}

/* Background Watermark: Crescent Moon by night, Radiant Sun by day */
html[data-theme="soluna"] .card:not(.station-card)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  width: 74px;
  height: 74px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' fill='black'/%3E%3Cpolygon points='16.5 7.5 17.5 9.5 19.5 10.5 17.5 11.5 16.5 13.5 15.5 11.5 13.5 10.5 15.5 9.5' fill='black' stroke='none'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' fill='black'/%3E%3Cpolygon points='16.5 7.5 17.5 9.5 19.5 10.5 17.5 11.5 16.5 13.5 15.5 11.5 13.5 10.5 15.5 9.5' fill='black' stroke='none'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  animation: soluna-moon-float 8s ease-in-out infinite;
  transition: opacity 0.35s ease, filter 0.35s ease;
}
html[data-theme="soluna"][data-mode="light"] .card:not(.station-card)::after {
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.5' fill='black'/%3E%3Cpath d='M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.93 4.93l1.77 1.77M17.3 17.3l1.77 1.77M4.93 19.07l1.77-1.77M17.3 6.7l1.77-1.77'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.5' fill='black'/%3E%3Cpath d='M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.93 4.93l1.77 1.77M17.3 17.3l1.77 1.77M4.93 19.07l1.77-1.77M17.3 6.7l1.77-1.77'/%3E%3C/svg%3E") no-repeat center / contain;
  animation: soluna-sun-turn 36s linear infinite;
}
html[data-theme="soluna"] .card:not(.station-card):hover::after {
  opacity: 0.24;
  filter: drop-shadow(0 0 14px rgba(192, 132, 252, 0.6));
}
html[data-theme="soluna"][data-mode="light"] .card:not(.station-card):hover::after {
  filter: drop-shadow(0 0 14px rgba(245, 158, 11, 0.6));
}

/* Stat tile watermark */
html[data-theme="soluna"] .stat::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 12px;
  width: 22px;
  height: 22px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.32;
  pointer-events: none;
  animation: soluna-moon-float 8s ease-in-out infinite;
  transition: transform .14s ease, opacity .14s ease;
}
html[data-theme="soluna"][data-mode="light"] .stat::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.5' fill='black'/%3E%3Cpath d='M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.93 4.93l1.77 1.77M17.3 17.3l1.77 1.77M4.93 19.07l1.77-1.77M17.3 6.7l1.77-1.77'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.5' fill='black'/%3E%3Cpath d='M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.93 4.93l1.77 1.77M17.3 17.3l1.77 1.77M4.93 19.07l1.77-1.77M17.3 6.7l1.77-1.77'/%3E%3C/svg%3E") no-repeat center / contain;
  animation: soluna-sun-turn 24s linear infinite;
}
html[data-theme="soluna"] .stat:hover::after {
  transform: translateY(-2px) scale(1.15);
  opacity: 0.90;
}

/* Station Card Balance Metric */
html[data-theme="soluna"] .station-card .sc-balance {
  position: relative;
  overflow: hidden;
}
html[data-theme="soluna"] .station-card .sc-balance::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.35;
  pointer-events: none;
  animation: soluna-moon-float 8s ease-in-out infinite;
  transition: transform .14s ease, opacity .14s ease;
}
html[data-theme="soluna"][data-mode="light"] .station-card .sc-balance::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.5' fill='black'/%3E%3Cpath d='M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.93 4.93l1.77 1.77M17.3 17.3l1.77 1.77M4.93 19.07l1.77-1.77M17.3 6.7l1.77-1.77'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.5' fill='black'/%3E%3Cpath d='M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.93 4.93l1.77 1.77M17.3 17.3l1.77 1.77M4.93 19.07l1.77-1.77M17.3 6.7l1.77-1.77'/%3E%3C/svg%3E") no-repeat center / contain;
  animation: soluna-sun-turn 24s linear infinite;
}
html[data-theme="soluna"] .station-card:hover .sc-balance::after {
  transform: translateY(-50%) scale(1.22);
  opacity: 0.95;
}

/* Material Pill Buttons with Celestial Light Glint */
html[data-theme="soluna"] .btn.primary,
html[data-theme="soluna"] .login-submit {
  position: relative;
  overflow: hidden;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 40%, #a855f7 80%, #c084fc 100%) !important;
  color: #ffffff !important;
  font-family: "Outfit", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.025em !important;
  border: 1px solid rgba(226, 232, 240, 0.6) !important;
  box-shadow: 0 4px 16px -2px rgba(192, 132, 252, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html[data-theme="soluna"][data-mode="light"] .btn.primary,
html[data-theme="soluna"][data-mode="light"] .login-submit {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 45%, #fbbf24 85%, #fef08a 100%) !important;
  color: #451a03 !important;
  font-weight: 800 !important;
  border: 1px solid rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 4px 16px -2px rgba(245, 158, 11, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}
html[data-theme="soluna"] .btn.primary::after,
html[data-theme="soluna"] .login-submit::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -80%;
  width: 35%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: rotate(25deg);
  pointer-events: none;
}
html[data-theme="soluna"] .btn.primary:hover::after,
html[data-theme="soluna"] .login-submit:hover::after {
  left: 150%;
  transition: left 0.75s ease-in-out;
}
html[data-theme="soluna"] .btn.primary:hover,
html[data-theme="soluna"] .login-submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 6px 24px -2px rgba(192, 132, 252, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}
html[data-theme="soluna"][data-mode="light"] .btn.primary:hover,
html[data-theme="soluna"][data-mode="light"] .login-submit:hover {
  box-shadow: 0 6px 24px -2px rgba(245, 158, 11, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

/* Navigation Tabs & Active Pills */
html[data-theme="soluna"] .tab.active,
html[data-theme="soluna"] .pill.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.88) 0%, rgba(168, 85, 247, 0.88) 100%) !important;
  border-color: rgba(226, 232, 240, 0.75) !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px -2px rgba(192, 132, 252, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  animation: soluna-pill-pulse 4s ease-in-out infinite alternate;
}
html[data-theme="soluna"][data-mode="light"] .tab.active,
html[data-theme="soluna"][data-mode="light"] .pill.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.90) 0%, rgba(251, 191, 36, 0.90) 100%) !important;
  border-color: rgba(245, 158, 11, 0.85) !important;
  color: #451a03 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 16px -2px rgba(245, 158, 11, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* Surprising Element 1: Day/Night Theme-Toggle Eclipse Flare */
html[data-theme="soluna"] #theme-toggle {
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-radius: 999px !important;
}
html[data-theme="soluna"] #theme-toggle:hover {
  transform: rotate(20deg) scale(1.15);
  box-shadow: 0 0 16px rgba(192, 132, 252, 0.85), inset 0 0 8px rgba(226, 232, 240, 0.6) !important;
}
html[data-theme="soluna"][data-mode="light"] #theme-toggle:hover {
  transform: rotate(45deg) scale(1.15);
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.85), inset 0 0 8px rgba(251, 191, 36, 0.6) !important;
}

/* Surprising Element 2: Input Solar & Lunar Aura on Focus */
html[data-theme="soluna"] input:focus,
html[data-theme="soluna"] select:focus,
html[data-theme="soluna"] textarea:focus {
  border-color: rgba(192, 132, 252, 0.85) !important;
  box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.25), 0 0 16px -2px rgba(168, 85, 247, 0.4) !important;
}
html[data-theme="soluna"][data-mode="light"] input:focus,
html[data-theme="soluna"][data-mode="light"] select:focus,
html[data-theme="soluna"][data-mode="light"] textarea:focus {
  border-color: rgba(245, 158, 11, 0.85) !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22), 0 0 16px -2px rgba(251, 191, 36, 0.45) !important;
}

/* Table Rows: Starlight violet wash by night, golden amber by day */
html[data-theme="soluna"] table tbody tr {
  transition: background-color 0.16s ease;
}
html[data-theme="soluna"] table tbody tr:hover td {
  background-color: rgba(192, 132, 252, 0.12) !important;
}
html[data-theme="soluna"] table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 #c084fc !important;
}
html[data-theme="soluna"][data-mode="light"] table tbody tr:hover td {
  background-color: rgba(245, 158, 11, 0.12) !important;
}
html[data-theme="soluna"][data-mode="light"] table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 #f59e0b !important;
}

/* Opt-in italic display: themes that set --head-style get italic headings + brand for flair. */
h1, h2, h3, h4, .brand, .login-title { font-style: var(--head-style, normal); }

/* ================= LOOK & FEEL (style axis) =================
   A style reshapes surfaces, buttons and shapes for the WHOLE app,
   independently of color + appearance. Applied as html[data-style="…"].
   "aurora" is the default (uses the :root treatment, no block needed). */

/* --- GLASS: frosted, translucent, soft light edges ---
   Redesigned for smooth scrolling: the frosted look now comes from more-opaque translucent
   surfaces + a light top highlight, NOT from a per-element backdrop-filter. Real blur re-computes
   the background behind EVERY element on every scroll frame; with dozens of cards/tiles/buttons and
   ~30 calendar cells that made "Frost"/"Forest" crawl. We keep one cheap blur on the single sticky
   top bar and on pop-over modals, where it's one element and not fighting a scroll. */
html[data-style="glass"] {
  --radius: 20px; --radius-btn: 14px; --radius-input: 13px;
  --surface: linear-gradient(160deg, color-mix(in srgb, var(--panel-2) 86%, transparent), color-mix(in srgb, var(--panel) 74%, transparent));
  --surface-border-color: color-mix(in srgb, var(--text) 15%, transparent);
  --elev: 0 18px 44px -20px rgba(0,0,0,.55);
}
html[data-style="glass"] .card, html[data-style="glass"] .stat, html[data-style="glass"] .modal, html[data-style="glass"] .login-card {
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 24%, transparent), var(--elev); }
/* Cheap blur only where it is a single, mostly-static element. */
html[data-style="glass"] .topbar { background: color-mix(in srgb, var(--panel) 82%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); }
html[data-style="glass"] .modal, html[data-style="glass"] .login-card { -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }
html[data-style="glass"] .btn {
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent); }
html[data-style="glass"] .btn.primary, html[data-style="glass"] .btn.success, html[data-style="glass"] .btn.info,
html[data-style="glass"] .btn.warn, html[data-style="glass"] .btn.danger {
  border: none; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent), var(--shadow-glow); }

/* --- GLASS MATERIAL: Frosted glass translucency + crisp Material elevation & surfaces --- */
html[data-style="glassmaterial"] {
  --radius: 18px; --radius-btn: 24px; --radius-input: 11px;
  --surface: linear-gradient(145deg, color-mix(in srgb, var(--panel-2) 82%, transparent), color-mix(in srgb, var(--panel) 70%, transparent));
  --surface-border-color: color-mix(in srgb, var(--accent-2) 32%, transparent);
  --elev: 0 2px 5px rgba(0,0,0,.18), 0 14px 34px -14px color-mix(in srgb, var(--accent) 30%, transparent);
}
html[data-style="glassmaterial"] .card,
html[data-style="glassmaterial"] .stat,
html[data-style="glassmaterial"] .modal,
html[data-style="glassmaterial"] .login-card {
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent), var(--elev);
  position: relative;
}
html[data-style="glassmaterial"] .topbar {
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  backdrop-filter: blur(14px) saturate(1.35);
}
html[data-style="glassmaterial"] .modal,
html[data-style="glassmaterial"] .login-card {
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
html[data-style="glassmaterial"] .btn {
  border-radius: var(--radius-btn);
  border: 1px solid color-mix(in srgb, #fff 25%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent), 0 2px 6px rgba(0,0,0,.15);
  transition: transform .14s ease, box-shadow .14s ease;
}
html[data-style="glassmaterial"] .btn:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent), 0 6px 18px -4px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* --- MATERIAL: flat solid surfaces, crisp elevation, uppercase buttons, no ambient glow --- */
html[data-style="material"] {
  --radius: 16px; --radius-btn: 22px; --radius-input: 8px;
  --surface: var(--panel);
  --surface-border-color: transparent;
  --elev: 0 1px 2px rgba(0,0,0,.30), 0 3px 8px -2px rgba(0,0,0,.24);
  --glow1: transparent; --glow2: transparent;
  --shadow-glow: 0 2px 6px rgba(0,0,0,.28);
}
html[data-style="material"] .btn { text-transform: uppercase; letter-spacing: .045em; font-weight: 700; border: none; box-shadow: var(--elev); }
html[data-style="material"] .btn:hover { transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0,0,0,.3), 0 10px 20px -6px rgba(0,0,0,.38); }
html[data-style="material"] .btn.ghost { box-shadow: none; }
html[data-style="material"] .btn.primary { background: var(--accent); }
html[data-style="material"] .btn.info    { background: var(--accent-3); }
html[data-style="material"] .btn.success { background: var(--green); }
html[data-style="material"] .btn.warn    { background: var(--amber); }
html[data-style="material"] .btn.danger  { background: var(--red); }
html[data-style="material"] .card:hover, html[data-style="material"] .stat:hover { box-shadow: 0 2px 5px rgba(0,0,0,.3), 0 12px 26px -8px rgba(0,0,0,.4); }

/* --- LIQUID: ultra-rounded, glossy sheen, squishy pills, big soft shadows --- */
html[data-style="liquid"] {
  --radius: 30px; --radius-btn: 999px; --radius-input: 24px;
  --surface: linear-gradient(150deg, var(--panel-2), var(--panel) 92%);
  --surface-border-color: color-mix(in srgb, var(--text) 10%, transparent);
  --elev: 0 24px 52px -22px rgba(0,0,0,.6);
}
html[data-style="liquid"] .card::after, html[data-style="liquid"] .stat::after, html[data-style="liquid"] .login-card::after, html[data-style="liquid"] .modal::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%;
  background: linear-gradient(180deg, color-mix(in srgb, #fff 16%, transparent), transparent); pointer-events: none; }
html[data-style="liquid"] .stat, html[data-style="liquid"] .login-card, html[data-style="liquid"] .modal { position: relative; overflow: hidden; }
html[data-style="liquid"] .btn { box-shadow: inset 0 2px 0 color-mix(in srgb, #fff 35%, transparent), var(--shadow-glow); }
html[data-style="liquid"] .btn:hover { transform: translateY(-2px) scale(1.03); }

/* --- FLAT: minimal — hairline borders, no gradients/shadows/glow, crisp corners --- */
html[data-style="flat"] {
  --radius: 8px; --radius-btn: 8px; --radius-input: 8px;
  --surface: var(--panel);
  --surface-border-color: var(--border);
  --elev: none;
  --glow1: transparent; --glow2: transparent;
  --shadow-glow: none;
}
html[data-style="flat"] .btn { box-shadow: none; }
html[data-style="flat"] .btn:hover { transform: none; box-shadow: none; filter: brightness(1.06); }
html[data-style="flat"] .card:hover, html[data-style="flat"] .stat:hover { transform: none; box-shadow: none; }

/* --- NEUMORPHIC: soft extruded surfaces, dual light/dark shadows, pressed inputs --- */
html[data-style="neu"] {
  --radius: 20px; --radius-btn: 14px; --radius-input: 12px;
  --surface: var(--panel);
  --surface-border-color: transparent;
  --elev: 7px 7px 16px color-mix(in srgb, #000 32%, transparent), -7px -7px 16px color-mix(in srgb, #fff 10%, transparent);
  --glow1: transparent; --glow2: transparent;
  --shadow-glow: 4px 4px 10px color-mix(in srgb, #000 30%, transparent), -4px -4px 10px color-mix(in srgb, #fff 10%, transparent);
}
html[data-mode="light"][data-style="neu"] {
  --elev: 7px 7px 16px color-mix(in srgb, #000 12%, transparent), -7px -7px 16px #ffffff;
  --shadow-glow: 4px 4px 10px color-mix(in srgb, #000 12%, transparent), -4px -4px 10px #ffffff;
}
html[data-style="neu"] .btn { border: none; box-shadow: var(--shadow-glow); }
html[data-style="neu"] .btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
html[data-style="neu"] .btn:active { transform: none; box-shadow: inset 4px 4px 10px color-mix(in srgb, #000 34%, transparent), inset -4px -4px 10px color-mix(in srgb, #fff 10%, transparent); }
html[data-style="neu"] input, html[data-style="neu"] select, html[data-style="neu"] textarea {
  border-color: transparent; box-shadow: inset 3px 3px 7px color-mix(in srgb, #000 28%, transparent), inset -3px -3px 7px color-mix(in srgb, #fff 8%, transparent); }
html[data-mode="light"][data-style="neu"] input, html[data-mode="light"][data-style="neu"] select, html[data-mode="light"][data-style="neu"] textarea {
  box-shadow: inset 3px 3px 7px color-mix(in srgb, #000 10%, transparent), inset -3px -3px 7px #ffffff; }

/* --- RETRO: CRT terminal — scanlines, neon glow, sharp corners, mono type --- */
html[data-style="retro"] {
  --radius: 4px; --radius-btn: 4px; --radius-input: 4px;
  --surface: color-mix(in srgb, var(--panel) 86%, #000);
  --surface-border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  --elev: 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent), 0 0 20px -6px color-mix(in srgb, var(--accent) 55%, transparent);
  --font: "Courier New", Courier, ui-monospace, monospace;
}
/* full-screen scanline overlay above content */
html[data-style="retro"]::before {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16), rgba(0,0,0,.16) 1px, transparent 1px, transparent 3px);
}
html[data-style="retro"] .brand, html[data-style="retro"] h2, html[data-style="retro"] .stat .value, html[data-style="retro"] .month-bar .title {
  text-shadow: 0 0 7px color-mix(in srgb, var(--accent) 60%, transparent); }
html[data-style="retro"] .btn { text-transform: uppercase; letter-spacing: .06em; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 10px -3px color-mix(in srgb, var(--accent) 55%, transparent); }
html[data-style="retro"] .btn.primary, html[data-style="retro"] .btn.success, html[data-style="retro"] .btn.info,
html[data-style="retro"] .btn.warn, html[data-style="retro"] .btn.danger { box-shadow: 0 0 16px -3px color-mix(in srgb, var(--accent) 70%, transparent); }
html[data-style="retro"] .btn.ghost { border-color: transparent; box-shadow: none; }
html[data-style="retro"] .card:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px color-mix(in srgb, var(--accent) 70%, transparent); }

/* --- AERO: Aerodynamic wind dynamics — streamlined surfaces, breeze 2D symbols --- */
html[data-style="aero"] {
  --radius: 18px; --radius-btn: 999px; --radius-input: 13px;
  --surface: linear-gradient(150deg, color-mix(in srgb, var(--panel-2) 90%, transparent), color-mix(in srgb, var(--panel) 82%, transparent));
  --surface-border-color: color-mix(in srgb, var(--accent-2) 28%, transparent);
  --elev: 0 12px 28px -14px color-mix(in srgb, var(--accent) 30%, transparent), 0 3px 10px rgba(0,0,0,.22);
}

/* Aero / Zephyr: Glass + Material hybrid surfaces */
html[data-theme="zephyr"] .card,
html[data-style="aero"] .card,
html[data-theme="zephyr"] .stat,
html[data-style="aero"] .stat,
html[data-theme="zephyr"] .modal,
html[data-style="aero"] .modal,
html[data-theme="zephyr"] .login-card,
html[data-style="aero"] .login-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(13, 24, 41, 0.78), rgba(7, 13, 24, 0.88)) !important;
  border: 1px solid rgba(56, 189, 248, 0.28) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 2px 5px -1px rgba(0, 0, 0, 0.35),
    0 8px 26px -4px rgba(14, 165, 233, 0.25) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease !important;
}
html[data-theme="zephyr"][data-mode="light"] .card,
html[data-style="aero"][data-mode="light"] .card,
html[data-theme="zephyr"][data-mode="light"] .stat,
html[data-style="aero"][data-mode="light"] .stat,
html[data-theme="zephyr"][data-mode="light"] .modal,
html[data-style="aero"][data-mode="light"] .modal,
html[data-theme="zephyr"][data-mode="light"] .login-card,
html[data-style="aero"][data-mode="light"] .login-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(240, 249, 255, 0.88)) !important;
  border: 1px solid rgba(14, 165, 233, 0.25) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 5px rgba(14, 165, 233, 0.10),
    0 8px 22px -4px rgba(14, 165, 233, 0.18) !important;
}

html[data-theme="zephyr"] .card:not(.station-card) > *,
html[data-style="aero"] .card:not(.station-card) > * {
  position: relative;
  z-index: 1;
}

/* Top Horizon Ray */
html[data-theme="zephyr"] .card::before,
html[data-style="aero"] .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0284c7 20%, #38bdf8 50%, #e0f2fe 65%, #14b8a6 80%, transparent);
  opacity: 0.50;
  transition: opacity 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
  pointer-events: none;
  z-index: 2;
}
html[data-theme="zephyr"][data-mode="light"] .card::before,
html[data-style="aero"][data-mode="light"] .card::before {
  background: linear-gradient(90deg, transparent, #0284c7 20%, #38bdf8 50%, #ffffff 65%, #0ea5e9 80%, transparent);
}

html[data-theme="zephyr"] .card:hover,
html[data-style="aero"] .card:hover,
html[data-theme="zephyr"] .stat:hover,
html[data-style="aero"] .stat:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.70) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    0 0 0 1px rgba(56, 189, 248, 0.40),
    0 16px 36px -8px rgba(14, 165, 233, 0.45),
    0 4px 14px rgba(0, 0, 0, 0.30) !important;
}
html[data-theme="zephyr"][data-mode="light"] .card:hover,
html[data-style="aero"][data-mode="light"] .card:hover,
html[data-theme="zephyr"][data-mode="light"] .stat:hover,
html[data-style="aero"][data-mode="light"] .stat:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    0 0 0 1px rgba(14, 165, 233, 0.45),
    0 16px 36px -8px rgba(14, 165, 233, 0.32),
    0 4px 14px rgba(14, 165, 233, 0.16) !important;
}

html[data-theme="zephyr"] .card:hover::before,
html[data-style="aero"] .card:hover::before {
  opacity: 1;
  height: 3px;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.85);
}

/* Background Watermark: Aerodynamic Wind Swirl & Vortex */
html[data-theme="zephyr"] .card:not(.station-card)::after,
html[data-style="aero"] .card:not(.station-card)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  width: 74px;
  height: 74px;
  background-color: var(--accent-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.8 5.7A3 3 0 1 0 10 9h11'/%3E%3Cpath d='M17.5 14a2.5 2.5 0 1 0-2.3-3.5H3'/%3E%3Cpath d='M9.8 17.5A2 2 0 1 0 8 15h9'/%3E%3Ccircle cx='6' cy='6' r='1.5' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.8 5.7A3 3 0 1 0 10 9h11'/%3E%3Cpath d='M17.5 14a2.5 2.5 0 1 0-2.3-3.5H3'/%3E%3Cpath d='M9.8 17.5A2 2 0 1 0 8 15h9'/%3E%3Ccircle cx='6' cy='6' r='1.5' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  animation: aero-wind-drift 7s ease-in-out infinite;
  transition: opacity 0.35s ease, filter 0.35s ease;
}
html[data-theme="zephyr"] .card:not(.station-card):hover::after,
html[data-style="aero"] .card:not(.station-card):hover::after {
  opacity: 0.25;
  filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.75));
}

html[data-style="aero"] .station-card::after {
  display: none !important;
}
html[data-theme="zephyr"] .station-card .sc-balance,
html[data-style="aero"] .station-card .sc-balance {
  position: relative;
  overflow: hidden;
}

/* Station Card Balance */
html[data-theme="zephyr"] .station-card .sc-balance::after,
html[data-style="aero"] .station-card .sc-balance::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.8 5.7A3 3 0 1 0 10 9h11'/%3E%3Cpath d='M17.5 14a2.5 2.5 0 1 0-2.3-3.5H3'/%3E%3Cpath d='M9.8 17.5A2 2 0 1 0 8 15h9'/%3E%3Ccircle cx='6' cy='6' r='1.5' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.8 5.7A3 3 0 1 0 10 9h11'/%3E%3Cpath d='M17.5 14a2.5 2.5 0 1 0-2.3-3.5H3'/%3E%3Cpath d='M9.8 17.5A2 2 0 1 0 8 15h9'/%3E%3Ccircle cx='6' cy='6' r='1.5' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.35;
  pointer-events: none;
  animation: th-breeze-c 7s ease-in-out infinite;
  transition: transform .14s ease, opacity .14s ease, background-color .14s ease;
}
html[data-theme="zephyr"] .station-card:hover .sc-balance::after,
html[data-style="aero"] .station-card:hover .sc-balance::after {
  transform: translateY(-50%) scale(1.22);
  opacity: 0.95;
  background-color: var(--accent-2);
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.8));
}

/* Stat tile watermark */
html[data-theme="zephyr"] .stat::after,
html[data-style="aero"] .stat::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 12px;
  width: 22px;
  height: 22px;
  background-color: var(--accent-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.8 5.7A3 3 0 1 0 10 9h11'/%3E%3Cpath d='M17.5 14a2.5 2.5 0 1 0-2.3-3.5H3'/%3E%3Cpath d='M9.8 17.5A2 2 0 1 0 8 15h9'/%3E%3Ccircle cx='6' cy='6' r='1.5' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.8 5.7A3 3 0 1 0 10 9h11'/%3E%3Cpath d='M17.5 14a2.5 2.5 0 1 0-2.3-3.5H3'/%3E%3Cpath d='M9.8 17.5A2 2 0 1 0 8 15h9'/%3E%3Ccircle cx='6' cy='6' r='1.5' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.30;
  pointer-events: none;
  animation: th-breeze-s 7s ease-in-out infinite;
  transition: transform .14s ease, opacity .14s ease;
}
html[data-theme="zephyr"] .stat:hover::after,
html[data-style="aero"] .stat:hover::after {
  transform: translateY(-2px) scale(1.15);
  opacity: 0.90;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.8));
}

/* Snappy Aero Buttons — no clipping, no wrapping */
html[data-style="aero"] .btn {
  border-radius: 999px;
  position: relative;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, border-color .12s ease;
}
html[data-style="aero"] .btn.primary,
html[data-style="aero"] .btn.info,
html[data-style="aero"] .btn.success {
  border: 1px solid color-mix(in srgb, #fff 30%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent), 0 3px 12px -3px color-mix(in srgb, var(--accent) 50%, transparent);
}
html[data-style="aero"] .btn.primary:hover,
html[data-style="aero"] .btn.info:hover,
html[data-style="aero"] .btn.success:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent), 0 6px 18px -3px color-mix(in srgb, var(--accent) 65%, transparent);
}
html[data-style="aero"] .btn.ghost {
  border: 1px solid transparent;
}
html[data-style="aero"] .btn.ghost:hover {
  border-color: color-mix(in srgb, var(--accent-2) 35%, transparent);
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
  transform: translateY(-1px);
}
html[data-style="aero"] .chip,
html[data-style="aero"] .sc-badge,
html[data-style="aero"] .badge {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 32%, transparent);
}


/* --- PYRO: Fire & Flame dynamics — molten amber glow, flame 2D vector silhouette --- */
html[data-style="pyro"] {
  --radius: 16px; --radius-btn: 12px; --radius-input: 12px;
  --surface: linear-gradient(150deg, color-mix(in srgb, var(--panel-2) 92%, transparent), color-mix(in srgb, var(--panel) 84%, transparent));
  --surface-border-color: color-mix(in srgb, var(--accent-2) 30%, transparent);
  --elev: 0 12px 28px -14px color-mix(in srgb, var(--accent) 36%, transparent), 0 3px 10px rgba(0,0,0,.30);
}
/* Pyro / Ignis: Glass + Material hybrid surfaces */
html[data-theme="ignis"] .card,
html[data-style="pyro"] .card,
html[data-theme="ignis"] .stat,
html[data-style="pyro"] .stat,
html[data-theme="ignis"] .modal,
html[data-style="pyro"] .modal,
html[data-theme="ignis"] .login-card,
html[data-style="pyro"] .login-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(31, 12, 8, 0.78), rgba(20, 8, 6, 0.88)) !important;
  border: 1px solid rgba(249, 115, 22, 0.30) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 5px -1px rgba(0, 0, 0, 0.40),
    0 8px 26px -4px rgba(244, 63, 94, 0.25) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease !important;
}
html[data-theme="ignis"][data-mode="light"] .card,
html[data-style="pyro"][data-mode="light"] .card,
html[data-theme="ignis"][data-mode="light"] .stat,
html[data-style="pyro"][data-mode="light"] .stat,
html[data-theme="ignis"][data-mode="light"] .modal,
html[data-style="pyro"][data-mode="light"] .modal,
html[data-theme="ignis"][data-mode="light"] .login-card,
html[data-style="pyro"][data-mode="light"] .login-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 245, 242, 0.88)) !important;
  border: 1px solid rgba(244, 63, 94, 0.25) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 5px rgba(244, 63, 94, 0.10),
    0 8px 22px -4px rgba(244, 63, 94, 0.18) !important;
}

html[data-theme="ignis"] .card:not(.station-card) > *,
html[data-style="pyro"] .card:not(.station-card) > * {
  position: relative;
  z-index: 1;
}

/* Top Horizon Ray */
html[data-theme="ignis"] .card::before,
html[data-style="pyro"] .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #e11d48 20%, #f43f5e 45%, #f97316 65%, #fbbf24 80%, transparent);
  opacity: 0.50;
  transition: opacity 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
  pointer-events: none;
  z-index: 2;
}
html[data-theme="ignis"][data-mode="light"] .card::before,
html[data-style="pyro"][data-mode="light"] .card::before {
  background: linear-gradient(90deg, transparent, #e11d48 20%, #f97316 50%, #ffffff 65%, #f43f5e 80%, transparent);
}

html[data-theme="ignis"] .card:hover,
html[data-style="pyro"] .card:hover,
html[data-theme="ignis"] .stat:hover,
html[data-style="pyro"] .stat:hover {
  transform: translateY(-2px);
  border-color: rgba(249, 115, 22, 0.75) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 0 1px rgba(249, 115, 22, 0.40),
    0 16px 36px -8px rgba(244, 63, 94, 0.45),
    0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="ignis"][data-mode="light"] .card:hover,
html[data-style="pyro"][data-mode="light"] .card:hover,
html[data-theme="ignis"][data-mode="light"] .stat:hover,
html[data-style="pyro"][data-mode="light"] .stat:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    0 0 0 1px rgba(249, 115, 22, 0.45),
    0 16px 36px -8px rgba(244, 63, 94, 0.32),
    0 4px 14px rgba(244, 63, 94, 0.16) !important;
}

html[data-theme="ignis"] .card:hover::before,
html[data-style="pyro"] .card:hover::before {
  opacity: 1;
  height: 3px;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.85);
}

/* Background Watermark: Roaring Flame Silhouette */
html[data-theme="ignis"] .card:not(.station-card)::after,
html[data-style="pyro"] .card:not(.station-card)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  width: 74px;
  height: 74px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2.2c-.4 1.8-1.5 3.4-2.8 4.8-1.8 1.9-3.4 4.1-3.4 6.8 0 3.4 2.8 6.2 6.2s6.2-2.8 6.2-6.2c0-2.2-.9-4.2-2.3-5.7C14.4 6.6 13.5 4.6 12 2.2zm0 6.6c1.3 1.3 2 2.4 2 3.8 0 1.7-1 3-2 3s-2-1.3-2-3c0-1.4.7-2.5 2-3.8z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2.2c-.4 1.8-1.5 3.4-2.8 4.8-1.8 1.9-3.4 4.1-3.4 6.8 0 3.4 2.8 6.2 6.2s6.2-2.8 6.2-6.2c0-2.2-.9-4.2-2.3-5.7C14.4 6.6 13.5 4.6 12 2.2zm0 6.6c1.3 1.3 2 2.4 2 3.8 0 1.7-1 3-2 3s-2-1.3-2-3c0-1.4.7-2.5 2-3.8z'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  animation: pyro-flame-flicker 6s ease-in-out infinite;
  transition: opacity 0.35s ease, filter 0.35s ease;
}
html[data-theme="ignis"] .card:not(.station-card):hover::after,
html[data-style="pyro"] .card:not(.station-card):hover::after {
  opacity: 0.28;
  filter: drop-shadow(0 0 18px rgba(249, 115, 22, 0.85));
}

html[data-style="pyro"] .station-card::after {
  display: none !important;
}
html[data-theme="ignis"] .station-card .sc-balance,
html[data-style="pyro"] .station-card .sc-balance {
  position: relative;
  overflow: hidden;
}

/* Station Card Balance */
html[data-theme="ignis"] .station-card .sc-balance::after,
html[data-style="pyro"] .station-card .sc-balance::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2.2c-.4 1.8-1.5 3.4-2.8 4.8-1.8 1.9-3.4 4.1-3.4 6.8 0 3.4 2.8 6.2 6.2s6.2-2.8 6.2-6.2c0-2.2-.9-4.2-2.3-5.7C14.4 6.6 13.5 4.6 12 2.2zm0 6.6c1.3 1.3 2 2.4 2 3.8 0 1.7-1 3-2 3s-2-1.3-2-3c0-1.4.7-2.5 2-3.8z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2.2c-.4 1.8-1.5 3.4-2.8 4.8-1.8 1.9-3.4 4.1-3.4 6.8 0 3.4 2.8 6.2 6.2s6.2-2.8 6.2-6.2c0-2.2-.9-4.2-2.3-5.7C14.4 6.6 13.5 4.6 12 2.2zm0 6.6c1.3 1.3 2 2.4 2 3.8 0 1.7-1 3-2 3s-2-1.3-2-3c0-1.4.7-2.5 2-3.8z'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.35;
  pointer-events: none;
  animation: th-flame-c 3.6s ease-in-out infinite;
  transition: transform .14s ease, opacity .14s ease, background-color .14s ease;
}
html[data-theme="ignis"] .station-card:hover .sc-balance::after,
html[data-style="pyro"] .station-card:hover .sc-balance::after {
  transform: translateY(-50%) scale(1.22);
  opacity: 0.95;
  background-color: var(--accent-2);
  filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.8));
}

/* Stat tile watermark */
html[data-theme="ignis"] .stat::after,
html[data-style="pyro"] .stat::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 12px;
  width: 22px;
  height: 22px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2.2c-.4 1.8-1.5 3.4-2.8 4.8-1.8 1.9-3.4 4.1-3.4 6.8 0 3.4 2.8 6.2 6.2s6.2-2.8 6.2-6.2c0-2.2-.9-4.2-2.3-5.7C14.4 6.6 13.5 4.6 12 2.2zm0 6.6c1.3 1.3 2 2.4 2 3.8 0 1.7-1 3-2 3s-2-1.3-2-3c0-1.4.7-2.5 2-3.8z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2.2c-.4 1.8-1.5 3.4-2.8 4.8-1.8 1.9-3.4 4.1-3.4 6.8 0 3.4 2.8 6.2 6.2s6.2-2.8 6.2-6.2c0-2.2-.9-4.2-2.3-5.7C14.4 6.6 13.5 4.6 12 2.2zm0 6.6c1.3 1.3 2 2.4 2 3.8 0 1.7-1 3-2 3s-2-1.3-2-3c0-1.4.7-2.5 2-3.8z'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.30;
  pointer-events: none;
  animation: th-flame-s 3.6s ease-in-out infinite;
  transition: transform .14s ease, opacity .14s ease;
}
html[data-theme="ignis"] .stat:hover::after,
html[data-style="pyro"] .stat:hover::after {
  transform: translateY(-2px) scale(1.15);
  opacity: 0.90;
  filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.8));
}

/* Snappy Pyro Buttons — no clipping, no wrapping */
html[data-style="pyro"] .btn {
  border-radius: 12px;
  position: relative;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, border-color .12s ease;
}
html[data-style="pyro"] .btn.primary,
html[data-style="pyro"] .btn.info,
html[data-style="pyro"] .btn.success {
  border: 1px solid color-mix(in srgb, #fff 25%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent), 0 3px 12px -3px color-mix(in srgb, var(--accent) 55%, transparent);
}
html[data-style="pyro"] .btn.primary:hover,
html[data-style="pyro"] .btn.info:hover,
html[data-style="pyro"] .btn.success:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent), 0 6px 20px -3px color-mix(in srgb, var(--accent) 70%, transparent);
}


/* --- SAND: Sand & Earth dynamics — sun-drenched sandstone, 2D vector dune & sun symbol --- */
html[data-style="sand"] {
  --radius: 15px; --radius-btn: 10px; --radius-input: 10px;
  --surface: linear-gradient(150deg, color-mix(in srgb, var(--panel-2) 90%, transparent), color-mix(in srgb, var(--panel) 82%, transparent));
  --surface-border-color: color-mix(in srgb, var(--accent-2) 28%, transparent);
  --elev: 0 12px 28px -14px color-mix(in srgb, var(--accent) 28%, transparent), 0 3px 10px rgba(0,0,0,.22);
}
/* Sand / Dune: Glass + Material hybrid surfaces */
html[data-theme="dune"] .card,
html[data-style="sand"] .card,
html[data-theme="dune"] .stat,
html[data-style="sand"] .stat,
html[data-theme="dune"] .modal,
html[data-style="sand"] .modal,
html[data-theme="dune"] .login-card,
html[data-style="sand"] .login-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(32, 26, 20, 0.78), rgba(21, 17, 13, 0.88)) !important;
  border: 1px solid rgba(212, 163, 115, 0.28) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 5px -1px rgba(0, 0, 0, 0.38),
    0 8px 26px -4px rgba(224, 159, 62, 0.22) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease !important;
}
html[data-theme="dune"][data-mode="light"] .card,
html[data-style="sand"][data-mode="light"] .card,
html[data-theme="dune"][data-mode="light"] .stat,
html[data-style="sand"][data-mode="light"] .stat,
html[data-theme="dune"][data-mode="light"] .modal,
html[data-style="sand"][data-mode="light"] .modal,
html[data-theme="dune"][data-mode="light"] .login-card,
html[data-style="sand"][data-mode="light"] .login-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(252, 249, 244, 0.90)) !important;
  border: 1px solid rgba(188, 108, 37, 0.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 5px rgba(188, 108, 37, 0.10),
    0 8px 22px -4px rgba(224, 159, 62, 0.18) !important;
}

html[data-theme="dune"] .card:not(.station-card) > *,
html[data-style="sand"] .card:not(.station-card) > * {
  position: relative;
  z-index: 1;
}

/* Top Horizon Ray */
html[data-theme="dune"] .card::before,
html[data-style="sand"] .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #bc6c25 20%, #d4a373 50%, #fefae0 65%, #e09f3e 80%, transparent);
  opacity: 0.50;
  transition: opacity 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
  pointer-events: none;
  z-index: 2;
}
html[data-theme="dune"][data-mode="light"] .card::before,
html[data-style="sand"][data-mode="light"] .card::before {
  background: linear-gradient(90deg, transparent, #bc6c25 20%, #e09f3e 50%, #ffffff 65%, #d4a373 80%, transparent);
}

html[data-theme="dune"] .card:hover,
html[data-style="sand"] .card:hover,
html[data-theme="dune"] .stat:hover,
html[data-style="sand"] .stat:hover {
  transform: translateY(-2px);
  border-color: rgba(224, 159, 62, 0.70) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 0 0 1px rgba(224, 159, 62, 0.40),
    0 16px 36px -8px rgba(212, 163, 115, 0.42),
    0 4px 14px rgba(0, 0, 0, 0.32) !important;
}
html[data-theme="dune"][data-mode="light"] .card:hover,
html[data-style="sand"][data-mode="light"] .card:hover,
html[data-theme="dune"][data-mode="light"] .stat:hover,
html[data-style="sand"][data-mode="light"] .stat:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    0 0 0 1px rgba(188, 108, 37, 0.45),
    0 16px 36px -8px rgba(224, 159, 62, 0.32),
    0 4px 14px rgba(188, 108, 37, 0.16) !important;
}

html[data-theme="dune"] .card:hover::before,
html[data-style="sand"] .card:hover::before {
  opacity: 1;
  height: 3px;
  box-shadow: 0 0 14px rgba(224, 159, 62, 0.85);
}

/* Background Watermark: Desert Dunes & Radiant Sun */
html[data-theme="dune"] .card:not(.station-card)::after,
html[data-style="sand"] .card:not(.station-card)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  width: 74px;
  height: 74px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18.5c3.5-3.2 7-4.2 10.5-3 3.5 1.2 6.5 4.2 9.5 4.5' fill='black' fill-opacity='0.18'/%3E%3Cpath d='M2 13.5c4-3.8 8-4.8 12-3.2 4 1.6 6.5 5.2 8 6.2'/%3E%3Ccircle cx='17' cy='6' r='3.2' fill='black'/%3E%3Cpath d='M17 1v1.5M17 10.5V12M12 6h1.5M21 6h1.5' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18.5c3.5-3.2 7-4.2 10.5-3 3.5 1.2 6.5 4.2 9.5 4.5' fill='black' fill-opacity='0.18'/%3E%3Cpath d='M2 13.5c4-3.8 8-4.8 12-3.2 4 1.6 6.5 5.2 8 6.2'/%3E%3Ccircle cx='17' cy='6' r='3.2' fill='black'/%3E%3Cpath d='M17 1v1.5M17 10.5V12M12 6h1.5M21 6h1.5' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  animation: dune-sand-shift 9s ease-in-out infinite;
  transition: opacity 0.35s ease, filter 0.35s ease;
}
html[data-theme="dune"] .card:not(.station-card):hover::after,
html[data-style="sand"] .card:not(.station-card):hover::after {
  opacity: 0.26;
  filter: drop-shadow(0 0 16px rgba(224, 159, 62, 0.75));
}

html[data-style="sand"] .station-card::after {
  display: none !important;
}
html[data-theme="dune"] .station-card .sc-balance,
html[data-style="sand"] .station-card .sc-balance {
  position: relative;
  overflow: hidden;
}

/* Station Card Balance */
html[data-theme="dune"] .station-card .sc-balance::after,
html[data-style="sand"] .station-card .sc-balance::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18.5c3.5-3.2 7-4.2 10.5-3 3.5 1.2 6.5 4.2 9.5 4.5' fill='black' fill-opacity='0.18'/%3E%3Cpath d='M2 13.5c4-3.8 8-4.8 12-3.2 4 1.6 6.5 5.2 8 6.2'/%3E%3Ccircle cx='17' cy='6' r='3.2' fill='black'/%3E%3Cpath d='M17 1v1.5M17 10.5V12M12 6h1.5M21 6h1.5' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18.5c3.5-3.2 7-4.2 10.5-3 3.5 1.2 6.5 4.2 9.5 4.5' fill='black' fill-opacity='0.18'/%3E%3Cpath d='M2 13.5c4-3.8 8-4.8 12-3.2 4 1.6 6.5 5.2 8 6.2'/%3E%3Ccircle cx='17' cy='6' r='3.2' fill='black'/%3E%3Cpath d='M17 1v1.5M17 10.5V12M12 6h1.5M21 6h1.5' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.35;
  pointer-events: none;
  animation: th-drift-c 9s ease-in-out infinite;
  transition: transform .14s ease, opacity .14s ease, background-color .14s ease;
}
html[data-theme="dune"] .station-card:hover .sc-balance::after,
html[data-style="sand"] .station-card:hover .sc-balance::after {
  transform: translateY(-50%) scale(1.22);
  opacity: 0.95;
  background-color: var(--accent-2);
  filter: drop-shadow(0 0 10px rgba(224, 159, 62, 0.8));
}

/* Stat tile watermark */
html[data-theme="dune"] .stat::after,
html[data-style="sand"] .stat::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 12px;
  width: 22px;
  height: 22px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18.5c3.5-3.2 7-4.2 10.5-3 3.5 1.2 6.5 4.2 9.5 4.5' fill='black' fill-opacity='0.18'/%3E%3Cpath d='M2 13.5c4-3.8 8-4.8 12-3.2 4 1.6 6.5 5.2 8 6.2'/%3E%3Ccircle cx='17' cy='6' r='3.2' fill='black'/%3E%3Cpath d='M17 1v1.5M17 10.5V12M12 6h1.5M21 6h1.5' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18.5c3.5-3.2 7-4.2 10.5-3 3.5 1.2 6.5 4.2 9.5 4.5' fill='black' fill-opacity='0.18'/%3E%3Cpath d='M2 13.5c4-3.8 8-4.8 12-3.2 4 1.6 6.5 5.2 8 6.2'/%3E%3Ccircle cx='17' cy='6' r='3.2' fill='black'/%3E%3Cpath d='M17 1v1.5M17 10.5V12M12 6h1.5M21 6h1.5' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.30;
  pointer-events: none;
  animation: th-drift-s 9s ease-in-out infinite;
  transition: transform .14s ease, opacity .14s ease;
}
html[data-theme="dune"] .stat:hover::after,
html[data-style="sand"] .stat:hover::after {
  transform: translateY(-2px) scale(1.15);
  opacity: 0.90;
  filter: drop-shadow(0 0 8px rgba(224, 159, 62, 0.8));
}

/* Snappy Sand Buttons — no clipping, no wrapping */
html[data-style="sand"] .btn {
  border-radius: 10px;
  position: relative;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, border-color .12s ease;
}
html[data-style="sand"] .btn.primary,
html[data-style="sand"] .btn.info,
html[data-style="sand"] .btn.success {
  border: 1px solid color-mix(in srgb, #fff 25%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent), 0 3px 12px -3px color-mix(in srgb, var(--accent) 55%, transparent);
}
html[data-style="sand"] .btn.primary:hover,
html[data-style="sand"] .btn.info:hover,
html[data-style="sand"] .btn.success:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent), 0 6px 18px -3px color-mix(in srgb, var(--accent) 65%, transparent);
}


/* --- HYDRO: Water & Tide dynamics — fluid bioluminescent surfaces, 2D vector water wave symbol --- */
html[data-style="hydro"] {
  --radius: 20px; --radius-btn: 999px; --radius-input: 14px;
  --surface: linear-gradient(155deg, color-mix(in srgb, var(--panel-2) 88%, transparent), color-mix(in srgb, var(--panel) 80%, transparent));
  --surface-border-color: color-mix(in srgb, var(--accent-2) 28%, transparent);
  --elev: 0 12px 28px -14px color-mix(in srgb, var(--accent) 34%, transparent), 0 3px 10px rgba(0,0,0,.24);
}
/* Hydro / Water: Glass + Material hybrid surfaces */
html[data-theme="hydro"] .card,
html[data-style="hydro"] .card,
html[data-theme="hydro"] .stat,
html[data-style="hydro"] .stat,
html[data-theme="hydro"] .modal,
html[data-style="hydro"] .modal,
html[data-theme="hydro"] .login-card,
html[data-style="hydro"] .login-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(9, 26, 46, 0.78), rgba(4, 14, 26, 0.88)) !important;
  border: 1px solid rgba(6, 182, 212, 0.28) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 2px 5px -1px rgba(0, 0, 0, 0.38),
    0 8px 26px -4px rgba(6, 182, 212, 0.25) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease !important;
}
html[data-theme="hydro"][data-mode="light"] .card,
html[data-style="hydro"][data-mode="light"] .card,
html[data-theme="hydro"][data-mode="light"] .stat,
html[data-style="hydro"][data-mode="light"] .stat,
html[data-theme="hydro"][data-mode="light"] .modal,
html[data-style="hydro"][data-mode="light"] .modal,
html[data-theme="hydro"][data-mode="light"] .login-card,
html[data-style="hydro"][data-mode="light"] .login-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(240, 253, 250, 0.88)) !important;
  border: 1px solid rgba(6, 182, 212, 0.25) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 5px rgba(6, 182, 212, 0.10),
    0 8px 22px -4px rgba(6, 182, 212, 0.18) !important;
}

html[data-theme="hydro"] .card:not(.station-card) > *,
html[data-style="hydro"] .card:not(.station-card) > * {
  position: relative;
  z-index: 1;
}

/* Top Horizon Ray */
html[data-theme="hydro"] .card::before,
html[data-style="hydro"] .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0891b2 20%, #06b6d4 50%, #cffafe 65%, #38bdf8 80%, transparent);
  opacity: 0.50;
  transition: opacity 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
  pointer-events: none;
  z-index: 2;
}
html[data-theme="hydro"][data-mode="light"] .card::before,
html[data-style="hydro"][data-mode="light"] .card::before {
  background: linear-gradient(90deg, transparent, #0891b2 20%, #06b6d4 50%, #ffffff 65%, #38bdf8 80%, transparent);
}

html[data-theme="hydro"] .card:hover,
html[data-style="hydro"] .card:hover,
html[data-theme="hydro"] .stat:hover,
html[data-style="hydro"] .stat:hover {
  transform: translateY(-2px);
  border-color: rgba(6, 182, 212, 0.75) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    0 0 0 1px rgba(6, 182, 212, 0.40),
    0 16px 36px -8px rgba(6, 182, 212, 0.45),
    0 4px 14px rgba(0, 0, 0, 0.30) !important;
}
html[data-theme="hydro"][data-mode="light"] .card:hover,
html[data-style="hydro"][data-mode="light"] .card:hover,
html[data-theme="hydro"][data-mode="light"] .stat:hover,
html[data-style="hydro"][data-mode="light"] .stat:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    0 0 0 1px rgba(6, 182, 212, 0.45),
    0 16px 36px -8px rgba(6, 182, 212, 0.32),
    0 4px 14px rgba(6, 182, 212, 0.16) !important;
}

html[data-theme="hydro"] .card:hover::before,
html[data-style="hydro"] .card:hover::before {
  opacity: 1;
  height: 3px;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.85);
}

/* Background Watermark: Ocean Waves & Pure Water Droplet */
html[data-theme="hydro"] .card:not(.station-card)::after,
html[data-style="hydro"] .card:not(.station-card)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  width: 74px;
  height: 74px;
  background-color: var(--accent-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5c0 0-6 7.5-6 11.5a6 6 0 0 0 12 0c0-4-6-11.5-6-11.5z' fill='black' fill-opacity='0.22'/%3E%3Cpath d='M3 15c2.5 0 2.5 2 5 2s2.5-2 5-2 2.5 2 5 2 2.5-2 3-2'/%3E%3Cpath d='M3 18.5c2.5 0 2.5 2 5 2s2.5-2 5-2 2.5 2 5 2 2.5-2 3-2'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5c0 0-6 7.5-6 11.5a6 6 0 0 0 12 0c0-4-6-11.5-6-11.5z' fill='black' fill-opacity='0.22'/%3E%3Cpath d='M3 15c2.5 0 2.5 2 5 2s2.5-2 5-2 2.5 2 5 2 2.5-2 3-2'/%3E%3Cpath d='M3 18.5c2.5 0 2.5 2 5 2s2.5-2 5-2 2.5 2 5 2 2.5-2 3-2'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  animation: hydro-wave-float 8s ease-in-out infinite;
  transition: opacity 0.35s ease, filter 0.35s ease;
}
html[data-theme="hydro"] .card:not(.station-card):hover::after,
html[data-style="hydro"] .card:not(.station-card):hover::after {
  opacity: 0.26;
  filter: drop-shadow(0 0 16px rgba(6, 182, 212, 0.75));
}

html[data-style="hydro"] .station-card::after {
  display: none !important;
}
html[data-theme="hydro"] .station-card .sc-balance,
html[data-style="hydro"] .station-card .sc-balance {
  position: relative;
  overflow: hidden;
}

/* Station Card Balance */
html[data-theme="hydro"] .station-card .sc-balance::after,
html[data-style="hydro"] .station-card .sc-balance::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5c0 0-6 7.5-6 11.5a6 6 0 0 0 12 0c0-4-6-11.5-6-11.5z' fill='black' fill-opacity='0.22'/%3E%3Cpath d='M3 15c2.5 0 2.5 2 5 2s2.5-2 5-2 2.5 2 5 2 2.5-2 3-2'/%3E%3Cpath d='M3 18.5c2.5 0 2.5 2 5 2s2.5-2 5-2 2.5 2 5 2 2.5-2 3-2'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5c0 0-6 7.5-6 11.5a6 6 0 0 0 12 0c0-4-6-11.5-6-11.5z' fill='black' fill-opacity='0.22'/%3E%3Cpath d='M3 15c2.5 0 2.5 2 5 2s2.5-2 5-2 2.5 2 5 2 2.5-2 3-2'/%3E%3Cpath d='M3 18.5c2.5 0 2.5 2 5 2s2.5-2 5-2 2.5 2 5 2 2.5-2 3-2'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.35;
  pointer-events: none;
  animation: th-tide-c 4.5s ease-in-out infinite;
  transition: transform .14s ease, opacity .14s ease, background-color .14s ease;
}
html[data-theme="hydro"] .station-card:hover .sc-balance::after,
html[data-style="hydro"] .station-card:hover .sc-balance::after {
  transform: translateY(-50%) scale(1.22);
  opacity: 0.95;
  background-color: var(--accent-2);
  filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.8));
}

/* Stat tile watermark */
html[data-theme="hydro"] .stat::after,
html[data-style="hydro"] .stat::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 12px;
  width: 22px;
  height: 22px;
  background-color: var(--accent-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5c0 0-6 7.5-6 11.5a6 6 0 0 0 12 0c0-4-6-11.5-6-11.5z' fill='black' fill-opacity='0.22'/%3E%3Cpath d='M3 15c2.5 0 2.5 2 5 2s2.5-2 5-2 2.5 2 5 2 2.5-2 3-2'/%3E%3Cpath d='M3 18.5c2.5 0 2.5 2 5 2s2.5-2 5-2 2.5 2 5 2 2.5-2 3-2'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5c0 0-6 7.5-6 11.5a6 6 0 0 0 12 0c0-4-6-11.5-6-11.5z' fill='black' fill-opacity='0.22'/%3E%3Cpath d='M3 15c2.5 0 2.5 2 5 2s2.5-2 5-2 2.5 2 5 2 2.5-2 3-2'/%3E%3Cpath d='M3 18.5c2.5 0 2.5 2 5 2s2.5-2 5-2 2.5 2 5 2 2.5-2 3-2'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.30;
  pointer-events: none;
  animation: th-tide-s 4.5s ease-in-out infinite;
  transition: transform .14s ease, opacity .14s ease;
}
html[data-theme="hydro"] .stat:hover::after,
html[data-style="hydro"] .stat:hover::after {
  transform: translateY(-2px) scale(1.15);
  opacity: 0.90;
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.8));
}

/* Snappy Hydro Buttons — no clipping, no wrapping */
html[data-style="hydro"] .btn {
  border-radius: 999px;
  position: relative;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, border-color .12s ease;
}
html[data-style="hydro"] .btn.primary,
html[data-style="hydro"] .btn.info,
html[data-style="hydro"] .btn.success {
  border: 1px solid color-mix(in srgb, #fff 30%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent), 0 3px 12px -3px color-mix(in srgb, var(--accent) 55%, transparent);
}
html[data-style="hydro"] .btn.primary:hover,
html[data-style="hydro"] .btn.info:hover,
html[data-style="hydro"] .btn.success:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent), 0 6px 20px -3px color-mix(in srgb, var(--accent) 70%, transparent);
}

/* --- ARABESQUE: Islamic Sacred Geometry & Architecture — arched panels, 8-point star (Rub el Hizb) watermark, gilded borders --- */
html[data-style="arabesque"] {
  --radius: 16px; --radius-btn: 12px; --radius-input: 11px;
  --surface: linear-gradient(150deg, color-mix(in srgb, var(--panel-2) 92%, transparent), color-mix(in srgb, var(--panel) 82%, transparent));
  --surface-border-color: color-mix(in srgb, var(--accent-2) 32%, transparent);
  --elev: 0 12px 30px -14px color-mix(in srgb, var(--accent-2) 32%, transparent), 0 4px 12px rgba(0,0,0,.26);
}
html[data-style="arabesque"] .card,
html[data-style="arabesque"] .stat {
  position: relative;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-2) 28%, transparent), var(--elev);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
/* Ensure card children sit cleanly above the background watermark */
html[data-style="arabesque"] .card:not(.station-card) {
  position: relative;
  overflow: hidden;
}
html[data-style="arabesque"] .card:not(.station-card) > * {
  position: relative;
  z-index: 1;
}
/* Sacred 8-point star (Rub el Hizb) watermark:
   Positioned vertically centered in open background space (top: 50%; translateY(-50%)),
   completely clear of both upper-right controls and lower-right buttons/pagination.
   Placed on z-index: 0 with pointer-events: none so it never obstructs or competes for space. */
html[data-style="arabesque"] .card:not(.station-card)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  width: 76px;
  height: 76px;
  background-color: var(--accent-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='1'/%3E%3Crect x='6' y='6' width='12' height='12' rx='1' transform='rotate(45 12 12)'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='1'/%3E%3Crect x='6' y='6' width='12' height='12' rx='1' transform='rotate(45 12 12)'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
  animation: th-spin-c 40s linear infinite;
  transition: opacity 0.35s ease, filter 0.35s ease;
}
html[data-style="arabesque"] .card:not(.station-card):hover::after {
  opacity: 0.22;
  filter: drop-shadow(0 0 14px rgba(212, 175, 55, 0.55));
}
html[data-style="arabesque"] .station-card::after {
  display: none !important;
}
html[data-style="arabesque"] .station-card .sc-balance {
  position: relative;
  overflow: hidden;
}
html[data-style="arabesque"] .station-card .sc-balance::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background-color: var(--accent-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='1'/%3E%3Crect x='6' y='6' width='12' height='12' rx='1' transform='rotate(45 12 12)'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='1'/%3E%3Crect x='6' y='6' width='12' height='12' rx='1' transform='rotate(45 12 12)'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.35;
  pointer-events: none;
  transition: transform .14s ease, opacity .14s ease, background-color .14s ease;
}
html[data-style="arabesque"] .station-card:hover .sc-balance::after {
  transform: translateY(-50%) rotate(45deg) scale(1.22);
  opacity: 0.95;
  background-color: var(--accent-2);
}
html[data-style="arabesque"] .stat::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 12px;
  width: 18px;
  height: 18px;
  background-color: var(--accent-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='1'/%3E%3Crect x='6' y='6' width='12' height='12' rx='1' transform='rotate(45 12 12)'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='1'/%3E%3Crect x='6' y='6' width='12' height='12' rx='1' transform='rotate(45 12 12)'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.28;
  pointer-events: none;
  transition: transform .14s ease, opacity .14s ease;
}
html[data-style="arabesque"] .stat:hover::after {
  transform: translateY(-2px) rotate(45deg) scale(1.2);
  opacity: 0.85;
}
html[data-style="arabesque"] .card:hover,
html[data-style="arabesque"] .stat:hover {
  transform: translateY(-1px);
  border-color: var(--accent-2);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-2) 50%, transparent), 0 16px 34px -12px color-mix(in srgb, var(--accent-2) 45%, transparent);
}
html[data-style="arabesque"] .btn {
  border-radius: 12px;
  position: relative;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease, border-color .14s ease;
}
html[data-style="arabesque"] .btn.primary,
html[data-style="arabesque"] .btn.info,
html[data-style="arabesque"] .btn.success {
  border: 1px solid color-mix(in srgb, var(--accent-2) 45%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent), 0 3px 12px -3px color-mix(in srgb, var(--accent-2) 50%, transparent);
}
html[data-style="arabesque"] .btn.primary:hover,
html[data-style="arabesque"] .btn.info:hover,
html[data-style="arabesque"] .btn.success:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent), 0 6px 20px -3px color-mix(in srgb, var(--accent-2) 65%, transparent);
}

/* The colored edge-bar / divider lines belong to Aurora only. Every other style
   expresses itself through its own surface treatment, so drop the stray bars on
   number tiles, cards, shift cards and the status strip — they looked like glitches. */
html:not([data-style="aurora"]) .card::before,
html:not([data-style="aurora"]) .stat::before,
html:not([data-style="aurora"]) .shift::before { display: none; }
html:not([data-style="aurora"]) .status-strip .sc { border-image: none; }
/* Give the big number tiles a bit more presence so styles read on them, not just a line. */
html[data-style="material"] .stat, html[data-style="glass"] .stat, html[data-style="neu"] .stat,
html[data-style="liquid"] .stat, html[data-style="flat"] .stat, html[data-style="retro"] .stat,
html[data-style="aero"] .stat, html[data-style="pyro"] .stat, html[data-style="sand"] .stat, html[data-style="hydro"] .stat, html[data-style="arabesque"] .stat { padding: 16px 20px; }
html[data-style="retro"] .stat { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* =====================  BASE  ===================== */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--app-bg);
  background-attachment: fixed;
  min-height: 100vh;
}
/* backdrop-filter (frosted-glass blur) is a heavy scroll cost on mobile Safari, so
   drop all blurs on touch devices only — purely cosmetic; desktop keeps them. */
@media (hover: none), (pointer: coarse) {
  * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
input, select, textarea, button { font-family: inherit; }

/* Interactive aurora that eases toward the cursor. */
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; }
body::before { background: radial-gradient(600px circle at var(--mx) var(--my), var(--glow1), transparent 55%); }
body::after  { background: radial-gradient(420px circle at var(--mx) var(--my), var(--glow2), transparent 60%); mix-blend-mode: var(--glow-blend); }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: var(--red); }
.spacer { flex: 1; }
#theme-toggle, #settings-btn { font-size: 16px; line-height: 1; padding: 6px 10px; }

/* Keep app content above the aurora layers */
#login-view, #app-view { position: relative; z-index: 1; }

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card {
  position: relative; background: var(--surface);
  border: 1px solid var(--surface-border-color); border-radius: 22px;
  padding: 46px 42px 40px; width: 420px; max-width: 92vw; display: flex; flex-direction: column; gap: 16px;
  box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
  backdrop-filter: blur(10px);
}
/* glowing accent bar across the very top of the card */
.login-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: 22px 22px 0 0; background: var(--grad-brand); }
.login-emblem {
  width: 76px; height: 76px; margin: 4px auto 2px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center; font-size: 38px;
  background: var(--grad-primary); box-shadow: var(--shadow-glow); color: #fff;
}
.login-title {
  margin: 0; text-align: center; font-size: 32px; font-weight: 800; letter-spacing: -.5px;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-sub { margin: -6px 0 8px; text-align: center; font-size: 15px; color: var(--muted); }
.login-card label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.login-card label input { font-size: 15.5px; padding: 12px 14px; border-radius: 12px; }
.login-submit { font-size: 16px; font-weight: 700; padding: 13px; border-radius: 12px; margin-top: 4px; }
/* Touch ID unlock */
.bio-wrap { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.bio-btn { font-size: 15.5px; padding: 13px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.bio-ic { font-size: 18px; line-height: 1; }
.bio-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12.5px; }
.bio-or::before, .bio-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
input, select, textarea {
  background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-input);
  color: var(--text); padding: 9px 11px; font-size: 14px; width: 100%; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .7; }
/* Hide number spinner arrows — they clip the last digit of editable amount fields. */
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
/* Hide number spinner arrows so the last digit isn't clipped in narrow editable cells. */
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
/* Opt back IN to spinner arrows for price fields: .spin keeps them and stays wide
   enough that the arrows don't clip the number. */
input[type=number].spin { -moz-appearance: number-input; appearance: auto; min-width: 92px; padding-right: 6px; }
input[type=number].spin::-webkit-outer-spin-button, input[type=number].spin::-webkit-inner-spin-button { -webkit-appearance: inner-spin-button; opacity: 1; margin: 0; }

/* ===== Buttons — colorful, modern business ===== */
.btn { cursor: pointer; font-family: inherit; font-weight: 600; letter-spacing: .01em;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); background: var(--btn-soft); color: var(--text);
  padding: 8px 16px; border-radius: var(--radius-btn); font-size: 14px;
  white-space: nowrap !important; flex-shrink: 0 !important; display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s ease, border-color .15s, box-shadow .18s, background .18s, filter .15s; }
.btn:hover { background: var(--btn-soft-hover); border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-glow); }
.btn:active { transform: translateY(0) scale(.99); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* Filled colorful variants */
.btn.primary { background: var(--grad-primary); border: none; color: #fff; font-weight: 700; box-shadow: var(--shadow-glow); }
.btn.primary:hover { background: var(--grad-primary-hover); filter: brightness(1.06); }
.btn.success { background: var(--grad-success); border: none; color: #04241d; font-weight: 700; box-shadow: var(--shadow-glow); }
.btn.success:hover { filter: brightness(1.06); }
.btn.info { background: var(--grad-info); border: none; color: #fff; font-weight: 700; box-shadow: var(--shadow-glow); }
.btn.info:hover { filter: brightness(1.06); }
.btn.warn { background: var(--grad-warn); border: none; color: #3a2400; font-weight: 700; box-shadow: var(--shadow-glow); }
.btn.warn:hover { filter: brightness(1.06); }
.btn.danger { background: var(--grad-danger); border: none; color: #fff; font-weight: 700; box-shadow: var(--shadow-glow); }
.btn.danger:hover { filter: brightness(1.06); }

.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); font-weight: 500; box-shadow: none; }
.btn.ghost:hover { background: var(--tint-14); border-color: transparent; color: var(--text); transform: none; box-shadow: none; }
.btn.small { padding: 5px 12px; font-size: 12px; }
/* Compact action buttons INSIDE data tables so rows fit their column — the wider serif display
   themes (Velvet, Meadow) were pushing the last pill (Close) past the edge and clipping it.
   Also drop the width-inflating uppercase/letter-spacing that Material/Retro add, but only here. */
td .btn, td .btn.small { padding: 3px 8px; font-size: 11px; }
html[data-style] td .btn { text-transform: none; letter-spacing: .01em; }

/* Dense data tables (esp. the instant-ticket inventory) must fit the page without sideways
   scrolling. Some themes tip over the edge because their font is wide (Terminal = monospace,
   the italic-serif display families) or because Retro/Neu/Material add letter-spacing. Inside
   tables only: normalize spacing, trim the cell font a touch, and give the wide display fonts a
   compact sans stack so column widths stay in bounds. Doesn't affect the rest of the theme. */
table { letter-spacing: normal; }
table td, table th { letter-spacing: .01em; }
table.compact-fit td, table.compact-fit th { font-size: 12px; padding-top: 6px; padding-bottom: 6px; }
html[data-theme="terminal"] table,
html[data-theme="velvet"]  table, html[data-theme="riviera"] table,
html[data-theme="meadow"]  table, html[data-theme="dusk"]    table,
html[data-theme="bourbon"] table, html[data-theme="sakura"]  table,
html[data-theme="gilded"]  table, html[data-theme="andalus"] table {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Topbar */
.topbar { display: flex; align-items: center; gap: 14px; padding: 13px 22px;
  background: linear-gradient(90deg, var(--panel), var(--panel-2));
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5;
  backdrop-filter: blur(10px); box-shadow: 0 6px 20px -14px rgba(0,0,0,.8); }
.brand { font-weight: 800; cursor: pointer; letter-spacing: .2px;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Breadcrumb */
.crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.crumb-back { display: inline-flex; align-items: center; gap: 5px; font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; color: var(--text); background: var(--btn-soft); border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 999px; padding: 5px 13px 5px 10px; margin-right: 4px;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .12s; }
.crumb-back:hover { background: var(--btn-soft-hover); border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-glow); }
.crumb-back .chev { font-size: 15px; line-height: 1; }
.crumb { font-family: inherit; font-size: 13px; cursor: pointer; color: var(--link); background: transparent;
  border: 1px solid transparent; border-radius: 999px; padding: 4px 11px; transition: background .15s, color .15s; }
.crumb:hover { background: var(--tint-14); color: var(--text); }
.crumb.current { color: var(--text); font-weight: 700; background: var(--tint-14);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent); cursor: default; }
.crumb-sep { color: var(--muted); opacity: .55; font-size: 14px; user-select: none; }
.chip { background: linear-gradient(135deg, var(--tint-24), color-mix(in srgb, var(--accent-3) 24%, transparent));
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 13px; font-size: 12px; }

main { padding: 20px 24px; max-width: min(1840px, 97vw); margin: 0 auto; }
h2 { margin: 0 0 4px; }
.section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }

/* Cards / grid */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card { position: relative; overflow: hidden; background: var(--surface);
  border: 1px solid var(--surface-border-color); border-radius: var(--radius); padding: 18px; cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s; box-shadow: var(--elev); will-change: transform; }
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-brand); opacity: .95; }
.card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), var(--shadow-glow); z-index: 2; }
.card h3 { margin: 0 0 6px; }
.card .meta { color: var(--muted); font-size: 13px; }
.add-card { display: flex; align-items: center; justify-content: center; border-style: dashed; color: var(--muted); font-size: 15px; background: transparent; box-shadow: none; }
.add-card::before { display: none; }
.add-card:hover { color: var(--text); border-color: var(--accent); }

/* Station overview cards (home dashboard) — roomier, modern, colorful */
.station-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.station-card { padding: 20px 20px 18px; }
.station-card .sc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.station-card h3 { font-size: 18px; margin: 0 0 3px; }
.station-card .meta { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-badge { flex: none; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--tint-14); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text); }
.sc-balance { margin: 15px 0 13px; padding: 13px 15px; border-radius: 13px; border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--tint-14), transparent); }
.sc-balance.owe { background: linear-gradient(160deg, color-mix(in srgb, var(--red) 16%, transparent), transparent); border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.sc-balance.credit { background: linear-gradient(160deg, color-mix(in srgb, var(--green) 16%, transparent), transparent); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.sc-bal-num { font-size: 27px; font-weight: 800; letter-spacing: -.6px; line-height: 1.05; }
.sc-balance.owe .sc-bal-num { color: var(--red); }
.sc-balance.credit .sc-bal-num { color: var(--green); }
.sc-bal-suffix { font-size: 14px; font-weight: 700; margin-left: 4px; }
.sc-bal-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 3px; }
.sc-prices { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 13px; }
.gp { font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.gp-reg { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); border-color: color-mix(in srgb, var(--green) 26%, transparent); }
.gp-prem { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); border-color: color-mix(in srgb, var(--amber) 28%, transparent); }
.gp-dsl { color: var(--accent-3); background: color-mix(in srgb, var(--accent-3) 14%, transparent); border-color: color-mix(in srgb, var(--accent-3) 28%, transparent); }
html[data-mode="light"] .gp-dsl { color: color-mix(in srgb, var(--accent-3) 80%, #000); background: color-mix(in srgb, var(--accent-3) 12%, transparent); border-color: color-mix(in srgb, var(--accent-3) 36%, transparent); font-weight: 800; }
.station-card .sc-rows { border-top: 1px solid var(--border); padding-top: 11px; display: flex; flex-direction: column; gap: 7px; }
.station-card .ov-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.station-card .ov-l { color: var(--muted); white-space: nowrap; }
.station-card .ov-v { font-weight: 600; text-align: right; }
/* The card leads with the register's current day: gallons pumped and store merchandise, hour by hour.
   The drafts balance is a small tag in the corner. (.sc-balance / .sc-bal-* keep each theme's styling.) */
.station-card .sc-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.sc-owed { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.sc-owed b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.sc-owed.owe b { color: var(--red); }
.sc-owed.credit b { color: var(--green); }
.sc-balance.sc-live { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.sc-live .sc-stat { min-width: 0; display: flex; flex-direction: column; }
.sc-live .sc-spark { margin-top: auto; padding-top: 9px; box-sizing: content-box; }  /* both charts sit on one baseline */
.sc-live .sc-bal-num { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-spark { display: block; width: 100%; height: 28px; margin-top: 9px; }
.sc-spark rect { fill: color-mix(in srgb, var(--accent) 38%, transparent); }
.sc-spark rect.now { fill: var(--accent); }
.sc-spark.store rect { fill: color-mix(in srgb, var(--accent-2, var(--accent)) 38%, transparent); }
.sc-spark.store rect.now { fill: var(--accent-2, var(--accent)); }
.sc-live .sc-day { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); border-top: 1px dashed var(--border); padding-top: 8px; margin-top: 3px; }
/* Drawer cash: the shift on now (resets when the register opens the next shift) and the day so far. */
.sc-live .sc-cash { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.sc-cash-box { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--green) 6%, transparent); min-width: 0; }
.sc-cash-box.now { border-color: color-mix(in srgb, var(--green) 40%, var(--border)); background: color-mix(in srgb, var(--green) 12%, transparent); }
.sc-cash-l { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-cash-s { font-size: 10.5px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-cash-v { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The figures and labels wear the live panel's own classes (.sc-bal-num / .sc-bal-label), so each theme colours
   them for its panel (some keep a dark pump/LCD panel in light mode). Only the size is the cash box's own. */
.station-card .sc-live :is(.sc-cash-v, .sc-cash-v.sc-bal-num) { font-size: 17px !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: normal !important; }
.station-card .sc-live :is(.sc-cash-l, .sc-cash-s, .sc-flag-l).sc-bal-label { font-size: 10.5px !important; margin: 0 !important; }
.station-card .sc-live .sc-flag .sc-bal-label { font-size: 11px !important; font-weight: 700 !important; margin: 0 !important; }
.sc-live .sc-cash-v.sc-tick { animation: sc-tick 1.6s ease-out; }
/* The shift's voids and no-sale drawer openings: red once there are any. */
.sc-live .sc-flags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.sc-flag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(128, 128, 128, .4);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-flag.hot { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); background: color-mix(in srgb, var(--red) 10%, transparent); }
.sc-flag-l { font-size: 10.5px; }
.sc-balance.sc-empty { display: block; }
@keyframes sc-tick { 0% { color: var(--accent); text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 60%, transparent); } 100% { text-shadow: none; } }
.sc-live .sc-bal-num.sc-tick { animation: sc-tick 1.6s ease-out; }
@media (prefers-reduced-motion: reduce) { .sc-live .sc-bal-num.sc-tick, .sc-live .sc-cash-v.sc-tick { animation: none; } }

/* Admin health/status strip */
.status-strip { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-bottom: 18px;
  padding: 12px 14px; border: 1px solid var(--surface-border-color); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--elev); }
.status-strip .sc { min-width: 120px; padding: 4px 12px; border-left: 3px solid transparent; border-image: var(--grad-brand) 1; }
.status-strip .sc.warn { border-image: var(--grad-warn) 1; }
.status-strip .sc-l { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.status-strip .sc-v { font-size: 17px; font-weight: 800; margin-top: 2px; }
.status-strip .sc.warn .sc-v { color: var(--amber); }
.status-strip .sc-s { color: var(--muted); font-size: 11px; margin-top: 1px; min-height: 13px; }
.status-strip .sc-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
/* Health panel: color-coded freshness levels + overall banner + audit-log viewer (feature 5). */
.status-strip .sc.ok { border-image: none; border-left-color: var(--green); }
.status-strip .sc.bad { border-image: none; border-left-color: var(--red); }
.status-strip .sc.bad .sc-v { color: var(--red); }
.status-strip .sc.na { border-image: none; border-left-color: var(--muted); opacity: .85; }
.status-strip .sc.na .sc-v { color: var(--muted); font-weight: 700; }
/* Health heartbeat light — a pulsing dot themed to the active accent (replaces the green banner text). */
.health-hb { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--muted); }
.health-hb .hb-dot { --hb: var(--accent); position: relative; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--hb); animation: hb-beat 1.5s ease-in-out infinite; }
.health-hb .hb-dot::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--hb); animation: hb-ring 1.5s ease-out infinite; }
.health-hb.warn .hb-dot { --hb: var(--amber); }
.health-hb.bad .hb-dot { --hb: var(--red); }
@keyframes hb-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.35); } 24% { transform: scale(1); } 36% { transform: scale(1.22); } 50% { transform: scale(1); } }
@keyframes hb-ring { 0% { transform: scale(1); opacity: .5; } 70% { transform: scale(2.6); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .health-hb .hb-dot { animation: none; } .health-hb .hb-dot::after { display: none; } }
.health-banner { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px; margin-bottom: 12px; font-weight: 700; font-size: 13px; border: 1px solid var(--border); }
.health-banner.ok { background: color-mix(in srgb, var(--green) 14%, transparent); border-color: color-mix(in srgb, var(--green) 34%, transparent); color: var(--green); }
.health-banner.warn { background: color-mix(in srgb, var(--amber) 14%, transparent); border-color: color-mix(in srgb, var(--amber) 34%, transparent); color: var(--amber); }
.health-banner.bad { background: color-mix(in srgb, var(--red) 14%, transparent); border-color: color-mix(in srgb, var(--red) 34%, transparent); color: var(--red); }
.audit-wrap { max-height: 340px; overflow: auto; border: 1px solid var(--border); border-radius: 12px; margin-top: 8px; }
.audit-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.audit-table th, .audit-table td { text-align: left; padding: 5px 9px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.audit-table th { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: .05em; position: sticky; top: 0; background: var(--panel); }

/* Stat tiles */
.stats { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.stat { position: relative; overflow: hidden; background: var(--surface);
  border: 1px solid var(--surface-border-color); border-radius: var(--radius); padding: 14px 18px; min-width: 138px; box-shadow: var(--elev); }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad-primary); }
.stat .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.stat .value { font-size: 22px; font-weight: 800; margin-top: 4px; }

/* Month controls */
.month-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.month-bar .title { font-size: 18px; font-weight: 700; min-width: 190px; text-align: center; }

/* Calendar */
/* Row action buttons (Edit / Move / Close) stay on one line, pushed to the right end. */
.st-actions { white-space: nowrap; text-align: right; }
.st-actions .btn { margin-left: 6px; }
.st-actions .btn:first-child { margin-left: 0; }

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; padding: 8px 12px 24px 12px; margin-bottom: 32px; }
.cal .dow { text-align: center; color: var(--muted); font-size: 12px; padding-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; }
.cal .day { background: var(--surface); border: 1px solid var(--surface-border-color); border-radius: var(--radius-input); min-height: 104px; padding: 9px 11px; cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; box-shadow: var(--elev); }
.cal .day:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.cal .day.empty { background: transparent; border: none; cursor: default; box-shadow: none; }
.cal .day.empty:hover { transform: none; }
/* Today stands out: accent-tinted background, thicker ring, slightly larger. */
.cal .day.today { position: relative; border-color: transparent; background: var(--tint-24); box-shadow: 0 0 0 3px var(--accent), var(--shadow-glow); transform: scale(1.04); z-index: 2; }
.cal .day.today:hover { transform: scale(1.04) translateY(-2px); z-index: 3; }
.cal .day.today .num { color: var(--accent); font-size: 18px; }
.cal .day .num { font-weight: 700; font-size: 16px; }
.cal .day .mini { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.cal .day .badge { display: inline-block; background: var(--tint-24); border-radius: 6px; padding: 0 5px; margin-right: 4px; }

/* Tabs — the active tab is a highlighted chip that adopts the current style
   (radius, surface, elevation all come from style tokens), not a fixed underline. */
.tabs { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.tab { position: relative; padding: 8px 15px; cursor: pointer; color: var(--muted);
  border: 1px solid transparent; border-radius: var(--radius-btn);
  transition: color .15s, background .15s, border-color .15s, box-shadow .15s; }
.tab:hover { color: var(--text); background: var(--tint-08); }
.tab.active { color: var(--text); font-weight: 700; background: var(--btn-soft);
  border-color: color-mix(in srgb, var(--accent) 34%, transparent); box-shadow: var(--shadow-glow); }

/* Station month view: left tab rail · center content · right context rail. The right rail
   only shows when the active tab has summary info; otherwise the center takes its space. */
.station-layout { display: grid; grid-template-columns: 224px minmax(0, 1fr) 212px; gap: 24px; align-items: start; }
.station-layout:not(.has-right) { grid-template-columns: 224px minmax(0, 1fr); }
.station-layout:not(.has-right) .station-rail-right { display: none; }
/* min-width:0 lets the column shrink; overflow-x:auto keeps a wide table (e.g. the instant-ticket
   book list with its action buttons) scrolling WITHIN this column instead of spilling under the
   floating side rails. */
.station-main { min-width: 0; overflow-x: auto; padding: 8px 8px 18px 8px; }
/* The rails flow with the page as one layout (no inner scroll box), so a single scroll/swipe
   reaches the bottom of the sidebar instead of scrolling the panel then chaining to the page.
   align-self:start keeps each column anchored at the top of the grid row. */
.station-rail-left, .station-rail-right {
  align-self: start;
  background: var(--surface); border: 1px solid var(--surface-border-color);
  border-radius: var(--radius); box-shadow: var(--elev);
}
.station-rail-left { padding: 12px 10px; }
.station-rail-right { padding: 10px; }
.tabs.station-tabs-v { flex-direction: column; flex-wrap: nowrap; gap: 3px; margin-bottom: 0; align-items: stretch; }
.tabs.station-tabs-v .tab { width: 100%; text-align: left; border-radius: var(--radius-input); }
/* Inside the right panel the tiles read as flat rows (the panel itself is the card). */
.stats.station-stats-side { flex-direction: column; flex-wrap: nowrap; gap: 2px; margin-bottom: 0; }
.stats.station-stats-side .stat { width: 100%; min-width: 0; background: transparent; border: none; box-shadow: none; padding: 9px 10px 9px 14px; }
.stats.station-stats-side .stat + .stat { border-top: 1px solid var(--border); }
/* Narrow windows: fall back to stacked rows so nothing is cramped. */
@media (max-width: 980px) {
  .station-layout { grid-template-columns: 1fr; }
  .station-rail-left, .station-rail-right { position: static; max-height: none; overflow: visible; }
  .tabs.station-tabs-v { flex-direction: row; flex-wrap: wrap; }
  .tabs.station-tabs-v .tab { width: auto; }
  .stats.station-stats-side { flex-direction: row; flex-wrap: wrap; }
  .stats.station-stats-side .stat { min-width: 138px; border-top: none; }
}

/* Wide screens: give the station sidebar a bit more room so it doesn't read as squeezed. */
@media (min-width: 1500px) {
  .station-layout { grid-template-columns: 248px minmax(0, 1fr) 224px; gap: 26px; }
  .station-layout:not(.has-right) { grid-template-columns: 248px minmax(0, 1fr); }
}

/* Day → Ins & Outs: the day's cash panel on the left, gas sales by grade on the right. */
.inout-layout { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
.inout-left, .inout-right { min-width: 0; overflow-x: auto; padding: 12px 10px 20px 10px; }
@media (max-width: 900px) { .inout-layout { grid-template-columns: 1fr; } }

/* Day → Shifts tab: left rail (shift selector + reconciliation tiles) · shift form on the right. */
.shift-layout { display: grid; grid-template-columns: 226px minmax(0, 1fr); gap: 20px; align-items: start; }
.shift-main { min-width: 0; overflow-x: auto; padding: 12px 10px 20px 10px; }
.shift-rail { position: sticky; top: 14px; margin-top: 12px; align-self: start; display: flex; flex-direction: column; gap: 12px;
  max-height: calc(100vh - 28px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--surface-border-color); border-radius: var(--radius); padding: 12px; box-shadow: var(--elev); }
.tabs.shift-selector { flex-direction: column; flex-wrap: nowrap; gap: 4px; margin: 0; align-items: stretch; }
.tabs.shift-selector .tab { width: 100%; text-align: left; border-radius: var(--radius-input); }
.tabs.shift-selector .btn { width: 100%; margin: 6px 0 0 0 !important; }
.shift-stats { margin: 0; }
@media (max-width: 980px) {
  .shift-layout { grid-template-columns: 1fr; }
  .shift-rail { position: static; max-height: none; overflow: visible; margin-top: 0; }
  .tabs.shift-selector { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .tabs.shift-selector .tab, .tabs.shift-selector .btn { width: auto; margin-top: 0 !important; }
}

/* Per-style active-tab treatments */
html[data-style="glass"] .tab.active { -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  border-color: color-mix(in srgb, var(--text) 16%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent); }
html[data-style="material"] .tab { text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }
html[data-style="material"] .tab.active { background: var(--accent); color: #fff; border-color: transparent; box-shadow: var(--elev); }
html[data-style="liquid"] .tab.active { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent), var(--shadow-glow); }
html[data-style="neu"] .tab.active { background: var(--panel); border-color: transparent; color: var(--accent);
  box-shadow: inset 4px 4px 10px color-mix(in srgb, #000 32%, transparent), inset -4px -4px 10px color-mix(in srgb, #fff 10%, transparent); }
html[data-mode="light"][data-style="neu"] .tab.active { box-shadow: inset 4px 4px 10px color-mix(in srgb, #000 12%, transparent), inset -4px -4px 10px #ffffff; }
html[data-style="flat"] .tab.active { box-shadow: none; }
html[data-style="retro"] .tab { text-transform: uppercase; letter-spacing: .05em; }
html[data-style="retro"] .tab.active { background: transparent; border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 12px -3px color-mix(in srgb, var(--accent) 60%, transparent); text-shadow: 0 0 7px color-mix(in srgb, var(--accent) 55%, transparent); }

/* Tables */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 11px; border-bottom: 1px solid var(--border); font-size: 14px; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
tbody tr { transition: background .12s; }
tr:hover td { background: var(--tint-08); }
.low-stock { color: var(--red); font-weight: 600; }

/* Forms layout */
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
.form-row label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.actions { display: flex; gap: 10px; margin-top: 6px; }

/* Shift cards */
.shift-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.shift { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--surface-border-color); border-radius: var(--radius); padding: 16px; box-shadow: var(--elev); }
.shift::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-primary); }
.shift h4 { margin: 0 0 2px; }
.shift .time { color: var(--muted); font-size: 12px; margin-bottom: 10px; }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(4,8,16,.6); display: flex; align-items: center; justify-content: center; z-index: 50; backdrop-filter: blur(4px); }
.modal { background: var(--surface); border: 1px solid var(--surface-border-color); border-radius: 18px; padding: 24px; width: 420px; max-width: 92vw; max-height: 90vh; overflow: auto; box-shadow: var(--elev); }
.modal h3 { margin: 0 0 14px; }
.modal.modal-wide { width: 960px; max-width: 94vw; }
/* Shared dialogs keep their actions visible even when a theme clips overflow.
   Only the content scrolls; payroll's week grid can exceed the window height. */
.modal-backdrop > .modal.modal-dialog {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}
.modal-dialog > h3, .modal-dialog > .modal-actions { flex-shrink: 0; }
.modal-dialog > .modal-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.modal-dialog > .modal-actions { flex-wrap: wrap; }
.modal-dialog:has(.pr-grid) { width: 700px; max-width: 96vw; }
.pr-grid { width: 100%; table-layout: fixed; }
.pr-grid thead th:first-child { width: 12%; }
.pr-grid thead th:nth-child(2), .pr-grid thead th:nth-child(3) { width: 36%; }
.pr-grid thead th:last-child { width: 16%; }
.pr-grid input[type="time"] {
  min-width: 0;
  min-height: 48px;
  padding: 10px 12px;
  font-size: 16px;
}
/* Narrow screens give each day two roomy time fields instead of a wide table. */
@media (max-width: 520px) {
  .modal-dialog:has(.pr-grid) { padding: 16px; }
  .pr-grid thead { display: none; }
  .pr-grid tbody, .pr-grid tfoot { display: block; }
  .pr-grid tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
  }
  .pr-grid tbody td { min-width: 0; padding: 4px 0; border: 0; }
  .pr-grid tbody td:first-child { grid-column: 1; grid-row: 1; font-weight: 600; }
  .pr-grid tbody td:last-child { grid-column: 2; grid-row: 1; }
  .pr-grid tbody td:last-child::before { content: 'Hours: '; }
  .pr-grid tbody td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .pr-grid tbody td:nth-child(3) { grid-column: 2; grid-row: 2; }
  .pr-grid tbody td:nth-child(2)::before { content: 'Start'; }
  .pr-grid tbody td:nth-child(3)::before { content: 'End'; }
  .pr-grid tbody td:nth-child(2)::before, .pr-grid tbody td:nth-child(3)::before {
    display: block; margin-bottom: 4px; font-size: 12px; color: var(--muted);
  }
  .pr-grid input[type="time"] { padding: 8px; font-size: 15px; }
  .pr-grid tfoot tr { display: flex; justify-content: flex-end; gap: 12px; }
}
.modal:has(.vla-pick), .modal:has(.sla-pick) { width: 520px; max-width: 95vw; }
.modal-book-list {
  max-height: 360px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 4px 2px 2px;
}
.modal-book-list .btn.vla-pick,
.modal-book-list .btn.sla-pick {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 14px !important;
  text-align: left !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  line-height: 1.35 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.modal-book-list .btn.vla-pick:hover,
.modal-book-list .btn.sla-pick:hover {
  transform: translateY(-1px);
}
.toast { position: fixed; bottom: 22px; right: 22px; background: var(--grad-info); color: #fff; padding: 11px 18px; border-radius: 12px; z-index: 100; font-size: 14px; font-weight: 700; box-shadow: var(--shadow); }
.toast.err { background: var(--grad-danger); color: #fff; }

/* ===== Settings / appearance / theme gallery ===== */
.settings-sec { margin-bottom: 26px; }
.settings-sec h3 { margin: 0 0 4px; }
.seg { display: inline-flex; gap: 4px; margin-top: 12px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel-2); box-shadow: var(--shadow); }
.seg button { border: none; background: transparent; color: var(--muted); font-family: inherit; font-weight: 700; font-size: 13px; padding: 6px 18px; border-radius: 999px; cursor: pointer; transition: color .15s, background .15s; }
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-glow); }
.theme-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-top: 14px; }
.theme-swatch {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: var(--panel);
  box-shadow: var(--shadow);
  transition: transform .14s, border-color .14s, box-shadow .14s;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
}
.theme-swatch:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-glow); }
.theme-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-swatch .theme-swatch-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.theme-swatch .preview { padding: 14px 15px 13px; }
.theme-swatch .tname { font-size: 15px; font-weight: 800; margin-bottom: 3px; }
.theme-swatch .tfont { font-size: 12px; opacity: .8; margin-bottom: 11px; }
.theme-swatch .dots { display: flex; gap: 6px; margin-bottom: 11px; }
.theme-swatch .dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.theme-swatch .tbtns { display: flex; gap: 7px; }
.theme-swatch .pill { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; color: #fff; }
.theme-swatch .pill.soft { color: inherit; border: 1px solid currentColor; opacity: .85; }
.theme-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), var(--shadow-glow); }
.theme-swatch .check {
  position: absolute;
  top: 9px;
  right: 10px;
  font-size: 12px;
  font-weight: 900;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent);
  color: #fff !important;
  box-shadow: 0 2px 8px -1px var(--accent);
  z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { transition: none; }
}

/* Themed mouse cursor: a small arrow tinted with each theme's accent (desktop only). */

/* Dark/light toggle: monochrome sun/moon glyph in the text color, readable on any theme. */
#theme-toggle { font-size: 17px; line-height: 1; color: var(--text); font-variant-emoji: text; }

/* ONE themed pointer everywhere: the theme's shape is the cursor for the whole page
   (clickable or not). Text fields keep the I-beam so typing/selection stays usable. */
html[data-theme] *, html[data-theme] *::before, html[data-theme] *::after, html[data-theme] { cursor: var(--cur-hand, auto), auto !important; }
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="date"], input[type="search"], input[type="tel"], textarea, [contenteditable="true"] {
  cursor: text !important;
}

/* Distinct themed clickable icon per theme (accent-filled shape with white halo). */
html[data-theme="indigo"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M10%202%20L11.7%208.3%20L18%2010%20L11.7%2011.7%20L10%2018%20L8.3%2011.7%20L2%2010%20L8.3%208.3%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M10%202%20L11.7%208.3%20L18%2010%20L11.7%2011.7%20L10%2018%20L8.3%2011.7%20L2%2010%20L8.3%208.3%20Z'%20fill='%236366f1'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="ocean"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M10%202%20C13.6%207.6%2015.6%2010.2%2015.6%2012.9%20A5.6%205.6%200%200%201%204.4%2012.9%20C4.4%2010.2%206.4%207.6%2010%202%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M10%202%20C13.6%207.6%2015.6%2010.2%2015.6%2012.9%20A5.6%205.6%200%200%201%204.4%2012.9%20C4.4%2010.2%206.4%207.6%2010%202%20Z'%20fill='%2314b8a6'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="emerald"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M4%2016%20C4%207%2013%204%2016%204%20C16%2013%207%2016%204%2016%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M4%2016%20C4%207%2013%204%2016%204%20C16%2013%207%2016%204%2016%20Z'%20fill='%2310b981'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="sunset"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M10%202%20L12%207.3%20L17.7%207.4%20L13.1%2011%20L14.9%2016.5%20L10%2013.2%20L5.1%2016.5%20L6.9%2011%20L2.3%207.4%20L8%207.3%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M10%202%20L12%207.3%20L17.7%207.4%20L13.1%2011%20L14.9%2016.5%20L10%2013.2%20L5.1%2016.5%20L6.9%2011%20L2.3%207.4%20L8%207.3%20Z'%20fill='%23fb7185'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="rose"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M10%2017.4%20C2.8%2012.4%203.6%205.4%2010%208%20C16.4%205.4%2017.2%2012.4%2010%2017.4%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M10%2017.4%20C2.8%2012.4%203.6%205.4%2010%208%20C16.4%205.4%2017.2%2012.4%2010%2017.4%20Z'%20fill='%23ec4899'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="grape"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M10%202%20L17%2010%20L10%2018%20L3%2010%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M10%202%20L17%2010%20L10%2018%20L3%2010%20Z'%20fill='%23a855f7'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="crimson"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M11.6%202%20L4.4%2011%20L9%2011%20L8%2018%20L15.6%208.4%20L11%208.4%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M11.6%202%20L4.4%2011%20L9%2011%20L8%2018%20L15.6%208.4%20L11%208.4%20Z'%20fill='%23ef4444'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="slate"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M5.5%205.5%20L14.5%205.5%20L14.5%2014.5%20L5.5%2014.5%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M5.5%205.5%20L14.5%205.5%20L14.5%2014.5%20L5.5%2014.5%20Z'%20fill='%2364748b'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="nord"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M8%203%20L12%203%20L12%208%20L17%208%20L17%2012%20L12%2012%20L12%2017%20L8%2017%20L8%2012%20L3%2012%20L3%208%20L8%208%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M8%203%20L12%203%20L12%208%20L17%208%20L17%2012%20L12%2012%20L12%2017%20L8%2017%20L8%2012%20L3%2012%20L3%208%20L8%208%20Z'%20fill='%235e81ac'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="terminal"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M6%203.5%20L16%2010%20L6%2016.5%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M6%203.5%20L16%2010%20L6%2016.5%20Z'%20fill='%2322c55e'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="sepia"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Ccircle%20cx='10'%20cy='10'%20r='6'%20fill='none'%20stroke='white'%20stroke-width='4'/%3E%3Ccircle%20cx='10'%20cy='10'%20r='6'%20fill='none'%20stroke='%23a1662f'%20stroke-width='2.4'/%3E%3Ccircle%20cx='10'%20cy='10'%20r='1.8'%20fill='%23a1662f'/%3E%3C/svg%3E") 10 10; }
html[data-theme="mocha"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M13.5%203%20A7.5%207.5%200%201%200%2013.5%2017%20A5.8%205.8%200%201%201%2013.5%203%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M13.5%203%20A7.5%207.5%200%201%200%2013.5%2017%20A5.8%205.8%200%201%201%2013.5%203%20Z'%20fill='%23c08457'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="amber"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M10%202%20L12%207.3%20L17.7%207.4%20L13.1%2011%20L14.9%2016.5%20L10%2013.2%20L5.1%2016.5%20L6.9%2011%20L2.3%207.4%20L8%207.3%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M10%202%20L12%207.3%20L17.7%207.4%20L13.1%2011%20L14.9%2016.5%20L10%2013.2%20L5.1%2016.5%20L6.9%2011%20L2.3%207.4%20L8%207.3%20Z'%20fill='%23f59e0b'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="azure"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M10%202%20L17%2010%20L10%2018%20L3%2010%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M10%202%20L17%2010%20L10%2018%20L3%2010%20Z'%20fill='%230ea5e9'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="fuchsia"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M10%2017.4%20C2.8%2012.4%203.6%205.4%2010%208%20C16.4%205.4%2017.2%2012.4%2010%2017.4%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M10%2017.4%20C2.8%2012.4%203.6%205.4%2010%208%20C16.4%205.4%2017.2%2012.4%2010%2017.4%20Z'%20fill='%23d946ef'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="wine"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M10%2017.4%20C2.8%2012.4%203.6%205.4%2010%208%20C16.4%205.4%2017.2%2012.4%2010%2017.4%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M10%2017.4%20C2.8%2012.4%203.6%205.4%2010%208%20C16.4%205.4%2017.2%2012.4%2010%2017.4%20Z'%20fill='%23be123c'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="sunburst"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M10%202%20L11.7%208.3%20L18%2010%20L11.7%2011.7%20L10%2018%20L8.3%2011.7%20L2%2010%20L8.3%208.3%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M10%202%20L11.7%208.3%20L18%2010%20L11.7%2011.7%20L10%2018%20L8.3%2011.7%20L2%2010%20L8.3%208.3%20Z'%20fill='%23f97316'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="electric"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M11.6%202%20L4.4%2011%20L9%2011%20L8%2018%20L15.6%208.4%20L11%208.4%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M11.6%202%20L4.4%2011%20L9%2011%20L8%2018%20L15.6%208.4%20L11%208.4%20Z'%20fill='%2306b6d4'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="candy"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M10%2017.4%20C2.8%2012.4%203.6%205.4%2010%208%20C16.4%205.4%2017.2%2012.4%2010%2017.4%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M10%2017.4%20C2.8%2012.4%203.6%205.4%2010%208%20C16.4%205.4%2017.2%2012.4%2010%2017.4%20Z'%20fill='%23f472b6'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="galaxy"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M10%202%20L11.7%208.3%20L18%2010%20L11.7%2011.7%20L10%2018%20L8.3%2011.7%20L2%2010%20L8.3%208.3%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M10%202%20L11.7%208.3%20L18%2010%20L11.7%2011.7%20L10%2018%20L8.3%2011.7%20L2%2010%20L8.3%208.3%20Z'%20fill='%238b5cf6'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="velvet"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M10%202%20L11.7%208.3%20L18%2010%20L11.7%2011.7%20L10%2018%20L8.3%2011.7%20L2%2010%20L8.3%208.3%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M10%202%20L11.7%208.3%20L18%2010%20L11.7%2011.7%20L10%2018%20L8.3%2011.7%20L2%2010%20L8.3%208.3%20Z'%20fill='%23b5179e'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="riviera"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M10%202%20L11.7%208.3%20L18%2010%20L11.7%2011.7%20L10%2018%20L8.3%2011.7%20L2%2010%20L8.3%208.3%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M10%202%20L11.7%208.3%20L18%2010%20L11.7%2011.7%20L10%2018%20L8.3%2011.7%20L2%2010%20L8.3%208.3%20Z'%20fill='%2317a2b8'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="meadow"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M10%202%20L11.7%208.3%20L18%2010%20L11.7%2011.7%20L10%2018%20L8.3%2011.7%20L2%2010%20L8.3%208.3%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M10%202%20L11.7%208.3%20L18%2010%20L11.7%2011.7%20L10%2018%20L8.3%2011.7%20L2%2010%20L8.3%208.3%20Z'%20fill='%237aa93f'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="dusk"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M10%202%20L11.7%208.3%20L18%2010%20L11.7%2011.7%20L10%2018%20L8.3%2011.7%20L2%2010%20L8.3%208.3%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M10%202%20L11.7%208.3%20L18%2010%20L11.7%2011.7%20L10%2018%20L8.3%2011.7%20L2%2010%20L8.3%208.3%20Z'%20fill='%23ec6aa8'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="bourbon"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M6%203%20L14%203%20L18%208.5%20L10%2018%20L2%208.5%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M6%203%20L14%203%20L18%208.5%20L10%2018%20L2%208.5%20Z'%20fill='%23c8922a'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="sakura"] { --cur-hand:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22%23ef9fb7%22%20stroke%3D%22%23713b59%22%20stroke-width%3D%22.9%22%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%226.5%22%20rx%3D%223.6%22%20ry%3D%224.4%22%20transform%3D%22rotate%280%2012%2012%29%22%2F%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%226.5%22%20rx%3D%223.6%22%20ry%3D%224.4%22%20transform%3D%22rotate%2872%2012%2012%29%22%2F%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%226.5%22%20rx%3D%223.6%22%20ry%3D%224.4%22%20transform%3D%22rotate%28144%2012%2012%29%22%2F%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%226.5%22%20rx%3D%223.6%22%20ry%3D%224.4%22%20transform%3D%22rotate%28216%2012%2012%29%22%2F%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%226.5%22%20rx%3D%223.6%22%20ry%3D%224.4%22%20transform%3D%22rotate%28288%2012%2012%29%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%20fill%3D%22%23fff3cc%22%20stroke%3D%22%23713b59%22%20stroke-width%3D%22.9%22%2F%3E%3C%2Fsvg%3E") 12 12; }
html[data-theme="gilded"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M3%2016%20L17%2016%20L17%208%20L13%2012%20L10%203%20L7%2012%20L3%208%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M3%2016%20L17%2016%20L17%208%20L13%2012%20L10%203%20L7%2012%20L3%208%20Z'%20fill='%23a36c10'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="zephyr"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%3E%3Cpath%20d='M3%207%20C7%204,%2013%204,%2016%207%20C18%209,%2017%2012,%2014%2012%20C12%2012,%2011%2010.5,%2012%209%20C13%207.5,%2015%208,%2015%209%20M2%2012%20C6%209,%2015%209,%2018%2012%20C20%2014,%2019%2017,%2016%2017%20C14%2017,%2013%2015.5,%2014%2014%20C15%2012.5,%2017%2013,%2017%2014%20M4%2017%20C7%2015,%2012%2015,%2015%2017'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M3%207%20C7%204,%2013%204,%2016%207%20C18%209,%2017%2012,%2014%2012%20C12%2012,%2011%2010.5,%2012%209%20C13%207.5,%2015%208,%2015%209%20M2%2012%20C6%209,%2015%209,%2018%2012%20C20%2014,%2019%2017,%2016%2017%20C14%2017,%2013%2015.5,%2014%2014%20C15%2012.5,%2017%2013,%2017%2014%20M4%2017%20C7%2015,%2012%2015,%2015%2017'%20fill='none'%20stroke='%230ea5e9'%20stroke-width='1.4'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") 11 11; }
html[data-theme="ignis"]  { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%3E%3Cpath%20d='M11%202%20C11%202,%2016%207.5,%2016%2012%20C16%2015.5,%2013.5%2019,%2011%2020%20C8.5%2019,%206%2015.5,%206%2012%20C6%207.5,%2011%202,%2011%202%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M11%202%20C11%202,%2016%207.5,%2016%2012%20C16%2015.5,%2013.5%2019,%2011%2020%20C8.5%2019,%206%2015.5,%206%2012%20C6%207.5,%2011%202,%2011%202%20Z'%20fill='%23f97316'%20stroke='white'%20stroke-width='0.6'%20stroke-linejoin='round'/%3E%3Cpath%20d='M11%2010%20C11%2010,%2013%2013,%2013%2015%20C13%2016.5,%2012%2018,%2011%2018%20C10%2018,%209%2016.5,%209%2015%20C9%2013,%2011%2010,%2011%2010%20Z'%20fill='%23fbbf24'/%3E%3C/svg%3E") 11 11; }
html[data-theme="dune"]   { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%3E%3Cpath%20d='M5%204%20L17%204%20L12%2011%20L17%2018%20L5%2018%20L10%2011%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M5%204%20L17%204%20L12%2011%20L17%2018%20L5%2018%20L10%2011%20Z'%20fill='%23e09f3e'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3Ccircle%20cx='11'%20cy='15'%20r='1.5'%20fill='%23bc6c25'/%3E%3C/svg%3E") 11 11; }
html[data-theme="hydro"]  { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%3E%3Cpath%20d='M11%202%20C11%202,%2017%209,%2017%2013.5%20C17%2017,%2014.3%2020,%2011%2020%20C7.7%2020,%205%2017,%205%2013.5%20C5%209,%2011%202,%2011%202%20Z'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M11%202%20C11%202,%2017%209,%2017%2013.5%20C17%2017,%2014.3%2020,%2011%2020%20C7.7%2020,%205%2017,%205%2013.5%20C5%209,%2011%202,%2011%202%20Z'%20fill='%2306b6d4'%20stroke='white'%20stroke-width='0.7'%20stroke-linejoin='round'/%3E%3Cellipse%20cx='9'%20cy='12'%20rx='1.8'%20ry='3'%20fill='white'%20opacity='0.75'%20transform='rotate(-25%209%2012)'/%3E%3C/svg%3E") 11 11; }
html[data-theme="andalus"]{ --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%3E%3Cg%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linejoin='round'%3E%3Crect%20x='6'%20y='6'%20width='10'%20height='10'%20rx='0.8'/%3E%3Crect%20x='6'%20y='6'%20width='10'%20height='10'%20rx='0.8'%20transform='rotate(45%2011%2011)'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='%23d4af37'%20stroke-width='1.4'%20stroke-linejoin='round'%3E%3Crect%20x='6'%20y='6'%20width='10'%20height='10'%20rx='0.8'%20fill='%23046a38'/%3E%3Crect%20x='6'%20y='6'%20width='10'%20height='10'%20rx='0.8'%20fill='%23046a38'%20transform='rotate(45%2011%2011)'/%3E%3C/g%3E%3Ccircle%20cx='11'%20cy='11'%20r='2'%20fill='%23e5c158'%20stroke='white'%20stroke-width='0.5'/%3E%3C/svg%3E") 11 11; }
html[data-theme="mundial"]{ --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22haloShade%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%3Cstop%20offset%3D%2255%25%22%20stop-color%3D%22%23f59e0b%22%20stop-opacity%3D%220.9%22%2F%3E%3Cstop%20offset%3D%2280%25%22%20stop-color%3D%22%23fbbf24%22%20stop-opacity%3D%220.4%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23fbbf24%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22ballShade%22%20cx%3D%2235%25%22%20cy%3D%2232%25%22%20r%3D%2268%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffffff%22%2F%3E%3Cstop%20offset%3D%2265%25%22%20stop-color%3D%22%23f8fafc%22%2F%3E%3Cstop%20offset%3D%2290%25%22%20stop-color%3D%22%23cbd5e1%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2394a3b8%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22shine%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220.85%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22ballClip%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2210.5%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2215%22%20fill%3D%22url(%23haloShade)%22%20opacity%3D%220.6%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2213.2%22%20fill%3D%22none%22%20stroke%3D%22%23fbbf24%22%20stroke-width%3D%221.2%22%20opacity%3D%220.8%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2211.8%22%20fill%3D%22none%22%20stroke%3D%22%23f59e0b%22%20stroke-width%3D%220.8%22%20opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M25%205.5%20L25.8%207.5%20L28%208.2%20L25.8%209%20L25%2011%20L24.2%209%20L22%208.2%20L24.2%207.5%20Z%22%20fill%3D%22%23fef08a%22%2F%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%228.2%22%20r%3D%220.6%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M7%2023%20L7.5%2024.2%20L9%2024.6%20L7.5%2025.1%20L7%2026.5%20L6.5%2025.1%20L5%2024.6%20L6.5%2024.2%20Z%22%20fill%3D%22%23fef08a%22%20opacity%3D%220.75%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2210.5%22%20fill%3D%22url(%23ballShade)%22%20stroke%3D%22%2309090b%22%20stroke-width%3D%220.9%22%2F%3E%3Cg%20clip-path%3D%22url(%23ballClip)%22%3E%3Cpath%20d%3D%22M16%2012.2%20L16%205.5%20M19.6%2014.8%20L26%2012.8%20M18.2%2019.1%20L23%2025%20M13.8%2019.1%20L9%2025%20M12.4%2014.8%20L6%2012.8%22%20stroke%3D%22%23334155%22%20stroke-width%3D%220.9%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M11%205.8%20L6%2012.8%20L7.5%2020%20M21%205.8%20L26%2012.8%20L24.5%2020%20M11%2026.2%20L16%2026.5%20L21%2026.2%22%20stroke%3D%22%23334155%22%20stroke-width%3D%220.75%22%20fill%3D%22none%22%2F%3E%3Cpolygon%20points%3D%2216%2C12.2%2019.6%2C14.8%2018.2%2C19.1%2013.8%2C19.1%2012.4%2C14.8%22%20fill%3D%22%2309090b%22%20stroke%3D%22%23000000%22%20stroke-width%3D%220.5%22%2F%3E%3Cpolygon%20points%3D%2213.2%2C5.2%2016%2C7%2018.8%2C5.2%2018%2C3%2014%2C3%22%20fill%3D%22%2309090b%22%2F%3E%3Cpolygon%20points%3D%2223.2%2C10.5%2025.6%2C12.8%2024.2%2C15.6%2027%2C15%2027%2C10%22%20fill%3D%22%2309090b%22%2F%3E%3Cpolygon%20points%3D%2220.8%2C21.5%2022.8%2C24%2025%2C22%2025%2C19%2022.5%2C19%22%20fill%3D%22%2309090b%22%2F%3E%3Cpolygon%20points%3D%2211.2%2C21.5%209.2%2C24%207%2C22%207%2C19%209.5%2C19%22%20fill%3D%22%2309090b%22%2F%3E%3Cpolygon%20points%3D%228.8%2C10.5%206.4%2C12.8%207.8%2C15.6%205%2C15%205%2C10%22%20fill%3D%22%2309090b%22%2F%3E%3Cellipse%20cx%3D%2212.5%22%20cy%3D%2211.5%22%20rx%3D%224.5%22%20ry%3D%222.2%22%20fill%3D%22url(%23shine)%22%20transform%3D%22rotate(-35%2012.5%2011.5)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 16 16; }
html[data-theme="sky"]{ --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='15'%20cy='9'%20r='4'/%3E%3Cpath%20d='M15%203v2M21%209h-2M19.2%204.8l-1.4%201.4M10.8%2013.2l-1.4%201.4'/%3E%3Cpath%20d='M17%2019H7a4%204%200%200%201-.8-7.9%205.5%205.5%200%200%201%2010.3-1.6A3.5%203.5%200%200%201%2017%2019z'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='%23f59e0b'%20stroke-width='1.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='15'%20cy='9'%20r='4'%20fill='%23fbbf24'/%3E%3Cpath%20d='M15%203v2M21%209h-2M19.2%204.8l-1.4%201.4'/%3E%3C/g%3E%3Cpath%20d='M17%2019H7a4%204%200%200%201-.8-7.9%205.5%205.5%200%200%201%2010.3-1.6A3.5%203.5%200%200%201%2017%2019z'%20fill='%230284c7'%20stroke='white'%20stroke-width='1'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 10; }
html[data-theme="soluna"]{ --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.5%2013.5A8.5%208.5%200%201%201%2010.5%203.5a6.8%206.8%200%200%200%2010%2010z'/%3E%3Cpath%20d='M18%205l.5%201.5L20%207l-1.5.5L18%209l-.5-1.5L16%207l1.5-.5z'/%3E%3C/g%3E%3Cpath%20d='M20.5%2013.5A8.5%208.5%200%201%201%2010.5%203.5a6.8%206.8%200%200%200%2010%2010z'%20fill='%23c084fc'%20stroke='%23e2e8f0'%20stroke-width='1.2'%20stroke-linejoin='round'/%3E%3Cpath%20d='M18%205l.5%201.5L20%207l-1.5.5L18%209l-.5-1.5L16%207l1.5-.5z'%20fill='%23ffffff'%20stroke='%2338bdf8'%20stroke-width='0.8'/%3E%3C/svg%3E") 10 10; }
html[data-theme="soluna"][data-mode="light"]{ --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='5'/%3E%3Cpath%20d='M12%202v2.5M12%2019.5V22M2%2012h2.5M19.5%2012H22M4.93%204.93l1.8%201.8M17.27%2017.27l1.8%201.8M4.93%2019.07l1.8-1.8M17.27%206.73l1.8-1.8'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='%23f59e0b'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='5'%20fill='%23fbbf24'/%3E%3Cpath%20d='M12%202v2.5M12%2019.5V22M2%2012h2.5M19.5%2012H22M4.93%204.93l1.8%201.8M17.27%2017.27l1.8%201.8M4.93%2019.07l1.8-1.8M17.27%206.73l1.8-1.8'/%3E%3C/g%3E%3Ccircle%20cx='12'%20cy='12'%20r='2.5'%20fill='%23ffffff'%20opacity='0.85'/%3E%3C/svg%3E") 12 12; }
html[data-theme="mario"]{ --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cellipse%20cx='12'%20cy='13'%20rx='9'%20ry='8'%20fill='%2315803d'%20stroke='white'%20stroke-width='2.6'/%3E%3Cellipse%20cx='12'%20cy='13'%20rx='9'%20ry='8'%20fill='%2315803d'%20stroke='%23f97316'%20stroke-width='1.2'/%3E%3Cpolygon%20points='12,2%209.5,8%2014.5,8'%20fill='%23ffffff'%20stroke='%23dc2626'%20stroke-width='0.8'/%3E%3Cpolygon%20points='3,8%207,11%205,13'%20fill='%23ffffff'%20stroke='%23dc2626'%20stroke-width='0.8'/%3E%3Cpolygon%20points='21,8%2019,13%2017,11'%20fill='%23ffffff'%20stroke='%23dc2626'%20stroke-width='0.8'/%3E%3Ccircle%20cx='12'%20cy='13'%20r='2'%20fill='%23ea580c'/%3E%3C/svg%3E") 12 12; }
html[data-theme="mario"][data-mode="light"]{ --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpolygon%20points='12,2%2015,9%2022,10%2017,15%2018,22%2012,18%206,22%207,15%202,10%209,9'%20fill='%23fcd116'%20stroke='white'%20stroke-width='2.5'%20stroke-linejoin='round'/%3E%3Cpolygon%20points='12,2%2015,9%2022,10%2017,15%2018,22%2012,18%206,22%207,15%202,10%209,9'%20fill='%23fcd116'%20stroke='%23b45309'%20stroke-width='0.8'%20stroke-linejoin='round'/%3E%3Cellipse%20cx='10.5'%20cy='12'%20rx='0.9'%20ry='2.2'%20fill='%23000000'/%3E%3Cellipse%20cx='13.5'%20cy='12'%20rx='0.9'%20ry='2.2'%20fill='%23000000'/%3E%3C/svg%3E") 12 12; }




/* ---- deposit bill-denomination counter (cash flow) ---- */
.denom-grid { border: 1px solid var(--border); border-radius: var(--radius-input); padding: 8px 10px; margin: 4px 0 6px; }
.denom-head { display: grid; grid-template-columns: 52px 18px 1fr 96px; gap: 8px; align-items: center; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 0 2px 6px; }
.denom-row { display: grid; grid-template-columns: 52px 18px 1fr 96px; gap: 8px; align-items: center; padding: 4px 0; }
.denom-lbl { font-weight: 700; font-size: 15px; }
.denom-x { color: var(--muted); text-align: center; }
.denom-c { width: 100%; }
.denom-sub { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.denom-total { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-weight: 700; }
.denom-total b { font-size: 18px; }

/* ---- Register Outbox & Price/Promo Badges ---- */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; line-height: 1.3; white-space: nowrap; border: 1px solid transparent; }
.badge.green, .badge.active, .badge.completed { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.badge.amber, .badge.warn, .badge.queued { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.badge.blue, .badge.info, .badge.dispatching { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.badge.danger, .badge.red, .badge.failed { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.badge.gray, .badge.muted { background: var(--tint-14); color: var(--muted); border-color: var(--border); }

.outbox-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); border-radius: 8px; padding: 9px 14px; margin-bottom: 12px; font-size: 13px; }
.outbox-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 12px; margin: 3px; }
.outbox-chip button { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1; padding: 0 2px; }
.outbox-chip button:hover { color: var(--red); }

/* ---- Fuel Run-Off & Tank Depletion Predictions ---- */
.runoff-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.runoff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start; /* CRITICAL: prevents cards in same row from stretching into blank cards when another expands */
  gap: 14px;
  margin-bottom: 18px;
}
.runoff-card {
  align-self: start; /* Each card strictly conforms to its own content height */
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--elev);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  overflow: hidden;
}
.runoff-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.runoff-card.critical { border-color: color-mix(in srgb, var(--red) 55%, transparent); box-shadow: 0 4px 20px -4px color-mix(in srgb, var(--red) 35%, transparent); }
.runoff-card.warning { border-color: color-mix(in srgb, var(--amber) 55%, transparent); box-shadow: 0 4px 18px -4px color-mix(in srgb, var(--amber) 25%, transparent); }
.runoff-card.ok { border-color: color-mix(in srgb, var(--green) 45%, transparent); }

.runoff-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; gap: 8px; }
.runoff-grade-title { font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 6px; }

.tank-gauge-wrap { margin: 10px 0 14px; }
.tank-gauge-label { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.tank-gauge-track {
  position: relative;
  height: 14px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.tank-gauge-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .3s ease;
}
.tank-gauge-fill.critical { background: linear-gradient(90deg, var(--red), #f87171); }
.tank-gauge-fill.warning { background: linear-gradient(90deg, var(--amber), #fbbf24); }
.tank-gauge-fill.ok { background: linear-gradient(90deg, var(--green), #34d399); }

.tank-gauge-suction-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8%; /* 800 gal / 10,000 gal */
  width: 2px;
  background: var(--red);
  opacity: 0.7;
}

.runoff-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; padding: 8px 10px; background: color-mix(in srgb, var(--panel-2) 60%, transparent); border-radius: 8px; border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.runoff-stat-box { font-size: 11.5px; }
.runoff-stat-box .lbl { color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; margin-bottom: 2px; }
.runoff-stat-box .val { font-size: 15px; font-weight: 700; }

.runoff-countdown-banner {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 8px;
  margin-top: 4px;
  border: 1px solid transparent;
}
.runoff-countdown-banner.critical {
  background: color-mix(in srgb, var(--red) 14%, transparent);
  border-color: color-mix(in srgb, var(--red) 35%, transparent);
  color: var(--text);
}
.runoff-countdown-banner.warning {
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  border-color: color-mix(in srgb, var(--amber) 35%, transparent);
  color: var(--text);
}
.runoff-countdown-banner.ok {
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
  color: var(--text);
}

.runoff-countdown-banner .countdown-head { display: flex; justify-content: space-between; align-items: baseline; }
.runoff-countdown-banner .countdown-num { font-size: 22px; font-weight: 800; }
.runoff-countdown-banner .countdown-target { font-size: 12px; margin-top: 2px; }
.runoff-countdown-banner .countdown-sub { font-size: 11px; opacity: .85; margin-top: 3px; }

/* ---- Foldable & Reorderable Cards ---- */
.card-drag-handle {
  cursor: grab;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  padding: 3px 5px;
  user-select: none;
  border-radius: 4px;
  display: none; /* hidden until edit mode */
  align-items: center;
  transition: color .15s ease, background .15s ease;
}
.card-drag-handle:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.card-drag-handle:active { cursor: grabbing; }

.runoff-card.dragging, .reconcile-card.dragging {
  opacity: 0.45;
  border: 2px dashed var(--accent) !important;
  transform: scale(0.98);
}
.runoff-card.drag-over, .reconcile-card.drag-over {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent) !important;
  transform: translateY(-2px);
}

.fold-btn {
  background: none;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  padding: 2px 7px;
  border-radius: 4px;
  transition: all .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fold-btn:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
  border-color: var(--border);
}

.reorder-btns-wrap {
  display: none; /* hidden until edit mode */
}
.reorder-btn {
  background: none;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
  cursor: pointer;
  color: var(--muted);
  transition: all .15s ease;
  display: none; /* hidden until edit mode */
}
.reorder-btn:hover:not(:disabled) {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border-color: var(--text);
}
.reorder-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Edit Mode rules */
.edit-mode .card-drag-handle {
  display: inline-flex !important;
}
.edit-mode .reorder-btn {
  display: inline-block !important;
}
.edit-mode .reorder-btns-wrap {
  display: flex !important;
}
.edit-mode .reset-order-btn {
  display: inline-block !important;
}
.runoff-grid.edit-mode .runoff-card,
.reconcile-cards-container.edit-mode .reconcile-card {
  border-style: dashed;
}

/* Polished Folded Run-Off Card Widget */
.runoff-card.folded {
  padding: 12px 14px;
  cursor: pointer;
}
.runoff-card.folded:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: 0 4px 16px -2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.runoff-card.folded .runoff-card-body {
  display: none;
}
.runoff-folded-widget {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.runoff-folded-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.runoff-folded-kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 6px;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--panel-2) 60%, transparent);
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.runoff-folded-kpi {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.runoff-folded-kpi .lbl {
  font-size: 9.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 1px;
}
.runoff-folded-kpi .val {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.runoff-folded-kpi .val small {
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
}
.runoff-folded-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}

/* Table & Data Container Cards: firmly anchored against hover translation to eliminate flicker */
.reconcile-card,
.reconcile-card:hover,
.runoff-card,
.runoff-card:hover,
.live-shift-card,
.live-shift-card:hover,
.card:has(table),
.card:has(table):hover,
.card:has(.reconcile-table-wrap),
.card:has(.reconcile-table-wrap):hover,
.card:has(.table-wrap),
.card:has(.table-wrap):hover {
  transform: none !important;
}

.reconcile-card {
  transition: box-shadow .15s ease, border-color .15s ease;
}

.reconcile-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}
.reconcile-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
  user-select: none;
}
.reconcile-card.folded table {
  display: none;
}
.reconcile-summary-pill {
  display: none;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--panel-2) 60%, transparent);
  border-radius: 6px;
  font-size: 11.5px;
}
.reconcile-card.folded .reconcile-summary-pill {
  display: inline-flex;
}

/* ===== Taxes & Sales Tax Compliance ===== */
.tax-nav-pills .btn {
  font-weight: 600;
  transition: all 0.15s ease;
}
.tax-table tbody tr td {
  padding: 6px 10px;
}
.tax-table thead th {
  padding: 8px 10px;
  vertical-align: bottom;
}
.tax-row-today {
  position: relative;
  font-weight: 500;
}
.tax-table tfoot td {
  padding: 10px;
}



/* ============================================================================
   THEME MOTION POLISH (2026-09-22) — subtle, GPU-only ambient life for the six
   signature themes: elemental Aero/Pyro/Dune-Sand/Hydro + Arabesque(Al-Andalus)
   + Mundial. Only transform is animated (compositor-friendly), only on the hero
   watermarks (stat tiles + station-card balance) so the UI feels alive, not busy.
   Idle motion pauses on hover so the existing hover gesture reads cleanly.
   All of it is disabled under prefers-reduced-motion (see the block at the end).
   ============================================================================ */

/* Compositor isolation for watermark pseudo-elements to eliminate lag & repaints */
html[data-theme="zephyr"] .card::after, html[data-theme="zephyr"] .stat::after, html[data-theme="zephyr"] .sc-balance::after,
html[data-theme="ignis"] .card::after, html[data-theme="ignis"] .stat::after, html[data-theme="ignis"] .sc-balance::after,
html[data-theme="dune"] .card::after, html[data-theme="dune"] .stat::after, html[data-theme="dune"] .sc-balance::after,
html[data-theme="hydro"] .card::after, html[data-theme="hydro"] .stat::after, html[data-theme="hydro"] .sc-balance::after,
html[data-theme="andalus"] .card::after, html[data-theme="andalus"] .stat::after, html[data-theme="andalus"] .sc-balance::after,
html[data-theme="mundial"] .card::after, html[data-theme="mundial"] .stat::after, html[data-theme="mundial"] .sc-balance::after,
html[data-theme="sky"] .card::after, html[data-theme="sky"] .stat::after, html[data-theme="sky"] .sc-balance::after,
html[data-theme="soluna"] .card::after, html[data-theme="soluna"] .stat::after, html[data-theme="soluna"] .sc-balance::after,
html[data-theme="mario"] .card::after, html[data-theme="mario"] .stat::after, html[data-theme="mario"] .sc-balance::after,
html[data-theme="gilded"] .card::after, html[data-theme="gilded"] .stat::after, html[data-theme="gilded"] .sc-balance::after,
html[data-theme="sakura"] .card::after, html[data-theme="sakura"] .stat::after, html[data-theme="sakura"] .sc-balance::after {
  will-change: transform;
  transform: translateZ(0);
  pointer-events: none;
}

/* --- element motion keyframes (transform only) --- */
@keyframes th-breeze-s { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }      /* AIR: breeze glide */
@keyframes th-breeze-c { 0%,100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(4px); } }
@keyframes th-flame-s  { 0%,100% { transform: translateY(0) scale(1); } 42% { transform: translateY(-2px) scale(1.07); } 70% { transform: translateY(-.5px) scale(.98); } }   /* FIRE: ember flicker */
@keyframes th-flame-c  { 0%,100% { transform: translateY(-50%) scale(1); } 42% { transform: translateY(calc(-50% - 2px)) scale(1.07); } 70% { transform: translateY(calc(-50% - .5px)) scale(.98); } }
@keyframes th-drift-s  { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }       /* SAND: dune drift */
@keyframes th-drift-c  { 0%,100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(-3px); } }
@keyframes th-tide-s   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }     /* WATER: wave bob */
@keyframes th-tide-c   { 0%,100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 2.5px)); } }
@keyframes th-spin-s   { from { transform: rotate(0); } to { transform: rotate(360deg); } }                 /* star / ball turn */
@keyframes th-spin-c   { from { transform: translateY(-50%) rotate(0); } to { transform: translateY(-50%) rotate(360deg); } }
@keyframes th-gold-sheen { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } }    /* gilded logo shimmer */
@keyframes th-twinkle  { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes andalus-gold-sheen { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes mundial-ball-spin { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } }
@keyframes aero-wind-drift { 0%, 100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(6px); } }
@keyframes pyro-flame-flicker { 0%, 100% { transform: translateY(-50%) scale(1); } 50% { transform: translateY(calc(-50% - 3px)) scale(1.08); } }
@keyframes dune-sand-shift { 0%, 100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(-5px); } }
@keyframes hydro-wave-float { 0%, 100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(calc(-50% - 4px)) translateX(3px); } }
@keyframes andalus-star-float { 0%, 100% { transform: translateY(-50%) rotate(0deg); } 50% { transform: translateY(calc(-50% - 3px)) rotate(10deg); } }
@keyframes andalus-star-breathe { 0%,100% { transform: scale(1) rotate(0deg); opacity: 0.88; } 50% { transform: scale(1.15) rotate(22.5deg); opacity: 1; } }
@keyframes andalus-lantern-pulse {
  0% { box-shadow: 0 0 10px -2px rgba(212, 175, 55, 0.35), inset 0 1px 0 rgba(255, 230, 140, 0.3); }
  100% { box-shadow: 0 0 20px 2px rgba(212, 175, 55, 0.65), 0 0 30px -4px rgba(4, 106, 56, 0.5), inset 0 1px 0 rgba(255, 230, 140, 0.6); }
}
@keyframes sky-sheen { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes sun-radiance { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.88; } 50% { transform: scale(1.15) rotate(15deg); opacity: 1; } }
@keyframes th-sky-float { 0%, 100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(calc(-50% - 3px)) translateX(3px); } }
@keyframes th-sky-float-c { 0%, 100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(calc(-50% - 2.5px)) translateX(2.5px); } }
@keyframes sky-tab-breathe { 0% { box-shadow: 0 0 10px -2px rgba(56, 189, 248, 0.35); } 100% { box-shadow: 0 0 22px 2px rgba(56, 189, 248, 0.65), 0 0 30px -4px rgba(251, 191, 36, 0.4); } }
@keyframes soluna-solar-sheen { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes soluna-lunar-sheen { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes solar-corona-spin { from { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.12); } to { transform: rotate(360deg) scale(1); } }
@keyframes lunar-halo-pulse { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; } 50% { transform: scale(1.14) rotate(-8deg); opacity: 1; } }
@keyframes soluna-sun-turn { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } }
@keyframes soluna-moon-float { 0%, 100% { transform: translateY(-50%) rotate(0deg); } 50% { transform: translateY(calc(-50% - 3.5px)) rotate(-6deg); } }
@keyframes soluna-pill-pulse { 0% { box-shadow: 0 0 10px -2px rgba(192, 132, 252, 0.35); } 100% { box-shadow: 0 0 22px 2px rgba(192, 132, 252, 0.65), 0 0 28px -4px rgba(56, 189, 248, 0.4); } }

/* GILDED — Imperial Dark Gold Keyframes */
@keyframes gilded-gold-sheen { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes gilded-crown-pulse { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; } 50% { transform: scale(1.14) rotate(-4deg); opacity: 1; } }
@keyframes gilded-crest-float { 0%, 100% { transform: translateY(-50%) rotate(0deg); } 50% { transform: translateY(calc(-50% - 3.5px)) rotate(3deg); } }
@keyframes gilded-tab-pulse { 0% { box-shadow: 0 0 10px -2px rgba(196, 136, 34, 0.35); } 100% { box-shadow: 0 0 22px 2px rgba(196, 136, 34, 0.65), 0 0 28px -4px rgba(229, 185, 88, 0.45); } }

/* SAKURA MIST — Japanese Cherry Blossom Keyframes */
@keyframes sakura-bloom-sheen { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes sakura-petal-flutter { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; } 50% { transform: scale(1.15) rotate(12deg); opacity: 1; } }
@keyframes sakura-petal-drift { 0%, 100% { transform: translateY(-50%) rotate(0deg); } 50% { transform: translateY(calc(-50% - 4px)) rotate(8deg); } }
@keyframes sakura-tab-pulse { 0% { box-shadow: 0 0 10px -2px rgba(242, 114, 143, 0.35); } 100% { box-shadow: 0 0 22px 2px rgba(242, 114, 143, 0.65), 0 0 28px -4px rgba(72, 187, 120, 0.4); } }

/* SUPER MARIO & BOWSER CASTLE Keyframes */
@keyframes mario-star-sheen { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes bowser-magma-sheen { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes mario-jump-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-7px) scale(1.12); }
  65% { transform: translateY(-2px) scale(0.96); }
}
@keyframes bowser-flame-flare {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; }
  50% { transform: scale(1.18) rotate(-8deg); opacity: 1; }
}
@keyframes mario-star-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.06); }
}
@keyframes bowser-fire-flicker {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.06); opacity: 1; }
}
@keyframes mario-coin-spin {
  0% { transform: translateY(-50%) scaleX(1); }
  50% { transform: translateY(calc(-50% - 3px)) scaleX(0.2); }
  100% { transform: translateY(-50%) scaleX(1); }
}
@keyframes mario-pill-pulse {
  0% { box-shadow: 0 0 10px -2px rgba(229, 37, 33, 0.35); }
  100% { box-shadow: 0 0 22px 2px rgba(229, 37, 33, 0.65), 0 0 28px -4px rgba(252, 209, 22, 0.5); }
}
@keyframes bowser-pill-pulse {
  0% { box-shadow: 0 0 10px -2px rgba(220, 38, 38, 0.4); }
  100% { box-shadow: 0 0 22px 2px rgba(220, 38, 38, 0.7), 0 0 28px -4px rgba(249, 115, 22, 0.55); }
}

/* AIR — Aero Wind: the wind glyph glides on a slow breeze */
html[data-style="aero"] .stat::after { animation: th-breeze-s 7s ease-in-out infinite; }
html[data-style="aero"] .station-card .sc-balance::after { animation: th-breeze-c 7s ease-in-out infinite; }
html[data-style="aero"] .stat:hover::after,
html[data-style="aero"] .station-card:hover .sc-balance::after { animation: none; }

/* FIRE — Pyro Flame: the flame flickers */
html[data-style="pyro"] .stat::after { animation: th-flame-s 3.6s ease-in-out infinite; }
html[data-style="pyro"] .station-card .sc-balance::after { animation: th-flame-c 3.6s ease-in-out infinite; }
html[data-style="pyro"] .stat:hover::after,
html[data-style="pyro"] .station-card:hover .sc-balance::after { animation: none; }

/* SAND — Dune Sand: the dune drifts slowly */
html[data-style="sand"] .stat::after { animation: th-drift-s 9s ease-in-out infinite; }
html[data-style="sand"] .station-card .sc-balance::after { animation: th-drift-c 9s ease-in-out infinite; }
html[data-style="sand"] .stat:hover::after,
html[data-style="sand"] .station-card:hover .sc-balance::after { animation: none; }

/* WATER — Hydro Tide: the wave rises and falls */
html[data-style="hydro"] .stat::after { animation: th-tide-s 4.5s ease-in-out infinite; }
html[data-style="hydro"] .station-card .sc-balance::after { animation: th-tide-c 4.5s ease-in-out infinite; }
html[data-style="hydro"] .stat:hover::after,
html[data-style="hydro"] .station-card:hover .sc-balance::after { animation: none; }

/* AL-ANDALUS — Arabesque: the 8-point sacred star turns slowly */
html[data-style="arabesque"] .stat::after { animation: th-spin-s 24s linear infinite; }
html[data-style="arabesque"] .station-card .sc-balance::after { animation: th-spin-c 24s linear infinite; }
html[data-style="arabesque"] .stat:hover::after,
html[data-style="arabesque"] .station-card:hover .sc-balance::after { animation: none; }
/* the gilded ۞ in the logo gently glimmers */
html[data-theme="andalus"] .brand::before { display: inline-block; animation: th-twinkle 4.5s ease-in-out infinite; }

/* MUNDIAL — the trophy ball rolls slowly; the wordmark catches a gold sheen */
html[data-theme="mundial"] .stat::after { animation: th-spin-s 10s linear infinite; }
html[data-theme="mundial"] .station-card .sc-balance::after { animation: th-spin-c 10s linear infinite; }
html[data-theme="mundial"] .stat:hover::after,
html[data-theme="mundial"] .station-card:hover .sc-balance::after { animation: none; }
html[data-theme="mundial"] .brand { background-size: 220% auto; animation: th-gold-sheen 6.5s linear infinite; }

/* SKY — atmospheric cloud & sun drift */
html[data-theme="sky"] .stat:hover::after,
html[data-theme="sky"] .station-card:hover .sc-balance::after { animation: none; }

/* Card Watermark Pause on Hover for All Signature Themes */
html[data-theme="andalus"] .card:not(.station-card):hover::after,
html[data-style="arabesque"] .card:not(.station-card):hover::after,
html[data-theme="mundial"] .card:not(.station-card):hover::after,
html[data-theme="zephyr"] .card:not(.station-card):hover::after,
html[data-style="aero"] .card:not(.station-card):hover::after,
html[data-theme="ignis"] .card:not(.station-card):hover::after,
html[data-style="pyro"] .card:not(.station-card):hover::after,
html[data-theme="dune"] .card:not(.station-card):hover::after,
html[data-style="sand"] .card:not(.station-card):hover::after,
html[data-theme="hydro"] .card:not(.station-card):hover::after,
html[data-style="hydro"] .card:not(.station-card):hover::after,
/* GILDED & SAKURA — Imperial Gold & Cherry Blossom ambient motion pause */
html[data-theme="gilded"] .stat:hover::after,
html[data-theme="gilded"] .station-card:hover .sc-balance::after,
html[data-theme="gilded"] .card:not(.station-card):hover::after,
html[data-theme="sakura"] .stat:hover::after,
html[data-theme="sakura"] .station-card:hover .sc-balance::after,
html[data-theme="sakura"] .card:not(.station-card):hover::after,
/* SOLUNA — celestial sun & moon ambient motion */
html[data-theme="soluna"] .stat:hover::after,
html[data-theme="soluna"] .station-card:hover .sc-balance::after,
html[data-theme="soluna"] .card:not(.station-card):hover::after,
/* SUPER MARIO & BOWSER CASTLE — ambient motion pause */
html[data-theme="mario"] .stat:hover::after,
html[data-theme="mario"] .station-card:hover .sc-balance::after,
html[data-theme="mario"] .card:not(.station-card):hover::after { animation-play-state: paused; }

/* Respect reduced-motion: kill every ambient theme animation (hover effects still work). */
@media (prefers-reduced-motion: reduce) {
  html[data-style="aero"] .stat::after, html[data-style="aero"] .station-card .sc-balance::after,
  html[data-style="pyro"] .stat::after, html[data-style="pyro"] .station-card .sc-balance::after,
  html[data-style="sand"] .stat::after, html[data-style="sand"] .station-card .sc-balance::after,
  html[data-style="hydro"] .stat::after, html[data-style="hydro"] .station-card .sc-balance::after,
  html[data-style="arabesque"] .stat::after, html[data-style="arabesque"] .station-card .sc-balance::after,
  html[data-style="arabesque"] .card:not(.station-card)::after,
  html[data-theme="mundial"] .stat::after, html[data-theme="mundial"] .station-card .sc-balance::after,
  html[data-theme="mundial"] .brand, html[data-theme="andalus"] .brand,
  html[data-theme="andalus"] .brand::before, html[data-theme="andalus"] .tab.active,
  html[data-theme="andalus"] .pill.active,
  html[data-theme="sky"] .stat::after, html[data-theme="sky"] .station-card .sc-balance::after,
  html[data-theme="sky"] .card:not(.station-card)::after,
  html[data-theme="sky"] .brand, html[data-theme="sky"] .brand::before,
  html[data-theme="sky"] .tab.active, html[data-theme="sky"] .pill.active,
  html[data-theme="gilded"] .stat::after, html[data-theme="gilded"] .station-card .sc-balance::after,
  html[data-theme="gilded"] .card:not(.station-card)::after,
  html[data-theme="gilded"] .brand, html[data-theme="gilded"] .brand::before,
  html[data-theme="gilded"] .tab.active, html[data-theme="gilded"] .pill.active,
  html[data-theme="sakura"] .stat::after, html[data-theme="sakura"] .station-card .sc-balance::after,
  html[data-theme="sakura"] .card:not(.station-card)::after,
  html[data-theme="sakura"] .brand, html[data-theme="sakura"] .brand::before,
  html[data-theme="sakura"] .tab.active, html[data-theme="sakura"] .pill.active,
  html[data-theme="soluna"] .stat::after, html[data-theme="soluna"] .station-card .sc-balance::after,
  html[data-theme="soluna"] .card:not(.station-card)::after,
  html[data-theme="soluna"] .brand, html[data-theme="soluna"] .brand::before,
  html[data-theme="soluna"] .tab.active, html[data-theme="soluna"] .pill.active,
  html[data-theme="mario"] .stat::after, html[data-theme="mario"] .station-card .sc-balance::after,
  html[data-theme="mario"] .card:not(.station-card)::after,
  html[data-theme="mario"] .brand, html[data-theme="mario"] .brand::before,
  html[data-theme="mario"] .tab.active, html[data-theme="mario"] .pill.active {
    animation: none !important;
  }
}

/* Gutter padding for stat tiles so text and metric labels never touch the corner glyph */
html[data-style="aero"] .stat,
html[data-style="pyro"] .stat,
html[data-style="sand"] .stat,
html[data-style="hydro"] .stat,
html[data-style="arabesque"] .stat,
html[data-theme="zephyr"] .stat,
html[data-theme="ignis"] .stat,
html[data-theme="dune"] .stat,
html[data-theme="hydro"] .stat,
html[data-theme="andalus"] .stat,
html[data-theme="mundial"] .stat,
html[data-theme="sky"] .stat,
html[data-theme="gilded"] .stat,
html[data-theme="sakura"] .stat,
html[data-theme="soluna"] .stat,
html[data-theme="mario"] .stat {
  padding-right: 42px;
}

/* ============================================================
   INSIGHTS: RETAIL TRENDS & SOCIAL MEDIA INTELLIGENCE
   ============================================================ */
.insights-wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: fadeIn 0.25s ease-out;
}

.insights-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.insights-title-area h2 {
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.insights-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: #fff;
  box-shadow: 0 2px 10px -2px var(--accent);
}

.insights-badge.pulse {
  animation: badgePulse 2s infinite ease-in-out;
}

@keyframes badgePulse {
  0%, 100% { opacity: 0.95; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

.insights-sub {
  color: var(--muted);
  font-size: 0.88rem;
  max-width: 680px;
  margin: 0;
  line-height: 1.45;
}

.insights-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.insights-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.insight-stat-card {
  background: var(--surface);
  border: 1px solid var(--surface-border-color);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--elev);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.insight-stat-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}

.insight-stat-card .lbl {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.insight-stat-card .val {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.insight-stat-card .sub {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Category Filter Bar */
.insights-cat-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.cat-pill:hover {
  border-color: var(--accent);
  background: var(--panel-2);
}

.cat-pill.active {
  background: var(--grad-primary);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px -3px var(--accent);
}

.cat-pill .cnt {
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.72rem;
  background: color-mix(in srgb, currentColor 20%, transparent);
}

/* Sub-controls bar */
.insights-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
}

.insights-controls-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}

.insights-search-box {
  position: relative;
  min-width: 220px;
  flex: 1;
}

.insights-search-box input {
  width: 100%;
  padding-left: 32px;
  box-sizing: border-box;
}

.insights-search-box::before {
  content: '🔍';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.82rem;
  opacity: 0.55;
  pointer-events: none;
}

/* Platform Badges */
.platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.platform-badge.tiktok {
  background: #010101;
  color: #fff;
  border: 1px solid #25f4ee;
  box-shadow: 0 0 10px -3px #fe2c55;
}

.platform-badge.instagram {
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
  color: #fff;
}

.platform-badge.twitter {
  background: #0f1419;
  color: #f7f9f9;
  border: 1px solid #536471;
}

.platform-badge.reddit {
  background: #ff4500;
  color: #fff;
}

.platform-badge.amazon {
  background: #232f3e;
  color: #ff9900;
  border: 1px solid #37475a;
}

/* Trends Grid */
.trends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 18px;
}

.trend-card {
  background: var(--surface);
  border: 1px solid var(--surface-border-color);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--elev);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.trend-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 16px 36px -12px rgba(0,0,0,0.5);
}

.trend-card.status-interested {
  border-left: 4px solid var(--amber);
}

.trend-card.status-ordered {
  border-left: 4px solid var(--green);
}

.trend-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.trend-card-virality {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  padding: 3px 8px;
  border-radius: 6px;
}

.trend-title-block h3 {
  margin: 0 0 4px 0;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--text);
}

.trend-brand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--muted);
}

.trend-brand-row .brand-name {
  font-weight: 700;
  color: var(--accent-2);
}

.trend-variety-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.variety-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.72rem;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
}

/* Why trending callout */
.trend-why-box {
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  border-left: 3px solid var(--accent);
  padding: 8px 12px;
  border-radius: 0 8px 8px 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text);
}

.trend-why-box .why-lbl {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-2);
  letter-spacing: 0.04em;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Profit Matrix */
.trend-matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}

.trend-matrix-item .m-lbl {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
}

.trend-matrix-item .m-val {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
  margin-top: 2px;
  display: block;
}

.trend-matrix-item.margin-col .m-val {
  color: var(--green);
}

/* Merchandising Details */
.trend-merch-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--muted);
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}

.trend-merch-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.trend-merch-row strong {
  color: var(--text);
  font-weight: 600;
  min-width: 90px;
}

.dist-pill {
  display: inline-block;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.72rem;
  margin-right: 4px;
}

/* Card Action Footer */
.trend-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: auto;
}

.trend-card-footer .left-btns {
  display: flex;
  gap: 6px;
}

.status-btn {
  padding: 5px 10px;
  font-size: 0.76rem;
  font-weight: 600;
  border-radius: var(--radius-btn);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  transition: all 0.15s ease;
}

.status-btn:hover {
  background: var(--panel-2);
}

.status-btn.active-star {
  background: color-mix(in srgb, var(--amber) 18%, var(--panel));
  border-color: var(--amber);
  color: var(--amber);
}

.status-btn.active-order {
  background: color-mix(in srgb, var(--green) 18%, var(--panel));
  border-color: var(--green);
  color: var(--green);
}

.buyer-sheet-table th, .buyer-sheet-table td {
  padding: 9px 12px;
}

.badge-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent-3) 16%, transparent);
  color: var(--accent-3);
  border: 1px solid color-mix(in srgb, var(--accent-3) 30%, transparent);
}

.modal:has(.buyer-sheet-table),
.modal:has(#print-order-area) {
  width: 860px;
  max-width: 95vw;
}

.modal:has(#tp-name) {
  width: 660px;
  max-width: 95vw;
}

/* ==========================================================================
   Live Data Page Redesign
   ========================================================================== */
.live-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  position: relative;
  width: 100%;
}

.live-main-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.live-side-panel {
  width: 320px;
  max-width: 340px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--surface-border-color);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--elev);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.2s ease;
  position: sticky;
  top: 14px;
}

.live-side-panel.folded {
  display: none;
}

.live-side-tab-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s ease;
}

.live-side-tab-toggle:hover {
  border-color: var(--accent);
  background: var(--surface);
}

.live-side-tab-toggle.active {
  background: var(--grad-primary);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px -2px var(--accent);
}

.live-hero-card {
  background: var(--surface);
  border: 1px solid var(--surface-border-color);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--elev);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.live-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.live-hero-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.01em;
}

.live-kpi-ribbon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.live-kpi-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  padding: 11px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.live-kpi-card .kpi-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.live-kpi-card .kpi-val {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 4px 0 2px;
  color: var(--text);
  line-height: 1.2;
}

.live-kpi-card .kpi-sub {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-shift-card {
  background: var(--surface);
  border: 1px solid var(--surface-border-color);
  border-radius: var(--radius);
  box-shadow: var(--elev);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.live-shift-card.is-open {
  border-left: 4px solid var(--green);
}

.live-shift-card.is-closed {
  border-left: 4px solid var(--muted);
}

.live-shift-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--surface);
  user-select: none;
  flex-wrap: wrap;
}

.live-shift-header:hover {
  background: var(--panel);
}

.live-shift-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 16px 12px;
  background: var(--panel-2);
  border-top: 1px solid var(--border);
  font-size: 0.76rem;
}

.live-shift-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
}

.live-txns-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.fuel-arrival-picker {
  display: grid;
  gap: 3px;
  margin-top: 5px;
  font-size: 11px;
  min-width: 160px;
}

.fuel-arrival-picker input[type="time"] {
  width: 160px;
  min-width: 160px;
  padding: 7px 9px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.fuel-arrival-picker button {
  justify-self: start;
}

.live-shift-awaiting-close {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--green);
  font-weight: 700;
  white-space: nowrap;
}

.pulse-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pulse-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulseDot 1.8s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.4); opacity: 1; }
}

@media (max-width: 1080px) {
  .live-layout {
    flex-direction: column;
  }
  .live-side-panel {
    width: 100%;
    max-width: none;
    position: static;
  }
}

/* ============================================================
   BASKET ANALYTICS & PUMP CONVERSION ENGINE
   ============================================================ */
.basket-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 14px;
}
@media (max-width: 900px) {
  .basket-grid-2col {
    grid-template-columns: 1fr;
  }
}

.opportunity-card {
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
  box-shadow: 0 4px 20px -8px color-mix(in srgb, var(--accent) 20%, transparent);
}
@media (max-width: 768px) {
  .opportunity-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

.opportunity-stat-badge {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent-2);
  padding: 10px 16px;
  border-radius: 12px;
  text-align: right;
  min-width: 170px;
}

.pump-island-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.pump-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.pump-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  transform: translateY(-2px);
}

.pump-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pump-rate-val {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}

.pump-progress-track {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--panel-2) 80%, transparent);
  overflow: hidden;
  margin-top: 4px;
}
.pump-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.trend-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}
.trend-bar-row:last-child {
  border-bottom: none;
}
.trend-bar-label {
  width: 44px;
  font-weight: 600;
  font-size: 13px;
}
.trend-bar-track {
  flex: 1;
  height: 9px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--panel-2) 80%, transparent);
  overflow: hidden;
}
.trend-bar-fill {
  height: 100%;
  border-radius: 5px;
  background: var(--grad-primary);
}
.trend-bar-val {
  width: 50px;
  text-align: right;
  font-weight: 700;
  font-size: 13px;
}

.recs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.rec-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
.rec-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.rec-card-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}
.rec-action-box {
  background: color-mix(in srgb, var(--panel-2) 65%, transparent);
  border-left: 3px solid var(--accent);
  padding: 8px 12px;
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.4;
}

/* Prism: shared palette. Keep this block identical in styles.css/theme-tokens.css.
   Fonts reuse the portal's existing font request, with immediate local fallbacks. */
html[data-theme="prism"] {
  --tint:#338b89; --accent:#5ee2ca; --accent-2:#b9a6ff; --accent-3:#e9c896;
  --font:"Outfit", "Avenir Next", system-ui, -apple-system, sans-serif;
  --bg:#0b1720; --panel:#142a35; --panel-2:#203946; --border:#49636e;
  --text:#edf8f7; --muted:#b3c6cd; --input-bg:#10242e; --link:#91e8d6;
  --shadow:0 16px 40px -22px #0009;
  --app-bg:radial-gradient(ellipse at 4% 5%,#30635b55,transparent 46%),radial-gradient(ellipse at 95% 40%,#71618f33,transparent 46%),linear-gradient(140deg,#0b1720,#132633 58%,#1a2530);
}
html[data-theme="prism"][data-mode="light"] {
  --accent:#146d63; --accent-2:#7050ac; --accent-3:#916625;
  --bg:#eef4f4; --panel:#f7fbfa; --panel-2:#e4eeed; --border:#a8bdbb;
  --text:#182f3a; --muted:#49626b; --input-bg:#fff; --link:#146d63;
  --shadow:0 16px 40px -24px #37576455;
  --app-bg:radial-gradient(ellipse at 4% 5%,#afdfd355,transparent 46%),radial-gradient(ellipse at 95% 40%,#d4c5ef55,transparent 46%),linear-gradient(140deg,#eef4f4,#f8faf5 58%,#e9edf5);
}
html[data-style="prism"] {
  --radius:20px; --radius-btn:12px; --radius-input:11px;
  --surface:linear-gradient(145deg,color-mix(in srgb,var(--panel-2) 93%,transparent),color-mix(in srgb,var(--panel) 97%,transparent));
  --surface-border-color:color-mix(in srgb,var(--border) 85%,transparent);
  --elev:inset 0 1px 0 #ffffff18,var(--shadow);
}

/* Theme studio is available under every look. Art is static SVG, never canvas. */
.topbar { flex-wrap:wrap; }
#themes-btn { width:38px; height:36px; padding:6px 8px; border-radius:var(--radius-btn); color:var(--muted); background:transparent; border-color:transparent; }
#themes-btn:hover, #themes-btn:focus-visible { color:var(--text); background:var(--tint-14); }
#themes-btn svg { flex:none; transform-origin:50% 65%; transition:transform .22s cubic-bezier(.2,.8,.2,1); }
@media (hover:hover) and (pointer:fine) {
  #themes-btn:hover svg { transform:translateY(-1px) rotate(-12deg) scale(1.05); }
}
#themes-btn:focus-visible svg { transform:translateY(-1px) rotate(-12deg) scale(1.05); }
#themes-btn:active svg { transform:rotate(-4deg) scale(.96); }
@media (prefers-reduced-motion:reduce) {
  #themes-btn:is(:hover,:focus-visible,:active) svg { transform:none; }
}
#themes-btn[aria-current="page"] { border-color:var(--accent); box-shadow:var(--ring); }
.themes-page { max-width:1260px; margin:12px auto 48px; }
.themes-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:28px; }
.themes-heading h2 { font-size:34px; letter-spacing:-1px; margin:8px 0; }
.themes-heading p { margin:0; }
.themes-eyebrow { font:600 10px/1.5 system-ui,sans-serif; letter-spacing:2px; color:var(--muted); }
.prism-feature { display:grid; grid-template-columns:1.1fr 1fr; min-height:390px; border:1px solid #abc9c655; border-radius:28px; position:relative; isolation:isolate; background:radial-gradient(ellipse at 80% 0,#8c78bb33,transparent 55%),radial-gradient(ellipse at 0 100%,#63c4a922,transparent 60%),#101f2b; color:#edf8f7; box-shadow:inset 0 1px 0 #effff533,0 24px 60px -35px #0008; overflow:hidden; font-family:"Outfit","Avenir Next",system-ui,sans-serif; }
.prism-copy { padding:40px 42px; z-index:1; }
.prism-edition { display:inline-block; font:600 10px/1.4 system-ui,sans-serif; letter-spacing:2px; color:#aee8db; }
.prism-copy h3 { font-family:"Space Grotesk","Avenir Next",system-ui,sans-serif; font-size:clamp(32px,3.7vw,49px); font-weight:500; line-height:1.12; letter-spacing:-1.8px; margin:19px 0 18px; color:#edf8f7; text-transform:none; }
.prism-copy p { font-size:15px; line-height:1.65; max-width:390px; color:#bcd2d9; margin:0 0 18px; }
.prism-copy strong { color:#ecfaf5; }
.prism-traits { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
.prism-traits span { border:1px solid #9ac2ba44; color:#c9deda; border-radius:999px; padding:5px 10px; font:11px/1.3 system-ui,sans-serif; }
.prism-feature .prism-apply { background:linear-gradient(110deg,#b0f0db,#c5c3f1); color:#17352f; border:1px solid #e5ffed99; box-shadow:0 8px 22px -12px #a2f7dc77; font:700 14px/1.5 system-ui,sans-serif; padding:11px 20px; border-radius:12px; text-transform:none; letter-spacing:0; }
.prism-feature .prism-apply:hover { background:linear-gradient(110deg,#c8f7e6,#ddd6ff); }
.prism-copy .prism-footnote { font:11px/1.5 system-ui,sans-serif; color:#bcd2d9; margin:13px 0 0; }
.prism-art { position:relative; min-height:390px; display:grid; place-items:center; }
.prism-orbit { position:absolute; width:320px; height:320px; border:1px solid #accfcd22; border-radius:50%; box-shadow:0 0 0 30px #b9b6e509,0 0 0 65px #b9b6e505; }
.prism-crystal { position:absolute; width:330px; height:290px; top:5px; transform:rotate(-9deg); filter:drop-shadow(0 20px 35px #080f2366); }
.prism-specimen { position:relative; margin:195px 30px 24px 0; width:min(310px,85%); padding:21px; border:1px solid #c6edea66; border-radius:18px; background:linear-gradient(125deg,#355565ed,#203044f5); transform:rotate(-4deg); box-shadow:inset 0 1px 0 #ffffff33,0 25px 35px -25px #000; }
.prism-specimen-label { font:9px/1.5 system-ui,sans-serif; letter-spacing:2px; color:#c5d6e0; }
.prism-specimen-title { display:flex; justify-content:space-between; gap:12px; margin:12px 0 19px; font-size:17px; font-weight:500; color:#f1f8fb; }
.prism-specimen-title span { color:#e9c896; }
.prism-sample-row { display:flex; align-items:center; gap:10px; font:12px/1.5 system-ui,sans-serif; color:#d5e2e8; padding:9px 0; border-top:1px solid #ffffff18; }
.prism-sample-row span:last-child { margin-left:auto; color:#b9cbd5; font-variant-numeric:tabular-nums; }
.prism-sample-dot { width:6px; height:6px; border-radius:50%; background:#5ee2ca; }
.prism-sample-dot.violet { background:#b9a6ff; }
.themes-appearance { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin:28px 0 36px; padding:22px 24px; background:var(--surface); border:1px solid var(--border); border-radius:18px; }
.themes-appearance h3 { margin:0; font-size:17px; }
.themes-appearance p { margin:6px 0 0; line-height:1.5; }
.themes-appearance .seg { margin:0; box-shadow:none; flex-shrink:0; }
.themes-collection-head { display:flex; justify-content:space-between; align-items:end; flex-wrap:wrap; gap:16px; margin-bottom:22px; }
.themes-collection-head h3 { margin:6px 0 0; font-size:23px; letter-spacing:-.5px; }
.themes-search { display:flex; flex-direction:column; gap:6px; width:240px; max-width:100%; }
.themes-page .theme-grid { gap:18px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.themes-page .theme-swatch { min-height:155px; }
.themes-page .theme-swatch.active .theme-swatch-inner { padding-top:32px !important; }
.themes-page .theme-swatch .check { background:var(--accent); color:var(--bg); }

/* Prism uses inexpensive layered fills on repeated surfaces. Only the sticky bar
   and one modal receive blur. No blur on tables, no permanent layer promotion. */
html[data-style="prism"] body::before, html[data-style="prism"] body::after { display:none; }
html[data-style="prism"] .topbar { background:color-mix(in srgb,var(--panel) 94%,transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom-color:var(--surface-border-color); }
html[data-style="prism"] .card { will-change:auto; }
html[data-style="prism"] .card, html[data-style="prism"] .stat, html[data-style="prism"] .shift, html[data-style="prism"] .theme-swatch { backdrop-filter:none; -webkit-backdrop-filter:none; }
html[data-style="prism"] .modal { background:var(--surface); box-shadow:inset 0 1px 0 #ffffff22,0 30px 90px -35px #0009; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
html[data-theme="prism"] h2, html[data-theme="prism"] h3, html[data-theme="prism"] .brand { font-family:"Space Grotesk","Avenir Next",system-ui,sans-serif; }
html[data-theme="prism"] table, html[data-theme="prism"] input { font-variant-numeric:tabular-nums; }
html[data-theme="prism"] .btn.primary, html[data-theme="prism"] .btn.info, html[data-theme="prism"] .seg button.active { color:#182d35; }
html[data-theme="prism"][data-mode="light"] .btn.primary, html[data-theme="prism"][data-mode="light"] .btn.info, html[data-theme="prism"][data-mode="light"] .seg button.active { color:#fff; }
html[data-theme="prism"] .brand { background:none; color:var(--text); }
html[data-style="prism"] :is(button,a,input,select,textarea):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media (prefers-reduced-motion:no-preference) {
  html[data-style="prism"] #content { animation:prism-arrive .3s ease-out both; }
  .prism-crystal { animation:prism-reveal .65s ease-out both; }
  .prism-specimen { animation:prism-specimen-reveal .55s ease-out both; }
  @keyframes prism-arrive { from { opacity:.4; transform:translateY(5px); } to { opacity:1; transform:none; } }
  @keyframes prism-reveal { from { opacity:0; transform:translateY(12px) rotate(-5deg); } to { opacity:1; transform:rotate(-9deg); } }
  @keyframes prism-specimen-reveal { from { opacity:0; transform:translateY(8px) rotate(-2deg); } to { opacity:1; transform:rotate(-4deg); } }
}
@media (max-width:760px) {
  .prism-copy { padding:28px; }
  .prism-feature { grid-template-columns:1fr; }
  .prism-art { min-height:280px; }
  .prism-crystal { top:-20px; width:275px; height:245px; }
  .prism-orbit { width:230px; height:230px; }
  .prism-specimen { margin:135px 0 20px; }
  .topbar { padding:10px 12px; gap:8px; }
  .topbar .brand { flex:1 0 calc(100% - 145px); font-size:14px; }
  .topbar .spacer { display:none; }
  .topbar #user-chip, .topbar #users-btn, .topbar #logout-btn { order:2; }
  .topbar .crumbs { order:3; flex-basis:100%; }
  .topbar #user-chip { margin-right:auto; max-width:calc(100% - 160px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .topbar #users-btn, .topbar #logout-btn { font-size:12px; padding:6px 8px; }
}
@media (max-width:520px) {
  .themes-page { margin-top:4px; }
  .themes-heading { margin-bottom:18px; }
  .themes-heading h2 { font-size:28px; }
  .prism-copy { padding:26px 22px 12px; }
  .prism-copy h3 { font-size:34px; }
  .themes-appearance { padding:20px; }
  .themes-page .theme-grid { grid-template-columns:minmax(0,1fr); }
  .themes-search { width:100%; }
  .themes-page .theme-swatch { min-height:145px; }
}
@media (prefers-reduced-motion:reduce) {
  #themes-btn svg, .prism-crystal, .prism-specimen, html[data-style="prism"] #content { animation:none !important; transition:none !important; }
  html[data-style="prism"] *, html[data-style="prism"] *::before, html[data-style="prism"] *::after { animation:none !important; transition:none !important; }
  html[data-style="prism"] .btn:hover, html[data-style="prism"] .card:hover, html[data-style="prism"] .theme-swatch:hover { transform:none; }
}


/* Prism pointer: an inline faceted gem, with a precise tip and native text fields. */
html[data-theme="prism"] { --cur-hand:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2228%22%20viewBox%3D%220%200%2024%2028%22%3E%3Cpath%20d%3D%22M12%203%2021%2012%2012%2025%203%2012Z%22%20fill%3D%22%23152c36%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M12%203%2021%2012%2012%2025%203%2012Z%22%20fill%3D%22%23b9a6ff%22%20stroke%3D%22%23173c42%22%20stroke-width%3D%221%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22m12%203%201%2010-10-1Z%22%20fill%3D%22%238df0d9%22%2F%3E%3Cpath%20d%3D%22m12%203%209%209-8%201Z%22%20fill%3D%22%23f1dab1%22%2F%3E%3Cpath%20d%3D%22m3%2012%2010%201-1%2012Z%22%20fill%3D%22%235edac8%22%2F%3E%3Cpath%20d%3D%22m12%203%201%2010%208-1M3%2012l10%201-1%2012%22%20fill%3D%22none%22%20stroke%3D%22%23f4fffa%22%20stroke-width%3D%22.8%22%2F%3E%3C%2Fsvg%3E") 12 3; }
html[data-theme="prism"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="prism"] textarea, html[data-theme="prism"] [contenteditable="true"] { cursor:text !important; }
html[data-theme="prism"] :disabled { cursor:not-allowed !important; }

/* A six-pixel decoration lane in the existing right padding: content begins
   farther inward (card 18px / shift 16px / stat >=10px). No center overlays,
   hit targets, layout changes, per-card listeners, blur or idle animation. */
@media (hover:hover) and (pointer:fine) {
  html[data-style="prism"] :is(.card:not(.add-card):not(:has(table)):not([style*="padding:0"]):not([style*="padding: 0"]),.shift,.stat)::after {
    content:""; position:absolute; top:18px; bottom:18px; right:3px; width:6px;
    pointer-events:none; opacity:0;
    background:linear-gradient(180deg,var(--accent),var(--accent-2) 55%,var(--accent-3));
    -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%22140%22%20viewBox%3D%220%200%206%20140%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%22.8%22%3E%3Cpath%20d%3D%22m3%2011%202.5%206L3%2023%20.5%2017Z%20M3%2011v12M.5%2017h5%22%2F%3E%3Cpath%20d%3D%22M3%2065v6M0%2068h6%22%2F%3E%3Cpath%20d%3D%22m3%20113%202.5%206-2.5%206-2.5-6Z%20M3%20113v12M.5%20119h5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / 6px 140px no-repeat;
    mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%22140%22%20viewBox%3D%220%200%206%20140%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%22.8%22%3E%3Cpath%20d%3D%22m3%2011%202.5%206L3%2023%20.5%2017Z%20M3%2011v12M.5%2017h5%22%2F%3E%3Cpath%20d%3D%22M3%2065v6M0%2068h6%22%2F%3E%3Cpath%20d%3D%22m3%20113%202.5%206-2.5%206-2.5-6Z%20M3%20113v12M.5%20119h5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / 6px 140px no-repeat;
    transition:opacity .2s ease; transform:none;
  }
  html[data-style="prism"] :is(.card:not(.add-card):not(:has(table)):not([style*="padding:0"]):not([style*="padding: 0"]),.shift,.stat):is(:hover,:focus-within)::after { opacity:.55; }
}
@media (prefers-reduced-motion:reduce) {
  html[data-style="prism"] :is(.card,.shift,.stat)::after { transition:none !important; }
}

/* Glacier: keep shared palette/style tokens identical for desktop and companion. */
html[data-theme="glacier"] {
  --tint:#498dc3; --accent:#82d5ff; --accent-2:#a8baff; --accent-3:#d6efff;
  --font:"Avenir Next","Segoe UI",system-ui,sans-serif;
  --bg:#081b30; --panel:#14314a; --panel-2:#244860; --border:#658399;
  --text:#eff8ff; --muted:#b6cede; --input-bg:#10283f; --link:#a8ddff;
  --shadow:0 18px 40px -26px #000b;
  --app-bg:radial-gradient(ellipse at 0 0,#36779a66,transparent 52%),radial-gradient(ellipse at 100% 65%,#5369a644,transparent 52%),linear-gradient(135deg,#081b30,#122f48 58%,#18243e);
}
html[data-theme="glacier"][data-mode="light"] {
  --accent:#166596; --accent-2:#4d5aab; --accent-3:#3b6f88;
  --bg:#e4eff7; --panel:#f5fbff; --panel-2:#dcebf5; --border:#9db8cc;
  --text:#17334a; --muted:#48667c; --input-bg:#f8fcff; --link:#125e91;
  --shadow:0 18px 40px -26px #305b8055;
  --app-bg:radial-gradient(ellipse at 0 0,#b6e0f599,transparent 52%),radial-gradient(ellipse at 100% 65%,#c3cbed77,transparent 52%),linear-gradient(135deg,#e4eff7,#f5fbff 58%,#e4eafa);
}
html[data-style="glacier"] {
  --radius:24px; --radius-btn:14px; --radius-input:12px;
  --surface:linear-gradient(125deg,color-mix(in srgb,var(--panel-2) 88%,transparent),color-mix(in srgb,var(--panel) 93%,transparent) 60%,color-mix(in srgb,var(--panel-2) 85%,transparent));
  --surface-border-color:color-mix(in srgb,var(--border) 85%,transparent);
  --elev:inset 0 1px 0 #ffffff40,inset 1px 0 0 #ffffff12,var(--shadow);
}

/* Glacier uses layered fills on repeated elements; only bar/dialog blur. */
html[data-style="glacier"] body::before, html[data-style="glacier"] body::after { display:none; }
html[data-style="glacier"] :is(.card,.stat,.shift,.settings-sec,.themes-appearance,.theme-swatch,.fuel-billing-review) { background:var(--surface); border-color:var(--surface-border-color); box-shadow:var(--elev); backdrop-filter:none; -webkit-backdrop-filter:none; will-change:auto; }
html[data-style="glacier"] :is(.card,.stat,.shift) { border-radius:var(--radius); }
html[data-style="glacier"] .card::before { height:1px; background:linear-gradient(90deg,transparent,#ffffffb0,transparent); }
html[data-style="glacier"] .topbar { background:color-mix(in srgb,var(--panel) 88%,transparent); border-bottom-color:var(--border); box-shadow:0 4px 28px -20px #0009,inset 0 -1px 0 #ffffff15; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
html[data-style="glacier"] .modal { background:color-mix(in srgb,var(--panel) 96%,transparent); border:1px solid var(--border); border-radius:24px; box-shadow:inset 0 1px 0 #ffffff55,0 30px 80px -25px #0009; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
html[data-style="glacier"] :is(input,select,textarea) { background-color:var(--input-bg); color:var(--text); border-color:var(--border); box-shadow:inset 0 2px 5px #0000000c; }
html[data-style="glacier"] select option { background:var(--panel); color:var(--text); }
html[data-style="glacier"] :is(.tabs,.seg) { background:color-mix(in srgb,var(--panel) 85%,transparent); border-radius:16px; }
html[data-style="glacier"] :is(.tab.active,.seg button.active) { background:var(--grad-primary); color:#102e46; box-shadow:inset 0 1px 0 #ffffff70,0 4px 12px -8px #0008; }
html[data-theme="glacier"][data-mode="light"] :is(.tab.active,.seg button.active,.btn.primary,.btn.info) { color:#fff; }
html[data-theme="glacier"] :is(.btn.primary,.btn.info) { color:#102e46; }
html[data-style="glacier"] .btn { box-shadow:inset 0 1px 0 #ffffff30,0 4px 12px -9px #0008; }
html[data-style="glacier"] table { background:color-mix(in srgb,var(--panel) 72%,transparent); border-radius:14px; font-variant-numeric:tabular-nums; }
html[data-style="glacier"] th { background:var(--panel-2); color:var(--text); }
html[data-style="glacier"] td { border-color:color-mix(in srgb,var(--border) 48%,transparent); }
html[data-style="glacier"] tbody tr:hover { background:color-mix(in srgb,var(--accent) 10%,var(--panel)); }
html[data-style="glacier"] :is(.badge,.chip) { box-shadow:inset 0 1px 0 #ffffff30; border-radius:999px; }
html[data-theme="glacier"] :is(h2,h3,.brand) { font-family:"Avenir Next","Segoe UI",system-ui,sans-serif; letter-spacing:-.035em; }
html[data-theme="glacier"] .brand { background:none; color:var(--text); }
html[data-style="glacier"] :is(button,a,input,select,textarea,summary):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
html[data-theme="glacier"] { --cur-hand:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='30' viewBox='0 0 26 30'%3E%3Cpath d='M4 3L22 16 14 18 10 26Z' fill='%2394daff' stroke='white' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M4 3L22 16 14 18 10 26Z' fill='%2394daff' stroke='%23244860' stroke-width='1'/%3E%3Cpath d='M4 3L14 18 22 16' fill='%23e5f7ff'/%3E%3C/svg%3E") 4 3; }
html[data-theme="glacier"] :is(input:not([type="checkbox"]):not([type="radio"]),textarea,[contenteditable="true"]) { cursor:text !important; }
html[data-theme="glacier"] :disabled { cursor:not-allowed !important; }
@media (hover:hover) and (pointer:fine) {
  html[data-style="glacier"] :is(.card,.stat,.shift):hover { box-shadow:inset 0 1px 0 #ffffff75,inset -2px 0 0 var(--accent-2),var(--shadow); }
}
@media (prefers-reduced-motion:no-preference) {
  html[data-style="glacier"] #content { animation:glacier-enter .28s ease-out both; }
  @keyframes glacier-enter { from { opacity:.5; transform:translateY(4px); } to { opacity:1; transform:none; } }
}
@media (prefers-reduced-motion:reduce) {
  html[data-style="glacier"] *,html[data-style="glacier"] *::before,html[data-style="glacier"] *::after { animation:none !important; transition:none !important; }
  html[data-style="glacier"] :is(.card,.btn,.theme-swatch):hover { transform:none; }
}
/* Static gallery sculpture — all lettering is explicitly a design preview. */
.glacier-feature { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border-radius:28px; margin-bottom:24px; background:radial-gradient(ellipse at 85% 30%,#7297c766,transparent 60%),linear-gradient(125deg,#112d45,#203e5a); border:1px solid #7296b0; color:#f2faff; box-shadow:inset 0 1px 0 #ffffff66,0 22px 44px -35px #0008; }
.glacier-copy { padding:42px; }
.glacier-copy .themes-eyebrow { color:#b4d4ed; }
.glacier-copy h3 { font:500 clamp(36px,4vw,54px)/1.06 "Avenir Next",system-ui,sans-serif; letter-spacing:-2px; margin:22px 0; color:#f2faff; }
.glacier-copy p { color:#c2d8e9; line-height:1.65; }
.glacier-copy .btn.primary { background:linear-gradient(125deg,#e2f7ff,#9dc9ee); color:#153951 !important; border:1px solid #ffffff88; margin:10px 0; }
.glacier-art { position:relative; min-height:390px; display:grid; place-items:center; }
.glacier-pane { width:275px; height:295px; border-radius:28px; border:1px solid #dff5ffa0; background:linear-gradient(135deg,#d6f1ff44,#83b5df12 52%,#d8e8ff30); box-shadow:inset 0 1px 0 #fff8,0 25px 45px -30px #030e27; }
.glacier-pane-back { position:absolute; transform:translate(25px,-18px) rotate(12deg); }
.glacier-pane-front { position:relative; transform:rotate(-7deg); padding:28px; background:linear-gradient(125deg,#487498ee,#234360f5); }
.glacier-pane-front>span,.glacier-pane-front small { font:10px/1.5 system-ui,sans-serif; letter-spacing:1.6px; color:#c6e4f6; }
.glacier-pane-front strong { display:block; font:500 29px/1.18 "Avenir Next",system-ui,sans-serif; letter-spacing:-1px; margin:28px 0; }
.glacier-art-line { height:1px; background:linear-gradient(90deg,#ecfaff88,transparent); }
.glacier-art-dots { display:flex; gap:10px; margin:18px 0; }
.glacier-art-dots i { width:18px; height:18px; border-radius:50%; background:#abdfff; box-shadow:inset 0 1px 2px #fff; }
.glacier-art-dots i:nth-child(2) { background:#b4bfea; }.glacier-art-dots i:nth-child(3) { background:#e8f5ff; }
@media(max-width:760px) { .glacier-feature { grid-template-columns:1fr; }.glacier-copy { padding:28px; }.glacier-art { min-height:350px; }.glacier-pane { width:250px; height:280px; } }
html[data-theme="glacier"][data-mode="dark"] { color-scheme:dark; }
html[data-theme="glacier"][data-mode="light"] { color-scheme:light; }
html[data-style="glacier"] .tab:not(.active) { background:transparent; color:var(--muted); border-color:transparent; }
html[data-theme="glacier"][data-mode="dark"] .toast:not(.err) { color:#102e46; }
html[data-style="glacier"] .btn:disabled { opacity:.5; box-shadow:none; transform:none; }

/* Tank outlook: scoped independently from fuel reconciliation. */
.fuel-outlook { padding:24px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--elev); }
.fuel-outlook-head { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.fuel-outlook-eyebrow { font-size:10px; font-weight:700; letter-spacing:.15em; color:var(--muted); }
.fuel-outlook-head h3 { margin:6px 0; font-size:25px; letter-spacing:-.03em; }
.fuel-outlook-head p { margin:0; font-size:13px; }
.fuel-outlook-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.fuel-outlook-tools .seg button { font-size:12px; padding:7px 11px; }
.fuel-outlook-method,.fuel-outlook-footnote { font-size:11px; color:var(--muted); line-height:1.6; }
.fuel-outlook-method { margin:18px 0 14px; }
.fuel-outlook-footnote { margin:16px 0 0; max-width:1000px; }
.fuel-outlook-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start; }
.fuel-outlook-card { --grade-color:var(--accent); --outlook-status:var(--muted); min-width:0; border:1px solid var(--border); border-radius:18px; padding:20px; background:linear-gradient(145deg,color-mix(in srgb,var(--panel-2) 75%,transparent),var(--panel)); box-shadow:inset 0 1px 0 #ffffff20; }
.fuel-outlook-card[data-grade="premium"] { --grade-color:var(--accent-2); }
.fuel-outlook-card[data-grade="diesel"] { --grade-color:var(--accent-3); }
.fuel-outlook-card[data-status="critical"] { --outlook-status:var(--red); }
.fuel-outlook-card[data-status="warning"] { --outlook-status:var(--amber); }
.fuel-outlook-card[data-status="ok"] { --outlook-status:var(--green); }
.fuel-outlook-card-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.fuel-outlook-card h4 { display:flex; align-items:center; gap:8px; margin:0; font-size:16px; }
.fuel-grade-dot { width:8px; height:8px; border-radius:50%; background:var(--grade-color); }
.fuel-outlook-status { color:var(--outlook-status); background:color-mix(in srgb,var(--outlook-status) 10%,var(--panel)); border:1px solid color-mix(in srgb,var(--outlook-status) 35%,var(--border)); padding:4px 8px; font-size:10px; font-weight:600; border-radius:999px; }
.fuel-outlook-hero { display:flex; align-items:center; gap:13px; margin:24px 0 12px; }
.fuel-outlook-hero>strong { font-size:48px; line-height:1; font-weight:600; letter-spacing:-.055em; font-variant-numeric:tabular-nums; }
.fuel-outlook-hero span { font-size:12px; font-weight:600; }.fuel-outlook-hero small { display:block; font-size:10px; color:var(--muted); margin-top:5px; }
.fuel-outlook-action { font-size:12px; line-height:1.6; color:var(--muted); min-height:58px; margin:0 0 20px; }
.fuel-outlook-stock { display:flex; justify-content:space-between; gap:8px; align-items:baseline; font-size:12px; }
.fuel-outlook-stock b { font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; }
.fuel-outlook-stock small,.fuel-outlook-metrics small { color:var(--muted); font-size:11px; font-weight:400; }
.fuel-outlook-gauge { height:12px; position:relative; border-radius:5px; background:var(--input-bg); border:1px solid var(--border); margin:10px 0 7px; overflow:hidden; }
.fuel-outlook-gauge>span { display:block; height:100%; background:linear-gradient(90deg,var(--grade-color),color-mix(in srgb,var(--grade-color) 65%,white)); }
.fuel-outlook-gauge>i { position:absolute; height:100%; top:0; border-left:2px solid var(--text); }
.fuel-outlook-gauge.unknown { border-style:dashed; }
.fuel-outlook-gauge-labels { display:flex; justify-content:space-between; gap:10px; font-size:10px; color:var(--muted); }
.fuel-outlook-metrics { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0; padding:16px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.fuel-outlook-metrics dt { font-size:10px; color:var(--muted); margin-bottom:5px; }.fuel-outlook-metrics dd { margin:0; font-size:19px; font-weight:600; font-variant-numeric:tabular-nums; }
.fuel-outlook-history-head { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:10px; }
.fuel-outlook-bars { display:flex; gap:7px; margin:12px 0 18px; }
.fuel-outlook-bar { flex:1; min-width:0; text-align:center; }.fuel-outlook-bar small { font-size:9px; color:var(--muted); }
.fuel-outlook-bar-track { height:36px; display:flex; align-items:flex-end; border-radius:3px; overflow:hidden; background:var(--input-bg); }.fuel-outlook-bar-track>span { width:100%; background:color-mix(in srgb,var(--grade-color) 60%,var(--panel)); border-top:1px solid var(--grade-color); }.fuel-outlook-bar-track.missing { border:1px dashed var(--border); }
.fuel-outlook-details { padding-top:12px; border-top:1px solid var(--border); font-size:11px; color:var(--muted); line-height:1.6; }.fuel-outlook-details summary { color:var(--text); cursor:pointer; }.fuel-outlook-details dl>div { margin:9px 0; }.fuel-outlook-details dt { font-weight:600; }.fuel-outlook-details dd { margin:0; }.fuel-outlook-details p { margin-bottom:0; }
.outlook-limits-form fieldset { display:grid; grid-template-columns:1fr 1fr; gap:14px; border:1px solid var(--border); border-radius:12px; margin:12px 0; }.outlook-limits-form legend { text-transform:capitalize; }.outlook-limits-form label { display:grid; gap:6px; font-size:12px; }.outlook-limits-form input { width:100%; min-width:0; }.fuel-outlook-dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
@media(max-width:1100px) { .fuel-outlook-grid { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); } }
@media(max-width:600px) { .fuel-outlook { padding:16px; }.fuel-outlook-grid { grid-template-columns:minmax(0,1fr); }.fuel-outlook-tools { width:100%; }.fuel-outlook-hero>strong { font-size:44px; } }

/* Every preset gets the same compact showcase, using its own palette and font. */
.themes-page .themes-heading { margin-bottom:18px; }
.themes-page .themes-appearance { margin:0 0 24px; padding:16px 20px; }
.themes-page .theme-grid { grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px; }
.themes-page .theme-swatch { padding:0; min-height:0; display:block; text-align:left; overflow:hidden; border-radius:18px; }
.theme-showcase { width:100%; height:100%; display:flex; flex-direction:column; }
.theme-showcase-art { position:relative; height:133px; flex:none; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 85% 10%,color-mix(in srgb,var(--preview-b) 28%,transparent),transparent 65%),linear-gradient(135deg,var(--preview-bg),var(--preview-panel)); color:var(--preview-text); }
.theme-showcase-orbit { position:absolute; width:150px; height:150px; border:1px solid color-mix(in srgb,var(--preview-a) 30%,transparent); border-radius:50%; right:24px; top:5px; box-shadow:0 0 0 22px color-mix(in srgb,var(--preview-b) 6%,transparent); }
.theme-showcase-pane { position:absolute; width:125px; height:100px; right:26%; top:12px; border:1px solid color-mix(in srgb,var(--preview-text) 35%,transparent); border-radius:15px; background:linear-gradient(135deg,color-mix(in srgb,var(--preview-a) 17%,var(--preview-panel)),var(--preview-panel)); box-shadow:inset 0 1px 0 #ffffff40,0 12px 25px -18px #0008; }
.theme-showcase-pane.back { transform:translate(33px,3px) rotate(13deg); opacity:.6; }
.theme-showcase-pane.front { transform:rotate(-7deg); display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:12px; gap:8px; }
.theme-showcase-type { font:500 35px/1 var(--preview-font); letter-spacing:-2px; }
.theme-showcase-lines i { display:block; height:3px; border-radius:3px; background:var(--preview-text); opacity:.35; margin:7px 0; }.theme-showcase-lines i:last-child { width:65%; }
.theme-showcase-mini-button { height:12px; width:44px; border-radius:5px; background:linear-gradient(90deg,var(--preview-a),var(--preview-b)); }
.theme-showcase-caption { position:absolute; bottom:9px; left:14px; font:600 8px/1.3 system-ui,sans-serif; letter-spacing:1px; opacity:.8; }
.theme-showcase-art[data-look="flat"] .theme-showcase-pane,.theme-showcase-art[data-look="retro"] .theme-showcase-pane { border-radius:2px; box-shadow:4px 4px 0 color-mix(in srgb,var(--preview-a) 40%,transparent); transform:none; }
.theme-showcase-art[data-look="liquid"] .theme-showcase-pane { border-radius:30px 14px 30px 14px; }
.theme-showcase-art[data-look="neu"] .theme-showcase-pane { background:var(--preview-panel); box-shadow:6px 6px 12px #0003,-3px -3px 12px #ffffff20; border-color:transparent; }
.theme-showcase-art[data-look="arabesque"] .theme-showcase-orbit { border-radius:8px; transform:rotate(45deg); border-style:double; border-width:3px; }
.theme-showcase-copy { padding:16px; flex:1; display:flex; flex-direction:column; background:var(--panel); color:var(--text); }
.theme-showcase-title { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:15px; font-weight:700; }
.theme-showcase-title>span:first-child { min-width:0; }.theme-showcase-select { flex:none; font:600 10px/1.4 system-ui,sans-serif; color:var(--link); }
.theme-showcase-copy p { font-size:12px; font-weight:400; line-height:1.5; color:var(--muted); margin:7px 0 10px; min-height:36px; }
.theme-showcase-font { font-size:10px; font-weight:400; color:var(--muted); margin-top:auto; padding-bottom:12px; }
.theme-showcase-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid var(--border); padding-top:10px; font-size:10px; font-weight:400; color:var(--muted); }
.theme-showcase-palette { display:flex; gap:5px; }.theme-showcase-palette i { width:14px; height:14px; border-radius:50%; box-shadow:inset 0 0 0 1px #ffffff30; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) { .theme-showcase-pane.front { transition:transform .2s ease; }.theme-swatch:hover .theme-showcase-pane.front { transform:translateY(-3px) rotate(-3deg); } }
@media (prefers-reduced-motion:reduce) { .themes-page .theme-swatch { transition:none; }.themes-page .theme-swatch:hover { transform:none; } }
@media(max-width:600px) { .themes-page .theme-grid { grid-template-columns:minmax(0,1fr); }.theme-showcase-art { height:120px; } }

/* Mario: readable Mushroom Kingdom palette, shared with companion. */
html[data-theme="mario"] {
  --tint:#2675d8; --accent:#ff7368; --accent-2:#85b8ff; --accent-3:#fcd116;
  --font:"Rubik","Outfit",system-ui,sans-serif;
  --bg:#101c32; --panel:#182a43; --panel-2:#223b59; --border:#526d8d;
  --text:#f1f6ff; --muted:#b6c8de; --input-bg:#122238; --link:#a2caff;
  --app-bg:radial-gradient(ellipse at 15% 0,#2675d822,transparent 55%),linear-gradient(150deg,#101c32,#152a42);
}
html[data-theme="mario"][data-mode="light"] {
  --accent:#b92320; --accent-2:#185ba6; --accent-3:#287632;
  --bg:#e8f4fc; --panel:#ffffff; --panel-2:#eef6fc; --border:#a7bdce;
  --text:#172c46; --muted:#4b6177; --input-bg:#ffffff; --link:#185ba6;
  --app-bg:radial-gradient(ellipse at 15% 0,#89c9ff33,transparent 55%),linear-gradient(150deg,#e8f4fc,#f5f9ed);
}

/* No characters/watermarks in data surfaces. Mario identity stays at the edges. */
html[data-theme="mario"] :is(.card,.stat,.modal,.login-card,.station-card .sc-balance)::after { content:none !important; display:none !important; }
html[data-theme="mario"] body::before,html[data-theme="mario"] body::after { display:none; }
html[data-theme="mario"] :is(h1,h2,h3,h4,.brand,.month-bar .title) { background:none; -webkit-text-fill-color:currentColor; color:var(--text); animation:none; font-family:"Rubik","Outfit",system-ui,sans-serif; font-weight:700; }
html[data-theme="mario"] .brand::before { content:"🍄"; display:inline-block; margin-right:7px; animation:none; -webkit-text-fill-color:initial; }
html[data-theme="mario"] :is(.card,.stat,.modal,.login-card,.fuel-outlook-card) { border-radius:12px; border:1px solid var(--border); background:var(--surface); box-shadow:inset 0 1px 0 #ffffff20,0 5px 0 -3px color-mix(in srgb,var(--border) 65%,transparent); }
html[data-theme="mario"] .card::before { content:""; height:3px; background:linear-gradient(90deg,#e52521 0 25%,#2675d8 25% 50%,#fcd116 50% 75%,#299844 75%); pointer-events:none; }
html[data-theme="mario"] :is(.card,.stat):hover { transform:none; border-color:var(--accent-2); box-shadow:inset 0 1px 0 #ffffff30,0 5px 0 -3px var(--accent-2); }
html[data-theme="mario"] :is(.btn.primary,.login-submit,.tab.active,.pill.active,.seg button.active) { background:#b92320; color:#fff; border:1px solid #f4746e; border-radius:9px; box-shadow:0 3px 0 #721c20; animation:none; }
html[data-theme="mario"] .btn.info { background:#185ba6; color:#fff; }
html[data-theme="mario"] :is(.btn.primary,.login-submit)::after { content:none; }
html[data-theme="mario"] :is(button,a,input,select,textarea,summary):focus-visible { outline:2px solid var(--accent-2); outline-offset:3px; }
html[data-theme="mario"] :is(input,select,textarea) { border-radius:8px; }
html[data-theme="mario"][data-mode="dark"] { color-scheme:dark; }
html[data-theme="mario"][data-mode="light"] { color-scheme:light; }
html[data-theme="mario"] input:not([type="checkbox"]):not([type="radio"]),html[data-theme="mario"] textarea { cursor:text !important; }
html[data-theme="mario"] :disabled { cursor:not-allowed !important; }
html[data-theme="mario"] .toast:not(.err) { background:#185ba6; color:#fff; }
@media(prefers-reduced-motion:reduce) { html[data-theme="mario"] *,html[data-theme="mario"] *::before,html[data-theme="mario"] *::after { animation:none !important; transition:none !important; } }

/* Theme performance budget: repeated surfaces stay static and unpromoted.
   Preserve functional loading/live indicators; only decorative theme targets stop. */
html[data-theme] body { background-attachment:scroll !important; }
html[data-theme] body::before,html[data-theme] body::after { display:none !important; }
html[data-theme] :is(.card,.stat,.shift,.theme-swatch,.sc-balance,.brand,h1,h2,h3,h4,.month-bar .title,.tab,.pill),
html[data-theme] :is(.card,.stat,.shift,.theme-swatch,.sc-balance,.brand,h1,h2,h3,h4,.month-bar .title,.tab,.pill)::before,
html[data-theme] :is(.card,.stat,.shift,.theme-swatch,.sc-balance,.brand,h1,h2,h3,h4,.month-bar .title,.tab,.pill)::after {
  animation:none !important; will-change:auto !important;
}
html[data-theme] :is(.card,.stat,.shift,.theme-swatch,.sc-balance,.tab,.pill,table,td,th) {
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  transition-property:transform,border-color,background-color,color,opacity !important;
}
html[data-theme] :is(.card,.stat,.shift,.sc-balance)::after { filter:none !important; transition-property:opacity !important; }
html[data-theme] .topbar { background:color-mix(in srgb,var(--panel) 97%,transparent); backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
html[data-theme] .modal-backdrop { backdrop-filter:none; -webkit-backdrop-filter:none; }
html[data-theme="sakura"] :is(input:not([type="checkbox"]):not([type="radio"]),textarea) { cursor:text !important; }
html[data-theme="sakura"] :disabled { cursor:not-allowed !important; }
/* Four shallow, full-width features reuse the existing preview/selection path. */
.theme-latest { margin:0 0 24px; }
#theme-latest-list { display:grid; gap:12px; margin-top:12px; }
.themes-page .theme-featured { width:100%; }
.theme-featured .theme-showcase { flex-direction:row-reverse; }
.theme-featured .theme-showcase-art { width:210px; height:140px; }
.theme-featured .theme-showcase-copy { padding:14px 20px; min-width:0; }
.theme-featured .theme-showcase-copy p { min-height:0; margin:6px 0; }
.theme-featured .theme-showcase-font { padding-bottom:6px; }
.theme-featured .theme-showcase-footer { padding-top:6px; }
.theme-featured .theme-showcase-title { font-size:18px; }
.theme-featured .theme-showcase-select { border:1px solid var(--border); border-radius:8px; padding:5px 10px; }
@media(max-width:600px) {
  .theme-featured .theme-showcase-art { width:88px; height:auto; min-height:165px; }
  .theme-featured .theme-showcase-pane { right:-45px; top:30px; }
  .theme-featured .theme-showcase-caption { display:none; }
  .theme-featured .theme-showcase-copy { padding:12px; }
  .theme-featured .theme-showcase-title { font-size:14px; flex-wrap:wrap; gap:6px; }
}

/* Saved product research: source-first, no animated metrics or speculative margins. */
.discovery-page { max-width:1400px; margin:auto; }
.discovery-header { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
.discovery-header h2 { margin:7px 0; }.discovery-header p { margin:0; font-size:15px; }
.discovery-notice { padding:14px 18px; border:1px solid var(--border); border-radius:12px; background:var(--surface); font-size:12px; line-height:1.6; }
.discovery-notice details { margin-top:5px; color:var(--muted); }.discovery-last { line-height:1.7; }
.discovery-toolbar { display:flex; align-items:end; flex-wrap:wrap; gap:12px; margin:22px 0 14px; }
.discovery-toolbar label { display:grid; gap:6px; font-size:11px; color:var(--muted); }.discovery-toolbar label:first-child { flex:1; min-width:180px; }.discovery-toolbar input,.discovery-toolbar select { width:100%; }
.discovery-count { margin-bottom:14px; }.discovery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:18px; align-items:start; }
.discovery-product { overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.discovery-photo { height:200px; position:relative; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:1px solid var(--border); }
.discovery-photo img { max-width:100%; max-height:100%; object-fit:contain; padding:12px; box-sizing:border-box; }
.discovery-photo-credit { position:absolute; right:8px; bottom:6px; font-size:10px; color:#555; background:#ffffffd9; border-radius:6px; padding:1px 6px; }
.discovery-photo-credit a { color:inherit; }
.discovery-art { height:160px; display:flex; align-items:center; justify-content:center; position:relative; background:#fff0db; color:#a45419; }
.discovery-art-drink { background:#dcf5f2; color:#097d79; }
.discovery-art-candy { background:#ffe5ed; color:#b92d62; }
.discovery-art-toy { background:#ede7ff; color:#7149bc; }
.discovery-art svg { height:145px; width:145px; }
.discovery-art span { position:absolute; bottom:8px; right:10px; font-size:10px; font-weight:600; }
.discovery-product-body { padding:18px; }.discovery-category-label { color:var(--text); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.06em; }.discovery-product h3 { font-size:20px; color:var(--text); line-height:1.4; margin:9px 0 4px; }
.discovery-evidence { font-size:14px; font-weight:600; color:var(--accent); padding:8px 0; }.discovery-product details { border-top:1px solid var(--border); padding:12px 0; font-size:12px; line-height:1.6; }.discovery-product a,.discovery-lead a { overflow-wrap:anywhere; }
.discovery-state-label { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11px; color:var(--muted); }.discovery-state { max-width:65%; }
.discovery-leads { margin-top:26px; padding:18px; background:var(--surface); border:1px solid var(--border); border-radius:14px; }.discovery-leads summary { font-weight:600; cursor:pointer; }.discovery-lead { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 0; border-top:1px solid var(--border); font-size:13px; }.discovery-lead .btn { flex:none; }
@media(max-width:600px){.discovery-grid { grid-template-columns:minmax(0,1fr); }.discovery-toolbar label { flex:1; min-width:120px; }.discovery-lead { align-items:start; flex-direction:column; }}

.discovery-product .small,.discovery-product details,.discovery-state-label { font-size:14px; line-height:1.6; }
.discovery-product h3 { overflow-wrap:anywhere; }
.discovery-product:has(.discovery-art-drink) h3 { color:color-mix(in srgb,var(--text) 78%,#0eaa99); }
.discovery-product:has(.discovery-art-candy) h3 { color:color-mix(in srgb,var(--text) 78%,#ef427b); }
.discovery-product:has(.discovery-art-toy) h3 { color:color-mix(in srgb,var(--text) 78%,#9a6af0); }

/* Standalone cash calculator reuses the deposit denomination rows. */
.cash-view-tabs { display:flex; gap:8px; margin-bottom:16px; }
.cash-counter { max-width:650px; }
.cash-counter[hidden] { display:none; }
.cash-counter .denom-row { grid-template-columns:minmax(110px,1fr) 18px minmax(70px,110px) minmax(85px,1fr); }
.cash-counter input { width:100%; min-width:0; }
.cash-paste-panel { margin-top:10px; display:grid; gap:8px; }
.cash-paste-panel textarea { width:100%; font:12px/1.4 ui-monospace,Menlo,monospace; }
.cash-counter .denom-total output { font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; }
.cash-count-clear { margin-top:16px; }
@media(max-width:450px){.cash-counter .denom-row { grid-template-columns:minmax(0,1fr) 10px 65px 85px; gap:4px; }.cash-counter { padding:12px; }.cash-counter .denom-row label { font-size:12px; }}

.cash-counter { max-width:1050px; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(250px,1fr); gap:28px; }
.cash-count-history { border-left:1px solid var(--border); padding-left:24px; min-width:0; }
.cash-count-record { border-bottom:1px solid var(--border); padding:12px 0; }
.cash-count-record summary { cursor:pointer; line-height:1.6; }
.cash-count-record dl div { display:flex; justify-content:space-between; gap:12px; font-size:13px; margin:8px 0; }
.cash-count-record dd { margin:0; }
.worker-counts { max-width:640px; }
.wc-badge { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; margin-left:6px; vertical-align:middle; }
.wc-badge.ok { color:var(--green); background:color-mix(in srgb, var(--green) 14%, transparent); }
.wc-badge.off { color:var(--amber); background:color-mix(in srgb, var(--amber) 16%, transparent); }
.shift-counts { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; margin:12px 0 4px; }
.sc-box { border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:var(--panel-2, var(--panel)); }
.sc-box summary { cursor:pointer; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.sc-box summary b { margin-left:auto; font-variant-numeric:tabular-nums; }
.sc-box summary .muted { flex-basis:100%; }
.sc-none { display:flex; justify-content:space-between; align-items:center; gap:10px; opacity:.75; }
.sc-table { margin:10px 0 0; width:100%; font-size:13px; }
.sc-table td, .sc-table th { padding:4px 6px; }
.cash-count-list { max-height:620px; overflow:auto; }
@media(max-width:760px){.cash-counter { grid-template-columns:minmax(0,1fr); }.cash-count-history { border-left:0; border-top:1px solid var(--border); padding:16px 0 0; }}
.cash-counter [hidden] { display:none !important; }

.deposit-denom-grid .denom-row { grid-template-columns:110px 14px minmax(60px,1fr) 90px; }
.deposit-denom-grid .denom-lbl { font-size:13px; }
#ce-copy-text { width:100%; margin-top:10px; font-family:monospace; }
#ce-copy-text[hidden] { display:none; }

#ce-paste-panel[hidden] { display:none; }
#ce-paste-panel { margin-top:12px; }
#ce-paste-text { width:100%; font-family:monospace; }

/* ===== Nimbus · Snowmoon — airy motion, misty hovers, snow cursor ===== */
html[data-theme="nimbus"] { --font: "Outfit", "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif; }
html[data-theme="nimbus"] body { font-weight: 420; letter-spacing: .004em; }
html[data-theme="nimbus"] h1, html[data-theme="nimbus"] h2, html[data-theme="nimbus"] h3, html[data-theme="nimbus"] h4,
html[data-theme="nimbus"] .brand, html[data-theme="nimbus"] .month-bar .title {
  font-family: "Outfit", "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -0.015em;
}
/* Solid, always-legible headings + brand (no background-clip:text box bug). */
html[data-theme="nimbus"] h1, html[data-theme="nimbus"] h2, html[data-theme="nimbus"] h3, html[data-theme="nimbus"] h4,
html[data-theme="nimbus"] .brand {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important; color: #cfe0f3;
  filter: none; text-shadow: 0 1px 10px rgba(143,185,232,0.32); animation: nimbus-glow 6s ease-in-out infinite;
}
html[data-theme="nimbus"][data-mode="light"] h1, html[data-theme="nimbus"][data-mode="light"] h2, html[data-theme="nimbus"][data-mode="light"] h3, html[data-theme="nimbus"][data-mode="light"] h4,
html[data-theme="nimbus"][data-mode="light"] .brand {
  color: #26486b !important; text-shadow: 0 1px 5px rgba(53,113,159,0.16); animation: none;
}
@keyframes nimbus-glow { 0%,100%{ text-shadow: 0 1px 8px rgba(143,185,232,0.26) } 50%{ text-shadow: 0 1px 14px rgba(143,185,232,0.48) } }

html[data-theme="nimbus"] .brand::before {
  content: "\1F319 "; font-size: 1.02em; display: inline-block; vertical-align: middle; animation: nimbus-moon-drift 7s ease-in-out infinite;
}
html[data-theme="nimbus"][data-mode="light"] .brand::before { content: "\2601\FE0F "; }
@keyframes nimbus-moon-drift { 0%,100%{ transform: translateY(0) rotate(0); opacity:.9 } 50%{ transform: translateY(-2px) rotate(-6deg); opacity:1 } }

/* Airy ambient drifting mist behind the page */
html[data-theme="nimbus"] body::before {
  content:""; position: fixed; inset: -18% -10%; z-index: 0; pointer-events: none;
  background: radial-gradient(42% 36% at 22% 28%, rgba(185,210,236,0.10), transparent 70%),
    radial-gradient(46% 40% at 78% 24%, rgba(233,241,251,0.09), transparent 72%),
    radial-gradient(50% 42% at 60% 84%, rgba(143,185,232,0.08), transparent 72%);
  filter: blur(6px); animation: nimbus-mist 26s ease-in-out infinite alternate;
}
html[data-theme="nimbus"][data-mode="light"] body::before {
  background: radial-gradient(44% 38% at 20% 26%, rgba(255,255,255,0.35), transparent 70%),
    radial-gradient(48% 40% at 80% 22%, rgba(190,200,214,0.24), transparent 72%),
    radial-gradient(52% 44% at 62% 86%, rgba(150,170,195,0.18), transparent 72%);
}
@keyframes nimbus-mist { 0%{ transform: translate3d(-2%,0,0) scale(1.02) } 100%{ transform: translate3d(2%,-1.5%,0) scale(1.06) } }
html[data-theme="nimbus"] #app-view, html[data-theme="nimbus"] #login-view { position: relative; z-index: 1; }

/* Misty, transparent selections */
html[data-theme="nimbus"] ::selection { background: rgba(143,185,232,0.32); color: inherit; text-shadow: 0 0 6px rgba(233,241,251,0.6); }
html[data-theme="nimbus"] ::-moz-selection { background: rgba(143,185,232,0.32); color: inherit; }
html[data-theme="nimbus"][data-mode="light"] ::selection { background: rgba(53,113,159,0.20); color: inherit; text-shadow: none; }

/* Misty / airy hovers — frosted translucent wash instead of solid fills */
html[data-theme="nimbus"] .card, html[data-theme="nimbus"] .stat, html[data-theme="nimbus"] .cal .day,
html[data-theme="nimbus"] .tab, html[data-theme="nimbus"] .btn, html[data-theme="nimbus"] .seg button, html[data-theme="nimbus"] .crumb {
  transition: background-color .22s ease, box-shadow .28s cubic-bezier(.16,1,.3,1), transform .22s cubic-bezier(.16,1,.3,1), backdrop-filter .28s ease, border-color .22s ease;
}
html[data-theme="nimbus"] .card:hover, html[data-theme="nimbus"] .stat:hover, html[data-theme="nimbus"] .cal .day:hover {
  background-color: color-mix(in srgb, var(--accent) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent-2) 42%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2) 22%, transparent), 0 18px 44px -22px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.16) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); transform: translateY(-2px);
}
html[data-theme="nimbus"] .btn:hover { box-shadow: 0 0 20px -4px color-mix(in srgb, var(--accent) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.4) !important; filter: brightness(1.05); }
html[data-theme="nimbus"] .tab:hover, html[data-theme="nimbus"] .seg button:hover, html[data-theme="nimbus"] .crumb:hover {
  background: color-mix(in srgb, var(--accent-2) 16%, transparent) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--text) !important;
}
html[data-theme="nimbus"] table tbody tr { transition: background-color .18s ease; }
html[data-theme="nimbus"] table tbody tr:hover td { background-color: rgba(143,185,232,0.14) !important; }
html[data-theme="nimbus"] table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent-2) !important; }

html[data-theme="nimbus"] .tab.active, html[data-theme="nimbus"] .pill.active {
  background: linear-gradient(135deg, rgba(53,113,159,0.9), rgba(143,185,232,0.9)) !important; border-color: rgba(185,210,236,0.7) !important; color: #fff !important;
  animation: nimbus-tab-breathe 4.5s ease-in-out infinite alternate;
}
@keyframes nimbus-tab-breathe { 0%{ box-shadow: 0 0 10px -2px rgba(143,185,232,0.4) } 100%{ box-shadow: 0 0 24px 2px rgba(143,185,232,0.6), 0 0 32px -6px rgba(233,241,251,0.4) } }

/* Snowflake cursor; keep I-beam in text fields */
html[data-theme="nimbus"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%2012%20L21%2012%20M17.6%2012%20L19.7%2010.5%20M17.6%2012%20L19.7%2013.5%20M12%2012%20L16.5%204.2%20M14.8%207.2%20L14.6%204.6%20M14.8%207.2%20L17.1%206.1%20M12%2012%20L7.5%204.2%20M9.2%207.2%20L6.9%206.1%20M9.2%207.2%20L9.4%204.6%20M12%2012%20L3%2012%20M6.4%2012%20L4.3%2013.5%20M6.4%2012%20L4.3%2010.5%20M12%2012%20L7.5%2019.8%20M9.2%2016.8%20L9.4%2019.4%20M9.2%2016.8%20L6.9%2017.9%20M12%2012%20L16.5%2019.8%20M14.8%2016.8%20L17.1%2017.9%20M14.8%2016.8%20L14.6%2019.4'%20fill='none'%20stroke='white'%20stroke-width='3.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M12%2012%20L21%2012%20M17.6%2012%20L19.7%2010.5%20M17.6%2012%20L19.7%2013.5%20M12%2012%20L16.5%204.2%20M14.8%207.2%20L14.6%204.6%20M14.8%207.2%20L17.1%206.1%20M12%2012%20L7.5%204.2%20M9.2%207.2%20L6.9%206.1%20M9.2%207.2%20L9.4%204.6%20M12%2012%20L3%2012%20M6.4%2012%20L4.3%2013.5%20M6.4%2012%20L4.3%2010.5%20M12%2012%20L7.5%2019.8%20M9.2%2016.8%20L9.4%2019.4%20M9.2%2016.8%20L6.9%2017.9%20M12%2012%20L16.5%2019.8%20M14.8%2016.8%20L17.1%2017.9%20M14.8%2016.8%20L14.6%2019.4'%20fill='none'%20stroke='%238fb9e8'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='1.5'%20fill='%23eaf2fb'/%3E%3C/svg%3E") 10 10; }
html[data-theme="nimbus"] input, html[data-theme="nimbus"] textarea, html[data-theme="nimbus"] [contenteditable="true"] { cursor: text !important; }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="nimbus"] h1, html[data-theme="nimbus"] h2, html[data-theme="nimbus"] h3,
  html[data-theme="nimbus"] .brand::before, html[data-theme="nimbus"] body::before,
  html[data-theme="nimbus"] .tab.active, html[data-theme="nimbus"] .pill.active { animation: none !important; }
}


/* ===== Nimbus · Snowmoon — calm Aero's bright blue in LIGHT (overcast) mode ===== */
html[data-theme="nimbus"][data-mode="light"] .card,
html[data-theme="nimbus"][data-mode="light"] .stat,
html[data-theme="nimbus"][data-mode="light"] .modal,
html[data-theme="nimbus"][data-mode="light"] .login-card {
  background: linear-gradient(145deg, rgba(247,250,252,0.95), rgba(221,228,237,0.90)) !important;
  border: 1px solid rgba(55,78,110,0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 10px 26px -16px rgba(42,59,82,0.32) !important;
}
/* the bright-blue top ray → soft silver-blue, barely there */
html[data-theme="nimbus"][data-mode="light"] .card::before {
  background: linear-gradient(90deg, transparent, rgba(53,113,159,0.30) 28%, rgba(255,255,255,0.75) 55%, rgba(111,130,150,0.26) 78%, transparent) !important;
  opacity: 0.38 !important;
}
html[data-theme="nimbus"][data-mode="light"] .card:hover,
html[data-theme="nimbus"][data-mode="light"] .stat:hover {
  border-color: rgba(53,113,159,0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 1px rgba(91,143,191,0.24), 0 16px 36px -18px rgba(53,113,159,0.28) !important;
}
html[data-theme="nimbus"][data-mode="light"] .card:hover::before {
  box-shadow: 0 0 10px rgba(91,143,191,0.5) !important;
  opacity: 0.6 !important;
}
/* wind-swirl watermark: keep it faint and neutral in light */
html[data-theme="nimbus"][data-mode="light"] .card:not(.station-card)::after,
html[data-theme="nimbus"][data-mode="light"] .stat::after { opacity: 0.06 !important; }


/* ==================== Bubbly · Iridescence (FORM theme: shapes become bubbles) ==================== */
/* Palette (dark base + light), mirrored from theme-tokens.css */
html[data-theme="bubbly"] {
  --tint:#2fd0e0; --accent:#4fe0f0; --accent-2:#ff9ee0; --accent-3:#b3a8ff;
  --font:"Fredoka","Rubik",-apple-system,sans-serif;
  --bg:#0b1a24; --panel:#122836; --panel-2:#1a3646; --border:rgba(120,200,220,0.20);
  --text:#eafaff; --muted:#9fc0cc; --input-bg:#0f2230; --link:#7fe6f2;
  --shadow:0 22px 48px -24px rgba(0,0,0,0.6);
  --radius:30px; --radius-btn:999px; --radius-input:20px;
  --app-bg:radial-gradient(40% 36% at 18% 14%,rgba(79,224,240,0.22),transparent 70%),radial-gradient(42% 38% at 86% 20%,rgba(255,158,224,0.18),transparent 72%),radial-gradient(48% 42% at 60% 92%,rgba(179,168,255,0.18),transparent 72%),linear-gradient(180deg,#0b1a24,#081219);
}
html[data-theme="bubbly"][data-mode="light"] {
  --accent:#0fb5c9; --accent-2:#ef8fd6; --accent-3:#8f9cff;
  --bg:#eef7fb; --panel:#ffffff; --panel-2:#e6f4f8; --border:rgba(60,150,170,0.18);
  --text:#184049; --muted:#5a7b84; --input-bg:#ffffff; --link:#0e9fb2;
  --shadow:0 20px 44px -24px rgba(20,90,110,0.42);
  --app-bg:radial-gradient(40% 36% at 18% 14%,rgba(79,224,240,0.18),transparent 70%),radial-gradient(42% 38% at 86% 20%,rgba(239,143,214,0.16),transparent 72%),radial-gradient(48% 42% at 60% 92%,rgba(143,156,255,0.16),transparent 72%),linear-gradient(180deg,#eef7fb,#e3f1f7);
}

/* Rounded, friendly type */
html[data-theme="bubbly"], html[data-theme="bubbly"] body { font-family:"Fredoka","Rubik",-apple-system,sans-serif; letter-spacing:.005em; }
html[data-theme="bubbly"] h1, html[data-theme="bubbly"] h2, html[data-theme="bubbly"] h3, html[data-theme="bubbly"] h4,
html[data-theme="bubbly"] .brand, html[data-theme="bubbly"] .month-bar .title {
  font-family:"Fredoka","Rubik",sans-serif; font-weight:700; letter-spacing:.005em;
  color:#86ecfb; -webkit-text-fill-color:currentColor;
}
html[data-theme="bubbly"][data-mode="light"] h1, html[data-theme="bubbly"][data-mode="light"] h2, html[data-theme="bubbly"][data-mode="light"] h3,
html[data-theme="bubbly"][data-mode="light"] h4, html[data-theme="bubbly"][data-mode="light"] .brand { color:#0f6678; }

/* THE FORM: cards / stat tiles / station cards / modals / login become glossy 3D bubbles */
html[data-theme="bubbly"] .card,
html[data-theme="bubbly"] .stat,
html[data-theme="bubbly"] .station-card,
html[data-theme="bubbly"] .modal,
html[data-theme="bubbly"] .login-card,
html[data-theme="bubbly"] .cal .day {
  position: relative; overflow: hidden;
  border-radius: 30px !important;
  background:
    radial-gradient(115% 85% at 28% 18%, rgba(255,255,255,0.4), rgba(255,255,255,0.08) 30%, transparent 52%),
    radial-gradient(95% 90% at 80% 90%, color-mix(in srgb,var(--accent-2) 24%,transparent), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb,var(--panel) 90%,transparent), color-mix(in srgb,var(--panel-2) 86%,transparent)) !important;
  border: 1px solid color-mix(in srgb,#ffffff 50%, var(--border)) !important;
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,0.26),
    inset 0 -10px 24px color-mix(in srgb,var(--accent) 15%,transparent),
    0 18px 40px -18px color-mix(in srgb,var(--accent) 45%,transparent),
    0 6px 16px rgba(0,0,0,0.12) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.3); backdrop-filter: blur(6px) saturate(1.3);
  transition: transform .34s cubic-bezier(.2,1.25,.3,1), box-shadow .3s ease !important;
}
/* the signature bubble highlight */
html[data-theme="bubbly"] .card::before,
html[data-theme="bubbly"] .stat::before,
html[data-theme="bubbly"] .station-card::before,
html[data-theme="bubbly"] .cal .day::before {
  content:""; position:absolute; top:8%; left:10%; width:32%; height:22%;
  background: radial-gradient(60% 60% at 42% 42%, rgba(255,255,255,0.5), rgba(255,255,255,0.12) 55%, transparent 78%);
  border-radius:50%; transform: rotate(-16deg); filter: blur(2px); opacity:.5; pointer-events:none; z-index:1;
}
html[data-theme="bubbly"] .card > *, html[data-theme="bubbly"] .stat > *,
html[data-theme="bubbly"] .station-card > *, html[data-theme="bubbly"] .cal .day > * { position: relative; z-index: 2; }

/* Pop on hover — bubbles lift & swell */
html[data-theme="bubbly"] .card:hover,
html[data-theme="bubbly"] .stat:hover,
html[data-theme="bubbly"] .cal .day:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,0.3),
    inset 0 -12px 28px color-mix(in srgb,var(--accent) 20%,transparent),
    0 26px 52px -18px color-mix(in srgb,var(--accent) 55%,transparent),
    0 8px 20px rgba(0,0,0,0.14) !important;
}
/* Station cards: the roundest, most 3D bubbles, with a gentle idle wobble */
html[data-theme="bubbly"] .station-card { border-radius: 38px !important; }
html[data-theme="bubbly"] .station-card:hover { transform: translateY(-6px) scale(1.025) rotate(-0.4deg); }
@keyframes bubbly-wobble { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-4px) } }

/* Calendar day bubbles keep content readable */
html[data-theme="bubbly"] .cal .day { border-radius: 26px !important; }
html[data-theme="bubbly"] .cal { gap: 12px; }

/* Buttons / tabs / pills / segmented become glossy bubble pills */
html[data-theme="bubbly"] .btn {
  border: none !important; border-radius: 999px !important; color:#06313a !important; font-weight:700 !important;
  background:
    radial-gradient(100% 80% at 30% 20%, rgba(255,255,255,0.85), rgba(255,255,255,0.2) 45%, transparent 60%),
    linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.65), inset 0 -4px 10px color-mix(in srgb,var(--accent) 30%,transparent), 0 10px 20px -7px color-mix(in srgb,var(--accent) 60%,transparent) !important;
  transition: transform .2s cubic-bezier(.2,1.5,.3,1), box-shadow .2s ease !important;
}
html[data-theme="bubbly"] .btn:hover { transform: translateY(-2px) scale(1.06); }
html[data-theme="bubbly"] .btn:active { transform: scale(.94); }
html[data-theme="bubbly"] .btn.ghost {
  color: var(--text) !important;
  background: radial-gradient(100% 80% at 30% 20%, rgba(255,255,255,0.5), transparent 55%), color-mix(in srgb,var(--accent) 12%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 6px 14px -8px color-mix(in srgb,var(--accent) 45%,transparent) !important;
}
html[data-theme="bubbly"] .tab, html[data-theme="bubbly"] .seg, html[data-theme="bubbly"] .seg button,
html[data-theme="bubbly"] .pill, html[data-theme="bubbly"] .chip { border-radius: 999px !important; }
html[data-theme="bubbly"] .tab.active, html[data-theme="bubbly"] .pill.active {
  background: radial-gradient(100% 80% at 30% 20%, rgba(255,255,255,0.7), transparent 55%), linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color:#06313a !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 16px -6px color-mix(in srgb,var(--accent) 55%,transparent) !important;
}
/* Inputs become soft rounded glass */
html[data-theme="bubbly"] input, html[data-theme="bubbly"] select, html[data-theme="bubbly"] textarea {
  border-radius: 20px !important; border:1px solid color-mix(in srgb,#fff 40%,var(--border)) !important;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}

/* Iridescent selection */
html[data-theme="bubbly"] ::selection { background: color-mix(in srgb,var(--accent-2) 40%, transparent); color: inherit; }
html[data-theme="bubbly"] ::-moz-selection { background: color-mix(in srgb,var(--accent-2) 40%, transparent); color: inherit; }

/* Floating ambient bubbles (gentle, seamless bob — never jumps) */
html[data-theme="bubbly"] body::before {
  content:""; position:fixed; inset:-8%; z-index:0; pointer-events:none;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(circle at 12% 84%, rgba(255,255,255,.5) 0 5px, transparent 6px),
    radial-gradient(circle at 24% 60%, color-mix(in srgb,var(--accent) 45%,transparent) 0 9px, transparent 10px),
    radial-gradient(circle at 46% 78%, rgba(255,255,255,.4) 0 4px, transparent 5px),
    radial-gradient(circle at 66% 54%, color-mix(in srgb,var(--accent-2) 42%,transparent) 0 11px, transparent 12px),
    radial-gradient(circle at 82% 72%, rgba(255,255,255,.45) 0 6px, transparent 7px),
    radial-gradient(circle at 36% 36%, color-mix(in srgb,var(--accent-3) 40%,transparent) 0 7px, transparent 8px),
    radial-gradient(circle at 90% 40%, rgba(255,255,255,.4) 0 5px, transparent 6px),
    radial-gradient(circle at 16% 30%, color-mix(in srgb,var(--accent) 38%,transparent) 0 8px, transparent 9px);
  opacity:.7; animation: bubbly-drift 11s ease-in-out infinite alternate;
}
@keyframes bubbly-drift { 0%{ transform: translateY(0) translateX(0) } 100%{ transform: translateY(-2.2%) translateX(1%) } }
html[data-theme="bubbly"] #app-view, html[data-theme="bubbly"] #login-view { position: relative; z-index: 1; }

/* Bubble cursor; I-beam in text fields */
html[data-theme="bubbly"] { --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='26'%20viewBox='0%200%2026%2026'%3E%3Ccircle%20cx='13'%20cy='13'%20r='10'%20fill='rgba(255,255,255,0.14)'%20stroke='white'%20stroke-width='3'/%3E%3Ccircle%20cx='13'%20cy='13'%20r='10'%20fill='none'%20stroke='%232fd0e0'%20stroke-width='1.4'/%3E%3Cellipse%20cx='9'%20cy='8.5'%20rx='2.8'%20ry='1.7'%20fill='white'%20opacity='0.92'%20transform='rotate(-28%209%208.5)'/%3E%3Ccircle%20cx='16.5'%20cy='16'%20r='1.1'%20fill='white'%20opacity='0.6'/%3E%3C/svg%3E") 13 13; }
html[data-theme="bubbly"] input, html[data-theme="bubbly"] textarea, html[data-theme="bubbly"] [contenteditable="true"] { cursor: text !important; }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="bubbly"] .station-card, html[data-theme="bubbly"] body::before { animation: none !important; }
}

html[data-theme="bubbly"], html[data-theme="bubbly"] body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* Bubbly: make station-card names crisp — opaque surface, high-contrast solid text, no blur behind glyphs */
html[data-theme="bubbly"] .station-card {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background:
    radial-gradient(115% 80% at 28% 16%, rgba(255,255,255,0.22), transparent 50%),
    radial-gradient(95% 90% at 82% 92%, color-mix(in srgb,var(--accent-2) 16%,transparent), transparent 62%),
    linear-gradient(160deg, var(--panel), var(--panel-2)) !important;
}
html[data-theme="bubbly"] .station-card h3,
html[data-theme="bubbly"] .station-card .meta,
html[data-theme="bubbly"] .station-card .sc-balance,
html[data-theme="bubbly"] .station-card .ov {
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
html[data-theme="bubbly"] .station-card h3 { color: var(--text) !important; font-weight: 700 !important; letter-spacing: 0 !important; }

/* ==================== Bubbly ROUND FORM — station cards & day cells are real circular bubbles ==================== */
/* Bigger grid cells so a circle has room for the content it must hold */
html[data-theme="bubbly"] .station-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) !important; gap: 24px !important; }

/* Station cards -> perfect circles, content centred, specular highlight & 3D shadow preserved */
html[data-theme="bubbly"] .station-card {
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  padding: 11% 13% !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
html[data-theme="bubbly"] .station-card:hover { transform: translateY(-6px) scale(1.03) !important; }
html[data-theme="bubbly"] .station-card .sc-head {
  flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%;
}
html[data-theme="bubbly"] .station-card .sc-head > div { min-width: 0; width: 100%; }
html[data-theme="bubbly"] .station-card h3 { margin: 0 0 1px; text-align: center; }
html[data-theme="bubbly"] .station-card .meta { white-space: normal; text-align: center; overflow: visible; }
html[data-theme="bubbly"] .station-card .sc-badge { margin-top: 3px; }
html[data-theme="bubbly"] .station-card .sc-balance {
  background: transparent !important; border: none !important;
  padding: 4px 0 2px !important; margin: 7px 0 5px !important; text-align: center; width: 100%;
}
html[data-theme="bubbly"] .station-card .sc-bal-num, 
html[data-theme="bubbly"] .station-card .sc-bal-label { text-align: center; }
html[data-theme="bubbly"] .station-card .sc-prices { justify-content: center; margin-bottom: 7px; }
html[data-theme="bubbly"] .station-card .sc-rows {
  border-top: none !important; padding-top: 0 !important; width: 100%; align-items: center; gap: 4px;
}
html[data-theme="bubbly"] .station-card .ov-row { justify-content: center; gap: 6px; font-size: 12px; }
html[data-theme="bubbly"] .station-card .ov-l { white-space: normal; }

/* Calendar day cells -> circular bubbles, number & mini centred */
html[data-theme="bubbly"] .cal { gap: 11px !important; }
html[data-theme="bubbly"] .cal .day {
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  min-height: 0 !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 8% 6% !important;
}
html[data-theme="bubbly"] .cal .day .num { width: 100%; text-align: center; }
html[data-theme="bubbly"] .cal .day .mini { width: 100%; text-align: center; margin-top: 2px; line-height: 1.35; }
html[data-theme="bubbly"] .cal .day .badge { margin: 0 2px; }
html[data-theme="bubbly"] .cal .day.empty { aspect-ratio: 1 / 1 !important; }

/* ==================== Bubbly ROUND FORM (cont.) — add-station circle + smaller day bubbles ==================== */
/* "+ Add station" tile becomes a matching dashed circular bubble */
html[data-theme="bubbly"] .station-grid .add-card,
html[data-theme="bubbly"] .add-card {
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center; justify-content: center; text-align: center;
  padding: 11% !important;
  border: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent) !important;
  background:
    radial-gradient(115% 85% at 28% 18%, rgba(255,255,255,0.14), transparent 50%),
    color-mix(in srgb, var(--panel) 40%, transparent) !important;
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.18), 0 14px 30px -20px color-mix(in srgb,var(--accent) 40%,transparent) !important;
}
html[data-theme="bubbly"] .add-card:hover {
  transform: translateY(-5px) scale(1.03) !important;
  border-color: var(--accent) !important;
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.22), 0 22px 44px -18px color-mix(in srgb,var(--accent) 55%,transparent) !important;
}

/* Smaller day bubbles — cap each circle and centre it in its grid cell */
html[data-theme="bubbly"] .cal .day {
  max-width: 88px !important;
  justify-self: center;
  padding: 7% 5% !important;
}
html[data-theme="bubbly"] .cal .day.today { max-width: 92px !important; }
html[data-theme="bubbly"] .cal .day .mini { font-size: 10px; margin-top: 1px; }

/* ==================== Bubbly ROUND FORM (fix) — uniform day bubbles, whole grid fits one page ==================== */
/* Cap the calendar width and keep 7 equal columns; each cell stretches to its track so every bubble is identical. */
html[data-theme="bubbly"] .cal {
  grid-template-columns: repeat(7, 1fr) !important;
  max-width: min(680px, 100%) !important;
  margin-left: auto !important; margin-right: auto !important;
  gap: 10px !important;
}
html[data-theme="bubbly"] .cal .day,
html[data-theme="bubbly"] .cal .day.today {
  width: auto !important;
  max-width: none !important;
  justify-self: stretch !important;   /* undo the content-shrink that made them uneven */
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
}

/* ==================== Bubbly ROUND FORM (fix 2) — bigger, more expanded day bubbles ==================== */
/* Let the calendar use the full content width so bubbles grow and breathe, still 7 equal columns = uniform. */
html[data-theme="bubbly"] .cal {
  max-width: 100% !important;
  margin-left: 0 !important; margin-right: 0 !important;
  gap: 16px !important;
}
html[data-theme="bubbly"] .cal .day .num { font-size: 20px; }
html[data-theme="bubbly"] .cal .day.today .num { font-size: 22px; }
html[data-theme="bubbly"] .cal .day .mini { font-size: 11px; }

/* ==================== Bubbly ROUND FORM (fix 3) — ease day bubbles a touch smaller ==================== */
html[data-theme="bubbly"] .cal {
  max-width: 94% !important;
  margin-left: auto !important; margin-right: auto !important;
}
html[data-theme="bubbly"] .cal .day .num { font-size: 19px; }
html[data-theme="bubbly"] .cal .day.today .num { font-size: 21px; }

/* ==================== FORMS — name-fitting element shapes per theme (bold form pass) ==================== */
/* Shape only via border-radius + elevation (no clip-path) so content never clips and theme decorations survive. */

/* ----- crystal form : glacier, prism, indigo, electric, galaxy ----- */
html[data-theme="glacier"] .card,
html[data-theme="prism"] .card,
html[data-theme="indigo"] .card,
html[data-theme="electric"] .card,
html[data-theme="galaxy"] .card,
html[data-theme="glacier"] .stat,
html[data-theme="prism"] .stat,
html[data-theme="indigo"] .stat,
html[data-theme="electric"] .stat,
html[data-theme="galaxy"] .stat,
html[data-theme="glacier"] .station-card,
html[data-theme="prism"] .station-card,
html[data-theme="indigo"] .station-card,
html[data-theme="electric"] .station-card,
html[data-theme="galaxy"] .station-card,
html[data-theme="glacier"] .modal,
html[data-theme="prism"] .modal,
html[data-theme="indigo"] .modal,
html[data-theme="electric"] .modal,
html[data-theme="galaxy"] .modal,
html[data-theme="glacier"] .login-card,
html[data-theme="prism"] .login-card,
html[data-theme="indigo"] .login-card,
html[data-theme="electric"] .login-card,
html[data-theme="galaxy"] .login-card { border-radius: 6px !important; }
html[data-theme="glacier"] .cal .day,
html[data-theme="prism"] .cal .day,
html[data-theme="indigo"] .cal .day,
html[data-theme="electric"] .cal .day,
html[data-theme="galaxy"] .cal .day { border-radius: 7px !important; }
html[data-theme="glacier"] .btn,
html[data-theme="prism"] .btn,
html[data-theme="indigo"] .btn,
html[data-theme="electric"] .btn,
html[data-theme="galaxy"] .btn { border-radius: 6px !important; }
html[data-theme="glacier"] .tab,
html[data-theme="prism"] .tab,
html[data-theme="indigo"] .tab,
html[data-theme="electric"] .tab,
html[data-theme="galaxy"] .tab,
html[data-theme="glacier"] .pill,
html[data-theme="prism"] .pill,
html[data-theme="indigo"] .pill,
html[data-theme="electric"] .pill,
html[data-theme="galaxy"] .pill,
html[data-theme="glacier"] .chip,
html[data-theme="prism"] .chip,
html[data-theme="indigo"] .chip,
html[data-theme="electric"] .chip,
html[data-theme="galaxy"] .chip,
html[data-theme="glacier"] .seg,
html[data-theme="prism"] .seg,
html[data-theme="indigo"] .seg,
html[data-theme="electric"] .seg,
html[data-theme="galaxy"] .seg,
html[data-theme="glacier"] .seg button,
html[data-theme="prism"] .seg button,
html[data-theme="indigo"] .seg button,
html[data-theme="electric"] .seg button,
html[data-theme="galaxy"] .seg button { border-radius: 6px !important; }
html[data-theme="glacier"] .station-card,
html[data-theme="prism"] .station-card,
html[data-theme="indigo"] .station-card,
html[data-theme="electric"] .station-card,
html[data-theme="galaxy"] .station-card,
html[data-theme="glacier"] .stat,
html[data-theme="prism"] .stat,
html[data-theme="indigo"] .stat,
html[data-theme="electric"] .stat,
html[data-theme="galaxy"] .stat,
html[data-theme="glacier"] .cal .day,
html[data-theme="prism"] .cal .day,
html[data-theme="indigo"] .cal .day,
html[data-theme="electric"] .cal .day,
html[data-theme="galaxy"] .cal .day { box-shadow: 0 16px 38px -20px color-mix(in srgb,var(--accent) 50%,transparent), 0 4px 12px rgba(0,0,0,0.18) !important; border: 1px solid color-mix(in srgb,#ffffff 24%, var(--border)) !important; transition: transform .3s cubic-bezier(.2,1.1,.3,1), box-shadow .3s ease !important; }
html[data-theme="glacier"] .station-card:hover,
html[data-theme="prism"] .station-card:hover,
html[data-theme="indigo"] .station-card:hover,
html[data-theme="electric"] .station-card:hover,
html[data-theme="galaxy"] .station-card:hover,
html[data-theme="glacier"] .stat:hover,
html[data-theme="prism"] .stat:hover,
html[data-theme="indigo"] .stat:hover,
html[data-theme="electric"] .stat:hover,
html[data-theme="galaxy"] .stat:hover,
html[data-theme="glacier"] .cal .day:hover,
html[data-theme="prism"] .cal .day:hover,
html[data-theme="indigo"] .cal .day:hover,
html[data-theme="electric"] .cal .day:hover,
html[data-theme="galaxy"] .cal .day:hover { transform: translateY(-4px) scale(1.012) !important; }

/* ----- flame form : sunset, crimson, wine, sunburst, ignis, amber ----- */
html[data-theme="sunset"] .card,
html[data-theme="crimson"] .card,
html[data-theme="wine"] .card,
html[data-theme="sunburst"] .card,
html[data-theme="ignis"] .card,
html[data-theme="amber"] .card,
html[data-theme="sunset"] .stat,
html[data-theme="crimson"] .stat,
html[data-theme="wine"] .stat,
html[data-theme="sunburst"] .stat,
html[data-theme="ignis"] .stat,
html[data-theme="amber"] .stat,
html[data-theme="sunset"] .station-card,
html[data-theme="crimson"] .station-card,
html[data-theme="wine"] .station-card,
html[data-theme="sunburst"] .station-card,
html[data-theme="ignis"] .station-card,
html[data-theme="amber"] .station-card,
html[data-theme="sunset"] .modal,
html[data-theme="crimson"] .modal,
html[data-theme="wine"] .modal,
html[data-theme="sunburst"] .modal,
html[data-theme="ignis"] .modal,
html[data-theme="amber"] .modal,
html[data-theme="sunset"] .login-card,
html[data-theme="crimson"] .login-card,
html[data-theme="wine"] .login-card,
html[data-theme="sunburst"] .login-card,
html[data-theme="ignis"] .login-card,
html[data-theme="amber"] .login-card { border-radius: 22px 6px 22px 6px !important; }
html[data-theme="sunset"] .cal .day,
html[data-theme="crimson"] .cal .day,
html[data-theme="wine"] .cal .day,
html[data-theme="sunburst"] .cal .day,
html[data-theme="ignis"] .cal .day,
html[data-theme="amber"] .cal .day { border-radius: 16px 5px 16px 5px !important; }
html[data-theme="sunset"] .btn,
html[data-theme="crimson"] .btn,
html[data-theme="wine"] .btn,
html[data-theme="sunburst"] .btn,
html[data-theme="ignis"] .btn,
html[data-theme="amber"] .btn { border-radius: 999px !important; }
html[data-theme="sunset"] .tab,
html[data-theme="crimson"] .tab,
html[data-theme="wine"] .tab,
html[data-theme="sunburst"] .tab,
html[data-theme="ignis"] .tab,
html[data-theme="amber"] .tab,
html[data-theme="sunset"] .pill,
html[data-theme="crimson"] .pill,
html[data-theme="wine"] .pill,
html[data-theme="sunburst"] .pill,
html[data-theme="ignis"] .pill,
html[data-theme="amber"] .pill,
html[data-theme="sunset"] .chip,
html[data-theme="crimson"] .chip,
html[data-theme="wine"] .chip,
html[data-theme="sunburst"] .chip,
html[data-theme="ignis"] .chip,
html[data-theme="amber"] .chip,
html[data-theme="sunset"] .seg,
html[data-theme="crimson"] .seg,
html[data-theme="wine"] .seg,
html[data-theme="sunburst"] .seg,
html[data-theme="ignis"] .seg,
html[data-theme="amber"] .seg,
html[data-theme="sunset"] .seg button,
html[data-theme="crimson"] .seg button,
html[data-theme="wine"] .seg button,
html[data-theme="sunburst"] .seg button,
html[data-theme="ignis"] .seg button,
html[data-theme="amber"] .seg button { border-radius: 999px !important; }
html[data-theme="sunset"] .station-card,
html[data-theme="crimson"] .station-card,
html[data-theme="wine"] .station-card,
html[data-theme="sunburst"] .station-card,
html[data-theme="ignis"] .station-card,
html[data-theme="amber"] .station-card,
html[data-theme="sunset"] .stat,
html[data-theme="crimson"] .stat,
html[data-theme="wine"] .stat,
html[data-theme="sunburst"] .stat,
html[data-theme="ignis"] .stat,
html[data-theme="amber"] .stat,
html[data-theme="sunset"] .cal .day,
html[data-theme="crimson"] .cal .day,
html[data-theme="wine"] .cal .day,
html[data-theme="sunburst"] .cal .day,
html[data-theme="ignis"] .cal .day,
html[data-theme="amber"] .cal .day { box-shadow: 0 18px 42px -20px color-mix(in srgb,var(--accent) 58%,transparent), 0 5px 14px rgba(0,0,0,0.16) !important; transition: transform .3s cubic-bezier(.2,1.1,.3,1), box-shadow .3s ease !important; }
html[data-theme="sunset"] .station-card:hover,
html[data-theme="crimson"] .station-card:hover,
html[data-theme="wine"] .station-card:hover,
html[data-theme="sunburst"] .station-card:hover,
html[data-theme="ignis"] .station-card:hover,
html[data-theme="amber"] .station-card:hover,
html[data-theme="sunset"] .stat:hover,
html[data-theme="crimson"] .stat:hover,
html[data-theme="wine"] .stat:hover,
html[data-theme="sunburst"] .stat:hover,
html[data-theme="ignis"] .stat:hover,
html[data-theme="amber"] .stat:hover,
html[data-theme="sunset"] .cal .day:hover,
html[data-theme="crimson"] .cal .day:hover,
html[data-theme="wine"] .cal .day:hover,
html[data-theme="sunburst"] .cal .day:hover,
html[data-theme="ignis"] .cal .day:hover,
html[data-theme="amber"] .cal .day:hover { transform: translateY(-5px) scale(1.015) !important; }

/* ----- water form : ocean, azure, riviera, hydro, zephyr, sky ----- */
html[data-theme="ocean"] .card,
html[data-theme="azure"] .card,
html[data-theme="riviera"] .card,
html[data-theme="hydro"] .card,
html[data-theme="zephyr"] .card,
html[data-theme="sky"] .card,
html[data-theme="ocean"] .stat,
html[data-theme="azure"] .stat,
html[data-theme="riviera"] .stat,
html[data-theme="hydro"] .stat,
html[data-theme="zephyr"] .stat,
html[data-theme="sky"] .stat,
html[data-theme="ocean"] .station-card,
html[data-theme="azure"] .station-card,
html[data-theme="riviera"] .station-card,
html[data-theme="hydro"] .station-card,
html[data-theme="zephyr"] .station-card,
html[data-theme="sky"] .station-card,
html[data-theme="ocean"] .modal,
html[data-theme="azure"] .modal,
html[data-theme="riviera"] .modal,
html[data-theme="hydro"] .modal,
html[data-theme="zephyr"] .modal,
html[data-theme="sky"] .modal,
html[data-theme="ocean"] .login-card,
html[data-theme="azure"] .login-card,
html[data-theme="riviera"] .login-card,
html[data-theme="hydro"] .login-card,
html[data-theme="zephyr"] .login-card,
html[data-theme="sky"] .login-card { border-radius: 28px 28px 28px 10px !important; }
html[data-theme="ocean"] .cal .day,
html[data-theme="azure"] .cal .day,
html[data-theme="riviera"] .cal .day,
html[data-theme="hydro"] .cal .day,
html[data-theme="zephyr"] .cal .day,
html[data-theme="sky"] .cal .day { border-radius: 50% 50% 50% 14px !important; }
html[data-theme="ocean"] .btn,
html[data-theme="azure"] .btn,
html[data-theme="riviera"] .btn,
html[data-theme="hydro"] .btn,
html[data-theme="zephyr"] .btn,
html[data-theme="sky"] .btn { border-radius: 999px !important; }
html[data-theme="ocean"] .tab,
html[data-theme="azure"] .tab,
html[data-theme="riviera"] .tab,
html[data-theme="hydro"] .tab,
html[data-theme="zephyr"] .tab,
html[data-theme="sky"] .tab,
html[data-theme="ocean"] .pill,
html[data-theme="azure"] .pill,
html[data-theme="riviera"] .pill,
html[data-theme="hydro"] .pill,
html[data-theme="zephyr"] .pill,
html[data-theme="sky"] .pill,
html[data-theme="ocean"] .chip,
html[data-theme="azure"] .chip,
html[data-theme="riviera"] .chip,
html[data-theme="hydro"] .chip,
html[data-theme="zephyr"] .chip,
html[data-theme="sky"] .chip,
html[data-theme="ocean"] .seg,
html[data-theme="azure"] .seg,
html[data-theme="riviera"] .seg,
html[data-theme="hydro"] .seg,
html[data-theme="zephyr"] .seg,
html[data-theme="sky"] .seg,
html[data-theme="ocean"] .seg button,
html[data-theme="azure"] .seg button,
html[data-theme="riviera"] .seg button,
html[data-theme="hydro"] .seg button,
html[data-theme="zephyr"] .seg button,
html[data-theme="sky"] .seg button { border-radius: 999px !important; }
html[data-theme="ocean"] .station-card,
html[data-theme="azure"] .station-card,
html[data-theme="riviera"] .station-card,
html[data-theme="hydro"] .station-card,
html[data-theme="zephyr"] .station-card,
html[data-theme="sky"] .station-card,
html[data-theme="ocean"] .stat,
html[data-theme="azure"] .stat,
html[data-theme="riviera"] .stat,
html[data-theme="hydro"] .stat,
html[data-theme="zephyr"] .stat,
html[data-theme="sky"] .stat,
html[data-theme="ocean"] .cal .day,
html[data-theme="azure"] .cal .day,
html[data-theme="riviera"] .cal .day,
html[data-theme="hydro"] .cal .day,
html[data-theme="zephyr"] .cal .day,
html[data-theme="sky"] .cal .day { box-shadow: 0 18px 40px -20px color-mix(in srgb,var(--accent) 52%,transparent), 0 5px 14px rgba(0,0,0,0.15) !important; transition: transform .3s cubic-bezier(.2,1.1,.3,1), box-shadow .3s ease !important; }
html[data-theme="ocean"] .station-card:hover,
html[data-theme="azure"] .station-card:hover,
html[data-theme="riviera"] .station-card:hover,
html[data-theme="hydro"] .station-card:hover,
html[data-theme="zephyr"] .station-card:hover,
html[data-theme="sky"] .station-card:hover,
html[data-theme="ocean"] .stat:hover,
html[data-theme="azure"] .stat:hover,
html[data-theme="riviera"] .stat:hover,
html[data-theme="hydro"] .stat:hover,
html[data-theme="zephyr"] .stat:hover,
html[data-theme="sky"] .stat:hover,
html[data-theme="ocean"] .cal .day:hover,
html[data-theme="azure"] .cal .day:hover,
html[data-theme="riviera"] .cal .day:hover,
html[data-theme="hydro"] .cal .day:hover,
html[data-theme="zephyr"] .cal .day:hover,
html[data-theme="sky"] .cal .day:hover { transform: translateY(-4px) scale(1.012) !important; }

/* ----- leaf form : emerald, meadow, sepia, mocha, dune, bourbon ----- */
html[data-theme="emerald"] .card,
html[data-theme="meadow"] .card,
html[data-theme="sepia"] .card,
html[data-theme="mocha"] .card,
html[data-theme="dune"] .card,
html[data-theme="bourbon"] .card,
html[data-theme="emerald"] .stat,
html[data-theme="meadow"] .stat,
html[data-theme="sepia"] .stat,
html[data-theme="mocha"] .stat,
html[data-theme="dune"] .stat,
html[data-theme="bourbon"] .stat,
html[data-theme="emerald"] .station-card,
html[data-theme="meadow"] .station-card,
html[data-theme="sepia"] .station-card,
html[data-theme="mocha"] .station-card,
html[data-theme="dune"] .station-card,
html[data-theme="bourbon"] .station-card,
html[data-theme="emerald"] .modal,
html[data-theme="meadow"] .modal,
html[data-theme="sepia"] .modal,
html[data-theme="mocha"] .modal,
html[data-theme="dune"] .modal,
html[data-theme="bourbon"] .modal,
html[data-theme="emerald"] .login-card,
html[data-theme="meadow"] .login-card,
html[data-theme="sepia"] .login-card,
html[data-theme="mocha"] .login-card,
html[data-theme="dune"] .login-card,
html[data-theme="bourbon"] .login-card { border-radius: 0 26px 0 26px !important; }
html[data-theme="emerald"] .cal .day,
html[data-theme="meadow"] .cal .day,
html[data-theme="sepia"] .cal .day,
html[data-theme="mocha"] .cal .day,
html[data-theme="dune"] .cal .day,
html[data-theme="bourbon"] .cal .day { border-radius: 0 18px 0 18px !important; }
html[data-theme="emerald"] .btn,
html[data-theme="meadow"] .btn,
html[data-theme="sepia"] .btn,
html[data-theme="mocha"] .btn,
html[data-theme="dune"] .btn,
html[data-theme="bourbon"] .btn { border-radius: 0 15px 0 15px !important; }
html[data-theme="emerald"] .tab,
html[data-theme="meadow"] .tab,
html[data-theme="sepia"] .tab,
html[data-theme="mocha"] .tab,
html[data-theme="dune"] .tab,
html[data-theme="bourbon"] .tab,
html[data-theme="emerald"] .pill,
html[data-theme="meadow"] .pill,
html[data-theme="sepia"] .pill,
html[data-theme="mocha"] .pill,
html[data-theme="dune"] .pill,
html[data-theme="bourbon"] .pill,
html[data-theme="emerald"] .chip,
html[data-theme="meadow"] .chip,
html[data-theme="sepia"] .chip,
html[data-theme="mocha"] .chip,
html[data-theme="dune"] .chip,
html[data-theme="bourbon"] .chip,
html[data-theme="emerald"] .seg,
html[data-theme="meadow"] .seg,
html[data-theme="sepia"] .seg,
html[data-theme="mocha"] .seg,
html[data-theme="dune"] .seg,
html[data-theme="bourbon"] .seg,
html[data-theme="emerald"] .seg button,
html[data-theme="meadow"] .seg button,
html[data-theme="sepia"] .seg button,
html[data-theme="mocha"] .seg button,
html[data-theme="dune"] .seg button,
html[data-theme="bourbon"] .seg button { border-radius: 0 13px 0 13px !important; }
html[data-theme="emerald"] .station-card,
html[data-theme="meadow"] .station-card,
html[data-theme="sepia"] .station-card,
html[data-theme="mocha"] .station-card,
html[data-theme="dune"] .station-card,
html[data-theme="bourbon"] .station-card,
html[data-theme="emerald"] .stat,
html[data-theme="meadow"] .stat,
html[data-theme="sepia"] .stat,
html[data-theme="mocha"] .stat,
html[data-theme="dune"] .stat,
html[data-theme="bourbon"] .stat,
html[data-theme="emerald"] .cal .day,
html[data-theme="meadow"] .cal .day,
html[data-theme="sepia"] .cal .day,
html[data-theme="mocha"] .cal .day,
html[data-theme="dune"] .cal .day,
html[data-theme="bourbon"] .cal .day { box-shadow: 0 16px 36px -20px color-mix(in srgb,var(--accent) 46%,transparent), 0 4px 12px rgba(0,0,0,0.15) !important; transition: transform .3s cubic-bezier(.2,1.1,.3,1), box-shadow .3s ease !important; }
html[data-theme="emerald"] .station-card:hover,
html[data-theme="meadow"] .station-card:hover,
html[data-theme="sepia"] .station-card:hover,
html[data-theme="mocha"] .station-card:hover,
html[data-theme="dune"] .station-card:hover,
html[data-theme="bourbon"] .station-card:hover,
html[data-theme="emerald"] .stat:hover,
html[data-theme="meadow"] .stat:hover,
html[data-theme="sepia"] .stat:hover,
html[data-theme="mocha"] .stat:hover,
html[data-theme="dune"] .stat:hover,
html[data-theme="bourbon"] .stat:hover,
html[data-theme="emerald"] .cal .day:hover,
html[data-theme="meadow"] .cal .day:hover,
html[data-theme="sepia"] .cal .day:hover,
html[data-theme="mocha"] .cal .day:hover,
html[data-theme="dune"] .cal .day:hover,
html[data-theme="bourbon"] .cal .day:hover { transform: translateY(-4px) scale(1.012) rotate(-0.4deg) !important; }

/* ----- petal form : rose, grape, fuchsia, candy, velvet, dusk, sakura ----- */
html[data-theme="rose"] .card,
html[data-theme="grape"] .card,
html[data-theme="fuchsia"] .card,
html[data-theme="candy"] .card,
html[data-theme="velvet"] .card,
html[data-theme="dusk"] .card,
html[data-theme="sakura"] .card,
html[data-theme="rose"] .stat,
html[data-theme="grape"] .stat,
html[data-theme="fuchsia"] .stat,
html[data-theme="candy"] .stat,
html[data-theme="velvet"] .stat,
html[data-theme="dusk"] .stat,
html[data-theme="sakura"] .stat,
html[data-theme="rose"] .station-card,
html[data-theme="grape"] .station-card,
html[data-theme="fuchsia"] .station-card,
html[data-theme="candy"] .station-card,
html[data-theme="velvet"] .station-card,
html[data-theme="dusk"] .station-card,
html[data-theme="sakura"] .station-card,
html[data-theme="rose"] .modal,
html[data-theme="grape"] .modal,
html[data-theme="fuchsia"] .modal,
html[data-theme="candy"] .modal,
html[data-theme="velvet"] .modal,
html[data-theme="dusk"] .modal,
html[data-theme="sakura"] .modal,
html[data-theme="rose"] .login-card,
html[data-theme="grape"] .login-card,
html[data-theme="fuchsia"] .login-card,
html[data-theme="candy"] .login-card,
html[data-theme="velvet"] .login-card,
html[data-theme="dusk"] .login-card,
html[data-theme="sakura"] .login-card { border-radius: 26px !important; }
html[data-theme="rose"] .cal .day,
html[data-theme="grape"] .cal .day,
html[data-theme="fuchsia"] .cal .day,
html[data-theme="candy"] .cal .day,
html[data-theme="velvet"] .cal .day,
html[data-theme="dusk"] .cal .day,
html[data-theme="sakura"] .cal .day { border-radius: 20px !important; }
html[data-theme="rose"] .btn,
html[data-theme="grape"] .btn,
html[data-theme="fuchsia"] .btn,
html[data-theme="candy"] .btn,
html[data-theme="velvet"] .btn,
html[data-theme="dusk"] .btn,
html[data-theme="sakura"] .btn { border-radius: 999px !important; }
html[data-theme="rose"] .tab,
html[data-theme="grape"] .tab,
html[data-theme="fuchsia"] .tab,
html[data-theme="candy"] .tab,
html[data-theme="velvet"] .tab,
html[data-theme="dusk"] .tab,
html[data-theme="sakura"] .tab,
html[data-theme="rose"] .pill,
html[data-theme="grape"] .pill,
html[data-theme="fuchsia"] .pill,
html[data-theme="candy"] .pill,
html[data-theme="velvet"] .pill,
html[data-theme="dusk"] .pill,
html[data-theme="sakura"] .pill,
html[data-theme="rose"] .chip,
html[data-theme="grape"] .chip,
html[data-theme="fuchsia"] .chip,
html[data-theme="candy"] .chip,
html[data-theme="velvet"] .chip,
html[data-theme="dusk"] .chip,
html[data-theme="sakura"] .chip,
html[data-theme="rose"] .seg,
html[data-theme="grape"] .seg,
html[data-theme="fuchsia"] .seg,
html[data-theme="candy"] .seg,
html[data-theme="velvet"] .seg,
html[data-theme="dusk"] .seg,
html[data-theme="sakura"] .seg,
html[data-theme="rose"] .seg button,
html[data-theme="grape"] .seg button,
html[data-theme="fuchsia"] .seg button,
html[data-theme="candy"] .seg button,
html[data-theme="velvet"] .seg button,
html[data-theme="dusk"] .seg button,
html[data-theme="sakura"] .seg button { border-radius: 999px !important; }
html[data-theme="rose"] .station-card,
html[data-theme="grape"] .station-card,
html[data-theme="fuchsia"] .station-card,
html[data-theme="candy"] .station-card,
html[data-theme="velvet"] .station-card,
html[data-theme="dusk"] .station-card,
html[data-theme="sakura"] .station-card,
html[data-theme="rose"] .stat,
html[data-theme="grape"] .stat,
html[data-theme="fuchsia"] .stat,
html[data-theme="candy"] .stat,
html[data-theme="velvet"] .stat,
html[data-theme="dusk"] .stat,
html[data-theme="sakura"] .stat,
html[data-theme="rose"] .cal .day,
html[data-theme="grape"] .cal .day,
html[data-theme="fuchsia"] .cal .day,
html[data-theme="candy"] .cal .day,
html[data-theme="velvet"] .cal .day,
html[data-theme="dusk"] .cal .day,
html[data-theme="sakura"] .cal .day { box-shadow: 0 18px 40px -20px color-mix(in srgb,var(--accent-2) 50%,transparent), 0 5px 14px rgba(0,0,0,0.14) !important; transition: transform .3s cubic-bezier(.2,1.1,.3,1), box-shadow .3s ease !important; }
html[data-theme="rose"] .station-card:hover,
html[data-theme="grape"] .station-card:hover,
html[data-theme="fuchsia"] .station-card:hover,
html[data-theme="candy"] .station-card:hover,
html[data-theme="velvet"] .station-card:hover,
html[data-theme="dusk"] .station-card:hover,
html[data-theme="sakura"] .station-card:hover,
html[data-theme="rose"] .stat:hover,
html[data-theme="grape"] .stat:hover,
html[data-theme="fuchsia"] .stat:hover,
html[data-theme="candy"] .stat:hover,
html[data-theme="velvet"] .stat:hover,
html[data-theme="dusk"] .stat:hover,
html[data-theme="sakura"] .stat:hover,
html[data-theme="rose"] .cal .day:hover,
html[data-theme="grape"] .cal .day:hover,
html[data-theme="fuchsia"] .cal .day:hover,
html[data-theme="candy"] .cal .day:hover,
html[data-theme="velvet"] .cal .day:hover,
html[data-theme="dusk"] .cal .day:hover,
html[data-theme="sakura"] .cal .day:hover { transform: translateY(-4px) scale(1.015) !important; }

/* ----- blocky form : slate, nord, terminal ----- */
html[data-theme="slate"] .card,
html[data-theme="nord"] .card,
html[data-theme="terminal"] .card,
html[data-theme="slate"] .stat,
html[data-theme="nord"] .stat,
html[data-theme="terminal"] .stat,
html[data-theme="slate"] .station-card,
html[data-theme="nord"] .station-card,
html[data-theme="terminal"] .station-card,
html[data-theme="slate"] .modal,
html[data-theme="nord"] .modal,
html[data-theme="terminal"] .modal,
html[data-theme="slate"] .login-card,
html[data-theme="nord"] .login-card,
html[data-theme="terminal"] .login-card { border-radius: 0 !important; }
html[data-theme="slate"] .cal .day,
html[data-theme="nord"] .cal .day,
html[data-theme="terminal"] .cal .day { border-radius: 0 !important; }
html[data-theme="slate"] .btn,
html[data-theme="nord"] .btn,
html[data-theme="terminal"] .btn { border-radius: 0 !important; }
html[data-theme="slate"] .tab,
html[data-theme="nord"] .tab,
html[data-theme="terminal"] .tab,
html[data-theme="slate"] .pill,
html[data-theme="nord"] .pill,
html[data-theme="terminal"] .pill,
html[data-theme="slate"] .chip,
html[data-theme="nord"] .chip,
html[data-theme="terminal"] .chip,
html[data-theme="slate"] .seg,
html[data-theme="nord"] .seg,
html[data-theme="terminal"] .seg,
html[data-theme="slate"] .seg button,
html[data-theme="nord"] .seg button,
html[data-theme="terminal"] .seg button { border-radius: 3px !important; }
html[data-theme="slate"] .station-card,
html[data-theme="nord"] .station-card,
html[data-theme="terminal"] .station-card,
html[data-theme="slate"] .stat,
html[data-theme="nord"] .stat,
html[data-theme="terminal"] .stat,
html[data-theme="slate"] .cal .day,
html[data-theme="nord"] .cal .day,
html[data-theme="terminal"] .cal .day { box-shadow: 6px 6px 0 -1px color-mix(in srgb,var(--accent) 24%,transparent), 0 14px 30px -20px rgba(0,0,0,0.5) !important; border: 2px solid color-mix(in srgb,var(--accent) 44%, var(--border)) !important; transition: transform .3s cubic-bezier(.2,1.1,.3,1), box-shadow .3s ease !important; }
html[data-theme="slate"] .station-card:hover,
html[data-theme="nord"] .station-card:hover,
html[data-theme="terminal"] .station-card:hover,
html[data-theme="slate"] .stat:hover,
html[data-theme="nord"] .stat:hover,
html[data-theme="terminal"] .stat:hover,
html[data-theme="slate"] .cal .day:hover,
html[data-theme="nord"] .cal .day:hover,
html[data-theme="terminal"] .cal .day:hover { transform: translateY(-2px) !important; }

/* ----- arch form : andalus ----- */
html[data-theme="andalus"] .card,
html[data-theme="andalus"] .stat,
html[data-theme="andalus"] .station-card,
html[data-theme="andalus"] .modal,
html[data-theme="andalus"] .login-card { border-radius: 90px 90px 16px 16px !important; }
html[data-theme="andalus"] .cal .day { border-radius: 50% 50% 12px 12px !important; }
html[data-theme="andalus"] .btn { border-radius: 999px 999px 10px 10px !important; }
html[data-theme="andalus"] .tab,
html[data-theme="andalus"] .pill,
html[data-theme="andalus"] .chip,
html[data-theme="andalus"] .seg,
html[data-theme="andalus"] .seg button { border-radius: 999px 999px 8px 8px !important; }
html[data-theme="andalus"] .station-card,
html[data-theme="andalus"] .stat,
html[data-theme="andalus"] .cal .day { box-shadow: 0 18px 42px -20px color-mix(in srgb,var(--accent) 50%,transparent), 0 5px 14px rgba(0,0,0,0.18) !important; transition: transform .3s cubic-bezier(.2,1.1,.3,1), box-shadow .3s ease !important; }
html[data-theme="andalus"] .station-card:hover,
html[data-theme="andalus"] .stat:hover,
html[data-theme="andalus"] .cal .day:hover { transform: translateY(-4px) scale(1.012) !important; }

/* ----- champion form : mundial, gilded ----- */
html[data-theme="mundial"] .card,
html[data-theme="gilded"] .card,
html[data-theme="mundial"] .stat,
html[data-theme="gilded"] .stat,
html[data-theme="mundial"] .station-card,
html[data-theme="gilded"] .station-card,
html[data-theme="mundial"] .modal,
html[data-theme="gilded"] .modal,
html[data-theme="mundial"] .login-card,
html[data-theme="gilded"] .login-card { border-radius: 8px !important; }
html[data-theme="mundial"] .cal .day,
html[data-theme="gilded"] .cal .day { border-radius: 8px !important; }
html[data-theme="mundial"] .btn,
html[data-theme="gilded"] .btn { border-radius: 6px !important; }
html[data-theme="mundial"] .tab,
html[data-theme="gilded"] .tab,
html[data-theme="mundial"] .pill,
html[data-theme="gilded"] .pill,
html[data-theme="mundial"] .chip,
html[data-theme="gilded"] .chip,
html[data-theme="mundial"] .seg,
html[data-theme="gilded"] .seg,
html[data-theme="mundial"] .seg button,
html[data-theme="gilded"] .seg button { border-radius: 6px !important; }
html[data-theme="mundial"] .station-card,
html[data-theme="gilded"] .station-card,
html[data-theme="mundial"] .stat,
html[data-theme="gilded"] .stat,
html[data-theme="mundial"] .cal .day,
html[data-theme="gilded"] .cal .day { box-shadow: 0 18px 44px -20px color-mix(in srgb,var(--accent) 60%,transparent), inset 0 1px 0 color-mix(in srgb,#fff 40%,transparent), 0 5px 14px rgba(0,0,0,0.22) !important; border: 2px solid color-mix(in srgb,var(--accent) 66%, #000000) !important; transition: transform .3s cubic-bezier(.2,1.1,.3,1), box-shadow .3s ease !important; }
html[data-theme="mundial"] .station-card:hover,
html[data-theme="gilded"] .station-card:hover,
html[data-theme="mundial"] .stat:hover,
html[data-theme="gilded"] .stat:hover,
html[data-theme="mundial"] .cal .day:hover,
html[data-theme="gilded"] .cal .day:hover { transform: translateY(-4px) scale(1.015) !important; }

/* ----- pixel form : mario ----- */
html[data-theme="mario"] .card,
html[data-theme="mario"] .stat,
html[data-theme="mario"] .station-card,
html[data-theme="mario"] .modal,
html[data-theme="mario"] .login-card { border-radius: 0 !important; }
html[data-theme="mario"] .cal .day { border-radius: 0 !important; }
html[data-theme="mario"] .btn { border-radius: 0 !important; }
html[data-theme="mario"] .tab,
html[data-theme="mario"] .pill,
html[data-theme="mario"] .chip,
html[data-theme="mario"] .seg,
html[data-theme="mario"] .seg button { border-radius: 0 !important; }
html[data-theme="mario"] .station-card,
html[data-theme="mario"] .stat,
html[data-theme="mario"] .cal .day { box-shadow: 5px 5px 0 0 rgba(0,0,0,0.42), 0 0 0 2px color-mix(in srgb,var(--accent) 50%, #000000) !important; border: 0 !important; transition: transform .3s cubic-bezier(.2,1.1,.3,1), box-shadow .3s ease !important; }
html[data-theme="mario"] .station-card:hover,
html[data-theme="mario"] .stat:hover,
html[data-theme="mario"] .cal .day:hover { transform: translate(2px,2px) !important; }

/* ----- horizon form : soluna ----- */
html[data-theme="soluna"] .card,
html[data-theme="soluna"] .stat,
html[data-theme="soluna"] .station-card,
html[data-theme="soluna"] .modal,
html[data-theme="soluna"] .login-card { border-radius: 40px 40px 8px 8px !important; }
html[data-theme="soluna"] .cal .day { border-radius: 50% 50% 8px 8px !important; }
html[data-theme="soluna"] .btn { border-radius: 999px 999px 7px 7px !important; }
html[data-theme="soluna"] .tab,
html[data-theme="soluna"] .pill,
html[data-theme="soluna"] .chip,
html[data-theme="soluna"] .seg,
html[data-theme="soluna"] .seg button { border-radius: 999px !important; }
html[data-theme="soluna"] .station-card,
html[data-theme="soluna"] .stat,
html[data-theme="soluna"] .cal .day { box-shadow: 0 18px 40px -20px color-mix(in srgb,var(--accent) 50%,transparent), 0 5px 14px rgba(0,0,0,0.16) !important; transition: transform .3s cubic-bezier(.2,1.1,.3,1), box-shadow .3s ease !important; }
html[data-theme="soluna"] .station-card:hover,
html[data-theme="soluna"] .stat:hover,
html[data-theme="soluna"] .cal .day:hover { transform: translateY(-4px) scale(1.012) !important; }

/* ----- cloud form : nimbus ----- */
html[data-theme="nimbus"] .card,
html[data-theme="nimbus"] .stat,
html[data-theme="nimbus"] .station-card,
html[data-theme="nimbus"] .modal,
html[data-theme="nimbus"] .login-card { border-radius: 42px 34px 40px 32px !important; }
html[data-theme="nimbus"] .cal .day { border-radius: 24px !important; }
html[data-theme="nimbus"] .btn { border-radius: 999px !important; }
html[data-theme="nimbus"] .tab,
html[data-theme="nimbus"] .pill,
html[data-theme="nimbus"] .chip,
html[data-theme="nimbus"] .seg,
html[data-theme="nimbus"] .seg button { border-radius: 999px !important; }
html[data-theme="nimbus"] .station-card,
html[data-theme="nimbus"] .stat,
html[data-theme="nimbus"] .cal .day { box-shadow: 0 18px 42px -22px color-mix(in srgb,var(--accent) 46%,transparent), 0 6px 16px rgba(0,0,0,0.14) !important; transition: transform .3s cubic-bezier(.2,1.1,.3,1), box-shadow .3s ease !important; }
html[data-theme="nimbus"] .station-card:hover,
html[data-theme="nimbus"] .stat:hover,
html[data-theme="nimbus"] .cal .day:hover { transform: translateY(-4px) scale(1.012) !important; }

/* Sculpted forms: static edge lighting, not animated blur or pointer tracking.
   Preserve each family's existing silhouette and background artwork. */
html[data-theme] {
  --form-lit: #ffffff38;
  --form-shade: color-mix(in srgb, var(--accent) 18%, #00000066);
  --form-cast: #00000040;
  --form-bevel: 2px;
  --form-depth: 4px;
  --form-shadow: inset 1px var(--form-bevel) 1px var(--form-lit),
    inset -1px calc(-1 * var(--form-bevel)) 1px var(--form-shade),
    0 var(--form-depth) 0 -1px var(--form-shade),
    0 10px 16px -10px var(--form-cast);
}
html[data-theme][data-mode="light"] {
  --form-lit: #ffffffed;
  --form-shade: color-mix(in srgb, var(--accent) 28%, #53607855);
  --form-cast: #243b5360;
}
html:is([data-theme="mario"],[data-theme="terminal"]) { --form-bevel: 3px; --form-depth: 5px; }
html:is([data-theme="gilded"],[data-theme="andalus"]) { --form-bevel: 3px; }
html[data-theme] :is(.card,.stat,.station-card,.add-card,.modal,.login-card,.cal .day:not(.empty)) {
  box-shadow: var(--form-shadow) !important;
  /* Repeated surfaces on long pages must not sample/blur the entire backdrop. */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: transform .18s ease !important;
}
html[data-theme] :is(.btn,.tab,.seg button) {
  box-shadow: inset 0 1px 0 var(--form-lit), inset 0 -2px 0 var(--form-shade),
    0 2px 3px -2px var(--form-cast) !important;
  transition: transform .15s ease, color .15s ease, background-color .15s ease !important;
}
html[data-theme] :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
  box-shadow: inset 0 2px 3px -1px var(--form-shade), inset 0 -1px 0 var(--form-lit) !important;
}
/* A focus ring remains distinct from the decorative bevel. */
html[data-theme] :is(.btn,.tab,.seg button,input,select,textarea,[tabindex]):focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 3px;
}
/* Prism: asymmetric cut-glass corners. Glacier: softly rounded ice slabs. */
html[data-theme="prism"] :is(.card,.stat,.station-card,.add-card,.modal,.login-card,.cal .day) {
  border-radius: 20px 7px 20px 7px !important;
}
html[data-theme="glacier"] :is(.card,.stat,.station-card,.add-card,.modal,.login-card,.cal .day) {
  border-radius: 24px 24px 10px 10px !important;
}
html[data-theme="prism"] :is(.btn,.tab,.seg button) { border-radius: 10px 4px !important; }
html[data-theme="glacier"] :is(.btn,.tab,.seg button) { border-radius: 12px 12px 5px 5px !important; }
/* Bubbly's volume comes from a bright upper rim and a shaded lower rim.
   Small calendar bubbles use the same lighting at a smaller scale. */
html[data-theme="bubbly"] {
  --bubble-light: #ffffff80;
  --bubble-shade: color-mix(in srgb, var(--accent) 26%, #00000088);
  --form-shadow: inset 3px 4px 5px var(--bubble-light),
    inset -4px -6px 10px var(--bubble-shade),
    0 3px 0 -1px var(--bubble-shade), 0 12px 18px -12px var(--form-cast);
}
html[data-theme="bubbly"][data-mode="light"] {
  --bubble-light: #ffffff;
  --bubble-shade: color-mix(in srgb, var(--accent) 32%, #32677d88);
}
html[data-theme="bubbly"] .cal .day:not(.empty) {
  --form-shadow: inset 2px 3px 3px var(--bubble-light),
    inset -3px -4px 6px var(--bubble-shade),
    0 2px 0 -1px var(--bubble-shade), 0 6px 9px -6px var(--form-cast);
}
html[data-theme="bubbly"] :is(.card,.stat,.station-card,.cal .day)::before { filter: none; }
html[data-theme="bubbly"] body::before { animation: none; }
html[data-theme="bubbly"] .station-grid { grid-template-columns: repeat(auto-fill,minmax(min(330px,100%),1fr)) !important; }
/* Keep long lists steady: only transform on hover; no animated shadows. */
html[data-theme] :is(.station-card,.add-card,.cal .day:not(.empty)):hover { transform: translateY(-2px) !important; }
html[data-theme] :is(.btn,.tab,.seg button):active { transform: translateY(1px) !important; }
@media (prefers-reduced-motion: reduce), (hover: none) {
  html[data-theme][data-mode] :is(.card,.stat,.station-card,.add-card,.cal .day:not(.empty),.btn,.tab,.seg button):is(:hover,:active,*) {
    transition: none !important;
    transform: none !important;
  }
}
@media print {
  html[data-theme][data-mode] :is(.card,.stat,.station-card,.add-card,.modal,.login-card,.cal .day:not(.empty),.btn,input,select,textarea) { box-shadow: none !important; }
}

/* Group subpages with a quiet inset surface rather than a vertical rail. */
.station-tabs-v .station-submenu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 8px 16px;
  padding: 6px;
  border: 0;
  border-radius: var(--radius-input);
  background: var(--tint-08);
  min-width: 0;
}
@media (max-width: 980px) {
  .station-tabs-v .station-submenu { flex-basis: calc(100% - 16px); }
}

/* Theme button gradients must not make both fuel views appear selected. */
html[data-theme] .btn[data-fuel-view][aria-pressed="false"] {
  background: transparent !important;
  color: var(--muted) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.coupon-counter-grid { display:grid; grid-template-columns:minmax(180px,1fr) minmax(260px,1.5fr); gap:28px; }
.coupon-counter input { width:100%; min-width:0; }
.coupon-counter [data-totals] dl { display:grid; grid-template-columns:1fr auto; gap:8px; }
.coupon-counter [data-totals] dd { margin:0; text-align:right; }
@media(max-width:700px) { .coupon-counter-grid { grid-template-columns:1fr; } }

/* ==================== Bubbly FIX — button hierarchy (unselected vs selected) + readable sub-text ==================== */
/* Root cause: the earlier rule filled EVERY .btn with the bright accent bubble, so tab buttons all
   looked selected and light `.muted` sub-text (game #/pack #) vanished on the bright fill.
   Plain .btn is now a SOFT tinted bubble (unselected); the bright fill is kept only for selected/
   action buttons (.primary/.success/.info/.warn/.danger) and active tabs/pills. */
html[data-theme="bubbly"] .btn {
  color: var(--text) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important;
  background:
    radial-gradient(120% 85% at 28% 18%, rgba(255,255,255,0.14), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb,var(--accent) 16%, transparent), color-mix(in srgb,var(--accent-3) 10%, transparent)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 14px -10px color-mix(in srgb,var(--accent) 40%,transparent) !important;
}
html[data-theme="bubbly"] .btn:hover {
  border-color: var(--accent) !important;
  background:
    radial-gradient(120% 85% at 28% 18%, rgba(255,255,255,0.22), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb,var(--accent) 26%, transparent), color-mix(in srgb,var(--accent-3) 16%, transparent)) !important;
}
html[data-theme="bubbly"] .btn.ghost {
  border-color: transparent !important; color: var(--muted) !important;
  background: color-mix(in srgb,var(--accent) 10%, transparent) !important;
  box-shadow: none !important;
}
html[data-theme="bubbly"] .btn.ghost:hover { color: var(--text) !important; background: color-mix(in srgb,var(--accent) 18%, transparent) !important; }

/* Selected / action buttons keep a bright glossy fill — these are what should "pop" */
html[data-theme="bubbly"] .btn.primary { color:#fff !important; border:none !important;
  background: radial-gradient(100% 80% at 30% 20%, rgba(255,255,255,0.5), transparent 55%), var(--grad-primary) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 10px 22px -8px color-mix(in srgb,var(--accent) 55%,transparent) !important; }
html[data-theme="bubbly"] .btn.success { color:#04241d !important; border:none !important;
  background: radial-gradient(100% 80% at 30% 20%, rgba(255,255,255,0.55), transparent 55%), var(--grad-success) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 10px 22px -8px rgba(0,0,0,0.18) !important; }
html[data-theme="bubbly"] .btn.info { color:#fff !important; border:none !important;
  background: radial-gradient(100% 80% at 30% 20%, rgba(255,255,255,0.5), transparent 55%), var(--grad-info) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 10px 22px -8px rgba(0,0,0,0.18) !important; }
html[data-theme="bubbly"] .btn.warn { color:#3a2400 !important; border:none !important;
  background: radial-gradient(100% 80% at 30% 20%, rgba(255,255,255,0.55), transparent 55%), var(--grad-warn) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 10px 22px -8px rgba(0,0,0,0.18) !important; }
html[data-theme="bubbly"] .btn.danger { color:#fff !important; border:none !important;
  background: radial-gradient(100% 80% at 30% 20%, rgba(255,255,255,0.5), transparent 55%), var(--grad-danger) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 10px 22px -8px rgba(0,0,0,0.18) !important; }

/* Sub-text that sits INSIDE a bright filled button must not stay light-gray (it disappeared before) */
html[data-theme="bubbly"] .btn.primary .muted, html[data-theme="bubbly"] .btn.primary .small,
html[data-theme="bubbly"] .btn.info .muted, html[data-theme="bubbly"] .btn.danger .muted { color: rgba(255,255,255,0.9) !important; }
html[data-theme="bubbly"] .btn.success .muted, html[data-theme="bubbly"] .btn.warn .muted { color: rgba(0,0,0,0.6) !important; }
/* Sub-text inside a soft (unselected) pick button follows the normal muted tone and is readable on the dark bubble */
html[data-theme="bubbly"] .btn .muted { color: var(--muted) !important; }

/* ==================== Cloudy · Skyforms — palette (dark night-sky clouds + light day-sky) ==================== */
html[data-theme="cloudy"] {
  --tint:#7fb4ef; --accent:#7fb4ef; --accent-2:#9fc8f5; --accent-3:#bfe0ff;
  --font:"Quicksand","Fredoka",-apple-system,sans-serif;
  --bg:#0d1b2e; --panel:#20344f; --panel-2:#2a3f5c; --border:rgba(170,200,235,0.20);
  --text:#eef5ff; --muted:#a7bcd6; --input-bg:#12233a; --link:#bfe0ff;
  --shadow:0 22px 48px -24px rgba(0,0,0,0.6);
  --app-bg:radial-gradient(60% 40% at 16% 10%,rgba(143,195,255,0.20),transparent 70%),radial-gradient(54% 40% at 84% 16%,rgba(201,182,240,0.16),transparent 72%),radial-gradient(70% 50% at 50% 108%,rgba(191,224,255,0.14),transparent 70%),linear-gradient(180deg,#0d1b2e,#0a1626);
}
html[data-theme="cloudy"][data-mode="light"] {
  --accent:#2f7fe0; --accent-2:#5aa0ee; --accent-3:#8fc4f7;
  --bg:#b9d7ff; --panel:#ffffff; --panel-2:#e2f0ff; --border:rgba(90,140,190,0.20);
  --text:#1e3a52; --muted:#5e7791; --input-bg:#ffffff; --link:#2f74c0;
  --shadow:0 20px 44px -24px rgba(40,90,140,0.42);
  --app-bg:radial-gradient(60% 40% at 16% 10%,rgba(120,180,245,0.28),transparent 70%),radial-gradient(54% 40% at 84% 16%,rgba(180,143,224,0.18),transparent 72%),radial-gradient(70% 50% at 50% 108%,rgba(255,255,255,0.5),transparent 70%),linear-gradient(180deg,#b9d7ff,#d4e8ff);
}

/* ==================== Cloudy · Skyforms — cloud-shaped 3D FORM ==================== */
html[data-theme="cloudy"] { --cloud-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20120%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Crect%20x%3D%2214%22%20y%3D%2258%22%20width%3D%22172%22%20height%3D%2254%22%20rx%3D%2227%22%2F%3E%3Ccircle%20cx%3D%2252%22%20cy%3D%2266%22%20r%3D%2234%22%2F%3E%3Ccircle%20cx%3D%2296%22%20cy%3D%2242%22%20r%3D%2242%22%2F%3E%3Ccircle%20cx%3D%22142%22%20cy%3D%2260%22%20r%3D%2238%22%2F%3E%3Ccircle%20cx%3D%22118%22%20cy%3D%2282%22%20r%3D%2230%22%2F%3E%3Ccircle%20cx%3D%2272%22%20cy%3D%2284%22%20r%3D%2227%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --cur-hand: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2220%22%20viewBox%3D%220%200%2026%2020%22%3E%3Cpath%20d%3D%22M7%2017.5%20Q1.8%2017.5%201.8%2012.3%20Q1.8%207.6%207%207.8%20Q8%202.6%2013.6%203.4%20Q18.2%201.8%2019.6%206.8%20Q24.2%206.8%2024.2%2012.3%20Q24.2%2017.5%2019%2017.5%20Z%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%233f82d6%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cellipse%20cx%3D%229%22%20cy%3D%229.3%22%20rx%3D%222.4%22%20ry%3D%221.3%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.95%22%2F%3E%3C%2Fsvg%3E") 13 10; }
html[data-theme="cloudy"] input, html[data-theme="cloudy"] textarea, html[data-theme="cloudy"] [contenteditable="true"] { cursor: text !important; }

/* Airy rounded type */
html[data-theme="cloudy"], html[data-theme="cloudy"] body { font-family:"Quicksand","Fredoka",sans-serif; letter-spacing:.012em; }
html[data-theme="cloudy"] h1, html[data-theme="cloudy"] h2, html[data-theme="cloudy"] h3, html[data-theme="cloudy"] h4,
html[data-theme="cloudy"] .brand, html[data-theme="cloudy"] .month-bar .title { font-family:"Quicksand","Fredoka",sans-serif; font-weight:700; color:#cfe6ff; -webkit-text-fill-color:currentColor; }
html[data-theme="cloudy"][data-mode="light"] h1, html[data-theme="cloudy"][data-mode="light"] h2, html[data-theme="cloudy"][data-mode="light"] h3,
html[data-theme="cloudy"][data-mode="light"] h4, html[data-theme="cloudy"][data-mode="light"] .brand { color:#2d5a86; }

/* THE FORM — hero surfaces become true cloud silhouettes with a shape-hugging 3D cast shadow.
   mask gives the cloud outline; filter:drop-shadow follows that outline (real 3D); inset shadows
   paint the puffy top rim + underside shade for contour. */
html[data-theme="cloudy"] .station-card,
html[data-theme="cloudy"] .stat,
html[data-theme="cloudy"] .cal .day:not(.empty) {
  -webkit-mask: var(--cloud-mask) center/100% 100% no-repeat; mask: var(--cloud-mask) center/100% 100% no-repeat;
  border: none !important;
  background:
    radial-gradient(120% 85% at 50% 9%, color-mix(in srgb,#ffffff 26%, transparent), transparent 56%),
    radial-gradient(92% 56% at 50% 103%, rgba(0,0,0,0.22), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb,var(--panel) 80%, #ffffff), var(--panel-2)) !important;
  box-shadow:
    inset 0 12px 18px rgba(255,255,255,0.42),
    inset 0 -18px 24px color-mix(in srgb,var(--accent) 20%, transparent) !important;
  filter:
    drop-shadow(0 16px 15px color-mix(in srgb,var(--accent) 30%, rgba(10,22,40,0.5)))
    drop-shadow(0 4px 5px rgba(10,22,40,0.3));
  transition: transform .34s cubic-bezier(.2,1.15,.3,1), filter .3s ease !important;
}
html[data-theme="cloudy"] .station-card:hover,
html[data-theme="cloudy"] .stat:hover,
html[data-theme="cloudy"] .cal .day:not(.empty):hover {
  filter: drop-shadow(0 24px 22px color-mix(in srgb,var(--accent) 40%, rgba(10,22,40,0.5))) drop-shadow(0 6px 8px rgba(10,22,40,0.3)) !important;
}

/* Empty leading days = recessed 3D cloud holes the real clouds pop out of */
html[data-theme="cloudy"] .cal .day.empty {
  -webkit-mask: var(--cloud-mask) center/100% 100% no-repeat; mask: var(--cloud-mask) center/100% 100% no-repeat;
  border: none !important; filter: none !important; opacity: 1 !important; cursor: default !important;
  background: linear-gradient(180deg, color-mix(in srgb,var(--bg) 60%, #000 22%), color-mix(in srgb,var(--bg) 86%, #000 6%)) !important;
  box-shadow: inset 0 9px 16px rgba(0,0,0,0.55), inset 0 -6px 11px rgba(255,255,255,0.05) !important;
}

/* Calendar: uniform cloud tiles, full width, centered content */
html[data-theme="cloudy"] .cal { grid-template-columns: repeat(7,1fr) !important; max-width:94% !important; margin-left:auto !important; margin-right:auto !important; gap:14px !important; }
html[data-theme="cloudy"] .cal .day {
  width:auto !important; justify-self:stretch !important; aspect-ratio: 1 / 0.72 !important; min-height:0 !important;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:9% 6% !important;
}
html[data-theme="cloudy"] .cal .day .num { width:100%; text-align:center; font-size:19px; }
html[data-theme="cloudy"] .cal .day.today .num { font-size:21px; }
html[data-theme="cloudy"] .cal .day .mini { width:100%; text-align:center; font-size:10px; margin-top:1px; line-height:1.3; }

/* Station cards: cloud silhouette with centered content (keeps text inside the solid middle) */
html[data-theme="cloudy"] .station-grid { grid-template-columns: repeat(auto-fill, minmax(340px,1fr)) !important; gap:26px !important; }
html[data-theme="cloudy"] .station-card { padding:17% 15% 15% !important; display:flex !important; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:visible; }
html[data-theme="cloudy"] .station-card .sc-head { flex-direction:column; align-items:center; gap:3px; width:100%; }
html[data-theme="cloudy"] .station-card .sc-head > div { min-width:0; width:100%; }
html[data-theme="cloudy"] .station-card h3 { margin:0 0 1px; text-align:center; color:var(--text) !important; font-weight:700 !important; }
html[data-theme="cloudy"] .station-card .meta { white-space:normal; text-align:center; }
html[data-theme="cloudy"] .station-card .sc-balance { background:transparent !important; border:none !important; padding:4px 0 2px !important; margin:7px 0 5px !important; text-align:center; width:100%; }
html[data-theme="cloudy"] .station-card .sc-bal-num, html[data-theme="cloudy"] .station-card .sc-bal-label { text-align:center; }
html[data-theme="cloudy"] .station-card .sc-prices { justify-content:center; margin-bottom:7px; }
html[data-theme="cloudy"] .station-card .sc-rows { border-top:none !important; padding-top:0 !important; width:100%; align-items:center; gap:4px; }
html[data-theme="cloudy"] .station-card .ov-row { justify-content:center; gap:6px; font-size:12px; }

/* Generic cards (tables, panels) — NOT masked (would clip content); puffy cloud radius + soft 3D */
html[data-theme="cloudy"] .card:not(.station-card):not(.stat) {
  border-radius: 38px 34px 34px 30px / 44px 40px 32px 30px !important;
  border:1px solid color-mix(in srgb,#ffffff 28%, var(--border)) !important;
  background:
    radial-gradient(120% 70% at 50% 6%, color-mix(in srgb,#ffffff 22%, transparent), transparent 52%),
    linear-gradient(180deg, color-mix(in srgb,var(--panel) 84%, #ffffff), var(--panel-2)) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), 0 18px 40px -20px color-mix(in srgb,var(--accent) 38%, transparent), 0 4px 12px rgba(10,22,40,0.14) !important;
}
html[data-theme="cloudy"] .modal, html[data-theme="cloudy"] .login-card { border-radius: 34px !important; }

/* Buttons: puffy cloud pills with the same selected/unselected hierarchy as Bubbly */
html[data-theme="cloudy"] .btn {
  border-radius:999px !important; color:var(--text) !important; font-weight:600 !important;
  border:1px solid color-mix(in srgb,var(--accent) 30%, transparent) !important;
  background:
    radial-gradient(120% 90% at 30% 12%, rgba(255,255,255,0.3), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb,var(--accent) 18%, transparent), color-mix(in srgb,var(--accent-3) 12%, transparent)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 16px -10px color-mix(in srgb,var(--accent) 45%,transparent) !important;
  transition: transform .2s cubic-bezier(.2,1.3,.3,1), box-shadow .2s ease, background .2s ease !important;
}
html[data-theme="cloudy"] .btn:hover { transform: translateY(-2px) scale(1.04); border-color:var(--accent) !important; }
html[data-theme="cloudy"] .btn:active { transform: scale(.96); }
html[data-theme="cloudy"] .btn.ghost { border-color:transparent !important; color:var(--muted) !important; background:color-mix(in srgb,var(--accent) 10%, transparent) !important; box-shadow:none !important; }
html[data-theme="cloudy"] .btn.ghost:hover { color:var(--text) !important; background:color-mix(in srgb,var(--accent) 18%, transparent) !important; }
html[data-theme="cloudy"] .btn.primary { color:#fff !important; border:none !important; background:radial-gradient(100% 80% at 30% 18%, rgba(255,255,255,0.5), transparent 55%), var(--grad-primary) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 10px 22px -8px color-mix(in srgb,var(--accent) 55%,transparent) !important; }
html[data-theme="cloudy"] .btn.success { color:#04241d !important; border:none !important; background:radial-gradient(100% 80% at 30% 18%, rgba(255,255,255,0.55), transparent 55%), var(--grad-success) !important; }
html[data-theme="cloudy"] .btn.info { color:#fff !important; border:none !important; background:radial-gradient(100% 80% at 30% 18%, rgba(255,255,255,0.5), transparent 55%), var(--grad-info) !important; }
html[data-theme="cloudy"] .btn.warn { color:#3a2400 !important; border:none !important; background:radial-gradient(100% 80% at 30% 18%, rgba(255,255,255,0.55), transparent 55%), var(--grad-warn) !important; }
html[data-theme="cloudy"] .btn.danger { color:#fff !important; border:none !important; background:radial-gradient(100% 80% at 30% 18%, rgba(255,255,255,0.5), transparent 55%), var(--grad-danger) !important; }
html[data-theme="cloudy"] .btn.primary .muted, html[data-theme="cloudy"] .btn.info .muted, html[data-theme="cloudy"] .btn.danger .muted { color:rgba(255,255,255,0.9) !important; }
html[data-theme="cloudy"] .tab, html[data-theme="cloudy"] .pill, html[data-theme="cloudy"] .chip, html[data-theme="cloudy"] .seg, html[data-theme="cloudy"] .seg button { border-radius:999px !important; }
html[data-theme="cloudy"] .tab.active, html[data-theme="cloudy"] .pill.active { background:radial-gradient(100% 80% at 30% 18%, rgba(255,255,255,0.6), transparent 55%), linear-gradient(135deg, var(--accent), var(--accent-2)) !important; color:#06243a !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 16px -6px color-mix(in srgb,var(--accent) 55%,transparent) !important; }

/* Inputs: soft rounded sky glass */
html[data-theme="cloudy"] input, html[data-theme="cloudy"] select, html[data-theme="cloudy"] textarea {
  border-radius: 18px !important; border:1px solid color-mix(in srgb,#fff 38%,var(--border)) !important;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.45) !important;
}
html[data-theme="cloudy"] ::selection { background: color-mix(in srgb,var(--accent) 36%, transparent); color: inherit; }

/* Drifting ambient clouds behind everything */
html[data-theme="cloudy"] body::before {
  content:""; position:fixed; inset:-10%; z-index:0; pointer-events:none; background-repeat:no-repeat;
  background-image:
    radial-gradient(28% 16% at 18% 26%, rgba(255,255,255,0.14), transparent 70%),
    radial-gradient(34% 18% at 74% 34%, rgba(255,255,255,0.12), transparent 72%),
    radial-gradient(24% 14% at 52% 70%, rgba(255,255,255,0.10), transparent 72%),
    radial-gradient(30% 16% at 88% 76%, rgba(255,255,255,0.10), transparent 72%);
  animation: cloudy-drift 26s ease-in-out infinite alternate;
}
@keyframes cloudy-drift { 0%{ transform: translateX(0) translateY(0) } 100%{ transform: translateX(2.5%) translateY(-1.4%) } }
html[data-theme="cloudy"] #app-view, html[data-theme="cloudy"] #login-view { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { html[data-theme="cloudy"] body::before { animation: none !important; } }

/* ==================== Bubbly — empty leading days become recessed 3D sphere holes ==================== */
html[data-theme="bubbly"] .cal .day.empty {
  border-radius: 50% !important; border: none !important; cursor: default !important; opacity: 1 !important;
  background: linear-gradient(180deg, color-mix(in srgb,var(--bg) 58%, #000 24%), color-mix(in srgb,var(--bg) 86%, #000 8%)) !important;
  box-shadow: inset 0 8px 15px rgba(0,0,0,0.55), inset 0 -5px 10px rgba(255,255,255,0.06) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
html[data-theme="bubbly"] .cal .day.empty::before { display:none !important; }

/* ==================== Cloudy — stronger 3D edge contour (crisp cloud rim) + mode-aware sky shade ==================== */
html[data-theme="cloudy"] .station-card,
html[data-theme="cloudy"] .stat,
html[data-theme="cloudy"] .cal .day:not(.empty) {
  box-shadow:
    inset 0 14px 20px rgba(255,255,255,0.52),
    inset 0 -22px 28px color-mix(in srgb,var(--accent) 32%, rgba(10,22,40,0.35)) !important;
  filter:
    drop-shadow(0 0 1.2px rgba(255,255,255,0.85))
    drop-shadow(0 16px 15px color-mix(in srgb,var(--accent) 38%, rgba(10,22,40,0.55)))
    drop-shadow(0 4px 5px rgba(10,22,40,0.3)) !important;
}
html[data-theme="cloudy"][data-mode="light"] .station-card,
html[data-theme="cloudy"][data-mode="light"] .stat,
html[data-theme="cloudy"][data-mode="light"] .cal .day:not(.empty) {
  box-shadow:
    inset 0 12px 18px rgba(255,255,255,0.9),
    inset 0 -20px 26px color-mix(in srgb,var(--accent) 26%, transparent) !important;
  filter:
    drop-shadow(0 0 1.5px color-mix(in srgb,var(--accent) 82%, #0a2a55))
    drop-shadow(0 14px 14px color-mix(in srgb,var(--accent) 42%, rgba(30,70,120,0.42)))
    drop-shadow(0 3px 4px rgba(30,70,120,0.3)) !important;
}

/* ==================== Cloudy — remove style-injected decorative symbols (they collided with centered cloud text) ==================== */
html[data-theme="cloudy"] .station-card::after,
html[data-theme="cloudy"] .station-card .sc-balance::after,
html[data-theme="cloudy"] .stat::after,
html[data-theme="cloudy"] .card:not(.station-card)::after {
  content: none !important; display: none !important; background: none !important; -webkit-mask: none !important; mask: none !important; animation: none !important;
}

/* Cloudy — hover: pop out more, with a gentle cloud wobble (lift + scale baked into the keyframes so it isn't frozen) */
@keyframes cloudy-wobble {
  0%   { transform: translateY(-8px)  scale(1.05)  rotate(-1.1deg) translateX(-2px); }
  25%  { transform: translateY(-10px) scale(1.055) rotate(0.5deg)  translateX(1px); }
  50%  { transform: translateY(-8px)  scale(1.05)  rotate(1.1deg)  translateX(2px); }
  75%  { transform: translateY(-10px) scale(1.055) rotate(0.2deg)  translateX(1px); }
  100% { transform: translateY(-8px)  scale(1.05)  rotate(-1.1deg) translateX(-2px); }
}
html[data-theme="cloudy"] .station-card:hover,
html[data-theme="cloudy"] .stat:hover,
html[data-theme="cloudy"] .cal .day:not(.empty):hover {
  transform-origin: center bottom;
  animation: cloudy-wobble 2.2s ease-in-out infinite !important;
  filter: drop-shadow(0 26px 24px color-mix(in srgb,var(--accent) 44%, rgba(10,22,40,0.5))) drop-shadow(0 8px 10px rgba(10,22,40,0.32)) !important;
}
html[data-theme="cloudy"][data-mode="light"] .station-card:hover,
html[data-theme="cloudy"][data-mode="light"] .stat:hover,
html[data-theme="cloudy"][data-mode="light"] .cal .day:not(.empty):hover {
  filter: drop-shadow(0 0 1.6px color-mix(in srgb,var(--accent) 82%, #0a2a55)) drop-shadow(0 24px 22px color-mix(in srgb,var(--accent) 46%, rgba(30,70,120,0.42))) drop-shadow(0 6px 8px rgba(30,70,120,0.3)) !important;
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="cloudy"] .station-card:hover, html[data-theme="cloudy"] .stat:hover, html[data-theme="cloudy"] .cal .day:not(.empty):hover { animation: none !important; transform: translateY(-8px) scale(1.04) !important; }
}

/* Paint the cloud directly: no negative stacking layer or backdrop sampling. */
html[data-theme="cloudy"] { --cloud-surface: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-2%20200%20120%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22fill%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%236885aa%22%2F%3E%3Cstop%20offset%3D%22.48%22%20stop-color%3D%22%23304966%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23182e49%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22rim%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23acccef%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23182e49%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22light%22%20cx%3D%22.4%22%20cy%3D%22.24%22%20r%3D%22.7%22%3E%3Cstop%20stop-color%3D%22white%22%20stop-opacity%3D%22.5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22white%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M41%20112C26%20112%2014%20101%2014%2086C14%2078%2017%2071%2022%2066C18%2047%2032%2032%2051%2032C55%2013%2073%200%2096%200C119%200%20134%2013%20138%2023C161%2020%20180%2038%20180%2060C190%2067%20194%2078%20192%2088C190%20102%20180%20112%20165%20112Z%22%20fill%3D%22url%28%23fill%29%22%20stroke%3D%22url%28%23rim%29%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M41%20112C26%20112%2014%20101%2014%2086C14%2078%2017%2071%2022%2066C18%2047%2032%2032%2051%2032C55%2013%2073%200%2096%200C119%200%20134%2013%20138%2023C161%2020%20180%2038%20180%2060C190%2067%20194%2078%20192%2088C190%20102%20180%20112%20165%20112Z%22%20fill%3D%22url%28%23light%29%22%2F%3E%3Cpath%20d%3D%22M26%2088C28%2099%2035%20104%2048%20104H162C176%20104%20183%2096%20184%2087%22%20fill%3D%22none%22%20stroke%3D%22%23182e49%22%20stroke-width%3D%223%22%20opacity%3D%22.55%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
html[data-theme="cloudy"][data-mode="light"] { --cloud-surface: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-2%20200%20120%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22fill%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23ffffff%22%2F%3E%3Cstop%20offset%3D%22.48%22%20stop-color%3D%22%23f5faff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2395b9dd%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22rim%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23ffffff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2395b9dd%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22light%22%20cx%3D%22.4%22%20cy%3D%22.24%22%20r%3D%22.7%22%3E%3Cstop%20stop-color%3D%22white%22%20stop-opacity%3D%22.5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22white%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M41%20112C26%20112%2014%20101%2014%2086C14%2078%2017%2071%2022%2066C18%2047%2032%2032%2051%2032C55%2013%2073%200%2096%200C119%200%20134%2013%20138%2023C161%2020%20180%2038%20180%2060C190%2067%20194%2078%20192%2088C190%20102%20180%20112%20165%20112Z%22%20fill%3D%22url%28%23fill%29%22%20stroke%3D%22url%28%23rim%29%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M41%20112C26%20112%2014%20101%2014%2086C14%2078%2017%2071%2022%2066C18%2047%2032%2032%2051%2032C55%2013%2073%200%2096%200C119%200%20134%2013%20138%2023C161%2020%20180%2038%20180%2060C190%2067%20194%2078%20192%2088C190%20102%20180%20112%20165%20112Z%22%20fill%3D%22url%28%23light%29%22%2F%3E%3Cpath%20d%3D%22M26%2088C28%2099%2035%20104%2048%20104H162C176%20104%20183%2096%20184%2087%22%20fill%3D%22none%22%20stroke%3D%22%2395b9dd%22%20stroke-width%3D%223%22%20opacity%3D%22.55%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
html[data-theme="cloudy"][data-mode] :is(.station-card,.stat,.cal .day:not(.empty)) {
  position:relative; isolation:isolate;
  -webkit-mask:none !important; mask:none !important;
  background:var(--cloud-surface) center / 100% 100% no-repeat !important;
  border:0 !important; box-shadow:none !important; filter:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  overflow:visible; animation:none !important; transition:transform .18s ease !important;
}
html[data-theme="cloudy"][data-mode] :is(.station-card,.stat,.cal .day:not(.empty))::before {
  content:none !important; display:none !important;
}
html[data-theme="cloudy"][data-mode] :is(.station-card,.stat,.cal .day:not(.empty)):hover {
  filter:none !important; animation:none !important; transform:translateY(-3px) !important;
}
html[data-theme="cloudy"] body::before { animation:none !important; }
@media (prefers-reduced-motion:reduce) {
  html[data-theme="cloudy"][data-mode] :is(.station-card,.stat,.cal .day:not(.empty)) { transition:none !important; }
  html[data-theme="cloudy"][data-mode] :is(.station-card,.stat,.cal .day:not(.empty)):hover { transform:none !important; }
}

/* Mario power-up blocks: solid faces and chunky rims, without clipping content. */
html[data-theme="mario"] {
  --block-edge:#bd822b; --block-highlight:#ffe399; --block-shade:#715027;
}
html[data-theme="mario"] :is(.card,.stat,.station-card,.modal,.login-card,.cal .day:not(.empty)) {
  border-radius:14px !important;
  border:3px solid var(--block-edge) !important;
  background:linear-gradient(145deg,var(--panel),var(--panel-2)) !important;
  box-shadow:inset 3px 3px 0 var(--block-highlight), inset -3px -3px 0 var(--block-shade),
    0 5px 0 var(--block-shade) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  filter:none !important; animation:none !important;
}
html[data-theme="mario"] :is(.station-card,.stat,.cal .day:not(.empty)) {
  border-radius:18px !important;
  border-width:4px !important;
}
html[data-theme="mario"] .card::before { content:none !important; display:none !important; }
html[data-theme="mario"] :is(.btn,.tab,.pill,.chip,.seg,.seg button) { border-radius:8px !important; }
html[data-theme="mario"] .cal .day.empty { border-radius:18px !important; box-shadow:none !important; border:1px dashed var(--border) !important; }
html[data-theme="mario"] .cal .day.today { border-color:var(--accent-2) !important; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  html[data-theme="mario"] :is(.station-card,.stat,.cal .day:not(.empty)):hover { transform:translateY(-2px) !important; }
}
@media (prefers-reduced-motion:reduce) {
  html[data-theme="mario"] :is(.station-card,.stat,.cal .day):hover { transform:none !important; }
}

/* Outside themed cards so their transforms cannot trap the floating save control. */
.shift-save-dock {
  position:fixed; right:20px; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:40;
  display:flex; align-items:center; gap:12px; max-width:calc(100vw - 32px);
  padding:10px 14px; background:var(--panel); color:var(--text);
  border:1px solid var(--border); border-radius:14px; box-shadow:0 4px 16px #0003;
}
.shift-save-dock > .btn { flex-shrink:0; }
.shift-save-space { height:88px; }
@media(max-width:600px) {
  .shift-save-dock { right:12px; gap:8px; padding:8px 10px; }
  .shift-save-dock > span { max-width:180px; font-size:11px; }
}

/* ==================== Cloudy — seat day numbers inside the cloud body + brighter weekday letters ==================== */
/* The cloud silhouette is puffy on top and solid in the lower band, so vertically-centered content
   floated too high (over the thin top puffs). Drop the number into the solid body. */
html[data-theme="cloudy"] .cal .day { justify-content: flex-end !important; padding: 7% 8% 22% !important; }
html[data-theme="cloudy"] .cal .day .num { line-height: 1.05; }
html[data-theme="cloudy"] .cal .day.today { padding-bottom: 20% !important; }
/* Weekday header letters (S M T W T F S) above the numbers — brighter in dark, deep sky in light */
html[data-theme="cloudy"] .cal .dow { color: #cfe6ff !important; font-weight: 600 !important; opacity: 1 !important; }
html[data-theme="cloudy"][data-mode="light"] .cal .dow { color: #26557f !important; }

/* ==================== Cloudy — right sidebar stat clouds: larger titles, content seated in the cloud body ==================== */
html[data-theme="cloudy"] .stats.station-stats-side { gap: 10px !important; }
html[data-theme="cloudy"] .stats.station-stats-side .stat {
  border-top: none !important;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 78px; padding: 12px 15% 13px !important; text-align: center;
}
html[data-theme="cloudy"] .stats.station-stats-side .stat .label {
  font-size: 13px !important; font-weight: 600 !important; letter-spacing: .02em;
  text-transform: uppercase; color: #cfe6ff !important; margin-bottom: 2px; line-height: 1.25;
}
html[data-theme="cloudy"][data-mode="light"] .stats.station-stats-side .stat .label { color: #2d5a86 !important; }
html[data-theme="cloudy"] .stats.station-stats-side .stat .value { margin-top: 0 !important; }

/* ==================== Sakura · Blossom — floral 3D form (5-petal cherry-blossom silhouette) ==================== */
html[data-theme="sakura"] { --petal-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22100%22%20r%3D%2248%22%2F%3E%3Cellipse%20cx%3D%22100%22%20cy%3D%2262%22%20rx%3D%2240%22%20ry%3D%2246%22%2F%3E%3Cellipse%20cx%3D%22100%22%20cy%3D%2262%22%20rx%3D%2240%22%20ry%3D%2246%22%20transform%3D%22rotate%2872%20100%20100%29%22%2F%3E%3Cellipse%20cx%3D%22100%22%20cy%3D%2262%22%20rx%3D%2240%22%20ry%3D%2246%22%20transform%3D%22rotate%28144%20100%20100%29%22%2F%3E%3Cellipse%20cx%3D%22100%22%20cy%3D%2262%22%20rx%3D%2240%22%20ry%3D%2246%22%20transform%3D%22rotate%28216%20100%20100%29%22%2F%3E%3Cellipse%20cx%3D%22100%22%20cy%3D%2262%22%20rx%3D%2240%22%20ry%3D%2246%22%20transform%3D%22rotate%28288%20100%20100%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

/* Hero surfaces bloom into cherry-blossom silhouettes; drop-shadow hugs the petals for real 3D. */
html[data-theme="sakura"] .station-card,
html[data-theme="sakura"] .stat,
html[data-theme="sakura"] .cal .day:not(.empty) {
  -webkit-mask: var(--petal-mask) center/100% 100% no-repeat; mask: var(--petal-mask) center/100% 100% no-repeat;
  border: none !important;
  background:
    radial-gradient(120% 90% at 50% 12%, color-mix(in srgb,#ffffff 30%, transparent), transparent 55%),
    radial-gradient(90% 60% at 50% 100%, color-mix(in srgb,var(--accent) 24%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb,var(--panel) 82%, #ffffff), var(--panel-2)) !important;
  box-shadow:
    inset 0 12px 18px rgba(255,255,255,0.4),
    inset 0 -18px 26px color-mix(in srgb,var(--accent) 24%, transparent) !important;
  filter:
    drop-shadow(0 0 1.2px rgba(255,255,255,0.8))
    drop-shadow(0 15px 15px color-mix(in srgb,var(--accent) 36%, rgba(40,10,25,0.5)))
    drop-shadow(0 4px 5px rgba(40,10,25,0.3));
  transition: transform .34s cubic-bezier(.2,1.2,.3,1), filter .3s ease !important;
}
html[data-theme="sakura"][data-mode="light"] .station-card,
html[data-theme="sakura"][data-mode="light"] .stat,
html[data-theme="sakura"][data-mode="light"] .cal .day:not(.empty) {
  box-shadow:
    inset 0 12px 18px rgba(255,255,255,0.85),
    inset 0 -18px 24px color-mix(in srgb,var(--accent) 22%, transparent) !important;
  filter:
    drop-shadow(0 0 1.5px color-mix(in srgb,var(--accent) 80%, #7a2743))
    drop-shadow(0 14px 14px color-mix(in srgb,var(--accent) 40%, rgba(150,60,90,0.4)))
    drop-shadow(0 3px 4px rgba(150,60,90,0.28)) !important;
}
/* Gentle bloom on hover */
@keyframes sakura-sway {
  0%{transform:translateY(-6px) scale(1.04) rotate(-2deg)}
  50%{transform:translateY(-7px) scale(1.045) rotate(2deg)}
  100%{transform:translateY(-6px) scale(1.04) rotate(-2deg)}
}
html[data-theme="sakura"] .station-card:hover,
html[data-theme="sakura"] .stat:hover,
html[data-theme="sakura"] .cal .day:not(.empty):hover {
  transform-origin: center center;
  animation: sakura-sway 2.4s ease-in-out infinite !important;
  filter: drop-shadow(0 0 1.3px rgba(255,255,255,0.85)) drop-shadow(0 24px 22px color-mix(in srgb,var(--accent) 44%, rgba(40,10,25,0.5))) drop-shadow(0 7px 9px rgba(40,10,25,0.32)) !important;
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="sakura"] .station-card:hover, html[data-theme="sakura"] .stat:hover, html[data-theme="sakura"] .cal .day:not(.empty):hover { animation: none !important; transform: translateY(-6px) scale(1.04) !important; }
}

/* Empty leading days = recessed 3D blossom holes */
html[data-theme="sakura"] .cal .day.empty {
  -webkit-mask: var(--petal-mask) center/100% 100% no-repeat; mask: var(--petal-mask) center/100% 100% no-repeat;
  border: none !important; filter: none !important; opacity: 1 !important; cursor: default !important;
  background: linear-gradient(180deg, color-mix(in srgb,var(--bg) 60%, #000 22%), color-mix(in srgb,var(--bg) 86%, #000 6%)) !important;
  box-shadow: inset 0 9px 16px rgba(0,0,0,0.5), inset 0 -6px 11px rgba(255,255,255,0.05) !important;
}

/* Calendar: uniform blossom tiles, number centered in the bloom core */
html[data-theme="sakura"] .cal { grid-template-columns: repeat(7,1fr) !important; max-width:94% !important; margin-left:auto !important; margin-right:auto !important; gap:14px !important; }
html[data-theme="sakura"] .cal .day {
  width:auto !important; justify-self:stretch !important; aspect-ratio: 1 / 0.92 !important; min-height:0 !important;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:16% 14% !important;
}
html[data-theme="sakura"] .cal .day .num { width:100%; text-align:center; font-size:18px; }
html[data-theme="sakura"] .cal .day.today .num { font-size:20px; }
html[data-theme="sakura"] .cal .day .mini { width:100%; text-align:center; font-size:9.5px; margin-top:1px; line-height:1.25; }
html[data-theme="sakura"] .cal .dow { color:#ffd6e4 !important; font-weight:600 !important; }
html[data-theme="sakura"][data-mode="light"] .cal .dow { color:#9c3a5a !important; }

/* Station cards: blossom with centered content in the core */
html[data-theme="sakura"] .station-grid { grid-template-columns: repeat(auto-fill, minmax(340px,1fr)) !important; gap:26px !important; }
html[data-theme="sakura"] .station-card { padding:22% 20% !important; display:flex !important; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:visible; }
html[data-theme="sakura"] .station-card .sc-head { flex-direction:column; align-items:center; gap:3px; width:100%; }
html[data-theme="sakura"] .station-card .sc-head > div { min-width:0; width:100%; }
html[data-theme="sakura"] .station-card h3 { margin:0 0 1px; text-align:center; color:var(--text) !important; font-weight:700 !important; }
html[data-theme="sakura"] .station-card .meta { white-space:normal; text-align:center; }
html[data-theme="sakura"] .station-card .sc-balance { background:transparent !important; border:none !important; padding:3px 0 2px !important; margin:6px 0 4px !important; text-align:center; width:100%; }
html[data-theme="sakura"] .station-card .sc-bal-num, html[data-theme="sakura"] .station-card .sc-bal-label { text-align:center; }
html[data-theme="sakura"] .station-card .sc-prices { justify-content:center; margin-bottom:6px; }
html[data-theme="sakura"] .station-card .sc-rows { border-top:none !important; padding-top:0 !important; width:100%; align-items:center; gap:3px; }
html[data-theme="sakura"] .station-card .ov-row { justify-content:center; gap:6px; font-size:12px; }

/* Right-rail stat blossoms: readable titles seated in the bloom */
html[data-theme="sakura"] .stats.station-stats-side { gap: 10px !important; }
html[data-theme="sakura"] .stats.station-stats-side .stat {
  border-top: none !important; display:flex; flex-direction:column; justify-content:center; align-items:center;
  min-height: 96px; padding: 18% 16% !important; text-align:center;
}
html[data-theme="sakura"] .stats.station-stats-side .stat .label { font-size:12.5px !important; font-weight:600 !important; color:#ffd6e4 !important; line-height:1.2; }
html[data-theme="sakura"][data-mode="light"] .stats.station-stats-side .stat .label { color:#9c3a5a !important; }

/* ==================== Sakura · Blossom — slightly smaller blooms + more core padding so content never cuts a petal ==================== */
html[data-theme="sakura"] .cal { max-width: 86% !important; gap: 12px !important; }
html[data-theme="sakura"] .cal .day { aspect-ratio: 1 / 0.98 !important; padding: 19% 17% !important; }
html[data-theme="sakura"] .cal .day .num { font-size: 16px; }
html[data-theme="sakura"] .cal .day.today .num { font-size: 18px; }
html[data-theme="sakura"] .station-grid { grid-template-columns: repeat(auto-fill, minmax(320px,1fr)) !important; gap: 22px !important; }
html[data-theme="sakura"] .station-card { padding: 25% 23% !important; }
html[data-theme="sakura"] .stats.station-stats-side .stat { min-height: 90px; padding: 21% 19% !important; }

/* ==================== Sakura · Blossom — wider station cards so station names fit ==================== */
html[data-theme="sakura"] .station-grid { grid-template-columns: repeat(auto-fill, minmax(380px,1fr)) !important; gap: 24px !important; }
html[data-theme="sakura"] .station-card { padding: 23% 17% !important; }
html[data-theme="sakura"] .station-card h3 { white-space: normal !important; line-height: 1.15; max-width: 100%; }

/* Forest = emerald + glass; preserve existing saved presets and custom emerald styles.
   Static lighting gives depth; only the hovered surface moves, never the whole list. */
html[data-theme="emerald"][data-style="glass"] {
  --radius: 36px 10px 36px 10px;
  --forest-leaf: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%20204%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22leaf%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%22.85%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%2383b953%22%2F%3E%3Cstop%20offset%3D%22.2%22%20stop-color%3D%22%23377c34%22%2F%3E%3Cstop%20offset%3D%22.52%22%20stop-color%3D%22%2315532a%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23052f1c%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22shine%22%20cx%3D%22.28%22%20cy%3D%22.2%22%20r%3D%22.78%22%3E%3Cstop%20stop-color%3D%22%23cceaa2%22%20stop-opacity%3D%22.48%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%2360ae43%22%20stop-opacity%3D%22.08%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23001d13%22%20stop-opacity%3D%22.35%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22rim%22%20x2%3D%22.3%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23c6e99d%22%2F%3E%3Cstop%20offset%3D%22.48%22%20stop-color%3D%22%2351894a%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230b3820%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M12%20188C4%20128%205%2067%2040%2033C76%200%20150%208%20228%2012C236%2082%20238%20143%20201%20174C162%20208%2091%20194%2012%20188Z%22%20fill%3D%22%23032718%22%20transform%3D%22translate%280%205%29%22%2F%3E%3Cpath%20d%3D%22M12%20188C4%20128%205%2067%2040%2033C76%200%20150%208%20228%2012C236%2082%20238%20143%20201%20174C162%20208%2091%20194%2012%20188Z%22%20fill%3D%22url%28%23leaf%29%22%20stroke%3D%22url%28%23rim%29%22%20stroke-width%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M12%20188C4%20128%205%2067%2040%2033C76%200%20150%208%20228%2012C236%2082%20238%20143%20201%20174C162%20208%2091%20194%2012%20188Z%22%20fill%3D%22url%28%23shine%29%22%2F%3E%3Cpath%20d%3D%22M14%20183C63%20171%20177%2058%20225%2016%22%20fill%3D%22none%22%20stroke%3D%22%23b3d877%22%20stroke-opacity%3D%22.12%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M25%2081C17%20124%2026%20158%2038%20172M64%2022C110%2012%20171%2018%20208%2020%22%20fill%3D%22none%22%20stroke%3D%22%23e1f7ba%22%20stroke-opacity%3D%22.3%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --radius-input: 15px 6px 15px 6px;
  --forest-rim: rgba(181,255,218,.28);
  --forest-shade: rgba(0,19,11,.45);
  --surface: linear-gradient(145deg, color-mix(in srgb,var(--panel-2) 88%,#63c991),var(--panel) 62%,color-mix(in srgb,var(--panel) 93%,#001d13));
  --forest-depth: inset 1px 2px 0 var(--forest-rim), inset -1px -3px 0 var(--forest-shade), 0 5px 0 -1px color-mix(in srgb,var(--panel) 65%,#062b1a), 0 12px 20px -12px rgba(0,20,10,.48);
}
html[data-theme="emerald"][data-style="glass"][data-mode="light"] {
  --bg: #dce8d2;
  --app-bg: radial-gradient(ellipse at 14% 0%,#accb9c66,transparent 55%),linear-gradient(150deg,#edf3e3,#d1e1c5);
  --forest-rim: rgba(255,255,255,.95);
  --forest-shade: rgba(22,102,60,.19);
  --surface: linear-gradient(145deg,#fcfff9,color-mix(in srgb,var(--panel) 84%,#aee3bc) 60%,color-mix(in srgb,var(--panel) 75%,#78b98e));
  --forest-depth: inset 1px 2px 0 var(--forest-rim), inset -1px -3px 0 var(--forest-shade), 0 5px 0 -1px #a4c9ad, 0 12px 20px -12px rgba(26,77,41,.32);
}
html[data-theme="emerald"][data-style="glass"] :is(.card,.stat,.modal,.login-card,.cal .day:not(.empty)) {
  border-radius: var(--radius) !important;
  border-color: color-mix(in srgb,var(--accent) 32%,var(--border));
  background: var(--surface);
  box-shadow: var(--forest-depth) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  will-change: auto;
  transition: transform 280ms cubic-bezier(.16,1,.3,1), border-color 180ms ease !important;
}
html[data-theme="emerald"][data-style="glass"] .card::before {
  inset: 0 22px auto;
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--forest-rim),transparent);
  pointer-events: none;
}
html[data-theme="emerald"][data-style="glass"] .card:not(.station-card):hover {
  transform: none;
}
html[data-theme="emerald"][data-style="glass"] .cal .day:not(.empty) {
  border-radius: 23px 7px 23px 7px !important;
  background: var(--surface);
  box-shadow: var(--forest-depth) !important;
  transition: transform 280ms cubic-bezier(.16,1,.3,1), border-color 180ms ease !important;
}
html[data-theme="emerald"][data-style="glass"] .cal .day.today {
  border: 2px solid var(--accent);
  box-shadow: var(--forest-depth), 0 0 0 2px var(--tint-24) !important;
}
html[data-theme="emerald"][data-style="glass"] .cal .day.empty {
  box-shadow: none !important;
  transform: none !important;
}
html[data-theme="emerald"][data-style="glass"] :is(.btn,.tab,.seg button) {
  border-radius: 17px 6px 17px 6px !important;
  box-shadow: inset 0 1px 0 var(--forest-rim), inset 0 -2px 0 var(--forest-shade), 0 3px 0 -1px var(--forest-shade) !important;
  transition: transform 180ms cubic-bezier(.16,1,.3,1), background-color 180ms ease;
}
html[data-theme="emerald"][data-style="glass"] :is(input,select,textarea) {
  border-radius: var(--radius-input);
  box-shadow: inset 0 2px 3px var(--forest-shade) !important;
}
html[data-theme="emerald"][data-style="glass"] :is(.btn,.tab,.seg button):active:not(:disabled) {
  transform: translateY(2px);
}
/* No continuous animation, shadow animation, pointer tracking or forced compositing. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-theme="emerald"][data-style="glass"] .card.station-card:hover {
    transform: perspective(1000px) translateY(-5px) rotateX(1.5deg) rotateY(-1deg) !important;
  }
  html[data-theme="emerald"][data-style="glass"] .stat:hover,
  html[data-theme="emerald"][data-style="glass"] .cal .day:not(.empty):hover {
    transform: translateY(-3px) rotate(-.35deg) !important;
  }
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  html[data-theme="emerald"][data-style="glass"] :is(.card,.stat,.cal .day:not(.empty),.btn,.tab,.seg button) {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}
/* The leaf is the surface itself, not a mask: all labels and controls stay intact. */
html[data-theme="emerald"][data-style="glass"] :is(.card.station-card,.cal .day:not(.empty)) {
  --text: #f1ffe2;
  --muted: #d0e5bd;
  --accent: #c2ed8f;
  position: relative;
  border: 0;
  border-radius: 48% 7% 48% 7% !important;
  background: var(--forest-leaf) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  overflow: visible;
  color: var(--text);
}
html[data-theme="emerald"][data-style="glass"] .card.station-card {
  padding: 50px 40px 48px 56px;
}
html[data-theme="emerald"][data-style="glass"] .station-card::before { display: none; }
html[data-theme="emerald"][data-style="glass"] .station-card :is(h3,.sc-bal-num) {
  color: var(--text);
  -webkit-text-fill-color: currentColor;
}
html[data-theme="emerald"][data-style="glass"] .station-card .meta { white-space: normal; }
html[data-theme="emerald"][data-style="glass"] .station-card .sc-balance {
  background: rgba(0,30,16,.22);
  border-color: rgba(215,247,179,.2);
  border-radius: 20px 6px 20px 6px;
}
html[data-theme="emerald"][data-style="glass"] .cal .day:not(.empty) {
  min-height: 134px;
  padding: 28px clamp(10px,1.8vw,24px) 25px;
}
html[data-theme="emerald"][data-style="glass"] .cal .day.today {
  outline: 2px solid #c2ed8f;
  outline-offset: -5px;
}
html[data-theme="emerald"][data-style="glass"] .cal .day .mini {
  color: #d0e5bd;
  overflow-wrap: anywhere;
}
html[data-theme="emerald"][data-style="glass"] .cal .day .num { color: #f1ffe2; }
@media (max-width: 600px) {
  html[data-theme="emerald"][data-style="glass"] .card.station-card { padding: 44px 40px 40px; }
  html[data-theme="emerald"][data-style="glass"] .cal {
    grid-template-columns: repeat(7,minmax(92px,1fr));
    overflow-x: auto;
    padding: 8px 4px 14px;
  }
  html[data-theme="emerald"][data-style="glass"] .cal .day:not(.empty) { padding: 24px 14px; }
}
/* Gallery sample echoes the leaf silhouette and dark green volume. */
.theme-showcase[data-preset="forest"] .theme-showcase-pane {
  border: 0;
  border-radius: 48% 7% 48% 7%;
  background: linear-gradient(145deg,#82ad52,#225e2d 45%,#073820);
  box-shadow: inset 2px 3px 2px #b9de8580, inset -2px -4px 3px #001e11a0, 0 4px 0 #0a3921;
  color: #f1ffe2;
}

/* Cash Flow's month controls must fit above the counters on phones. */
@media (max-width:600px) {
  #content:has(.cash-view-tabs) .month-bar { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; }
  #content:has(.cash-view-tabs) .month-bar .title { min-width:0; font-size:16px; text-align:center; white-space:nowrap; }
  #content:has(.cash-view-tabs) .month-bar select:first-of-type { grid-column:1 / 3; }
  .cash-view-tabs { flex-wrap:wrap; }
}

/* Workers page: payout history filters */
.pay-hist-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 10px 0; align-items: flex-end; }
.pay-hist-filters label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); min-width: 130px; flex: 1 1 130px; max-width: 220px; }
.pay-hist-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 10px; }
.pay-hist-total b { font-size: 20px; font-variant-numeric: tabular-nums; }
.pay-hist-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Cash Flow → Bills on hand: a bill count below zero (more went out than was counted in) */
.bills-on-hand .boh-neg .value { color: var(--red); }
.bills-on-hand .boh-grid { display: flex; gap: 14px; flex-wrap: wrap; }   /* not .stats: the station layout moves .stats to its side rail */
.bills-on-hand .boh-bills .stat { min-width: 110px; }