/* Aulama TV web — 2026-10 redesign.
   Replaces the bundle stylesheet on /iptv/. Layouts:
   stacked  — phones and portrait tablets: header, sticky player, guide, channel list
   split    — desktop and landscape tablets: floating glass sidebar + stage
   compact  — phones in landscape: stage on the left, channel panel on the right */

/* ───────────────────────── Tokens ───────────────────────── */

:root {
  --page-bg:
    radial-gradient(52% 46% at 8% 0%, var(--bg-tint-1), transparent 72%),
    radial-gradient(46% 42% at 100% 100%, var(--bg-tint-2), transparent 72%),
    radial-gradient(38% 34% at 92% 6%, var(--bg-tint-3), transparent 72%),
    var(--bg);
  color-scheme: dark;
  --font: "Aulama TV Round", "Aulama TV Latin", "Aulama TV Rounded", "PingFang HK", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, "Segoe UI", sans-serif;

  --bg: #05070b;
  --bg-tint-1: rgba(64, 124, 255, .13);
  --bg-tint-2: rgba(232, 74, 160, .08);
  --bg-tint-3: rgba(34, 211, 238, .06);
  --text: #f2f4f8;
  --text-2: rgba(226, 232, 243, .66);
  --text-3: rgba(226, 232, 243, .42);
  --fill-1: rgba(255, 255, 255, .045);
  --fill-2: rgba(255, 255, 255, .075);
  --fill-3: rgba(255, 255, 255, .115);
  --line: rgba(255, 255, 255, .075);
  --line-2: rgba(255, 255, 255, .13);
  --glass: rgba(17, 20, 27, .6);
  --glass-strong: rgba(22, 25, 33, .94);
  --glass-shine: rgba(255, 255, 255, .075);
  --glass-blur: blur(30px) saturate(1.8);
  --sidebar: rgba(10, 12, 17, .62);
  --seg-on: rgba(255, 255, 255, .14);
  --seg-on-shadow: 0 1px 2px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08);
  --chip-on: #f2f4f8;
  --chip-on-text: #0a0d12;
  --accent: #4f8dff;
  --accent-text: #8ab4ff;
  --accent-soft: rgba(79, 141, 255, .15);
  --accent-line: rgba(79, 141, 255, .42);
  --on-accent: #fff;
  --live: #ff453a;
  --ok: #30d158;
  --warn: #ffb020;
  --danger: #ff6159;
  --heart: #ff375f;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .22);
  --shadow-md: 0 14px 36px rgba(0, 0, 0, .4);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .55);
  --scrim: rgba(2, 4, 8, .55);
  --stage-shadow: 0 30px 90px -24px rgba(0, 0, 0, .75);

  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-2xl: 26px;
  --player-r: 18px;

  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.32, .64, 1);
  --t-fast: .16s;
  --t: .26s;
  --t-slow: .42s;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --gutter: 16px;
  --hdr: 56px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f3f7;
  --bg-tint-1: rgba(64, 124, 255, .1);
  --bg-tint-2: rgba(232, 74, 160, .07);
  --bg-tint-3: rgba(34, 211, 238, .08);
  --text: #0b0e14;
  --text-2: rgba(22, 28, 40, .64);
  --text-3: rgba(22, 28, 40, .42);
  --fill-1: rgba(16, 24, 40, .04);
  --fill-2: rgba(16, 24, 40, .065);
  --fill-3: rgba(16, 24, 40, .1);
  --line: rgba(16, 24, 40, .08);
  --line-2: rgba(16, 24, 40, .13);
  --glass: rgba(255, 255, 255, .62);
  --glass-strong: rgba(255, 255, 255, .95);
  --glass-shine: rgba(255, 255, 255, .85);
  --sidebar: rgba(250, 251, 253, .7);
  --seg-on: #fff;
  --seg-on-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 3px 10px rgba(16, 24, 40, .06);
  --chip-on: #0b0e14;
  --chip-on-text: #fff;
  --accent: #0a66ff;
  --accent-text: #0a5ae0;
  --accent-soft: rgba(10, 102, 255, .1);
  --accent-line: rgba(10, 102, 255, .32);
  --live: #ff3b30;
  --ok: #1fa84a;
  --warn: #c97800;
  --danger: #e0393b;
  --heart: #ff2d55;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 14px rgba(16, 24, 40, .06);
  --shadow-md: 0 14px 36px rgba(16, 24, 40, .12);
  --shadow-lg: 0 30px 80px rgba(16, 24, 40, .16);
  --scrim: rgba(16, 20, 30, .3);
  --stage-shadow: 0 30px 80px -28px rgba(16, 24, 40, .45);
}

/* ───────────────────────── Base ───────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 560;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

button,
input,
textarea,
select {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  line-height: 20px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

button:disabled {
  cursor: default;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

svg {
  flex: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection {
  background: var(--accent-soft);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* Thin, quiet scrollbars wherever a panel scrolls */
.channel-list,
.playback-route-menu,
.route-menu-body,
.taxonomy-popover,
.account-menu,
.import-dialog {
  scrollbar-color: var(--fill-3) transparent;
  scrollbar-width: thin;
}

.channel-list::-webkit-scrollbar,
.route-menu-body::-webkit-scrollbar,
.taxonomy-popover::-webkit-scrollbar,
.account-menu::-webkit-scrollbar {
  width: 10px;
}

.channel-list::-webkit-scrollbar-thumb,
.route-menu-body::-webkit-scrollbar-thumb,
.taxonomy-popover::-webkit-scrollbar-thumb,
.account-menu::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--fill-3) padding-box;
}

/* ───────────────────────── Boot ───────────────────────── */

html.atv-auth-pending #root {
  visibility: hidden;
}


.boot-screen {
  position: fixed;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 20% 10%, var(--bg-tint-1), transparent 70%),
    radial-gradient(50% 45% at 85% 90%, var(--bg-tint-2), transparent 70%),
    var(--bg);
  color: var(--text);
  text-align: center;
}

.boot-screen img {
  width: auto;
  height: 52px;
  animation: atv-rise .7s var(--ease-out) both;
}

.boot-tagline {
  font-size: 17px;
  font-weight: 660;
  letter-spacing: .02em;
  animation: atv-rise .7s .08s var(--ease-out) both;
}

.boot-line {
  position: relative;
  width: 120px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--fill-2);
}

.boot-line::after {
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22d3ee, #4f8dff, #ec4899);
  content: "";
  animation: atv-sweep 1.2s var(--ease) infinite;
}

.boot-screen p {
  color: var(--text-3);
  font-size: 13px;
}

.boot-screen.is-error svg {
  width: 34px;
  height: 34px;
  color: var(--danger);
}

.boot-screen.is-error h1 {
  font-size: 22px;
  font-weight: 660;
}

.boot-screen.is-error p {
  max-width: 420px;
  color: var(--text-2);
  font-size: 14px;
}

@keyframes atv-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}

@keyframes atv-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ───────────────────────── Shell ───────────────────────── */

.app-shell {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}

.app-shell::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--page-bg);
  background-size: 100vw 100vh;
  content: "";
  pointer-events: none;
}

/* Elements the redesign retires: the bottom-sheet drawer and its chrome, the duplicate
   library navigation, and the header "新增來源" command (import lives with the list). */
.drawer-backdrop,
.mobile-app-nav,
.channel-sheet-handle,
.mobile-channel-close,
.mobile-drawer-head,
.library-nav,
.group-filter,
.player-ambient-canvas,
.header-command:not(.downloads-command) {
  display: none !important;
}

/* ───────────────────────── Progressive blur ─────────────────────────
   Apple-style edge: five stacked backdrop blurs, each masked to a shorter band, so content
   melts from sharp to soft towards the edge instead of meeting a hard glass bar. Injected by
   aulama-tv-ambient.js; hidden until something actually scrolls beneath it. */

.atv-pblur {
  position: absolute;
  z-index: 25;
  height: var(--pb-h, 56px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s var(--ease);
}

html.atv-scrolled .atv-pblur {
  opacity: 1;
}

.atv-pblur::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    var(--pb-tint) 0%,
    color-mix(in srgb, var(--pb-tint) 88%, transparent) 30%,
    color-mix(in srgb, var(--pb-tint) 55%, transparent) 55%,
    color-mix(in srgb, var(--pb-tint) 18%, transparent) 80%,
    transparent 100%);
  content: "";
}

.atv-pblur > i {
  position: absolute;
  inset: 0;
}

.atv-pblur > i:nth-child(1) {
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

.atv-pblur > i:nth-child(2) {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 78%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 78%);
}

.atv-pblur > i:nth-child(3) {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 60%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 60%);
}

.atv-pblur > i:nth-child(4) {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 16%, transparent 42%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 16%, transparent 42%);
}

.atv-pblur > i:nth-child(5) {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 6%, transparent 26%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 6%, transparent 26%);
}

:root {
  --pb-tint: rgba(5, 7, 11, .62);
  --pb-tint-solid: rgba(5, 7, 11, .9);

  /* Liquid Glass material for controls that float over content */
  --lg-fill: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05));
  --lg-fill-hover: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .09));
  --lg-rim: inset 0 0 0 .5px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -1px 0 rgba(255, 255, 255, .07);
  --lg-glow: inset 0 -10px 16px -12px rgba(255, 255, 255, .3);
  --lg-lift: 0 6px 18px rgba(0, 0, 0, .28), 0 1px 3px rgba(0, 0, 0, .22);
  --lg-blur: blur(12px) saturate(1.9) brightness(1.08);
  --lg-panel: rgba(24, 27, 36, .72);
}

:root[data-theme="light"] {
  --pb-tint: rgba(242, 243, 247, .7);
  --pb-tint-solid: rgba(242, 243, 247, .92);

  --lg-fill: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .46));
  --lg-fill-hover: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .6));
  --lg-rim: inset 0 0 0 .5px rgba(255, 255, 255, .95), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255, 255, 255, .55), 0 0 0 .5px rgba(16, 24, 40, .1);
  --lg-glow: inset 0 -10px 16px -12px rgba(255, 255, 255, .95);
  --lg-lift: 0 6px 18px rgba(16, 24, 40, .12), 0 1px 3px rgba(16, 24, 40, .08);
  --lg-blur: blur(12px) saturate(1.7) brightness(1.04);
  --lg-panel: rgba(250, 251, 253, .76);
}

/* Top edge (fixed): phones while browsing, the stage column on wider layouts */
.atv-pblur-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  --pb-h: calc(var(--hdr) + var(--safe-t) + 28px);
}

/* Under the sticky phone screen: content blurs out as it slides up beneath it */
.atv-pblur-under {
  top: 100%;
  right: calc(-1 * var(--gutter) - var(--safe-r));
  left: calc(-1 * var(--gutter) - var(--safe-l));
  z-index: 0;
  --pb-h: 72px;
}

.atv-pblur-under::before {
  display: none;
}

.player-stage.is-idle .atv-pblur-under,
.app-shell:has(.art-fullscreen-web) .atv-pblur {
  display: none;
}

/* ───────────────────────── Liquid Glass ─────────────────────────
   Controls that float over content (header actions, the favourite/route pills, the selected
   segment) and every popover use one material: a translucent fill, a specular top rim, a soft
   caustic glow along the bottom and a floating shadow. On Chromium tv.js adds real refraction
   at the rim through an SVG displacement map (--lg-f); elsewhere the glass is blur and light. */

.header-command,
.theme-toggle,
.viewer-favorite,
.route-menu-trigger,
.downloads-back,
.pair-back-link,
.downloads-header .icon-button {
  border: 0;
  background: var(--lg-fill);
  box-shadow: var(--lg-rim), var(--lg-glow), var(--lg-lift);
  color: var(--text);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-f,) var(--lg-blur);
}

.header-command:hover,
.theme-toggle:hover,
.viewer-favorite:hover,
.route-menu-trigger:hover,
.route-menu-trigger.is-open,
.downloads-back:hover,
.pair-back-link:hover,
.downloads-header .icon-button:hover {
  background: var(--lg-fill-hover);
}

/* The account trigger hosts the account menu as a sibling inside .account-control, but its glass
   lives on a pseudo-element anyway so nothing it contains is ever trapped in its backdrop. */
.account-trigger {
  position: relative;
  isolation: isolate;
}

.account-trigger::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--lg-fill);
  box-shadow: var(--lg-rim), var(--lg-glow), var(--lg-lift);
  content: "";
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-f,) var(--lg-blur);
}

.account-trigger:hover::before,
.account-trigger[aria-expanded="true"]::before {
  background: var(--lg-fill-hover);
}

/* Tinted glass for the one primary action */
.account-login-button {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 55%),
    var(--accent);
  box-shadow:
    inset 0 0 0 .5px rgba(255, 255, 255, .35),
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -8px 14px -10px rgba(255, 255, 255, .55),
    0 6px 18px -6px color-mix(in srgb, var(--accent) 70%, transparent),
    0 1px 3px rgba(0, 0, 0, .18);
}

/* Popovers, sheets, dialogs and the toast share the panel version of the glass */
.playback-route-menu,
.account-menu,
.taxonomy-popover,
.import-dialog,
.toast,
.route-switch-card {
  border: 0;
  background: var(--lg-panel);
  box-shadow: var(--lg-rim), inset 0 -24px 40px -36px rgba(255, 255, 255, .35), var(--shadow-lg);
  -webkit-backdrop-filter: blur(28px) saturate(1.9) brightness(1.04);
  backdrop-filter: var(--lg-f,) blur(28px) saturate(1.9) brightness(1.04);
}

.route-switch-card {
  color: var(--text);
}

.route-switch-card small {
  color: var(--text-2);
}

/* ───────────────────────── Buttons ───────────────────────── */

.icon-button {
  display: inline-grid;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--text-2);
  place-items: center;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.icon-button svg {
  width: 20px;
  height: 20px;
}

.icon-button:hover {
  background: var(--fill-2);
  color: var(--text);
}

.icon-button:active {
  transform: scale(.92);
}

.primary-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 660;
  line-height: 20px;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}

.primary-button svg,
.secondary-button svg {
  width: 18px;
  height: 18px;
}

.primary-button {
  background: var(--accent);
  box-shadow: 0 8px 22px -8px var(--accent), inset 0 1px 0 rgba(255, 255, 255, .22);
  color: var(--on-accent);
}

.primary-button:hover {
  filter: brightness(1.08);
}

.secondary-button {
  border-color: var(--line-2);
  background: var(--fill-1);
  color: var(--text);
}

.secondary-button:hover {
  background: var(--fill-2);
}

.primary-button:active,
.secondary-button:active {
  transform: scale(.97);
}

.primary-button:disabled {
  opacity: .55;
  filter: none;
}

/* ───────────────────────── Header ───────────────────────── */

.app-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: calc(var(--hdr) + var(--safe-t));
  padding: var(--safe-t) calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l));
}

.brand-lockup a {
  display: block;
  border-radius: 8px;
}

.brand-lockup img,
.browser-sidebar-header img {
  width: auto;
  height: 30px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-command,
.theme-toggle,
.account-login-button,
.downloads-back,
.pair-back-link,
.route-trigger-copy {
  line-height: 20px;
}

.header-command,
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  min-width: 40px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 660;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.header-command svg,
.theme-toggle svg {
  width: 19px;
  height: 19px;
}

.header-command:hover,
.theme-toggle:hover {
  color: var(--text);
}

.header-command:active,
.theme-toggle:active {
  transform: scale(.94);
}

.header-command span {
  display: none;
}

.theme-toggle svg {
  transition: transform var(--t-slow) var(--spring);
}

.theme-toggle:active svg {
  transform: rotate(-30deg);
}

.account-login-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  margin-left: 4px;
  padding: 0 16px 0 14px;
  border-radius: 999px;
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 660;
  white-space: nowrap;
  transition: filter var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.account-login-button svg {
  width: 17px;
  height: 17px;
}

.account-login-button:hover {
  filter: brightness(1.08);
}

.account-login-button:active {
  transform: scale(.96);
}

/* Signed-in account */
.account-control {
  position: relative;
  margin-left: 4px;
}

.account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  color: var(--text);
  transition: background-color var(--t-fast) var(--ease);
}

.account-trigger:hover,
.account-trigger[aria-expanded="true"] {
}

.account-trigger > svg {
  display: none;
  width: 15px;
  height: 15px;
  color: var(--text-3);
  transition: transform var(--t) var(--ease);
}

.account-trigger[aria-expanded="true"] > svg {
  transform: rotate(180deg);
}

.account-trigger-copy {
  display: none;
  min-width: 0;
  text-align: left;
}

.account-trigger-copy strong {
  display: block;
  max-width: 140px;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 660;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-trigger-copy small {
  display: block;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 560;
  line-height: 14px;
}

.avatar {
  display: grid;
  flex: none;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--line-2);
  place-items: center;
}

.avatar.is-small {
  width: 32px;
  height: 32px;
}

.avatar-fallback {
  background: linear-gradient(140deg, #22d3ee, #4f8dff 48%, #ec4899);
  color: #fff;
  font-size: 15px;
  font-weight: 660;
}

.avatar-fallback.is-small {
  font-size: 13px;
}

.account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 5;
  display: grid;
  gap: 8px;
  width: min(340px, calc(100vw - 20px - var(--safe-l) - var(--safe-r)));
  max-height: calc(100dvh - var(--hdr) - var(--safe-t) - 24px);
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--r-xl);
  transform-origin: top right;
  animation: atv-pop var(--t) var(--ease-out) both;
}

@keyframes atv-pop {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to { opacity: 1; transform: none; }
}

.account-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 6px;
}

.account-summary > div {
  min-width: 0;
}

.account-summary strong {
  display: block;
  overflow: hidden;
  font-size: 16px;
  font-weight: 660;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-summary > div span {
  display: block;
  overflow: hidden;
  color: var(--text-3);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-service-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--fill-1);
}

.account-service-status > svg {
  width: 18px;
  height: 18px;
  color: var(--ok);
}

.account-service-status.is-error > svg {
  color: var(--danger);
}

.account-service-status.is-syncing > svg {
  color: var(--accent);
}

.account-service-status strong {
  display: block;
  font-size: 13px;
  font-weight: 660;
  line-height: 18px;
}

.account-service-status span {
  display: block;
  color: var(--text-3);
  font-size: 11.5px;
  line-height: 16px;
}

.account-relay-quota,
.account-caption-quota {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--fill-1);
}

.account-relay-quota-gauge {
  position: relative;
  width: 72px;
  height: 72px;
}

.account-relay-quota-gauge svg {
  width: 72px;
  height: 72px;
  transform: rotate(-90deg);
}

.account-relay-quota-ring-track,
.account-relay-quota-ring-value {
  fill: none;
  stroke-width: 6;
}

.account-relay-quota-ring-track {
  stroke: var(--fill-3);
}

.account-relay-quota-ring-value {
  stroke: var(--accent);
  stroke-dasharray: 100;
  stroke-dashoffset: var(--relay-quota-offset, 100);
  stroke-linecap: round;
  transition: stroke-dashoffset .6s var(--ease-out);
}

.account-caption-quota .account-relay-quota-ring-value {
  stroke: #2dd4bf;
}

.account-relay-quota.is-loading .account-relay-quota-ring-value,
.account-caption-quota.is-loading .account-relay-quota-ring-value {
  stroke-dashoffset: 75;
  animation: atv-spin 1.1s linear infinite;
  transform-origin: center;
}

.account-relay-quota-gauge > div {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
}

.account-relay-quota-gauge strong {
  font-size: 18px;
  font-weight: 660;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.account-relay-quota-gauge span {
  margin-top: 3px;
  color: var(--text-3);
  font-size: 9.5px;
  font-weight: 660;
}

.account-relay-quota-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.account-relay-quota-title span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 660;
}

.account-relay-quota-title svg {
  width: 15px;
  height: 15px;
}

.account-relay-quota-title em {
  color: var(--text-3);
  font-size: 11.5px;
  font-style: normal;
  white-space: nowrap;
}

.account-relay-quota-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.account-relay-quota-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-3);
  font-size: 11px;
}

.account-relay-quota-stats svg {
  width: 12px;
  height: 12px;
}

.account-relay-quota-stats strong {
  font-size: 15px;
  font-weight: 660;
  font-variant-numeric: tabular-nums;
}

.account-relay-quota-stats small {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 560;
}

.account-menu nav {
  display: grid;
  gap: 2px;
  padding: 4px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.account-menu nav a,
.account-menu nav button,
.logout-button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 14px;
  font-weight: 560;
  text-align: left;
  transition: background-color var(--t-fast) var(--ease);
}

.account-menu nav svg,
.logout-button svg {
  width: 18px;
  height: 18px;
  color: var(--text-2);
}

.account-menu nav a:hover,
.account-menu nav button:hover,
.logout-button:hover {
  background: var(--fill-2);
}

.logout-button {
  color: var(--danger);
}

.logout-button svg {
  color: currentColor;
}

/* ───────────────────────── Sidebar & channel browser ───────────────────────── */

.browser-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.browser-sidebar-header a {
  display: block;
  border-radius: 8px;
}

.library-panel {
  display: none;
}

.library-source {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.library-source > svg {
  width: 18px;
  height: 18px;
  color: var(--text-3);
}

.library-source > div {
  flex: 1;
  min-width: 0;
}

.library-source strong,
.library-source span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-source strong {
  font-size: 13px;
  font-weight: 660;
  line-height: 18px;
}

.library-source span {
  color: var(--text-3);
  font-size: 11.5px;
  line-height: 16px;
}

.library-source .icon-button {
  width: 36px;
  height: 36px;
}

.channel-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.channel-column > * {
  flex: none;
}

.channel-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
}

.channel-column-head h1 {
  min-width: 0;
  overflow: hidden;
  font-size: 22px;
  font-weight: 660;
  letter-spacing: .01em;
  line-height: 28px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-head-actions {
  display: flex;
  gap: 4px;
}

.channel-head-actions .icon-button {
  width: 38px;
  height: 38px;
}

/* Search */
.search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 6px 0 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--fill-2);
  color: var(--text-3);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.search-field > svg {
  width: 17px;
  height: 17px;
}

.search-field:focus-within {
  border-color: var(--accent-line);
  background: var(--fill-1);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.search-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-weight: 560;
  outline: none;
}

.search-field input::placeholder {
  color: var(--text-3);
  opacity: 1;
}

.search-field button {
  display: grid;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--text-2);
  place-items: center;
  transition: background-color var(--t-fast) var(--ease);
}

.search-field button::before {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fill-3);
  content: "";
}

.search-field button svg {
  position: relative;
  width: 12px;
  height: 12px;
  stroke-width: 3;
}

/* Segmented view switch */
.mobile-filter-tabs {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--fill-2);
}

.mobile-filter-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: 32px;
  padding: 0 6px;
  border-radius: 9px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 660;
  white-space: nowrap;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.mobile-filter-tabs button svg {
  width: 15px;
  height: 15px;
}

.mobile-filter-tabs button:hover {
  color: var(--text);
}

.mobile-filter-tabs button.is-active {
  background: var(--lg-fill-hover);
  box-shadow: var(--lg-rim), var(--lg-glow), 0 2px 8px rgba(0, 0, 0, .18);
  color: var(--text);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-f,) var(--lg-blur);
}

/* Category chips */
.mobile-group-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.mobile-group-scroll::-webkit-scrollbar {
  display: none;
}

.mobile-group-scroll button {
  flex: none;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 660;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.mobile-group-scroll button:hover {
  background: var(--fill-2);
  color: var(--text);
}

.mobile-group-scroll button:active {
  transform: scale(.95);
}

.mobile-group-scroll button.is-active {
  background: var(--chip-on);
  color: var(--chip-on-text);
}

/* International facets */
.international-taxonomy {
  position: relative;
  z-index: 3;
}

.international-taxonomy-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.taxonomy-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  height: 50px;
  padding: 0 10px 0 12px;
  border: 0;
  border-radius: 12px;
  background: var(--fill-2);
  text-align: left;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.taxonomy-trigger:hover {
  background: var(--fill-3);
}

.taxonomy-trigger.is-active {
  background: var(--accent-soft);
}

.taxonomy-trigger > svg {
  width: 15px;
  height: 15px;
  color: var(--text-3);
  transition: transform var(--t) var(--ease);
}

.taxonomy-trigger.is-open > svg {
  transform: rotate(180deg);
}

.taxonomy-trigger-copy {
  display: grid;
  min-width: 0;
}

.taxonomy-trigger-kicker {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 660;
  line-height: 14px;
}

.taxonomy-trigger-kicker svg {
  width: 12px;
  height: 12px;
}

.taxonomy-trigger-kicker em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.taxonomy-trigger-kicker em::before {
  margin-right: 4px;
  content: "·";
}

.taxonomy-trigger-copy strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 660;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.taxonomy-trigger.is-active .taxonomy-trigger-copy strong {
  color: var(--accent-text);
}

.taxonomy-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  max-height: min(360px, 52dvh);
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--r-lg);
  transform-origin: top center;
  animation: atv-pop var(--t) var(--ease-out) both;
}

.taxonomy-popover-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 10px 8px;
}

.taxonomy-popover-head strong {
  font-size: 13px;
  font-weight: 660;
}

.taxonomy-popover-head span {
  color: var(--text-3);
  font-size: 11.5px;
}

.taxonomy-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

.taxonomy-option-grid button {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 560;
  text-align: left;
  transition: background-color var(--t-fast) var(--ease);
}

.taxonomy-option-grid button:hover,
.taxonomy-option-grid button:focus-visible {
  background: var(--fill-2);
}

.taxonomy-option-grid button > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.taxonomy-option-grid small {
  color: var(--text-3);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.taxonomy-option-grid button > svg {
  display: none;
  width: 15px;
  height: 15px;
  color: var(--accent);
}

.taxonomy-option-grid button.is-selected {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.taxonomy-option-grid button.is-selected small {
  display: none;
}

.taxonomy-option-grid button.is-selected > svg {
  display: block;
}

/* Channel rows */
.channel-list {
  display: grid;
  align-content: start;
  gap: 2px;
}

.channel-row {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  border-radius: var(--r-md);
  transition: background-color var(--t-fast) var(--ease);
  content-visibility: auto;
  contain-intrinsic-size: auto 68px;
}

.channel-row:hover {
  background: var(--fill-1);
}

.channel-row.is-active {
  background: var(--accent-soft);
}

.channel-play {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  height: 68px;
  padding: 0 4px 0 8px;
  border-radius: inherit;
  text-align: left;
}

.channel-play:active {
  transform: scale(.985);
}

/* ── Channel logos ──
   Every slot is a fixed 3:2 box so names line up; tv.js fills it with the curated artwork for the
   current theme (--logo-d / --logo-l) at an optically balanced size (--lw-* × --lh-*).
   Channels without curated art (custom playlists) keep the bundle's image or initials. */
.channel-logo,
.recent-channel-logo {
  position: relative;
  display: grid;
  flex: none;
  width: var(--slot-w, 72px);
  height: var(--slot-h, 48px);
  overflow: hidden;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 660;
  place-items: center;
}

.recent-channel-logo {
  --slot-w: 54px;
  --slot-h: 36px;
  border-radius: 8px;
}

.channel-logo > img,
.recent-channel-logo > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.channel-logo > span,
.recent-channel-logo > span,
.viewer-channel-brand > span {
  display: grid;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--fill-2);
  color: var(--text-2);
  font-weight: 660;
  line-height: 1;
  place-items: center;
}

[data-atv-logo] > img,
[data-atv-logo] > span {
  display: none !important;
}

.channel-logo[data-atv-logo]::before,
.recent-channel-logo[data-atv-logo]::before,
.viewer-channel-brand[data-atv-logo]::before {
  display: block;
  flex: none;
  width: 100%;
  height: 100%;
  background: var(--logo-d) center / var(--lw-d) var(--lh-d) no-repeat;
  content: "";
}

:root[data-theme="light"] .channel-logo[data-atv-logo]::before,
:root[data-theme="light"] .recent-channel-logo[data-atv-logo]::before,
:root[data-theme="light"] .viewer-channel-brand[data-atv-logo]::before {
  background-image: var(--logo-l);
  background-size: var(--lw-l) var(--lh-l);
}

.viewer-channel-brand > img,
.viewer-channel-brand > span {
  flex: none;
  width: var(--brand-w, 66px);
  height: var(--brand-h, 44px);
  border-radius: 10px;
  object-fit: contain;
}

.viewer-channel-brand[data-atv-logo]::before {
  width: var(--brand-w, 66px);
  height: var(--brand-h, 44px);
}

.channel-copy {
  display: grid;
  flex: 1;
  min-width: 0;
}

.channel-copy strong,
.channel-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-copy strong {
  font-size: 15px;
  font-weight: 660;
  line-height: 20px;
}

.channel-copy small {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 560;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
}

.channel-row.is-active .channel-copy strong {
  color: var(--accent-text);
}

.play-indicator {
  display: grid;
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--text-3);
  opacity: 0;
  place-items: center;
  transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.play-indicator svg {
  width: 14px;
  height: 14px;
}

.channel-row:hover .play-indicator {
  opacity: 1;
}

/* Playing row: live equaliser in place of the icon */
.channel-row.is-active .play-indicator {
  color: var(--accent);
  opacity: 1;
}

.channel-row.is-active .play-indicator svg {
  display: none;
}

.channel-row.is-active .play-indicator::before {
  width: 16px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 3px 45% no-repeat,
    linear-gradient(currentColor, currentColor) 50% 100% / 3px 80% no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 3px 60% no-repeat;
  content: "";
}

.app-shell:has(.player-stage.is-playing) .channel-row.is-active .play-indicator::before {
  animation: atv-eq 1s ease-in-out infinite;
}

@keyframes atv-eq {
  0%, 100% { background-size: 3px 45%, 3px 80%, 3px 60%; }
  25% { background-size: 3px 85%, 3px 40%, 3px 75%; }
  50% { background-size: 3px 35%, 3px 95%, 3px 40%; }
  75% { background-size: 3px 70%, 3px 55%, 3px 95%; }
}

.favorite-button {
  display: grid;
  flex: none;
  width: 40px;
  height: 40px;
  margin-right: 7px;
  border-radius: 50%;
  color: var(--text-3);
  place-items: center;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.favorite-button svg {
  width: 18px;
  height: 18px;
}

.favorite-button:hover {
  background: var(--fill-2);
  color: var(--text);
}

.favorite-button:active {
  transform: scale(.86);
}

.favorite-button.is-active {
  color: var(--heart);
}

.favorite-button.is-active svg {
  animation: atv-heart .38s var(--spring);
}

@keyframes atv-heart {
  0% { transform: scale(.6); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@media (hover: hover) and (pointer: fine) {
  .channel-row .favorite-button:not(.is-active) {
    opacity: 0;
  }

  .channel-row:hover .favorite-button,
  .channel-row:focus-within .favorite-button {
    opacity: 1;
  }
}

.list-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 40px 20px;
  color: var(--text-2);
  text-align: center;
}

.list-empty > svg {
  width: 26px;
  height: 26px;
  margin-bottom: 4px;
  color: var(--text-3);
}

.list-empty strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 660;
}

.list-empty p {
  max-width: 260px;
  font-size: 13px;
}

.list-empty .secondary-button {
  min-height: 38px;
  margin-top: 8px;
  font-size: 14px;
}

/* Collapsed sidebar rail (split layout only) */
.collapsed-sidebar-rail {
  display: none;
}

/* ───────────────────────── Stage ───────────────────────── */

.viewer-heading {
  min-width: 0;
}

.viewer-channel-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.viewer-channel-brand > img {
  object-fit: contain;
}

.viewer-channel-brand::after {
  min-width: 0;
  overflow: hidden;
  font-size: 18px;
  font-weight: 660;
  letter-spacing: .01em;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
  content: attr(title);
}

.player-stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--player-r);
  view-transition-name: iptv-player;
}

/* Hairline + depth around the screen */
.player-frame,
.player-empty {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: var(--stage-shadow);
}

/* A lit screen casts light, not a shadow: the drop shadow goes while the ambient light is on */
.player-frame {
  transition: box-shadow 1.1s var(--ease);
}

.player-stage:has(> .atv-ambient.is-on) .player-frame {
  box-shadow: none;
}

/* No black under the video: a rounded black layer beneath a separately rounded video leaves a
   dark hairline where the two anti-aliased edges overlap. Artplayer's own box supplies black
   for letterboxed streams, and it is clipped once, together with the video. */
.player-frame {
  background: transparent;
}

.player-frame::after,
.player-empty::after {
  position: absolute;
  inset: 0;
  z-index: 60;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .06);
  content: "";
  pointer-events: none;
}

.artplayer-host {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: transparent;
  -webkit-clip-path: inset(0 round var(--player-r));
  clip-path: inset(0 round var(--player-r));
  transform: translateZ(0);
}

.artplayer-host > .art-video-player {
  border-radius: 0;
  -webkit-clip-path: none;
  clip-path: none;
}

.app-shell:has(.art-fullscreen, .art-fullscreen-web) .artplayer-host {
  -webkit-clip-path: none;
  clip-path: none;
  transform: none;
}

.artplayer-host video {
  width: 100% !important;
  height: 100% !important;
}

/* A 16:9 stream in a box rounded to whole pixels can be a fraction of a pixel narrower than the
   box; "contain" then shows sub-pixel black bars at the sides. When the aspect ratios are within
   3 % tv.js sets data-atv-fill and the video covers the box instead (crop is under 2 px). */
.artplayer-host[data-atv-fill] > .art-video-player:not(.art-fullscreen):not(.art-fullscreen-web) video {
  object-fit: cover !important;
}

/* Broadcast feeds often carry a dark blanking column or two at the very edge of the picture
   (measured: the first two source pixels of a 960-wide feed at luminance 39 and 107 against ~170).
   Televisions hide it with overscan; so does the inline player: 0.8 % per edge, about 2 px of a
   540p feed. Fullscreen shows the full picture, where the edge meets black anyway. */
.artplayer-host > .art-video-player:not(.art-fullscreen):not(.art-fullscreen-web) video {
  transform: scale(1.016);
  transform-origin: center;
}

/* Lift the player above every other layer while it is in web fullscreen */
.app-shell:has(.art-fullscreen-web) .player-stage,
.app-shell:has(.art-fullscreen-web) .viewer-panel,
.app-shell:has(.art-fullscreen-web) .workspace {
  z-index: 500 !important;
}

.app-shell:has(.art-fullscreen-web) .player-stage::before,
.app-shell:has(.art-fullscreen-web) .atv-ambient {
  display: none;
}

/* Content around the screen always paints above its light */
.viewer-heading,
.stream-meta,
.playback-tools,
.programme-guide,
.recent-channel-rail,
.getting-started {
  position: relative;
  z-index: 1;
}

.playback-tools.is-route-menu-open {
  z-index: 40;
}

/* Ambient light (canvases injected by aulama-tv-ambient.js) */
.atv-ambient {
  --glow-out: 0px;
  position: absolute;
  inset: calc(-1 * var(--glow-out));
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.1s var(--ease);
}

.atv-ambient-back {
  position: fixed;
  inset: auto;
  z-index: -1;
  border-radius: var(--player-r);
}

.atv-ambient-back canvas {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.atv-ambient.is-on {
  opacity: 1;
}

.atv-ambient.is-dim {
  opacity: .45;
  transition-duration: .5s;
}

.atv-ambient canvas {
  position: absolute;
  top: var(--glow-out);
  left: var(--glow-out);
  width: calc(100% - 2 * var(--glow-out));
  height: calc(100% - 2 * var(--glow-out));
  border-radius: var(--player-r);
}

.atv-ambient-bloom {
  opacity: .82;
  filter: blur(clamp(48px, 6vw, 96px)) saturate(1.7) brightness(1.18);
  transform: scale(1.2, 1.36);
}

.atv-ambient-halo {
  opacity: .86;
  filter: blur(clamp(18px, 2.2vw, 30px)) saturate(1.45) brightness(1.06);
  transform: scale(1.045, 1.08);
}

:root[data-theme="light"] .atv-ambient-bloom {
  opacity: .64;
  filter: blur(clamp(48px, 6vw, 96px)) saturate(1.9) brightness(1.18);
  mix-blend-mode: multiply;
}

:root[data-theme="light"] .atv-ambient-halo {
  opacity: .52;
  filter: blur(clamp(18px, 2.2vw, 30px)) saturate(1.6) brightness(1.1);
  mix-blend-mode: multiply;
}

/* Idle screen: a quiet brand-tinted glow instead of a black void */
.player-stage.is-idle::after {
  position: absolute;
  inset: -6% -4%;
  z-index: -1;
  border-radius: calc(var(--player-r) * 2);
  background:
    radial-gradient(50% 60% at 18% 30%, rgba(34, 211, 238, .22), transparent 70%),
    radial-gradient(50% 60% at 82% 70%, rgba(236, 72, 153, .2), transparent 70%),
    radial-gradient(60% 70% at 50% 50%, rgba(79, 141, 255, .22), transparent 70%);
  content: "";
  filter: blur(40px);
  opacity: .8;
  pointer-events: none;
}

.player-empty {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(80% 90% at 50% 0%, rgba(79, 141, 255, .16), transparent 62%),
    radial-gradient(70% 70% at 50% 120%, rgba(236, 72, 153, .1), transparent 60%),
    #07090e;
  color: #f2f4f8;
  text-align: center;
}

.player-empty-icon {
  display: grid;
  width: 60px;
  height: 60px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  color: #8ab4ff;
  place-items: center;
}

.player-empty-icon svg {
  width: 26px;
  height: 26px;
}

.player-empty strong {
  font-size: 19px;
  font-weight: 660;
  letter-spacing: .01em;
}

.player-empty p {
  max-width: 360px;
  color: rgba(226, 232, 243, .6);
  font-size: 13.5px;
  line-height: 22px;
}

/* Route switching cover */
.route-switch-cover {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  border-radius: inherit;
  pointer-events: none;
  place-items: center;
}

.route-switch-card {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 32px);
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
  color: #f2f4f8;
  animation: atv-pop var(--t) var(--ease-out) both;
}

.route-switch-card > div {
  display: grid;
  min-width: 0;
}

.route-switch-card strong {
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
  font-weight: 660;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-switch-card small {
  color: rgba(226, 232, 243, .62);
  font-size: 12px;
  line-height: 18px;
}

.route-pulse {
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.route-pulse::after {
  position: absolute;
  inset: -5px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  content: "";
  animation: atv-ping 1.2s var(--ease-out) infinite;
}

@keyframes atv-ping {
  from { opacity: .9; transform: scale(.5); }
  to { opacity: 0; transform: scale(1.6); }
}

/* Restricted / client-required */
.client-required {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: clamp(16px, 4vw, 40px);
  border-radius: inherit;
  background:
    radial-gradient(70% 80% at 50% 0%, rgba(79, 141, 255, .18), transparent 65%),
    rgba(6, 8, 13, .94);
  color: #f2f4f8;
  text-align: center;
}

.client-required-icon {
  display: grid;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  color: #8ab4ff;
  place-items: center;
}

.client-required-icon svg {
  width: 24px;
  height: 24px;
}

.client-required strong {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 660;
}

.client-required p {
  max-width: 440px;
  color: rgba(226, 232, 243, .66);
  font-size: 13.5px;
  line-height: 22px;
}

.client-required-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.client-required .primary-button,
.client-required .secondary-button {
  min-height: 42px;
  font-size: 14px;
}

.client-required .secondary-button {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: #f2f4f8;
}

/* Small screens: the restriction notice must fit inside a ~200px-tall player */
@media (max-width: 699px), (orientation: landscape) and (max-height: 539px) {
  .client-required {
    gap: 4px;
    padding: 12px 16px;
  }

  .client-required-icon {
    display: none;
  }

  .client-required strong {
    font-size: 15px;
  }

  .client-required p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .client-required-actions {
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 8px;
  }

  .client-required .primary-button,
  .client-required .secondary-button {
    gap: 6px;
    min-height: 34px;
    padding: 0 14px;
    font-size: 13px;
  }

  .client-required .primary-button svg,
  .client-required .secondary-button svg {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 380px) {
  .client-required .primary-button svg,
  .client-required .secondary-button svg {
    display: none;
  }
}

/* Status + actions under the screen */
.stream-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  min-width: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 20px;
}

.stream-meta > div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.stream-meta > div > span:last-child {
  overflow: hidden;
  color: var(--text-2);
  font-weight: 660;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stream-meta small {
  color: var(--text-3);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.status-mark {
  display: grid;
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--text-3);
  place-items: center;
}

.status-mark svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}

.status-mark.is-playing,
.status-mark.is-ready {
  color: var(--ok);
}

.status-mark.is-loading {
  color: var(--accent);
}

.status-mark.is-loading svg {
  animation: atv-breathe 1.4s ease-in-out infinite;
}

.status-mark.is-warning {
  color: var(--warn);
}

.status-mark.is-error,
.status-mark.is-restricted {
  color: var(--danger);
}

@keyframes atv-breathe {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

.playback-tools {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.viewer-favorite,
.route-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--text);
  font-size: 14px;
  font-weight: 660;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.viewer-favorite:hover,
.route-menu-trigger:hover,
.route-menu-trigger.is-open {
}

.viewer-favorite:active,
.route-menu-trigger:active {
  transform: scale(.96);
}

.viewer-favorite svg {
  width: 18px;
  height: 18px;
}

.viewer-favorite.is-active {
  background: color-mix(in srgb, var(--heart) 14%, transparent);
  color: var(--heart);
}

.viewer-favorite.is-active svg {
  animation: atv-heart .38s var(--spring);
}

.route-menu-trigger > svg:first-child {
  width: 16px;
  height: 16px;
  color: var(--text-2);
}

.route-menu-trigger > svg:last-child {
  width: 14px;
  height: 14px;
  color: var(--text-3);
  transition: transform var(--t) var(--ease);
}

.route-menu-trigger.is-open > svg:last-child {
  transform: rotate(180deg);
}

.route-trigger-copy {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.route-trigger-copy small {
  display: none;
}

.route-active-label {
  max-width: 120px;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 660;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-active-label.is-fallback {
  color: var(--warn);
}

/* Route menu */
.playback-route-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 35;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 24px));
  max-height: min(600px, calc(100dvh - 160px));
  overflow: hidden;
  border-radius: var(--r-2xl);
  transform-origin: bottom right;
  animation: atv-pop-up var(--t) var(--ease-out) both;
}

@keyframes atv-pop-up {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to { opacity: 1; transform: none; }
}

.route-menu-dialog-head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px 6px 20px;
}

.route-menu-dialog-head strong {
  font-size: 17px;
  font-weight: 660;
}

.route-menu-dialog-head button {
  display: grid;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--fill-2);
  color: var(--text-2);
  place-items: center;
  transition: background-color var(--t-fast) var(--ease);
}

.route-menu-dialog-head button:hover {
  background: var(--fill-3);
  color: var(--text);
}

.route-menu-dialog-head button svg {
  width: 16px;
  height: 16px;
}

.route-menu-body {
  display: grid;
  gap: 18px;
  min-height: 0;
  padding: 8px 16px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.route-current-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--fill-1);
  box-shadow: inset 0 0 0 1px var(--line);
}

.route-current-dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 20%, transparent);
}

.route-current-status.is-fallback .route-current-dot {
  background: var(--warn);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 20%, transparent);
}

.route-current-status.is-error .route-current-dot {
  background: var(--danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 20%, transparent);
}

.route-current-status > div {
  display: grid;
  min-width: 0;
}

.route-current-status small {
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 660;
}

.route-current-status strong {
  font-size: 16px;
  font-weight: 660;
  line-height: 22px;
}

.route-current-note {
  grid-column: 2;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 20px;
}

.route-current-note:empty {
  display: none;
}

.route-current-status.is-error .route-current-note {
  color: var(--danger);
}

.route-menu-body section {
  display: grid;
  gap: 8px;
}

.route-menu-label {
  padding: 0 2px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 660;
  letter-spacing: .04em;
}

.connection-mode-options {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 2px;
  padding: 3px;
  border-radius: 14px;
  background: var(--fill-2);
}

.connection-mode-options button {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1px;
  min-width: 0;
  height: 50px;
  padding: 0 2px;
  border-radius: 11px;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 660;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.connection-mode-options button:hover {
  color: var(--text);
}

.connection-mode-options button.is-preferred {
  background: var(--seg-on);
  box-shadow: var(--seg-on-shadow);
  color: var(--text);
}

.connection-mode-options button small {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  overflow: hidden;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 660;
  white-space: nowrap;
}

.connection-mode-options button small svg {
  width: 10px;
  height: 10px;
}

.connection-mode-options button.is-current::after {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  content: "";
}

.connection-mode-options button.is-unavailable small {
  color: var(--danger);
}

.connection-mode-options button.is-locked {
  color: var(--text-3);
}

.route-mode-help {
  padding: 0 2px;
  color: var(--text-3);
  font-size: 12px;
  line-height: 20px;
}

.playback-route-list {
  display: grid;
  gap: 4px;
}

.playback-route-list > button,
.route-option > button:first-child {
  display: grid;
  flex: 1;
  align-content: center;
  min-width: 0;
  min-height: 54px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  text-align: left;
  transition: background-color var(--t-fast) var(--ease);
}

.playback-route-list > button:hover,
.route-option > button:first-child:hover {
  background: var(--fill-1);
}

.playback-route-list > button span,
.route-option > button:first-child span {
  font-size: 14.5px;
  font-weight: 660;
}

.playback-route-list > button small,
.route-option > button:first-child small {
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playback-route-list > button.is-active,
.route-option.is-active > button:first-child {
  background: var(--accent-soft);
}

.playback-route-list > button.is-active span,
.route-option.is-active > button:first-child span {
  color: var(--accent-text);
}

.route-option {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.route-priority-button {
  position: relative;
  display: grid;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--text-3);
  place-items: center;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.route-priority-button:hover {
  background: var(--fill-2);
  color: var(--text);
}

.route-priority-button svg {
  width: 18px;
  height: 18px;
}

.route-priority-button.is-active {
  color: var(--warn);
}

.route-priority-button small {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: grid;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--warn);
  color: #1a1203;
  font-size: 9.5px;
  font-weight: 740;
  line-height: 10px;
  place-items: center;
}

/* ───────────────────────── Programme guide ───────────────────────── */

/* Plain typography on the page: no boxes, a hairline above separates it from the controls */
.programme-guide {
  min-width: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  view-transition-name: iptv-guide;
}

.programme-guide-header {
  display: none;
}

.programme-timeline {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.programme-current {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.programme-heading {
  display: grid;
  justify-items: start;
  gap: 4px;
  min-width: 0;
}

.programme-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--live);
  font-size: 13px;
  font-weight: 660;
  line-height: 18px;
}

.programme-kicker svg {
  display: none;
}

.programme-kicker::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  animation: atv-live 2s ease-out infinite;
}

@keyframes atv-live {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}

.programme-heading h2 {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  font-size: 20px;
  font-weight: 660;
  line-height: 28px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.programme-category {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 660;
  line-height: 16px;
}

.programme-timing {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--text-3);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
}

.programme-remaining {
  color: var(--text-2);
  font-weight: 660;
}

.programme-remaining::before {
  margin-right: 12px;
  color: var(--text-3);
  content: "·";
}

.programme-progress {
  position: relative;
  height: 3px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--fill-3);
}

.programme-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--accent);
  transition: width 1s var(--ease);
}

.programme-description {
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  color: var(--text-2);
  font-size: 14px;
  line-height: 22px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.programme-up-next {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
}

.programme-next-label {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 660;
  line-height: 18px;
}

.programme-next-label svg {
  display: none;
}

.programme-up-next ol {
  display: grid;
  min-width: 0;
}

.programme-up-next li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  min-width: 0;
  padding: 9px 0;
}

.programme-up-next li + li {
  border-top: 1px solid var(--line);
}

.programme-up-next li:nth-child(n + 4) {
  display: none;
}

.programme-slot {
  min-width: 0;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 660;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  white-space: nowrap;
}

.programme-order {
  display: none;
}

.programme-up-next li.is-next .programme-slot {
  color: var(--accent-text);
}

.programme-up-next li strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 660;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.programme-up-next li.is-next strong {
  color: var(--text);
}

/* EPG missing: one quiet line */
.programme-guide.is-unavailable {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 13px;
  line-height: 18px;
}

.programme-guide.is-unavailable > svg {
  width: 16px;
  height: 16px;
}

.programme-guide.is-unavailable > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
}

.programme-guide.is-unavailable strong {
  color: var(--text-2);
  font-weight: 660;
}

.programme-guide.is-unavailable span::before {
  margin-right: 8px;
  content: "·";
}

/* EPG loading */
.programme-guide.is-loading {
  display: grid;
  gap: 20px;
}

.programme-skeleton-current,
.programme-skeleton-item {
  display: grid;
  gap: 9px;
}

.programme-skeleton-list {
  display: grid;
  gap: 14px;
}

.programme-skeleton-item {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
}

.programme-skeleton-item:nth-child(n + 4) {
  display: none;
}

.programme-skeleton {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--fill-2) 0%, var(--fill-3) 50%, var(--fill-2) 100%) 0 0 / 200% 100%;
  animation: atv-shimmer 1.4s linear infinite;
}

.programme-skeleton.is-kicker { width: 64px; height: 10px; }
.programme-skeleton.is-current-title { width: 70%; height: 18px; }
.programme-skeleton.is-meta { width: 40%; }
.programme-skeleton.is-progress { width: 100%; height: 3px; }
.programme-skeleton.is-time { width: 80%; }
.programme-skeleton.is-programme-title { width: 70%; }

@keyframes atv-shimmer {
  to { background-position: -200% 0; }
}

/* Nothing playing: the idle screen already says so */
.workspace:has(.player-stage.is-idle) .stream-meta {
  display: none;
}

/* ───────────────────────── Recent channels ───────────────────────── */

.recent-channel-rail {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.recent-channel-heading strong {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 660;
  line-height: 18px;
}

.recent-channel-list {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.recent-channel-list::-webkit-scrollbar {
  display: none;
}

.recent-channel-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  max-width: 240px;
  height: 52px;
  margin-left: -8px;
  padding: 0 14px 0 8px;
  border-radius: 14px;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.recent-channel-button + .recent-channel-button {
  margin-left: 0;
}

.recent-channel-button:hover {
  background: var(--fill-1);
}

.recent-channel-button:active {
  transform: scale(.97);
}

.recent-channel-button strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 660;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ───────────────────────── First-run steps ───────────────────────── */

/* Retired: the idle screen and the channel list already explain what to do */
.getting-started {
  display: none !important;
}

/* ───────────────────────── Import dialog ───────────────────────── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  padding: max(16px, var(--safe-t)) max(16px, var(--safe-r)) max(16px, var(--safe-b)) max(16px, var(--safe-l));
  overflow-y: auto;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  place-items: center;
  animation: atv-fade var(--t) var(--ease) both;
}

@keyframes atv-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.import-dialog {
  display: grid;
  gap: 18px;
  width: min(520px, 100%);
  padding: 22px;
  border-radius: var(--r-2xl);
  animation: atv-dialog var(--t-slow) var(--ease-out) both;
}

@keyframes atv-dialog {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dialog-head .icon-button {
  width: 34px;
  height: 34px;
  margin: -4px -6px 0 0;
  border-radius: 50%;
  background: var(--fill-2);
}

.dialog-head .icon-button svg {
  width: 17px;
  height: 17px;
}

.eyebrow {
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 660;
  letter-spacing: .06em;
}

.dialog-head h2 {
  margin-top: 2px;
  font-size: 22px;
  font-weight: 660;
  line-height: 30px;
}

.mode-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  padding: 3px;
  border-radius: 13px;
  background: var(--fill-2);
}

.mode-tabs button {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  padding: 8px 2px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 660;
  white-space: nowrap;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.mode-tabs button svg {
  width: 18px;
  height: 18px;
}

.mode-tabs button.is-active {
  background: var(--seg-on);
  box-shadow: var(--seg-on-shadow);
  color: var(--text);
}

.import-dialog form {
  display: grid;
  gap: 16px;
}

.field-stack {
  display: grid;
  gap: 8px;
}

.field-stack label {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 660;
}

.field-stack label:not(:first-child) {
  margin-top: 6px;
}

.field-stack input,
.field-stack textarea {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--fill-1);
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.field-stack textarea {
  min-height: 150px;
  padding: 12px 14px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 22px;
  resize: vertical;
}

.field-stack input::placeholder,
.field-stack textarea::placeholder {
  color: var(--text-3);
}

.field-stack input:focus,
.field-stack textarea:focus {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.field-help {
  color: var(--text-3);
  font-size: 12.5px;
  line-height: 20px;
}

.file-drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 30px 20px;
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-lg);
  background: var(--fill-1);
  color: var(--text-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.file-drop:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.file-drop svg {
  width: 28px;
  height: 28px;
  color: var(--accent);
}

.file-drop strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 660;
}

.file-drop span {
  font-size: 12.5px;
}

.file-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.test-stream-button {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--fill-2);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 660;
}

.test-stream-button svg {
  width: 15px;
  height: 15px;
}

.form-error {
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  font-size: 13px;
  line-height: 20px;
}

.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.dialog-actions p {
  color: var(--text-3);
  font-size: 12.5px;
}

/* ───────────────────────── Toast ───────────────────────── */

.toast {
  position: fixed;
  bottom: calc(20px + var(--safe-b));
  left: 50%;
  z-index: 110;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(520px, calc(100vw - 32px));
  padding: 11px 18px 11px 14px;
  border-radius: 999px;
  color: var(--text);
  font-size: 14px;
  font-weight: 660;
  transform: translateX(-50%);
  animation: atv-toast var(--t-slow) var(--spring) both;
}

.toast svg {
  width: 18px;
  height: 18px;
  color: var(--ok);
}

@keyframes atv-toast {
  from { opacity: 0; transform: translate(-50%, 14px) scale(.96); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ───────────────────────── Artplayer skin ───────────────────────── */

.art-video-player {
  --art-theme: var(--accent) !important;
  --art-font-color: #fff;
  --art-border-radius: 12px;
  --art-widget-background: rgba(18, 21, 28, .88);
  --art-tip-background: rgba(18, 21, 28, .88);
  --art-progress-height: 4px;
  --art-control-opacity: .9;
  font-family: var(--font) !important;
}

.art-video-player .art-bottom {
  padding-right: 14px;
  padding-left: 14px;
  background-image: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .28) 55%, transparent) !important;
}

.art-video-player .art-settings,
.art-video-player .art-selector-list,
.art-video-player .art-contextmenus {
  border: 1px solid rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
}

/* Live captions */
.art-video-player .live-caption-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 clamp(18px, 5vw, 76px) max(70px, calc(var(--safe-b) + 58px));
  color: #fff;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s step-start;
}

.art-video-player .live-caption-overlay[data-mode="off"] {
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s ease, visibility .15s step-end;
}

.art-video-player .live-caption-surface {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(96%, 1080px);
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity .18s ease, transform .24s var(--ease);
}

.art-video-player .live-caption-overlay.has-caption .live-caption-surface {
  opacity: 1;
  transform: none;
}

.art-video-player .live-caption-english,
.art-video-player .live-caption-zh-hant {
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
  color: #fff;
  text-align: center;
  text-wrap: balance;
  -webkit-text-stroke: .85px rgba(0, 0, 0, .95);
  paint-order: stroke fill;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 2px 6px rgba(0, 0, 0, .8);
}

.art-video-player .live-caption-english {
  order: 2;
  font-size: clamp(16px, 2vw, 26px);
  font-weight: 660;
  line-height: 1.32;
  opacity: .96;
  transition: opacity .16s ease;
}

.art-video-player .live-caption-overlay[data-final="false"] .live-caption-english {
  opacity: .7;
}

.art-video-player .live-caption-zh-hant {
  order: 1;
  margin-bottom: 5px;
  font-size: clamp(20px, 2.7vw, 36px);
  font-weight: 740;
  line-height: 1.3;
}

.art-video-player .live-caption-zh-hant.is-new-final {
  animation: atv-caption-in .26s var(--ease) both;
}

@keyframes atv-caption-in {
  from { opacity: 0; transform: translate3d(0, 5px, 0); }
  to { opacity: 1; transform: none; }
}

.art-video-player .live-caption-overlay[data-mode="en"] .live-caption-zh-hant,
.art-video-player .live-caption-overlay[data-mode="zh"] .live-caption-english {
  display: none;
}

.art-video-player .live-caption-overlay[data-mode="zh"] .live-caption-zh-hant {
  margin-bottom: 0;
}

.art-video-player .live-caption-state {
  position: absolute;
  bottom: max(74px, calc(var(--safe-b) + 62px));
  left: 50%;
  max-width: min(80%, 360px);
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  background: rgba(8, 11, 17, .7);
  color: rgba(255, 255, 255, .9);
  font-size: 12px;
  font-weight: 660;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
  transition: opacity .18s ease;
}

.art-video-player .live-caption-overlay.has-caption .live-caption-state,
.art-video-player .live-caption-overlay[data-state="off"] .live-caption-state {
  opacity: 0;
}

.art-video-player .live-caption-control-mark {
  display: inline-grid;
  width: 25px;
  height: 19px;
  border: 1.5px solid currentColor;
  border-radius: 5px;
  color: rgba(255, 255, 255, .78);
  font-size: 9px;
  font-weight: 740;
  line-height: 1;
  place-items: center;
  transition: color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.art-video-player .art-control.is-active .live-caption-control-mark {
  background: rgba(79, 141, 255, .18);
  box-shadow: 0 0 14px rgba(79, 141, 255, .3);
  color: #8ab4ff;
}

.art-video-player .art-control[data-mode] .art-control-tip,
.art-video-player .art-control[data-mode] .art-tooltip {
  display: none !important;
}

.art-video-player .art-control-liveCaptions::before,
.art-video-player .art-control-liveCaptions::after {
  display: none !important;
  content: none !important;
}

.art-video-player .art-control-liveCaptions.is-locked .live-caption-control-mark {
  border-style: dashed;
  color: rgba(255, 255, 255, .48);
}

.art-video-player .art-control[data-mode] .art-selector-list {
  max-height: min(280px, calc(100dvh - 96px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.art-video-player .art-control[data-mode] .art-selector-item {
  min-height: 38px;
}

.live-caption-access-notice {
  position: absolute;
  bottom: 78px;
  left: 50%;
  z-index: 92;
  max-width: min(86%, 440px);
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(10, 13, 20, .84);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 13.5px;
  font-weight: 660;
  line-height: 20px;
  text-align: center;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
  animation: atv-pop var(--t) var(--ease-out) both;
}

.live-caption-consent-backdrop {
  position: absolute;
  inset: 0;
  z-index: 95;
  display: grid;
  padding: 16px;
  border-radius: inherit;
  background: rgba(3, 6, 12, .5);
  overscroll-behavior: contain;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  place-items: center;
}

.live-caption-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 14px;
  width: min(92%, 460px);
  max-height: 100%;
  padding: 20px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  background: rgba(20, 24, 33, .9);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
  color: #fff;
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  animation: atv-dialog var(--t-slow) var(--ease-out) both;
}

.live-caption-consent-icon {
  display: inline-grid;
  width: 42px;
  height: 32px;
  border: 2px solid #8ab4ff;
  border-radius: 9px;
  color: #8ab4ff;
  font-size: 13px;
  font-weight: 740;
  place-items: center;
}

.live-caption-consent h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 660;
  line-height: 24px;
}

.live-caption-consent p {
  color: rgba(255, 255, 255, .7);
  font-size: 13.5px;
  line-height: 22px;
}

.live-caption-consent-remember {
  display: inline-flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 9px;
  width: max-content;
  color: rgba(255, 255, 255, .84);
  font-size: 13.5px;
  font-weight: 660;
  cursor: pointer;
}

.live-caption-consent-remember input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #4f8dff;
}

.live-caption-consent-actions {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 8px;
}

.live-caption-consent-actions button {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .9);
  font-size: 14px;
  font-weight: 660;
}

.live-caption-consent-actions button:hover {
  background: rgba(255, 255, 255, .12);
}

.live-caption-consent-actions button.is-primary {
  border-color: transparent;
  background: #4f8dff;
  color: #fff;
}

/* ═════════════════════════ Layout: stacked (default) ═════════════════════════ */

.workspace {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns:
    [full-start] calc(var(--gutter) + var(--safe-l))
    [main-start] minmax(0, 1fr)
    [tools-start] auto
    [main-end] calc(var(--gutter) + var(--safe-r))
    [full-end];
  align-content: start;
  padding: 0 0 calc(32px + var(--safe-b));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.browser-panels,
.viewer-panel,
.viewer-content,
.playback-column {
  display: contents;
}

.browser-sidebar-header {
  display: none;
}

.player-stage,
.viewer-heading,
.stream-meta,
.playback-tools,
.programme-guide,
.recent-channel-rail,
.getting-started,
.channel-column {
  grid-column: main;
}

.player-stage {
  position: sticky;
  top: calc(var(--hdr) + var(--safe-t) + 10px);
  z-index: 6;
  grid-row: 1;
  margin-top: calc(var(--hdr) + var(--safe-t) + 10px);
}

@supports (height: round(down, 10.5px, 1px)) {
  @media (pointer: coarse) {
    .player-stage:not(.is-idle) {
      height: round(down, calc((100vw - var(--safe-l) - var(--safe-r) - 2 * var(--gutter)) * 9 / 16), 1px);
      aspect-ratio: auto;
    }
  }
}

/* The sticky screen never moves, so a shelf painted with the viewport-sized page background
   (top of viewport → bottom of the screen) hides content scrolling up behind it without a seam.
   The light spills over the shelf and under the transparent header. */
.player-stage::before {
  position: absolute;
  top: calc(-1 * (var(--hdr) + var(--safe-t) + 10px));
  right: calc(-1 * var(--gutter) - var(--safe-r));
  bottom: 0;
  left: calc(-1 * var(--gutter) - var(--safe-l));
  z-index: -2;
  background: var(--page-bg);
  background-size: 100vw 100vh;
  content: "";
  pointer-events: none;
}

.player-stage .atv-ambient {
  --glow-out: 96px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--glow-out)), transparent calc(100% - var(--glow-out)));
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--glow-out)), transparent calc(100% - var(--glow-out)));
}

/* Both copies are drawn identically, so the seam at the screen's bottom edge is invisible */
.player-stage .atv-ambient-bloom,
.atv-ambient-back .atv-ambient-bloom {
  transform: scale(1.1, 1.3);
}

.app-shell:has(.player-stage.is-idle) .atv-ambient-back,
.app-shell:has(.art-fullscreen-web) .atv-ambient-back {
  display: none;
}

/* Stacked + tv.js: the scroller is masked instead of shelved (see cutScroller in tv.js).
   Layer 1 keeps the screen itself; layer 2 hides everything above the screen's bottom edge and
   eases the list back in over 72px, so rows melt into the light as they slide up beneath it. */
.workspace.atv-cut {
  -webkit-mask-image:
    var(--atv-screen),
    linear-gradient(to bottom,
      transparent var(--atv-cut),
      rgba(0, 0, 0, .06) calc(var(--atv-cut) + var(--atv-fade, 72px) * .17),
      rgba(0, 0, 0, .22) calc(var(--atv-cut) + var(--atv-fade, 72px) * .36),
      rgba(0, 0, 0, .5) calc(var(--atv-cut) + var(--atv-fade, 72px) * .56),
      rgba(0, 0, 0, .8) calc(var(--atv-cut) + var(--atv-fade, 72px) * .78),
      #000 calc(var(--atv-cut) + var(--atv-fade, 72px)));
  mask-image:
    var(--atv-screen),
    linear-gradient(to bottom,
      transparent var(--atv-cut),
      rgba(0, 0, 0, .06) calc(var(--atv-cut) + var(--atv-fade, 72px) * .17),
      rgba(0, 0, 0, .22) calc(var(--atv-cut) + var(--atv-fade, 72px) * .36),
      rgba(0, 0, 0, .5) calc(var(--atv-cut) + var(--atv-fade, 72px) * .56),
      rgba(0, 0, 0, .8) calc(var(--atv-cut) + var(--atv-fade, 72px) * .78),
      #000 calc(var(--atv-cut) + var(--atv-fade, 72px)));
  -webkit-mask-size: var(--atv-screen-w) var(--atv-screen-h), 100% 100%;
  mask-size: var(--atv-screen-w) var(--atv-screen-h), 100% 100%;
  -webkit-mask-position: var(--atv-screen-x) var(--atv-screen-y), 0 0;
  mask-position: var(--atv-screen-x) var(--atv-screen-y), 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* With the mask in place the shelf and the in-screen copy of the light are not needed:
   the light behind the page shows through everywhere, as one continuous glow */
.workspace.atv-cut .player-stage::before,
.workspace.atv-cut .player-stage > .atv-ambient {
  display: none;
}

.workspace.atv-cut .atv-pblur-under {
  --pb-h: var(--atv-fade, 72px);
}

.app-shell:has(.art-fullscreen, .art-fullscreen-web) .workspace.atv-cut {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Stacked: the pinned screen's shelf hides content above it, so the top edge only blurs while browsing */
.app-shell:has(.player-stage:not(.is-idle)) .atv-pblur-top {
  display: none;
}

/* Idle on phones: no empty screen; the channel list leads and the player appears on first tap */
.player-stage.is-idle {
  display: none;
}

.workspace:has(.player-stage.is-idle) .channel-column {
  margin-top: calc(var(--hdr) + var(--safe-t) + 8px);
}

.viewer-heading {
  grid-column: main-start / tools-start;
  grid-row: 2;
  align-self: center;
  justify-self: start;
  max-width: calc(100% - 10px);
  margin-top: 16px;
}

@media (max-width: 699px) {
  .viewer-heading .viewer-channel-brand {
    gap: 10px;
  }

  .viewer-heading .viewer-channel-brand::after {
    font-size: 17px;
  }
}

.viewer-channel-brand {
  --brand-w: 60px;
  --brand-h: 40px;
}

.playback-tools {
  grid-column: tools-start / main-end;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  margin-top: 16px;
}

.viewer-favorite span {
  display: none;
}

.viewer-favorite {
  width: 40px;
  padding: 0;
  justify-content: center;
}

.stream-meta {
  grid-row: 3;
  margin-top: 10px;
}

.programme-guide {
  grid-row: 4;
  margin-top: 16px;
}

.recent-channel-rail {
  grid-row: 5;
  margin-top: 20px;
}

.recent-channel-list,
.mobile-group-scroll {
  margin-right: calc(-1 * var(--gutter) - var(--safe-r));
  margin-left: calc(-1 * var(--gutter) - var(--safe-l));
  padding-right: calc(var(--gutter) + var(--safe-r));
  padding-left: calc(var(--gutter) + var(--safe-l));
  scroll-padding-inline: calc(var(--gutter) + var(--safe-l));
}

.channel-column {
  grid-row: 6;
  gap: 12px;
  margin-top: 28px;
}

.channel-list {
  margin: 0 -8px;
}

/* Phones in portrait: every pixel of width goes to the picture. The screen runs edge to edge
   with square corners (rounded corners floating against the bezel read as wasted space), and
   the rim hairline goes too, since there is no edge for it to describe. */
@media (max-width: 699px) and (orientation: portrait) {
  .player-stage {
    --player-r: 0px;
    grid-column: full-start / full-end;
  }

  @supports (height: round(down, 10.5px, 1px)) {
    @media (pointer: coarse) {
      .player-stage:not(.is-idle) {
        height: round(down, calc(100vw * 9 / 16), 1px);
      }
    }
  }

  .player-frame::after,
  .player-empty::after {
    display: none;
  }

  .player-stage::before,
  .atv-pblur-under {
    right: 0;
    left: 0;
  }

  .art-video-player .art-bottom {
    padding-right: calc(var(--gutter) - 2px);
    padding-left: calc(var(--gutter) - 2px);
  }
}

/* Portrait tablets */
@media (min-width: 700px) {
  :root {
    --gutter: 28px;
    --hdr: 64px;
    --player-r: 22px;
  }

  .viewer-heading {
    margin-top: 20px;
  }

  .viewer-channel-brand::after {
    font-size: 21px;
  }

  .viewer-channel-brand {
    --brand-w: 72px;
    --brand-h: 48px;
  }

  .playback-tools {
    margin-top: 20px;
  }

  .viewer-favorite {
    width: auto;
    padding: 0 14px;
  }

  .viewer-favorite span {
    display: inline;
  }

  .route-trigger-copy small {
    display: inline;
    color: var(--text-3);
    font-size: 12px;
  }

  .programme-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }

  .header-command span {
    display: inline;
  }

  .header-command {
    padding: 0 14px 0 12px;
  }

  .channel-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
  }
}

/* ═════════════════════════ Layout: tablet portrait, iPad-like (3:4 … 2:3) ═════════════════════════
   Near-square portrait screens have room for a full-width screen *and* two calm panes beneath it:
   what's on (left) and the channel list (right, scrolling on its own). Nothing else scrolls, so
   the screen never moves and nothing needs to slide under it. Narrower 16:10 tablets (Samsung)
   keep the stacked layout above with its pinned screen and progressive blur. */

@media (min-width: 700px) and (orientation: portrait) and (min-aspect-ratio: 16/25) {
  .workspace {
    grid-template-columns:
      [full-start] calc(var(--gutter) + var(--safe-l))
      [main-start info-start] minmax(0, 1fr)
      [info-end tools-start] auto
      [tools-end] 32px
      [list-start] minmax(0, 1.08fr)
      [list-end main-end] calc(var(--gutter) + var(--safe-r))
      [full-end];
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    height: 100%;
    padding-bottom: 0;
    overflow: hidden;
  }

  .player-stage,
  .player-stage.is-idle {
    position: relative;
    top: auto;
    z-index: auto;
    display: block;
    grid-column: main;
    grid-row: 1;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-top: calc(var(--hdr) + var(--safe-t) + 6px);
  }

  @supports (height: round(down, 10.5px, 1px)) {
    .player-stage,
    .player-stage.is-idle {
      height: round(down, calc((100vw - var(--safe-l) - var(--safe-r) - 2 * var(--gutter)) * 9 / 16), 1px);
      aspect-ratio: auto;
    }
  }

  .player-stage::before,
  .atv-pblur-under,
  .atv-ambient-back,
  .app-shell .atv-pblur-top {
    display: none;
  }

  .player-stage .atv-ambient {
    --glow-out: 56px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .player-stage .atv-ambient-bloom {
    transform: scale(1.08, 1.2);
  }

  .viewer-heading {
    grid-column: info-start / tools-start;
    grid-row: 2;
    margin-top: 22px;
  }

  .playback-tools {
    grid-column: info-start / tools-end;
    grid-row: 3;
    justify-self: start;
    margin-top: 14px;
  }

  .stream-meta {
    grid-column: info-start / tools-end;
    grid-row: 4;
    margin-top: 12px;
  }

  .programme-guide {
    grid-column: info-start / tools-end;
    grid-row: 5;
    align-self: stretch;
    min-height: 0;
    margin-top: 18px;
    padding-bottom: calc(24px + var(--safe-b));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .programme-guide.is-unavailable {
    align-self: start;
  }

  .programme-timeline {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .recent-channel-rail {
    display: none;
  }

  .workspace:has(.player-stage.is-idle) .stream-meta {
    display: none;
  }

  /* Channel pane: its own scroller, the screen above never moves */
  .channel-column,
  .workspace:has(.player-stage.is-idle) .channel-column {
    grid-column: list;
    grid-row: 2 / -1;
    align-self: stretch;
    min-height: 0;
    gap: 10px;
    margin: 22px 0 0;
    overflow: hidden;
  }

  .channel-column-head {
    display: none;
  }

  .mobile-group-scroll {
    margin: 0;
    padding: 0;
  }

  .channel-list {
    flex: 1;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    margin: 0 -8px;
    padding: 4px 0 calc(16px + var(--safe-b));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 28px), transparent);
  }

  .channel-play {
    height: 64px;
  }

  .playback-route-menu {
    right: auto;
    left: 0;
    transform-origin: bottom left;
  }
}

/* iPad Pro 12.9" portrait and similar: a little more breathing room */
@media (min-width: 1000px) and (orientation: portrait) and (min-aspect-ratio: 16/25) {
  :root {
    --gutter: 40px;
  }

  .workspace {
    grid-template-columns:
      [full-start] calc(var(--gutter) + var(--safe-l))
      [main-start info-start] minmax(0, 1fr)
      [info-end tools-start] auto
      [tools-end] 44px
      [list-start] minmax(0, 1fr)
      [list-end main-end] calc(var(--gutter) + var(--safe-r))
      [full-end];
  }
}

/* Samsung-like 16:10 portrait: stacked, pinned screen; the guide and list share the width */
@media (min-width: 700px) and (orientation: portrait) and (max-aspect-ratio: 16/25) {
  .channel-play {
    height: 64px;
  }
}

/* ═════════════════════════ Layout: split (desktop / landscape tablet) ═════════════════════════ */

@media (min-width: 900px) and (min-height: 540px) and (min-aspect-ratio: 1/1) {
  :root {
    --player-r: 20px;
  }

  .app-shell {
    --edge: 12px;
    --sb: clamp(308px, 24vw, 368px);
    --sb-space: calc(var(--safe-l) + var(--sb));
    --vpad: clamp(20px, 2.4vw, 40px);
    --stage-top: 76px;
    --stage-below: 84px;
    --avail: calc(100vw - var(--sb-space) - 2 * var(--vpad) - var(--safe-r));
    --stage-w: min(var(--avail), calc((100dvh - var(--stage-top) - var(--stage-below)) * 16 / 9));
    --stage-ml: calc((var(--avail) - var(--stage-w)) / 2);
    --stage-mr: calc(var(--avail) - var(--stage-w) - var(--stage-ml));
  }

  @supports (width: round(down, 10.5px, 1px)) {
    .app-shell {
      --sb: clamp(308px, round(down, 24vw, 2px), 368px);
      --vpad: clamp(20px, round(down, 2.4vw, 1px), 40px);
      /* --avail is whole and even, the width steps by 32px: the 16:9 height stays whole and both side gaps are equal */
      --stage-w: round(down, min(var(--avail), calc((100dvh - var(--stage-top) - var(--stage-below)) * 16 / 9)), 32px);
      /* an odd viewport leaves one spare pixel; it goes to the right gap so every edge stays whole */
      --stage-ml: round(down, calc((var(--avail) - var(--stage-w)) / 2), 1px);
    }
  }

  .app-shell.has-collapsed-sidebars {
    --sb-space: calc(var(--safe-l) + 56px);
  }

  /* Header: bare controls on the stage's right edge; a glass pill only appears once the stage scrolls under it */
  .app-header {
    top: var(--edge);
    right: calc(var(--safe-r) + var(--vpad) + var(--stage-mr) - 5px);
    left: auto;
    height: 48px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 999px;
    view-transition-name: iptv-actions;
    transition: right var(--t-slow) var(--ease);
  }

  .brand-lockup {
    display: none;
  }

  .header-command {
    padding: 0 14px 0 12px;
  }

  .header-command span {
    display: inline;
  }

  .account-login-button {
    height: 38px;
    margin-left: 4px;
  }

  .account-trigger {
    padding: 0 10px 0 2px;
  }

  .account-trigger > svg,
  .account-trigger-copy {
    display: block;
  }

  .avatar.is-small {
    width: 34px;
    height: 34px;
  }

  .account-menu {
    max-height: calc(100dvh - 90px);
  }

  /* clip, not hidden: the sidebar's hairline borders sit 1px outside the viewport, and a hidden
     container can still be scrolled by focus, which nudged the whole layout up by a pixel */
  .workspace {
    display: block;
    padding: 0;
    overflow: hidden;
    overflow: clip;
  }

  /* Sidebar: flush to the edge, one hairline, translucent so the stage light passes under it */
  /* Rounded on the right only. The top and bottom borders sit 1px outside the viewport, so the
     hairline follows each corner's curve all the way to the screen edge without drawing a line
     along the top or bottom of the screen. */
  .browser-panels {
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    width: calc(var(--sb) + var(--safe-l));
    padding-left: var(--safe-l);
    overflow: hidden;
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0 var(--r-2xl) var(--r-2xl) 0;
    background: var(--sidebar);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    view-transition-name: channel-browser;
    transition: transform var(--t-slow) var(--ease), opacity var(--t) var(--ease), visibility 0s;
  }

  .workspace.is-sidebars-collapsed .browser-panels {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);
    transition: transform var(--t-slow) var(--ease), opacity var(--t) var(--ease), visibility 0s var(--t-slow);
  }

  .browser-sidebar-header {
    display: flex;
    flex: none;
    height: 72px;
    padding: 0 9px 0 16px;
  }

  .desktop-panel-toggle {
    width: 36px;
    height: 36px;
  }

  .channel-column,
  .workspace:has(.player-stage.is-idle) .channel-column {
    flex: 1;
    gap: 10px;
    margin: 0;
    padding: 2px 0 0;
  }

  .channel-column-head,
  .search-field,
  .mobile-filter-tabs,
  .international-taxonomy {
    margin: 0 16px 0 16px;
  }

  /* The view switch and chips already name the current list */
  .channel-column-head {
    display: none;
  }

  .mobile-group-scroll {
    padding: 0 16px;
    scroll-padding-inline: 16px;
  }

  .channel-list {
    flex: 1;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    margin: 0;
    padding: 6px 7px 12px 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 20px), transparent);
  }

  .channel-play {
    height: 64px;
  }

  .channel-row .favorite-button {
    width: 36px;
    height: 36px;
    margin-right: 2px;
  }

  /* Library source becomes the sidebar footer */
  .library-panel {
    display: block;
    flex: none;
    order: 2;
    padding: 10px 9px 10px 16px;
    border-top: 1px solid var(--line);
  }

  /* Collapsed rail */
  .collapsed-sidebar-rail {
    position: absolute;
    top: 13px;
    left: calc(10px + var(--safe-l));
    z-index: 21;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 46px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-8px);
    view-transition-name: channel-rail;
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s var(--t);
  }

  .workspace.is-sidebars-collapsed .collapsed-sidebar-rail {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: opacity var(--t) var(--ease) .1s, transform var(--t) var(--ease) .1s, visibility 0s;
  }

  .collapsed-brand-mark {
    display: grid;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    place-items: center;
    transition: background-color var(--t-fast) var(--ease);
  }

  .collapsed-brand-mark:hover {
    background: var(--fill-2);
  }

  .collapsed-brand-mark img {
    width: auto;
    height: 30px;
  }

  .collapsed-sidebar-control {
    display: grid;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: var(--text-2);
    place-items: center;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }

  .collapsed-sidebar-control:hover {
    background: var(--fill-2);
    color: var(--text);
  }

  .collapsed-sidebar-control svg {
    width: 20px;
    height: 20px;
  }

  /* Stage column: scrolls under the floating glass, never clips the glow */
  .viewer-panel {
    position: absolute;
    inset: 0;
    display: block;
    padding: var(--stage-top) calc(var(--vpad) + var(--safe-r)) 40px calc(var(--sb-space) + var(--vpad));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    transition: padding-left var(--t-slow) var(--ease);
  }

  .viewer-panel::-webkit-scrollbar {
    display: none;
  }

  .viewer-heading {
    position: absolute;
    top: var(--edge);
    left: calc(var(--sb-space) + var(--vpad) + var(--stage-ml));
    display: flex;
    align-items: center;
    width: calc(var(--stage-w) - 340px);
    max-width: none;
    height: 48px;
    margin: 0;
    view-transition-name: iptv-heading;
    transition: left var(--t-slow) var(--ease), width var(--t-slow) var(--ease);
  }

  .viewer-channel-brand {
    --brand-w: 72px;
    --brand-h: 48px;
  }

  .viewer-channel-brand::after {
    font-size: 21px;
  }

  .viewer-content {
    display: grid;
    gap: 22px;
    width: var(--stage-w);
    margin: 0 0 0 var(--stage-ml);
    transition: width var(--t-slow) var(--ease), margin-left var(--t-slow) var(--ease);
  }

  .playback-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 16px;
  }

  .player-stage {
    position: relative;
    top: auto;
    z-index: auto;
    grid-column: 1 / -1;
    grid-row: auto;
    margin: 0;
  }

  .player-stage::before,
  .atv-pblur-under,
  .atv-ambient-back {
    display: none;
  }

  .player-stage .atv-ambient {
    --glow-out: 0px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .player-stage .atv-ambient-bloom {
    transform: scale(1.2, 1.36);
  }

  /* Stage column: content melts into a soft top edge as it scrolls under the controls */
  .app-shell .atv-pblur-top,
  .app-shell:has(.player-stage:not(.is-idle)) .atv-pblur-top {
    display: block;
    left: var(--sb-space);
    --pb-h: calc(var(--stage-top) + 12px);
    transition: opacity .32s var(--ease), left var(--t-slow) var(--ease);
  }

  .player-stage.is-idle,
  .player-stage:not(.is-idle) {
    display: block;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .player-stage.is-idle .player-empty-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
  }

  .player-stage.is-idle .player-empty-icon svg {
    width: 28px;
    height: 28px;
  }

  .player-stage.is-idle .player-empty strong {
    font-size: 21px;
  }

  .player-stage.is-idle .player-empty p {
    font-size: 14px;
  }

  .stream-meta {
    grid-column: 1;
    grid-row: auto;
    min-height: 64px;
    margin: 0;
    padding: 0 2px;
  }

  .playback-tools {
    grid-column: 2;
    grid-row: auto;
    margin: 0;
  }

  .viewer-favorite {
    width: auto;
    padding: 0 14px;
  }

  .viewer-favorite span {
    display: inline;
  }

  .route-trigger-copy small {
    display: inline;
    color: var(--text-3);
    font-size: 12px;
  }

  .programme-guide,
  .recent-channel-rail {
    grid-column: auto;
    grid-row: auto;
  }

  .programme-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
  }

  .recent-channel-list,
  .mobile-group-scroll {
    margin-right: 0;
    margin-left: 0;
    scroll-padding-inline: 0;
  }

  .recent-channel-list {
    padding: 0;
  }

  .recent-channel-rail {
    margin: 0;
  }

  .getting-started {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: var(--stage-w);
    margin: 24px 0 0 var(--stage-ml);
    transition: width var(--t-slow) var(--ease), margin-left var(--t-slow) var(--ease);
  }

  html.is-sidebar-view-transition .app-shell :is(.app-header, .browser-panels, .collapsed-sidebar-rail, .viewer-panel, .viewer-heading, .viewer-content, .getting-started) {
    transition: none !important;
  }
}

/* Wide desktop: a little more room inside the sidebar */
@media (min-width: 1600px) and (min-height: 760px) and (min-aspect-ratio: 1/1) {
  .app-shell {
    --edge: 16px;
    --sb: clamp(308px, 22vw, 420px);
  }

  @supports (width: round(down, 10.5px, 1px)) {
    .app-shell {
      --sb: clamp(308px, round(down, 22vw, 2px), 420px);
    }
  }

  .channel-play {
    height: 68px;
  }
}

/* ═════════════════════════ Layout: compact (phone landscape) ═════════════════════════ */

@media (orientation: landscape) and (max-height: 539px) {
  :root {
    --gutter: 14px;
    --player-r: 16px;
  }

  .app-shell {
    --side: clamp(260px, 38vw, 360px);
    --side-hdr: 50px;
  }

  @supports (width: round(down, 10.5px, 1px)) {
    .app-shell {
      --side: clamp(260px, round(down, 38vw, 1px), 360px);
    }
  }

  .app-header {
    top: 0;
    right: 0;
    left: auto;
    width: calc(var(--side) + var(--gutter) + var(--safe-r));
    height: calc(var(--side-hdr) + var(--safe-t));
    padding: var(--safe-t) calc(var(--gutter) + var(--safe-r)) 0 15px;
  }

  .header-command span {
    display: none;
  }

  .brand-lockup img {
    height: 26px;
  }

  .header-command,
  .theme-toggle {
    min-width: 38px;
    height: 38px;
    padding: 0;
  }

  .account-login-button {
    height: 34px;
    margin-left: 2px;
    padding: 0 12px 0 10px;
  }

  .workspace {
    grid-template-columns:
      [full-start] calc(var(--gutter) + var(--safe-l))
      [main-start] minmax(0, 1fr)
      [tools-start] auto
      [main-end] calc(var(--side) + 2 * var(--gutter) + var(--safe-r))
      [full-end];
    padding: 0 0 calc(20px + var(--safe-b));
  }

  .player-stage {
    position: relative;
    top: auto;
    z-index: auto;
    margin-top: 12px;
  }

  .player-stage::before,
  .atv-pblur-under,
  .atv-ambient-back {
    display: none;
  }

  .player-stage .atv-ambient {
    --glow-out: 0px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .app-shell .atv-pblur-top,
  .app-shell:has(.player-stage:not(.is-idle)) .atv-pblur-top {
    display: block;
    right: calc(var(--side) + var(--gutter) + var(--safe-r));
    --pb-h: calc(var(--safe-t) + 28px);
  }

  .player-stage.is-idle {
    display: block;
    aspect-ratio: 16 / 9;
  }

  @supports (height: round(down, 10.5px, 1px)) {
    .player-stage:not(.is-idle),
    .player-stage.is-idle {
      height: round(down, calc((100vw - var(--safe-l) - 3 * var(--gutter) - var(--side) - var(--safe-r)) * 9 / 16), 1px);
      aspect-ratio: auto;
    }
  }

  .viewer-heading,
  .playback-tools {
    margin-top: 12px;
  }

  .viewer-channel-brand {
    --brand-w: 60px;
    --brand-h: 40px;
  }

  .viewer-channel-brand::after {
    font-size: 16px;
  }

  .stream-meta {
    margin-top: 8px;
  }

  .programme-guide {
    margin-top: 14px;
  }

  .recent-channel-list {
    margin-right: 0;
    padding-right: 0;
  }

  /* Channel panel: flush right column with one hairline, the header sits in its top */
  .channel-column {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    width: calc(var(--side) + var(--gutter) + var(--safe-r));
    margin: 0;
    padding: calc(var(--side-hdr) + var(--safe-t)) var(--safe-r) 0 0;
    gap: 8px;
    overflow: hidden;
    border-left: 1px solid var(--line);
    background: var(--sidebar);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }

  .workspace:has(.player-stage.is-idle) .channel-column {
    margin: 0;
  }

  .channel-column-head {
    display: none;
  }

  .search-field,
  .mobile-filter-tabs,
  .international-taxonomy {
    margin: 0 14px;
  }

  .search-field {
    height: 38px;
  }

  .mobile-filter-tabs button {
    height: 30px;
  }

  .mobile-filter-tabs button svg {
    display: none;
  }

  .mobile-group-scroll {
    margin: 0;
    padding: 0 14px;
    scroll-padding-inline: 14px;
  }

  .mobile-group-scroll button {
    height: 30px;
    padding: 0 12px;
  }

  .taxonomy-trigger {
    height: 44px;
  }

  .channel-list {
    flex: 1;
    grid-template-columns: none;
    min-height: 0;
    margin: 0;
    padding: 4px 6px calc(10px + var(--safe-b));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 14px), transparent);
  }

  .channel-play {
    height: 60px;
    gap: 10px;
  }

  .channel-logo {
    --slot-w: 60px;
    --slot-h: 40px;
  }

  .playback-route-menu {
    position: fixed;
    top: 10px;
    right: auto;
    bottom: 10px;
    left: calc(var(--gutter) + var(--safe-l));
    max-height: none;
  }
}

/* ═════════════════════════ Phone-sized sheets ═════════════════════════ */

@media (max-width: 699px) and (min-height: 540px), (max-width: 699px) and (orientation: portrait) {
  /* Route menu as a bottom sheet with its own dimmer */
  .playback-route-menu {
    position: fixed;
    top: auto;
    right: calc(8px + var(--safe-r));
    bottom: calc(8px + var(--safe-b));
    left: calc(8px + var(--safe-l));
    width: auto;
    max-height: min(78dvh, 640px);
    border-radius: 28px;
    background: color-mix(in srgb, var(--lg-panel) 80%, var(--bg));
    box-shadow: 0 0 0 100vmax var(--scrim), var(--lg-rim), var(--shadow-lg);
    transform-origin: bottom center;
    animation: atv-sheet var(--t-slow) var(--ease-out) both;
  }

  .playback-route-menu::before {
    align-self: center;
    flex: none;
    width: 36px;
    height: 5px;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--fill-3);
    content: "";
  }

  .route-menu-dialog-head {
    padding-top: 8px;
  }

  .account-menu {
    position: fixed;
    top: calc(var(--hdr) + var(--safe-t) + 8px);
    right: calc(8px + var(--safe-r));
  }

  .taxonomy-option-grid button {
    height: 44px;
  }

  .dialog-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    text-align: center;
  }

  .import-dialog {
    align-self: end;
    padding: 20px 18px;
  }

  .mode-tabs button span {
    font-size: 12px;
  }
}

@keyframes atv-sheet {
  from { opacity: .6; transform: translateY(40px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 380px) {
  :root {
    --gutter: 12px;
  }

  .header-actions {
    gap: 0;
  }

  .header-command,
  .theme-toggle {
    min-width: 38px;
    padding: 0;
  }

  .channel-play {
    gap: 10px;
  }

  .mobile-filter-tabs button svg {
    display: none;
  }
}

/* ═════════════════════════ Download centre & TV pairing pages ═════════════════════════ */

.downloads-page,
.pair-page {
  position: fixed;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  background:
    radial-gradient(60% 40% at 0% 0%, var(--bg-tint-1), transparent 72%),
    radial-gradient(50% 40% at 100% 100%, var(--bg-tint-2), transparent 72%),
    radial-gradient(40% 30% at 100% 0%, var(--bg-tint-3), transparent 72%),
    var(--bg);
  background-attachment: fixed;
  -webkit-overflow-scrolling: touch;
}

.downloads-aurora {
  display: none;
}

.downloads-header,
.pair-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: calc(var(--hdr) + var(--safe-t));
  padding: var(--safe-t) calc(max(var(--gutter), (100% - 1080px) / 2) + var(--safe-r)) 0 calc(max(var(--gutter), (100% - 1080px) / 2) + var(--safe-l));
}

.downloads-page .atv-pblur-top,
.pair-page .atv-pblur-top {
  z-index: 9;
  --pb-h: calc(var(--hdr) + var(--safe-t) + 36px);
}

/* Large type scrolls under these headers: hold the tint solid across the bar itself */
.downloads-page .atv-pblur-top::before,
.pair-page .atv-pblur-top::before {
  background: linear-gradient(to bottom,
    var(--pb-tint-solid) 0%,
    var(--pb-tint-solid) 52%,
    color-mix(in srgb, var(--pb-tint-solid) 60%, transparent) 74%,
    transparent 100%);
}

.downloads-brand img,
.pair-header > a:first-child img {
  width: auto;
  height: 30px;
}

.downloads-header nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.downloads-back,
.pair-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  color: var(--text);
  font-size: 14px;
  font-weight: 660;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.downloads-back svg,
.pair-back-link svg {
  width: 17px;
  height: 17px;
}

.downloads-back:hover,
.pair-back-link:hover {
}

.downloads-back:active,
.pair-back-link:active {
  transform: scale(.96);
}

.downloads-content {
  display: grid;
  gap: 40px;
  width: min(1080px, 100% - 2 * var(--gutter) - var(--safe-l) - var(--safe-r));
  margin: 0 auto;
  padding: 48px 0 calc(48px + var(--safe-b));
}

/* Intro */
.downloads-intro {
  display: grid;
  gap: 24px;
  align-items: end;
}

.downloads-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 660;
  letter-spacing: .04em;
}

.downloads-eyebrow svg {
  width: 16px;
  height: 16px;
}

.downloads-intro h1 {
  margin-top: 14px;
  font-size: clamp(34px, 6.4vw, 60px);
  font-weight: 740;
  letter-spacing: -.01em;
  line-height: 1.12;
}

.downloads-intro h1 span {
  background: linear-gradient(100deg, #22d3ee, #4f8dff 45%, #ec4899 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.downloads-intro > .downloads-intro-copy .downloads-lead {
  max-width: 600px;
  margin-top: 16px;
  color: var(--text-2);
  font-size: 16px;
  font-weight: 560;
  line-height: 28px;
}

.downloads-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 20px;
}

.downloads-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 660;
}

.downloads-trust svg {
  width: 14px;
  height: 14px;
}

.downloads-web-entry {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 -12px;
  padding: 12px;
  border-radius: var(--r-lg);
  transition: background-color var(--t-fast) var(--ease);
}

.downloads-web-entry:hover {
  background: var(--fill-1);
}

.downloads-web-icon {
  display: grid;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  place-items: center;
}

.downloads-web-icon svg {
  width: 22px;
  height: 22px;
}

.downloads-web-entry > span:nth-child(2) {
  display: grid;
  flex: 1;
}

.downloads-web-entry small {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 660;
}

.downloads-web-entry strong {
  font-size: 17px;
  font-weight: 660;
}

.downloads-web-entry > svg {
  width: 18px;
  height: 18px;
  color: var(--text-3);
}

/* Releases */
.release-list {
  display: grid;
}

.release-list-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
}

.release-list-header p {
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 660;
  letter-spacing: .08em;
}

.release-list-header h2 {
  margin-top: 4px;
  font-size: 26px;
  font-weight: 740;
  line-height: 34px;
}

.release-list-header > span {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 660;
}

.release-item {
  display: grid;
  gap: 20px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}

.release-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

.release-platform-icon {
  display: grid;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--accent-soft);
  color: var(--accent);
  place-items: center;
}

.release-item[data-platform="android-mobile"] .release-platform-icon,
.release-item:not([data-platform="android-tv"]) .release-platform-icon {
  background: color-mix(in srgb, var(--heart) 12%, transparent);
  color: var(--heart);
}

.release-item[data-platform="android-tv"] .release-platform-icon {
  background: var(--accent-soft);
  color: var(--accent);
}

.release-platform-icon svg {
  width: 26px;
  height: 26px;
}

.release-heading {
  display: grid;
  min-width: 0;
}

.release-heading > span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 660;
}

.release-heading h3 {
  font-size: 21px;
  font-weight: 740;
  line-height: 28px;
}

.release-heading strong {
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 660;
  font-variant-numeric: tabular-nums;
}

.release-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.release-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.release-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 660;
  font-variant-numeric: tabular-nums;
}

.release-meta svg {
  width: 13px;
  height: 13px;
}

.release-main ul {
  display: grid;
  gap: 8px;
}

.release-main li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 22px;
}

.release-main li svg {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--ok);
}

.release-actions {
  display: grid;
  gap: 8px;
  justify-items: stretch;
  min-width: 0;
}

.release-actions .primary-button {
  min-height: 48px;
}

.release-item:not([data-platform="android-tv"]) .release-actions .primary-button {
  background: var(--heart);
  box-shadow: 0 8px 22px -8px var(--heart), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.release-actions > span {
  overflow: hidden;
  color: var(--text-3);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.downloads-safety {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.downloads-safety > svg {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--ok);
}

.downloads-safety strong {
  display: block;
  font-size: 14px;
  font-weight: 660;
}

.downloads-safety span {
  display: block;
  color: var(--text-2);
  font-size: 13px;
  line-height: 20px;
}

@media (min-width: 760px) {
  .downloads-content {
    gap: 56px;
    padding-top: 72px;
  }

  .downloads-intro {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
  }

  .release-item {
    grid-template-columns: 250px minmax(0, 1fr) 220px;
    gap: 28px;
    align-items: start;
    padding: 32px 0;
  }
}

@media (min-width: 760px) and (max-width: 979px) {
  .release-item {
    grid-template-columns: minmax(0, 1fr) 220px;
  }

  .release-main {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Pairing */
.pair-workspace {
  display: grid;
  gap: 18px;
  width: min(520px, 100% - 2 * var(--gutter) - var(--safe-l) - var(--safe-r));
  margin: 0 auto;
  padding: clamp(32px, 8vh, 80px) 0 calc(40px + var(--safe-b));
}

.pair-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pair-heading-icon {
  display: grid;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(140deg, #22d3ee, #4f8dff 50%, #ec4899);
  box-shadow: 0 10px 30px -10px #4f8dff;
  color: #fff;
  place-items: center;
}

.pair-heading-icon svg {
  width: 24px;
  height: 24px;
}

.pair-heading p {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 660;
}

.pair-heading h1 {
  font-size: 28px;
  font-weight: 740;
  line-height: 36px;
}

.pair-panel {
  display: grid;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.pair-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 0;
  color: var(--text-2);
  font-size: 14px;
}

.pair-loading svg,
.pair-confirm .is-spinning {
  width: 18px;
  height: 18px;
  animation: atv-spin 1s linear infinite;
}

@keyframes atv-spin {
  to { transform: rotate(360deg); }
}

.pair-account {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pair-account > span {
  display: grid;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  place-items: center;
}

.pair-account > span svg {
  width: 20px;
  height: 20px;
}

.pair-account > div {
  min-width: 0;
}

.pair-account small {
  display: block;
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 660;
}

.pair-account strong {
  display: block;
  overflow: hidden;
  font-size: 15px;
  font-weight: 660;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pair-account p {
  overflow: hidden;
  color: var(--text-2);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pair-code-block {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 16px 0 8px;
}

.pair-code-block small {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 660;
  letter-spacing: .04em;
}

.pair-code {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(30px, 9vw, 42px);
  font-weight: 660;
  letter-spacing: .12em;
  line-height: 1;
}

.pair-code b {
  color: var(--text-3);
  font-weight: 560;
}

.pair-code-entry {
  display: grid;
  gap: 12px;
}

.pair-code-entry label {
  font-size: 15px;
  font-weight: 660;
}

.pair-code-entry p {
  margin-top: 2px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 20px;
}

.pair-code-entry-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.pair-code-entry-controls input {
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--fill-1);
  color: var(--text);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 19px;
  font-weight: 660;
  letter-spacing: .14em;
  text-transform: uppercase;
  outline: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.pair-code-entry-controls input::placeholder {
  color: var(--text-3);
  font-weight: 560;
}

.pair-code-entry-controls input:focus {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.pair-code-entry-controls .primary-button {
  min-height: 48px;
}

.pair-entry-error {
  color: var(--danger);
  font-size: 13px;
}

.pair-confirm {
  display: grid;
  gap: 12px;
}

.pair-confirm p {
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 22px;
  text-align: center;
}

.pair-confirm .primary-button {
  min-height: 50px;
}

.pair-result {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: var(--fill-1);
}

.pair-result > svg {
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

.pair-result strong {
  display: block;
  font-size: 15px;
  font-weight: 660;
}

.pair-result p {
  color: var(--text-2);
  font-size: 13px;
  line-height: 20px;
}

.pair-result.is-success {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
}

.pair-result.is-success > svg {
  color: var(--ok);
}

.pair-result.is-expired {
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}

.pair-result.is-expired > svg {
  color: var(--warn);
}

.pair-result.is-error {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.pair-result.is-error > svg {
  color: var(--danger);
}

.pair-retry,
.pair-another-code {
  width: 100%;
}

.pair-security-note {
  color: var(--text-3);
  font-size: 12.5px;
  line-height: 20px;
  text-align: center;
}

/* ───────────────────────── View transitions (sidebar collapse) ───────────────────────── */

::view-transition-group(iptv-player),
::view-transition-group(iptv-guide),
::view-transition-group(iptv-actions),
::view-transition-group(iptv-heading),
::view-transition-group(channel-browser),
::view-transition-group(channel-rail) {
  animation-duration: .42s;
  animation-timing-function: cubic-bezier(.22, .8, .24, 1);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .3s;
}

/* ───────────────────────── Preferences ───────────────────────── */

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass: var(--glass-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell *,
  .app-shell *::before,
  .app-shell *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  .atv-ambient {
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  .channel-row.is-active,
  .mobile-filter-tabs button.is-active,
  .mobile-group-scroll button.is-active {
    outline: 2px solid Highlight;
  }
}