/* shortflix · 10 套风格主题（html[data-sf-theme]） */

:root,
html[data-sf-theme="netflix-red"] {
  --sf-bg: #0F0F0F;
  --sf-bg2: #121212;
  --sf-bg3: #1A1A1A;
  --sf-card: #181818;
  --sf-line: rgba(255,255,255,.08);
  --sf-accent: #E50914;
  --sf-accent2: #FF4D4F;
  --sf-text: #F5F5F5;
  --sf-muted: #AAAAAA;
  --sf-muted2: #777;
  --sf-accent-ink: #FFFFFF;
  --sf-radius: 12px;
  --sf-btn-radius: 999px;
  --sf-glow-a: rgba(229,9,20,.12);
  --sf-glow-b: rgba(255,77,79,.06);
  --sf-font: "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --sf-shadow: 0 12px 32px rgba(0,0,0,.45);
}

html[data-sf-theme="neon-green"] {
  --sf-bg: #0B111A;
  --sf-bg2: #0F172A;
  --sf-bg3: #1A2436;
  --sf-card: #121A28;
  --sf-line: rgba(255,255,255,.08);
  --sf-accent: #2EE56D;
  --sf-accent2: #4AF085;
  --sf-text: #FFFFFF;
  --sf-muted: #9AA4B2;
  --sf-muted2: #6B7585;
  --sf-accent-ink: #052014;
  --sf-glow-a: rgba(46,229,109,.1);
  --sf-glow-b: rgba(56,120,255,.08);
  --sf-radius: 14px;
}

html[data-sf-theme="ocean-blue"] {
  --sf-bg: #06101C;
  --sf-bg2: #0A1628;
  --sf-bg3: #16304C;
  --sf-card: #0C1C30;
  --sf-line: rgba(120,180,255,.12);
  --sf-accent: #38BDF8;
  --sf-accent2: #7DD3FC;
  --sf-text: #E8F3FF;
  --sf-muted: #8FB3D1;
  --sf-muted2: #5E7F9A;
  --sf-accent-ink: #042033;
  --sf-glow-a: rgba(56,189,248,.12);
  --sf-glow-b: rgba(37,99,235,.1);
  --sf-radius: 16px;
}

html[data-sf-theme="violet-dream"] {
  --sf-bg: #100818;
  --sf-bg2: #160B24;
  --sf-bg3: #2A1844;
  --sf-card: #201234;
  --sf-line: rgba(196,181,253,.12);
  --sf-accent: #A855F7;
  --sf-accent2: #C084FC;
  --sf-text: #F5F0FF;
  --sf-muted: #B7A6D9;
  --sf-muted2: #7E6B9E;
  --sf-accent-ink: #1A0630;
  --sf-glow-a: rgba(168,85,247,.14);
  --sf-glow-b: rgba(236,72,153,.08);
  --sf-radius: 18px;
  --sf-font: "Segoe UI", "PingFang SC", "Microsoft YaHei", Georgia, serif;
}

html[data-sf-theme="amber-gold"] {
  --sf-bg: #120E08;
  --sf-bg2: #1A140C;
  --sf-bg3: #302618;
  --sf-card: #241C12;
  --sf-line: rgba(251,191,36,.14);
  --sf-accent: #F59E0B;
  --sf-accent2: #FBBF24;
  --sf-text: #FFF8EB;
  --sf-muted: #D6C3A0;
  --sf-muted2: #9A8460;
  --sf-accent-ink: #2A1A00;
  --sf-glow-a: rgba(245,158,11,.12);
  --sf-glow-b: rgba(239,68,68,.06);
  --sf-radius: 10px;
}

html[data-sf-theme="sakura-pink"] {
  --sf-bg: #160A10;
  --sf-bg2: #1E0F16;
  --sf-bg3: #3A1C2C;
  --sf-card: #2A1520;
  --sf-line: rgba(251,113,133,.14);
  --sf-accent: #FB7185;
  --sf-accent2: #FDA4AF;
  --sf-text: #FFF1F5;
  --sf-muted: #E8B4C4;
  --sf-muted2: #A8778A;
  --sf-accent-ink: #3A0A14;
  --sf-glow-a: rgba(251,113,133,.14);
  --sf-glow-b: rgba(244,114,182,.1);
  --sf-radius: 20px;
  --sf-btn-radius: 16px;
}

html[data-sf-theme="mint-fresh"] {
  --sf-bg: #071412;
  --sf-bg2: #0C1C19;
  --sf-bg3: #1A3530;
  --sf-card: #102420;
  --sf-line: rgba(45,212,191,.14);
  --sf-accent: #2DD4BF;
  --sf-accent2: #5EEAD4;
  --sf-text: #ECFFFB;
  --sf-muted: #9ED5CB;
  --sf-muted2: #5F9A90;
  --sf-accent-ink: #04241F;
  --sf-glow-a: rgba(45,212,191,.12);
  --sf-glow-b: rgba(16,185,129,.08);
  --sf-radius: 14px;
}

html[data-sf-theme="ice-light"] {
  --sf-bg: #F4F7FB;
  --sf-bg2: #EEF2F7;
  --sf-bg3: #DCE4EF;
  --sf-card: #FFFFFF;
  --sf-line: rgba(15,23,42,.08);
  --sf-accent: #2563EB;
  --sf-accent2: #3B82F6;
  --sf-text: #0F172A;
  --sf-muted: #64748B;
  --sf-muted2: #94A3B8;
  --sf-accent-ink: #FFFFFF;
  --sf-glow-a: rgba(37,99,235,.08);
  --sf-glow-b: rgba(14,165,233,.08);
  --sf-radius: 14px;
  --sf-shadow: 0 14px 36px rgba(15,23,42,.08);
}

html[data-sf-theme="cyber-neon"] {
  --sf-bg: #05060A;
  --sf-bg2: #090B12;
  --sf-bg3: #171B28;
  --sf-card: #0C101C;
  --sf-line: rgba(34,211,238,.16);
  --sf-accent: #22D3EE;
  --sf-accent2: #67E8F9;
  --sf-text: #F8FAFC;
  --sf-muted: #94A3B8;
  --sf-muted2: #64748B;
  --sf-accent-ink: #042F2E;
  --sf-glow-a: rgba(34,211,238,.12);
  --sf-glow-b: rgba(217,70,239,.12);
  --sf-radius: 8px;
  --sf-btn-radius: 8px;
  --sf-font: Consolas, "Courier New", "Microsoft YaHei", monospace;
}

html[data-sf-theme="slate-minimal"] {
  --sf-bg: #0B0D10;
  --sf-bg2: #111418;
  --sf-bg3: #1E2329;
  --sf-card: #161A20;
  --sf-line: rgba(255,255,255,.06);
  --sf-accent: #94A3B8;
  --sf-accent2: #CBD5E1;
  --sf-text: #E5E7EB;
  --sf-muted: #9CA3AF;
  --sf-muted2: #6B7280;
  --sf-accent-ink: #0B0D10;
  --sf-glow-a: rgba(148,163,184,.05);
  --sf-glow-b: rgba(100,116,139,.05);
  --sf-radius: 6px;
  --sf-btn-radius: 6px;
  --sf-shadow: 0 10px 28px rgba(0,0,0,.35);
}

body {
  background:
    radial-gradient(1000px 480px at 85% -8%, var(--sf-glow-a), transparent 55%),
    radial-gradient(800px 420px at 8% 18%, var(--sf-glow-b), transparent 50%),
    linear-gradient(180deg, var(--sf-bg) 0%, var(--sf-bg2) 45%, var(--sf-bg3) 100%) !important;
  font-family: var(--sf-font) !important;
}

.sf-btn,
.sf-chip,
.sf-search,
.sf-app-cta__btn,
.sf-app-float__action { border-radius: var(--sf-btn-radius, 999px); }
.sf-card,
.sf-hero,
.sf-vcard,
.sf-detail,
.sf-player-wrap,
.sf-art,
.sf-app-cta { border-radius: var(--sf-radius); }

.sf-btn--primary,
.sf-btn--app,
.sf-logo span,
.sf-chip--hot,
.sf-vcard__badge,
.sf-app-cta__btn,
.sf-app-float__badge,
.sf-tab.is-active,
.sf-paging .current,
.sf-paging .active {
  background: var(--sf-accent) !important;
  color: var(--sf-accent-ink) !important;
  border-color: var(--sf-accent) !important;
}
.sf-btn--primary:hover,
.sf-btn--app:hover { background: var(--sf-accent2) !important; color: var(--sf-accent-ink) !important; }
.sf-section__title::before,
.sf-hero__dot.is-active,
.sf-tip::before,
.sf-rank-no.is-top { background: var(--sf-accent) !important; color: var(--sf-accent) !important; }
.sf-nav__item.is-active { box-shadow: inset 0 -2px 0 var(--sf-accent) !important; }

.sf-app-cta {
  background:
    radial-gradient(420px 120px at 0% 50%, color-mix(in srgb, var(--sf-accent) 22%, transparent), transparent 60%),
    linear-gradient(90deg, var(--sf-bg2), var(--sf-bg3), var(--sf-bg2)) !important;
  border-color: color-mix(in srgb, var(--sf-accent) 45%, transparent) !important;
}
.sf-app-cta__icon { color: var(--sf-accent2) !important; background: color-mix(in srgb, var(--sf-accent) 18%, transparent) !important; }
.sf-app-cta__text em,
.sf-app-float__copy em { color: var(--sf-muted) !important; }
.sf-app-float__inner {
  background:
    radial-gradient(280px 90px at 10% 50%, color-mix(in srgb, var(--sf-accent) 25%, transparent), transparent 65%),
    linear-gradient(90deg, var(--sf-bg2), var(--sf-bg3)) !important;
  border-color: color-mix(in srgb, var(--sf-accent) 45%, transparent) !important;
}
.sf-app-float__close {
  background: var(--sf-bg3) !important;
  color: var(--sf-muted) !important;
  border-color: color-mix(in srgb, var(--sf-accent) 45%, transparent) !important;
}

/* 浅色修正 */
html[data-sf-theme="ice-light"] .sf-header {
  background: rgba(255,255,255,.88);
  border-bottom-color: rgba(15,23,42,.08);
}
html[data-sf-theme="ice-light"] .sf-search,
html[data-sf-theme="ice-light"] .sf-menu-toggle,
html[data-sf-theme="ice-light"] .sf-search-toggle {
  background: #fff; border-color: rgba(15,23,42,.1); color: #0F172A;
}
html[data-sf-theme="ice-light"] .sf-nav__item { color: #64748B; }
html[data-sf-theme="ice-light"] .sf-nav__item.is-active,
html[data-sf-theme="ice-light"] .sf-nav__item:hover { color: #0F172A; }
html[data-sf-theme="ice-light"] .sf-hero__bg::after {
  background:
    linear-gradient(90deg, rgba(244,247,251,.95) 0%, rgba(244,247,251,.75) 42%, rgba(244,247,251,.2) 100%),
    linear-gradient(0deg, rgba(244,247,251,.88) 0%, transparent 45%);
}
html[data-sf-theme="ice-light"] .sf-hero__content { background: rgba(255,255,255,.8); border-color: rgba(15,23,42,.08); }
html[data-sf-theme="ice-light"] .sf-hero__content-body { color: #334155; }
html[data-sf-theme="ice-light"] .sf-app-float__inner {
  background: linear-gradient(90deg, #EFF6FF, #fff) !important;
  color: #0F172A;
}
html[data-sf-theme="ice-light"] .sf-footer,
html[data-sf-theme="ice-light"] .sf-tip { color: #64748B; }

html[data-sf-theme="cyber-neon"] .sf-hero,
html[data-sf-theme="cyber-neon"] .sf-vcard:hover {
  box-shadow: 0 0 0 1px rgba(34,211,238,.25), 0 0 24px rgba(217,70,239,.12);
}
html[data-sf-theme="slate-minimal"] .sf-vcard:hover { transform: none; }
html[data-sf-theme="slate-minimal"] .sf-btn--primary { box-shadow: none; }