/* M2 Music brand theme */
:root {
  --m2-red: #E62E2D;
  --m2-red-bright: #FF3B30;
  --m2-red-deep: #B71C1C;
  --purple: #E62E2D;
  --pink: #FF3B30;
  --purple-deep: #C81E1E;
  --pink-deep: #C81E1E;
  --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: #0A0A0A;
  --bg2: #141414;
  --bg3: #1E1E1E;
  --surface: rgba(255,255,255, 0.04);
  --surface2: rgba(255,255,255, 0.07);
  --border: #2B2B2B;
  --border2: #3A3A3A;
  --glow: 0 0 40px rgba(230,46,45, 0.35);
  --glow-sm: 0 0 20px rgba(230,46,45, 0.25);
  --card: #141414;
  --card2: #1E1E1E;
  --border: #2B2B2B;
  --border2: #3A3A3A;
  --purple: #E62E2D;
  --purple2: #C81E1E;
  --purple-soft: #FF3B30;
  --accent-ink: #FFFFFF;
  --pink: #FF3B30;
  --green: #22C55E;
  --yellow: var(--m2-red);
  --blue: #60A5FA;
  --red: #FF5A5F;
  --orange: var(--m2-red);
  --grad: var(--m2-grad);
  --grad-v: var(--m2-grad-v);
  --text: #F5F5F5;
  --text2: #D4D4D4;
  --text3: #A3A3A3;
  --shadow: 0 24px 50px -28px rgba(0,0,0, 0.85);
}

html[data-theme="light"] {
  --bg: #F4F4F4;
  --bg2: #FFFFFF;
  --bg3: #EFEFEF;
  --card: #FFFFFF;
  --card2: #EFEFEF;
  --border: #DCDCDC;
  --border2: #CCCCCC;
  --text: #111111;
  --text2: #404040;
  --text3: #5F5F5F;
  --purple: #E62E2D;
  --purple2: #C81E1E;
  --purple-soft: #C81E1E;
  --accent-ink: #FFFFFF;
  --pink: #C81E1E;
  --yellow: var(--m2-red);
  --orange: var(--m2-red);
  --red: #C2181B;
  --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: #E62E2D;
  --accent-ink: #FFFFFF;
  --rose: #FF3B30;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0A0A;
    --surface: var(--m2-ink);
    --surface-2: #1E1E1E;
    --line: #2B2B2B;
    --text: #F5F5F5;
    --muted: #A3A3A3;
    --accent: #E62E2D;
    --rose: #FF3B30;
  }
}

:root[data-theme="dark"] {
  --bg: #0A0A0A;
  --surface: var(--m2-ink);
  --surface-2: #1E1E1E;
  --line: #2B2B2B;
  --text: #F5F5F5;
  --muted: #A3A3A3;
  --accent: #E62E2D;
  --rose: #FF3B30;
}

html[data-theme="light"],
:root[data-theme="light"] {
  --bg: #F4F4F4;
  --surface: #FFFFFF;
  --surface-2: #EFEFEF;
  --line: #DCDCDC;
  --text: #111111;
  --muted: #5F5F5F;
  --accent: #E62E2D;
  --accent-ink: #FFFFFF;
  --rose: #C81E1E;
  --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: #0A0A0A;
  --bg2: #141414;
  --bg3: #1E1E1E;
  --card: #141414;
  --card2: #1E1E1E;
  --border: #2B2B2B;
  --border2: #3A3A3A;
  --purple: #E62E2D;
  --pink: #FF3B30;
  --yellow: var(--m2-red);
  --accent-ink: #FFFFFF;
  --grad: var(--m2-grad);
  --text: #F5F5F5;
  --text2: #D4D4D4;
  --text3: #A3A3A3;
}

html[data-theme="light"] body.ut-fan {
  --purple: #E62E2D;
  --pink: #C81E1E;
  --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="#FFFFFF"],
:root[data-theme="dark"] .brand-mark svg path[stroke="#FFFFFF"] {
  stroke: #fff !important;
}

html[data-theme="light"] .brand-mark svg path[stroke="#FFFFFF"],
:root[data-theme="light"] .brand-mark svg path[stroke="#FFFFFF"] {
  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);
}