/* Neon dark: deep navy, cards with a glowing edge whose colour says what they are,
   white text, and one solid green button per screen.
   Edge colours: cyan = albums and songs, violet = artists, magenta = playlists and likes,
   amber = films, lime = progress and "done". */
:root {
  --bg: #010D16;
  --surface: #041726;
  --surface-raised: #0A2236;
  --divider: #12304A;
  --nav: #020508;

  --text: #FFFFFF;
  --text-2: #C9D4DC;
  --muted: #8FA3B3;

  --saving: #3BE37A;
  --primary: #067A34;
  --info: #1AD9D9;
  --caution: #F5D34F;
  --urgent-text: #FF6FA3;
  --nav-active: #45F804;

  --neon-albums: #22F0FF;
  --neon-playlists: #FF2ED1;
  --neon-progress: #39FF6A;
  --neon-films: #FFB020;
  --neon-artists: #B266FF;

  --player-h: 88px;
  --tabbar-h: 0px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 16px/22px var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

/* The neon edge. Set --c to the edge colour. */
.glow {
  border: 2px solid var(--c, var(--neon-albums));
  box-shadow:
    0 0 28px 4px color-mix(in srgb, var(--c, var(--neon-albums)) 70%, transparent),
    0 0 10px 1px color-mix(in srgb, var(--c, var(--neon-albums)) 95%, transparent),
    inset 0 0 16px 1px color-mix(in srgb, var(--c, var(--neon-albums)) 35%, transparent);
}

/* ---------- buttons and inputs ---------- */
.btn, .login button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 16px; border-radius: 12px;
  font: 700 16px/22px var(--font);
  background: var(--primary); color: #fff; border: 0;
}
.btn.secondary { background: transparent; color: var(--info); border: 1px solid var(--info); }
.btn.danger { background: transparent; color: var(--urgent-text); border: 1px solid var(--urgent-text); }
.btn:active, .login button:active, .play-fab:active { opacity: .85; }
.btn:disabled { opacity: .5; }

.login input, .field {
  width: 100%; min-height: 48px; padding: 0 12px; border-radius: 12px;
  background: var(--surface); color: var(--text); border: 1px solid var(--divider);
}
.login input:focus, .field:focus { border-color: var(--info); outline: none; }
::placeholder { color: var(--muted); }
.error { color: var(--urgent-text); min-height: 22px; margin: 0; }

/* ---------- login ---------- */
.login { display: grid; place-items: center; min-height: 100%; padding: 24px 16px; }
.login form {
  --c: var(--neon-albums);
  display: grid; gap: 12px; width: min(360px, 100%); text-align: center; justify-items: center;
  background: var(--surface); border-radius: 16px; padding: 32px 24px 16px;
}
.login h1 { margin: 0 0 16px; line-height: 0; }
.login-logo { width: 100%; height: auto; }
.login button { width: 100%; margin-top: 4px; }

/* ---------- layout ---------- */
.app {
  display: grid;
  grid-template-columns: 248px 1fr;
  grid-template-rows: 1fr auto;
  height: 100dvh;
}
.sidebar {
  grid-row: 1;
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 12px;
  background: var(--nav);
  border-right: 1px solid var(--divider);
  overflow-y: auto;
}
.sidebar a { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 12px; color: var(--muted); font-weight: 600; }
.sidebar a:hover { color: var(--text); }
.sidebar a svg { width: 22px; height: 22px; margin-right: 12px; flex: none; }
.sidebar a.active { color: var(--nav-active); background: var(--surface); }
.sidebar .brand { padding: 8px 8px 16px; margin-bottom: 8px; }
.sidebar .brand img { width: 100%; height: auto; display: block; }
.sidebar .brand:hover { background: none; }
.sidebar-foot { margin-top: auto; display: grid; gap: 4px; padding: 8px 12px; }
.link { color: var(--muted); text-align: left; min-height: 48px; }
.link:hover { color: var(--info); }

.view {
  grid-row: 1;
  overflow-y: auto;
  padding: 24px 32px 48px;
  outline: none;
  background: var(--bg);
}
.view h1 { font: 700 24px/30px var(--font); margin: 0 0 16px; }
.view h1.display { font: 800 34px/40px var(--font); }
.home-hello { margin: 0 0 4px; }
.home-hello h1.display { margin: 0; }
.home-quote { margin: 8px 0 0; max-width: 60ch; font: italic 400 16px/23px var(--font); color: var(--text-2); }
.home-quote span { display: inline-block; font-style: normal; font-size: 13px; color: var(--info); }
.home-quote span::before { content: "\2014\00a0"; }
body.tv .home-quote { font-size: 18px; line-height: 26px; }
.view h2 { font: 700 18px/24px var(--font); margin: 32px 0 12px; }
.tabbar { display: none; }

/* Home category tiles. In Neon they keep the layout and use simple inline-style cards;
   Inferno adds the hand-painted artwork and ember edge. */
.home-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; margin: 16px 0 8px; }
.home-tile { --c: var(--neon-albums); display: grid; grid-template-columns: 76px minmax(0, 1fr) 20px; align-items: center; gap: 14px; min-height: 104px; padding: 12px 16px; border: 1px solid var(--divider); border-radius: 16px; background: linear-gradient(110deg, var(--surface-raised), var(--surface)); }
.home-tile img { width: 76px; height: 76px; object-fit: contain; }
.home-tile-copy { min-width: 0; display: grid; gap: 5px; }
.home-tile-copy b { font-size: 19px; line-height: 24px; }
.home-tile-copy small { color: var(--text-2); font-size: 13px; line-height: 18px; }
.home-tile-chevron { color: var(--muted); font-size: 32px; line-height: 1; justify-self: end; }

/* ---------- cards ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 24px;
  padding: 8px 0;
}
/* Room for the glow, which a scroller would otherwise cut off. */
.row-scroll {
  display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 24px;
  overflow-x: auto; padding: 24px 20px; margin: -12px -20px 0; scrollbar-width: thin;
}
.card {
  --c: var(--neon-albums);
  display: grid; gap: 12px; align-content: start;
  background: var(--surface); padding: 12px; border-radius: 16px; min-width: 0;
}
.card:hover { background: var(--surface-raised); }
.card.round { --c: var(--neon-artists); }
.card.playlist { --c: var(--neon-playlists); }
.card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--surface-raised); display: block; }
.card.round img { border-radius: 50%; }
.card .t { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: -10px; }
.card .s { color: var(--text-2); font: 500 13px/18px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.health-card { --c: var(--neon-progress); min-width: 0; padding: 16px; border: 1px solid var(--divider); border-left: 4px solid var(--c); border-radius: 12px; background: var(--surface); overflow-wrap: anywhere; }
.health-card h2 { margin: 0 0 8px; font-size: 18px; }
.health-card p { margin: 5px 0; color: var(--text-2); }
.health-warn { --c: var(--caution); }
.health-bad { --c: var(--urgent-text); }
.health-unknown { --c: var(--muted); }
.health-error { color: var(--urgent-text) !important; }

/* Choice pills (Library sections, genres) */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--c, var(--info)); color: var(--c, var(--info)); font: 600 12px/16px var(--font);
}
.chip:hover { background: var(--c, var(--info)); color: var(--bg); }
.chip .count { color: var(--muted); }
button.chip { background: transparent; cursor: pointer; }
.chip.on { background: var(--c, var(--info)); color: var(--bg); }

/* Downloads page */
.dl-sum { color: var(--text-2); margin: 0 0 8px; }
.dl-note { color: var(--muted); font: 500 13px/18px var(--font); margin: 8px 0 0; }
.dl-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--divider); }
.dl-text { flex: 1; min-width: 0; }
.dl-text .t { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-text .s { color: var(--text-2); font: 500 13px/18px var(--font); }
.chip:hover .count { color: var(--bg); }

/* ---------- header for album/artist/playlist ---------- */
.hero { --c: var(--neon-albums); display: flex; gap: 24px; align-items: flex-end; margin: 8px 0 24px; }
.hero.round { --c: var(--neon-artists); }
.hero.playlist { --c: var(--neon-playlists); }
.hero img { width: 200px; height: 200px; object-fit: cover; border-radius: 16px; background: var(--surface); flex: none; }
.hero.round img { border-radius: 50%; }
.hero .kind { text-transform: uppercase; font: 600 12px/16px var(--font); letter-spacing: 1px; color: var(--muted); }
.view .hero h1 { font: 800 clamp(28px, 5vw, 48px)/1.1 var(--font); margin: 4px 0 8px; word-break: break-word; }
.hero .meta { color: var(--text-2); }
.hero .meta a:hover { color: var(--info); }
.actions { display: flex; align-items: center; gap: 12px; margin: 8px 0 16px; flex-wrap: wrap; }
.play-fab { width: 56px; height: 56px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; }
.play-fab svg { width: 28px; height: 28px; }

/* ---------- track list ---------- */
.tracks { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tracks td { padding: 4px 8px; height: 56px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tracks tr { cursor: pointer; }
.tracks tr:hover td { background: var(--surface); }
.tracks td:first-child { border-radius: 12px 0 0 12px; }
.tracks td:last-child { border-radius: 0 12px 12px 0; }
.tracks .n { width: 48px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.tracks .ti { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tracks .ti img { width: 40px; height: 40px; border-radius: 8px; flex: none; background: var(--surface-raised); }
.tracks .ti div { min-width: 0; }
.tracks .ti .a { color: var(--text-2); font: 500 13px/18px var(--font); overflow: hidden; text-overflow: ellipsis; }
.tracks .ti .a a:hover, .tracks .al a:hover { color: var(--info); }
.tracks .tt { overflow: hidden; text-overflow: ellipsis; }
.tracks .al { color: var(--text-2); width: 30%; }
.tracks .d { width: 64px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.tracks .x { width: 104px; text-align: right; }
.tracks .x button { vertical-align: middle; }
.tracks tr.playing .tt { color: var(--info); font-weight: 700; }
.tracks button.icon { opacity: .75; }
.tracks tr:hover button.icon { opacity: 1; }

.icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--muted); flex: none; }
.icon:hover { color: var(--text); }
.icon svg { width: 22px; height: 22px; }
.icon.on { color: var(--info); }
.icon.big { width: 48px; height: 48px; background: var(--text); color: var(--bg); }
.icon.big svg { width: 24px; height: 24px; }
.like.on { color: var(--neon-playlists); }

.search-box { position: sticky; top: -24px; padding: 4px 0 16px; background: var(--bg); z-index: 2; display: flex; gap: 8px; align-items: center; }
.search-box .mic { color: var(--info); border: 1px solid var(--info); }
.search-box .mic.on { background: var(--info); color: var(--bg); }
.search-box input {
  flex: 1; max-width: 480px; min-width: 0; min-height: 48px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--divider); background: var(--surface); color: var(--text);
}
.search-box input:focus { border-color: var(--info); outline: none; }
.empty { color: var(--muted); padding: 24px 0; }

/* ---------- player ---------- */
.player {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(300px, 2fr) minmax(100px, .7fr) minmax(180px, 1fr);
  align-items: center;
  gap: 16px;
  height: var(--player-h);
  padding: 0 16px;
  background: var(--nav);
  border-top: 1px solid var(--divider);
  position: relative;
}
.gain-control { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.gain-control select { max-width: 90px; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px; }
.playback-setting { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; }
.playback-setting select { max-width: 150px; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; }
.queue-row { display: flex; align-items: center; gap: 2px; }
.queue-row .item { flex: 1; min-width: 0; }
.queue-row .icon { width: 34px; height: 38px; flex: none; }
.np { display: flex; align-items: center; gap: 12px; min-width: 0; }
.np img { width: 56px; height: 56px; border-radius: 8px; background: var(--surface); flex: none; object-fit: cover; }
.np img:not([src]) { visibility: hidden; }
.np-text { min-width: 0; }
.np-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-artist { color: var(--text-2); font: 500 13px/18px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-quality { color: var(--muted); font: 400 11px/15px var(--font); white-space: normal; }
.np-more { display: inline-grid; width: 32px; height: 38px; flex: none; font-size: 22px; }
.np-back { display: none; }
.controls { display: grid; gap: 0; justify-items: center; }
.visualiser { display: block; min-width: 0; pointer-events: none; }
.visualiser[hidden] { display: none; }
.visualiser-strip { width: clamp(100px, 13vw, 190px); height: 34px; align-self: center; }
.visualiser-large { display: none; }
.buttons { display: flex; align-items: center; gap: 8px; }
.progress { display: flex; align-items: center; gap: 8px; width: 100%; font: 600 12px/16px var(--font); color: var(--muted); }
.progress span { width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
.progress input { flex: 1; }
.extras { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.extras input { width: 110px; }
.cast-banner {
  position: absolute; left: 0; right: 0; top: -28px; height: 28px;
  background: var(--info); color: var(--bg); font: 600 12px/16px var(--font);
  display: flex; align-items: center; justify-content: flex-end; padding: 0 16px;
}

input[type=range] { accent-color: var(--info); height: 4px; cursor: pointer; }

/* ---------- sheets / menus ---------- */
.sheet-backdrop { position: fixed; inset: 0; background: #010D16cc; z-index: 20; }
.sheet {
  --c: var(--neon-albums);
  position: fixed; z-index: 21; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px)); max-height: 80vh; overflow-y: auto;
  background: var(--surface); border-radius: 16px; padding: 8px;
}
.sheet h3 { margin: 12px 12px 4px; font: 700 18px/24px var(--font); }
.sheet .sub { color: var(--muted); margin: 0 12px 12px; font: 500 13px/18px var(--font); }
.sheet button.item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px; border-radius: 12px; text-align: left; color: var(--text-2); }
.sheet button.item:hover { background: var(--surface-raised); color: var(--text); }
.sheet button.item.on { color: var(--info); }
.sheet button.item small { color: var(--muted); display: block; font: 500 13px/18px var(--font); }
.sheet button.item svg { width: 22px; height: 22px; flex: none; }
.sheet .vol { display: flex; gap: 12px; align-items: center; padding: 8px 12px 12px; }
.sheet .vol input { flex: 1; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--player-h) + var(--tabbar-h) + 24px + var(--safe-b));
  transform: translateX(-50%); background: var(--surface-raised); color: var(--text);
  border: 1px solid var(--info); padding: 12px 16px;
  border-radius: 12px; font-weight: 600; z-index: 30; max-width: calc(100vw - 32px);
}

/* ---------- films ---------- */
.row-scroll.films { grid-auto-columns: 248px; }
.grid.films { grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); }
.fcard { --c: var(--neon-films); min-width: 0; display: grid; gap: 8px; align-content: start; }
.fcard:hover .fthumb img { transform: scale(1.04); }
.fcard .t { font-weight: 700; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcard .s { color: var(--text-2); font: 500 13px/18px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -8px; }
/* Folder posters are portrait and frames from the film are wide, so every image sits whole on a blurred copy of itself. */
.fthumb { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--surface); isolation: isolate; }
.fthumb::before { content: ''; position: absolute; inset: -20px; background: var(--img) center / cover; filter: blur(18px) brightness(.5); z-index: -1; }
.fthumb img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .2s; }
.fbar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #ffffff33; }
.fbar i { display: block; height: 100%; background: var(--neon-progress); }
.fbar.wide { position: static; width: min(320px, 100%); border-radius: 2px; margin: 12px 0 4px; overflow: hidden; }
.fwatched { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--saving); color: var(--bg); display: grid; place-items: center; }
.fwatched svg { width: 16px; height: 16px; }
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.shelf-head .more { color: var(--info); font: 700 13px/18px var(--font); white-space: nowrap; min-height: 48px; display: inline-flex; align-items: center; }
.mix-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-bottom: 24px; }
.mix-art { aspect-ratio: 1; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: 16px; background: var(--surface); }
.mix-art img { width: 100%; height: 100%; object-fit: cover; min-width: 0; }
.mix-hero { width: min(260px, 38vw); flex: none; }

.fhero { --c: var(--neon-films); display: flex; gap: 24px; align-items: flex-end; margin: 8px 0 24px; }
.fhero > .fthumb { width: 360px; flex: none; }
.fhero.big > .fthumb { width: min(520px, 45%); }
.fhero .kind { text-transform: uppercase; font: 600 12px/16px var(--font); letter-spacing: 1px; color: var(--muted); }
.fhero .kind a:hover, .fhero .meta a:hover { color: var(--info); }
.view .fhero h1 { font: 800 clamp(28px, 4.5vw, 44px)/1.1 var(--font); margin: 4px 0 8px; word-break: break-word; }
.fhero .meta { color: var(--text-2); }
.fhero .actions { margin-top: 16px; }
.rating { border: 1px solid var(--muted); border-radius: 8px; padding: 2px 8px; font: 600 12px/16px var(--font); color: var(--text-2); }

.episodes { display: grid; gap: 8px; }
.episode { --c: var(--neon-films); display: flex; align-items: center; gap: 16px; padding: 8px; border-radius: 16px; text-align: left; width: 100%; }
.episode:hover { background: var(--surface); }
.episode .fthumb { width: 184px; flex: none; border-width: 1px; box-shadow: 0 0 8px 0 color-mix(in srgb, var(--c) 50%, transparent); }
.episode .ep-text { min-width: 0; }
.episode .t { font-weight: 700; }
.episode .s { color: var(--text-2); font: 500 13px/18px var(--font); }

.fcast-banner {
  --c: var(--info);
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 12px 16px; margin: 8px 0 24px;
  border-radius: 16px; background: var(--surface); color: var(--text); text-align: left;
}
.fcast-banner svg { width: 22px; height: 22px; flex: none; color: var(--info); }
.fcast-banner .go { margin-left: auto; font-weight: 700; color: var(--info); }

/* full-screen player: the film stays on black */
.vplayer { position: fixed; inset: 0; z-index: 40; background: #000; display: grid; place-items: center; color: #fff; user-select: none; }
.vplayer video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.vplayer:not(.ui) { cursor: none; }
.vp-ui { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; opacity: 0; transition: opacity .25s; pointer-events: none;
  background: linear-gradient(#010D16cc, transparent 22%, transparent 70%, #010D16e6); }
.vplayer.ui .vp-ui { opacity: 1; pointer-events: auto; }
.vp-ui .icon { color: #fff; width: 48px; height: 48px; }
.vp-ui .icon svg { width: 26px; height: 26px; }
.vp-ui .icon.on { color: var(--info); }
.vp-ui .vp-cc { width: auto; min-width: 48px; padding: 0 10px; font: 700 13px/1 var(--font); border: 1px solid currentColor; border-radius: 8px; }
.vp-top { display: flex; align-items: center; gap: 8px; padding: max(12px, env(safe-area-inset-top)) 12px 12px; }
.vp-title { flex: 1; min-width: 0; font: 700 18px/24px var(--font); }
.vp-title > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-subt { color: var(--text-2); font: 500 13px/18px var(--font); }
.vp-mid { display: flex; align-items: center; justify-content: center; gap: 48px; }
.vp-mid .vp-big { width: 80px; height: 80px; background: #ffffff22; }
.vp-mid .vp-big svg { width: 40px; height: 40px; }
.vp-bottom { display: flex; align-items: center; gap: 12px; padding: 12px 24px max(16px, env(safe-area-inset-bottom)); font-variant-numeric: tabular-nums; font: 600 13px/18px var(--font); }
.vp-bottom input { flex: 1; }
.vp-spinner { position: absolute; width: 56px; height: 56px; border: 4px solid #ffffff33; border-top-color: var(--info); border-radius: 50%; animation: spin 0.9s linear infinite; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.vp-cast { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 16px; background: var(--bg); }
.vp-cast img { --c: var(--neon-films); width: min(480px, 80vw); aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 16px; }
.vp-cast p { margin: 0; font-weight: 700; color: var(--info); }
.vp-next {
  --c: var(--neon-films);
  position: absolute; right: 24px; bottom: 96px; background: var(--surface); border-radius: 16px; padding: 16px;
  display: grid; gap: 12px; max-width: calc(100vw - 48px);
}
.vp-next .row { display: flex; gap: 12px; flex-wrap: wrap; }
body.vp-open { overflow: hidden; }

/* ---------- mobile ---------- */
.tabbar svg { width: 24px; height: 24px; }
@media (max-width: 760px) {
  :root { --player-h: 64px; --tabbar-h: 64px; }
  .app { grid-template-columns: 1fr; grid-template-rows: 1fr auto auto; }
  .sidebar { display: none; }
  .view { padding: 16px 16px 24px; }
  .view h1.display { font-size: 30px; line-height: 36px; }
  .player {
    --c: var(--neon-albums);
    grid-row: 2;
    grid-template-columns: 1fr auto;
    margin: 0 12px 12px; padding: 0 8px; border-radius: 16px; background: var(--surface);
    border: 2px solid var(--c);
    box-shadow: 0 0 20px 3px color-mix(in srgb, var(--c) 65%, transparent), 0 0 8px 0 color-mix(in srgb, var(--c) 90%, transparent), inset 0 0 14px 1px color-mix(in srgb, var(--c) 30%, transparent);
    height: var(--player-h);
  }
  .np img { width: 44px; height: 44px; }
  .np .like { display: none; }
  .np { margin-right: 56px; } /* leave room for the cast button */
  .np-more { display: none; }
  body.np-open .np { margin-right: 0; }
  body.np-open .np-like { display: inline-grid; }
  .controls { grid-column: 2; grid-row: 1; }
  .visualiser-strip { grid-column: 3; grid-row: 1; width: min(100%, 145px); height: 28px; justify-self: end; }
  .controls .progress, #shuffle, #repeat, #prev { display: none; }
  .extras { position: absolute; right: 112px; top: 50%; transform: translateY(-50%); }
  .extras input, #queue-btn, .gain-control { display: none; }
  .visualiser-strip { display: none; }
  .cast-banner { top: auto; bottom: 0; height: 3px; padding: 0; font-size: 0; border-radius: 0 0 14px 14px; }
  .player::after {
    content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--info);
    transform-origin: left; transform: scaleX(var(--pct, 0));
  }
  .tabbar {
    grid-row: 3; display: flex; justify-content: space-around; align-items: stretch;
    height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b);
    background: var(--nav); border-top: 1px solid var(--divider);
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 56px; color: var(--muted); font: 600 12px/16px var(--font);
  }
  .tabbar a.active { color: var(--nav-active); }
  .hero { flex-direction: column; align-items: flex-start; }
  .hero img { width: 184px; height: 184px; align-self: center; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .row-scroll { grid-auto-columns: 144px; gap: 16px; }
  .tracks .al, .tracks .n { display: none; }
  .row-scroll.films { grid-auto-columns: 216px; }
  .grid.films { grid-template-columns: 1fr; }
  .fhero, .fhero.big { flex-direction: column; align-items: stretch; }
  .fhero > .fthumb, .fhero.big > .fthumb { width: 100%; }
  .episode .fthumb { width: 128px; }
  .vp-mid { gap: 24px; }
  .vp-next { left: 16px; right: 16px; bottom: 80px; }
  .tracks .x { width: 96px; }
  .tracks td { padding: 4px; }
  .search-box { top: -16px; }

  /* full-screen now-playing on mobile */
  body.np-open .player {
    position: fixed; inset: 0; margin: 0; border-radius: 0; border: 0; box-shadow: none; height: auto; z-index: 15;
    grid-template-columns: 1fr; grid-template-rows: 1fr auto auto; padding: 24px 24px calc(24px + var(--safe-b));
    background: radial-gradient(120% 60% at 50% 0, #0A2236, var(--bg) 70%);
  }
  body.np-open .np { flex-direction: column; align-items: stretch; gap: 24px; }
  body.np-open .np img {
    width: 100%; height: auto; aspect-ratio: 1; max-width: 420px; align-self: center; border-radius: 16px;
    border: 2px solid var(--neon-albums);
    box-shadow: 0 0 32px 4px color-mix(in srgb, var(--neon-albums) 70%, transparent), 0 0 10px 1px color-mix(in srgb, var(--neon-albums) 95%, transparent);
  }
  body.np-open .np-title { font: 700 24px/30px var(--font); }
  body.np-open .np-artist { font: 400 16px/22px var(--font); }
  body.np-open .np-quality { font-size: 13px; }
  body.np-open .controls { grid-column: 1; grid-row: 2; }
  body.np-open .controls .progress, body.np-open #shuffle, body.np-open #repeat, body.np-open #prev { display: flex; }
  body.np-open .buttons { gap: 16px; }
  body.np-open .icon.big { width: 64px; height: 64px; background: var(--primary); color: #fff; }
  body.np-open .icon.big svg { width: 30px; height: 30px; }
  body.np-open .extras { position: static; transform: none; grid-row: 3; justify-content: space-between; }
  body.np-open #queue-btn { display: inline-grid; }
  body.np-open .gain-control { display: flex; }
  body.np-open .player::after { display: none; }
  body.np-open .cast-banner { position: static; height: auto; padding: 8px; font-size: 13px; border-radius: 12px; justify-content: center; }
}

/* ---------- kids mode ---------- */
body.kids .adult-only { display: none !important; }
body.kids::after {
  content: 'Kids mode'; position: fixed; top: 8px; right: 12px; z-index: 35; pointer-events: none;
  padding: 2px 8px; border-radius: 8px; background: var(--saving); color: var(--bg); font: 600 12px/16px var(--font);
}
.pin-row { display: flex; gap: 12px; padding: 0 12px; }
.pin-row .field { flex: 1; letter-spacing: 8px; font-size: 20px; }
.sheet .error { padding: 4px 12px 8px; }

/* ---------- TV: remote control ---------- */
body.tv .app { padding: 12px 24px 8px; } /* clear of TV overscan */
body.tv a:focus, body.tv button:focus, body.tv input:focus, body.tv tr:focus, body.tv [tabindex="0"]:focus {
  outline: 3px solid #fff; outline-offset: 3px;
}
body.tv .card, body.tv .fcard { transition: transform .12s; }
body.tv .card:focus, body.tv .fcard:focus { transform: scale(1.07); outline: none; }
body.tv .card:focus { box-shadow: 0 0 0 3px #fff, 0 0 32px 6px color-mix(in srgb, var(--c) 80%, transparent); }
body.tv .home-tile { transition: transform .12s; }
body.tv .home-tile:focus { transform: scale(1.045); outline: none; }
body.tv .fcard:focus .fthumb { box-shadow: 0 0 0 3px #fff, 0 0 32px 6px color-mix(in srgb, var(--c) 80%, transparent); }
body.tv .tracks tr:focus td { background: var(--surface-raised); }
body.tv .sidebar a:focus { color: var(--text); background: var(--surface-raised); outline: none; box-shadow: inset 0 0 0 2px #fff; }
body.tv #volume, body.tv .extras input { display: none; }

/* Expanded Now Playing for desktop and TV. The existing player controls stay live. */
body.np-open .app { position: relative; }
body.np-open .player {
  position: fixed; inset: 0; z-index: 30; height: auto; grid-template-columns: minmax(0, 1fr) minmax(290px, 32%);
  grid-template-rows: auto minmax(0, 1fr) auto; gap: 20px 32px; padding: 30px clamp(28px, 5vw, 80px);
  background: radial-gradient(110% 90% at 25% 35%, color-mix(in srgb, var(--surface-raised) 75%, transparent), var(--bg) 75%);
}
body.np-open .np-back { display: inline-flex; grid-column: 1; grid-row: 1; align-items: center; gap: 10px; justify-self: start; min-height: 44px; color: var(--text-2); }
body.np-open .np { grid-column: 1; grid-row: 2; min-height: 0; align-self: center; display: grid; grid-template-columns: minmax(180px, 42%) minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 24px clamp(24px, 4vw, 64px); }
body.np-open .np img { grid-column: 1; grid-row: 1 / span 2; width: 100%; height: auto; aspect-ratio: 1; max-height: min(56vh, 580px); object-fit: cover; border-radius: 12px; }
body.np-open .visualiser-large { display: block; grid-column: 1; grid-row: 3; width: 100%; height: clamp(54px, 10vh, 100px); align-self: start; }
body.np-open .np-text { grid-column: 2; align-self: end; }
body.np-open .np-title { font-size: clamp(28px, 4vw, 54px); line-height: 1.08; white-space: normal; }
body.np-open .np-artist { font-size: clamp(18px, 2vw, 28px); line-height: 1.3; margin-top: 8px; white-space: normal; }
body.np-open .np-artist a:first-child { color: var(--text); }
body.np-open .np-artist a:last-child { color: var(--muted); }
body.np-open .np-quality { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; font-size: 14px; }
.quality-pill, .quality-hires, .quality-converted { display: inline-flex; align-items: center; min-height: 30px; padding: 3px 10px; border: 1px solid var(--muted); border-radius: 7px; color: var(--text); font-size: 13px; line-height: 18px; }
.quality-pill.format { border-color: var(--info); color: var(--info); font-weight: 700; }
.quality-hires { border-color: #FFD84A; color: #FFD84A; font-weight: 800; }
.quality-converted { border-color: var(--divider); color: var(--muted); }
body.np-open .np-like { grid-column: 2; align-self: start; justify-self: start; display: inline-grid; }
body.np-open .np-more { display: inline-grid; grid-column: 2; align-self: start; justify-self: start; margin-left: 52px; }
body.np-open .controls { grid-column: 1; grid-row: 3; width: min(100%, 920px); justify-self: center; }
body.np-open .controls .progress { display: flex; }
body.np-open .buttons { gap: clamp(14px, 4vw, 54px); margin: 8px 0 14px; }
body.np-open .icon.big { width: 76px; height: 76px; }
body.np-open .icon.big svg { width: 34px; height: 34px; }
body.np-open .extras { position: absolute; top: 24px; right: 28px; }
body.np-open .visualiser-strip { display: none; }
body.np-open #queue-btn { display: none; }
body.np-open .np-queue { display: flex; grid-column: 2; grid-row: 2 / span 2; align-self: stretch; min-height: 0; flex-direction: column; border: 1px solid var(--divider); border-radius: 18px; background: color-mix(in srgb, var(--nav) 86%, transparent); overflow: hidden; }
.np-queue-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 20px 20px 14px; border-bottom: 1px solid var(--divider); }
.np-queue-head h2 { margin: 0; font-size: 20px; }
.np-queue-head span { color: var(--muted); font-size: 13px; }
.np-queue-list { flex: 1; min-height: 0; overflow: auto; padding: 6px 12px 12px; }
.np-queue-row { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--divider); }
.np-queue-track { display: flex; flex: 1; min-width: 0; align-items: center; gap: 12px; padding: 10px 4px; text-align: left; border-radius: 10px; }
.np-queue-track.on { color: var(--nav-active); }
.np-queue-track img { width: 48px; height: 48px; flex: none; border-radius: 6px; object-fit: cover; background: var(--surface); }
.np-queue-track span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-queue-track small { display: block; color: var(--muted); font-size: 13px; }
.np-queue-track b { color: var(--muted); font-size: 12px; font-weight: 500; }
.np-queue-remove { flex: none; }
body.np-open .player::after { display: none; }
body.np-open .player::before { display: none; }
body.np-open .cast-banner { position: absolute; left: 0; right: 0; top: auto; bottom: 100%; }
body[data-theme="inferno"].np-open .player { background: radial-gradient(100% 90% at 24% 35%, #2A0805, #080B10 75%); }
body[data-theme="inferno"].np-open .np img { border: 28px solid transparent; border-image: url('/themes/inferno/flame-frame.png') 56 round; border-radius: 38px; filter: drop-shadow(0 0 14px rgba(var(--ember), .55)); }
body[data-theme="inferno"].np-open .np-artist a:first-child { color: #FF5538; }
body[data-theme="inferno"].np-open .icon.big { position: relative; }
body[data-theme="inferno"].np-open .icon.big::before { content: ''; position: absolute; inset: -58%; z-index: -1; pointer-events: none; background: url('/themes/inferno/flame-ring.png') center / contain no-repeat; }
@media (max-width: 760px) {
  body.np-open .player { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 20px calc(16px + var(--safe-b)); }
  body.np-open .np-back { grid-row: 1; }
  body.np-open .np { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  body.np-open .np img { width: min(100%, 42vh); max-width: 420px; max-height: none; align-self: center; }
  body.np-open .np-title { font-size: 24px; line-height: 30px; }
  body.np-open .np-artist { font-size: 16px; }
  body.np-open .np-quality { margin-top: 8px; font-size: 12px; }
  body.np-open .quality-pill, body.np-open .quality-hires, body.np-open .quality-converted { min-height: 26px; padding: 2px 7px; font-size: 11px; }
  body.np-open .np-like { position: absolute; right: 24px; bottom: calc(16px + var(--safe-b)); }
  body.np-open .np-more { display: none; }
  body.np-open .visualiser-large { height: 48px; flex: none; }
  body.np-open .controls { grid-column: 1; grid-row: 3; width: 100%; }
  body.np-open .controls .progress, body.np-open #shuffle, body.np-open #repeat, body.np-open #prev { display: flex; }
  body.np-open .buttons { gap: 16px; margin: 0 0 8px; }
  body.np-open .icon.big { width: 64px; height: 64px; }
  body.np-open .icon.big svg { width: 30px; height: 30px; }
  body.np-open .extras { position: static; grid-column: 1; grid-row: 4; justify-content: flex-start; }
  body.np-open #queue-btn { display: inline-grid; }
  body.np-open .gain-control { display: flex; }
  body.np-open .np-queue { display: none; }
}
@media (min-width: 761px) and (max-width: 1200px) {
  .player { grid-template-columns: minmax(180px, 1fr) minmax(300px, 2fr) minmax(180px, 1fr); }
  .visualiser-strip { display: none; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .visualiser-strip { display: none; }
}
@media (min-width: 761px) and (max-height: 600px) {
  body.np-open .player { padding-top: 12px; padding-bottom: 12px; gap: 8px 24px; }
  body.np-open .np img { max-height: 46vh; }
  body.np-open .buttons { margin: 0 0 4px; }
  body.np-open .icon.big { width: 60px; height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .fcard:hover .fthumb img { transform: none; }
  .vp-spinner { animation-duration: 3s; }
}

/* ---------- radio ---------- */
.radio-card .radio-play { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; }

/* ---------- podcasts ---------- */
.pcard { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px; border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; }
.pcard img, .phead img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; background: var(--surface-raised); }
.pcard span { display: grid; gap: 6px; min-width: 0; }
.pcard small, .prow small { display: block; color: var(--muted); margin-top: 5px; }
.phead { display: flex; align-items: flex-start; gap: 20px; margin: 12px 0 24px; }
.phead img { width: min(180px, 32vw); height: auto; aspect-ratio: 1; }
.phead > div { min-width: 0; }
.plist { display: grid; gap: 8px; }
.prow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; background: var(--surface); border-radius: 12px; }
.prow > div:first-child { min-width: 0; }
.prow p { color: var(--muted); margin: 8px 0 0; }
.prow .actions { flex: none; }
@media (max-width: 600px) { .phead { display: block; } .phead img { width: 112px; margin-bottom: 10px; } .prow { align-items: flex-start; flex-direction: column; } .prow .actions { width: 100%; } }

/* ---------- profiles ---------- */
body:not(.owner) .owner-only { display: none !important; }
.profile-label { color: var(--muted); font: 500 13px/18px var(--font); padding: 8px 0 0; }
.profile-label b { color: var(--text-2); }
.avatar {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface-raised); color: var(--c, var(--info)); border: 2px solid var(--c, var(--info));
  font: 700 18px/1 var(--font);
}
.who-title { margin: 0; color: var(--text-2); font-weight: 600; }
.who { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.login .who-tile {
  display: grid; justify-items: center; gap: 4px; width: auto; min-width: 80px; min-height: 48px; margin: 0;
  padding: 8px; background: transparent; color: var(--text-2); border-radius: 12px; font-weight: 600;
}
.login .who-tile:hover, .login .who-tile:focus { background: var(--surface-raised); color: var(--text); }
.profs { display: grid; gap: 16px; margin: 16px 0 8px; }
.prof { background: var(--surface); border-radius: 16px; padding: 16px; }
.prof-head { display: flex; align-items: center; gap: 12px; }
.prof h4 { margin: 16px 0 8px; color: var(--muted); font: 600 13px/18px var(--font); }
.prof .actions { margin: 16px 0 0; }
.add-prof { display: grid; gap: 12px; max-width: 420px; }
.app-pass { margin: 8px 12px 16px; padding: 12px; border-radius: 12px; background: var(--surface-raised); color: var(--neon-progress); font: 700 20px/28px ui-monospace, monospace; letter-spacing: 1px; text-align: center; word-break: break-all; user-select: all; }
.pin-row .field.text { letter-spacing: normal; font-size: 16px; min-width: 0; }

/* Sheets opened from the film player (TV picker, "Take over?") show above it. */
body.vp-open .sheet-backdrop { z-index: 41; }
body.vp-open .sheet { z-index: 42; }

/* ---------- Inferno theme (D3): charcoal, ember orange and gold, the skull artwork ----------
   Chosen per person (Library → Look). Neon stays the default for everyone else.
   Artwork in web/themes/inferno/ (made by Codex from the brief in docs/brand). */
.theme-banner { display: none; }
body[data-theme="inferno"] {
  --bg: #080B10;
  /* Fiery red, as in the ChatGPT concepts (docs/Universal-Media-Planning/design), gold for highlights */
  --surface: #15161A;
  --surface-raised: #221A1A;
  --divider: #33282A;
  --nav: #05070A;
  --text: #FFFFFF;
  --text-2: #EBDCD6;
  --muted: #A8968F;
  --saving: #FFB347;
  --primary: #D4210F;
  --info: #FF3B1F;
  --caution: #FFC861;
  --nav-active: #FF4A24;
  --neon-albums: #FF3B1F;
  --neon-playlists: #FF1E3C;
  --neon-progress: #FF4A24;
  --neon-films: #FF7A2A;
  --neon-artists: #FF5A1F;
  --ember: 255, 48, 24; /* the glow colour, as r, g, b for rgba() */
  background: #080B10 url('/themes/inferno/background.jpg') center top / 1024px auto repeat;
}
body[data-theme="inferno"] .sidebar,
body[data-theme="inferno"] .player,
body[data-theme="inferno"] .tabbar { background-color: rgba(5, 7, 10, 0.88); backdrop-filter: blur(6px); }
body[data-theme="inferno"] .theme-banner {
  /* The whole skull fits: the picture is sized to the banner's height, black fills the left. */
  display: block; height: clamp(130px, 22vw, 220px); margin: -8px 0 4px; border-radius: 16px;
  background: #000 url('/themes/inferno/banner.jpg') right center / auto 100% no-repeat;
  box-shadow: 0 0 28px 2px rgba(var(--ember), 0.4);
}
/* The page you're on: a dark-red pill with a neon edge (Home and Music in the concepts). */
body[data-theme="inferno"] .sidebar a.active {
  color: #fff; background: linear-gradient(90deg, rgba(150, 18, 10, 0.6), rgba(55, 8, 5, 0.6));
  box-shadow: inset 0 0 0 2px var(--nav-active), inset 0 0 14px 2px rgba(var(--ember), 0.35), 0 0 14px 2px rgba(var(--ember), 0.55);
}
body[data-theme="inferno"].tv .sidebar a:focus { color: #fff; background: linear-gradient(90deg, rgba(150, 18, 10, 0.6), rgba(55, 8, 5, 0.6)); }
body[data-theme="inferno"] .sidebar a.active svg { color: var(--nav-active); filter: drop-shadow(0 0 4px rgba(var(--ember), 0.8)); }
body[data-theme="inferno"] .tabbar a.active svg { filter: drop-shadow(0 0 4px rgba(var(--ember), 0.8)); }
/* Play button: black centre, glowing red ring (the concepts' pause button). */
body[data-theme="inferno"] .icon.big {
  background: radial-gradient(circle, #1a0604 55%, #3a0805); color: #fff;
  box-shadow: inset 0 0 0 3px #FF3B1F, 0 0 16px 3px rgba(var(--ember), 0.7), inset 0 0 10px 2px rgba(var(--ember), 0.6);
}
/* Now Playing cover on a phone: flames all round it, with a neon edge. */
@media (max-width: 760px) {
  body[data-theme="inferno"].np-open .np img {
    border: 34px solid transparent; border-image: url('/themes/inferno/flame-frame.png') 56 round;
    max-width: 488px; border-radius: 48px; box-shadow: none; background: transparent;
    outline: 2px solid var(--neon-albums); outline-offset: -35px;
    filter: drop-shadow(0 0 16px rgba(var(--ember), 0.55)) hue-rotate(-4deg) saturate(1.15);
  }
  body[data-theme="inferno"].np-open .player { background: radial-gradient(120% 60% at 50% 0, #2A0805, var(--bg) 70%); }
  body[data-theme="inferno"].np-open .player::before { display: none; }
}
/* Home greeting and quote: high up in the banner's dark left side, beside the skull. */
body[data-theme="inferno"] .home-head { position: relative; }
body[data-theme="inferno"] .home-hello {
  position: absolute; left: clamp(16px, 3vw, 32px); top: clamp(14px, 2.6vw, 28px); max-width: min(48%, 520px);
  text-shadow: 0 2px 12px #000, 0 0 2px #000;
}
body[data-theme="inferno"] .home-quote { color: #F3E3DC; }
body[data-theme="inferno"] .home-quote span { color: #FF8A5C; text-shadow: 0 0 8px rgba(var(--ember), 0.6); }
@media (max-width: 760px) {
  body[data-theme="inferno"] .home-hello { position: static; max-width: none; margin-top: 10px; }
}
body[data-theme="inferno"] .login {
  background: #080B10 url('/themes/inferno/login.jpg') center top / cover no-repeat;
  place-items: end center; padding-bottom: max(28px, 5vh);
}
@media (min-width: 900px) {
  body[data-theme="inferno"] .login { background-image: url('/themes/inferno/hero.jpg'); background-size: contain; background-position: center; place-items: center end; padding-right: 8vw; }
}
body[data-theme="inferno"] .login form { background: rgba(19, 25, 35, 0.86); backdrop-filter: blur(8px); }
/* Flames along the top of the player bar: a gentle flicker, off for reduced motion. */
body[data-theme="inferno"]:not(.np-open) .player { position: relative; }
body[data-theme="inferno"] .player::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 56px; pointer-events: none;
  /* flames.png: flames only (no skull) on a see-through background, and it tiles without a seam.
     (A blend mode can't be used: the player's backdrop blur stops it reaching the page, which
     left a dark band.) */
  background: url('/themes/inferno/flames.png') left bottom / auto 100% repeat-x; opacity: 0.9;
}
@media (prefers-reduced-motion: no-preference) {
  body[data-theme="inferno"] .player::before { animation: ember-flicker 3.2s ease-in-out infinite alternate; }
}
@keyframes ember-flicker { from { opacity: 0.75; } to { opacity: 1; } }

/* Flames all the way round whatever is selected (remote, keyboard). One ring that follows the
   selection (app.js, flame ring). flame-frame.png has flames pointing outward on all four sides;
   the #inferno-flame filter in index.html keeps them moving. */
#flame-ring { position: fixed; z-index: 60; pointer-events: none; display: none; }
#flame-ring.on { display: block; }
#flame-ring::before {
  /* the neon edge, right on the selected item's edge */
  content: ''; position: absolute; inset: 5px; border-radius: inherit;
  box-shadow: 0 0 0 2px #FF4A24, 0 0 18px 5px rgba(255, 48, 24, 0.7), inset 0 0 14px 3px rgba(255, 48, 24, 0.4);
}
#flame-ring i {
  position: absolute; inset: -16px;
  border: 22px solid transparent; border-image: url('/themes/inferno/flame-frame.png') 56 round;
  filter: url(#inferno-flame) hue-rotate(-4deg) saturate(1.15);
}
@media (prefers-reduced-motion: no-preference) {
  #flame-ring::before, #flame-ring i { animation: ember-flicker 0.9s ease-in-out infinite alternate; }
}
/* The ring replaces the white outline and white ring in Inferno. */
body.flame-focus[data-theme="inferno"] :focus:not(.vplayer *) { outline: none !important; }
body.flame-focus[data-theme="inferno"].tv .sidebar a:focus,
body.flame-focus[data-theme="inferno"].tv .card:focus,
body.flame-focus[data-theme="inferno"].tv .fcard:focus .fthumb { box-shadow: none; }
body.flame-focus[data-theme="inferno"].tv .home-tile:focus { box-shadow: none; }
.theme-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- sound (equaliser) ---------- */
.sound-studio { --sound-accent: var(--neon-albums); --sound-fire: #ff4b26; display: grid; gap: 18px; max-width: 1320px; padding: 4px 0 24px; }
.sound-head { display: flex; align-items: center; gap: 16px; }
.sound-head h1 { margin: 0 !important; font-size: clamp(26px, 3vw, 36px) !important; line-height: 1.1 !important; }
.sound-head p { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.sound-wave { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; color: var(--sound-accent); background: color-mix(in srgb, var(--sound-accent) 10%, var(--surface)); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--sound-accent) 70%, transparent)); }
.sound-wave svg { width: 38px; height: 32px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.sound-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 250px); gap: 14px; align-items: stretch; }
.eq-panel, .preset-panel, .eq-visual, .sound-switch { border: 1px solid var(--divider); border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 75%, transparent), var(--surface)); }
.eq-panel { min-width: 0; position: relative; padding: 16px 14px 12px 46px; height: 300px; overflow: hidden; }
.eq-scale { position: absolute; inset: 25px 12px 49px 6px; pointer-events: none; }
.eq-gridline { position: absolute; left: 0; right: 0; top: var(--grid-y); height: 1px; background: color-mix(in srgb, var(--text-2) 15%, transparent); }
.eq-gridline:first-child { background: color-mix(in srgb, var(--sound-accent) 38%, transparent); }
.eq-gridline span { position: absolute; right: calc(100% + 7px); top: -9px; width: 28px; text-align: right; color: var(--muted); font: 600 12px/18px var(--font); }
.eq-sliders { position: relative; z-index: 1; height: 100%; display: flex; justify-content: space-around; gap: clamp(2px, 1vw, 20px); }
.eq-band { flex: 1; min-width: 30px; display: grid; grid-template-rows: 25px 1fr 34px; justify-items: center; align-items: center; color: var(--text-2); font: 600 13px/18px var(--font); }
.eq-value { color: var(--text); font-size: clamp(12px, 1.3vw, 16px); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eq-frequency { color: var(--text-2); white-space: nowrap; font-size: clamp(11px, 1.2vw, 14px); }
.eq-track { position: relative; width: 100%; max-width: 34px; height: 100%; display: block; background: linear-gradient(to bottom, transparent 49.4%, color-mix(in srgb, var(--text) 72%, transparent) 49.4%, color-mix(in srgb, var(--text) 72%, transparent) 50.6%, transparent 50.6%); }
.eq-track::before { content: ''; position: absolute; inset: 4px 50%; width: 5px; transform: translateX(-50%); border-radius: 6px; background: color-mix(in srgb, var(--text-2) 21%, var(--surface)); box-shadow: inset 0 0 3px #000; }
.eq-track input { appearance: none; -webkit-appearance: none; position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ns-resize; writing-mode: vertical-lr; direction: rtl; }
.eq-knob { position: absolute; z-index: 1; left: 50%; top: var(--knob-y, 50%); transform: translate(-50%, -50%); width: 25px; height: 25px; border-radius: 50%; background: linear-gradient(135deg, #fff 0%, #9ea5ad 24%, #f8f8f8 44%, #727982 68%, #e5e8eb 100%); border: 1px solid #fafafa; box-shadow: 0 1px 4px #000, 0 0 5px color-mix(in srgb, var(--sound-fire) 70%, transparent); pointer-events: none; }
.eq-band input:focus-visible + .eq-knob { outline: 3px solid #fff; outline-offset: 3px; }
.eq-track::after { content: ''; position: absolute; left: 50%; width: 5px; top: var(--fill-top, auto); bottom: var(--fill-bottom, 50%); height: var(--fill-h, 0%); transform: translateX(-50%); border-radius: 6px; background: linear-gradient(0deg, #ff851f, var(--sound-fire) 55%, #ff3329); box-shadow: 0 0 10px color-mix(in srgb, var(--sound-fire) 85%, transparent); pointer-events: none; }
.eq-band:has(input) .eq-track:focus-within { filter: drop-shadow(0 0 4px var(--sound-fire)); }
.preset-panel { padding: 14px; display: flex; flex-direction: column; min-width: 0; }
.preset-panel h2 { margin: 0 0 8px !important; font-size: 18px !important; display: flex; align-items: center; gap: 8px; }
.preset-panel h2 span { color: var(--sound-fire); font-size: 25px; }
.preset-list { display: grid; gap: 4px; }
.sound-preset { display: grid; grid-template-columns: 30px 1fr 22px; align-items: center; gap: 8px; min-height: 38px; padding: 5px 8px; border-radius: 9px; color: var(--text-2); text-align: left; font-size: 14px; border: 1px solid transparent; }
.preset-icon { text-align: center; color: var(--muted); font-size: 19px; }
.sound-preset.selected { color: var(--text); border-color: var(--sound-fire); background: color-mix(in srgb, var(--sound-fire) 12%, var(--surface)); box-shadow: 0 0 14px color-mix(in srgb, var(--sound-fire) 38%, transparent), inset 0 0 12px color-mix(in srgb, var(--sound-fire) 12%, transparent); }
.sound-preset.selected .preset-icon, .preset-mark { color: var(--sound-fire); }
.preset-description { margin: auto 0 0; padding: 9px 2px 0; color: var(--muted); font-size: 12px; }
.eq-visual { min-height: 98px; padding: 10px 12px 8px; overflow: hidden; }
.eq-visual-bars { height: 56px; display: flex; align-items: end; gap: 3px; border-bottom: 1px solid var(--divider); }
.eq-visual-bars i { flex: 1; min-width: 2px; height: var(--bar-h); border-radius: 3px 3px 0 0; background: linear-gradient(to top, var(--sound-fire), #ff9a26); box-shadow: 0 0 9px color-mix(in srgb, var(--sound-fire) 68%, transparent); opacity: .78; }
.eq-visual p { margin: 5px 0 0; color: var(--text-2); font-size: 12px; }
.eq-visual p span { color: var(--muted); }
.sound-switches { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.sound-switch { min-height: 68px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-align: left; }
.switch-icon { color: var(--sound-fire); font-size: 26px; }
.sound-switch > span:nth-child(2) { display: grid; gap: 2px; flex: 1; }
.sound-switch small { color: var(--muted); font-size: 12px; }
.switch-track { width: 42px; height: 24px; border-radius: 20px; padding: 3px; background: var(--surface-raised); border: 1px solid var(--divider); }
.switch-track i { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .14s; }
.sound-switch.on .switch-track { background: var(--sound-fire); border-color: var(--sound-fire); box-shadow: 0 0 12px color-mix(in srgb, var(--sound-fire) 65%, transparent); }
.sound-switch.on .switch-track i { background: #fff; transform: translateX(18px); }
.sound-unavailable { padding: 20px; border-radius: 14px; background: var(--surface); }
body[data-theme="inferno"] .sound-studio { --sound-fire: #ff3b20; }
body[data-theme="inferno"] .sound-head h1 { text-shadow: 0 0 16px rgba(255, 60, 28, .38); }
body[data-theme="inferno"] .eq-panel, body[data-theme="inferno"] .preset-panel, body[data-theme="inferno"] .eq-visual, body[data-theme="inferno"] .sound-switch { border-color: rgba(255, 75, 38, .38); background-color: #0b0809; box-shadow: inset 0 0 20px rgba(255, 58, 30, .045); }
body.tv .sound-studio { gap: 12px; }
body.tv .eq-panel { height: 276px; }
body.tv .sound-preset { min-height: 36px; font-size: 15px; }
body.tv .sound-switch { min-height: 62px; font-size: 16px; }
body.tv .sound-preset:focus, body.tv .sound-switch:focus { outline: 3px solid #fff; outline-offset: 2px; }

.advanced-search { margin: 14px 0; padding: 12px 14px; border: 1px solid var(--divider); border-radius: 12px; background: var(--surface); }
.advanced-search summary { color: var(--info); font-weight: 700; cursor: pointer; padding: 4px; }
.advanced-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding-top: 12px; }
.advanced-filters label { display: grid; gap: 5px; color: var(--muted); font-size: 13px; }
.advanced-filters input, .advanced-filters select { width: 100%; min-height: 40px; border: 1px solid var(--divider); border-radius: 8px; background: var(--surface-raised); color: var(--text); padding: 7px 9px; }
.advanced-filters .filter-check { display: flex; align-items: center; gap: 8px; color: var(--text); }
.advanced-filters .filter-check input { width: 20px; min-height: 20px; accent-color: var(--primary); }
body.tv .advanced-search summary, body.tv .advanced-filters input, body.tv .advanced-filters select { min-height: 48px; font-size: 18px; }
body.tv .advanced-search:focus-within { outline: 2px solid var(--info); outline-offset: 2px; }
body[data-theme="inferno"] .advanced-search { border-color: rgba(var(--ember), .42); }
body[data-theme="inferno"] .advanced-search summary { color: #FF8A5C; }
@media (max-width: 420px) { .advanced-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .advanced-search { padding: 10px; } }
@media (max-width: 650px) {
  .sound-studio { gap: 14px; }
  .sound-head { gap: 11px; }
  .sound-wave { width: 42px; height: 42px; }
  .sound-head p { font-size: 13px; }
  .sound-workspace { grid-template-columns: 1fr; gap: 10px; }
  .eq-panel { height: 278px; padding-left: 39px; padding-right: 8px; }
  .eq-sliders { gap: 4px; }
  .eq-track { max-width: 30px; }
  .eq-knob { width: 22px; height: 22px; }
  .preset-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .sound-preset { grid-template-columns: 24px 1fr 16px; font-size: 13px; min-height: 42px; }
  .preset-panel { padding: 12px; }
  .preset-description { margin-top: 5px; }
  .eq-visual-bars { gap: 2px; }
  .sound-switches { grid-template-columns: 1fr; }
}
/* Inferno is all fire: genre colours (green, blue...) give way to the ember red. */
body[data-theme="inferno"] .hero, body[data-theme="inferno"] .card, body[data-theme="inferno"] .fcard { --c: var(--neon-albums) !important; }
body[data-theme="inferno"] .home-tile { --c: var(--neon-albums); border-color: color-mix(in srgb, var(--c) 72%, transparent); box-shadow: 0 0 14px 1px color-mix(in srgb, var(--c) 36%, transparent), inset 0 0 16px 1px color-mix(in srgb, var(--c) 17%, transparent); background: linear-gradient(105deg, rgba(27, 8, 8, .94), rgba(8, 9, 12, .98)); }
body[data-theme="inferno"] .home-tile-chevron { color: #FF6846; text-shadow: 0 0 8px rgba(var(--ember), .75); }
body[data-theme="inferno"].tv .home-tile:focus { box-shadow: none; }
@media (max-width: 760px) {
  .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
  .home-tile { grid-template-columns: 56px minmax(0, 1fr) 14px; gap: 8px; min-height: 84px; padding: 8px; }
  .home-tile img { width: 56px; height: 56px; }
  .home-tile-copy b { font-size: 15px; line-height: 19px; }
  .home-tile-copy small { font-size: 11px; line-height: 14px; }
  .home-tile-chevron { font-size: 24px; }
}
body[data-theme="neon"] .home-tile img { display: none; }
body[data-theme="neon"] .home-tile { grid-template-columns: minmax(0, 1fr) 20px; min-height: 82px; }
body[data-theme="neon"].tv .home-tile:focus { box-shadow: 0 0 0 3px #fff, 0 0 24px 4px color-mix(in srgb, var(--info) 65%, transparent); }

/* Inferno: chrome logo (web/logo-chrome.svg) with a faint red glow. */
body[data-theme="inferno"] .sidebar .brand img,
body[data-theme="inferno"] .login-logo { content: url('/logo-chrome.svg'); filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 6px rgba(255, 48, 24, 0.5)); }

/* Inferno menu icons: grey, except the page you're on, which is on fire (#fire-grad in index.html). */
body[data-theme="inferno"] .sidebar a { color: #E6DEDB; }
body[data-theme="inferno"] .sidebar a svg { color: #85878C; }
body[data-theme="inferno"] .sidebar a.active svg,
body[data-theme="inferno"] .tabbar a.active svg {
  stroke: url(#fire-grad); fill: url(#fire-grad); fill-opacity: 0.35;
  filter: drop-shadow(0 0 4px rgba(255, 48, 24, 0.9)) drop-shadow(0 0 10px rgba(255, 90, 31, 0.5));
}

/* Inferno player bar: flames burning along its bottom, a neon top edge, and fire round the play button. */
body[data-theme="inferno"] .player {
  background:
    linear-gradient(180deg, rgba(7, 6, 8, 0.95) 0%, rgba(12, 5, 4, 0.88) 55%, rgba(30, 6, 3, 0.55) 100%),
    url('/themes/inferno/bar-flames.png') left bottom / auto 75% repeat-x,
    #07080B;
  box-shadow: 0 -1px 0 #FF3B1F, 0 -6px 20px rgba(255, 48, 24, 0.4);
}
body[data-theme="inferno"]:not(.np-open) .player .icon.big { position: relative; }
body[data-theme="inferno"] .player .icon.big::before {
  content: ''; position: absolute; inset: -58%; z-index: -1; pointer-events: none;
  background: url('/themes/inferno/flame-ring.png') center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  body[data-theme="inferno"] .player .icon.big::before { animation: ember-flicker 0.8s ease-in-out infinite alternate; }
}
body[data-theme="inferno"] .player .buttons .icon:not(.big) svg { filter: drop-shadow(0 0 3px rgba(255, 48, 24, 0.55)); }

/* Settings page */
.settings { display: grid; gap: 20px; max-width: 640px; padding-bottom: 24px; }
.settings-group h2 { font: 700 18px/24px var(--font); margin: 0 0 10px; color: var(--text); }
.settings-items { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--divider); border-radius: 14px; background: var(--surface); }
.settings > .link { justify-self: start; }
.import-album { margin: 18px 0; padding: 14px; border: 1px solid var(--divider); border-radius: 14px; background: var(--surface); }
.import-album h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.import-cover { width: 56px; height: 56px; flex: none; border-radius: 8px; object-fit: cover; }
body.tv .import-row:focus-within { outline: 3px solid #fff; outline-offset: 2px; border-radius: 8px; }
.import-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--divider); cursor: pointer; }
.import-row input { width: 22px; height: 22px; accent-color: var(--info); }
.import-row small { display: block; color: var(--muted); overflow-wrap: anywhere; margin-top: 3px; }
.import-recent { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--divider); }
@media (max-width: 600px) { .import-row { gap: 8px; } .import-cover { width: 44px; height: 44px; } .import-recent { align-items: flex-start; flex-direction: column; } }
body[data-theme="inferno"] .settings-items { box-shadow: inset 0 0 0 1px rgba(var(--ember), 0.25), 0 0 14px rgba(var(--ember), 0.15); }
.internet-access p { margin: 0 0 10px; }
.internet-access .on { color: var(--info); }