/* ═══════════════════════════════════════════════════════════════
   v2 — TOKEN-DRIVEN LAYER (supersedes the hardcoded rules above)
   Every wrapped theme now exposes its FULL scheme as CSS variables,
   so the theme-studio can edit any value live and themes gain a
   light/dark counterpart:  modern-light · genz-dark
   A single generic component layer below applies to all themes —
   all visual differences live in the tokens.
   ═══════════════════════════════════════════════════════════════ */

/* ── Display fonts ── */
[data-theme="modern"],[data-theme="modern-light"],[data-theme="genz"],[data-theme="genz-dark"]{--font-display:'Space Grotesk','Manrope',ui-sans-serif,sans-serif}

/* ═══════════ THEME A — MODERN (dark) ═══════════ */
[data-theme="modern"]{
  /* Base palette — restored from the original hardcoded Modern v0 */
  --bg:#050505; --bg-2:#0a0a0a; --shell:#050505;
  --panel:#0b0b0b; --panel-2:#131313;
  --card:#141414; --card2:#1b1b1b;
  --line:#262626; --line-strong:#3a3a3a;
  --text:#ffffff; --text-soft:#a1a1aa; --text-faint:#71717a;
  --black-btn:#10b981; --black-btn-hover:#34d399;
  --active-nav:#1d1d1d;
  --teal:#34d399; --teal-2:#34d399; --cyan:#34d399; --teal-3:#6ee7b7;
  --teal-4:rgba(52,211,153,.14);
  --beige:#3a3a3a;
  --green:#34d399; --green-hover:#6ee7b7; --green-soft:rgba(52,211,153,.12);
  --blue:#a78bfa; --blue-hover:#c4b5fd; --blue-soft:rgba(167,139,250,.12);
  --amber:#fbbf24;
  --purple:#7928ca; --purple-soft:#1b1030; --purple-line:#3b2560;
  --shadow-soft:0 18px 44px rgba(0,0,0,.5);
  --shadow-card:0 12px 28px rgba(0,0,0,.42);
  --hero-overlay:rgba(0,0,0,.25);
  --hero-text:#ffffff;
  --hero-chip:rgba(255,255,255,.08); --hero-chip-strong:rgba(255,255,255,.15); --hero-chip-text:#ffffff;
  --radius-shell:30px; --radius-card:32px; --radius-btn:16px; --radius-hero:32px;
  --font-ui:'Plus Jakarta Sans','Inter',ui-sans-serif,system-ui,sans-serif;
  --app-bg:radial-gradient(circle at 12% 18%,rgba(121,40,202,.14),transparent 42%),radial-gradient(circle at 88% 82%,rgba(52,211,153,.07),transparent 40%),radial-gradient(circle at 60% 0%,rgba(255,0,128,.05),transparent 45%),linear-gradient(180deg,#050505,#0a0a0a);
  --topbar-bg:rgba(5,5,5,.55); --topbar-border-w:1px; --topbar-border-c:#1f1f1f; --topbar-radius:0px; --topbar-shadow:none;
  --sidebar-border-w:0; --sidebar-border-c:#1f1f1f;
  --main-panel-bg:#0b0b0b; --main-panel-border-w:1px; --main-panel-border-c:#232323; --main-panel-radius:34px; --main-panel-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.02);
  --card-bg:#141414; --card-border-w:1px; --card-border-c:#262626; --card-radius:32px; --card-shadow:0 12px 28px rgba(0,0,0,.42); --card-hover-border-c:#404040; --card-hover-shadow:0 14px 34px rgba(0,0,0,.45); --card-hover-y:-4px;
  --card-sel-border-c:#34d399; --card-sel-glow:0 0 0 2px rgba(52,211,153,.55),0 0 26px rgba(52,211,153,.18);
  --prog-bg:#262626; --prog-border-w:0px; --prog-border-c:transparent; --prog-radius:4px; --prog-fill:linear-gradient(90deg,#7928ca,#ff0080);
  --hero-bg:linear-gradient(150deg,rgba(28,15,48,.92),rgba(10,10,12,.92) 55%,rgba(20,20,26,.94)); --hero-border-w:1px; --hero-border-c:#2a2a2a; --hero-radius:32px; --hero-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.02); --hero-prism-opacity:.55;
  --glass-bg:rgba(20,20,20,.55); --glass-border-w:1px; --glass-border-c:#2c2c2c; --glass-radius:28px; --glass-shadow:none; --glass-hover-bg:rgba(30,30,34,.7); --glass-hover-border-c:rgba(52,211,153,.3);
  --input-bg:rgba(0,0,0,.35); --input-border-w:1px; --input-border-c:#2c2c2c; --input-radius:16px;
  --chart-bg:#141414; --chart-border-w:1px; --chart-border-c:#262626; --chart-radius:32px; --chart-shadow:0 16px 40px rgba(0,0,0,.35); --chart-total-c:#34d399; --chart-bar-grad:linear-gradient(180deg,#7928ca,#ff0080 130%);
  --btn-primary-bg:#10b981; --btn-primary-text:#022c22; --btn-primary-radius:14px; --btn-primary-shadow:none;
  --btn-secondary-bg:#1a1a1a; --btn-secondary-border-w:1px; --btn-secondary-border-c:#2c2c2c; --btn-secondary-text:#fff; --btn-secondary-radius:12px; --btn-secondary-shadow:none;
  --btn-start-bg:linear-gradient(135deg,rgba(52,211,153,.2),rgba(121,40,202,.18)); --btn-start-text:#34d399; --btn-start-border-w:1px; --btn-start-border-c:rgba(52,211,153,.3); --btn-start-radius:14px; --btn-start-shadow:0 0 22px rgba(121,40,202,.16);
  --toggle-border-w:1px; --toggle-border-c:#2c2c2c; --toggle-radius:999px; --toggle-shadow:none;
  --tab-color:#a1a1aa; --tab-active-c:#34d399; --tab-underline-c:#34d399; --tab-underline-w:3px;
  --dropdown-bg:#161616; --dropdown-border-w:1px; --dropdown-border-c:#2a2a2a; --dropdown-radius:16px; --dropdown-shadow:0 20px 48px rgba(0,0,0,.5); --dd-hover-bg:rgba(255,255,255,.06);
  --nav-hover-bg:rgba(255,255,255,.05); --nav-active-bg:rgba(52,211,153,.14); --nav-active-text:#34d399; --nav-active-shadow:none;
  --lang-active-bg:#1b1b1b; --lang-active-text:#34d399; --lang-radius:8px;
  --trial-bg:rgba(52,211,153,.08); --trial-border-w:1px; --trial-border-c:rgba(52,211,153,.2); --trial-radius:16px; --trial-shadow:none;
  --chip-bg:#141414; --chip-border-w:1px; --chip-border-c:#2c2c2c; --chip-radius:10px; --chip-shadow:none; --chip-text:#a1a1aa; --chip-hover-border-c:rgba(52,211,153,.5); --chip-active-bg:#34d399; --chip-active-text:#022c22;
  --field-bg:#141414; --field-border-w:1px; --field-border-c:#2c2c2c; --field-radius:10px;
  --list-card-bg:#161616; --list-card-border-w:1px; --list-card-border-c:#262626; --list-card-radius:18px; --list-card-shadow:none;
  --toast-bg:#34d399; --toast-text:#022c22; --toast-radius:14px;
  --trdd-bg:#161616; --trdd-border-w:1px; --trdd-border-c:#2a2a2a; --trdd-radius:14px; --trdd-shadow:0 12px 32px rgba(0,0,0,.4); --trdd-hover-bg:rgba(255,255,255,.06);
  --icon-sun:none; --icon-moon:block;
}

/* ═══════════ THEME A' — MODERN-LIGHT (blue→cyan glass, bright counterpart) ═══════════ */
[data-theme="modern-light"]{
  --bg:#eef6fc; --bg-2:#e0eef8; --shell:#f4f9fd;
  --panel:#ffffff; --panel-2:#f0f7fc;
  --card:#ffffff; --card2:#e8f3fb;
  --line:#d7e7f2; --line-strong:#b5d2e4;
  --text:#062433; --text-soft:#35586c; --text-faint:#6b8ba0;
  --black-btn:#0284c7; --black-btn-hover:#0369a1;
  --active-nav:#e0f1fb;
  --teal:#0284c7; --teal-2:#0284c7; --cyan:#0284c7; --teal-3:#38bdf8;
  --teal-4:rgba(2,132,199,.12);
  --beige:#d2e6f2;
  --green:#0e9f8a; --green-hover:#0c8a78; --green-soft:rgba(14,159,138,.12);
  --blue:#0ea5e9; --blue-hover:#0284c7; --blue-soft:rgba(14,165,233,.12);
  --amber:#d97706;
  --purple:#0e5fa8; --purple-soft:#e3f1fc; --purple-line:#c3e0f4;
  --shadow-soft:0 18px 44px rgba(2,132,199,.12);
  --shadow-card:0 10px 26px rgba(2,132,199,.08);
  --hero-overlay:rgba(0,0,0,.12);
  --hero-text:#ffffff;
  --hero-chip:rgba(255,255,255,.18); --hero-chip-strong:rgba(255,255,255,.3); --hero-chip-text:#ffffff;
  --radius-shell:30px; --radius-card:24px; --radius-btn:14px; --radius-hero:28px;
  --font-ui:'Plus Jakarta Sans','Inter',ui-sans-serif,system-ui,sans-serif;
  --app-bg:radial-gradient(circle at 12% 18%,rgba(8,145,178,.14),transparent 42%),radial-gradient(circle at 88% 82%,rgba(34,211,238,.12),transparent 40%),radial-gradient(circle at 50% 50%,rgba(255,255,255,.7),transparent 55%),linear-gradient(180deg,#eef6fc,#e2eff9);
  --topbar-bg:rgba(255,255,255,.74); --topbar-border-w:1px; --topbar-border-c:#d7e7f2; --topbar-radius:0px; --topbar-shadow:none;
  --sidebar-border-w:0; --sidebar-border-c:#d7e7f2;
  --main-panel-bg:#ffffff; --main-panel-border-w:1px; --main-panel-border-c:#d7e7f2; --main-panel-radius:30px; --main-panel-shadow:0 20px 50px rgba(2,132,199,.1),0 0 0 1px rgba(2,132,199,.03);
  --card-bg:#ffffff; --card-border-w:1px; --card-border-c:#d7e7f2; --card-radius:24px; --card-shadow:0 10px 26px rgba(2,132,199,.07); --card-hover-border-c:#7cc8e8; --card-hover-shadow:0 16px 38px rgba(2,132,199,.13); --card-hover-y:-4px;
  --card-sel-border-c:#0284c7; --card-sel-glow:0 0 0 2px rgba(2,132,199,.5),0 0 26px rgba(2,132,199,.2);
  --prog-bg:#dcecf6; --prog-border-w:0px; --prog-border-c:transparent; --prog-radius:6px; --prog-fill:linear-gradient(90deg,#0284c7,#38bdf8);
  --hero-bg:radial-gradient(circle at 85% 15%,rgba(255,255,255,.16),transparent 38%),radial-gradient(circle at 8% 90%,rgba(34,211,238,.35),transparent 45%),linear-gradient(135deg,#0369a1 0%,#0284c7 42%,#0ea5e9 72%,#22d3ee 100%); --hero-border-w:1px; --hero-border-c:rgba(255,255,255,.24); --hero-radius:28px; --hero-shadow:0 30px 70px rgba(2,132,199,.32); --hero-prism-opacity:.4;
  --glass-bg:rgba(255,255,255,.16); --glass-border-w:1px; --glass-border-c:rgba(255,255,255,.32); --glass-radius:24px; --glass-shadow:0 12px 30px rgba(0,0,0,.16); --glass-hover-bg:rgba(255,255,255,.24); --glass-hover-border-c:#9fd8f0;
  --input-bg:rgba(0,0,0,.28); --input-border-w:1px; --input-border-c:rgba(255,255,255,.26); --input-radius:14px;
  --chart-bg:#ffffff; --chart-border-w:1px; --chart-border-c:#d7e7f2; --chart-radius:24px; --chart-shadow:0 16px 40px rgba(2,132,199,.08); --chart-total-c:#0284c7; --chart-bar-grad:linear-gradient(180deg,#0284c7,#38bdf8 130%);
  --btn-primary-bg:#0284c7; --btn-primary-text:#ffffff; --btn-primary-radius:14px; --btn-primary-shadow:0 8px 20px rgba(2,132,199,.22);
  --btn-secondary-bg:#ffffff; --btn-secondary-border-w:1px; --btn-secondary-border-c:#b5d2e4; --btn-secondary-text:#062433; --btn-secondary-radius:14px; --btn-secondary-shadow:none;
  --btn-start-bg:linear-gradient(135deg,rgba(2,132,199,.14),rgba(34,211,238,.12)); --btn-start-text:#0284c7; --btn-start-border-w:1px; --btn-start-border-c:rgba(2,132,199,.3); --btn-start-radius:14px; --btn-start-shadow:0 0 20px rgba(2,132,199,.14);
  --toggle-border-w:1px; --toggle-border-c:#b5d2e4; --toggle-radius:999px; --toggle-shadow:none;
  --tab-color:#6b8ba0; --tab-active-c:#0284c7; --tab-underline-c:#0284c7; --tab-underline-w:3px;
  --dropdown-bg:#ffffff; --dropdown-border-w:1px; --dropdown-border-c:#d7e7f2; --dropdown-radius:16px; --dropdown-shadow:0 20px 48px rgba(2,132,199,.16); --dd-hover-bg:rgba(2,132,199,.07);
  --nav-hover-bg:rgba(6,36,51,.05); --nav-active-bg:rgba(2,132,199,.11); --nav-active-text:#0284c7; --nav-active-shadow:0 2px 10px rgba(2,132,199,.12);
  --lang-active-bg:#ffffff; --lang-active-text:#0284c7; --lang-radius:8px;
  --trial-bg:linear-gradient(135deg,rgba(2,132,199,.09),rgba(34,211,238,.06)); --trial-border-w:1px; --trial-border-c:rgba(2,132,199,.2); --trial-radius:16px; --trial-shadow:none;
  --chip-bg:#ffffff; --chip-border-w:1px; --chip-border-c:#b5d2e4; --chip-radius:10px; --chip-shadow:none; --chip-text:#35586c; --chip-hover-border-c:#0284c7; --chip-active-bg:#0284c7; --chip-active-text:#ffffff;
  --field-bg:#ffffff; --field-border-w:1px; --field-border-c:#b5d2e4; --field-radius:10px;
  --list-card-bg:#ffffff; --list-card-border-w:1px; --list-card-border-c:#d7e7f2; --list-card-radius:18px; --list-card-shadow:0 8px 20px rgba(2,132,199,.05);
  --toast-bg:#062433; --toast-text:#ffffff; --toast-radius:14px;
  --trdd-bg:#ffffff; --trdd-border-w:1px; --trdd-border-c:#d7e7f2; --trdd-radius:14px; --trdd-shadow:0 12px 32px rgba(2,132,199,.12); --trdd-hover-bg:rgba(8,145,178,.06);
  --icon-sun:block; --icon-moon:none;
}

/* ═══════════ THEME A' — MODERN-LIGHT hero (blue→cyan showpiece) ═══════════ */
[data-theme="modern-light"] #heroBanner h2{color:#fff !important}
[data-theme="modern-light"] #heroBanner #heroName{color:#fff !important}
[data-theme="modern-light"] #heroBanner #heroText{color:rgba(255,255,255,.9) !important}
[data-theme="modern-light"] #heroBanner .hero-streak-value{color:#fff !important}
[data-theme="modern-light"] #heroBanner .hero-glass-title{color:#fff !important}
[data-theme="modern-light"] #heroBanner p[data-i18n="hero_streak"]{color:#c8ecfa !important}
[data-theme="modern-light"] #heroBanner p[data-i18n="hero_consistency"],
[data-theme="modern-light"] #heroBanner p[data-i18n="hero_continue"],
[data-theme="modern-light"] #heroBanner p[data-i18n="hero_transcript"],
[data-theme="modern-light"] #heroBanner p[data-i18n="hero_word_bank"]{color:rgba(214,244,255,.78) !important}
[data-theme="modern-light"] #heroBanner .c-pill--glass{background:rgba(255,255,255,.16) !important;border-color:rgba(255,255,255,.32) !important}
[data-theme="modern-light"] #heroBanner .c-pill--glass .c-micro--cyan{color:#d9f4ff !important}
[data-theme="modern-light"] #heroBanner span[data-i18n="hero_suggested"]{color:#d9f4ff !important}
[data-theme="modern-light"] #heroBanner span[style*="background:var(--cyan)"][style*="width:7px"]{background:#bdebfa !important}
[data-theme="modern-light"] #heroBanner .hero-glass-card p:last-child{color:rgba(255,255,255,.68) !important}
[data-theme="modern-light"] #heroBanner .hero-glass-card p.c-micro--cyan{color:#e3f7ff !important}
[data-theme="modern-light"] #heroBanner .hero-glass-card p.c-micro--cyan span{color:#e3f7ff !important}
[data-theme="modern-light"] #heroBanner #heroAiWbLeft{color:#fcd34d !important}
[data-theme="modern-light"] #heroBanner input[type="text"]{color:#062433 !important;background:rgba(255,255,255,.24) !important;border-color:rgba(255,255,255,.5) !important;box-shadow:0 4px 18px rgba(2,132,199,.14) !important}
[data-theme="modern-light"] #heroBanner input[type="text"]::placeholder{color:rgba(6,36,51,.5) !important}
[data-theme="modern-light"] #heroBanner #heroStreakBox{background:rgba(255,255,255,.12) !important;border-color:rgba(255,255,255,.24) !important}
[data-theme="modern-light"] #heroBanner #heroStreakBox .material-symbols-outlined{color:#c8ecfa !important}
[data-theme="modern-light"] #heroBanner .gc-icon-box{color:#c8ecfa !important;background:rgba(255,255,255,.1) !important;border-color:rgba(255,255,255,.18) !important}
[data-theme="modern-light"] #heroBanner div[style*="position:relative;max-width:420px"] .material-symbols-outlined{color:#062433 !important}

/* ═══════════ THEME C — GEN-Z (vivid candy glass) ═══════════ */
[data-theme="genz"]{
  --bg:#b23df2; --bg-2:#3d6df7; --shell:transparent;
  --panel:rgba(139,92,246,.3); --panel-2:rgba(255,255,255,.14);
  --card:rgba(255,255,255,.18); --card2:rgba(255,255,255,.12);
  --line:rgba(255,255,255,.45); --line-strong:rgba(255,255,255,.65);
  --text:#ffffff; --text-soft:rgba(255,255,255,.93); --text-faint:rgba(255,255,255,.75);
  --black-btn:#ffffff; --black-btn-hover:#ffeb3b;
  --active-nav:rgba(255,255,255,.28);
  --teal:#ffeb3b; --teal-2:#ffffff; --cyan:#ffeb3b; --teal-3:#ffffff;
  --teal-4:rgba(255,235,59,.22);
  --beige:rgba(255,255,255,.42);
  --green:#ffeb3b; --green-hover:#ffffff; --green-soft:rgba(255,235,59,.2);
  --blue:#ffffff; --blue-hover:#ffeb3b; --blue-soft:rgba(255,255,255,.18);
  --amber:#ffeb3b;
  --purple:rgba(255,255,255,.3); --purple-soft:rgba(255,255,255,.16); --purple-line:rgba(255,255,255,.42);
  --shadow-soft:0 24px 50px rgba(91,33,182,.45);
  --shadow-card:0 16px 36px rgba(91,33,182,.38);
  --hero-overlay:rgba(0,0,0,.1);
  --hero-text:#ffffff;
  --hero-chip:rgba(255,255,255,.24); --hero-chip-strong:rgba(255,255,255,.36); --hero-chip-text:#ffffff;
  --radius-shell:30px; --radius-card:28px; --radius-btn:999px; --radius-hero:28px;
  --font-ui:'Plus Jakarta Sans','Inter',ui-sans-serif,system-ui,sans-serif;
  --app-bg:radial-gradient(circle at 85% 15%,rgba(255,255,255,.32),transparent 32%),radial-gradient(circle at 12% 88%,rgba(255,46,159,.5),transparent 38%),radial-gradient(circle at 45% 45%,rgba(139,92,246,.28),transparent 55%),linear-gradient(135deg,#ff2e9f 0%,#7b2ff7 48%,#2f7bff 100%);
  --topbar-bg:rgba(255,255,255,.18); --topbar-border-w:1px; --topbar-border-c:rgba(255,255,255,.38); --topbar-radius:0px; --topbar-shadow:none;
  --sidebar-border-w:0; --sidebar-border-c:rgba(255,255,255,.28);
  --main-panel-bg:rgba(139,92,246,.26); --main-panel-border-w:1px; --main-panel-border-c:rgba(255,255,255,.42); --main-panel-radius:30px; --main-panel-shadow:0 30px 70px rgba(91,33,182,.42);
  --card-bg:rgba(255,255,255,.2); --card-border-w:1px; --card-border-c:rgba(255,255,255,.48); --card-radius:28px; --card-shadow:0 12px 30px rgba(91,33,182,.32); --card-hover-border-c:#ffeb3b; --card-hover-shadow:0 20px 44px rgba(91,33,182,.45); --card-hover-y:-4px;
  --card-sel-border-c:#ffeb3b; --card-sel-glow:0 0 0 2px rgba(255,235,59,.6),0 16px 40px rgba(91,33,182,.42);
  --prog-bg:rgba(255,255,255,.32); --prog-border-w:0px; --prog-border-c:transparent; --prog-radius:6px; --prog-fill:linear-gradient(90deg,#ffeb3b,#ff2e9f);
  --hero-bg:linear-gradient(135deg,rgba(255,46,159,.42),rgba(123,47,247,.42) 55%,rgba(47,123,255,.42)); --hero-border-w:1px; --hero-border-c:rgba(255,255,255,.48); --hero-radius:30px; --hero-shadow:0 30px 80px rgba(91,33,182,.42); --hero-prism-opacity:.5;
  --glass-bg:rgba(255,255,255,.24); --glass-border-w:1px; --glass-border-c:rgba(255,255,255,.55); --glass-radius:24px; --glass-shadow:0 14px 34px rgba(91,33,182,.3); --glass-hover-bg:rgba(255,255,255,.36); --glass-hover-border-c:#ffeb3b;
  --input-bg:rgba(255,255,255,.26); --input-border-w:1px; --input-border-c:rgba(255,255,255,.55); --input-radius:14px;
  --chart-bg:rgba(255,255,255,.22); --chart-border-w:1px; --chart-border-c:rgba(255,255,255,.48); --chart-radius:28px; --chart-shadow:0 20px 48px rgba(91,33,182,.38); --chart-total-c:#ffeb3b; --chart-bar-grad:linear-gradient(180deg,#ffeb3b,#ff2e9f 130%);
  --btn-primary-bg:#ffffff; --btn-primary-text:#7b2ff7; --btn-primary-radius:999px; --btn-primary-shadow:0 8px 24px rgba(0,0,0,.28);
  --btn-secondary-bg:rgba(255,255,255,.22); --btn-secondary-border-w:1px; --btn-secondary-border-c:rgba(255,255,255,.55); --btn-secondary-text:#fff; --btn-secondary-radius:999px; --btn-secondary-shadow:none;
  --btn-start-bg:rgba(255,235,59,.95); --btn-start-text:#7b2ff7; --btn-start-border-w:0px; --btn-start-border-c:transparent; --btn-start-radius:999px; --btn-start-shadow:0 10px 28px rgba(255,46,159,.4);
  --toggle-border-w:1px; --toggle-border-c:rgba(255,255,255,.48); --toggle-radius:999px; --toggle-shadow:none;
  --tab-color:rgba(255,255,255,.9); --tab-active-c:#ffeb3b; --tab-underline-c:#ffeb3b; --tab-underline-w:4px;
  --dropdown-bg:rgba(91,33,182,.92); --dropdown-border-w:1px; --dropdown-border-c:rgba(255,255,255,.38); --dropdown-radius:18px; --dropdown-shadow:0 24px 56px rgba(91,33,182,.5); --dd-hover-bg:rgba(255,255,255,.18);
  --nav-hover-bg:rgba(255,255,255,.16); --nav-active-bg:rgba(255,255,255,.3); --nav-active-text:#fff; --nav-active-shadow:0 4px 16px rgba(91,33,182,.32);
  --lang-active-bg:rgba(255,255,255,.24); --lang-active-text:#ffeb3b; --lang-radius:8px;
  --trial-bg:rgba(255,255,255,.2); --trial-border-w:1px; --trial-border-c:rgba(255,255,255,.42); --trial-radius:18px; --trial-shadow:none;
  --chip-bg:rgba(255,255,255,.2); --chip-border-w:1px; --chip-border-c:rgba(255,255,255,.42); --chip-radius:999px; --chip-shadow:none; --chip-text:rgba(255,255,255,.96); --chip-hover-border-c:#ffeb3b; --chip-active-bg:#ffeb3b; --chip-active-text:#7b2ff7;
  --field-bg:rgba(255,255,255,.22); --field-border-w:1px; --field-border-c:rgba(255,255,255,.42); --field-radius:12px;
  --list-card-bg:rgba(255,255,255,.2); --list-card-border-w:1px; --list-card-border-c:rgba(255,255,255,.42); --list-card-radius:18px; --list-card-shadow:0 14px 34px rgba(91,33,182,.32);
  --toast-bg:#ffeb3b; --toast-text:#7b2ff7; --toast-radius:999px;
  --trdd-bg:rgba(91,33,182,.92); --trdd-border-w:1px; --trdd-border-c:rgba(255,255,255,.38); --trdd-radius:16px; --trdd-shadow:0 14px 34px rgba(91,33,182,.4); --trdd-hover-bg:rgba(255,255,255,.18);
  --icon-sun:block; --icon-moon:none;
}

/* ═══════════ THEME C' — GENZ-DARK (dark counterpart, refined) ═══════════ */
[data-theme="genz-dark"]{
  --bg:#3b0764; --bg-2:#1e1b4b; --shell:transparent;
  --panel:rgba(10,6,24,.5); --panel-2:rgba(255,255,255,.06);
  --card:rgba(30,14,58,.62); --card2:rgba(255,255,255,.06);
  --line:rgba(196,181,253,.22); --line-strong:rgba(196,181,253,.38);
  --text:#ffffff; --text-soft:rgba(255,255,255,.84); --text-faint:rgba(255,255,255,.6);
  --black-btn:#f0abfc; --black-btn-hover:#ffffff;
  --active-nav:rgba(255,255,255,.12);
  --teal:#f0abfc; --teal-2:#f0abfc; --cyan:#f0abfc; --teal-3:#ffffff;
  --teal-4:rgba(240,171,252,.14);
  --beige:rgba(196,181,253,.24);
  --green:#f0abfc; --green-hover:#ffffff; --green-soft:rgba(240,171,252,.12);
  --blue:#c4b5fd; --blue-hover:#f0abfc; --blue-soft:rgba(196,181,253,.12);
  --amber:#f0abfc;
  --purple:rgba(196,181,253,.14); --purple-soft:rgba(255,255,255,.06); --purple-line:rgba(196,181,253,.2);
  --shadow-soft:0 28px 60px rgba(0,0,0,.55);
  --shadow-card:0 18px 42px rgba(0,0,0,.5);
  --hero-overlay:rgba(0,0,0,.2);
  --hero-text:#ffffff;
  --hero-chip:rgba(255,255,255,.1); --hero-chip-strong:rgba(255,255,255,.18); --hero-chip-text:#ffffff;
  --radius-shell:30px; --radius-card:28px; --radius-btn:999px; --radius-hero:30px;
  --font-ui:'Plus Jakarta Sans','Inter',ui-sans-serif,system-ui,sans-serif;
  --app-bg:radial-gradient(circle at 85% 15%,rgba(196,181,253,.26),transparent 35%),radial-gradient(circle at 10% 85%,rgba(236,72,153,.3),transparent 42%),radial-gradient(circle at 50% 0%,rgba(168,85,247,.22),transparent 48%),linear-gradient(135deg,#5b21b6 0%,#3b0764 50%,#1e1b4b 100%);
  --topbar-bg:rgba(10,6,24,.55); --topbar-border-w:1px; --topbar-border-c:rgba(196,181,253,.16); --topbar-radius:0px; --topbar-shadow:none;
  --sidebar-border-w:0; --sidebar-border-c:rgba(196,181,253,.12);
  --main-panel-bg:rgba(10,6,24,.45); --main-panel-border-w:1px; --main-panel-border-c:rgba(196,181,253,.2); --main-panel-radius:32px; --main-panel-shadow:0 34px 80px rgba(0,0,0,.55);
  --card-bg:rgba(30,14,58,.62); --card-border-w:1px; --card-border-c:rgba(196,181,253,.22); --card-radius:28px; --card-shadow:0 14px 34px rgba(0,0,0,.45); --card-hover-border-c:#f0abfc; --card-hover-shadow:0 22px 48px rgba(0,0,0,.55); --card-hover-y:-4px;
  --card-sel-border-c:#f0abfc; --card-sel-glow:0 0 0 2px rgba(240,171,252,.45),0 18px 44px rgba(0,0,0,.5);
  --prog-bg:rgba(255,255,255,.16); --prog-border-w:0px; --prog-border-c:transparent; --prog-radius:6px; --prog-fill:linear-gradient(90deg,#f0abfc,#ec4899);
  --hero-bg:rgba(10,6,24,.5); --hero-border-w:1px; --hero-border-c:rgba(196,181,253,.2); --hero-radius:30px; --hero-shadow:0 34px 80px rgba(0,0,0,.55); --hero-prism-opacity:.5;
  --glass-bg:rgba(30,14,58,.6); --glass-border-w:1px; --glass-border-c:rgba(196,181,253,.24); --glass-radius:24px; --glass-shadow:0 14px 34px rgba(0,0,0,.4); --glass-hover-bg:rgba(46,22,88,.72); --glass-hover-border-c:#f0abfc;
  --input-bg:rgba(10,6,24,.55); --input-border-w:1px; --input-border-c:rgba(196,181,253,.24); --input-radius:14px;
  --chart-bg:rgba(30,14,58,.62); --chart-border-w:1px; --chart-border-c:rgba(196,181,253,.22); --chart-radius:28px; --chart-shadow:0 22px 52px rgba(0,0,0,.5); --chart-total-c:#f0abfc; --chart-bar-grad:linear-gradient(180deg,#f0abfc,#ec4899 130%);
  --btn-primary-bg:#f0abfc; --btn-primary-text:#3b0764; --btn-primary-radius:999px; --btn-primary-shadow:0 8px 24px rgba(0,0,0,.3);
  --btn-secondary-bg:rgba(255,255,255,.08); --btn-secondary-border-w:1px; --btn-secondary-border-c:rgba(196,181,253,.26); --btn-secondary-text:#fff; --btn-secondary-radius:999px; --btn-secondary-shadow:none;
  --btn-start-bg:rgba(196,181,253,.14); --btn-start-text:#f0abfc; --btn-start-border-w:1px; --btn-start-border-c:rgba(240,171,252,.32); --btn-start-radius:999px; --btn-start-shadow:0 8px 24px rgba(0,0,0,.35);
  --toggle-border-w:1px; --toggle-border-c:rgba(196,181,253,.26); --toggle-radius:999px; --toggle-shadow:none;
  --tab-color:rgba(255,255,255,.78); --tab-active-c:#f0abfc; --tab-underline-c:#f0abfc; --tab-underline-w:4px;
  --dropdown-bg:rgba(20,10,44,.94); --dropdown-border-w:1px; --dropdown-border-c:rgba(196,181,253,.2); --dropdown-radius:18px; --dropdown-shadow:0 26px 60px rgba(0,0,0,.5); --dd-hover-bg:rgba(255,255,255,.1);
  --nav-hover-bg:rgba(255,255,255,.08); --nav-active-bg:rgba(240,171,252,.14); --nav-active-text:#f0abfc; --nav-active-shadow:0 4px 16px rgba(0,0,0,.35);
  --lang-active-bg:rgba(255,255,255,.14); --lang-active-text:#f0abfc; --lang-radius:8px;
  --trial-bg:rgba(240,171,252,.09); --trial-border-w:1px; --trial-border-c:rgba(240,171,252,.22); --trial-radius:18px; --trial-shadow:none;
  --chip-bg:rgba(30,14,58,.62); --chip-border-w:1px; --chip-border-c:rgba(196,181,253,.22); --chip-radius:999px; --chip-shadow:none; --chip-text:rgba(255,255,255,.88); --chip-hover-border-c:#f0abfc; --chip-active-bg:#f0abfc; --chip-active-text:#3b0764;
  --field-bg:rgba(10,6,24,.55); --field-border-w:1px; --field-border-c:rgba(196,181,253,.24); --field-radius:12px;
  --list-card-bg:rgba(30,14,58,.62); --list-card-border-w:1px; --list-card-border-c:rgba(196,181,253,.22); --list-card-radius:18px; --list-card-shadow:0 14px 34px rgba(0,0,0,.4);
  --toast-bg:#f0abfc; --toast-text:#3b0764; --toast-radius:999px;
  --trdd-bg:rgba(20,10,44,.94); --trdd-border-w:1px; --trdd-border-c:rgba(196,181,253,.2); --trdd-radius:16px; --trdd-shadow:0 14px 34px rgba(0,0,0,.4); --trdd-hover-bg:rgba(255,255,255,.1);
  --icon-sun:none; --icon-moon:block;
}

/* ═══════════════════════════════════════════════════════════════
   GENERIC COMPONENT LAYER — shared by all 6 wrapped themes.
   Uses ONLY tokens, so the theme-studio can override any value live.
   ═══════════════════════════════════════════════════════════════ */
/* Body + shell */
[data-theme="modern"] body,[data-theme="modern-light"] body,
[data-theme="genz"] body,[data-theme="genz-dark"] body{background:var(--app-bg);background-attachment:fixed}
/* Topbar + its dropdowns must paint ABOVE .main-panel (which is position:relative;z-index:0 and, in
   genz, a backdrop-filter stacking context). Without this, the user dropdown hides behind the main box. */
[data-theme="modern"] .topbar,[data-theme="modern-light"] .topbar,
[data-theme="genz"] .topbar,[data-theme="genz-dark"] .topbar{background:var(--topbar-bg);border-bottom:var(--topbar-border-w) solid var(--topbar-border-c);box-shadow:var(--topbar-shadow);position:relative;z-index:100}
[data-theme="modern"] .sidebar,[data-theme="modern-light"] .sidebar,
[data-theme="genz"] .sidebar,[data-theme="genz-dark"] .sidebar{border-right:var(--sidebar-border-w) solid var(--sidebar-border-c)}
[data-theme="modern"] .main-panel,[data-theme="modern-light"] .main-panel,
[data-theme="genz"] .main-panel,[data-theme="genz-dark"] .main-panel{background:var(--main-panel-bg);border:var(--main-panel-border-w) solid var(--main-panel-border-c);border-radius:var(--main-panel-radius);box-shadow:var(--main-panel-shadow)}
[data-theme="modern"] .panel-head h2,[data-theme="modern-light"] .panel-head h2,
[data-theme="genz"] .panel-head h2,[data-theme="genz-dark"] .panel-head h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em}

/* Cards / metrics */
[data-theme="modern"] .metric-card,[data-theme="modern-light"] .metric-card,
[data-theme="genz"] .metric-card,[data-theme="genz-dark"] .metric-card{background:var(--card-bg);border:var(--card-border-w) solid var(--card-border-c);border-radius:var(--card-radius);box-shadow:var(--card-shadow);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
[data-theme="modern"] .metric-card:hover,[data-theme="modern-light"] .metric-card:hover,
[data-theme="genz"] .metric-card:hover,[data-theme="genz-dark"] .metric-card:hover{transform:translateY(var(--card-hover-y));border-color:var(--card-hover-border-c);box-shadow:var(--card-hover-shadow)}
/* Contain the metric-card hover shadow so the first/last cards aren't cut off
   at the panel's side margins (the panel clips horizontal overflow via
   overflow-x:hidden, and the default --card-hover-shadow blur 34-38px extends
   past its 34px padding on the edge cards). */
[data-theme="modern"] .stats-row .metric-card:hover{box-shadow:0 8px 18px -6px rgba(0,0,0,.3) !important}
[data-theme="modern-light"] .stats-row .metric-card:hover{box-shadow:0 8px 18px -6px rgba(2,132,199,.22) !important}
[data-theme="modern"] .metric-card.selected,[data-theme="modern-light"] .metric-card.selected,
[data-theme="genz"] .metric-card.selected,[data-theme="genz-dark"] .metric-card.selected{border-color:var(--card-sel-border-c) !important;box-shadow:var(--card-sel-glow) !important}
[data-theme="modern"] .metric-value,[data-theme="modern-light"] .metric-value,
[data-theme="genz"] .metric-value,[data-theme="genz-dark"] .metric-value{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em}
[data-theme="modern"] .metric-label,[data-theme="modern-light"] .metric-label,
[data-theme="genz"] .metric-label,[data-theme="genz-dark"] .metric-label{font-family:var(--font-display);font-weight:700;letter-spacing:.12em}
[data-theme="modern"] .prog,[data-theme="modern-light"] .prog,
[data-theme="genz"] .prog,[data-theme="genz-dark"] .prog{background:var(--prog-bg);border:var(--prog-border-w) solid var(--prog-border-c);border-radius:var(--prog-radius)}
[data-theme="modern"] .prog-fill.teal,[data-theme="modern-light"] .prog-fill.teal,
[data-theme="genz"] .prog-fill.teal,[data-theme="genz-dark"] .prog-fill.teal{background:var(--prog-fill)}

/* Hero */
[data-theme="modern"] #heroBanner,[data-theme="modern-light"] #heroBanner,
[data-theme="genz"] #heroBanner,[data-theme="genz-dark"] #heroBanner{background:var(--hero-bg);backdrop-filter:blur(48px);border:var(--hero-border-w) solid var(--hero-border-c);border-radius:var(--hero-radius);box-shadow:var(--hero-shadow)}
[data-theme="modern"] #heroBanner::before,[data-theme="modern-light"] #heroBanner::before,
[data-theme="genz"] #heroBanner::before,[data-theme="genz-dark"] #heroBanner::before{opacity:var(--hero-prism-opacity)}
[data-theme="modern"] .glass-card,[data-theme="modern-light"] .glass-card,
[data-theme="genz"] .glass-card,[data-theme="genz-dark"] .glass-card{background:var(--glass-bg);backdrop-filter:blur(20px);border:var(--glass-border-w) solid var(--glass-border-c);border-radius:var(--glass-radius);box-shadow:var(--glass-shadow)}
[data-theme="modern"] .glass-card:hover,[data-theme="modern-light"] .glass-card:hover,
[data-theme="genz"] .glass-card:hover,[data-theme="genz-dark"] .glass-card:hover{background:var(--glass-hover-bg);border-color:var(--glass-hover-border-c)}
[data-theme="modern"] #heroBanner input[type="text"],[data-theme="modern-light"] #heroBanner input[type="text"],
[data-theme="genz"] #heroBanner input[type="text"],[data-theme="genz-dark"] #heroBanner input[type="text"]{background:var(--input-bg);border:var(--input-border-w) solid var(--input-border-c);border-radius:var(--input-radius);color:var(--text)}

/* Chart card */
[data-theme="modern"] #dailyChartCard,[data-theme="modern-light"] #dailyChartCard,
[data-theme="genz"] #dailyChartCard,[data-theme="genz-dark"] #dailyChartCard{background:var(--chart-bg);border:var(--chart-border-w) solid var(--chart-border-c);border-radius:var(--chart-radius);box-shadow:var(--chart-shadow)}
[data-theme="modern"] #dailyChartTitle,[data-theme="modern-light"] #dailyChartTitle,
[data-theme="genz"] #dailyChartTitle,[data-theme="genz-dark"] #dailyChartTitle{font-family:var(--font-display);font-weight:800}
[data-theme="modern"] #dailyChartTotal,[data-theme="modern-light"] #dailyChartTotal,
[data-theme="genz"] #dailyChartTotal,[data-theme="genz-dark"] #dailyChartTotal{color:var(--chart-total-c)!important}
[data-theme="modern"] #dailyChart .chart-bar > div,[data-theme="modern-light"] #dailyChart .chart-bar > div,
[data-theme="genz"] #dailyChart .chart-bar > div,[data-theme="genz-dark"] #dailyChart .chart-bar > div{background:var(--chart-bar-grad)!important;border-radius:14px 14px 4px 4px}

/* Buttons / chrome */
[data-theme="modern"] .primary-btn,[data-theme="modern-light"] .primary-btn,
[data-theme="genz"] .primary-btn,[data-theme="genz-dark"] .primary-btn{background:var(--btn-primary-bg);color:var(--btn-primary-text);border-radius:var(--btn-primary-radius);box-shadow:var(--btn-primary-shadow)}
[data-theme="modern"] .secondary-btn,[data-theme="modern-light"] .secondary-btn,
[data-theme="genz"] .secondary-btn,[data-theme="genz-dark"] .secondary-btn{background:var(--btn-secondary-bg);border:var(--btn-secondary-border-w) solid var(--btn-secondary-border-c);color:var(--btn-secondary-text);border-radius:var(--btn-secondary-radius);box-shadow:var(--btn-secondary-shadow)}
[data-theme="modern"] .btn-start-session,[data-theme="modern-light"] .btn-start-session,
[data-theme="genz"] .btn-start-session,[data-theme="genz-dark"] .btn-start-session{background:var(--btn-start-bg);color:var(--btn-start-text);border:var(--btn-start-border-w) solid var(--btn-start-border-c);border-radius:var(--btn-start-radius);box-shadow:var(--btn-start-shadow)}
[data-theme="modern"] .theme-toggle,[data-theme="modern-light"] .theme-toggle,
[data-theme="genz"] .theme-toggle,[data-theme="genz-dark"] .theme-toggle{border:var(--toggle-border-w) solid var(--toggle-border-c);border-radius:var(--toggle-radius);box-shadow:var(--toggle-shadow)}
[data-theme="modern"] .icon-btn:hover,[data-theme="modern-light"] .icon-btn:hover,
[data-theme="genz"] .icon-btn:hover,[data-theme="genz-dark"] .icon-btn:hover{background:var(--dd-hover-bg)}

/* Tabs */
[data-theme="modern"] .tab-link,[data-theme="modern-light"] .tab-link,
[data-theme="genz"] .tab-link,[data-theme="genz-dark"] .tab-link{color:var(--tab-color);font-weight:600}
[data-theme="modern"] .tab-link.active,[data-theme="modern-light"] .tab-link.active,
[data-theme="genz"] .tab-link.active,[data-theme="genz-dark"] .tab-link.active{color:var(--tab-active-c)}
[data-theme="modern"] .tab-link::after,[data-theme="modern-light"] .tab-link::after,
[data-theme="genz"] .tab-link::after,[data-theme="genz-dark"] .tab-link::after{background:var(--tab-underline-c);height:var(--tab-underline-w)}
[data-theme="modern"] .panel-tabs,[data-theme="modern-light"] .panel-tabs,
[data-theme="genz"] .panel-tabs,[data-theme="genz-dark"] .panel-tabs{border-bottom:1px solid var(--line)}

/* Dropdowns */
[data-theme="modern"] .dropdown,[data-theme="modern-light"] .dropdown,
[data-theme="genz"] .dropdown,[data-theme="genz-dark"] .dropdown{background:var(--dropdown-bg);border:var(--dropdown-border-w) solid var(--dropdown-border-c);border-radius:var(--dropdown-radius);box-shadow:var(--dropdown-shadow)}
[data-theme="modern"] .dropdown-item:hover,[data-theme="modern-light"] .dropdown-item:hover,
[data-theme="genz"] .dropdown-item:hover,[data-theme="genz-dark"] .dropdown-item:hover{background:var(--dd-hover-bg)}
[data-theme="modern"] .dropdown-div,[data-theme="modern-light"] .dropdown-div,
[data-theme="genz"] .dropdown-div,[data-theme="genz-dark"] .dropdown-div{background:var(--line)}

/* Nav */
[data-theme="modern"] .nav-item:hover:not(.active),[data-theme="modern-light"] .nav-item:hover:not(.active),
[data-theme="genz"] .nav-item:hover:not(.active),[data-theme="genz-dark"] .nav-item:hover:not(.active){background:var(--nav-hover-bg)}
[data-theme="modern"] .nav-item.active,[data-theme="modern-light"] .nav-item.active,
[data-theme="genz"] .nav-item.active,[data-theme="genz-dark"] .nav-item.active{background:var(--nav-active-bg);color:var(--nav-active-text);box-shadow:var(--nav-active-shadow)}
[data-theme="modern"] .nav-item.teal.active,[data-theme="modern-light"] .nav-item.teal.active,
[data-theme="genz"] .nav-item.teal.active,[data-theme="genz-dark"] .nav-item.teal.active{background:var(--nav-active-bg);color:var(--nav-active-text)}
[data-theme="modern"] .lang-opt.active,[data-theme="modern-light"] .lang-opt.active,
[data-theme="genz"] .lang-opt.active,[data-theme="genz-dark"] .lang-opt.active{background:var(--lang-active-bg);color:var(--lang-active-text);border-radius:var(--lang-radius)}

/* Trial / chips / fields / lists / toast / 3-dot */
[data-theme="modern"] .trial-card,[data-theme="modern-light"] .trial-card,
[data-theme="genz"] .trial-card,[data-theme="genz-dark"] .trial-card{background:var(--trial-bg);border:var(--trial-border-w) solid var(--trial-border-c);border-radius:var(--trial-radius);box-shadow:var(--trial-shadow)}
[data-theme="modern"] .q-chip,[data-theme="modern-light"] .q-chip,
[data-theme="genz"] .q-chip,[data-theme="genz-dark"] .q-chip{background:var(--chip-bg);border:var(--chip-border-w) solid var(--chip-border-c);border-radius:var(--chip-radius);box-shadow:var(--chip-shadow);color:var(--chip-text)}
[data-theme="modern"] .q-chip:hover,[data-theme="modern-light"] .q-chip:hover,
[data-theme="genz"] .q-chip:hover,[data-theme="genz-dark"] .q-chip:hover{border-color:var(--chip-hover-border-c)}
[data-theme="modern"] .q-chip.active,[data-theme="modern-light"] .q-chip.active,
[data-theme="genz"] .q-chip.active,[data-theme="genz-dark"] .q-chip.active{background:var(--chip-active-bg);color:var(--chip-active-text);border-color:var(--chip-active-bg)}
[data-theme="modern"] .field input,[data-theme="modern-light"] .field input,
[data-theme="modern"] .field select,[data-theme="modern-light"] .field select,
[data-theme="modern"] .field textarea,[data-theme="modern-light"] .field textarea,
[data-theme="genz"] .field input,[data-theme="genz-dark"] .field input,
[data-theme="genz"] .field select,[data-theme="genz-dark"] .field select,
[data-theme="genz"] .field textarea,[data-theme="genz-dark"] .field textarea{background:var(--field-bg);border:var(--field-border-w) solid var(--field-border-c);border-radius:var(--field-radius);color:var(--text)}
[data-theme="modern"] .habit-card,[data-theme="modern-light"] .habit-card,
[data-theme="modern"] .dictionary-list-card,[data-theme="modern-light"] .dictionary-list-card,
[data-theme="modern"] .alt-card,[data-theme="modern-light"] .alt-card,
[data-theme="genz"] .habit-card,[data-theme="genz-dark"] .habit-card,
[data-theme="genz"] .dictionary-list-card,[data-theme="genz-dark"] .dictionary-list-card,
[data-theme="genz"] .alt-card,[data-theme="genz-dark"] .alt-card{background:var(--list-card-bg);border:var(--list-card-border-w) solid var(--list-card-border-c);border-radius:var(--list-card-radius);box-shadow:var(--list-card-shadow)}
[data-theme="modern"] .toast,[data-theme="modern-light"] .toast,
[data-theme="genz"] .toast,[data-theme="genz-dark"] .toast{background:var(--toast-bg);color:var(--toast-text);border-radius:var(--toast-radius)}
[data-theme="modern"] .tr-dd,[data-theme="modern-light"] .tr-dd,
[data-theme="genz"] .tr-dd,[data-theme="genz-dark"] .tr-dd{background:var(--trdd-bg);border:var(--trdd-border-w) solid var(--trdd-border-c);border-radius:var(--trdd-radius);box-shadow:var(--trdd-shadow)}
[data-theme="modern"] .tr-dd-item:hover,[data-theme="modern-light"] .tr-dd-item:hover,
[data-theme="genz"] .tr-dd-item:hover,[data-theme="genz-dark"] .tr-dd-item:hover{background:var(--trdd-hover-bg)}
[data-theme="modern"] .faq-item::before,[data-theme="modern-light"] .faq-item::before,
[data-theme="genz"] .faq-item::before,[data-theme="genz-dark"] .faq-item::before{color:var(--cyan)}
[data-theme="modern"] .tbl thead tr,[data-theme="modern-light"] .tbl thead tr,
[data-theme="genz"] .tbl thead tr,[data-theme="genz-dark"] .tbl thead tr{color:var(--text-soft)}

/* Theme icon (sun/moon) */
[data-theme="modern"] .theme-icon-moon,[data-theme="modern-light"] .theme-icon-moon,
[data-theme="genz"] .theme-icon-moon,[data-theme="genz-dark"] .theme-icon-moon{display:var(--icon-moon)}
[data-theme="modern"] .theme-icon-sun,[data-theme="modern-light"] .theme-icon-sun,
[data-theme="genz"] .theme-icon-sun,[data-theme="genz-dark"] .theme-icon-sun{display:var(--icon-sun)}
/* ═══════════════════════════════════════════════════════════════
   GEN-Z — HARD PIN  (exact replica of the original year-dash gen-z)
   ═══════════════════════════════════════════════════════════════
   Loaded LAST so it wins over every other rule. !important on the
   critical properties guarantees nothing else (generic layer, base
   theme-2.css, panoramica.css, tailwind, inline styles) can override
   the original look: vibrant #ff6ec4→#7873f5→#4facfe gradient,
   glass cards, yellow #ffeb3b accents, hard text-shadows, hover scale.
   ═══════════════════════════════════════════════════════════════ */
@keyframes wf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}

[data-theme="genz"]{
  --font-ui:'Plus Jakarta Sans','Inter',ui-sans-serif,system-ui,sans-serif !important;
  --font-display:'Space Grotesk','Manrope',ui-sans-serif,sans-serif !important;
}

/* ── Body: the exact vibrant gradient (source-exact: no extra overlays) ── */
[data-theme="genz"] body{
  background:linear-gradient(135deg,#ff6ec4 0%,#7873f5 50%,#4facfe 100%) !important;
  background-attachment:fixed !important;
}
[data-theme="genz"] .app-shell{background:transparent !important}

/* ── Topbar: glass pill ── */
[data-theme="genz"] .topbar{
  background:rgba(255,255,255,.12) !important;
  backdrop-filter:blur(20px) !important;
  border-bottom:1px solid rgba(255,255,255,.22) !important;
  box-shadow:0 8px 30px rgba(120,40,160,.25) !important;
}
[data-theme="genz"] .topbar-brand{color:#fff !important}
[data-theme="genz"] .topbar-brand span{color:#ffeb3b !important}
[data-theme="genz"] .theme-toggle{
  background:rgba(255,255,255,.2) !important;
  border:1px solid rgba(255,255,255,.4) !important;
  border-radius:999px !important;
  color:#fff !important;
  box-shadow:0 8px 24px rgba(120,40,160,.3) !important;
}
[data-theme="genz"] .icon-btn{color:#fff !important}
[data-theme="genz"] .icon-btn:hover{background:rgba(255,255,255,.18) !important}

/* ── Sidebar ── */
[data-theme="genz"] .sidebar{border-right:0 !important;background:transparent !important}
[data-theme="genz"] .nav-item{color:#fff !important}
[data-theme="genz"] .nav-item:hover:not(.active){background:rgba(255,255,255,.12) !important}
[data-theme="genz"] .nav-item.active{background:rgba(255,255,255,.26) !important;color:#ffeb3b !important;box-shadow:0 4px 16px rgba(120,40,160,.3) !important}
[data-theme="genz"] .nav-item.teal{color:#ffeb3b !important}
[data-theme="genz"] .nav-item.teal.active{background:#ffeb3b !important;color:#6d28d9 !important}
[data-theme="genz"] .lang-opt{color:rgba(255,255,255,.75) !important}
[data-theme="genz"] .lang-opt.active{background:rgba(255,255,255,.28) !important;color:#fff !important}
[data-theme="genz"] .trial-card{background:rgba(255,255,255,.14) !important;border:1px solid rgba(255,255,255,.3) !important}
[data-theme="genz"] .trial-btn{background:#fff !important;color:#6d28d9 !important;border-radius:999px !important}

/* ── Main panel: frosted glass ── */
[data-theme="genz"] .main-panel{
  background:rgba(255,255,255,.14) !important;
  backdrop-filter:blur(28px) !important;
  border:2px solid rgba(255,255,255,.3) !important;
  border-radius:34px !important;
  box-shadow:none !important;
}
[data-theme="genz"] .panel-head h2{
  font-family:var(--font-display) !important;
  font-weight:800 !important;
  letter-spacing:-.03em !important;
  color:#fff !important;
  text-shadow:5px 5px 0 rgba(0,0,0,.2) !important;
}

/* ── Tabs ── */
[data-theme="genz"] .tab-link{color:rgba(255,255,255,.8) !important;font-weight:700 !important}
[data-theme="genz"] .tab-link:hover{color:#fff !important}
[data-theme="genz"] .tab-link.active{color:#ffeb3b !important}
[data-theme="genz"] .tab-link::after{background:#ffeb3b !important;height:4px !important}
[data-theme="genz"] .panel-tabs{border-bottom:1px solid rgba(255,255,255,.22) !important}

/* ── Hero: vivid frosted glass (A colors + B glass) ── */
[data-theme="genz"] #heroBanner{
  background:linear-gradient(135deg,rgba(255,46,159,.42),rgba(123,47,247,.42) 55%,rgba(47,123,255,.42)) !important;
  backdrop-filter:blur(26px) !important;
  -webkit-backdrop-filter:blur(26px) !important;
  border:2px solid rgba(255,255,255,.35) !important;
  border-radius:34px !important;
  box-shadow:none !important;
  position:relative !important;
  overflow:hidden !important;
}
[data-theme="genz"] #heroBanner::before{
  content:'' !important;position:absolute !important;inset:0 !important;opacity:.22 !important;pointer-events:none !important;
  background:
    radial-gradient(circle at 15% 12%,rgba(255,255,255,.32) 0%,transparent 32%),
    radial-gradient(circle at 88% 80%,rgba(255,235,59,.28) 0%,transparent 36%) !important;
}
[data-theme="genz"] #heroBanner .hero-inner{position:relative !important;z-index:2 !important}
[data-theme="genz"] #heroBanner h2{color:#fff !important;font-family:var(--font-display) !important;font-weight:800 !important;text-shadow:5px 5px 0 rgba(0,0,0,.2) !important}
[data-theme="genz"] #heroBanner p{color:rgba(255,255,255,.92) !important}
[data-theme="genz"] #heroBanner .hero-chips{color:#fff !important}
[data-theme="genz"] #heroBanner input[type="text"]{
  background:rgba(255,255,255,.22) !important;
  border:1px solid rgba(255,255,255,.4) !important;
  border-radius:16px !important;
  color:#fff !important;
  box-shadow:0 8px 24px rgba(0,0,0,.15) !important;
}
[data-theme="genz"] #heroBanner input[type="text"]::placeholder{color:rgba(255,255,255,.75) !important}

/* ── Gen-Z dark hero (counterpart of the bright hero) ── */
[data-theme="genz-dark"] #heroBanner{
  background:linear-gradient(135deg,#312e81 0%,#4c1d95 50%,#9d174d 100%) !important;
  backdrop-filter:blur(0px) !important;
  border:2px solid rgba(196,181,253,.28) !important;
  border-radius:34px !important;
  box-shadow:none !important;
  position:relative !important;
  overflow:hidden !important;
}
[data-theme="genz-dark"] #heroBanner::before{
  content:'' !important;position:absolute !important;inset:0 !important;opacity:.45 !important;pointer-events:none !important;
  background:
    radial-gradient(circle at 15% 12%,rgba(196,181,253,.3) 0%,transparent 32%),
    radial-gradient(circle at 88% 80%,rgba(255,235,59,.26) 0%,transparent 36%),
    radial-gradient(circle at 50% 110%,rgba(236,72,153,.34) 0%,transparent 45%) !important;
}
[data-theme="genz-dark"] #heroBanner .hero-inner{position:relative !important;z-index:2 !important}
[data-theme="genz-dark"] #heroBanner h2{color:#fff !important;font-family:var(--font-display) !important;font-weight:800 !important;text-shadow:5px 5px 0 rgba(0,0,0,.25) !important}
[data-theme="genz-dark"] #heroBanner p{color:rgba(255,255,255,.9) !important}
[data-theme="genz-dark"] #heroBanner .hero-chips{color:#fff !important}
[data-theme="genz-dark"] #heroBanner input[type="text"]{
  background:rgba(10,6,24,.5) !important;
  backdrop-filter:blur(12px) !important;
  border:1px solid rgba(196,181,253,.32) !important;
  border-radius:16px !important;
  color:#fff !important;
  box-shadow:0 8px 24px rgba(0,0,0,.25) !important;
}
[data-theme="genz-dark"] #heroBanner input[type="text"]::placeholder{color:rgba(255,255,255,.65) !important}
[data-theme="genz-dark"] .glass-card{
  background:rgba(20,10,44,.55) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:2px solid rgba(196,181,253,.25) !important;
  border-radius:24px !important;
  box-shadow:none !important;
}
[data-theme="genz-dark"] .glass-card:hover{background:rgba(30,14,58,.75) !important;border-color:#f0abfc !important;transform:scale(1.02) !important}
[data-theme="genz"] .glass-card{
  background:rgba(255,255,255,.2) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:2px solid rgba(255,255,255,.4) !important;
  border-radius:24px !important;
  box-shadow:none !important;
}
[data-theme="genz"] .glass-card:hover{background:rgba(255,255,255,.3) !important;border-color:#ffeb3b !important;transform:scale(1.02) !important}

[data-theme="genz-dark"] .main-panel{
  background:var(--main-panel-bg) !important;
  border:var(--main-panel-border-w) solid var(--main-panel-border-c) !important;
  border-radius:var(--main-panel-radius) !important;
  box-shadow:none !important;
}
[data-theme="genz-dark"] .metric-card{
  background:var(--card-bg) !important;
  border:var(--card-border-w) solid var(--card-border-c) !important;
  border-radius:var(--card-radius) !important;
  box-shadow:none !important;
  transition:transform .3s cubic-bezier(.2,.8,.2,1) !important;
}
[data-theme="genz-dark"] .metric-card:hover{transform:translateY(var(--card-hover-y)) !important;border-color:var(--card-hover-border-c) !important;box-shadow:none !important}
[data-theme="genz-dark"] .metric-card.selected{border-color:var(--card-sel-border-c) !important;box-shadow:0 0 0 2px rgba(240,171,252,.45) !important}
[data-theme="genz-dark"] #dailyChartCard{
  background:var(--chart-bg) !important;
  border:var(--chart-border-w) solid var(--chart-border-c) !important;
  border-radius:var(--chart-radius) !important;
  box-shadow:none !important;
}
/* ── Metric cards: the exact original gradients ── */
[data-theme="genz"] .metric-card{
  border:2px solid rgba(255,255,255,.35) !important;
  border-radius:32px !important;
  box-shadow:none !important;
  transition:transform .3s cubic-bezier(.2,.8,.2,1) !important;
}
[data-theme="genz"] .metric-card:hover{transform:scale(1.02) !important;border-color:#ffeb3b !important;box-shadow:none !important}
[data-theme="genz"] .metric-card.selected{border-color:#ffeb3b !important;box-shadow:0 0 0 2px rgba(255,235,59,.5) !important}
/* card 1 — pink→yellow (dark text) */
[data-theme="genz"] .metric-card:nth-child(1){background:linear-gradient(135deg,#fa709a 0%,#fee140 100%) !important}
/* card 2 — mint→pink (dark text) */
[data-theme="genz"] .metric-card:nth-child(2){background:linear-gradient(135deg,#a8edea 0%,#fed6e3 100%) !important}
/* card 3 — indigo→purple→pink (white text) */
[data-theme="genz"] .metric-card:nth-child(3){background:linear-gradient(135deg,#667eea 0%,#764ba2 55%,#f093fb 100%) !important}
/* card 4+ — frosted glass */
[data-theme="genz"] .metric-card:nth-child(n+4){background:rgba(255,255,255,.16) !important}
[data-theme="genz"] .metric-card:nth-child(1) .metric-label,
[data-theme="genz"] .metric-card:nth-child(2) .metric-label{color:rgba(0,0,0,.65) !important}
[data-theme="genz"] .metric-card:nth-child(1) .metric-value,
[data-theme="genz"] .metric-card:nth-child(2) .metric-value{color:#000 !important;text-shadow:3px 3px 0 rgba(255,255,255,.5) !important}
[data-theme="genz"] .metric-card:nth-child(3) .metric-label{color:rgba(255,255,255,.85) !important}
[data-theme="genz"] .metric-card:nth-child(3) .metric-value{color:#fff !important;text-shadow:5px 5px 0 rgba(0,0,0,.2) !important}
[data-theme="genz"] .metric-card:nth-child(n+4) .metric-label{color:rgba(255,255,255,.8) !important}
[data-theme="genz"] .metric-card:nth-child(n+4) .metric-value{color:#fff !important;text-shadow:3px 3px 0 rgba(0,0,0,.15) !important}
[data-theme="genz"] .metric-value{font-family:var(--font-display) !important;font-weight:800 !important;letter-spacing:-.03em !important}
[data-theme="genz"] .metric-label{font-family:var(--font-display) !important;font-weight:700 !important;letter-spacing:.12em !important}

/* ── GEN-Z / GEN-Z DARK: yellow buttons must use dark text (readability) ── */
/* In these themes --cyan/--teal = #ffeb3b (yellow); buttons pair it with
   hardcoded color:#fff which is unreadable. Force dark text instead. */
[data-theme="genz"] .seg-control .seg-btn{color:#3b0764 !important}
[data-theme="genz"] .seg-control .seg-btn.active,[data-theme="genz-dark"] .seg-control .seg-btn.active{color:#0a0a0a !important}
[data-theme="genz"] .ss-btn-cap,
[data-theme="genz"] .ssconfirm,
[data-theme="genz"] .wb-btn,
[data-theme="genz"] #pnl-report-ai .rai-peer:checked + .rai-peer-checked-bg-primary,
[data-theme="genz"] [style*="background:var(--cyan);color:#fff"]{color:#6d28d9 !important}
[data-theme="genz-dark"] .ss-btn-cap,
[data-theme="genz-dark"] .ssconfirm,
[data-theme="genz-dark"] #pnl-report-ai .rai-peer:checked + .rai-peer-checked-bg-primary,
[data-theme="genz-dark"] [style*="background:var(--cyan);color:#fff"]{color:#3b0764 !important}
/* genz-dark: .wb-btn (e.g. Import File) sits on a DARK frosted chip (--chip-bg rgba(30,14,58,.62)) → keep LIGHT text; only the filled .active state is light-on-dark-pink */
[data-theme="genz-dark"] .wb-btn{color:rgba(255,255,255,.92) !important}
[data-theme="genz-dark"] .wb-btn.active{color:#3b0764 !important}

/* ── Progress bars ── */
[data-theme="genz"] .prog{background:rgba(255,255,255,.25) !important;border-radius:999px !important}
[data-theme="genz"] .prog-fill.teal{background:linear-gradient(90deg,#61DAFB,#00D8FF) !important;border-radius:999px !important}

/* ── Chart card ── */
[data-theme="genz"] #dailyChartCard{
  background:rgba(255,255,255,.16) !important;
  border:2px solid rgba(255,255,255,.3) !important;
  border-radius:32px !important;
  box-shadow:none !important;
}
[data-theme="genz"] #dailyChartTitle{color:#fff !important;font-family:var(--font-display) !important;font-weight:800 !important;text-shadow:3px 3px 0 rgba(0,0,0,.15) !important}
[data-theme="genz"] #dailyChartSubtitle,[data-theme="genz"] #dailyChartLabel{color:rgba(255,255,255,.8) !important}
[data-theme="genz"] #dailyChartTotal{color:#ffeb3b !important;text-shadow:3px 3px 0 rgba(0,0,0,.18) !important}
[data-theme="genz"] #dailyChart .chart-bar > div{background:linear-gradient(180deg,#ffeb3b,#ff6ec4 130%) !important;border-radius:14px 14px 4px 4px !important}
[data-theme="genz"] #dailyChartLabels{color:rgba(255,255,255,.7) !important}

/* ── Buttons ── */
[data-theme="genz"] .btn-start-session{
  background:rgba(255,255,255,.22) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.4) !important;
  border-radius:999px !important;
  backdrop-filter:blur(12px) !important;
  box-shadow:0 8px 24px rgba(120,40,160,.3) !important;
}
[data-theme="genz"] .primary-btn{background:#fff !important;color:#6d28d9 !important;border-radius:999px !important;box-shadow:0 8px 24px rgba(0,0,0,.18) !important}
[data-theme="genz"] .primary-btn:hover{background:#ffeb3b !important;color:#6d28d9 !important}
[data-theme="genz"] .secondary-btn{background:rgba(255,255,255,.18) !important;border:1px solid rgba(255,255,255,.35) !important;color:#fff !important;border-radius:999px !important;backdrop-filter:blur(10px) !important}

/* ── Chips / fields ── */
[data-theme="genz"] .q-chip{background:rgba(255,255,255,.16) !important;border:1px solid rgba(255,255,255,.35) !important;color:#fff !important;border-radius:999px !important;backdrop-filter:blur(10px) !important}
[data-theme="genz"] .q-chip:hover{border-color:#ffeb3b !important;background:rgba(255,255,255,.24) !important}
[data-theme="genz"] .q-chip.active{background:#ffeb3b !important;border-color:#ffeb3b !important;color:#6d28d9 !important}
[data-theme="genz"] .field input,[data-theme="genz"] .field select,[data-theme="genz"] .field textarea{background:rgba(255,255,255,.18) !important;border:1px solid rgba(255,255,255,.3) !important;border-radius:12px !important;color:#fff !important}
[data-theme="genz"] .field input::placeholder{color:rgba(255,255,255,.65) !important}

/* ── Cards / lists / dropdowns / toast ── */
[data-theme="genz"] .habit-card,[data-theme="genz"] .dictionary-list-card,[data-theme="genz"] .alt-card{background:rgba(255,255,255,.16) !important;border:2px solid rgba(255,255,255,.3) !important;border-radius:24px !important;box-shadow:none !important}
[data-theme="genz"] .dropdown{background:rgba(40,20,60,.9) !important;backdrop-filter:blur(20px) !important;border:1px solid rgba(255,255,255,.25) !important;border-radius:16px !important;box-shadow:0 24px 56px rgba(0,0,0,.35) !important}
[data-theme="genz"] .dropdown-item{color:#fff !important}
[data-theme="genz"] .dropdown-item:hover{background:rgba(255,255,255,.14) !important}
[data-theme="genz"] .dropdown-div{background:rgba(255,255,255,.2) !important}
[data-theme="genz"] .tr-dd{background:rgba(40,20,60,.9) !important;backdrop-filter:blur(20px) !important;border:1px solid rgba(255,255,255,.25) !important;border-radius:14px !important}
[data-theme="genz"] .tr-dd-item{color:#fff !important}
[data-theme="genz"] .tr-dd-item:hover{background:rgba(255,255,255,.14) !important}
[data-theme="genz"] .toast{background:#ffeb3b !important;color:#6d28d9 !important;border-radius:999px !important;box-shadow:0 12px 30px rgba(0,0,0,.3) !important}
[data-theme="genz"] .faq-item::before{color:#ffeb3b !important}
[data-theme="genz"] .tbl thead tr{color:rgba(255,255,255,.7) !important}
[data-theme="genz"] .wrapped-switcher{background:rgba(255,255,255,.16) !important;border:1px solid rgba(255,255,255,.3) !important}

/* icons: bright gradient → sun shown */
[data-theme="genz"] .theme-icon-sun{display:inline-block !important}
[data-theme="genz"] .theme-icon-moon{display:none !important}

/* ═══════════════════════════════════════════════════════════════
   WRAPPED SHOWCASE — year-dash gen-z boxes (new additions)
   Generic layer below is token-driven (works in every theme).
   The [data-theme="genz"] block at the very end hard-pins the
   EXACT year-dash gen-z look for the bright Gen-Z theme.
   ═══════════════════════════════════════════════════════════════ */
.wsc{margin-top:48px}
.wsc-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.wsc-head-title{font-family:var(--font-display,'Space Grotesk','Manrope',sans-serif);font-size:28px;font-weight:800;letter-spacing:-.03em;color:var(--text);margin:0}
.wsc-head-sub{font-size:13px;color:var(--text-soft);margin:0;opacity:.85}
.wsc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.wsc-box{position:relative;overflow:hidden;border-radius:32px;padding:30px;display:flex;flex-direction:column;justify-content:space-between;gap:22px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-card);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;min-height:320px}
.wsc-box:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow-soft)}
.wsc-hero{grid-column:span 2;min-height:380px;background:var(--hero-bg,var(--card));border:var(--hero-border-w,1px) solid var(--hero-border-c,var(--line));color:var(--hero-text,var(--text))}
.wsc-wide{grid-column:span 2}
.wsc-full{grid-column:span 4;min-height:200px;flex-direction:row;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.wsc-grad-1{background:linear-gradient(135deg,var(--green-soft),var(--teal-4));border:1px solid var(--line-strong);color:var(--text)}
.wsc-grad-2{background:linear-gradient(135deg,var(--blue-soft),var(--purple-soft));border:1px solid var(--line-strong);color:var(--text)}
.wsc-grad-3{background:linear-gradient(135deg,var(--purple-soft),var(--amber-soft));border:1px solid var(--line-strong);color:var(--text)}
.wsc-glass{background:var(--glass-bg,rgba(127,127,127,.08));border:1px solid var(--glass-border-c,var(--line));color:var(--text)}

/* ─── Activity feed + professional boxes (post-unification) ─── */
.wsc-activity{grid-column:span 2;justify-content:flex-start}
.wsc-prof{grid-column:span 2;justify-content:flex-start;min-height:260px}
.wsc-peak{grid-column:span 2}
.wsc-box-hint{font-size:12px;color:var(--text-soft);opacity:.75;font-family:var(--font-ui,'Inter',sans-serif)}
.wsc-feed{display:flex;flex-direction:column;gap:2px;flex:1}
.wsc-feed-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 8px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .18s,border-radius .18s}
.wsc-feed-item:hover{background:rgba(6,182,212,.07);border-radius:10px}
.wsc-feed-item:last-child{border-bottom:none}
.wsc-feed-name{font-family:var(--font-display,'Space Grotesk','Manrope',sans-serif);font-size:16px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsc-feed-date{font-size:12px;color:var(--text-soft);opacity:.8;margin-top:2px}
.wsc-feed-stats{display:flex;gap:18px;flex-shrink:0}
.wsc-feed-stat{text-align:center;min-width:50px}
.wsc-feed-stat b{display:block;font-family:var(--font-display,'Space Grotesk','Manrope',sans-serif);font-size:18px;font-weight:800;color:var(--text);line-height:1.15}
.wsc-feed-stat span{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-soft);opacity:.75}
.wsc-feed-empty{font-size:13px;color:var(--text-faint);padding:14px 0}
.wsc-prof-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px}

.wsc-hero-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:20px}
.wsc-blobs{position:absolute;inset:0;opacity:.3;pointer-events:none}
.wsc-blob{position:absolute;border-radius:50%;filter:blur(48px)}
.wsc-blob-a{top:40px;left:40px;width:128px;height:128px;background:rgba(255,255,255,.4)}
.wsc-blob-b{bottom:40px;right:40px;width:160px;height:160px;background:rgba(255,235,59,.4)}
.wsc-pill{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;background:var(--chip-bg,rgba(255,255,255,.2));border:1px solid var(--chip-border-c,rgba(255,255,255,.4));color:var(--chip-text,var(--text));font-size:15px;font-weight:800;align-self:flex-start}
.wsc-pill-emoji{font-size:22px}
.wsc-hero-title{font-family:var(--font-display,'Space Grotesk','Manrope',sans-serif);font-size:60px;font-weight:800;line-height:.9;letter-spacing:-.02em;color:inherit;margin:0}
.wsc-hero-dot{color:var(--cyan,#ffeb3b)}
.wsc-hero-card{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);padding:20px 24px;border-radius:24px;box-shadow:0 20px 40px rgba(0,0,0,.16)}
.wsc-hero-card p{margin:0;font-size:18px;line-height:1.5;font-weight:700;color:inherit;opacity:.95}
.wsc-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--text-soft);opacity:.75;margin-bottom:8px}
.wsc-big{font-family:var(--font-display,'Space Grotesk','Manrope',sans-serif);font-size:60px;font-weight:800;line-height:.9;letter-spacing:-.03em;color:var(--text)}
.wsc-big2{font-family:var(--font-display,'Space Grotesk','Manrope',sans-serif);font-size:48px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--text);margin-bottom:10px}
.wsc-big2 small{font-size:18px;font-weight:600;opacity:.5;margin-left:4px;font-family:var(--font-ui,'Inter',sans-serif)}
.wsc-mt{margin-top:8px}
.wsc-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:var(--teal-4,rgba(0,0,0,.15));color:var(--teal,#fff);font-size:13px;font-weight:800;border:1px solid var(--line)}
.wsc-badge-arrow{font-size:11px}
.wsc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.wsc-pill-grad{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:13px;font-weight:800;border:1px solid rgba(255,255,255,.5);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.wsc-dots{color:var(--text-faint);font-weight:800;letter-spacing:.1em}
.wsc-persona{text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px}
.wsc-orb{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:0 18px 40px rgba(0,0,0,.22);border:4px solid rgba(255,255,255,.5);animation:wsc-float 6s ease-in-out infinite}
.wsc-orb-svg{width:40px;height:40px}
.wsc-p-label{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);opacity:.8;margin-bottom:4px}
.wsc-p-name{font-family:var(--font-display,'Space Grotesk','Manrope',sans-serif);font-size:36px;font-weight:800;line-height:1.12;letter-spacing:-.01em;color:var(--text)}
.wsc-note{background:rgba(127,127,127,.1);border:1px solid var(--line);border-radius:16px;padding:14px 16px;font-size:13px;line-height:1.55;font-weight:600;color:var(--text-soft)}
.wsc-box-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.wsc-box-title{font-family:var(--font-display,'Space Grotesk','Manrope',sans-serif);font-size:22px;font-weight:800;color:var(--text);margin:0}
.wsc-box-hint{font-size:13px;font-weight:700;color:var(--text-faint);opacity:.8}
.wsc-bars{display:flex;flex-direction:column;gap:14px}
.wsc-bar-row{display:flex;align-items:center;gap:14px;padding:12px 14px;background:rgba(127,127,127,.08);border:1px solid var(--line);border-radius:18px}
.wsc-bar-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;flex-shrink:0;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.wsc-bar{flex:1;min-width:0}
.wsc-bar-top{display:flex;justify-content:space-between;margin-bottom:6px}
.wsc-bar-top b{font-weight:800;color:var(--text)}
.wsc-bar-top span{font-size:13px;font-weight:800;color:var(--text-soft)}
.wsc-bar-track{height:8px;background:var(--prog-bg,rgba(127,127,127,.2));border-radius:99px;overflow:hidden}
.wsc-bar-fill{height:100%;border-radius:99px;background:var(--prog-fill,linear-gradient(90deg,#667eea,#f093fb))}
.wsc-pill-soft{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.22);font-size:13px;font-weight:800;color:inherit}
.wsc-cat-name{font-family:var(--font-display,'Space Grotesk','Manrope',sans-serif);font-size:36px;font-weight:800;letter-spacing:-.02em;color:var(--text);margin-top:14px}
.wsc-swatches{display:flex;gap:10px;margin-top:6px}
.wsc-swatch{width:48px;height:48px;border-radius:16px;border:2px solid rgba(255,255,255,.5);box-shadow:0 10px 24px rgba(0,0,0,.16)}
.wsc-swatch-1{background:linear-gradient(135deg,#667eea,#764ba2)}
.wsc-swatch-2{background:linear-gradient(135deg,#f093fb,#f5576c)}
.wsc-swatch-3{background:linear-gradient(135deg,#ffd700,#ffeb3b)}
.wsc-peak{font-family:var(--font-display,'Space Grotesk','Manrope',sans-serif);font-size:28px;font-weight:800;letter-spacing:-.01em;color:var(--text);margin-top:6px}
.wsc-peak-sub{font-size:13px;font-weight:700;color:var(--text-soft);opacity:.85;margin-bottom:16px}
.wsc-heat{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:auto}
.wsc-heat-cell{aspect-ratio:1;border-radius:8px;background:rgba(127,127,127,.16);border:1px solid transparent;transition:all .2s}
.wsc-heat-cell.on{background:linear-gradient(135deg,#f093fb,#f5576c);box-shadow:0 4px 12px rgba(245,85,108,.35)}
.wsc-share-title{font-family:var(--font-display,'Space Grotesk','Manrope',sans-serif);font-size:28px;font-weight:800;color:var(--text);margin:0 0 6px;letter-spacing:-.01em}
.wsc-share-sub{font-size:15px;font-weight:600;color:var(--text-soft);margin:0}
.wsc-actions{display:flex;gap:12px;flex-wrap:wrap}
.wsc-btn{border:none;cursor:pointer;padding:13px 24px;border-radius:999px;font-size:15px;font-weight:800;transition:transform .2s,background .2s,box-shadow .2s;white-space:nowrap}
.wsc-btn:hover{transform:scale(1.05)}
.wsc-btn-glass{background:rgba(127,127,127,.16);color:var(--text);border:1px solid var(--line-strong)}
.wsc-btn-glass:hover{background:rgba(127,127,127,.26)}
.wsc-btn-white{background:var(--text);color:var(--bg);box-shadow:0 12px 28px rgba(0,0,0,.22)}
.wsc-btn-white:hover{background:var(--cyan,#ffeb3b);color:var(--bg)}
@keyframes wsc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}

/* Cap the showcase so boxes don't stretch absurdly wide on ultra-large screens
   (year-dash used a 1200px container; centering keeps the same rhythm). */
.wsc-grid{max-width:1200px;margin-left:auto;margin-right:auto}

@media(max-width:1200px){
  .wsc-grid{grid-template-columns:repeat(2,1fr)}
  .wsc-hero,.wsc-wide{grid-column:span 2}
  .wsc-full{grid-column:span 2}
  .wsc-hero-title{font-size:48px}
}
@media(max-width:760px){
  .wsc-grid{grid-template-columns:1fr}
  .wsc-hero,.wsc-wide,.wsc-full{grid-column:span 1}
  .wsc-box{min-height:0;padding:22px}
  .wsc-full{flex-direction:column;align-items:flex-start}
  .wsc-hero-title{font-size:48px}
  .wsc-big{font-size:48px}
  .wsc-big2{font-size:48px}
  .wsc-quality{flex-wrap:wrap}
  .wsc-quality .q{flex:1 1 44%;min-width:0}
  .wsc-top{flex-wrap:wrap}
}
@media(max-width:480px){
  .wsc-head{flex-direction:column;align-items:flex-start;gap:8px}
  .wsc-box{padding:18px;gap:16px;border-radius:24px}
  .wsc-hero-title{font-size:36px}
  .wsc-big{font-size:48px}
  .wsc-big2{font-size:36px}
  .wsc-peak{font-size:22px}
  .wsc-cat-name{font-size:28px}
  .wsc-share-title{font-size:22px}
  .wsc-heat{gap:4px}
  .wsc-swatch{width:42px;height:42px;border-radius:14px}
  .wsc-quality .q{flex:1 1 100%}
  .wsc-actions{width:100%}
  .wsc-btn{flex:1;text-align:center}
  .wsc-badge{font-size:11px}
  .wsc-pill{font-size:13px;padding:9px 14px}
  .wsc-pill-emoji{font-size:18px}
}

/* ── WRAPPED SHOWCASE — Gen-Z bright: EXACT year-dash replica ── */
[data-theme="genz-dark"] .wsc-box{background:rgba(255,255,255,.06) !important;border:1px solid rgba(196,181,253,.18) !important;border-radius:32px !important;box-shadow:none !important}
[data-theme="genz-dark"] .wsc-box:hover{transform:translateY(-3px) !important;border-color:#f0abfc !important;box-shadow:none !important}
[data-theme="genz"] .wsc-head-title{color:#fff !important;text-shadow:5px 5px 0 rgba(0,0,0,.2) !important}
[data-theme="genz"] .wsc-head-sub{color:rgba(255,255,255,.8) !important}
[data-theme="genz"] .wsc-box{background:rgba(255,255,255,.14) !important;border:2px solid rgba(255,255,255,.3) !important;border-radius:32px !important;box-shadow:none !important}
[data-theme="genz"] .wsc-box:hover{transform:translateY(-3px) !important;border-color:#ffeb3b !important;box-shadow:none !important}
[data-theme="genz"] .wsc-hero{background:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#f093fb 100%) !important;border:2px solid rgba(255,255,255,.3) !important;color:#fff !important}
[data-theme="genz"] .wsc-grad-1{background:linear-gradient(135deg,#fa709a 0%,#fee140 100%) !important;border:2px solid rgba(255,255,255,.5) !important;color:#000 !important}
[data-theme="genz"] .wsc-grad-2{background:linear-gradient(135deg,#a8edea 0%,#fed6e3 100%) !important;border:2px solid rgba(255,255,255,.5) !important;color:#000 !important}
[data-theme="genz"] .wsc-grad-3{background:linear-gradient(135deg,#f093fb 0%,#f5576c 50%,#ffd700 100%) !important;border:2px solid rgba(255,255,255,.5) !important;color:#000 !important}
[data-theme="genz"] .wsc-glass{background:rgba(255,255,255,.18) !important;border:2px solid rgba(255,255,255,.3) !important;color:#fff !important}
[data-theme="genz"] .wsc-hero .wsc-label,
[data-theme="genz"] .wsc-grad-1 .wsc-label,
[data-theme="genz"] .wsc-grad-2 .wsc-label,
[data-theme="genz"] .wsc-grad-3 .wsc-label{color:rgba(0,0,0,.65) !important}
[data-theme="genz"] .wsc-glass .wsc-label{color:rgba(255,255,255,.7) !important}
[data-theme="genz"] .wsc-grad-1 .wsc-big,
[data-theme="genz"] .wsc-grad-1 .wsc-big2,
[data-theme="genz"] .wsc-grad-2 .wsc-big,
[data-theme="genz"] .wsc-grad-2 .wsc-big2,
[data-theme="genz"] .wsc-grad-3 .wsc-big,
[data-theme="genz"] .wsc-grad-3 .wsc-big2,
[data-theme="genz"] .wsc-grad-3 .wsc-cat-name{color:#000 !important;text-shadow:3px 3px 0 rgba(255,255,255,.5) !important}
[data-theme="genz"] .wsc-hero .wsc-big,[data-theme="genz"] .wsc-hero .wsc-big2{color:#fff !important}
[data-theme="genz"] .wsc-hero .wsc-hero-title{color:#fff !important;text-shadow:5px 5px 0 rgba(0,0,0,.2) !important;font-family:var(--font-display) !important;font-weight:800 !important}
[data-theme="genz"] .wsc-hero-card{background:rgba(255,255,255,.2) !important;border:2px solid rgba(255,255,255,.3) !important;border-radius:24px !important;box-shadow:0 20px 40px rgba(0,0,0,.18) !important}
[data-theme="genz"] .wsc-hero-card p{color:#fff !important;font-weight:800 !important}
[data-theme="genz"] .wsc-pill{background:rgba(255,255,255,.2) !important;border:1px solid rgba(255,255,255,.4) !important;color:#fff !important;font-weight:800 !important;border-radius:999px !important;box-shadow:0 12px 24px rgba(0,0,0,.16) !important}
[data-theme="genz"] .wsc-pill-grad{background:linear-gradient(135deg,#667eea,#764ba2) !important;color:#fff !important;border:2px solid rgba(255,255,255,.5) !important;border-radius:999px !important;box-shadow:0 10px 24px rgba(0,0,0,.2) !important;font-weight:800 !important}
[data-theme="genz"] .wsc-orb{background:linear-gradient(135deg,#667eea,#764ba2) !important;border:4px solid rgba(255,255,255,.5) !important;box-shadow:0 20px 40px rgba(0,0,0,.22) !important}
[data-theme="genz"] .wsc-p-label{color:rgba(0,0,0,.6) !important;font-weight:800 !important}
[data-theme="genz"] .wsc-p-name{color:#000 !important;text-shadow:2px 2px 0 rgba(255,255,255,.5) !important;font-weight:800 !important}
[data-theme="genz"] .wsc-note{background:rgba(255,255,255,.3) !important;border:1px solid rgba(255,255,255,.5) !important;color:#000 !important;font-weight:700 !important;border-radius:16px !important}
[data-theme="genz"] .wsc-box-title{color:#fff !important;font-weight:800 !important}
[data-theme="genz"] .wsc-box-hint{color:rgba(255,255,255,.75) !important}

/* Modern-light: wsc glass boxes need a visible resting border (glass border is white-on-white) */
[data-theme="modern-light"] .wsc-box,[data-theme="modern-light"] .wsc-glass{border-color:#b5d2e4 !important}
[data-theme="modern-light"] .wsc-box:hover,[data-theme="modern-light"] .wsc-glass:hover{border-color:#7cc8e8 !important}
[data-theme="genz"] .wsc-bar-row{background:rgba(255,255,255,.1) !important;border:1px solid rgba(255,255,255,.3) !important;border-radius:16px !important;box-shadow:0 10px 24px rgba(0,0,0,.14) !important}
[data-theme="genz"] .wsc-bar-top b{color:#fff !important;font-weight:800 !important}
[data-theme="genz"] .wsc-bar-top span{color:#fff !important;font-weight:800 !important}
[data-theme="genz"] .wsc-bar-track{background:rgba(255,255,255,.2) !important;border-radius:99px !important}
[data-theme="genz"] .wsc-pill-soft{background:rgba(255,255,255,.3) !important;color:#000 !important;font-weight:800 !important;border-radius:999px !important}
[data-theme="genz"] .wsc-cat-name{color:#000 !important;text-shadow:3px 3px 0 rgba(255,255,255,.5) !important;font-weight:800 !important}
[data-theme="genz"] .wsc-swatch{border:2px solid rgba(255,255,255,.5) !important;box-shadow:0 10px 24px rgba(0,0,0,.16) !important}
[data-theme="genz"] .wsc-peak{color:#fff !important;font-weight:800 !important}
[data-theme="genz"] .wsc-peak-sub{color:rgba(255,255,255,.8) !important;font-weight:700 !important}
[data-theme="genz"] .wsc-heat-cell{background:rgba(255,255,255,.2) !important;border-radius:8px !important}
[data-theme="genz"] .wsc-heat-cell.on{background:linear-gradient(135deg,#f093fb,#f5576c) !important;box-shadow:0 4px 12px rgba(245,85,108,.4) !important}
[data-theme="genz"] .wsc-share-title{color:#fff !important;font-weight:800 !important}
[data-theme="genz"] .wsc-share-sub{color:rgba(255,255,255,.8) !important}
[data-theme="genz"] .wsc-btn-glass{background:rgba(255,255,255,.2) !important;color:#fff !important;border:2px solid rgba(255,255,255,.3) !important;border-radius:999px !important;font-weight:800 !important}
[data-theme="genz"] .wsc-btn-glass:hover{background:rgba(255,255,255,.3) !important}
[data-theme="genz"] .wsc-btn-white{background:#fff !important;color:#000 !important;border-radius:999px !important;font-weight:800 !important;box-shadow:0 12px 28px rgba(0,0,0,.2) !important}
[data-theme="genz"] .wsc-btn-white:hover{background:#ffeb3b !important;color:#000 !important}

/* ── WSC extras: totals toggle · quality chips · cat count · extra chips ── */
.wsc-toggle{display:inline-flex;align-items:center;gap:2px;background:rgba(127,127,127,.14);border:1px solid var(--line);border-radius:999px;padding:3px;margin-left:auto;flex-shrink:0}
.wsc-toggle button{border:none;background:transparent;color:var(--text-soft);font-size:13px;line-height:1;width:28px;height:26px;border-radius:999px;cursor:pointer;transition:all .18s;display:flex;align-items:center;justify-content:center}
.wsc-toggle button:hover{background:rgba(127,127,127,.16)}
.wsc-toggle button.active{background:#fff;color:#111;box-shadow:0 2px 8px rgba(0,0,0,.22);transform:scale(1.05)}
.wsc-quality{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.wsc-quality .q{flex:1;min-width:90px;background:rgba(127,127,127,.1);border:1px solid var(--line);border-radius:16px;padding:10px 14px}
.wsc-quality .q span{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--text-faint);margin-bottom:5px}
.wsc-quality .q b{font-family:var(--font-display,'Space Grotesk',sans-serif);font-size:22px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.wsc-cat-count{font-size:13px;font-weight:700;color:var(--text-faint);margin-top:6px}
.wsc-extra{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.wsc-extra .x{font-size:11px;font-weight:800;padding:6px 12px;border-radius:999px;background:rgba(127,127,127,.12);border:1px solid var(--line);color:var(--text-soft);white-space:nowrap}
[data-theme="genz"] .wsc-toggle{background:rgba(255,255,255,.2) !important;border:1px solid rgba(255,255,255,.4) !important}
[data-theme="genz"] .wsc-toggle button{color:#fff !important}
[data-theme="genz"] .wsc-toggle button:hover{background:rgba(255,255,255,.18) !important}
[data-theme="genz"] .wsc-toggle button.active{background:#ffeb3b !important;color:#7b2ff7 !important;box-shadow:0 2px 8px rgba(0,0,0,.2) !important}
[data-theme="genz"] .wsc-quality .q{background:rgba(255,255,255,.1) !important;border:1px solid rgba(255,255,255,.3) !important}
[data-theme="genz"] .wsc-quality .q span{color:rgba(255,255,255,.7) !important}
[data-theme="genz"] .wsc-quality .q b{color:#fff !important}
[data-theme="genz"] .wsc-cat-count{color:rgba(0,0,0,.6) !important}
[data-theme="genz"] .wsc-extra .x{background:rgba(255,255,255,.18) !important;border:1px solid rgba(255,255,255,.35) !important;color:#fff !important}

/* ═══════════ FLUID CTA TOKENS — expandable "Acquista minuti" card ═══════════
   Consumed by cta-fluid.css (.fluid-rays page rays + .fluid-mesh card blobs).
   This file loads AFTER cta-fluid.css, so these per-theme values win over the
   :root fallbacks. */
[data-theme="modern"]{
  --cta-card-bg:#0b0b0b; --cta-card-bg2:#10101a;
  --cta-blob-1:#2452f1; --cta-blob-2:#0b1d99; --cta-blob-3:#163db9; --cta-blob-4:#7c3aed; --cta-blob-5:#3b6bff; --cta-blob-6:#061c66;
  --cta-accent:#34d399;
  --cta-btn-bg:#34d399; --cta-btn-text:#022c22; --cta-btn-hover:#6ee7b7;
  --cta-ray-color:rgba(52,211,153,.06); --cta-ray-bloom:rgba(121,40,202,.2); --cta-ray-blend:screen;
}
[data-theme="modern-light"]{
  --cta-card-bg:#001f63; --cta-card-bg2:#04103a;
  --cta-blob-1:#2452f1; --cta-blob-2:#022474; --cta-blob-3:#163db9; --cta-blob-4:#0b1d99; --cta-blob-5:#3b6bff; --cta-blob-6:#061c66;
  --cta-accent:#0284c7;
  --cta-btn-bg:#ffffff; --cta-btn-text:#001f63; --cta-btn-hover:rgba(255,255,255,.88);
  --cta-ray-color:rgba(2,132,199,.12); --cta-ray-bloom:rgba(34,211,238,.22); --cta-ray-blend:normal;
}
[data-theme="genz"]{
  --cta-card-bg:#3b0764; --cta-card-bg2:#1e1b4b;
  --cta-blob-1:#7c3aed; --cta-blob-2:#db2777; --cta-blob-3:#a855f7; --cta-blob-4:#ec4899; --cta-blob-5:#8b5cf6; --cta-blob-6:#be185d;
  --cta-accent:#ffeb3b;
  --cta-btn-bg:#ffeb3b; --cta-btn-text:#3b0764; --cta-btn-hover:#fff;
  --cta-ray-color:rgba(255,235,59,.16); --cta-ray-bloom:rgba(255,46,159,.24); --cta-ray-blend:normal;
}
[data-theme="genz-dark"]{
  --cta-card-bg:#1e1b4b; --cta-card-bg2:#0f0a2e;
  --cta-blob-1:#7c3aed; --cta-blob-2:#db2777; --cta-blob-3:#a855f7; --cta-blob-4:#ec4899; --cta-blob-5:#8b5cf6; --cta-blob-6:#312e81;
  --cta-accent:#f0abfc;
  --cta-btn-bg:#f0abfc; --cta-btn-text:#3b0764; --cta-btn-hover:#fff;
  --cta-ray-color:rgba(196,181,253,.1); --cta-ray-bloom:rgba(236,72,153,.22); --cta-ray-blend:normal;
}

/* ═══ Topbar brand — legible on every theme ═══ */
.topbar-brand-name{color:inherit}
[data-theme="modern"] .topbar-brand-name{color:#e6f7f4}
[data-theme="modern-light"] .topbar-brand-name{color:#0b5394}
[data-theme="genz"] .topbar-brand-name{color:#fff !important}
[data-theme="genz-dark"] .topbar-brand-name{color:#f6d6ff}
.topbar-brand-pro{color:var(--accent-purple,#7c3aed)}
[data-theme="modern"] .topbar-brand-pro{color:#34d399}
[data-theme="modern-light"] .topbar-brand-pro{color:#0891b2}
[data-theme="genz"] .topbar-brand-pro{color:#ffeb3b !important}
[data-theme="genz-dark"] .topbar-brand-pro{color:#f0abfc}