/* M2 Music brand theme */
:root {
  --m2-red: #E62E2D;
  --m2-red-bright: #FF3B30;
  --m2-red-deep: #B71C1C;
  --purple: var(--m2-red);
  --pink: #FF4757;
  --purple-deep: var(--m2-red-deep);
  --pink-deep: #C62828;
  --m2-black: #000000;
  --m2-ink: #0A0A0A;
  --m2-surface: #121212;
  --m2-surface-2: #1A1A1A;
  --m2-line: #262626;
  --m2-line-2: #333333;
  --m2-muted: #9CA3AF;
  --m2-text: #FFFFFF;
  --m2-grad: linear-gradient(135deg, #E62E2D 0%, #8B0000 100%);
  --m2-grad-v: linear-gradient(180deg, #E62E2D 0%, #4A0000 100%);
}

/* ── Admin / Undertone token names ── */
:root,
:root[data-theme="dark"],
html[data-theme="dark"] {
  --bg: var(--m2-black);
  --bg2: var(--m2-ink);
  --bg3: var(--m2-surface-2);
  --surface: rgba(255, 255, 255, 0.04);
  --surface2: rgba(255, 255, 255, 0.07);
  --border: rgba(230, 46, 45, 0.22);
  --border2: rgba(255, 255, 255, 0.08);
  --glow: 0 0 40px rgba(230, 46, 45, 0.35);
  --glow-sm: 0 0 20px rgba(230, 46, 45, 0.25);
  --card: var(--m2-ink);
  --card2: var(--m2-surface-2);
  --border: var(--m2-line);
  --border2: var(--m2-line-2);
  --purple: var(--m2-red);
  --purple2: var(--m2-red-bright);
  --purple-soft: #FF6B6B;
  --accent-ink: #FFFFFF;
  --pink: #FF4757;
  --green: #22C55E;
  --yellow: var(--m2-red);
  --blue: #60A5FA;
  --red: #FF4757;
  --orange: var(--m2-red);
  --grad: var(--m2-grad);
  --grad-v: var(--m2-grad-v);
  --text: var(--m2-text);
  --text2: #D4D4D4;
  --text3: var(--m2-muted);
  --shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.85);
}

html[data-theme="light"] {
  --bg: #F5F5F5;
  --bg2: #FFFFFF;
  --bg3: #EBEBEB;
  --card: #FFFFFF;
  --card2: #F0F0F0;
  --border: #E0E0E0;
  --border2: #CCCCCC;
  --text: #0A0A0A;
  --text2: #404040;
  --text3: #737373;
  --purple: var(--m2-red);
  --purple2: var(--m2-red-deep);
  --purple-soft: #C62828;
  --accent-ink: #FFFFFF;
  --pink: var(--m2-red);
  --yellow: var(--m2-red);
  --orange: var(--m2-red);
  --red: #C62828;
  --grad: linear-gradient(135deg, #E62E2D, #C62828);
  --shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.2);
}

/* ── Web streaming app (web-app-layout) ── */
:root {
  --accent: var(--m2-red);
  --accent-ink: #FFFFFF;
  --rose: var(--m2-red);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--m2-black);
    --surface: var(--m2-ink);
    --surface-2: var(--m2-surface-2);
    --line: var(--m2-line);
    --text: var(--m2-text);
    --muted: var(--m2-muted);
    --accent: var(--m2-red);
    --rose: var(--m2-red);
  }
}

:root[data-theme="dark"] {
  --bg: var(--m2-black);
  --surface: var(--m2-ink);
  --surface-2: var(--m2-surface-2);
  --line: var(--m2-line);
  --text: var(--m2-text);
  --muted: var(--m2-muted);
  --accent: var(--m2-red);
  --rose: var(--m2-red);
}

html[data-theme="light"],
:root[data-theme="light"] {
  --bg: #F5F5F5;
  --surface: #FFFFFF;
  --surface-2: #EBEBEB;
  --line: #E0E0E0;
  --text: #0A0A0A;
  --muted: #737373;
  --accent: var(--m2-red);
  --accent-ink: #FFFFFF;
  --rose: var(--m2-red);
  --shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.12);
}

/* ── Auth screens (user + admin login) ── */
:root,
:root[data-theme="dark"],
html[data-theme="dark"] {
  --login-bg: var(--m2-black);
  --login-card: var(--m2-surface);
  --login-border: var(--m2-line);
  --login-text: var(--m2-text);
  --login-text2: #D4D4D4;
  --login-text3: var(--m2-muted);
  --login-input-bg: var(--m2-ink);
  --login-glow-1: rgba(230, 46, 45, 0.18);
  --login-glow-2: rgba(230, 46, 45, 0.12);
  --login-glow-3: rgba(230, 46, 45, 0.08);
}

html[data-theme="light"] {
  --login-bg: #F5F5F5;
  --login-card: #FFFFFF;
  --login-border: #E0E0E0;
  --login-glow-1: rgba(230, 46, 45, 0.1);
  --login-glow-2: rgba(230, 46, 45, 0.08);
  --login-glow-3: rgba(230, 46, 45, 0.05);
}

/* ── Fan / artist undertone app shell ── */
body.ut-fan {
  --bg: var(--m2-black);
  --bg2: var(--m2-ink);
  --bg3: var(--m2-surface-2);
  --card: var(--m2-ink);
  --card2: var(--m2-surface-2);
  --border: var(--m2-line);
  --border2: var(--m2-line-2);
  --purple: var(--m2-red);
  --pink: #FF4757;
  --yellow: var(--m2-red);
  --accent-ink: #FFFFFF;
  --grad: var(--m2-grad);
  --text: var(--m2-text);
  --text2: #D4D4D4;
  --text3: var(--m2-muted);
}

html[data-theme="light"] body.ut-fan {
  --purple: var(--m2-red);
  --pink: var(--m2-red);
  --yellow: var(--m2-red);
}

html[data-theme="dark"] body.ut-fan .sidebar,
html[data-theme="dark"] .app .sidebar,
:root[data-theme="dark"] body.ut-fan .sidebar,
:root[data-theme="dark"] .app .sidebar {
  --sb-bg: var(--m2-black);
  --sb-bg2: var(--m2-ink);
  --sb-text: var(--m2-text);
  --sb-mute: rgba(255, 255, 255, 0.72);
  --sb-dim: rgba(255, 255, 255, 0.45);
  --sb-hover: rgba(255, 255, 255, 0.08);
  --sb-line: rgba(255, 255, 255, 0.1);
  --sb-gold: var(--m2-red);
  --sb-ink: #FFFFFF;
  background: linear-gradient(180deg, var(--m2-black) 0%, var(--m2-ink) 100%) !important;
}

html[data-theme="light"] .app .sidebar,
html[data-theme="light"] body.ut-fan .sidebar,
:root[data-theme="light"] .app .sidebar,
:root[data-theme="light"] body.ut-fan .sidebar {
  --sb-text: #0A0A0A;
  --sb-mute: rgba(10, 10, 10, 0.62);
  --sb-dim: rgba(10, 10, 10, 0.48);
  --sb-hover: rgba(0, 0, 0, 0.06);
  --sb-line: rgba(0, 0, 0, 0.1);
  --sb-gold: var(--m2-red);
  --sb-ink: #FFFFFF;
  background: var(--surface) !important;
  color: var(--sb-text) !important;
}

/* ── Auth hero panels (flat black — no gradient wash) ── */
.auth-hero,
.auth-hero.admin-hero {
  background: var(--m2-black) !important;
  color: var(--m2-text) !important;
}

.auth-hero::after,
.auth-hero::before {
  display: none !important;
  content: none !important;
}

.auth-hero .kicker,
.auth-hero .brand {
  color: var(--m2-text) !important;
}

.auth-hero .perks li {
  background: var(--m2-surface-2) !important;
  border: 1px solid var(--m2-line) !important;
}

.brand,
.auth-hero-lead,
.auth-hero h1 {
  color: var(--m2-text) !important;
}

html[data-theme="dark"] .brand-mark svg path[stroke="#2A1800"],
:root[data-theme="dark"] .brand-mark svg path[stroke="#2A1800"] {
  stroke: #fff !important;
}

html[data-theme="light"] .brand-mark svg path[stroke="#2A1800"],
:root[data-theme="light"] .brand-mark svg path[stroke="#2A1800"] {
  stroke: #fff !important;
}

/* ── Public streaming home hero (vinyl block) ── */
html[data-theme="dark"] #hero.hero,
html[data-theme="dark"] section.hero,
:root[data-theme="dark"] #hero.hero,
:root[data-theme="dark"] section.hero {
  background: var(--m2-black) !important;
  color: var(--m2-text) !important;
  border-color: var(--m2-line) !important;
}

html[data-theme="dark"] section.hero::after,
:root[data-theme="dark"] section.hero::after {
  background: radial-gradient(80% 70% at 100% 0%, rgba(230, 46, 45, 0.14), transparent 55%) !important;
}

html[data-theme="light"] #hero.hero,
html[data-theme="light"] section.hero,
:root[data-theme="light"] #hero.hero,
:root[data-theme="light"] section.hero {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
  --hero-bg: var(--surface);
}

html[data-theme="light"] section.hero::after,
:root[data-theme="light"] section.hero::after {
  background: radial-gradient(80% 70% at 100% 0%, rgba(230, 46, 45, 0.08), transparent 55%) !important;
}

html[data-theme="light"] section.hero .btn-ghost,
:root[data-theme="light"] section.hero .btn-ghost {
  color: var(--text) !important;
  border-color: var(--line) !important;
}

html[data-theme="light"] section.hero .btn-ghost:hover,
:root[data-theme="light"] section.hero .btn-ghost:hover {
  background: var(--surface-2) !important;
  border-color: var(--text) !important;
}

html[data-theme="light"] .radio-hero,
:root[data-theme="light"] .radio-hero {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

.app .nav a[aria-current="page"] {
  background: var(--m2-red) !important;
  color: #fff !important;
}

.app .np-cover {
  box-shadow: var(--shadow), 0 0 0 1px rgba(230, 46, 45, 0.28) !important;
}

/* ── Public home hero (Audixo block) ── */
.hx {
  background: radial-gradient(120% 90% at 50% 0%, #2A0000 0%, var(--m2-black) 45%, #000 100%) !important;
}

.hx-shade {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    transparent 22%,
    transparent 48%,
    rgba(230, 46, 45, 0.35) 82%,
    rgba(0, 0, 0, 0.92) 100%
  ) !important;
}

.hx-play {
  background: var(--m2-red) !important;
  box-shadow: 0 14px 40px rgba(230, 46, 45, 0.45), 0 0 0 10px rgba(255, 255, 255, 0.08) !important;
}

.hx-play:hover {
  background: var(--m2-red-bright) !important;
}

.hx-card-eye,
.hx-card.playing .hx-card-t {
  color: var(--m2-red) !important;
}

.hx-find-row input:focus {
  border-color: var(--m2-red) !important;
}

.hx-find-row button:hover {
  background: var(--m2-red) !important;
}

/* ── Fan/admin heroes — dark only (light uses card surface) ── */
html[data-theme="dark"] .sd-hero,
html[data-theme="dark"] .pf-hero,
html[data-theme="dark"] .po-summary,
html[data-theme="dark"] .admin-content .db-hero,
html[data-theme="dark"] .fd-hero,
html[data-theme="dark"] .br-hero,
html[data-theme="dark"] body.ut-fan .page-content [class$="-hero"],
:root[data-theme="dark"] .br-hero,
:root[data-theme="dark"] body.ut-fan .page-content [class$="-hero"] {
  background: var(--m2-black) !important;
  color: var(--m2-text) !important;
}

html[data-theme="light"] .br-hero,
html[data-theme="light"] body.ut-fan .page-content [class$="-hero"],
:root[data-theme="light"] .br-hero,
:root[data-theme="light"] body.ut-fan .page-content [class$="-hero"] {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.fd-hero::after {
  background: radial-gradient(80% 70% at 100% 0%, rgba(230, 46, 45, 0.16), transparent 55%) !important;
}

.fd-q-liked .fd-q-art {
  background: var(--m2-red) !important;
}

.fd-q-radio .fd-q-art {
  background: linear-gradient(135deg, #1a1a1a, #000) !important;
  box-shadow: inset 0 0 0 1px rgba(230, 46, 45, 0.45) !important;
}

.fd-q-radio .fd-q-art svg {
  stroke: var(--m2-red) !important;
}

.fd-q-art.round {
  background: var(--m2-red) !important;
}

.sd-hero h1,
.sd-hero p b,
.pf-hero h1 {
  color: var(--m2-text) !important;
}

/* ── Public streaming shell (.app) — theme-aware ── */
html[data-theme="dark"] body,
:root[data-theme="dark"] body {
  background: var(--m2-black) !important;
}

html[data-theme="light"] body:has(.app),
:root[data-theme="light"] body:has(.app) {
  background: var(--bg) !important;
}

html[data-theme="dark"] .app,
:root[data-theme="dark"] .app {
  background: var(--m2-black);
}

html[data-theme="dark"] .app .panel,
html[data-theme="dark"] .app .main-inner,
:root[data-theme="dark"] .app .panel,
:root[data-theme="dark"] .app .main-inner {
  background: var(--m2-ink) !important;
}

html[data-theme="dark"] .app .sidebar,
:root[data-theme="dark"] .app .sidebar {
  background: var(--m2-black) !important;
}

html[data-theme="dark"] .app .aside,
html[data-theme="dark"] .app .player,
:root[data-theme="dark"] .app .aside,
:root[data-theme="dark"] .app .player {
  background: var(--m2-ink) !important;
  border-top-color: var(--m2-line);
}

html[data-theme="dark"] .app .topbar,
:root[data-theme="dark"] .app .topbar {
  background: color-mix(in srgb, var(--m2-ink) 88%, transparent) !important;
}

html[data-theme="light"] .app .panel,
html[data-theme="light"] .app .main-inner,
html[data-theme="light"] .app .sidebar,
html[data-theme="light"] .app .aside,
html[data-theme="light"] .app .player,
:root[data-theme="light"] .app .panel,
:root[data-theme="light"] .app .main-inner,
:root[data-theme="light"] .app .sidebar,
:root[data-theme="light"] .app .aside,
:root[data-theme="light"] .app .player {
  background: var(--surface) !important;
}

html[data-theme="light"] .app .player,
:root[data-theme="light"] .app .player {
  border-top: 1px solid var(--line);
}

html[data-theme="light"] .app .topbar,
:root[data-theme="light"] .app .topbar {
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
}

html[data-theme="light"] .app .play-main,
:root[data-theme="light"] .app .play-main {
  background: var(--accent, #E62E2D);
  color: var(--accent-ink, #fff);
  box-shadow: 0 8px 22px -12px rgba(230, 46, 45, 0.45);
}