/* =========================================================
 * duanju51 · 10 套风格主题
 * 通过 html[data-dj-theme="..."] 切换（见 public/theme_config.html）
 * ========================================================= */

:root,
html[data-dj-theme="neon-green"] {
  --dj-bg0: #0B111A;
  --dj-bg1: #0F172A;
  --dj-bg2: #141C2B;
  --dj-bg3: #1A2436;
  --dj-card: rgba(18, 26, 40, 0.92);
  --dj-line: rgba(255, 255, 255, 0.08);
  --dj-line-strong: rgba(46, 229, 109, 0.55);
  --dj-text: #FFFFFF;
  --dj-muted: #9AA4B2;
  --dj-muted2: #6B7585;
  --dj-accent: #2EE56D;
  --dj-accent-hover: #4AF085;
  --dj-accent-dim: rgba(46, 229, 109, 0.14);
  --dj-accent-ink: #052014;
  --dj-danger: #FF5A6A;
  --dj-radius: 14px;
  --dj-radius-sm: 10px;
  --dj-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  --dj-glow-a: rgba(46, 229, 109, 0.08);
  --dj-glow-b: rgba(56, 120, 255, 0.08);
  --dj-font: "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --dj-btn-radius: 999px;
  --dj-card-border: 1px solid var(--dj-line);
}

/* 2. 热血红 */
html[data-dj-theme="netflix-red"] {
  --dj-bg0: #0D0D0D;
  --dj-bg1: #121212;
  --dj-bg2: #1A1A1A;
  --dj-bg3: #222;
  --dj-card: rgba(24, 24, 24, 0.96);
  --dj-line: rgba(255, 255, 255, 0.08);
  --dj-line-strong: rgba(229, 9, 20, 0.55);
  --dj-text: #F5F5F5;
  --dj-muted: #AAAAAA;
  --dj-muted2: #777777;
  --dj-accent: #E50914;
  --dj-accent-hover: #FF4D4F;
  --dj-accent-dim: rgba(229, 9, 20, 0.16);
  --dj-accent-ink: #FFFFFF;
  --dj-glow-a: rgba(229, 9, 20, 0.14);
  --dj-glow-b: rgba(255, 77, 79, 0.08);
  --dj-radius: 12px;
  --dj-font: "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

/* 3. 深海蓝 */
html[data-dj-theme="ocean-blue"] {
  --dj-bg0: #06101C;
  --dj-bg1: #0A1628;
  --dj-bg2: #102038;
  --dj-bg3: #16304C;
  --dj-card: rgba(12, 28, 48, 0.94);
  --dj-line: rgba(120, 180, 255, 0.12);
  --dj-line-strong: rgba(56, 189, 248, 0.55);
  --dj-text: #E8F3FF;
  --dj-muted: #8FB3D1;
  --dj-muted2: #5E7F9A;
  --dj-accent: #38BDF8;
  --dj-accent-hover: #7DD3FC;
  --dj-accent-dim: rgba(56, 189, 248, 0.16);
  --dj-accent-ink: #042033;
  --dj-glow-a: rgba(56, 189, 248, 0.12);
  --dj-glow-b: rgba(37, 99, 235, 0.12);
  --dj-radius: 16px;
  --dj-font: "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

/* 4. 幻紫 */
html[data-dj-theme="violet-dream"] {
  --dj-bg0: #100818;
  --dj-bg1: #160B24;
  --dj-bg2: #1F1233;
  --dj-bg3: #2A1844;
  --dj-card: rgba(32, 18, 52, 0.94);
  --dj-line: rgba(196, 181, 253, 0.12);
  --dj-line-strong: rgba(168, 85, 247, 0.55);
  --dj-text: #F5F0FF;
  --dj-muted: #B7A6D9;
  --dj-muted2: #7E6B9E;
  --dj-accent: #A855F7;
  --dj-accent-hover: #C084FC;
  --dj-accent-dim: rgba(168, 85, 247, 0.16);
  --dj-accent-ink: #1A0630;
  --dj-glow-a: rgba(168, 85, 247, 0.14);
  --dj-glow-b: rgba(236, 72, 153, 0.08);
  --dj-radius: 18px;
  --dj-font: "Segoe UI", "PingFang SC", "Microsoft YaHei", Georgia, serif;
}

/* 5. 琥珀金 */
html[data-dj-theme="amber-gold"] {
  --dj-bg0: #120E08;
  --dj-bg1: #1A140C;
  --dj-bg2: #241C12;
  --dj-bg3: #302618;
  --dj-card: rgba(36, 28, 16, 0.94);
  --dj-line: rgba(251, 191, 36, 0.14);
  --dj-line-strong: rgba(245, 158, 11, 0.55);
  --dj-text: #FFF8EB;
  --dj-muted: #D6C3A0;
  --dj-muted2: #9A8460;
  --dj-accent: #F59E0B;
  --dj-accent-hover: #FBBF24;
  --dj-accent-dim: rgba(245, 158, 11, 0.16);
  --dj-accent-ink: #2A1A00;
  --dj-glow-a: rgba(245, 158, 11, 0.12);
  --dj-glow-b: rgba(239, 68, 68, 0.06);
  --dj-radius: 10px;
  --dj-font: "Segoe UI", "PingFang SC", "Microsoft YaHei", "Times New Roman", serif;
}

/* 6. 樱花粉 */
html[data-dj-theme="sakura-pink"] {
  --dj-bg0: #160A10;
  --dj-bg1: #1E0F16;
  --dj-bg2: #2A1520;
  --dj-bg3: #3A1C2C;
  --dj-card: rgba(42, 20, 32, 0.94);
  --dj-line: rgba(251, 113, 133, 0.14);
  --dj-line-strong: rgba(244, 63, 94, 0.5);
  --dj-text: #FFF1F5;
  --dj-muted: #E8B4C4;
  --dj-muted2: #A8778A;
  --dj-accent: #FB7185;
  --dj-accent-hover: #FDA4AF;
  --dj-accent-dim: rgba(251, 113, 133, 0.16);
  --dj-accent-ink: #3A0A14;
  --dj-glow-a: rgba(251, 113, 133, 0.14);
  --dj-glow-b: rgba(244, 114, 182, 0.1);
  --dj-radius: 20px;
  --dj-btn-radius: 16px;
  --dj-font: "Segoe UI", "PingFang SC", "Microsoft YaHei", "Comic Sans MS", cursive;
}

/* 7. 薄荷绿 */
html[data-dj-theme="mint-fresh"] {
  --dj-bg0: #071412;
  --dj-bg1: #0C1C19;
  --dj-bg2: #122824;
  --dj-bg3: #1A3530;
  --dj-card: rgba(16, 36, 32, 0.94);
  --dj-line: rgba(45, 212, 191, 0.14);
  --dj-line-strong: rgba(20, 184, 166, 0.55);
  --dj-text: #ECFFFB;
  --dj-muted: #9ED5CB;
  --dj-muted2: #5F9A90;
  --dj-accent: #2DD4BF;
  --dj-accent-hover: #5EEAD4;
  --dj-accent-dim: rgba(45, 212, 191, 0.16);
  --dj-accent-ink: #04241F;
  --dj-glow-a: rgba(45, 212, 191, 0.12);
  --dj-glow-b: rgba(16, 185, 129, 0.08);
  --dj-radius: 14px;
  --dj-font: "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

/* 8. 浅色冰晶 */
html[data-dj-theme="ice-light"] {
  --dj-bg0: #F4F7FB;
  --dj-bg1: #EEF2F7;
  --dj-bg2: #E6ECF4;
  --dj-bg3: #DCE4EF;
  --dj-card: rgba(255, 255, 255, 0.92);
  --dj-line: rgba(15, 23, 42, 0.08);
  --dj-line-strong: rgba(37, 99, 235, 0.4);
  --dj-text: #0F172A;
  --dj-muted: #64748B;
  --dj-muted2: #94A3B8;
  --dj-accent: #2563EB;
  --dj-accent-hover: #3B82F6;
  --dj-accent-dim: rgba(37, 99, 235, 0.1);
  --dj-accent-ink: #FFFFFF;
  --dj-danger: #DC2626;
  --dj-glow-a: rgba(37, 99, 235, 0.08);
  --dj-glow-b: rgba(14, 165, 233, 0.08);
  --dj-radius: 14px;
  --dj-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
  --dj-font: "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

/* 9. 赛博青紫 */
html[data-dj-theme="cyber-neon"] {
  --dj-bg0: #05060A;
  --dj-bg1: #090B12;
  --dj-bg2: #10131C;
  --dj-bg3: #171B28;
  --dj-card: rgba(12, 16, 28, 0.94);
  --dj-line: rgba(34, 211, 238, 0.16);
  --dj-line-strong: rgba(34, 211, 238, 0.6);
  --dj-text: #F8FAFC;
  --dj-muted: #94A3B8;
  --dj-muted2: #64748B;
  --dj-accent: #22D3EE;
  --dj-accent-hover: #67E8F9;
  --dj-accent-dim: rgba(34, 211, 238, 0.14);
  --dj-accent-ink: #042F2E;
  --dj-glow-a: rgba(34, 211, 238, 0.12);
  --dj-glow-b: rgba(217, 70, 239, 0.12);
  --dj-radius: 8px;
  --dj-btn-radius: 8px;
  --dj-font: Consolas, "Courier New", "Microsoft YaHei", monospace;
}

/* 10. 石墨极简 */
html[data-dj-theme="slate-minimal"] {
  --dj-bg0: #0B0D10;
  --dj-bg1: #111418;
  --dj-bg2: #171A1F;
  --dj-bg3: #1E2329;
  --dj-card: rgba(22, 26, 32, 0.96);
  --dj-line: rgba(255, 255, 255, 0.06);
  --dj-line-strong: rgba(148, 163, 184, 0.45);
  --dj-text: #E5E7EB;
  --dj-muted: #9CA3AF;
  --dj-muted2: #6B7280;
  --dj-accent: #94A3B8;
  --dj-accent-hover: #CBD5E1;
  --dj-accent-dim: rgba(148, 163, 184, 0.12);
  --dj-accent-ink: #0B0D10;
  --dj-glow-a: rgba(148, 163, 184, 0.05);
  --dj-glow-b: rgba(100, 116, 139, 0.05);
  --dj-radius: 6px;
  --dj-radius-sm: 4px;
  --dj-btn-radius: 6px;
  --dj-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  --dj-font: "Segoe UI", "PingFang SC", "Microsoft YaHei", Helvetica, Arial, sans-serif;
}

/* ---- 主题联动细节 ---- */
body {
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--dj-glow-a), transparent 55%),
    radial-gradient(900px 500px at 10% 20%, var(--dj-glow-b), transparent 50%),
    linear-gradient(165deg, var(--dj-bg0) 0%, var(--dj-bg1) 48%, var(--dj-bg2) 100%) !important;
}

.dj-app-cta {
  background:
    radial-gradient(420px 120px at 0% 50%, var(--dj-accent-dim), transparent 60%),
    linear-gradient(90deg, var(--dj-bg2) 0%, var(--dj-bg3) 45%, var(--dj-bg2) 100%) !important;
  border-color: var(--dj-line-strong) !important;
}
.dj-app-cta__icon {
  background: var(--dj-accent-dim) !important;
  color: var(--dj-accent) !important;
  border-color: var(--dj-line-strong) !important;
}
.dj-app-cta__text em { color: var(--dj-muted) !important; }
.dj-app-cta__btn,
.dj-app-float__badge {
  background: var(--dj-accent) !important;
  color: var(--dj-accent-ink) !important;
}
.dj-app-float__inner {
  background:
    radial-gradient(280px 90px at 10% 50%, var(--dj-accent-dim), transparent 65%),
    linear-gradient(90deg, var(--dj-bg1) 0%, var(--dj-bg2) 55%, var(--dj-bg1) 100%) !important;
  border-color: var(--dj-line-strong) !important;
}
.dj-app-float__copy em { color: var(--dj-muted) !important; }
.dj-app-float__close {
  background: var(--dj-bg2) !important;
  color: var(--dj-muted) !important;
  border-color: var(--dj-line-strong) !important;
}
.dj-hero__tag,
.dj-chip--accent {
  color: var(--dj-accent) !important;
  border-color: var(--dj-line-strong) !important;
  background: var(--dj-accent-dim) !important;
}
.dj-section__title::before,
.dj-nav__item.is-active::after,
.dj-tipbar__ico {
  background: var(--dj-accent) !important;
  box-shadow: 0 0 10px var(--dj-accent) !important;
}

.dj-btn,
.dj-btn--play,
.dj-btn--app,
.dj-search,
.dj-chip,
.dj-logo__badge,
.dj-app-cta__btn,
.dj-app-float__action {
  border-radius: var(--dj-btn-radius, 999px);
}

.dj-card,
.dj-hero,
.dj-rail,
.dj-vcard,
.dj-detail,
.dj-playlist,
.dj-player-wrap,
.dj-art,
.dj-app-cta {
  border-radius: var(--dj-radius);
}

.dj-btn--play,
.dj-btn--app,
.dj-logo__badge,
.dj-tool--plus,
.dj-app-cta__btn,
.dj-app-float__badge,
.dj-tab.is-active,
.dj-paging .current,
.dj-paging .active {
  color: var(--dj-accent-ink) !important;
}

/* 浅色主题专项修正 */
html[data-dj-theme="ice-light"] .dj-header {
  background: rgba(255, 255, 255, 0.86);
  border-bottom-color: rgba(15, 23, 42, 0.08);
}
html[data-dj-theme="ice-light"] .dj-search,
html[data-dj-theme="ice-light"] .dj-tool--app,
html[data-dj-theme="ice-light"] .dj-menu-toggle,
html[data-dj-theme="ice-light"] .dj-search-toggle {
  background: #FFFFFF;
  border-color: rgba(15, 23, 42, 0.1);
  color: #0F172A;
}
html[data-dj-theme="ice-light"] .dj-nav__item { color: #64748B; }
html[data-dj-theme="ice-light"] .dj-nav__item.is-active,
html[data-dj-theme="ice-light"] .dj-nav__item:hover { color: #0F172A; }
html[data-dj-theme="ice-light"] .dj-hero__bg::after {
  background:
    linear-gradient(90deg, rgba(244,247,251,0.96) 0%, rgba(244,247,251,0.78) 38%, rgba(244,247,251,0.2) 68%, rgba(244,247,251,0.5) 100%),
    linear-gradient(0deg, rgba(244,247,251,0.9) 0%, transparent 42%);
}
html[data-dj-theme="ice-light"] .dj-hero__content {
  background: rgba(255,255,255,0.75);
  border-color: rgba(15, 23, 42, 0.08);
}
html[data-dj-theme="ice-light"] .dj-hero__content-body { color: #334155; }
html[data-dj-theme="ice-light"] .dj-app-float__inner {
  background: linear-gradient(90deg, #EFF6FF, #FFFFFF);
  border-color: rgba(37, 99, 235, 0.25);
  color: #0F172A;
}
html[data-dj-theme="ice-light"] .dj-app-float__copy em { color: #64748B; }
html[data-dj-theme="ice-light"] .dj-app-float__close {
  background: #EFF6FF;
  color: #2563EB;
  border-color: rgba(37, 99, 235, 0.25);
}
html[data-dj-theme="ice-light"] .dj-tipbar,
html[data-dj-theme="ice-light"] .dj-footer { color: #64748B; }

/* 赛博描边加强 */
html[data-dj-theme="cyber-neon"] .dj-hero,
html[data-dj-theme="cyber-neon"] .dj-vcard:hover,
html[data-dj-theme="cyber-neon"] .dj-app-cta {
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.25), 0 0 24px rgba(217, 70, 239, 0.12);
}
html[data-dj-theme="cyber-neon"] .dj-section__title::before {
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.8);
}

/* 极简去软阴影 */
html[data-dj-theme="slate-minimal"] .dj-vcard:hover {
  transform: none;
  border-color: rgba(148, 163, 184, 0.35);
}
html[data-dj-theme="slate-minimal"] .dj-btn--play,
html[data-dj-theme="slate-minimal"] .dj-btn--app {
  box-shadow: none;
}