/* ── Визуальные темы Либреттино ───────────────────────────── */

/* ─── 2. Partitura Nera — «Чёрная партитура» ─── */
html[data-theme-visual="partitura-nera"] {
  --bg: #000000;
  --bg2: #0a0a0a;
  --panel: #111111;
  --gold: #cc241d;
  --gold-dim: #881111;
  --accent: #cc241d;
  --accent2: #cc241d;
  --accent3: #881111;
  --accent-glow: rgba(204, 36, 29, 0.2);
  --text: #e0e0e0;
  --muted: #666666;
  --shadow: none;
  --topbar-bg: rgba(0, 0, 0, .96);
  --radius: 0;
  --op-accent: var(--gold);
  color-scheme: dark;
}
html[data-theme-visual="partitura-nera"] body { background: #000; }
html[data-theme-visual="partitura-nera"] .topbar { border-bottom: 1px solid #1a1a1a; }
html[data-theme-visual="partitura-nera"] .sidebar { border-right: 1px solid #1a1a1a; }
html[data-theme-visual="partitura-nera"] .op-card { border: 1px solid #1a1a1a; box-shadow: none; }
html[data-theme-visual="partitura-nera"] .op-card:hover { border-color: #cc241d; transform: none; box-shadow: none; }
html[data-theme-visual="partitura-nera"] .op-card::before { height: 1px; background: #cc241d; }
html[data-theme-visual="partitura-nera"] .op-card h3 { color: #cc241d; }
html[data-theme-visual="partitura-nera"] .brand-mark { color: #cc241d; }
html[data-theme-visual="partitura-nera"] .brand { color: #cc241d; }
html[data-theme-visual="partitura-nera"] .icon-btn { border-radius: 0; border-color: #1a1a1a; }
html[data-theme-visual="partitura-nera"] .icon-btn:hover { border-color: #cc241d; color: #cc241d; }
html[data-theme-visual="partitura-nera"] .cast-toggle { border-radius: 0; }
html[data-theme-visual="partitura-nera"] .act-tab { border-radius: 0; }
html[data-theme-visual="partitura-nera"] .line { border-bottom: 1px solid #111; }
html[data-theme-visual="partitura-nera"] .line .who { border-radius: 0; }
html[data-theme-visual="partitura-nera"] .learn-btn { border-radius: 0; }
html[data-theme-visual="partitura-nera"] .seg { border-radius: 0; }
html[data-theme-visual="partitura-nera"] .seg-btn { border-radius: 0; }
html[data-theme-visual="partitura-nera"] .seg-btn.active { background: #cc241d; color: #fff; }


/* ─── 3. Velluto & Oro — «Бархат и золото» (default) ─── */
html[data-theme-visual="velluto-oro"] {
  --bg: #0a0e1a;
  --bg2: #0f1425;
  --panel: #141a30;
  --gold: #c9a84c;
  --gold-dim: #8b7540;
  --accent: #c9a84c;
  --accent2: #c9a84c;
  --accent3: #8b7540;
  --accent-glow: rgba(201, 168, 76, 0.2);
  --text: #e8e4f0;
  --muted: #7a7590;
  --shadow: 0 4px 24px rgba(0, 0, 0, .5);
  --topbar-bg: rgba(10, 14, 26, .94);
  --radius: 14px;
  --font-serif: "Cormorant Garamond", "Georgia", serif;
  color-scheme: dark;
}
html[data-theme-visual="velluto-oro"] body {
  background: radial-gradient(1000px 500px at 80% -10%, rgba(201, 168, 76, .05), transparent 55%),
              radial-gradient(800px 400px at 10% 110%, rgba(201, 168, 76, .03), transparent 50%), var(--bg);
}
html[data-theme-visual="velluto-oro"] .op-card::before { background: linear-gradient(90deg, var(--op-accent), #c9a84c); opacity: .9; }
html[data-theme-visual="velluto-oro"] .hero h1 { color: #c9a84c; }
html[data-theme-visual="velluto-oro"] .brand { color: #c9a84c; }
html[data-theme-visual="velluto-oro"] .brand-mark { color: #c9a84c; }
html[data-theme-visual="velluto-oro"] .scene-title { color: #c9a84c; }


/* ─── 4. Bel Canto — «Воздушный» ─── */
html[data-theme-visual="bel-canto"] {
  --bg: #fafafa;
  --bg2: #f0f0f0;
  --panel: #ffffff;
  --gold: #4a90d9;
  --gold-dim: #8ab4e0;
  --accent: #4a90d9;
  --accent2: #4a90d9;
  --accent3: #8ab4e0;
  --accent-glow: rgba(74, 144, 217, 0.2);
  --text: #1a1a1a;
  --muted: #888888;
  --shadow: 0 2px 12px rgba(0, 0, 0, .06);
  --topbar-bg: rgba(250, 250, 250, .96);
  --radius: 20px;
  --font-serif: "Cormorant Garamond", "Georgia", serif;
  color-scheme: light;
}
html[data-theme-visual="bel-canto"] body { background: #fafafa; }
html[data-theme-visual="bel-canto"] .topbar { border-bottom: 1px solid #e8e8e8; }
html[data-theme-visual="bel-canto"] .sidebar { border-right: 1px solid #e8e8e8; background: #fafafa; }
html[data-theme-visual="bel-canto"] .op-card { border: 1px solid #e8e8e8; box-shadow: 0 2px 8px rgba(0, 0, 0, .04); background: #fff; }
html[data-theme-visual="bel-canto"] .op-card:hover { border-color: #4a90d9; box-shadow: 0 4px 16px rgba(74, 144, 217, .1); }
html[data-theme-visual="bel-canto"] .op-card::before { height: 2px; }
html[data-theme-visual="bel-canto"] .op-card h3 { color: #4a90d9; }
html[data-theme-visual="bel-canto"] .brand { color: #4a90d9; }
html[data-theme-visual="bel-canto"] .brand-mark { color: #4a90d9; }
html[data-theme-visual="bel-canto"] .hero h1 { color: #4a90d9; }
html[data-theme-visual="bel-canto"] .icon-btn { background: #fff; border-color: #e0e0e0; }
html[data-theme-visual="bel-canto"] .cast-toggle, html[data-theme-visual="bel-canto"] .back-btn { background: #fff; }
html[data-theme-visual="bel-canto"] .act-tab { background: #fff; }
html[data-theme-visual="bel-canto"] .scene-title { color: #4a90d9; }


/* ─── 5. Palcoscenico — «Сцена» ─── */
html[data-theme-visual="palcoscenico"] {
  --bg: #120c14;
  --bg2: #1a121c;
  --panel: #221824;
  --gold: #d4a06a;
  --gold-dim: #9a7250;
  --accent: #d4a06a;
  --accent2: #d4a06a;
  --accent3: #9a7250;
  --accent-glow: rgba(212, 160, 106, 0.2);
  --text: #ede4f2;
  --muted: #988fa8;
  --shadow: 0 8px 32px rgba(0, 0, 0, .6);
  --topbar-bg: rgba(18, 12, 20, .96);
  --radius: 8px;
  --font-serif: "Cormorant Garamond", "Georgia", serif;
  color-scheme: dark;
}
html[data-theme-visual="palcoscenico"] .op-card {
  border: 1px solid rgba(212, 160, 106, .18);
  transform: perspective(400px) rotateX(1deg);
  transition: transform .3s ease, border-color .3s ease;
}
html[data-theme-visual="palcoscenico"] .op-card:hover { transform: perspective(400px) rotateX(0deg) translateY(-4px); border-color: #d4a06a; }
html[data-theme-visual="palcoscenico"] .op-card::before { height: 3px; background: linear-gradient(90deg, #d4a06a, #e0b880, #d4a06a); }
html[data-theme-visual="palcoscenico"] .topbar { border-bottom: 1px solid rgba(212, 160, 106, .12); }
html[data-theme-visual="palcoscenico"] #progress-bar { height: 4px; background: linear-gradient(90deg, #d4a06a, #e0b880); }
html[data-theme-visual="palcoscenico"] .scene-title { font-style: italic; }


/* ─── 7. Neon Teatro — «Современная постановка» ─── */
html[data-theme-visual="neon-teatro"] {
  --bg: #0a0a10;
  --bg2: #0f0f18;
  --panel: #141428;
  --gold: #ff2d95;
  --gold-dim: #cc1a70;
  --accent: #ff2d95;
  --accent2: #00d4ff;
  --accent3: #cc1a70;
  --accent-glow: rgba(255, 45, 149, 0.2);
  --text: #e8e8ff;
  --muted: #6b6b99;
  --shadow: 0 0 20px rgba(255, 45, 149, .15);
  --topbar-bg: rgba(10, 10, 16, .96);
  --radius: 8px;
  --op-accent: #00d4ff;
  --font-ui: "Inter", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
html[data-theme-visual="neon-teatro"] body {
  background: radial-gradient(600px 400px at 30% 20%, rgba(255, 45, 149, .04), transparent 60%),
              radial-gradient(500px 350px at 70% 80%, rgba(0, 212, 255, .04), transparent 60%), var(--bg);
}
html[data-theme-visual="neon-teatro"] .topbar { border-bottom: 1px solid rgba(255, 45, 149, .15); }
html[data-theme-visual="neon-teatro"] .sidebar { border-right: 1px solid rgba(0, 212, 255, .1); }
html[data-theme-visual="neon-teatro"] .op-card { border: 1px solid rgba(0, 212, 255, .15); }
html[data-theme-visual="neon-teatro"] .op-card:hover { border-color: #ff2d95; box-shadow: 0 0 24px rgba(255, 45, 149, .2); }
html[data-theme-visual="neon-teatro"] .op-card::before { background: linear-gradient(90deg, #ff2d95, #00d4ff); }
html[data-theme-visual="neon-teatro"] .brand { color: #ff2d95; font-family: "Inter", sans-serif; letter-spacing: .15em; text-transform: uppercase; }
html[data-theme-visual="neon-teatro"] .brand-mark { color: #ff2d95; }
html[data-theme-visual="neon-teatro"] .hero h1 { color: #ff2d95; font-family: "Inter", sans-serif; font-weight: 900; letter-spacing: -.02em; }
html[data-theme-visual="neon-teatro"] .icon-btn { border-color: rgba(0, 212, 255, .2); }
html[data-theme-visual="neon-teatro"] .icon-btn:hover { border-color: #ff2d95; color: #ff2d95; box-shadow: 0 0 12px rgba(255, 45, 149, .3); }
html[data-theme-visual="neon-teatro"] .seg-btn.active { background: #ff2d95; color: #fff; }
html[data-theme-visual="neon-teatro"] .scene-title { color: #00d4ff; }


/* ─── 8. Teatro Mobile — «Мобильный театр» ─── */
html[data-theme-visual="teatro-mobile"] {
  --bg: #13111a;
  --bg2: #1a1724;
  --panel: #221e30;
  --gold: #ff6b6b;
  --gold-dim: #cc5555;
  --accent: #ff6b6b;
  --accent2: #ff6b6b;
  --accent3: #cc5555;
  --accent-glow: rgba(255, 107, 107, 0.2);
  --text: #f0edf5;
  --muted: #8c88a0;
  --shadow: 0 -2px 20px rgba(0, 0, 0, .4);
  --topbar-bg: rgba(19, 17, 26, .98);
  --radius: 18px;
  --font-ui: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", "Georgia", serif;
  color-scheme: dark;
}
html[data-theme-visual="teatro-mobile"] .topbar {
  border-radius: 0 0 20px 20px;
  margin: 0 6px;
  top: 4px;
  border: 1px solid rgba(255, 107, 107, .1);
}
html[data-theme-visual="teatro-mobile"] .op-card { border-radius: 22px; }
html[data-theme-visual="teatro-mobile"] .op-card .op-cover { border-radius: 22px 22px 0 0; }
html[data-theme-visual="teatro-mobile"] .op-card:hover { transform: scale(1.01); }
html[data-theme-visual="teatro-mobile"] .op-card::before { height: 0; }
html[data-theme-visual="teatro-mobile"] .brand { color: #ff6b6b; }
html[data-theme-visual="teatro-mobile"] .brand-mark { color: #ff6b6b; }
html[data-theme-visual="teatro-mobile"] .hero h1 { color: #ff6b6b; }
html[data-theme-visual="teatro-mobile"] .icon-btn { border-radius: 14px; border: none; background: var(--panel); }
html[data-theme-visual="teatro-mobile"] .cast-toggle, html[data-theme-visual="teatro-mobile"] .back-btn, html[data-theme-visual="teatro-mobile"] .act-tab { border-radius: 14px; }
html[data-theme-visual="teatro-mobile"] .learn-btn { border-radius: 14px; }
html[data-theme-visual="teatro-mobile"] .seg { border-radius: 14px; padding: 4px; }
html[data-theme-visual="teatro-mobile"] .seg-btn { border-radius: 12px; }


/* ─── 9. Opera Viva — «Живое» ─── */
html[data-theme-visual="opera-viva"] {
  --bg: #080610;
  --bg2: #0f0a1a;
  --panel: #160d24;
  --gold: #7cff6b;
  --gold-dim: #4acc3a;
  --accent: #7cff6b;
  --accent2: #7cff6b;
  --accent3: #4acc3a;
  --accent-glow: rgba(124, 255, 107, 0.2);
  --text: #e8f0e8;
  --muted: #7a8a7a;
  --shadow: 0 0 30px rgba(124, 255, 107, .08);
  --topbar-bg: rgba(8, 6, 16, .96);
  --radius: 16px;
  --op-accent: #7cff6b;
  color-scheme: dark;
}
html[data-theme-visual="opera-viva"] body {
  background: radial-gradient(700px 500px at 50% 30%, rgba(124, 255, 107, .03), transparent 60%),
              radial-gradient(600px 400px at 30% 90%, rgba(124, 255, 107, .02), transparent 55%), var(--bg);
}
html[data-theme-visual="opera-viva"] .topbar { border-bottom: 1px solid rgba(124, 255, 107, .1); }
html[data-theme-visual="opera-viva"] .sidebar { border-right: 1px solid rgba(124, 255, 107, .08); }
html[data-theme-visual="opera-viva"] .brand { color: #7cff6b; }
html[data-theme-visual="opera-viva"] .brand-mark { color: #7cff6b; }
html[data-theme-visual="opera-viva"] .hero h1 { color: #7cff6b; }
html[data-theme-visual="opera-viva"] .op-card { border: 1px solid rgba(124, 255, 107, .12); }
html[data-theme-visual="opera-viva"] .op-card:hover { border-color: #7cff6b; box-shadow: 0 0 24px rgba(124, 255, 107, .1); }
html[data-theme-visual="opera-viva"] .op-card::before { background: #7cff6b; }
html[data-theme-visual="opera-viva"] .icon-btn:hover { border-color: #7cff6b; color: #7cff6b; box-shadow: 0 0 10px rgba(124, 255, 107, .15); }
html[data-theme-visual="opera-viva"] .seg-btn.active { background: #7cff6b; color: #080610; font-weight: 700; }
html[data-theme-visual="opera-viva"] .scene-title { color: #7cff6b; }
html[data-theme-visual="opera-viva"] .know-btn.known { background: #7cff6b; color: #080610; }
html[data-theme-visual="opera-viva"] #progress-bar { background: #7cff6b; height: 3px; box-shadow: 0 0 8px rgba(124, 255, 107, .4); }