:root {
  color-scheme: dark;
  --dp: calc(100vw / 960);
  --bg: #0b0b0b;
  --surface: #121212;
  --card: #1b1b1b;
  --card-focused: #303030;
  --text: #f5f5f5;
  --secondary: #c4c4c4;
  --muted: #a3a3a3;
  --stroke: #3a3a3a;
  --header-height: calc(64 * var(--dp));
  font-family: Roboto, "Noto Sans", Arial, sans-serif;
  font-size: calc(14 * var(--dp));
  background: var(--bg);
  color: var(--text);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--bg); line-height: 1.25; }
button, input, select, textarea { font: inherit; }
button, a, input, select, [tabindex] { -webkit-tap-highlight-color: transparent; }
button, select, input { outline: none; }
button { cursor: pointer; min-width: 0; min-height: calc(44 * var(--dp)); padding: 0 calc(16 * var(--dp)); border: calc(2 * var(--dp)) solid var(--stroke); border-radius: calc(6 * var(--dp)); background: var(--card); color: var(--text); font-size: calc(14 * var(--dp)); font-weight: 500; line-height: 1.2; text-align: center; white-space: nowrap; }
button.selected, button[aria-pressed="true"] { background: var(--card-focused); border-color: #d8d8d8; }
button:focus, button:active { background: #ffffff; border-color: #ffffff; color: var(--bg); }
button:active { background: #dddddd; }
button:disabled { background: var(--surface); color: var(--muted); border-color: #242424; cursor: default; }
button.primary { background: var(--card); color: var(--text); }
button.primary:focus { background: #ffffff; color: var(--bg); }
button.subtle { background: transparent; }
button.subtle:focus { background: #ffffff; color: var(--bg); }
input, select, textarea { width: 100%; min-width: 0; min-height: calc(48 * var(--dp)); padding: calc(10 * var(--dp)) calc(14 * var(--dp)); border: calc(2 * var(--dp)) solid transparent; border-radius: calc(6 * var(--dp)); background: #202020; color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, select:focus, textarea:focus { background: #242424; border-color: #ffffff; }
input[type="checkbox"] { width: calc(20 * var(--dp)); min-height: calc(20 * var(--dp)); height: calc(20 * var(--dp)); accent-color: #ffffff; }
a { color: inherit; text-decoration: none; }
a:focus { outline: calc(2 * var(--dp)) solid #ffffff; outline-offset: calc(3 * var(--dp)); }
[tabindex]:focus { outline: calc(2 * var(--dp)) solid #ffffff; outline-offset: calc(-2 * var(--dp)); }
h1, h2, h3, p { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.error-message { color: #fda4af; }
.app-header { display: flex; align-items: center; height: var(--header-height); padding: 0 calc(14 * var(--dp)); gap: 0; background: var(--surface); }
.brand { display: inline-flex; flex: none; align-items: center; gap: calc(8 * var(--dp)); color: #ffffff; font-size: calc(18 * var(--dp)); font-weight: 700; white-space: nowrap; }
.brand img { width: calc(32 * var(--dp)); height: calc(32 * var(--dp)); object-fit: contain; }
.brand-tv { color: inherit; }
#main-nav { display: flex; flex: 1; min-width: 0; align-items: center; gap: calc(2 * var(--dp)); height: 100%; margin-left: calc(12 * var(--dp)); }
#main-nav button { height: calc(44 * var(--dp)); min-height: calc(44 * var(--dp)); padding: 0 calc(10 * var(--dp)); border-color: transparent; background: transparent; color: var(--secondary); font-size: calc(13 * var(--dp)); font-weight: 700; }
#main-nav button.selected { background: var(--card-focused); border-color: #d8d8d8; color: #ffffff; }
#main-nav button:focus { background: #ffffff; border-color: #ffffff; color: var(--bg); }
.search-button { flex: none; height: calc(44 * var(--dp)); margin-right: calc(12 * var(--dp)); font-weight: 700; }
.search-button > span { margin-right: calc(5 * var(--dp)); font-size: calc(15 * var(--dp)); }
.clock { flex: none; color: var(--secondary); font-size: calc(13 * var(--dp)); font-weight: 700; font-variant-numeric: tabular-nums; }
.app-shell { display: grid; grid-template-columns: calc(240 * var(--dp)) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); width: 100%; height: calc(100vh - var(--header-height)); min-height: 0; overflow: hidden; }
.sidebar { grid-column: 1; grid-row: 1; min-height: 0; overflow: hidden; padding-top: calc(12 * var(--dp)); background: var(--surface); display: flex; flex-direction: column; }
.sidebar h2 { flex: none; padding: 0 calc(16 * var(--dp)) calc(8 * var(--dp)); color: #ffffff; font-size: calc(12 * var(--dp)); font-weight: 700; }
.category-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 0 calc(16 * var(--dp)); scroll-padding-block: calc(6 * var(--dp)); }
.category-list button { display: flex; align-items: center; justify-content: space-between; gap: calc(6 * var(--dp)); width: calc(100% - 12 * var(--dp)); min-height: calc(44 * var(--dp)); margin: calc(3 * var(--dp)) calc(6 * var(--dp)); padding: calc(10 * var(--dp)) calc(12 * var(--dp)); border-color: transparent; border-radius: calc(8 * var(--dp)); background: transparent; color: var(--text); text-align: left; font-size: calc(15 * var(--dp)); font-weight: 700; }
.category-list button > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-list button.selected { background: var(--card-focused); border-color: #d8d8d8; }
.category-list button:focus { background: #ffffff; border-color: #ffffff; color: var(--bg); }
.category-list .count { flex: none; padding: calc(2 * var(--dp)) calc(6 * var(--dp)); background: #ffffff20; color: var(--secondary); font-size: calc(12 * var(--dp)); font-weight: 400; }
.category-list button:focus .count { color: #303030; background: #00000012; }
.content { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: calc(16 * var(--dp)) calc(16 * var(--dp)) calc(32 * var(--dp)); scroll-padding: calc(16 * var(--dp)); }
.content:focus { outline: none; }
.content-header { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(12 * var(--dp)); min-height: calc(24 * var(--dp)); margin: 0 0 calc(8 * var(--dp)); }
.content-header h1 { color: var(--secondary); font-size: calc(13 * var(--dp)); font-weight: 700; }
.content-header p { color: var(--muted); font-size: calc(13 * var(--dp)); margin-top: calc(6 * var(--dp)); }
.poster-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; align-items: start; }
.virtual-spacer { pointer-events: none; padding: 0; margin: 0; border: 0; }
.poster-card { display: block; min-width: 0; width: calc(100% - 10 * var(--dp)); margin: calc(5 * var(--dp)); padding: calc(5 * var(--dp)); border-width: calc(1 * var(--dp)); border-color: var(--stroke); border-radius: calc(10 * var(--dp)); background: var(--card); color: var(--text); white-space: normal; }
.poster-card.selected { background: var(--card-focused); border-color: #d8d8d8; }
.poster-card:focus { background: var(--card-focused); border-color: #ffffff; box-shadow: 0 0 0 calc(1.5 * var(--dp)) #ffffff; color: var(--text); }
.poster-image { position: relative; width: 100%; height: calc(190 * var(--dp)); overflow: hidden; background: #242424; }
.poster-image > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.poster-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #242424; color: #b5b5b5; font-size: calc(45 * var(--dp)); }
.poster-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: calc(36 * var(--dp)); margin-top: calc(6 * var(--dp)); text-align: center; font-size: calc(12 * var(--dp)); font-weight: 400; line-height: calc(18 * var(--dp)); color: var(--text); }
.poster-meta { overflow: hidden; min-height: calc(20 * var(--dp)); max-height: calc(34 * var(--dp)); text-align: center; text-overflow: ellipsis; font-size: calc(12 * var(--dp)); line-height: calc(17 * var(--dp)); color: var(--muted); }
.poster-meta:empty { display: none; }
.poster-favorite { position: absolute; top: calc(4 * var(--dp)); right: calc(4 * var(--dp)); display: flex; align-items: center; justify-content: center; width: calc(24 * var(--dp)); height: calc(24 * var(--dp)); background: var(--surface); color: #ffffff; font-size: calc(18 * var(--dp)); }
.poster-tag { position: absolute; top: calc(4 * var(--dp)); left: calc(4 * var(--dp)); max-width: calc(100% - 8 * var(--dp)); padding: calc(3 * var(--dp)) calc(5 * var(--dp)); background: #121212e6; color: var(--secondary); font-size: calc(10 * var(--dp)); }
.poster-progress { position: absolute; bottom: 0; left: 0; right: 0; height: calc(6 * var(--dp)); background: var(--stroke); }
.poster-progress > span { display: block; height: 100%; background: #ffffff; }
.app-shell.layout-live { grid-template-columns: calc(220 * var(--dp)) calc(320 * var(--dp)) minmax(0, 1fr); }
.layout-live > .content { padding: calc(12 * var(--dp)) 0 calc(16 * var(--dp)); }
.channel-heading { padding: 0 calc(16 * var(--dp)) calc(8 * var(--dp)); color: var(--muted); font-size: calc(12 * var(--dp)); font-weight: 700; }
.channel-heading > span { color: inherit; }
.channel-list { display: flex; flex-direction: column; gap: 0; }
.channel-row { display: flex; align-items: center; gap: 0; width: calc(100% - 12 * var(--dp)); min-height: calc(52 * var(--dp)); margin: calc(3 * var(--dp)) calc(6 * var(--dp)); padding: calc(8 * var(--dp)); border: calc(1.5 * var(--dp)) solid transparent; border-radius: calc(6 * var(--dp)); background: var(--card); color: var(--text); text-align: left; }
.channel-row.selected { background: var(--card-focused); border-color: #d8d8d8; }
.channel-row:focus { background: #ffffff; border-color: #ffffff; color: var(--bg); }
.channel-number { flex: none; width: calc(28 * var(--dp)); text-align: center; color: var(--secondary); font-size: calc(12 * var(--dp)); font-weight: 700; }
.channel-logo { display: flex; align-items: center; justify-content: center; flex: none; width: calc(48 * var(--dp)); height: calc(36 * var(--dp)); margin-left: calc(6 * var(--dp)); padding: calc(3 * var(--dp)); background: var(--card); object-fit: contain; color: var(--muted); }
.channel-row > span:not(.channel-number):not(.channel-logo):not(.heart) { min-width: 0; flex: 1; margin-left: calc(10 * var(--dp)); }
.channel-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(14 * var(--dp)); font-weight: 700; }
.channel-subtitle { display: none; }
.channel-row .heart { flex: none; width: calc(16 * var(--dp)); margin-left: calc(6 * var(--dp)); font-size: calc(15 * var(--dp)); }
.channel-row:focus .channel-number, .channel-row:focus .channel-name, .channel-row:focus .heart { color: inherit; }
.player-dock { grid-column: 3; grid-row: 1; align-self: center; min-width: 0; margin: calc(16 * var(--dp)); background: var(--card); border-radius: calc(14 * var(--dp)); overflow: hidden; }
.player-dock:focus-within { box-shadow: 0 0 0 calc(2 * var(--dp)) #ffffff; }
.player-caption:focus { outline: none; }
.player-shell { position: relative; width: 100%; background: #000000; outline: none; }
.player-shell::before { content: ""; display: block; padding-top: 56.25%; }
.player-shell:focus { outline: none; }
#video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; background: #000000; }
.player-empty, .player-loading, .player-error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(10 * var(--dp)); padding: calc(12 * var(--dp)); text-align: center; background: #000000; }
.player-empty img { width: calc(48 * var(--dp)); height: calc(48 * var(--dp)); object-fit: contain; }
.player-empty p { font-size: calc(14 * var(--dp)); color: var(--muted); }
.player-loading { background: #00000080; }
.player-loading .spinner { width: calc(60 * var(--dp)); height: calc(60 * var(--dp)); }
#loading-label { color: var(--text); font-size: calc(16 * var(--dp)); font-weight: 700; }
.player-error { background: #0b0b0be6; color: var(--secondary); font-size: calc(14 * var(--dp)); line-height: 1.35; }
.player-error button { margin-top: calc(10 * var(--dp)); }
.player-caption { position: relative; display: block; padding: calc(20 * var(--dp)); }
.player-caption > div { min-width: 0; }
.preview-meta { display: flex; align-items: center; gap: calc(8 * var(--dp)); color: #ffffff; font-size: calc(12 * var(--dp)); }
.live-badge { display: inline-block; background: #b91c3d; color: #ffffff; padding: calc(3 * var(--dp)) calc(6 * var(--dp)); border-radius: calc(3 * var(--dp)); font-size: calc(11 * var(--dp)); font-weight: 700; }
.player-caption h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: calc(4 * var(--dp)); font-size: calc(22 * var(--dp)); font-weight: 700; color: var(--text); }
.player-caption .muted { margin-top: calc(4 * var(--dp)); font-size: calc(12 * var(--dp)); color: #ffffff; }
.player-caption .preview-meta .muted { margin-top: 0; }
.player-caption .preview-note { padding: calc(4 * var(--dp)) 0 0; }
.preview-note { padding: calc(4 * var(--dp)) calc(20 * var(--dp)) calc(20 * var(--dp)); font-size: calc(14 * var(--dp)); color: var(--muted); }
.player-controls { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; visibility: hidden; pointer-events: none; }
.player-shell.controls-visible .player-controls { opacity: 1; visibility: visible; pointer-events: auto; }
.layout-live .player-dock:not(.is-fullscreen) .player-controls { display: none; }
.player-top { display: flex; align-items: center; justify-content: space-between; padding: calc(24 * var(--dp)); gap: calc(16 * var(--dp)); background: linear-gradient(#0b0b0be6, transparent); }
.player-top > span { color: var(--secondary); font-size: calc(14 * var(--dp)); }
#player-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: calc(22 * var(--dp)); font-weight: 700; }
.player-bottom { padding: calc(44 * var(--dp)) calc(24 * var(--dp)) calc(24 * var(--dp)); background: linear-gradient(transparent, #0b0b0bf0); }
.seek-row { display: flex; align-items: center; gap: calc(12 * var(--dp)); margin-bottom: calc(12 * var(--dp)); color: var(--secondary); font-size: calc(12 * var(--dp)); font-variant-numeric: tabular-nums; }
.seek-row input { flex: 1; width: 0; height: calc(28 * var(--dp)); min-height: calc(28 * var(--dp)); padding: 0; background: transparent; accent-color: #ffffff; }
.seek-row input:focus { outline: calc(2 * var(--dp)) solid #ffffff; outline-offset: calc(2 * var(--dp)); border-color: transparent; }
.playback-buttons { display: flex; align-items: center; gap: calc(8 * var(--dp)); flex-wrap: wrap; }
.playback-buttons button { min-height: calc(44 * var(--dp)); font-size: calc(14 * var(--dp)); padding: 0 calc(12 * var(--dp)); font-weight: 700; }
.buffer-state { min-height: 0; margin-top: calc(6 * var(--dp)); color: var(--muted); font-size: calc(12 * var(--dp)); }
.buffer-state:empty { display: none; }
.next-episode { position:absolute; bottom:calc(128 * var(--dp)); right:calc(24 * var(--dp)); z-index:5; display:flex; align-items:center; justify-content:flex-end; gap:calc(16 * var(--dp)); font-size:calc(14 * var(--dp)); font-weight:700; }
.next-episode > span { padding: calc(12 * var(--dp)); background: var(--card); border-radius: calc(6 * var(--dp)); }
.player-clock { flex:none; font-size:calc(14 * var(--dp)); color:var(--muted); font-variant-numeric:tabular-nums; }
.player-dock:not(.is-fullscreen) .next-episode {display:none;}
.player-dock.is-fullscreen { position: fixed; inset: 0; z-index: 1000; width: 100%; height: 100vh; display: flex; flex-direction: column; margin: 0; padding: 0; background: #000000; border: 0; border-radius: 0; box-shadow: none; }
.player-dock.is-fullscreen .player-shell { flex: 1; width: 100%; height: 100%; min-height: 0; }
.player-dock.is-fullscreen .player-shell::before { display: none; }
.player-dock.is-fullscreen .player-caption, .player-dock.is-fullscreen .preview-note { display: none; }
.player-dock.is-fullscreen .transport-control { display: none; }
.player-dock.is-fullscreen .needs-activation #play-pause.transport-control,
.player-dock.is-fullscreen .playback-buttons > button:not(.transport-control) { order: 4; }
.player-dock.is-fullscreen #aspect { order: 1; }
.player-dock.is-fullscreen #audio-tracks { order: 2; }
.player-dock.is-fullscreen #subtitle-tracks { order: 3; }
#channel-drawer { position: absolute; top: 0; bottom: 0; left: 0; z-index: 20; display: flex; flex-direction: column; width: calc(300 * var(--dp)); padding: calc(12 * var(--dp)); overflow: hidden; background: #0b0b0be6; }
#channel-drawer h2 { flex: none; padding: calc(8 * var(--dp)); color: #ffffff; font-size: calc(14 * var(--dp)); font-weight: 700; }
#channel-drawer .channel-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: calc(8 * var(--dp)); }
.app-shell[data-screen="settings"] { grid-template-columns: calc(205 * var(--dp)) minmax(0, 1fr); gap: calc(24 * var(--dp)); padding: calc(24 * var(--dp)); }
[data-screen="settings"] > .sidebar { padding: 0; background: transparent; }
[data-screen="settings"] > .sidebar h2 { padding: 0; margin: 0 0 calc(24 * var(--dp)); color: var(--text); font-size: calc(26 * var(--dp)); font-weight: 500; }
[data-screen="settings"] .category-list { padding: 0; }
[data-screen="settings"] .category-list button { width: 100%; min-height: calc(48 * var(--dp)); margin: 0 0 calc(8 * var(--dp)); padding: 0 calc(16 * var(--dp)); border: calc(2 * var(--dp)) solid var(--stroke); border-radius: calc(6 * var(--dp)); background: var(--card); font-size: calc(14 * var(--dp)); font-weight: 500; }
[data-screen="settings"] .category-list button.selected { background: var(--card-focused); border-color: #d8d8d8; }
[data-screen="settings"] .category-list button:focus { background: #ffffff; border-color: #ffffff; color: var(--bg); }
[data-screen="settings"] > .content { overflow: hidden; padding: 0; }
.settings-screen { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; }
.settings-heading { flex: none; }
.settings-title { flex: none; margin: 0; color: var(--text); font-size: calc(24 * var(--dp)); font-weight: 500; }
.settings-description { flex: none; margin: calc(6 * var(--dp)) 0 calc(18 * var(--dp)); color: var(--secondary); font-size: calc(14 * var(--dp)); line-height: 1.3; }
.settings-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: calc(2 * var(--dp)) calc(2 * var(--dp)) calc(12 * var(--dp)); scroll-padding: calc(4 * var(--dp)); }
.settings-section { margin-bottom: calc(14 * var(--dp)); padding: calc(18 * var(--dp)); border: calc(1 * var(--dp)) solid var(--stroke); border-radius: calc(8 * var(--dp)); background: var(--surface); }
.settings-section-title { margin: 0; padding-bottom: calc(8 * var(--dp)); color: var(--secondary); font-size: calc(18 * var(--dp)); font-weight: 500; line-height: calc(22 * var(--dp)); }
.settings-description-text, .settings-account-info, .settings-status { color: var(--secondary); font-size: calc(14 * var(--dp)); line-height: calc(18 * var(--dp)); white-space: pre-line; }
.settings-option-row { display: flex; align-items: center; justify-content: space-between; }
.settings-copy { flex: 1; min-width: 0; margin-right: calc(20 * var(--dp)); }
.settings-button { flex: none; min-height: calc(48 * var(--dp)); padding: 0 calc(16 * var(--dp)); }
.settings-toggle { width: calc(150 * var(--dp)); }
.settings-actions { display: flex; align-items: center; flex-wrap: wrap; gap: calc(10 * var(--dp)); margin-top: calc(18 * var(--dp)); }
.settings-profiles { display: flex; gap: 0; margin-top: calc(18 * var(--dp)); }
.settings-profiles button + button { margin-left: calc(6 * var(--dp)); }
.settings-profiles button { flex: 1; width: 0; min-width: 0; height: calc(48 * var(--dp)); padding: 0 calc(6 * var(--dp)); }
.settings-note { margin-top: calc(12 * var(--dp)); color: var(--secondary); font-size: calc(13 * var(--dp)); line-height: calc(17 * var(--dp)); }
.settings-status { margin-top: calc(12 * var(--dp)); }
.settings-attribution { margin-top: calc(8 * var(--dp)); color: var(--muted); font-size: calc(12 * var(--dp)); line-height: 1.35; }
.settings-tmdb-mark { display: block; width: calc(110 * var(--dp)); height: calc(20 * var(--dp)); margin-top: calc(20 * var(--dp)); }
.app-shell[data-screen="favorites"] { display: block; }
[data-screen="favorites"] > .sidebar { display: none; }
[data-screen="favorites"] > .content { height: 100%; padding: calc(20 * var(--dp)); }
.favorites-section { margin: 0 0 calc(24 * var(--dp)); }
.favorites-heading { margin: 0 0 calc(8 * var(--dp)); color: #ffffff; font-size: calc(14 * var(--dp)); font-weight: 700; }
.favorites-row, .favorites-section .poster-grid, .favorites-section .channel-list { display: flex; flex-direction: row; align-items: flex-start; overflow-x: auto; overflow-y: hidden; padding: calc(2 * var(--dp)) 0 calc(6 * var(--dp)); gap: 0; scroll-padding: calc(6 * var(--dp)); }
.favorites-section .poster-card, .favorites-row > .poster-card { flex: none; width: calc(145 * var(--dp)); }
.favorites-section .channel-row { flex: none; width: calc(220 * var(--dp)); }
dialog { color: var(--text); background: var(--surface); padding: calc(20 * var(--dp)); border: calc(1 * var(--dp)) solid var(--stroke); border-radius: calc(8 * var(--dp)); max-width: 96vw; max-height: 92vh; box-shadow: 0 calc(10 * var(--dp)) calc(50 * var(--dp)) #00000080; overflow: auto; }
dialog:not([open]) { display: none; }
dialog::backdrop { background: #000000b3; }
.details-dialog { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--bg); }
#details-content { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; padding: calc(16 * var(--dp)) calc(36 * var(--dp)) calc(24 * var(--dp)); overflow: hidden; }
.details-backdrop { position: absolute; inset: 0; z-index: 0; background-position: center; background-size: cover; pointer-events: none; }
.details-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0b0b0b, #0b0b0bf5 50%, #0b0b0bb8); }
#details-content > .details-topbar, #details-content > .detail-main { position: relative; z-index: 1; }
.details-topbar { display: flex; align-items: center; justify-content: space-between; flex: none; height: calc(48 * var(--dp)); gap: calc(16 * var(--dp)); color: var(--secondary); font-size: calc(17 * var(--dp)); font-weight: 500; }
.details-topbar button { width: calc(100 * var(--dp)); height: calc(42 * var(--dp)); min-height: calc(42 * var(--dp)); }
.detail-main { display: flex; align-items: center; gap: 0; flex: 1; min-height: 0; margin-top: calc(16 * var(--dp)); }
#details-content > .detail-main > .detail-poster { margin-right: calc(32 * var(--dp)); }
.detail-poster { flex: none; width: calc(180 * var(--dp)); height: calc(270 * var(--dp)); object-fit: cover; border-radius: 0; background: var(--card); }
.detail-summary { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; height: 100%; }
.details-eyebrow { flex: none; color: var(--muted); font-size: calc(12 * var(--dp)); letter-spacing: .12em; }
.detail-summary h1 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: none; margin-top: calc(8 * var(--dp)); font-size: calc(30 * var(--dp)); font-weight: 500; line-height: 1.2; }
.detail-meta { display: flex; align-items: center; gap: calc(8 * var(--dp)); flex-wrap: wrap; flex: none; margin-top: calc(8 * var(--dp)); color: var(--secondary); font-size: calc(14 * var(--dp)); }
.detail-summary > p, .detail-synopsis { flex: 1; min-height: 0; overflow-y: auto; margin: calc(18 * var(--dp)) 0 calc(12 * var(--dp)); color: var(--secondary); font-size: calc(17 * var(--dp)); line-height: calc(21 * var(--dp)); }
.detail-status { display: flex; align-items: center; flex: none; min-height: calc(18 * var(--dp)); margin-bottom: calc(10 * var(--dp)); color: var(--muted); font-size: calc(12 * var(--dp)); }
.detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: calc(10 * var(--dp)); flex: none; }
.detail-actions button { min-height: calc(48 * var(--dp)); padding: 0 calc(16 * var(--dp)); }
.detail-actions [data-action="play-movie"], .detail-actions [data-action="show-episodes"] { padding: 0 calc(22 * var(--dp)); }
.detail-restart { align-self: flex-start; margin-top: calc(8 * var(--dp)); height: calc(40 * var(--dp)); min-height: calc(40 * var(--dp)); font-size: calc(12 * var(--dp)); }
.detail-credit { flex: none; margin-top: calc(8 * var(--dp)); color: var(--muted); font-size: calc(12 * var(--dp)); }
#episodes-dialog, .episodes-dialog { width: calc(1120 * var(--dp)); height: calc(660 * var(--dp)); padding: calc(20 * var(--dp)); overflow: hidden; }
#episodes-content { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; }
.series-topbar { display: flex; flex: none; align-items: center; gap: calc(20 * var(--dp)); margin-bottom: calc(18 * var(--dp)); }
.series-topbar > div { flex: 1; min-width: 0; }
.series-topbar h1 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: calc(22 * var(--dp)); font-weight: 500; }
.series-topbar p { color: var(--secondary); font-size: calc(13 * var(--dp)); margin-top: calc(5 * var(--dp)); }
.series-topbar button { flex: none; width: calc(100 * var(--dp)); min-height: calc(44 * var(--dp)); }
.series-columns { display: grid; grid-template-columns: calc(140 * var(--dp)) calc(185 * var(--dp)) minmax(0, 1fr); gap: calc(20 * var(--dp)); flex: 1; min-height: 0; }
.series-poster-column { min-width: 0; }
.series-poster-column img, .series-poster { display: block; width: calc(140 * var(--dp)); height: calc(210 * var(--dp)); object-fit: cover; }
.series-poster-column p { margin-top: calc(16 * var(--dp)); color: var(--secondary); font-size: calc(13 * var(--dp)); line-height: calc(16 * var(--dp)); }
.season-column, .episodes-column { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.season-column > h2, .episodes-column > h2 { flex: none; margin-bottom: calc(10 * var(--dp)); color: var(--text); font-size: calc(15 * var(--dp)); font-weight: 500; }
.season-list, .episode-list { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.season-list button { display: block; flex: none; width: calc(100% - 4 * var(--dp)); min-height: calc(60 * var(--dp)); margin: calc(4 * var(--dp)) calc(2 * var(--dp)); padding: calc(12 * var(--dp)); border-width: calc(1 * var(--dp)); text-align: left; white-space: normal; font-size: calc(15 * var(--dp)); }
.season-list button small { display: block; margin-top: calc(4 * var(--dp)); color: var(--secondary); font-size: calc(12 * var(--dp)); }
.season-list button:focus small { color: #303030; }
.episode-row { display: flex; align-items: center; gap: calc(8 * var(--dp)); flex: none; width: calc(100% - 12 * var(--dp)); min-height: calc(48 * var(--dp)); margin: calc(3 * var(--dp)) calc(6 * var(--dp)); padding: calc(8 * var(--dp)) calc(12 * var(--dp)); border-width: calc(1 * var(--dp)); text-align: left; white-space: normal; font-size: calc(14 * var(--dp)); }
.episode-number { flex: none; width: calc(28 * var(--dp)); color: var(--secondary); font-size: calc(14 * var(--dp)); font-weight: 700; }
.episode-info { flex: 1; min-width: 0; }
.episode-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: inherit; font-size: calc(14 * var(--dp)); font-weight: 400; }
.episode-caption { display: block; color: var(--secondary); font-size: calc(12 * var(--dp)); margin-top: calc(3 * var(--dp)); }
.episode-row:focus .episode-number, .episode-row:focus .episode-caption, .episode-row:focus .watched-mark { color: #303030; }
.watched-mark { flex: none; padding: calc(3 * var(--dp)) calc(8 * var(--dp)); border-radius: calc(4 * var(--dp)); background: #ffffff15; color: var(--secondary); font-size: calc(12 * var(--dp)); font-weight: 700; }
.search-dialog { display: flex; flex-direction: column; width: calc(920 * var(--dp)); height: calc(560 * var(--dp)); padding: calc(20 * var(--dp)); }
.search-form { display: flex; align-items: center; flex: none; height: calc(52 * var(--dp)); gap: calc(8 * var(--dp)); margin: 0; }
.search-form input { flex: 1; width: 0; height: 100%; font-size: calc(16 * var(--dp)); }
.search-symbol { flex: none; width: calc(22 * var(--dp)); color: #ffffff; text-align: center; font-size: calc(22 * var(--dp)); }
.search-form button { flex: none; height: calc(44 * var(--dp)); }
#search-results { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; margin-top: calc(16 * var(--dp)); }
.search-results-heading { color: #ffffff; font-size: calc(13 * var(--dp)); font-weight: 700; margin: calc(14 * var(--dp)) 0 calc(6 * var(--dp)); }
.search-dialog .poster-grid, .search-dialog .channel-list { display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; align-items: flex-start; }
.search-dialog .poster-card { flex: none; width: calc(145 * var(--dp)); }
.search-dialog .channel-row { flex: none; width: calc(220 * var(--dp)); }
.choice-dialog { width: calc(520 * var(--dp)); padding: calc(20 * var(--dp)); }
.choice-header { display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--dp)); margin-bottom: calc(16 * var(--dp)); }
.choice-header h2 { color: var(--text); font-size: calc(20 * var(--dp)); font-weight: 500; }
.choice-description { margin-bottom: calc(16 * var(--dp)); color: var(--secondary); font-size: calc(14 * var(--dp)); line-height: 1.3; }
.choice-list { display: flex; flex-direction: column; gap: calc(6 * var(--dp)); }
.choice-list button { min-height: calc(48 * var(--dp)); padding: calc(10 * var(--dp)) calc(12 * var(--dp)); text-align: left; white-space: normal; }
.choice-list small { display: block; margin-top: calc(4 * var(--dp)); color: var(--secondary); font-size: calc(12 * var(--dp)); }
.choice-list button:focus small { color: #303030; }
.choice-footer { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--dp)); margin-top: calc(16 * var(--dp)); }
.trailer-dialog { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: calc(58 * var(--dp)) 0 0; border: 0; border-radius: 0; background: #000000; }
#trailer-content, #trailer-content iframe { display: block; width: 100%; height: 100%; border: 0; }
.login-screen { display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; overflow: auto; padding: calc(24 * var(--dp)); background: radial-gradient(circle at 12% 25%, #242424 0, #0b0b0b calc(650 * var(--dp))); }
.login-screen::before { content: ""; position: absolute; left: calc(-120 * var(--dp)); top: 50%; width: calc(340 * var(--dp)); height: calc(340 * var(--dp)); margin-top: calc(-170 * var(--dp)); background: url('/assets/logo.png') center / contain no-repeat; opacity: .035; pointer-events: none; }
.login-card { position: relative; flex: none; width: calc(420 * var(--dp)); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.login-brand { display: flex; gap: calc(10 * var(--dp)); margin: 0; color: var(--secondary); font-size: calc(18 * var(--dp)); font-weight: 500; }
.login-brand img { width: calc(28 * var(--dp)); height: calc(28 * var(--dp)); }
.login-card h1 { margin-top: calc(18 * var(--dp)); margin-bottom: calc(22 * var(--dp)); color: var(--text); font-size: calc(32 * var(--dp)); font-weight: 500; }
.login-card > .muted { display: none; }
.login-card > label:not(.check-line) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.login-card > input { width: 100%; height: calc(52 * var(--dp)); margin-top: calc(10 * var(--dp)); }
.login-card > input:first-of-type { margin-top: 0; }
.login-card input:not([type="checkbox"]) { height: calc(52 * var(--dp)); padding: 0 calc(18 * var(--dp)); font-size: calc(16 * var(--dp)); }
.login-card #server { font-size: calc(15 * var(--dp)); }
.check-line { display: flex; align-items: center; gap: calc(8 * var(--dp)); min-height: calc(44 * var(--dp)); width: 100%; margin-top: calc(10 * var(--dp)); padding: 0 calc(6 * var(--dp)); border: calc(2 * var(--dp)) solid transparent; border-radius: calc(8 * var(--dp)); color: var(--text); font-size: calc(14 * var(--dp)); }
.check-line:focus-within { border-color: #ffffff; background: #303030; }
.login-actions { display: flex; gap: calc(10 * var(--dp)); margin-top: calc(14 * var(--dp)); }
.login-actions button { flex: 1; height: calc(50 * var(--dp)); font-size: calc(16 * var(--dp)); }
.status-note, .login-card .error-message { margin-top: calc(12 * var(--dp)); text-align: center; font-size: calc(14 * var(--dp)); line-height: 1.35; }
.status-note:empty { display: none; }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(260 * var(--dp)); padding: calc(32 * var(--dp)); text-align: center; }
.empty > img { width: calc(64 * var(--dp)); height: calc(64 * var(--dp)); object-fit: contain; }
.empty h2 { margin-top: calc(16 * var(--dp)); color: var(--text); font-size: calc(18 * var(--dp)); font-weight: 700; }
.empty p, .empty-note { margin-top: calc(8 * var(--dp)); color: var(--muted); font-size: calc(14 * var(--dp)); line-height: calc(18 * var(--dp)); }
.empty button { margin-top: calc(18 * var(--dp)); }
.spinner { display: inline-block; flex: none; width: calc(40 * var(--dp)); height: calc(40 * var(--dp)); border: calc(3 * var(--dp)) solid var(--stroke); border-top-color: #ffffff; border-radius: 50%; animation: loading-spin 1s linear infinite; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
.toast { position: fixed; left: 50%; bottom: calc(24 * var(--dp)); transform: translateX(-50%); z-index: 3000; width: max-content; max-width: 85vw; padding: calc(12 * var(--dp)) calc(20 * var(--dp)); border: calc(1 * var(--dp)) solid var(--stroke); border-radius: calc(6 * var(--dp)); background: var(--surface); color: var(--text); text-align: center; font-size: calc(14 * var(--dp)); line-height: 1.3; }
.toast.error { color: #fda4af; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
::-webkit-scrollbar { width: calc(4 * var(--dp)); height: calc(4 * var(--dp)); }
::-webkit-scrollbar-thumb { background: #626262; border-radius: calc(2 * var(--dp)); }
::-webkit-scrollbar-track { background: transparent; }
.player-empty, .player-loading, .player-error, .player-controls, .player-dock.is-fullscreen, .details-backdrop, .details-backdrop::after { top: 0; right: 0; bottom: 0; left: 0; }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }
.trailer-screen {display:flex;flex-direction:column;height:100%;min-height:0;background:#000;}
.trailer-header {display:flex;align-items:center;gap:calc(16 * var(--dp));padding:calc(16 * var(--dp));background:var(--surface);}
.trailer-title {flex:1;margin:0;font-size:calc(22 * var(--dp));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.trailer-actions {display:flex;gap:calc(10 * var(--dp));}
.trailer-frame {position:relative;flex:1;min-height:0;}
#trailer-content .trailer-frame iframe {position:absolute;width:100%;height:100%;border:0;}
.trailer-status {margin:0;padding:calc(10 * var(--dp));color:var(--muted);font-size:calc(14 * var(--dp));text-align:center;}