/* ============================================================
   Styles (Settings → My look → Style). Each one changes how boxes, buttons, headings, pills and progress
   bars look — never where things are — so pages stay just as easy to follow. Set on <html data-style="…">.
     playful 🎈  candy buttons that press down, bouncy cards, wavy headings, striped progress
     comic   💥  bold ink outlines, hard shadows, comic-book headings, halftone dots
     notebook📒  lined paper, margin line, washi tape, handwritten headings (chalkboard in dark mode)
     pixel   👾  8-bit stepped corners, pixel shadows, arcade headings
     neon    🌃  glowing outlines and headings, like a night arcade
     calm    🍃  quiet and spacious: no shadows, thin lines, serif headings
     glass   🫧  frosted see-through boxes with soft light edges
   ============================================================ */

/* ---------- 🎈 Playful ---------- */
:root[data-style="playful"] { --radius: 22px; --radius-sm: 16px; --font-head: "Baloo 2", var(--font); }
[data-style="playful"] :is(h1, h2, .page-head h1) { font-family: var(--font-head); font-weight: 700; letter-spacing: .01em; }
[data-style="playful"] .page-head h1 { display: inline-block; padding-bottom: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8'%3E%3Cpath d='M0 4 Q6 0 12 4 T24 4' fill='none' stroke='%23FF6FA5' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 24px 8px repeat-x; }
[data-style="playful"] :is(.card, .big-tile) { border-width: 2px; box-shadow: 0 6px 0 color-mix(in srgb, var(--primary) 18%, var(--border)), var(--shadow); transition: transform .18s cubic-bezier(.3,1.6,.6,1), box-shadow .18s; }
[data-style="playful"] :is(a.card, .task-card, .vp-pack, .game-card, .idiom-card, .big-tile):hover { transform: translateY(-4px) rotate(-.6deg); }
[data-style="playful"] :is(.task-card, .vp-pack, .game-card, .idiom-card):nth-child(even):hover { transform: translateY(-4px) rotate(.6deg); }
[data-style="playful"] .btn { border-radius: 99px; border-width: 2px; box-shadow: 0 4px 0 color-mix(in srgb, var(--text) 18%, transparent); transition: transform .08s, box-shadow .08s; font-weight: 700; }
[data-style="playful"] .btn.primary { box-shadow: 0 4px 0 color-mix(in srgb, var(--primary) 60%, #000); }
[data-style="playful"] .btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 18%, transparent); }
[data-style="playful"] .pill { border-radius: 99px; font-weight: 700; border: 1.5px solid currentColor; }
[data-style="playful"] .progress { height: 12px; border: 2px solid var(--border); }
[data-style="playful"] .progress > i { background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.35) 0 8px, transparent 8px 16px); background-size: 22px 22px; animation: look-stripes 1s linear infinite; }
[data-style="playful"] .nav-link.active { border-radius: 99px; box-shadow: 0 4px 0 color-mix(in srgb, var(--primary) 60%, #000); }
[data-style="playful"] .nav-link.active .ico { animation: look-bounce 1.6s ease-in-out infinite; display: inline-block; }
@keyframes look-stripes { to { background-position: 22px 0; } }
@keyframes look-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px) rotate(-8deg); } }

/* ---------- 💥 Comic ---------- */
:root[data-style="comic"] { --radius: 6px; --radius-sm: 4px; --ink: #111; --font-head: "Bangers", var(--font); }
:root[data-style="comic"][data-theme="dark"] { --ink: #F1F1F1; }
@media (prefers-color-scheme: dark) { :root[data-style="comic"]:not([data-theme="light"]) { --ink: #F1F1F1; } }
[data-style="comic"] :is(h1, .page-head h1) { font-family: var(--font-head); font-weight: 400; letter-spacing: .06em; font-size: 2.1rem; color: var(--primary); text-shadow: 2px 2px 0 var(--ink); }
[data-style="comic"] h2 { font-family: var(--font-head); font-weight: 400; letter-spacing: .05em; font-size: 1.5rem; }
[data-style="comic"] :is(.card, .big-tile) { border: 2.5px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
[data-style="comic"] .page-head { padding: 10px 14px; border-radius: 6px;
  background: radial-gradient(color-mix(in srgb, var(--primary) 22%, transparent) 1.5px, transparent 1.6px) 0 0 / 9px 9px; }
[data-style="comic"] .btn { border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
[data-style="comic"] .btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none; }
[data-style="comic"] .btn.primary { background: #FFD43B; color: #111; }
[data-style="comic"] .pill { border: 2px solid var(--ink); font-weight: 800; }
[data-style="comic"] .progress { border: 2px solid var(--ink); height: 12px; }
[data-style="comic"] .nav-link.active { border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
[data-style="comic"] :is(.task-card, .vp-pack, .game-card, .idiom-card, .big-tile):hover { transform: rotate(-1deg) scale(1.01); }

/* ---------- 📒 Notebook (chalkboard in dark mode) ---------- */
:root[data-style="notebook"] { --radius: 4px; --radius-sm: 4px; --font-head: "Patrick Hand", "Comic Sans MS", var(--font); --paper: #FFFDF5; --line: #DCE7F7; --margin: #F4A3A3; }
:root[data-style="notebook"][data-theme="dark"] { --paper: #1F3A2E; --line: #2C4A3D; --margin: #6B8F6B; }
@media (prefers-color-scheme: dark) { :root[data-style="notebook"]:not([data-theme="light"]) { --paper: #1F3A2E; --line: #2C4A3D; --margin: #6B8F6B; } }
[data-style="notebook"] :is(h1, h2, h3) { font-family: var(--font-head); font-weight: 400; letter-spacing: .01em; }
[data-style="notebook"] h1 { font-size: 2.1rem; }
[data-style="notebook"] .card { position: relative; background: repeating-linear-gradient(transparent 0 27px, var(--line) 27px 28px), var(--paper); background-attachment: local;
  border: 1px solid color-mix(in srgb, var(--line) 70%, var(--border)); box-shadow: 2px 3px 0 rgba(0,0,0,.06), 0 8px 18px rgba(0,0,0,.06); padding-left: 30px; }
[data-style="notebook"] .card::before { content: ""; position: absolute; top: 0; bottom: 0; left: 18px; width: 2px; background: var(--margin); opacity: .8; pointer-events: none; }
[data-style="notebook"] .card:not(.bank-group):not(.task-card):not(.tight):not(.vp-pack):not(.game-card)::after { content: ""; position: absolute; top: -9px; left: 50%; width: 74px; height: 18px; transform: translateX(-50%) rotate(-2deg);
  background: color-mix(in srgb, var(--primary) 30%, rgba(255,255,255,.55)); opacity: .75; pointer-events: none; }
[data-style="notebook"] .card :is(.card)::after { display: none; }
[data-style="notebook"] .btn { border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; border: 2px solid currentColor; font-family: var(--font-head); font-size: 1.02rem; }
[data-style="notebook"] .btn.primary { border-color: transparent; }
[data-style="notebook"] .pill { border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; font-family: var(--font-head); font-size: .9rem; }
[data-style="notebook"] .progress { border-radius: 2px; }
[data-style="notebook"] .nav-link.active { border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; }

/* ---------- 👾 Pixel ---------- */
:root[data-style="pixel"] { --radius: 0px; --radius-sm: 0px; --font-head: "VT323", ui-monospace, monospace; --px: color-mix(in srgb, var(--text) 85%, transparent); }
[data-style="pixel"] :is(h1, .page-head h1) { font-family: var(--font-head); font-size: 2.3rem; line-height: 1.1; letter-spacing: .03em; }
[data-style="pixel"] h2 { font-family: var(--font-head); font-size: 1.6rem; line-height: 1.1; font-weight: 400; }
[data-style="pixel"] :is(.card, .big-tile) { border: 0; box-shadow: 0 -4px 0 0 var(--px), 0 4px 0 0 var(--px), -4px 0 0 0 var(--px), 4px 0 0 0 var(--px), 8px 8px 0 0 color-mix(in srgb, var(--primary) 45%, transparent); margin: 4px; }
[data-style="pixel"] .btn { border: 0; box-shadow: 0 -3px 0 0 var(--px), 0 3px 0 0 var(--px), -3px 0 0 0 var(--px), 3px 0 0 0 var(--px), inset -3px -3px 0 rgba(0,0,0,.18); font-weight: 800; }
[data-style="pixel"] .btn:active:not(:disabled) { box-shadow: 0 -3px 0 0 var(--px), 0 3px 0 0 var(--px), -3px 0 0 0 var(--px), 3px 0 0 0 var(--px), inset 3px 3px 0 rgba(0,0,0,.18); }
[data-style="pixel"] .pill { border-radius: 0; box-shadow: 0 0 0 2px currentColor; font-weight: 800; }
[data-style="pixel"] .progress { border-radius: 0; height: 12px; box-shadow: 0 0 0 3px var(--px); }
[data-style="pixel"] .progress > i { border-radius: 0; background-image: repeating-linear-gradient(90deg, transparent 0 10px, rgba(0,0,0,.2) 10px 12px); }
[data-style="pixel"] .nav-link.active { border-radius: 0; box-shadow: 4px 4px 0 color-mix(in srgb, var(--primary) 45%, #000); }

/* ---------- 🌃 Neon ---------- */
:root[data-style="neon"] { --radius: 14px; --glow: var(--primary); }
[data-style="neon"] :is(h1, .page-head h1) { color: var(--primary); text-shadow: 0 0 6px color-mix(in srgb, var(--glow) 70%, transparent), 0 0 18px color-mix(in srgb, var(--glow) 45%, transparent); letter-spacing: .02em; }
[data-style="neon"] :is(.card, .big-tile) { border: 1.5px solid color-mix(in srgb, var(--glow) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow) 15%, transparent), 0 0 18px color-mix(in srgb, var(--glow) 25%, transparent); }
[data-style="neon"] :is(a.card, .task-card, .vp-pack, .game-card, .idiom-card):hover { box-shadow: 0 0 0 1px var(--glow), 0 0 26px color-mix(in srgb, var(--glow) 55%, transparent); }
[data-style="neon"] .btn.primary { box-shadow: 0 0 14px color-mix(in srgb, var(--glow) 65%, transparent); }
[data-style="neon"] .btn:not(.primary):not(.ghost) { border-color: color-mix(in srgb, var(--glow) 55%, transparent); }
[data-style="neon"] .pill { box-shadow: 0 0 8px color-mix(in srgb, currentColor 40%, transparent); }
[data-style="neon"] .progress > i { box-shadow: 0 0 10px var(--glow); }
[data-style="neon"] .nav-link.active { box-shadow: 0 0 16px color-mix(in srgb, var(--glow) 70%, transparent); }

/* ---------- 🍃 Calm ---------- */
:root[data-style="calm"] { --radius: 12px; --radius-sm: 8px; --shadow: none; --font-head: "Lora", Georgia, serif; }
[data-style="calm"] :is(h1, h2) { font-family: var(--font-head); font-weight: 600; letter-spacing: 0; }
[data-style="calm"] :is(.card, .big-tile) { box-shadow: none; border: 1px solid var(--border); padding: 22px; }
[data-style="calm"] .btn { box-shadow: none; font-weight: 600; }
[data-style="calm"] .btn.primary { background: color-mix(in srgb, var(--primary) 85%, var(--text)); }
[data-style="calm"] .pill { background: transparent !important; border: 1px solid currentColor; }
[data-style="calm"] .progress { height: 6px; }
[data-style="calm"] .nav-link.active { box-shadow: none; }
[data-style="calm"] .content { line-height: 1.7; }

/* ---------- 🫧 Glass ---------- */
:root[data-style="glass"] { --radius: 20px; --radius-sm: 14px; }
[data-style="glass"] :is(.card, .big-tile) { background: color-mix(in srgb, var(--surface) 62%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid color-mix(in srgb, #fff 35%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent), 0 10px 30px rgba(15, 18, 40, .12); }
[data-style="glass"] .btn { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: color-mix(in srgb, #fff 35%, transparent); }
[data-style="glass"] .btn:not(.primary):not(.ghost) { background: color-mix(in srgb, var(--surface) 55%, transparent); }
[data-style="glass"] .btn.primary { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 60%, var(--accent))); }
[data-style="glass"] .pill { backdrop-filter: blur(6px); border: 1px solid color-mix(in srgb, #fff 30%, transparent); }
[data-style="glass"] .progress > i { background: linear-gradient(90deg, var(--primary), var(--accent)); }

/* ---------- the style picker in Settings ---------- */
.style-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.style-tile { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; border: 2px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.style-tile.on { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.style-tile b { font-size: .9rem; }
.style-tile span { font-size: .72rem; color: var(--muted); line-height: 1.3; }
.style-demo { height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--surface-2); position: relative; overflow: hidden; }
.style-demo i { display: block; width: 44px; height: 22px; background: var(--primary); }
.style-demo em { display: block; width: 28px; height: 22px; background: var(--surface); }
.sd-classic i { border-radius: 8px; } .sd-classic em { border-radius: 8px; border: 1px solid var(--border); }
.sd-playful i { border-radius: 99px; box-shadow: 0 4px 0 color-mix(in srgb, var(--primary) 60%, #000); } .sd-playful em { border-radius: 99px; border: 2px solid var(--border); box-shadow: 0 4px 0 var(--border); }
.sd-comic { background: radial-gradient(color-mix(in srgb, var(--primary) 30%, transparent) 1.4px, transparent 1.5px) 0 0 / 7px 7px, var(--surface-2); }
.sd-comic i { background: #FFD43B; border: 2.5px solid #111; box-shadow: 3px 3px 0 #111; } .sd-comic em { border: 2.5px solid #111; box-shadow: 3px 3px 0 #111; }
.sd-notebook { background: repeating-linear-gradient(transparent 0 9px, #C9D9F2 9px 10px), #FFFDF5; }
.sd-notebook i { border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; } .sd-notebook em { border: 2px solid #555; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; background: transparent; }
.sd-pixel i { box-shadow: 0 -3px 0 #333, 0 3px 0 #333, -3px 0 0 #333, 3px 0 0 #333; } .sd-pixel em { box-shadow: 0 -3px 0 #333, 0 3px 0 #333, -3px 0 0 #333, 3px 0 0 #333; }
.sd-neon { background: #0B0E1F; } .sd-neon i { border-radius: 8px; box-shadow: 0 0 12px var(--primary); } .sd-neon em { border-radius: 8px; background: transparent; border: 1.5px solid var(--primary); box-shadow: 0 0 10px var(--primary); }
.sd-calm i { border-radius: 6px; opacity: .85; } .sd-calm em { border-radius: 6px; border: 1px solid var(--border); }
.sd-glass { background: linear-gradient(135deg, #A1C4FD, #FBC2EB); } .sd-glass i { border-radius: 10px; background: linear-gradient(135deg, var(--primary), var(--accent)); } .sd-glass em { border-radius: 10px; background: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.7); }

/* ============================================================
   Signatures: every style also restyles the menu, tabs, page panel and input boxes, so no two look alike.
   ============================================================ */

/* 🎈 Playful — colour-blocked pastel cards, bubble tabs and menu, confetti on the page */
[data-style="playful"] .content { background-image: radial-gradient(circle, color-mix(in srgb, #FF8FB1 45%, transparent) 2px, transparent 2.5px), radial-gradient(circle, color-mix(in srgb, #6EC6FF 45%, transparent) 2px, transparent 2.5px); background-size: 46px 46px, 46px 46px; background-position: 0 0, 23px 23px; }
[data-style="playful"] :is(.grid, .vp-grid, .game-grid, .idiom-grid) > :is(.card, .big-tile, .vp-pack, .game-card, .idiom-card):nth-child(5n+1) { --pt: #FF8FB1; }
[data-style="playful"] :is(.grid, .vp-grid, .game-grid, .idiom-grid) > :is(.card, .big-tile, .vp-pack, .game-card, .idiom-card):nth-child(5n+2) { --pt: #5EE6B0; }
[data-style="playful"] :is(.grid, .vp-grid, .game-grid, .idiom-grid) > :is(.card, .big-tile, .vp-pack, .game-card, .idiom-card):nth-child(5n+3) { --pt: #FFD54F; }
[data-style="playful"] :is(.grid, .vp-grid, .game-grid, .idiom-grid) > :is(.card, .big-tile, .vp-pack, .game-card, .idiom-card):nth-child(5n+4) { --pt: #6EC6FF; }
[data-style="playful"] :is(.grid, .vp-grid, .game-grid, .idiom-grid) > :is(.card, .big-tile, .vp-pack, .game-card, .idiom-card):nth-child(5n+5) { --pt: #B39DFF; }
[data-style="playful"] :is(.grid, .vp-grid, .game-grid, .idiom-grid) > :is(.card, .big-tile, .vp-pack, .game-card, .idiom-card) { background: color-mix(in srgb, var(--pt) 20%, var(--surface)); border: 2px solid color-mix(in srgb, var(--pt) 70%, transparent); box-shadow: 0 6px 0 color-mix(in srgb, var(--pt) 55%, transparent); }
[data-style="playful"] .tabs { border: 0; gap: 8px; flex-wrap: wrap; }
[data-style="playful"] .tabs a { border: 2px solid var(--border); border-radius: 99px; padding: 6px 14px; font-weight: 700; background: var(--surface); }
[data-style="playful"] .tabs a.active { background: var(--primary); color: var(--primary-ink); border-color: transparent; box-shadow: 0 4px 0 color-mix(in srgb, var(--primary) 60%, #000); }
[data-style="playful"] .nav-link { border-radius: 99px; font-weight: 700; }
[data-style="playful"] .nav-link .ico { font-size: 1.15rem; }
[data-style="playful"] .input { border-radius: 16px; border-width: 2px; }
[data-style="playful"] h1 { font-size: 2.15rem; }

/* 💥 Comic — halftone page, ink-outlined menu, tabs and inputs */
[data-style="comic"] .content { background-image: radial-gradient(color-mix(in srgb, var(--text) 9%, transparent) 1.2px, transparent 1.4px); background-size: 8px 8px; }
[data-style="comic"] .sidebar { border-right: 3px solid var(--ink); }
[data-style="comic"] .topbar { border-bottom: 3px solid var(--ink); }
[data-style="comic"] .tabs { border-bottom: 3px solid var(--ink); gap: 6px; }
[data-style="comic"] .tabs a { border: 2.5px solid var(--ink); border-bottom: 0; border-radius: 6px 6px 0 0; font-weight: 800; text-transform: uppercase; font-size: .8rem; }
[data-style="comic"] .tabs a.active { background: #FFD43B; color: #111; }
[data-style="comic"] .input { border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); border-radius: 4px; }

/* 📒 Notebook — spiral-bound menu, index tabs, writing-line inputs */
[data-style="notebook"] .sidebar { background: repeating-linear-gradient(transparent 0 27px, var(--line) 27px 28px), var(--paper);
  border-right: 0; box-shadow: inset -14px 0 0 -6px color-mix(in srgb, var(--text) 8%, transparent); }
[data-style="notebook"] .sidebar::after { content: ""; position: absolute; top: 0; bottom: 0; right: -7px; width: 14px; pointer-events: none;
  background: radial-gradient(circle at 7px 12px, transparent 4px, color-mix(in srgb, var(--text) 45%, transparent) 4.5px, color-mix(in srgb, var(--text) 45%, transparent) 5.5px, transparent 6px) 0 0 / 14px 26px repeat-y; }
[data-style="notebook"] .sidebar { position: relative; }
[data-style="notebook"] .nav-link { font-family: var(--font-head); font-size: 1.12rem; }
[data-style="notebook"] .tabs { border-bottom: 2px solid var(--margin); gap: 4px; }
[data-style="notebook"] .tabs a { border-radius: 10px 10px 0 0; background: color-mix(in srgb, var(--primary) 12%, var(--paper)); font-family: var(--font-head); font-size: 1.05rem; }
[data-style="notebook"] .tabs a:nth-child(3n+2) { background: color-mix(in srgb, #F4A3A3 30%, var(--paper)); }
[data-style="notebook"] .tabs a:nth-child(3n+3) { background: color-mix(in srgb, #FFE08A 40%, var(--paper)); }
[data-style="notebook"] .tabs a.active { background: var(--paper); box-shadow: 0 -3px 0 var(--primary) inset; }
[data-style="notebook"] .input { border: 0; border-bottom: 2px dashed color-mix(in srgb, var(--text) 35%, transparent); border-radius: 0; background: transparent; font-family: var(--font-head); font-size: 1.08rem; }

/* 👾 Pixel — arcade grid page, chunky pixel tabs, pixel menu font */
[data-style="pixel"] .content { background-image: linear-gradient(color-mix(in srgb, var(--primary) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--primary) 9%, transparent) 1px, transparent 1px); background-size: 16px 16px; }
[data-style="pixel"] .nav-link { font-family: var(--font-head); font-size: 1.3rem; border-radius: 0; letter-spacing: .03em; }
[data-style="pixel"] .tabs { border: 0; gap: 10px; }
[data-style="pixel"] .tabs a { font-family: var(--font-head); font-size: 1.25rem; border-radius: 0; box-shadow: 0 -3px 0 var(--px), 0 3px 0 var(--px), -3px 0 0 var(--px), 3px 0 0 var(--px); margin: 4px; }
[data-style="pixel"] .tabs a.active { background: var(--primary); color: var(--primary-ink); }
[data-style="pixel"] .input { border-radius: 0; border: 0; box-shadow: 0 -3px 0 var(--px), 0 3px 0 var(--px), -3px 0 0 var(--px), 3px 0 0 var(--px); margin: 3px 0; }

/* 🌃 Neon — always a night scene: deep navy, cyan and pink glow, a synthwave grid on the page */
:root[data-style="neon"] { --bg: #07081A; --surface: #0E1030; --surface-2: #171A42; --text: #EEEBFF; --muted: #A9A5DC; --border: #2C2F6E;
  --n1: #22D3EE; --n2: #F472B6; --primary-ink: #07081A; color-scheme: dark; }
[data-style="neon"] body { background: var(--bg); color: var(--text); }
[data-style="neon"] .content { background-image: linear-gradient(transparent 60%, color-mix(in srgb, var(--n2) 18%, transparent)), linear-gradient(color-mix(in srgb, var(--n1) 14%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--n1) 14%, transparent) 1px, transparent 1px);
  background-size: 100% 100%, 40px 40px, 40px 40px; }
[data-style="neon"] :is(h1, .page-head h1) { background: linear-gradient(90deg, var(--n1), var(--n2)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--n2) 55%, transparent)); }
[data-style="neon"] :is(.card, .big-tile) { background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1.5px solid var(--n1); box-shadow: 0 0 12px color-mix(in srgb, var(--n1) 45%, transparent), inset 0 0 12px color-mix(in srgb, var(--n1) 12%, transparent); }
[data-style="neon"] :is(.grid, .vp-grid, .game-grid) > :is(.card, .big-tile):nth-child(even) { border-color: var(--n2); box-shadow: 0 0 12px color-mix(in srgb, var(--n2) 45%, transparent), inset 0 0 12px color-mix(in srgb, var(--n2) 12%, transparent); }
[data-style="neon"] .btn.primary { background: linear-gradient(90deg, var(--n2), var(--n1)); color: #07081A; border: 0; box-shadow: 0 0 16px color-mix(in srgb, var(--n2) 60%, transparent); }
[data-style="neon"] .sidebar { background: #090B24; border-right: 1px solid var(--n2); box-shadow: 4px 0 18px color-mix(in srgb, var(--n2) 25%, transparent); }
[data-style="neon"] .nav-link.active { background: transparent; color: var(--n1); border: 1.5px solid var(--n1); box-shadow: 0 0 14px color-mix(in srgb, var(--n1) 55%, transparent), inset 0 0 10px color-mix(in srgb, var(--n1) 25%, transparent); }
[data-style="neon"] .tabs { border-bottom-color: var(--border); }
[data-style="neon"] .tabs a.active { color: var(--n1); border-bottom: 2px solid var(--n1); box-shadow: 0 6px 12px -6px var(--n1); }
[data-style="neon"] .input { background: #0A0C26; border-color: color-mix(in srgb, var(--n1) 55%, transparent); color: var(--text); }
[data-style="neon"] .input:focus { box-shadow: 0 0 0 2px var(--n1), 0 0 14px color-mix(in srgb, var(--n1) 60%, transparent); }

/* 🍃 Calm — a quiet reading room: linen and sage, serif headings, hairlines, extra space */
:root[data-style="calm"] { --bg: #F2EFE7; --surface: #FBF9F4; --surface-2: #ECE8DD; --text: #2F3A33; --muted: #6D786F; --border: #DCD6C8; --primary: #5E8C6A; --primary-soft: #E3ECE4; --primary-ink: #FFFFFF; color-scheme: light; }
:root[data-style="calm"][data-theme="dark"] { --bg: #151A17; --surface: #1D2320; --surface-2: #252D29; --text: #E2E7E0; --muted: #9AA79C; --border: #34403A; --primary: #8DB89A; --primary-soft: #2A3A30; --primary-ink: #11160F; color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root[data-style="calm"]:not([data-theme="light"]) { --bg: #151A17; --surface: #1D2320; --surface-2: #252D29; --text: #E2E7E0; --muted: #9AA79C; --border: #34403A; --primary: #8DB89A; --primary-soft: #2A3A30; --primary-ink: #11160F; color-scheme: dark; } }
[data-style="calm"] body { background: var(--bg); color: var(--text); }
[data-style="calm"] :is(h1, .page-head h1) { font-size: 2.2rem; font-weight: 500; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
[data-style="calm"] :is(.card, .big-tile) { box-shadow: none; border: 1px solid var(--border); padding: 24px; }
[data-style="calm"] .sidebar { background: var(--surface); border-right: 1px solid var(--border); box-shadow: none; }
[data-style="calm"] .nav-link { font-family: var(--font-head); font-size: 1rem; }
[data-style="calm"] .nav-link.active { background: transparent; color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); border-radius: 0; font-weight: 700; }
[data-style="calm"] .tabs a { font-family: var(--font-head); }
[data-style="calm"] .tabs a.active { background: transparent; color: var(--primary); border-bottom: 1px solid var(--primary); }
[data-style="calm"] .input { border-radius: 8px; background: var(--surface); }
[data-style="calm"] .grid { gap: 22px; }

/* 🫧 Glass — no page panel: frosted panes float over the picture (or an aurora when there is none) */
[data-style="glass"] body:not(.has-bg) { background: radial-gradient(60% 50% at 15% 10%, color-mix(in srgb, var(--primary) 45%, transparent), transparent), radial-gradient(50% 50% at 90% 30%, color-mix(in srgb, var(--accent) 40%, transparent), transparent), radial-gradient(60% 60% at 50% 100%, color-mix(in srgb, #22D3EE 35%, transparent), transparent), var(--bg); background-attachment: fixed; }
[data-style="glass"] .content { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-color: transparent !important; box-shadow: none !important; }
[data-style="glass"] :is(.card, .big-tile) { background: color-mix(in srgb, var(--surface) 38%, transparent); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid color-mix(in srgb, #fff 40%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent), 0 12px 32px rgba(10, 12, 40, .25); }
[data-style="glass"] .sidebar { background: color-mix(in srgb, var(--surface) 35%, transparent); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border-right: 1px solid color-mix(in srgb, #fff 30%, transparent); }
[data-style="glass"] .topbar { background: color-mix(in srgb, var(--surface) 30%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
[data-style="glass"] .btn { background-image: linear-gradient(to bottom, rgba(255,255,255,.28), rgba(255,255,255,0) 55%); }
[data-style="glass"] .tabs { border: 0; display: inline-flex; padding: 4px; border-radius: 99px; background: color-mix(in srgb, var(--surface) 35%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid color-mix(in srgb, #fff 30%, transparent); max-width: 100%; }
[data-style="glass"] .tabs a { border-radius: 99px; border: 0; }
[data-style="glass"] .tabs a.active { background: color-mix(in srgb, #fff 30%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
[data-style="glass"] .input { background: color-mix(in srgb, var(--surface) 45%, transparent); border-color: color-mix(in srgb, #fff 35%, transparent); backdrop-filter: blur(10px); }