/* Theme worlds layer. Playback pixels and controls remain unfiltered. */
:root { --theme-heading-font: var(--font); --theme-display-spacing: -1.4px; }
body { transition: background-color .2s, color .2s; }
.home-heading h2, .feature-content h2, .login-editorial h1, .login-card h2 { font-family: var(--theme-heading-font); letter-spacing: var(--theme-display-spacing); }
/* Replace signature-only colours on cinematic surfaces with the active palette. */
:root[data-skin] .discovery-hero, :root[data-skin] .login-story { background: var(--surface); color: var(--text); border-color: var(--border); }
:root[data-skin] .feature-shade { background: linear-gradient(90deg, var(--surface) 16%, color-mix(in srgb, var(--surface) 94%, transparent) 37%, color-mix(in srgb, var(--surface) 45%, transparent) 68%, transparent), linear-gradient(0deg, var(--surface), transparent 65%); }
:root[data-skin] .feature-content .eyebrow, :root[data-skin] .login-editorial .eyebrow, :root[data-skin] .login-editorial h1 em, :root[data-skin] .login-genres svg, :root[data-skin] .login-story .wordmark-dot, :root[data-skin] .feature-rating, :root[data-skin] .feature-content h2 em { color: var(--accent); }
:root[data-skin] .discovery-hero .btn-primary, :root[data-skin] .login-story .brand-symbol { background: var(--accent); color: var(--accent-ink); }
:root[data-skin] .feature-content p, :root[data-skin] .feature-meta, :root[data-skin] .feature-bottom, :root[data-skin] .hero-edition, :root[data-skin] .login-editorial p, :root[data-skin] .login-genres span, :root[data-skin] .login-story-footer, :root[data-skin] .orbit-caption { color: var(--muted); }
:root[data-skin] .feature-save { color: var(--text); background: color-mix(in srgb, var(--surface) 75%, transparent); border-color: var(--border); }
:root[data-skin] .feature-save.on { color: var(--accent); }
:root[data-skin] .feature-tag { border-color: var(--border); }
:root[data-skin] .feature-dots button.active::before { background: var(--accent); }
:root[data-skin] .feature-dots button::before { background: var(--muted); }
:root[data-skin] .hero-orbit { background: radial-gradient(circle at 30% 70%, color-mix(in srgb, var(--accent) 40%, var(--surface)), var(--surface) 70%); border-color: var(--border); box-shadow: inset 0 0 70px color-mix(in srgb, var(--accent) 12%, transparent); }
:root[data-skin] .hero-orbit::after { border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
:root[data-skin] .orbit-core { background: radial-gradient(circle at 70% 25%, color-mix(in srgb, var(--accent) 75%, white), color-mix(in srgb, var(--accent) 55%, var(--surface)) 14%, color-mix(in srgb, var(--accent) 22%, var(--surface)) 40%, var(--surface) 75%); box-shadow: inset 6px 6px 20px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 65px color-mix(in srgb, var(--accent) 7%, transparent); }
:root[data-skin] .orbit-ring, :root[data-skin] .orbit-ring::before, :root[data-skin] .orbit-ring::after { border-color: color-mix(in srgb, var(--accent) 25%, transparent); box-shadow: none; }
:root[data-skin] .cinema-orbit { background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 10%, transparent), transparent 65%); }
:root[data-skin] .login-story::after { background: linear-gradient(0deg, var(--surface) 10%, color-mix(in srgb, var(--surface) 85%, transparent) 26%, transparent 63%); }

/* Gallery previews stay true to each candidate, regardless of the selected theme. */
.settings { max-width: 1000px; }
.theme-panel { padding: 24px; }
.theme-heading h3 { font-size: 27px; font-weight: 500; letter-spacing: -.8px; margin: 8px 0; }
.theme-heading p { color: var(--muted); font-size: 12px; }
.theme-select-line { margin-top: 23px; }
.theme-group h4 { font-size: 9px; font-weight: 500; letter-spacing: 1.8px; color: var(--muted); margin: 22px 0 14px; }
.theme-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.theme-choice { min-width: 0; text-align: left; border: 1px solid var(--border); border-radius: 13px; padding: 9px 9px 13px; color: var(--text); background: var(--surface); transition: border-color .15s, transform .15s; }
.theme-choice:hover { border-color: var(--accent); transform: translateY(-2px); }
.theme-choice[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.theme-preview { position: relative; display: flex; height: 111px; background: var(--preview-bg); border: 1px solid var(--preview-border); border-radius: 7px; overflow: hidden; padding: 12px; gap: 10px; color: var(--preview-text); }
.preview-rail { width: 24px; flex: none; border-right: 1px solid var(--preview-border); display: flex; flex-direction: column; gap: 8px; padding: 7px 7px 0 0; }
.preview-rail i { height: 4px; border-radius: 2px; background: var(--preview-surface); }
.preview-rail i:first-child { background: var(--preview-accent); }
.preview-content { display: flex; flex-direction: column; gap: 7px; min-width: 0; flex: 1; }
.preview-title { color: var(--preview-text); font: 700 13px system-ui, sans-serif; letter-spacing: -.3px; }
.preview-hero { height: 26px; border-radius: 5px; background: linear-gradient(115deg, var(--preview-surface), var(--preview-accent)); opacity: .8; }
.preview-posters { display: flex; gap: 5px; }
.preview-posters i { flex: 1; height: 21px; background: var(--preview-surface); border: 1px solid var(--preview-border); border-radius: 3px; }
.theme-choice-name { display: block; font: 600 13px var(--font); margin: 12px 3px 5px; }
.theme-choice-description { display: block; font: 10px/1.5 var(--font); color: var(--muted); margin: 0 3px; }
.theme-selected { display: none; position: absolute; bottom: 7px; right: 7px; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: var(--preview-accent); color: var(--preview-bg); }
.theme-choice[aria-pressed="true"] .theme-selected { display: grid; }
.theme-panel .switch { margin-top: 23px; }
.theme-panel .switch small { display: block; color: var(--muted); margin-top: 5px; font-size: 11px; }
.theme-selection-status { margin-top: 12px; color: var(--muted); font-size: 11px; }
[data-theme-choice="vice"] .preview-title { font: italic 20px Georgia, serif; color: #ff8edb; }
[data-theme-choice="vice"] .preview-hero { background: repeating-linear-gradient(0deg, #29143d 0 2px, transparent 2px 6px), linear-gradient(#ff8edb, #f8a561); }
[data-theme-choice="wasteland"] .theme-preview { border-radius: 0; background: repeating-linear-gradient(0deg, #a4ff7309 0 1px, transparent 1px 3px), #071009; }
[data-theme-choice="wasteland"] .preview-title { font: 12px monospace; color: #a4ff73; }
[data-theme-choice="wasteland"] .preview-hero, [data-theme-choice="wasteland"] .preview-posters i { border: 1px solid #a4ff73; border-radius: 0; background: #112516; }
[data-theme-choice="lcars"] .preview-rail { background: #ffbd83; border-radius: 17px 0 0 17px; width: 30px; }
[data-theme-choice="lcars"] .preview-title { color: #c1afff; font: 12px monospace; }
[data-theme-choice="lcars"] .preview-hero { height: 10px; border-radius: 0 9px 9px 0; background: #c1afff; }
[data-theme-choice="fluent"] .theme-preview { background: radial-gradient(ellipse at 85% 80%, #80b7ed, #eaf0fa 75%); }
[data-theme-choice="fluent"] .preview-hero { background: #ffffff88; border: 1px solid #fff; box-shadow: 0 3px 10px #36639320; }
[data-theme-choice="sky"] .preview-title { color: #81caff; }
[data-theme-choice="sky"] .preview-hero { background: linear-gradient(100deg, #f99a52, #e93c91, #8259df, #489cff); }
[data-theme-choice="arcade"] .theme-preview { border: 2px solid #80f7ed; border-radius: 0; box-shadow: inset 0 0 15px #80f7ed22; }
[data-theme-choice="arcade"] .preview-title { font: 10px monospace; color: #ff93d6; letter-spacing: 1px; }
[data-theme-choice="arcade"] .preview-hero { border-radius: 0; background: repeating-linear-gradient(90deg, #80f7ed55 0 1px, transparent 1px 12px), #2b1945; }
[data-theme-choice="noir"] .preview-title { font: italic 18px Georgia, serif; }
[data-theme-choice="noir"] .preview-hero { border-block: 2px solid #815b27; border-radius: 0; background: #e4dccd; }

/* Vice City: sunset bands, neon signage and sharp poster frames. */
:root[data-skin="vice"] { --theme-heading-font: Georgia, 'Times New Roman', serif; --theme-display-spacing: -1.5px; --radius: 5px; --radius-sm: 3px; }
[data-skin="vice"] .wordmark { font-family: Georgia, serif; font-style: italic; text-shadow: 2px 2px #23cbd166; }
[data-skin="vice"] .sidebar { background: linear-gradient(175deg, #311638, var(--bg) 60%); border-right: 2px solid #62e7ed; }
[data-skin="vice"] .topbar { border-bottom-color: #ff8edb70; }
[data-skin="vice"] .nav-item, [data-skin="vice"] .btn, [data-skin="vice"] .chip { border-radius: 3px; }
[data-skin="vice"] .nav-item.active { background: linear-gradient(100deg, #ff8edb, #f8b186); color: #39103e; box-shadow: 4px 4px 0 #53c9d255; }
[data-skin="vice"] .home-heading h2, [data-skin="vice"] .login-editorial h1 { font-style: italic; }
[data-skin="vice"] .card-img { border: 2px solid #eee3fb; box-shadow: 4px 4px 0 #e85fad55; }
[data-skin="vice"] .discovery-hero { border-radius: 4px; border-bottom: 3px solid #62e7ed; }
:root[data-skin="vice"] .hero-orbit, :root[data-skin="vice"] .orbit-core { background: repeating-linear-gradient(0deg, #211334 0 5px, transparent 5px 27px), linear-gradient(#ff8edb, #f8b186); box-shadow: 0 0 80px #fa84c522; }
[data-skin="vice"] .orbit-ring { transform: rotate(-30deg) scaleY(.35); border-color: #62e7ed; }
[data-skin="vice"] .guide-header { background: linear-gradient(90deg, #311638, #233952); }

/* Wasteland: monochrome terminal, instrument borders and optional scanlines. */
:root[data-skin="wasteland"] { --font: 'Courier New', Courier, monospace; --theme-heading-font: var(--font); --theme-display-spacing: -1px; --radius: 2px; --radius-sm: 1px; }
[data-skin="wasteland"] :is(.btn, .input, .nav-item, .panel, .discovery-hero, .discovery-links a, .guide-scroll, .guide-programme, .sheet, .chip, .account-chip, .topbar-search) { border-radius: 1px; }
[data-skin="wasteland"] .wordmark { font-family: var(--font); font-size: 23px; letter-spacing: -2px; text-transform: uppercase; }
[data-skin="wasteland"] .brand-symbol { background: transparent; color: var(--accent); border: 2px solid var(--accent); transform: none; border-radius: 0; }
[data-skin="wasteland"] .sidebar { border-right: 1px solid var(--accent); }
[data-skin="wasteland"] .nav-item { border: 1px solid transparent; text-transform: uppercase; }
[data-skin="wasteland"] .nav-item.active { border-color: var(--accent); background: var(--accent); }
[data-skin="wasteland"] .topbar { border-bottom: 1px solid var(--accent); }
[data-skin="wasteland"] :is(.eyebrow, .section-head h2, .home-heading h2, .card-title, .guide-channel-heading) { text-transform: uppercase; }
[data-skin="wasteland"] .card-img { border: 1px solid var(--accent); }
[data-skin="wasteland"] .guide-programme.is-now { border: 1px solid var(--accent); }
[data-skin="wasteland"][data-theme-effects="on"] :is(.view, .login-story) { background-image: repeating-linear-gradient(0deg, transparent 0 3px, #a4ff7307 3px 4px); }
[data-skin="wasteland"][data-theme-effects="on"] :is(.home-heading h2, .wordmark, .eyebrow) { text-shadow: 0 0 12px #a4ff7344; }
:root[data-skin="wasteland"] .orbit-core { background: repeating-radial-gradient(circle, transparent 0 24px, #a4ff7355 25px 26px); border: 1px solid var(--accent); box-shadow: none; }
:root[data-skin="wasteland"] .hero-orbit { background: repeating-radial-gradient(circle, transparent 0 45px, #a4ff7333 46px 47px); }

/* Starship: LCARS-inspired segmented rails and asymmetric console panels. */
:root[data-skin="lcars"] { --theme-heading-font: 'Arial Narrow', 'Helvetica Neue', sans-serif; --theme-display-spacing: -1px; --radius: 24px; }
[data-skin="lcars"] .sidebar { border-right: 9px solid #c1afff; padding-right: 12px; }
[data-skin="lcars"] .nav-item { border-radius: 30px 0 0 30px; background: #c1afff; color: #171023; text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px; margin-bottom: 7px; }
[data-skin="lcars"] .nav-item:nth-of-type(3n) { background: #89b5f1; }
[data-skin="lcars"] .nav-item.active { background: #ffbd83; color: #281508; box-shadow: none; }
[data-skin="lcars"] .topbar { border-bottom: 8px solid #c1afff; border-radius: 0 0 0 28px; }
[data-skin="lcars"] .home-heading h2, [data-skin="lcars"] .section-head h2 { text-transform: uppercase; font-weight: 400; }
[data-skin="lcars"] .panel { border-left: 12px solid #c1afff; border-radius: 25px 5px 5px 25px; }
[data-skin="lcars"] .btn { border-radius: 999px; text-transform: uppercase; letter-spacing: .7px; font-size: 11px; }
[data-skin="lcars"] .guide-scroll { border-left: 10px solid #ffbd83; border-radius: 25px 0 0 25px; }
[data-skin="lcars"] .guide-channel-heading { background: #ffbd83; color: #281508; }
[data-skin="lcars"] .guide-channel-heading span { color: #281508; }
[data-skin="lcars"] .guide-times { background: #c1afff; }
[data-skin="lcars"] .guide-times > span { color: #171023; border-left-color: #08090d; }
[data-skin="lcars"] .guide-programme { border-radius: 16px 3px 3px 16px; }
[data-skin="lcars"] .discovery-links a { border-left: 7px solid #89b5f1; border-radius: 20px 4px 4px 20px; }
[data-skin="lcars"] .discovery-hero { border-left: 16px solid #ffbd83; border-radius: 40px 5px 5px 40px; }
:root[data-skin="lcars"] .orbit-core { background: repeating-radial-gradient(ellipse, #11131c 0 35px, #c1afff 36px 42px, #11131c 43px 65px, #ffbd83 66px 72px); box-shadow: none; }

/* Fluent: translucent window chrome, soft elevation and a bloom backdrop. */
:root[data-skin="fluent"] { --font: 'Segoe UI', system-ui, sans-serif; --radius: 10px; --radius-sm: 7px; --shadow: 0 12px 40px #315e8e18; }
[data-skin="fluent"] body { background: radial-gradient(ellipse at 75% 10%, #b6d7fa, transparent 55%), var(--bg); background-attachment: fixed; }
[data-skin="fluent"] .sidebar { background: #f8faffbb; backdrop-filter: blur(24px); }
[data-skin="fluent"] .topbar { background: #f8faffaa; backdrop-filter: blur(24px); }
[data-skin="fluent"] .nav-item { position: relative; border-radius: 5px; font-weight: 400; }
[data-skin="fluent"] .nav-item.active { background: #cbdcf3; color: #153c68; box-shadow: none; }
[data-skin="fluent"] .nav-item.active::before { content: ''; position: absolute; left: 0; width: 3px; height: 20px; background: var(--accent); border-radius: 3px; }
[data-skin="fluent"] :is(.btn, .input, .chip) { border-radius: 5px; }
[data-skin="fluent"] :is(.panel, .discovery-links a, .guide-scroll) { background: #f8faffd9; box-shadow: 0 4px 18px #315e8e12; border-color: #fff; }
[data-skin="fluent"] .card-img { box-shadow: 0 5px 14px #315e8e24; }
[data-skin="fluent"] .wordmark { font-weight: 500; }
:root[data-skin="fluent"] .orbit-core { border-radius: 40% 60% 65% 35%; transform: rotate(35deg); background: repeating-radial-gradient(ellipse at 15% 10%, #1761c3 0 28px, #74b6ff 42px, #d0e8ff 55px, #4187dc 70px); }
:root[data-skin="fluent"] .hero-orbit { border-radius: 45% 55% 30% 70%; background: repeating-radial-gradient(ellipse at 0 0, #77b7f8 0 35px, #c2e0ff 45px, #397cc5 65px); }

/* Skyline: a broadcast ribbon, airy typography and a set-top-box guide. */
:root[data-skin="sky"] { --theme-heading-font: 'Helvetica Neue', Arial, sans-serif; --theme-display-spacing: -1px; --radius: 7px; --radius-sm: 5px; }
[data-skin="sky"] .wordmark { font-weight: 400; letter-spacing: -2px; }
[data-skin="sky"] .sidebar { background: linear-gradient(180deg, #122255, #080e32 70%); }
[data-skin="sky"] .topbar { border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, #ff9c46, #f7548e, #ac71e5, #60c7ff) 1; }
[data-skin="sky"] :is(.home-heading h2, .feature-content h2, .login-editorial h1) { font-weight: 300; }
[data-skin="sky"] .nav-item { border-radius: 4px; }
[data-skin="sky"] .nav-item.active { background: linear-gradient(90deg, #165fb4, #237dcc); color: #fff; }
[data-skin="sky"] .discovery-hero { border-radius: 6px; }
[data-skin="sky"] .guide-header { background: #1b3d7d; }
[data-skin="sky"] .guide-channel-heading { background: #1b3d7d; }
[data-skin="sky"] .guide-programme { border-radius: 3px; background: #172858; }
[data-skin="sky"] .guide-programme.is-now { background: #1f568a; border-color: #81caff; }
[data-skin="sky"] .guide-programme.is-now strong { color: #fff; }
:root[data-skin="sky"] .orbit-core, :root[data-skin="sky"] .hero-orbit { background: conic-gradient(from 45deg, #4083e9, #794bcc, #e65798, #ffae68, #4083e9); border-radius: 38% 62% 65% 35%; opacity: .8; }

/* Arcade: pixel-like frames, score-board type and a perspective grid. */
:root[data-skin="arcade"] { --theme-heading-font: 'Courier New', monospace; --theme-display-spacing: -1px; --radius: 0px; --radius-sm: 0px; }
[data-skin="arcade"] :is(.btn, .nav-item, .input, .chip, .panel, .discovery-links a, .guide-programme, .guide-scroll, .sheet, .discovery-hero) { border-radius: 0; }
[data-skin="arcade"] .wordmark { font-family: monospace; letter-spacing: -1px; text-transform: uppercase; font-size: 23px; }
[data-skin="arcade"] .nav-item.active, [data-skin="arcade"] .btn-primary { box-shadow: 3px 3px 0 #ff93d6; }
[data-skin="arcade"] .home-heading h2, [data-skin="arcade"] .section-head h2 { text-transform: uppercase; }
[data-skin="arcade"] .card-img { border: 2px solid #80f7ed; box-shadow: 4px 4px 0 #f17ac1; }
[data-skin="arcade"] .sidebar { border-right: 2px solid #ff93d6; }
[data-skin="arcade"] .guide-programme.is-now { border: 2px solid #80f7ed; }
[data-skin="arcade"][data-theme-effects="on"] .view { background-image: linear-gradient(#80f7ed08 1px, transparent 1px), linear-gradient(90deg, #80f7ed08 1px, transparent 1px); background-size: 40px 40px; }
:root[data-skin="arcade"] .orbit-core { background: repeating-linear-gradient(0deg, #1c1130 0 6px, transparent 6px 24px), linear-gradient(#ff93d6, #6d46ae); box-shadow: 0 0 60px #ff93d633; }
:root[data-skin="arcade"] .hero-orbit { background: repeating-linear-gradient(90deg, #80f7ed66 0 2px, transparent 2px 50px), repeating-linear-gradient(0deg, #80f7ed66 0 2px, #1c1130 2px 50px); border-radius: 0; transform: perspective(400px) rotateX(35deg) rotateZ(-15deg); }

/* Picture house: printed programmes, double rules and marquee detailing. */
:root[data-skin="noir"] { --theme-heading-font: Georgia, 'Times New Roman', serif; --theme-display-spacing: -1px; --radius: 2px; --radius-sm: 1px; }
[data-skin="noir"] .wordmark { font-family: Georgia, serif; font-weight: 400; font-style: italic; }
[data-skin="noir"] .sidebar { border-right: 3px double #b6a891; }
[data-skin="noir"] .topbar { border-bottom: 3px double #b6a891; }
[data-skin="noir"] .nav-item, [data-skin="noir"] .btn, [data-skin="noir"] .input, [data-skin="noir"] .panel, [data-skin="noir"] .chip, [data-skin="noir"] .guide-scroll { border-radius: 1px; }
[data-skin="noir"] .section-head h2 { font-family: Georgia, serif; font-style: italic; font-weight: 400; }
[data-skin="noir"] .card-img { border: 5px solid #faf6ed; outline: 1px solid #b6a891; box-shadow: 4px 6px 10px #29251e15; }
[data-skin="noir"] .discovery-hero { border: 4px double #815b27; border-radius: 2px; }
[data-skin="noir"] .guide-header { border-bottom: 3px double #815b27; }
[data-skin="noir"] .guide-programme { border-radius: 0; }
:root[data-skin="noir"] .orbit-core { background: repeating-conic-gradient(#d2c5b2 0deg 28deg, #815b27 30deg 32deg, #eee8dc 34deg 60deg); border: 16px double #815b27; box-shadow: none; }
[data-skin="noir"][data-theme-effects="on"] .view { background-image: radial-gradient(#815b2710 .6px, transparent .6px); background-size: 5px 5px; }

/* Effects preference never changes programme art or video colour. */
[data-theme-effects="off"] :is(.orbit-core, .orbit-ring, .hero-orbit) { animation: none; box-shadow: none !important; }
[data-theme-effects="off"] :is(.wordmark, .eyebrow, .home-heading h2) { text-shadow: none; }
@media (max-width: 640px) {
  .theme-panel { padding: 16px; }
  .theme-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .theme-preview { height: 95px; padding: 8px; gap: 6px; }
  .preview-rail { width: 15px; padding-right: 4px; }
  .preview-title { font-size: 11px; }
  .theme-choice-description { font-size: 9px; }
  .theme-choice-name { font-size: 12px; }
  [data-theme-choice="lcars"] .preview-rail { width: 20px; }
  [data-skin="lcars"] .panel { border-left-width: 6px; }
  [data-skin="lcars"] .discovery-hero { border-left-width: 7px; }
  :root[data-skin] .feature-shade { background: linear-gradient(0deg, var(--surface), color-mix(in srgb, var(--surface) 80%, transparent) 45%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}