* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}


/* TV layout with HB charcoal surfaces, teal accents and local HB Sans,
   M3 type scale at 2× the 960×540dp TV baseline, 16dp-corner cards (32px),
   pill buttons, focus = 3dp-center white outline + glow (6px border here).
   Critical geometry is static CSS (AGENTS.md §12): layout must not depend on
   custom properties or modern-only features. Colors/typography reference the
   generated tokens; the legacy pipeline flattens var() to static values.
   The --safe-* / --motion-* variables are runtime-set from the effective
   profile (bootstrap.ts); var()-dependent decorative rules degrade to
   instant/no-bleed on engines without custom-property support. */

#app {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

/* Profile overrides work in legacy output without runtime CSS variables. */
#canvas[data-animations="off"] * {
  transition-duration: 0ms !important;
  -webkit-animation: none !important;
  animation: none !important;
}
#canvas[data-animations="reduced"] * {
  transition-duration: 80ms !important;
}
#canvas[data-effects="off"] * {
  box-shadow: none !important;
  text-shadow: none !important;
}

#canvas[data-effects="basic"] .search-key:focus,
#canvas[data-effects="basic"] .search-result:focus,
#canvas[data-effects="basic"] .exit-modal-button:focus {
  box-shadow: none;
}

#canvas[data-effects="off"] .hero-banner,
#canvas[data-effects="off"] .poster-card,
#canvas[data-effects="off"] .row-card,
#canvas[data-effects="off"] .settings-row {
  box-shadow: none;
}
/* Opaque card fallback for the conservative profile; geometry stays shared. */
#canvas[data-effects="off"] .row-card,
#canvas[data-effects="off"] .poster-card {
  background: #1C282D;
}
#canvas[data-effects="basic"] .hero.is-focused .hero-banner,
#canvas[data-effects="basic"] .poster-card:focus,
#canvas[data-effects="basic"] .row-card:focus,
#canvas[data-effects="basic"] .settings-row:focus {
  box-shadow: none;
}

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  background: #070707;
  /* Soft shadows are baked into one 720p JPEG; no runtime blur or filter. */
  background-image: url('backgrounds/app-wave.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #EAF4F4;
  font-family: 'HB Sans', system-ui, sans-serif;
  font-size: 28px;
}

/* Effects Off avoids loading the decorative image. */
#canvas[data-effects="off"] {
  background-image: none;
}

.brand-logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

.safe-area {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Default (1080p) safe zone; JS overrides per profile — see safe-area.ts. */
  padding: 48px 72px;
}

/* Full-canvas intro; logo/label stay centered well inside the safe zone. */
.splash {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Canvas owns the shared bitmap for intro and screens. */
  background: none;
  text-align: center;
  z-index: 10;
}

.splash-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 760px;
  height: 480px;
  margin: -240px 0 0 -380px;
}

.splash-brand {
  width: 640px;
  height: 240.5px;
  margin: 0 auto;
}

.splash-progress {
  position: relative;
  width: 448px;
  height: 10px;
  margin: 32px auto 0;
  overflow: hidden;
  border-radius: 4px;
  background: #202020;
}

.splash-progress span {
  position: absolute;
  top: 0;
  left: 152px;
  width: 144px;
  height: 100%;
  border-radius: 4px;
  background: #43C6C8;
  -webkit-animation: splash-load 1400ms ease-in-out infinite;
  animation: splash-load 1400ms ease-in-out infinite;
}

#canvas[data-animations="reduced"] .splash-progress span {
  -webkit-animation-duration: 2000ms;
  animation-duration: 2000ms;
}

@-webkit-keyframes splash-load {
  from { -webkit-transform: translateX(-296px); }
  to { -webkit-transform: translateX(296px); }
}
@keyframes splash-load {
  from { -webkit-transform: translateX(-296px); transform: translateX(-296px); }
  to { -webkit-transform: translateX(296px); transform: translateX(296px); }
}

.splash-label {
  display: block;
  margin: 24px 0 0;
  color: #AAC0C4;
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
}
.splash-hint { margin: 12px 0 0; color: #AAC0C4; font-size: 24px; line-height: 32px; }
.splash-version { margin: 12px 0 0; color: #AAC0C4; font-size: 22px; line-height: 28px; }
.splash-label:focus { outline: none; }
.splash-actions { margin-top: 24px; white-space: nowrap; }
.splash-actions .exit-modal-button { min-width: 200px; height: 64px; margin: 0 8px; padding: 0 24px; line-height: 52px; border-width: 6px; border-radius: 16px; }
.splash-actions .exit-modal-button:focus { line-height: 52px; -webkit-transform: none; transform: none; box-shadow: none; }
.splash[data-state="offline"] .splash-progress span { -webkit-animation: none; animation: none; opacity: .35; }

/* ---- Home screen (JetFit) ---- */

.home {
  /* Normal-flow child of .safe-area: fills the padded content box, so the
     safe-zone insets come from the one source (safe-area padding) — an
     absolute inset:0 here would overlay the padding and break the safe zone. */
  position: relative;
  height: 100%;
}

/* Clip box for the JetFit page-scroll model: the WHOLE content (hero
   included) pans; the clip box never moves. */
.home-viewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 96px;
  overflow: hidden;
}

.home-content {
  position: relative;
  padding: 16px 0 48px 16px;
  /* Page pan (HomeScreen panToRail) — transform-only motion. Duration is set
     inline from the motion profile (profile-correct on var()-less engines). */
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-timing-function: ease-out;
}

/* Fixed icon axis in both states; a compact square marks current/focused
   entries and labels appear over the expanded dark overlay. */
.sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 96px;
  text-align: center;
  z-index: 2;
}

.sidebar-list {
  position: absolute;
  top: 128px;
  bottom: 24px;
  left: -24px;
  width: 120px;
  overflow: hidden;
  z-index: 1;
}

.sidebar-header {
  position: absolute;
  top: 28px;
  /* Decorative brand shares the collapsed glyph/selection center line. */
  left: -24px;
  right: 0;
  z-index: 1;
}

.sidebar-brand {
  width: 96px;
  height: 36px;
}

.sidebar.is-expanded .sidebar-header { left: 16px; }
.sidebar.is-expanded .sidebar-brand { width: 144px; height: 54px; }

.sidebar-track {
  position: relative;
  margin-left: 24px;
  z-index: 1;
}

/* One small layer moves between rows; focus itself is never delayed. */
.sidebar-focus {
  position: absolute;
  top: 12px;
  left: 4px;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: #EAF4F4;
  opacity: 0;
  pointer-events: none;
  transition: -webkit-transform 120ms ease-out;
  transition: transform 120ms ease-out;
  transition: transform 120ms ease-out, -webkit-transform 120ms ease-out;
}

.sidebar.is-expanded .sidebar-focus {
  opacity: 1;
}

.sidebar-item {
  position: relative;
  display: block;
  width: 100%;
  height: 96px;
  margin: 0 0 24px;
  padding: 0;
  font-family: inherit;
  /* Icon buttons center via line-height (no flex on legacy engines). */
  line-height: 92px;
  font-size: 32px;
  font-weight: 600;
  background: none;
  color: #AAC0C4;
  border: 2px solid transparent;
  border-radius: 16px;
  white-space: nowrap;
}

.sidebar-item svg {
  position: absolute;
  top: 26px;
  left: 2px;
  width: 40px;
  height: 40px;
  z-index: 1;
}

.sidebar-label {
  position: relative;
  z-index: 1;
  display: none;
  margin: 0 0 0 80px;
  vertical-align: middle;
}

.sidebar-item.is-active {
  color: #EAF4F4;
}

/* Decorative tile may bleed; the button and glyph stay inside the safe zone. */
.sidebar-item.is-active::before {
  content: '';
  position: absolute;
  top: 10px;
  left: -14px;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: rgba(82, 98, 106, 0.52);
  pointer-events: none;
}

.sidebar-item.is-active:focus::before {
  background: none;
}

.sidebar.is-expanded {
  top: 0;
  bottom: 0;
  left: -16px;
  width: 400px;
  padding: 0;
  background: none;
  border-radius: 0;
  text-align: left;
}

/* Static bleed covers every selectable safe inset, including var-less TVs.
   Only this backdrop leaves the safe zone; menu hit areas stay unchanged. */
.sidebar.is-expanded::before {
  content: '';
  position: absolute;
  top: -96px;
  bottom: -96px;
  left: -160px;
  width: 1000px;
  background: rgba(7, 7, 7, 0.96);
  background: linear-gradient(to right,
    rgba(7, 7, 7, 0.99) 0%, rgba(7, 7, 7, 0.98) 56%,
    rgba(7, 7, 7, 0.78) 72%, rgba(7, 7, 7, 0) 100%);
  pointer-events: none;
  z-index: 0;
}

#canvas[data-effects="off"] .sidebar.is-expanded::before {
  width: 576px;
  background: rgba(7, 7, 7, 0.96);
}

.sidebar.is-expanded .sidebar-list {
  left: 0;
  right: 16px;
  width: auto;
}

.sidebar.is-expanded .sidebar-track {
  margin-left: 16px;
}

.sidebar.is-expanded .sidebar-label {
  display: inline;
}

.sidebar.is-expanded .sidebar-item {
  text-align: left;
}

.sidebar-item:last-child {
  margin-bottom: 0;
}

.sidebar-item:focus {
  color: #EAF4F4;
  outline: none;
}

.sidebar-item:focus svg {
  color: #070707;
}

/* Immersive hero (JetFit): large radius, subtle resting border; focused =
   3dp-center white outline + glow (6px border on the 2× canvas). */
.hero {
  position: relative;
  height: 680px;
  margin-bottom: 40px;
}

.hero-banner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  border-radius: 56px;
  /* CONSTANT 6px border (3dp-center focus spec): color-only focus change —
     a width change would resize the padding box and twitch the artwork (M3). */
  border: 6px solid transparent;
  background: #111111;
  /* Resting hairline ring painted inside the border box. */
  box-shadow: inset 0 0 0 2px rgba(234, 244, 244, 0.24);
  -webkit-transform: scale(1);
          transform: scale(1);
  /* Focus border/shadow switch immediately; only movement may transition. */
  transition: -webkit-transform calc(200 * 0.001s) ease-out;
  transition: transform calc(200 * 0.001s) ease-out;
  transition: transform calc(200 * 0.001s) ease-out, -webkit-transform calc(200 * 0.001s) ease-out;
}

.hero.is-focused .hero-banner {
  border-color: #ffffff;
  /* JetFit focus glow (design source: "Outline 3.dp center / Glow"). */
  box-shadow: inset 0 0 0 2px rgba(234, 244, 244, 0.24), 0 0 40px rgba(67, 198, 200, 0.16);
}

.hero-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.hero-backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    90deg,
    rgba(7, 7, 7, 0.92) 0%,
    rgba(7, 7, 7, 0.55) 44%,
    rgba(7, 7, 7, 0) 78%
  );
}

.hero-select {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: none;
  border: none;
  outline: none;
}

.hero-content {
  position: absolute;
  left: 72px;
  right: 480px;
  bottom: 56px;
  pointer-events: none;
}

.hero-title {
  position: relative;
  height: 136px;
  margin: 0;
  color: #EAF4F4;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.2;
}

/* A reserved title slot avoids shifting controls when a logo finishes loading. */
.hero-title-text,
.hero-title-logo {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 100%;
}

.hero-title-logo {
  width: auto;
  height: auto;
  max-width: 520px;
  max-height: 128px;
}

.hero-description {
  margin: 20px 0 0;
  color: #AAC0C4;
  font-size: 28px;
  line-height: 1.35;
  max-width: 720px;
  /* Two-line clamp (JetFit): prefixed form only — legacy-safe (§12). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Reserved row under the logo: optional ratings cannot shift actions. */
.hero-ratings {
  height: 31px;
  margin-top: 16px;
  white-space: nowrap;
  pointer-events: none;
}
.hero-rating {
  display: inline-block;
  height: 31px;
  margin-right: 24px;
  padding: 0 10px;
  border-radius: 6px;
  color: #eaf4f4;
  font-size: 22px;
  font-weight: 600;
  line-height: 31px;
  vertical-align: top;
}
.hero-rating-value { margin-left: 8px; font-size: 24px; font-weight: 700; }
.hero-rating-tmdb {
  color: #07171f;
  background-color: rgba(13, 161, 200, .9);
  background-image: linear-gradient(to bottom, rgba(5, 149, 189, .94), rgba(13, 161, 200, .9));
}
.hero-rating-kp {
  color: #1f1007;
  background-color: rgba(242, 118, 51, .9);
  background-image: linear-gradient(to bottom, rgba(230, 106, 44, .94), rgba(242, 118, 51, .9));
}
.hero-rating-imdb {
  color: #1f1a09;
  background-color: rgba(221, 184, 42, .9);
  background-image: linear-gradient(to bottom, rgba(208, 172, 34, .94), rgba(221, 184, 42, .9));
}
#canvas[data-effects="off"] .hero-rating { background-image: none; }

.hero-cta {
  margin-top: 32px;
}

/* Focus must preserve action size and alignment; only color/shadow change. */
.hero-cta button,
.details-actions button {
  display: inline-block;
  padding: 0 31px;
  height: 64px;
  margin: 0 16px 0 0;
  font-family: inherit;
  font-size: 28px;
  font-weight: 500;
  line-height: 64px;
  background: #EAF4F4;
  color: #070707;
  border: 0;
  border-radius: 16px;
  vertical-align: middle;
  pointer-events: auto;
}

.hero-cta .hero-play {
  padding: 0 12px;
}

.hero-play svg {
  color: #ffffff;
  vertical-align: middle;
  margin: -4px 6px 0 0;
}

/* Auth extends the existing TV palette; fixed logical sizes scale with canvas. */
.auth { position: relative; width: 100%; height: 100%; }
.channel-card-name { position: absolute; top: 50%; left: 16px; right: 16px; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 26px; line-height: 1.2; text-align: center; }
/* Two quiet TV panes: artwork left, one centered task on the right. */
.auth-intro { position: absolute; left: 32px; top: 50%; width: 736px; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.auth-art { width: 672px; height: 331.2px; margin: 0 auto 24px; color: #aac0c4; }
.auth-art svg { display: block; width: 100%; height: 100%; }
.auth-title { font-size: 46px; line-height: 1.2; font-weight: 700; margin: 0 0 24px; text-align: center; }
.auth-copy { font-size: 28px; line-height: 1.45; color: #AAC0C4; margin: 0; }
.auth-benefits { list-style: none; width: 620px; margin: 0 auto; padding: 0; text-align: left; }
.auth-benefit { position: relative; padding-left: 60px; margin-bottom: 14px; line-height: 40px; }
.auth-benefit:last-child { margin-bottom: 0; }
.auth-benefit-icon { position: absolute; top: 2px; left: 0; width: 36px; height: 36px; color: #aac0c4; }
.auth-benefit-icon svg { display: block; }
.auth-benefit-title { font-size: 30px; font-weight: 600; }
.auth-intro-caption { max-width: 620px; margin: 20px auto 0; font-size: 26px; line-height: 1.3; text-align: center; color: #AAC0C4; }
.auth-panel { position: absolute; top: 50%; right: 40px; width: 704px; height: 872px; margin-top: -436px; padding: 48px 56px; border-radius: 32px; background: rgba(5, 12, 15, .35); text-align: center; }
.auth-panel-content { position: absolute; top: 108px; left: 56px; right: 56px; }
.auth-brand { width: 252px; height: 96px; margin: 0 auto 48px; }
.auth-tabs { display: block; width: 480px; height: 72px; padding: 8px; margin: 0 auto 32px; border-radius: 20px; background: #1b292e; white-space: nowrap; }
.auth-control, .auth-primary, .auth-key {
  -webkit-appearance: none; appearance: none; border: 2px solid transparent; border-radius: 12px; color: #EAF4F4; font: inherit;
  font-size: 26px; font-weight: 600; background: rgba(26, 36, 40, .8); height: 64px; padding: 0 24px;
}
.auth-control { margin-right: 12px; }
.auth-tabs .auth-control { width: 226px; height: 56px; border-radius: 12px; margin: 0; padding: 0 6px; font-size: 24px; background: transparent; color: #AAC0C4; }
.auth-tabs .auth-control:first-child { margin-right: 12px; }
.auth-tab-content { display: inline-block; vertical-align: middle; white-space: nowrap; }
.auth-tab-icon { display: inline-block; margin-right: 8px; vertical-align: -5px; }
.auth-tab-icon svg { display: block; width: 24px; height: 24px; }
.auth-tabs [aria-selected="true"] { background: #315b60; background: linear-gradient(to bottom, #315b60, #27494e); color: #EAF4F4; box-shadow: 0 4px 10px rgba(0,0,0,.24); }
#canvas[data-effects="off"] .auth-tabs [aria-selected="true"] { background: #315b60; }
.auth-primary { background: #23666a; background: linear-gradient(to bottom, #23666a, #1b565b); font-weight: 700; box-shadow: 0 6px 12px -3px rgba(0,0,0,.48); }
.auth-form { width: 480px; margin: 0 auto; }
.auth-form .auth-input { margin-bottom: 24px; }
.auth-input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 80px; padding: 0 26px; margin-bottom: 18px; border: 2px solid transparent; border-radius: 14px; background: rgba(27, 40, 44, .85); color: #EAF4F4; font: inherit; font-size: 28px; caret-color: #c7dedf; }
.auth-input::-webkit-input-placeholder { color: #AAC0C4; opacity: 1; }
.auth-input::placeholder { color: #AAC0C4; opacity: 1; }
.auth-password-row { position: relative; }
.auth-password-row .auth-input { padding-right: 84px; }
.auth-reveal { -webkit-appearance: none; appearance: none; position: absolute; top: 8px; right: 12px; width: 64px; height: 64px; border: 2px solid transparent; border-radius: 10px; padding: 14px; color: #AAC0C4; background: transparent; }
.auth-reveal svg { display: block; }
.auth-actions { margin-top: 32px; }
.auth-actions .auth-primary { width: 222px; height: 67.2px; border-radius: 14px; }
#auth-retry { height: 76.8px; }
/* Older TV outlines ignore border-radius. Reserve the rounded border at rest. */
.auth-control:focus, .auth-key:focus, .auth-primary:focus, .auth-reveal:focus { outline: none; border-color: #c7dedf; }
.auth-key:focus, .auth-reveal:focus { background: #34595d; }
.auth-input:focus { outline: none; border-color: #b6d0d2; background: #2b4045; }
.auth-status { font-size: 26px; line-height: 1.4; margin: 16px auto 0; min-height: 72px; max-width: 680px; }
.auth-key-hint { color: #AAC0C4; font-size: 24px; line-height: 1.4; margin: 28px 0 0; }
.auth-keyboard-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 9; background: rgba(3, 8, 10, .88); }
.auth-keyboard { position: absolute; top: 50%; left: 50%; width: 1008px; height: 640px; margin: -320px 0 0 -504px; padding: 32px 48px; border-radius: 24px; background: #101a1e; box-shadow: 0 12px 24px rgba(0,0,0,.4); }
.auth-keyboard h2 { font-size: 36px; line-height: 44px; margin: 0 0 16px; }
.auth-keyboard .auth-input { height: 72px; margin-bottom: 24px; background: #080f12; }
.auth-keys { width: 912px; height: 288px; }
.auth-key { display: inline-block; width: 96px; height: 64px; border-radius: 10px; margin: 0 6px 8px 0; padding: 0; font-size: 30px; }
.auth-key[hidden] { display: none; }
.auth-key:nth-child(9n) { margin-right: 0; }
.auth-key-actions { width: 912px; white-space: nowrap; margin-top: 16px; }
.auth-key-actions .auth-control { width: 164px; margin-right: 12px; padding: 0 12px; }
.auth-key-actions .auth-primary { width: 208px; padding: 0 14px; }
.auth-keyboard-hint { margin: 16px 0 0; color: #AAC0C4; font-size: 24px; line-height: 28px; text-align: center; }
.auth-keyboard .auth-key, .auth-keyboard .auth-control { background: #2b4048; color: #eaf4f4; }
.auth-keyboard [aria-pressed="true"] { background: #3a5960; }
.auth-keyboard .auth-key:focus, .auth-keyboard .auth-control:focus, #canvas .auth-keyboard .auth-primary:focus { background: #d9e6e6; color: #14292d; border-color: #d9e6e6; }
.auth-activation { text-align: center; }
.auth-activation-head { margin-bottom: 4px; }
.auth-activation-details { text-align: center; }
.auth-qr-box { width: 224px; height: 224px; margin: 0 auto 8px; border-radius: 8px; background: rgba(8,16,19,.45); }
.auth-qr { display: block; width: 224px; height: 224px; border-radius: 8px; background: #fff; }
.auth-code { font-size: 48px; font-weight: 700; letter-spacing: 4px; margin: 0 0 8px; }
.auth-address { font-size: 24px; line-height: 1.35; overflow-wrap: break-word; word-wrap: break-word; max-height: 66px; margin: 0; overflow: hidden; }
.auth-expiry { font-size: 24px; color: #AAC0C4; margin: 4px 0; }
.auth-activation .auth-copy { font-size: 24px; max-width: 560px; margin: 0 auto; }
.auth-activation .auth-primary { min-width: 360px; height: 67.2px; }
.auth [hidden] { display: none; }
#canvas[data-effects="off"] .auth-primary { background: #23666a; box-shadow: none; }
.tv-guide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 8; background: rgba(21,38,43,.94); padding: 32px 48px; border-radius: 24px; }
#canvas[data-effects="off"] .tv-guide { background: #17272c; }
.tv-guide-title { font-size: 36px; line-height: 48px; margin: 0 180px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tv-guide-close { position: absolute; top: 28px; right: 40px; border: 2px solid transparent; border-radius: 10px; padding: 14px 22px; color: #EAF4F4; background: #283b40; font: inherit; font-size: 26px; }
.tv-guide-days { position: absolute; top: 100px; left: 48px; right: 48px; height: 64px; overflow: hidden; }
.tv-guide-day-track { position: relative; height: 64px; white-space: nowrap; transition: -webkit-transform 120ms ease-out; transition: transform 120ms ease-out; transition: transform 120ms ease-out, -webkit-transform 120ms ease-out; }
.tv-guide-day { display: inline-block; width: 160px; height: 60px; margin-right: 16px; padding: 0 12px; border: 2px solid transparent; border-radius: 12px; font: inherit; font-size: 26px; color: #EAF4F4; background: rgba(180,185,204,.14); }
.tv-guide-day[aria-pressed="true"] { background: #0F3B41; }
.tv-guide-day:focus { outline: none; border-color: #EAF4F4; }
#canvas[data-animations="reduced"] .tv-guide-day-track { transition-duration: 80ms; }
#canvas[data-animations="off"] .tv-guide-day-track, #canvas[data-animations="off"] .tv-guide-track { transition: none !important; }
.tv-guide-state { position: absolute; top: 184px; left: 48px; right: 48px; height: 40px; margin: 0; overflow: hidden; font-size: 24px; line-height: 36px; color: #AAC0C4; white-space: nowrap; text-overflow: ellipsis; }
.tv-guide-viewport { position: absolute; top: 240px; left: 48px; right: 48px; bottom: 24px; overflow: hidden; }
.tv-guide-track { position: relative; width: 100%; }
.tv-guide-row { position: absolute; left: 0; display: block; width: 100%; height: 66px; text-align: left; padding: 0 20px; border: 2px solid transparent; border-radius: 12px; font: inherit; font-size: 28px; color: #EAF4F4; background: rgba(180,185,204,.1); overflow: hidden; white-space: nowrap; }
.tv-guide-time, .tv-guide-name, .tv-guide-mark { position: absolute; top: 0; line-height: 62px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tv-guide-time { left: 20px; width: 220px; font-size: 26px; color: #AAC0C4; }
.tv-guide-name { left: 256px; right: 296px; font-weight: 600; }
.tv-guide-duration { position: absolute; top: 14px; right: 20px; padding: 0 12px; border-radius: 8px; background: rgba(170,192,196,.14); color: #AAC0C4; font-size: 22px; line-height: 34px; }
.tv-guide-mark { right: 164px; width: 112px; font-size: 22px; text-align: right; color: #AAC0C4; }
.tv-guide-mark svg { display: inline-block; vertical-align: middle; }
.tv-guide-row[data-playable="true"] .tv-guide-mark { color: #43C6C8; }
.tv-guide-row[aria-current="true"] { color: #88c2c5; }
.tv-guide-row:focus, .tv-guide-close:focus { outline: none; border-color: #c7dedf; background: #34595d; }
.tv-guide-row:focus .tv-guide-duration { color: inherit; }
.tv-guide-notice { position: absolute; bottom: 48px; left: 50%; width: 760px; margin-left: -380px; padding: 24px 24px 24px 76px; border-radius: 16px; background: #2c484e; color: #EAF4F4; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.tv-guide-notice[hidden] { display: none; }
.tv-guide-notice-icon { position: absolute; top: 28px; left: 24px; color: #AAC0C4; }
.tv-guide-notice-title { margin: 0 0 8px; font-size: 28px; font-weight: 600; line-height: 36px; }
.tv-guide-notice-time { margin: 0; font-size: 26px; line-height: 34px; color: #AAC0C4; }

/* Local left drawer: protected remote focus, transform scroll, no runtime blur. */
.tv-category-overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 9; background: rgba(5,12,16,.64); }
.tv-category-panel { position: absolute; top: 0; bottom: 0; left: 0; width: 520px; border-radius: 24px; background: #142329; color: #EAF4F4; box-shadow: 12px 0 28px rgba(0,0,0,.24); -webkit-animation: tv-category-enter 160ms ease-out; animation: tv-category-enter 160ms ease-out; transition: opacity 160ms ease-out, -webkit-transform 160ms ease-out; transition: transform 160ms ease-out, opacity 160ms ease-out; transition: transform 160ms ease-out, opacity 160ms ease-out, -webkit-transform 160ms ease-out; }
.tv-category-panel h2 { position: absolute; top: 36px; left: 88px; right: 32px; margin: 0; font-size: 36px; font-weight: 700; line-height: 48px; }
.tv-category-close { position: absolute; top: 36px; left: 24px; width: 48px; height: 48px; padding: 7px; border: 3px solid transparent; border-radius: 12px; background: transparent; color: inherit; }
.tv-category-close svg { display: block; }
.tv-category-viewport { position: absolute; top: 128px; left: 24px; right: 40px; overflow: hidden; }
.tv-category-track { position: relative; width: 100%; transition: -webkit-transform 160ms ease-out; transition: transform 160ms ease-out; transition: transform 160ms ease-out, -webkit-transform 160ms ease-out; }
.tv-category-row { position: absolute; left: 0; width: 100%; height: 64px; padding: 0; border: 3px solid transparent; border-radius: 12px; font: inherit; font-size: 28px; color: inherit; background: transparent; text-align: left; }
.tv-category-name { position: absolute; left: 16px; right: 96px; top: 0; line-height: 58px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tv-category-count { position: absolute; right: 16px; top: 0; width: 64px; line-height: 58px; text-align: right; font-size: 24px; color: #AAC0C4; }
.tv-category-row[aria-pressed="true"] { background: #263a40; font-weight: 700; }
.tv-category-row:focus, .tv-category-close:focus { outline: none; border-color: #eaf4f4; background: #34595d; }
.tv-category-row:focus .tv-category-count { color: inherit; }
.tv-category-scroll { position: absolute; top: 128px; right: 20px; width: 4px; border-radius: 2px; background: rgba(234,244,244,.12); }
.tv-category-scroll span { display: block; width: 100%; border-radius: 2px; background: #8ba7ad; transition: -webkit-transform 160ms ease-out; transition: transform 160ms ease-out; transition: transform 160ms ease-out, -webkit-transform 160ms ease-out; }
.tv-category-position { position: absolute; left: 40px; bottom: 28px; margin: 0; font-size: 24px; line-height: 32px; color: #AAC0C4; }
.tv-category-overlay.is-closing { pointer-events: none; background: transparent; }
.tv-category-overlay.is-closing .tv-category-panel { -webkit-animation: none; animation: none; -webkit-transform: translateX(-32px); transform: translateX(-32px); opacity: 0; }
#canvas[data-animations="reduced"] .tv-category-panel { -webkit-animation-duration: 80ms; animation-duration: 80ms; }
@-webkit-keyframes tv-category-enter { from { -webkit-transform: translateX(-32px); transform: translateX(-32px); opacity: .6; } to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } }
@keyframes tv-category-enter { from { -webkit-transform: translateX(-32px); transform: translateX(-32px); opacity: .6; } to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } }

.hero-cta .hero-play,
.details-actions .details-play {
  background: #23666a;
  background: linear-gradient(to bottom,
    rgba(35, 110, 113, 0.94), rgba(27, 86, 91, 0.94));
  color: #EAF4F4;
  font-weight: 700;
  box-shadow: 0 6px 12px -3px rgba(0, 0, 0, 0.48);
}

#canvas[data-effects="off"] .hero-cta .hero-play,
#canvas[data-effects="off"] .details-actions .details-play {
  background: #23666a;
}

.hero-cta button:focus,
.details-actions button:focus {
  outline: none;
}

.hero-cta .hero-play:focus,
.details-actions .details-play:focus {
  background: #2b797e;
  background: linear-gradient(to bottom,
    rgba(43, 125, 129, 0.96), rgba(32, 103, 109, 0.96));
  box-shadow: 0 9px 16px -3px rgba(0, 0, 0, 0.68);
}

.hero-cta .hero-bookmark,
.details-actions .details-bookmark {
  width: 64px;
  padding: 0;
  background: rgba(7, 12, 14, 0.30);
  color: #AAC0C4;
  text-align: center;
}

.hero-bookmark svg,
.details-bookmark svg {
  vertical-align: middle;
  margin-top: -4px;
}

.hero-bookmark.is-active,
.details-bookmark.is-active {
  background: rgba(27, 71, 75, 0.72);
  color: #9ad4d5;
}

.hero-bookmark.is-active svg path,
.details-bookmark.is-active svg path {
  fill: currentColor;
}

.hero-cta .hero-bookmark:focus,
.details-actions .details-bookmark:focus {
  background: rgba(71, 91, 97, 0.94);
  color: #EAF4F4;
  box-shadow: 0 6px 12px -3px rgba(0, 0, 0, 0.48);
}

#canvas[data-effects="off"] .hero-cta button,
#canvas[data-effects="off"] .details-actions button {
  box-shadow: none;
}

#canvas[data-effects="off"] .hero-cta .hero-play:focus,
#canvas[data-effects="off"] .details-actions .details-play:focus {
  background: #2b797e;
}

.hero-dots {
  position: absolute;
  right: 32px;
  bottom: 52px;
  text-align: right;
  line-height: 12px;
}

.hero-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 6px;
  border-radius: 6px;
  background: rgba(234, 244, 244, 0.32);
}

.hero-dot.is-active {
  background: #ffffff;
}

/* ---- Rails (JetFit media cards: text BELOW the artwork) ---- */

/* NOTE: .rails/.rails-content stay position:static — the rails' offsetParent
   must be .home-content so rail.offsetTop includes the hero above it (the
   page-pan math pans the whole content; a positioned wrapper here would
   report rail tops relative to itself and collapse the pan to 0). */

.rail {
  margin-bottom: 48px;
}

.rail-title {
  margin: 0 0 24px;
  color: #EAF4F4;
  font-size: 44px;
  font-weight: 600;
}

.rail-viewport {
  position: relative;
  /* Explicit rail width describes content; channel shadow padding is extra. */
  box-sizing: content-box;
  overflow: hidden;
  /* Vertical headroom so the focused ring/glow is never clipped (§19). */
  padding: 8px 0 24px;
}

.rail-track {
  position: relative;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-timing-function: ease-out;
  /* Duration set inline from the motion profile (Rail.ts). */
}

.poster-card {
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  background: rgba(30, 42, 47, 0.62);
  border: 6px solid rgba(172, 194, 202, 0.12);
  border-radius: 32px;
  overflow: visible;
  color: #EAF4F4;
  text-align: left;
  -webkit-transform: scale(1);
          transform: scale(1);
  transition: -webkit-transform calc(200 * 0.001s) ease-out;
  transition: transform calc(200 * 0.001s) ease-out;
  transition: transform calc(200 * 0.001s) ease-out, -webkit-transform calc(200 * 0.001s) ease-out;
}

/* White focus ring stays immediate; only Full effects adds a soft shadow. */
.poster-card:focus {
  border-color: #ffffff;
  outline: none;
  z-index: 1;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.poster-art {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  background: #1C282D;
  overflow: hidden;
  border-radius: calc(32px - 6px);
}

.poster-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Title + meta BELOW the artwork, on the page background (JetFit). */
.poster-title {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 100%;
  margin: 20px 0 0;
  color: #EAF4F4;
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.poster-meta {
  position: absolute;
  left: 4px;
  right: 4px;
  top: calc(100% + 64px);
  color: #AAC0C4;
  font-size: 24px;
  line-height: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.poster-progress {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  height: 4px;
  display: block;
  background: rgba(234, 244, 244, 0.22);
}

.poster-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: #43C6C8;
}

/* Wide category row (JetFit "Categories"): text-first surface cards with a
   blended image on the right. */
.category-viewport {
  position: relative;
  overflow: hidden;
  padding: 8px 0 24px;
}

.category-track {
  position: relative;
  height: 240px;
  white-space: nowrap;
}

/* Shared base for windowed-row cards (Categories + channel logos). The row
   positions cards absolutely (left/width inline) — same pattern as
   .poster-card. Flow layout would double the pitch (relative left = static +
   offset) and put focus on invisible cards (reviewer H2-R). */
.row-card {
  position: absolute;
  top: 0;
  font-family: inherit;
  margin: 0;
  padding: 0;
  background: rgba(30, 42, 47, 0.62);
  border: 6px solid rgba(172, 194, 202, 0.12);
  border-radius: 32px;
  overflow: hidden;
  color: #EAF4F4;
  text-align: left;
  /* Reduced mode sets a global duration; never inherit transition-property: all. */
  transition-property: none;
}

.row-card:focus {
  border-color: #ffffff;
  outline: none;
  z-index: 1;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

/* Three category cards fit the safe content width; artwork stays on the right. */
.category-card::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  content: '';
  background: linear-gradient(90deg,
    #1C282D 0%, #1C282D 40%,
    rgba(28, 40, 45, 0) 100%);
  pointer-events: none;
}

/* Channel logo box (Недавно смотрели): smaller than media/category rows,
   logo only — centered on translucent glass; softness comes from the bitmap. */
.channel-card {
  background: rgba(65, 78, 83, 0.36);
  border: 0;
  border-radius: 24px;
  box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.38);
}

/* The focus ring overlays the surface without a resting border gutter. */
.channel-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 6px solid transparent;
  border-radius: 24px;
  pointer-events: none;
}

.channel-card:focus::after {
  border-color: #ffffff;
}

/* Shadow headroom at the clipped rail edges, without moving any cards. */
#rail-recent-channels .rail-viewport {
  margin-left: -12px;
  margin-right: -12px;
  padding-left: 12px;
  padding-right: 12px;
}

.channel-card img {
  position: absolute;
  /* Preserve the logo inset after removing the old 6px layout border. */
  top: 26px;
  left: 26px;
  right: 26px;
  bottom: 26px;
  width: calc(100% - 52px);
  height: calc(100% - 52px);
  object-fit: contain;
}

.category-text {
  position: absolute;
  top: 32px;
  left: 32px;
  right: 160px;
  z-index: 1;
}

.category-title {
  display: block;
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
}

.category-description {
  display: block;
  margin-top: 12px;
  color: #AAC0C4;
  font-size: 24px;
  line-height: 34px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.category-card img {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  object-fit: cover;
  /* Blend into the card surface (JetFit category art treatment). */
  opacity: 0.85;
}

/* ---- Details screen (JetFit entity-details) ---- */

.details {
  position: relative;
  height: 100%;
}

.details-viewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 96px;
  overflow: hidden;
}

/* Full-canvas artwork, outside the inset viewport used by the controls.
   DetailsScreen applies profile-aware bleed with legacy-safe inline pixels. */
.details-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  background: #111111;
}

.details-backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 20%;
}

.details-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:
    linear-gradient(
      90deg,
      rgba(7, 7, 7, 0.96) 0%,
      rgba(7, 7, 7, 0.88) 34%,
      rgba(7, 7, 7, 0.55) 58%,
      rgba(7, 7, 7, 0.12) 88%,
      rgba(7, 7, 7, 0.05) 100%
    ),
    linear-gradient(180deg, rgba(7, 7, 7, 0.1) 0%, rgba(7, 7, 7, 0) 34%, rgba(7, 7, 7, 0.72) 100%);
}

.details-content {
  position: absolute;
  left: 16px;
  right: 48px;
  bottom: 64px;
  max-width: 960px;
}

.details-eyebrow {
  margin: 0;
  color: #AAC0C4;
  font-size: 28px;
}

.details-title {
  margin: 16px 0 0;
  color: #EAF4F4;
  font-size: 72px;
  font-weight: 400;
  line-height: 1.15;
}

.details-description {
  /* Full-width block directly under the vertical poster (user request):
     3 lines across the whole row = generous, lightly truncated. */
  margin: 24px 0 0;
  color: #AAC0C4;
  font-size: 28px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Head row: VERTICAL poster (2:3) left; ONLY the genre eyebrow and the title
   to its right (user request) — inline-block row, legacy-safe (no flex). The
   art reuses the catalog poster URL (loader dedups the download, §25). */
.details-head {
  font-size: 0; /* kills inline-block whitespace */
}

.details-art {
  display: inline-block;
  width: 340px;
  height: 510px;
  margin: 0 48px 0 0;
  vertical-align: top;
  overflow: hidden;
  border-radius: 32px;
  background: #151515;
}

.details-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.details-headline {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 388px);
  font-size: 28px;
}

/* Stat blocks (JetFit): value over label. */
.details-stats {
  margin-top: 32px;
}

.details-stat {
  display: inline-block;
  margin: 0 48px 0 0;
  vertical-align: top;
}

.details-stat-value {
  display: block;
  color: #EAF4F4;
  font-size: 44px;
  font-weight: 600;
  line-height: 48px;
}

.details-stat-label {
  display: block;
  margin-top: 4px;
  color: #AAC0C4;
  font-size: 24px;
  line-height: 28px;
}

.details-actions {
  margin-top: 40px;
}

/* Optional trailer reserves its thin border in every focus state. All
   actions share Home's 64px geometry and never scale or change thickness. */
.details-actions .details-trailer {
  padding: 0 40px;
  line-height: 60px;
  background: none;
  color: #EAF4F4;
  border: 2px solid #647B83;
}

.details-actions .details-trailer:focus {
  background: rgba(71, 91, 97, 0.94);
  border-color: #EAF4F4;
}

.details-trailer svg {
  vertical-align: middle;
  margin: -4px 10px 0 0;
}

/* ---- Settings screen ---- */

/* TV Settings: bounded section navigation and one active panel, no layout reads. */
.settings { position: relative; height: 100%; }
.settings-content { position: absolute; top: 0; bottom: 0; right: 0; }
.settings-title { height: 88px; padding-top: 24px; margin: 0; color: #EAF4F4; font-size: 48px; line-height: 64px; font-weight: 600; }
.settings-sections { position: absolute; top: 128px; left: 0; width: 448px; }
.settings-section { position: relative; display: block; width: 100%; height: 88px; margin: 0 0 8px; padding: 0; border: 3px solid transparent; border-radius: 16px; background: transparent; color: #EAF4F4; text-align: left; font: inherit; }
.settings-section svg { position: absolute; left: 20px; top: 25px; }
.settings-section-label { position: absolute; left: 76px; right: 20px; top: 10px; font-size: 28px; font-weight: 600; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-section-hint { position: absolute; left: 76px; right: 20px; top: 46px; font-size: 24px; line-height: 28px; color: #AAC0C4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-section[aria-selected="true"] { background: #263a40; }
.settings-section:focus { outline: none; background: #d9e6e6; color: #14292d; }
.settings-section:focus .settings-section-hint { color: #314a50; }
.settings-back { position: absolute; bottom: 0; left: 0; width: 448px; height: 72px; padding: 0 24px; border: 3px solid transparent; border-radius: 14px; color: #AAC0C4; background: transparent; text-align: left; font: inherit; font-size: 28px; font-weight: 600; }
.settings-back:focus { outline: none; color: #EAF4F4; border-color: #eaf4f4; background: #263a40; }
.settings-pane { position: absolute; top: 128px; bottom: 0; left: 496px; right: 0; padding: 32px; border-radius: 24px; color: #EAF4F4; background: rgba(14,29,34,.62); outline: none; }
.settings-pane-title { margin: 0; font-size: 40px; line-height: 52px; font-weight: 600; }
.settings-pane-hint { margin: 12px 0 36px; font-size: 26px; line-height: 34px; color: #AAC0C4; }
.settings-readout { margin: 28px 0 0; font-size: 24px; line-height: 34px; color: #AAC0C4; }
.settings [hidden] { display: none; }
.settings-row { position: relative; display: block; width: 100%; height: 88px; margin: 0 0 12px; padding: 0 24px; border: 3px solid transparent; border-radius: 14px; font: inherit; font-size: 28px; font-weight: 600; line-height: 82px; text-align: left; color: #EAF4F4; background: rgba(37,56,62,.72); }
.settings-row-label { position: absolute; left: 24px; right: 44%; top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-row-value { position: absolute; top: 0; right: 56px; max-width: 36%; font-size: 26px; font-weight: 400; color: #AAC0C4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-row-arrow { position: absolute; right: 16px; top: 29px; height: 24px; color: #AAC0C4; }
.settings-row-arrow svg { display: block; }
.settings-row:focus { outline: none; border-color: #eaf4f4; background: #34595d; }
.settings-row:focus .settings-row-value, .settings-row:focus .settings-row-arrow { color: inherit; }
.settings-row[role="switch"] .settings-row-arrow { display: none; }
.settings-row[role="switch"] .settings-row-value { right: 100px; }
.settings-row[role="switch"]::before { content: ''; position: absolute; right: 24px; top: 27px; width: 56px; height: 28px; border-radius: 14px; background: #486067; }
.settings-row[role="switch"]::after { content: ''; position: absolute; right: 56px; top: 31px; width: 20px; height: 20px; border-radius: 10px; background: #d9e6e6; transition: -webkit-transform 100ms ease-out; transition: transform 100ms ease-out; transition: transform 100ms ease-out, -webkit-transform 100ms ease-out; }
.settings-row[aria-checked="true"]::before { background: #a4c0c2; }
.settings-row[aria-checked="true"]::after { -webkit-transform: translateX(28px); transform: translateX(28px); background: #14292d; }
.settings-account { position: relative; height: 144px; padding-left: 112px; }
.settings-avatar { position: absolute; top: 0; left: 0; width: 88px; height: 88px; padding: 20px; border-radius: 44px; background: #263a40; color: #a4c0c2; }
.settings-avatar svg { display: block; }
.settings-account-name { margin: 0; font-size: 38px; font-weight: 600; line-height: 48px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-subscription { display: inline-block; margin-top: 16px; padding: 6px 14px; border-radius: 10px; font-size: 24px; line-height: 32px; color: #d4e3e5; background: #263a40; }
.settings-detail { position: relative; height: 72px; border-bottom: 1px solid rgba(220,224,230,.1); font-size: 26px; line-height: 32px; }
.settings-detail-label { position: absolute; top: 20px; left: 0; max-width: 42%; color: #AAC0C4; }
.settings-detail-value { position: absolute; top: 20px; right: 0; max-width: 55%; font-weight: 600; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-logout { margin-top: 24px; }
.settings-brand { display: block; width: 200px; height: 76px; margin-bottom: 24px; }
.settings-release { position: relative; height: 76px; margin-bottom: 24px; }
.settings-release .settings-brand { margin: 0; }
.settings-version { position: absolute; top: 22px; right: 0; margin: 0; font-size: 26px; line-height: 32px; color: #AAC0C4; }
.settings-choice-panel { position: absolute; z-index: 4; top: 140px; left: 32px; right: 32px; padding: 24px; border-radius: 20px; background: #182b31; -webkit-animation: settings-choice-in 120ms ease-out; animation: settings-choice-in 120ms ease-out; }
.settings-choice-panel h3 { margin: 0 0 24px; font-size: 32px; line-height: 44px; }
.settings-choice { position: relative; display: block; width: 100%; height: 76px; margin: 0 0 8px; padding: 0 64px 0 20px; border: 3px solid transparent; border-radius: 12px; background: transparent; color: #EAF4F4; font: inherit; font-size: 28px; line-height: 70px; text-align: left; }
.settings-choice[aria-checked="true"] { background: #263a40; font-weight: 600; }
.settings-choice[aria-checked="true"]::after { content: ''; position: absolute; right: 24px; top: 26px; width: 18px; height: 18px; border-radius: 9px; background: #a4c0c2; }
.settings-choice:focus { outline: none; border-color: #eaf4f4; background: #34595d; }
#canvas[data-animations="reduced"] .settings-choice-panel { -webkit-animation-duration: 80ms; animation-duration: 80ms; }
@media (prefers-reduced-motion: reduce) { .settings-choice-panel { -webkit-animation: none; animation: none; } }
@-webkit-keyframes settings-choice-in { from { opacity: .5; } to { opacity: 1; } }
@keyframes settings-choice-in { from { opacity: .5; } to { opacity: 1; } }
/* ---- Player screen ---- */

.player {
  position: relative;
  height: 100%;
  background: #000;
}

/* Full-bleed video surface (§10: video may exit the safe zone). */
.player-surface {
  position: absolute;
  left: calc(-1 * 72px);
  right: calc(-1 * 72px);
  top: calc(-1 * 48px);
  bottom: calc(-1 * 48px);
  overflow: hidden;
  background: #000;
}

.player-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.player-hud {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 7, 7, 0.55) 0%,
    rgba(7, 7, 7, 0) 30%,
    rgba(7, 7, 7, 0) 55%,
    rgba(7, 7, 7, 0.82) 100%
  );
}

.player-title {
  position: absolute;
  left: 48px;
  top: 24px;
  margin: 0;
  color: #EAF4F4;
  font-size: 44px;
  font-weight: 600;
}

.player-progress {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 176px;
  height: 8px;
  background: rgba(234, 244, 244, 0.22);
}

.player-progress-fill {
  height: 100%;
  width: 0;
  background: #43C6C8;
}

.player-times {
  position: absolute;
  left: 48px;
  bottom: 136px;
  margin: 0;
  color: #AAC0C4;
  font-size: 28px;
}

.player-error {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 96px;
  margin: 0;
  color: #FFB4AB;
  font-size: 28px;
}

.player-controls {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 32px;
}

.player-control {
  display: inline-block;
  margin: 0 16px 0 0;
  padding: 0 36px;
  height: 80px;
  font-family: inherit;
  font-size: 28px;
  line-height: 76px;
  background: #202020;
  color: #EAF4F4;
  border: 2px solid transparent;
  border-radius: 999px;
  -webkit-transform: scale(1);
          transform: scale(1);
  transition: -webkit-transform calc(200 * 0.001s) ease-out;
  transition: transform calc(200 * 0.001s) ease-out;
  transition: transform calc(200 * 0.001s) ease-out, -webkit-transform calc(200 * 0.001s) ease-out;
}

.player-control:focus {
  border-color: #ffffff;
  outline: none;
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
}

.player-control[disabled] {
  opacity: 0.4;
}

/* VOD: a compact playback HUD; menus render only their eight visible choices. */
.vod-player [hidden] { display: none; }
.vod-panel { position: absolute; left: 0; right: 0; bottom: 24px; height: 388px; }
.vod-heading { position: absolute; top: 0; left: 0; right: 0; height: 80px; }
.vod-badge { display: inline-block; padding: 6px 14px; border-radius: 8px; background: rgba(77,163,168,.28); color: #d9eeee; font-size: 19px; font-weight: 700; letter-spacing: 1px; }
.vod-heading .vod-badge { position: absolute; top: 3px; right: 0; }
.vod-title { margin: 0 140px 8px 0; font-size: 36px; line-height: 42px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vod-subtitle { margin: 0; color: #AAC0C4; font-size: 24px; line-height: 30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vod-progress { position: absolute; left: 0; right: 0; top: 104px; height: 16px; border: 2px solid transparent; border-radius: 6px; background: rgba(211,229,229,.18); }
.vod-progress:focus { outline: none; border-color: #EAF4F4; }
.vod-progress-fill { width: 100%; height: 100%; transform-origin: left center; -webkit-transform-origin: left center; transform: scaleX(0); -webkit-transform: scaleX(0); border-radius: 4px; background: #a4c0c2; }
.vod-times { position: absolute; left: 0; right: 0; top: 128px; color: #AAC0C4; font-size: 24px; line-height: 34px; }
.vod-times span:last-child { float: right; }
.vod-status { position: absolute; left: 0; right: 0; bottom: 408px; margin: 0; color: #EAF4F4; font-size: 24px; line-height: 32px; max-height: 64px; overflow: hidden; }
.vod-main { position: absolute; left: 0; right: 0; top: 184px; height: 120px; }
.vod-tools { position: absolute; left: 50%; bottom: 0; width: 560px; height: 64px; margin-left: -280px; text-align: center; white-space: nowrap; }
.vod-tools .vod-control:last-child { margin-right: 0; }
.vod-seek-hint { position: absolute; top: 126px; left: 50%; width: 320px; margin-left: -160px; color: #EAF4F4; font-size: 26px; line-height: 34px; text-align: center; }
.vod-control[disabled] { opacity: .42; }
.vod-picker { position: absolute; z-index: 4; top: 135px; right: 32px; width: 620px; min-height: 150px; padding: 24px; border-radius: 20px; background: #17262b; box-shadow: 0 16px 50px rgba(0,0,0,.48); }
.vod-picker-title { margin: 0 0 18px; font-size: 32px; line-height: 40px; }
.vod-option { display: block; width: 100%; height: 62px; margin: 0 0 7px; padding: 0 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 3px solid transparent; border-radius: 12px; background: #283a40; color: #e8f0f0; font: inherit; font-size: 25px; text-align: left; }
.vod-option:focus, .vod-page:focus { outline: none; border-color: #e6f2f2; background: #42656a; }
.vod-option[aria-current="true"] { color: #EAF4F4; border-color: #647B83; }
.vod-pages { height: 54px; margin-top: 10px; color: #c6d7d9; font-size: 22px; text-align: center; }
.vod-page { width: 72px; height: 50px; margin: 0 10px; border: 3px solid transparent; border-radius: 10px; background: #283a40; color: #e8f0f0; font: inherit; font-size: 28px; }
.vod-page[disabled] { opacity: .3; }
#canvas[data-theme="sad-purple"] .vod-badge { background: rgba(148,130,180,.3); color: #e8e0f4; }
#canvas[data-theme="sad-purple"] .vod-progress-fill { background: #a597c0; }
#canvas[data-theme="sad-purple"] .vod-option, #canvas[data-theme="sad-purple"] .vod-page { background: #312c3c; }
#canvas[data-theme="sad-purple"] .vod-picker { background: #211e2a; }
#canvas[data-theme="sad-purple"] .vod-option:focus, #canvas[data-theme="sad-purple"] .vod-page:focus { background: #504661; }
.player-clock { position: absolute; top: 24px; right: 0; width: 220px; padding: 0 16px; border-radius: 12px; background: rgba(8,12,15,.64); color: #EAF4F4; font-size: 64px; font-weight: 700; line-height: 76px; text-align: right; font-variant-numeric: tabular-nums; }

/* Router transition failure surface (§25): visible, not stylable-critical. */
/* Live TV: one low-cost overlay, explicit 1080p geometry, no runtime blur. */
.live-player { color: #eaf4f4; }
.live-player [hidden] { display: none; }
.live-loading { position: absolute; z-index: 2; pointer-events: none; }
.live-loading-ring { position: absolute; top: 50%; left: 50%; width: 128px; height: 128px; margin: -64px 0 0 -64px; border: 12px solid rgba(217,230,230,.28); border-top-color: #a4c0c2; border-radius: 50%; background: rgba(8,12,15,.64); -webkit-animation: live-loading-spin 1s linear infinite; animation: live-loading-spin 1s linear infinite; }
#canvas[data-animations="reduced"] .live-loading-ring { -webkit-animation-duration: 1.6s; animation-duration: 1.6s; }
@media (prefers-reduced-motion: reduce) { .live-loading-ring { -webkit-animation: none; animation: none; } }
@-webkit-keyframes live-loading-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes live-loading-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
.player-wake { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; outline: none; }
.live-hud { background: none; z-index: 3; }
.live-overlay { position: absolute; background: linear-gradient(to bottom, transparent 28%, rgba(6,12,15,.6) 58%, rgba(6,12,15,.97)); }
.live-panel { position: absolute; left: 0; right: 0; bottom: 24px; height: 320px; transform: translateY(0); -webkit-transform: translateY(0); transition: -webkit-transform 180ms ease-out; transition: transform 180ms ease-out; transition: transform 180ms ease-out, -webkit-transform 180ms ease-out; -webkit-transition: -webkit-transform 180ms ease-out; }
.has-channel-row .live-panel { transform: translateY(-280px); -webkit-transform: translateY(-280px); }
#canvas[data-animations="off"] .live-panel { transition: none; -webkit-transition: none; }
#canvas[data-animations="reduced"] .live-panel { transition-duration: 100ms; -webkit-transition-duration: 100ms; }
.live-identity { position: relative; width: 50%; height: 80px; padding-left: 112px; }
.live-player-logo { position: absolute; left: 0; top: 0; width: 88px; height: 72px; object-fit: contain; }
.live-player-name { margin: 0 0 8px; font-size: 36px; line-height: 42px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.live-badge { font-size: 20px; font-weight: 600; color: #aac0c4; letter-spacing: 1px; }
.live-progress { position: absolute; top: 102px; left: 0; right: 0; height: 10px; border-radius: 5px; background: rgba(217,230,230,.18); overflow: hidden; }
.live-progress-fill { display: block; height: 100%; background: #a4c0c2; border-radius: 5px; }
.live-start, .live-end { display: inline-block; font-size: 24px; line-height: 34px; vertical-align: middle; color: #aac0c4; }
.live-start:not(:empty) { margin-right: 12px; } .live-end:not(:empty) { margin-left: 12px; }
.live-player-status { position: absolute; top: 0; left: 50%; right: 0; margin: 0; font-size: 24px; line-height: 32px; text-align: right; color: #d4e3e5; }
.live-stream-info { position: absolute; top: 40px; right: 0; max-width: 50%; height: 40px; line-height: 40px; text-align: right; white-space: nowrap; }
.live-stream-value { display: inline-block; height: 40px; max-width: 208px; margin-left: 8px; padding: 6px 12px; border-radius: 7px; color: #d4e3e5; background: rgba(37,56,62,.72); font-size: 24px; font-weight: 600; line-height: 28px; vertical-align: middle; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Combined caps plus five margins fit the smallest supported half-column (811px). */
.live-stream-codec { max-width: 120px; }
.live-stream-bitrate { max-width: 168px; }
.live-stream-protocol { max-width: 152px; }
.live-main { position: absolute; left: 0; right: 0; top: 132px; height: 120px; }
.live-program-block { position: absolute; top: 0; width: calc(50% - 180px); }
.live-now { left: 0; } .live-next { right: 0; text-align: right; }
.live-program-meta { height: 34px; margin-bottom: 12px; white-space: nowrap; }
.live-program-tag { display: inline-block; vertical-align: middle; padding: 5px 12px; font-size: 20px; line-height: 24px; font-weight: 600; border-radius: 7px; background: #25383e; color: #d4e3e5; }
.live-program-title { margin: 0; font-size: 28px; line-height: 34px; max-height: 68px; overflow: hidden; }
.live-transport { position: absolute; top: 12px; left: 50%; width: 280px; height: 92px; margin-left: -140px; padding: 12px; border-radius: 20px; background: rgba(23,38,44,.78); text-align: center; box-shadow: 0 8px 20px rgba(0,0,0,.25); white-space: nowrap; }
.live-control { display: inline-block; width: 64px; height: 64px; padding: 14px; margin-right: 16px; border: 2px solid transparent; border-radius: 12px; vertical-align: middle; color: #eaf4f4; background: transparent; }
.live-control svg { display: block; }
.live-transport .live-control:last-child { margin-right: 0; }
.live-control:focus { outline: none; border-color: #eaf4f4; background: #34595d; }
.live-control:disabled { opacity: .38; }
.player #player-playpause { position: relative; border-radius: 32px; background: #d9e6e6; color: #14292d; }
.player #player-playpause::after { content: ''; position: absolute; top: -8px; right: -8px; bottom: -8px; left: -8px; border: 3px solid transparent; border-radius: 40px; pointer-events: none; }
.player #player-playpause:focus { background: #a4c0c2; border-color: transparent; }
.player #player-playpause:focus::after { border-color: #eaf4f4; }
.live-control[aria-pressed="true"] { color: #9ad4d5; }
.live-control[aria-pressed="true"] svg path { fill: currentColor; }
.live-tools { position: absolute; left: 50%; bottom: 0; width: 320px; margin-left: -160px; height: 64px; text-align: center; white-space: nowrap; }
.live-player .live-tools { width: 480px; margin-left: -240px; }
.archive-player .live-tools { width: 560px; margin-left: -280px; }
.live-tools [hidden] { display: none; }
.archive-player .live-progress { height: 16px; margin-top: -3px; border: 2px solid transparent; overflow: visible; }
.archive-player .live-progress:focus { outline: none; border-color: #EAF4F4; }
.archive-player .live-progress-fill { width: 100%; -webkit-transform-origin: left center; transform-origin: left center; background: #43C6C8; }
.archive-seek-hint { position: absolute; top: 74px; left: 50%; width: 320px; margin-left: -160px; text-align: center; font-size: 24px; line-height: 28px; color: #EAF4F4; }
.live-tools .live-control:last-child { margin-right: 0; }
.live-channel-rail { position: absolute; left: 0; right: 0; bottom: 0; height: 260px; }
.live-channel-rail .rail-title { font-size: 28px; margin: 0 0 16px; }
.live-channel-rail .rail-viewport { padding: 6px 0; margin: -6px 0; }
.live-channel-card { position: absolute; top: 0; height: 196px; padding: 14px 12px; border: 3px solid transparent; border-radius: 16px; background: #1c2c32; color: #eaf4f4; text-align: left; font: inherit; }
.live-channel-card:focus { border-color: #eaf4f4; outline: none; }
.live-channel-art { display: block; position: relative; height: 76px; margin-bottom: 12px; }
.live-channel-art > svg { position: absolute; top: 12px; left: 50%; margin-left: -24px; opacity: .2; }
.live-channel-art img { position: absolute; width: 100%; height: 76px; object-fit: contain; }
.live-channel-name, .live-channel-program { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.live-channel-name { font-size: 26px; line-height: 32px; font-weight: 600; }
.live-channel-program { font-size: 24px; line-height: 30px; color: #aac0c4; }
.live-channel-card[aria-current="true"] .live-channel-name { color: #9ad4d5; }
.live-channel-card[aria-current="true"] .live-channel-art::after { content: 'ЭФИР'; position: absolute; right: 0; bottom: 0; padding: 2px 6px; border-radius: 5px; background: #25383e; color: #eaf4f4; font-size: 18px; font-weight: 600; }
.live-options { position: absolute; right: 0; bottom: 200px; width: 480px; max-height: 576px; padding: 16px; border-radius: 20px; background: #17262c; box-shadow: 0 12px 28px rgba(0,0,0,.4); overflow: hidden; }
.live-option { display: block; width: 100%; height: 64px; padding: 0 20px; margin-bottom: 4px; border: 2px solid transparent; border-radius: 10px; background: transparent; color: #eaf4f4; font: inherit; font-size: 26px; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.live-option:focus { outline: none; border-color: #eaf4f4; background: #34595d; }
#canvas[data-effects="off"] .live-overlay { background: rgba(6,12,15,.78); }
#canvas[data-effects="off"] .live-options, #canvas[data-effects="off"] .live-transport { box-shadow: none; }

.route-error {
  padding: 48px;
  font-size: 28px;
  color: #EAF4F4;
}

.route-error-detail {
  margin: 16px 0 0;
  color: #AAC0C4;
  font-size: 24px;
  white-space: pre-wrap;
}

.catalog-gate .home-viewport { padding: 48px 0 0 16px; }
.catalog-gate .route-error { padding: 0; margin: 0 0 32px; }

.player-title-row {
  position: absolute;
  left: 48px;
  right: 48px;
  top: 24px;
}

.player-logo {
  display: inline-block;
  width: 96px;
  height: 48px;
  margin-right: 16px;
  vertical-align: middle;
  object-fit: contain;
}

.player-live-badge {
  display: inline-block;
  margin-left: 16px;
  padding: 4px 16px;
  font-size: 24px;
  color: #070707;
  background: #FFB4AB;
  border-radius: 999px;
  vertical-align: middle;
}

.player-program {
  display: block;
  margin: 8px 0 0;
  color: #AAC0C4;
  font-size: 28px;
}

.player-epg-progress {
  bottom: 128px;
}

/* ---- Live TV guide: 16 channels in the safe-area canvas ---- */
.livetv { position: relative; height: 100%; }
.tv-content { position: absolute; top: 0; bottom: 0; right: 0; }
.tv-header { position: relative; height: 56px; }
.tv-header::after, .tv-footer::before { content: ''; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none; background: rgba(220,224,230,.12); background: linear-gradient(to right, rgba(220,224,230,0), rgba(220,224,230,.16) 24%, rgba(220,224,230,.16) 76%, rgba(220,224,230,0)); }
.tv-header::after { bottom: 0; }
.tv-footer::before { top: 0; }
.tv-sidebar-divider, .tv-scroll::before { position: absolute; top: 24px; bottom: 24px; width: 1px; pointer-events: none; background: rgba(220,224,230,.1); background: linear-gradient(to bottom, rgba(220,224,230,0), rgba(220,224,230,.14) 20%, rgba(220,224,230,.14) 80%, rgba(220,224,230,0)); }
.tv-scroll::before { content: ''; left: 1px; top: 0; bottom: 0; }
#canvas[data-effects="off"] .tv-sidebar-divider, #canvas[data-effects="off"] .tv-scroll::before, #canvas[data-effects="off"] .tv-header::after, #canvas[data-effects="off"] .tv-footer::before { background: rgba(220,224,230,.1); }
.tv-heading { margin: 0; padding-right: 200px; font-size: 32px; font-weight: 600; line-height: 48px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-clock { position: absolute; right: 0; top: 0; font-size: 38px; font-weight: 700; line-height: 48px; font-variant-numeric: tabular-nums; }
.tv-body { position: absolute; left: 0; right: 0; }
.tv-left { position: absolute; top: 0; bottom: 0; left: 0; }
.tv-right { position: absolute; top: 0; bottom: 0; right: 0; }
.tv-preview { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; background: #080e11; color: #AAC0C4; border: 2px solid rgba(170,192,196,.14); border-radius: 24px; font: inherit; box-shadow: 0 8px 20px rgba(0,0,0,.24); }
.tv-preview:focus { border-color: #eaf4f4; outline: none; }
.tv-preview-surface, .tv-preview .player-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.tv-preview .player-video { object-fit: contain; }
.tv-preview-mark { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -60px 0 0 -28px; opacity: .6; }
.tv-preview-status { position: absolute; top: 50%; left: 24px; right: 24px; margin-top: 12px; text-align: center; font-size: 28px; line-height: 36px; }
.tv-preview-hint { position: absolute; right: 16px; bottom: 16px; padding: 8px 16px; border-radius: 12px; background: rgba(8,16,20,.84); color: #EAF4F4; font-size: 24px; line-height: 32px; opacity: 0; }
.tv-preview:focus .tv-preview-hint { opacity: 1; }
.channel-info { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; }
.tv-live-badge { position: absolute; right: 0; top: 4px; padding: 0 12px; border-radius: 8px; background: rgba(37,91,98,.38); font-size: 24px; font-weight: 600; line-height: 32px; }
.tv-live-badge::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: 3px; border-radius: 4px; background: #e5575c; }
.channel-info-now { margin: 0 0 8px; padding-right: 140px; height: 84px; font-size: 36px; line-height: 42px; font-weight: 700; overflow: hidden; }
.tv-program-timing { position: relative; height: 36px; margin-bottom: 12px; }
.tv-program-time { margin: 0; padding-right: 232px; color: #AAC0C4; font-size: 28px; line-height: 36px; }
.tv-program-remaining { position: absolute; right: 0; top: 0; max-width: 232px; color: #AAC0C4; font-size: 24px; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-program-progress { height: 6px; border-radius: 3px; overflow: hidden; background: rgba(170,192,196,.18); }
.tv-program-fill { display: block; height: 100%; background: #43C6C8; }
.tv-description { position: absolute; top: 162px; bottom: 104px; left: 0; right: 0; margin: 0; color: #AAC0C4; font-size: 26px; line-height: 36px; overflow: hidden; }
.tv-program-metadata { position: absolute; top: 162px; left: 0; right: 0; height: 32px; white-space: nowrap; overflow: hidden; }
.tv-epg-box { display: inline-block; vertical-align: top; height: 32px; margin-right: 8px; padding: 0 10px; border-radius: 6px; background: rgba(180,185,204,.14); color: #EAF4F4; font-size: 24px; font-weight: 600; line-height: 32px; overflow: hidden; text-overflow: ellipsis; }
.tv-epg-rating { background: rgba(246,207,92,.78); color: #29251d; }
.livetv .tv-program-metadata [hidden] { display: none; }
.channel-info-next { position: absolute; bottom: 0; left: 0; right: 0; height: 88px; margin: 0; padding: 12px 16px; border: 0; border-radius: 16px; overflow: hidden; background: rgba(15,25,30,.72); }
.tv-next-time { margin: 0; color: #AAC0C4; font-size: 24px; line-height: 28px; }
.tv-next-title { margin: 0; color: #EAF4F4; font-size: 28px; font-weight: 600; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.channel-list { position: absolute; top: 0; left: 0; right: 16px; overflow: hidden; }
.channel-track { position: relative; width: 100%; height: 100%; }
.channel-row { position: absolute; left: 0; right: 0; width: 100%; margin: 0; padding: 0; font-family: inherit; font-size: 28px; text-align: left; background: transparent; color: #EAF4F4; border: 2px solid transparent; border-radius: 8px; }
.channel-row:focus { background: rgba(49,105,111,.4); border-color: rgba(132,217,217,.75); outline: none; }
.channel-number, .channel-logo-box, .channel-text, .channel-progress { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.channel-number { left: 8px; width: 48px; font-size: 28px; text-align: right; color: #AAC0C4; font-variant-numeric: tabular-nums; }
.channel-logo-box { left: 68px; width: 48px; height: 32px; }
.channel-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
.channel-text { left: 128px; right: 88px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.channel-name { margin-right: 12px; }
.channel-now { color: #AAC0C4; }
.channel-progress { right: 12px; width: 56px; height: 10px; background: rgba(170,192,196,.2); border-radius: 3px; overflow: hidden; }
.channel-progress-fill { display: block; height: 100%; width: 0; background: #43C6C8; }
.tv-scroll { position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.tv-scroll-thumb { position: absolute; left: 0; width: 3px; border-radius: 2px; background: rgba(220,224,230,.38); }
.tv-footer { position: absolute; bottom: 0; left: 0; right: 0; height: 56px; padding-top: 12px; white-space: nowrap; }
.tv-command { position: relative; display: inline-block; vertical-align: middle; height: 44px; padding: 0 16px 0 48px; margin: 0 12px 0 0; font: inherit; font-size: 28px; line-height: 44px; font-weight: 600; color: #AAC0C4; background: transparent; border: 0; border-radius: 8px; }
.tv-command-label { display: block; line-height: 44px; }
.tv-remote-color { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 6px; }
.tv-command:first-child { margin-left: -16px; }
.tv-remote-red { background: #e5575c; }
.tv-remote-green { background: #54bd7b; }
.tv-remote-yellow { background: #e3bc49; }
.tv-remote-blue { background: #5594e0; }
.tv-remote-gray { background: #92999e; }
.tv-settings-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 12; background: rgba(5,10,14,.78); }
.tv-settings { position: absolute; top: 50%; left: 50%; width: 1080px; height: 864px; margin: -432px 0 0 -540px; padding: 36px 48px; border-radius: 24px; background: #1C282D; color: #EAF4F4; }
.tv-settings h2 { margin: 0; font-size: 36px; line-height: 48px; }
.tv-settings-hint { margin: 8px 0 28px; color: #AAC0C4; font-size: 24px; line-height: 32px; }
.tv-settings-row { position: relative; display: block; width: 100%; height: 76px; margin: 0 0 12px; padding: 0 24px; border: 2px solid transparent; border-radius: 12px; background: rgba(180,185,204,.1); color: inherit; font: inherit; font-size: 28px; line-height: 72px; text-align: left; }
.tv-settings-value { position: absolute; right: 24px; top: 0; max-width: 52%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #AAC0C4; }
.tv-settings-row:disabled { opacity: .65; }
.tv-settings-section { margin: 16px 0 12px; color: #AAC0C4; font-size: 22px; line-height: 28px; }
.tv-settings-close { display: block; width: 220px; height: 60px; margin: 20px 0 0 auto; border: 2px solid transparent; border-radius: 12px; font: inherit; font-size: 28px; color: inherit; background: rgba(180,185,204,.16); }
.tv-settings-row:focus, .tv-settings-close:focus { outline: none; border-color: #eaf4f4; background: #0F3B41; }
.tv-settings-row:focus .tv-settings-value { color: inherit; }
.tv-command:focus { background: rgba(49,105,111,.4); color: #EAF4F4; box-shadow: inset 0 0 0 2px #eaf4f4; outline: none; }
.tv-command[aria-pressed="true"] { color: #43C6C8; }
.tv-command:disabled { color: #AAC0C4; opacity: .4; }
.tv-page-label { position: absolute; right: 0; bottom: 0; line-height: 44px; color: #AAC0C4; font-size: 28px; font-variant-numeric: tabular-nums; }
.livetv-phase { margin: 24px 0; color: #AAC0C4; font-size: 28px; }
.livetv-retry { height: 56px; padding: 0 32px; border: 2px solid transparent; border-radius: 8px; background: #0F3B41; color: #EAF4F4; font: inherit; font-weight: 600; }
.livetv-retry:focus { border-color: #eaf4f4; outline: none; }

/* ---- Exit confirmation modal (JetFit dialog; §ExitConfirmationModal) ----
   Overlay INSIDE the safe area: the Samsung-required pre-exit confirmation
   must always be visible with focus on the default (No) action. */

.exit-modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  background: rgba(17, 17, 17, 0.9);
  text-align: center;
}

.exit-modal-dialog {
  display: inline-block;
  margin-top: 360px;
  padding: 48px 64px;
  background: #202020;
  border: 2px solid rgba(234, 244, 244, 0.24);
  border-radius: 56px;
}

.exit-modal-message {
  margin: 0 0 32px;
  color: #EAF4F4;
  font-size: 44px;
  font-weight: 600;
}

.exit-modal-button {
  display: inline-block;
  min-width: 240px;
  height: 88px;
  margin: 0 16px;
  padding: 0 44px;
  font-family: inherit;
  font-size: 28px;
  font-weight: 600;
  line-height: 84px;
  background: none;
  color: #EAF4F4;
  border: 2px solid #647B83;
  border-radius: 999px;
  -webkit-transform: scale(1);
          transform: scale(1);
  transition: -webkit-transform calc(200 * 0.001s) ease-out;
  transition: transform calc(200 * 0.001s) ease-out;
  transition: transform calc(200 * 0.001s) ease-out, -webkit-transform calc(200 * 0.001s) ease-out;
}

.exit-modal-button:focus {
  background: #EAF4F4;
  color: #070707;
  border-color: #ffffff;
  border-width: 6px;
  line-height: 80px;
  outline: none;
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
  box-shadow: 0 0 40px rgba(67, 198, 200, 0.16);
}

/* ---- Search screen (§Search): D-pad keyboard + windowed results ---- */

/* After the shared dialog rules: keep centering and focus dimensions stable. */
.release-dialog { position: absolute; top: 50%; left: 50%; width: 920px; margin: 0; padding: 40px 48px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); text-align: left; }
.release-title { margin: 0 0 24px; font-size: 38px; line-height: 46px; }
.release-version { margin: 20px 0 12px; color: #AAC0C4; font-size: 24px; line-height: 30px; }
.release-changes { margin: 0 0 24px; padding-left: 28px; font-size: 26px; line-height: 38px; }
.release-close { display: block; height: 64px; margin: 24px 0 0; line-height: 52px; border-width: 6px; border-radius: 16px; transition: none; }
.release-close:focus { line-height: 52px; -webkit-transform: none; transform: none; box-shadow: none; }
.release-version-choice { min-width: 180px; height: 56px; margin: 0 12px 0 0; line-height: 44px; border-width: 6px; border-radius: 16px; transition: none; }
.release-version-choice:focus { line-height: 44px; -webkit-transform: none; transform: none; box-shadow: none; }
.release-version-choice[aria-pressed="true"] { background: #0F3B41; }

.search {
  position: relative;
  height: 100%;
}

.search-query {
  margin: 0 0 24px;
  min-height: 56px;
  color: #EAF4F4;
  font-size: 44px;
  font-weight: 600;
}

.search-keyboard {
  margin-bottom: 32px;
  /* 10 keys per line (declared KEYBOARD_ROWS): 10 × (120px key + 12px gap). */
  width: 1320px;
}

.search-key {
  display: inline-block;
  width: 120px;
  height: 88px;
  margin: 0 12px 16px 0;
  padding: 0;
  font-family: inherit;
  font-size: 28px;
  font-weight: 600;
  background: #151515;
  color: #EAF4F4;
  border: 6px solid transparent;
  border-radius: 32px;
}

.search-key:focus {
  border-color: #ffffff;
  outline: none;
  box-shadow: 0 0 40px rgba(67, 198, 200, 0.16);
}

.search-results-title {
  margin: 0 0 16px;
  color: #EAF4F4;
  font-size: 44px;
  font-weight: 600;
}

/* Result viewport uses the remaining safe-area height; JS reads that height. */
.search-results {
  position: absolute;
  top: 640px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.search-results-track {
  position: relative;
  transition: -webkit-transform calc(200 * 0.001s) ease-out;
  transition: transform calc(200 * 0.001s) ease-out;
  transition: transform calc(200 * 0.001s) ease-out, -webkit-transform calc(200 * 0.001s) ease-out;
}

.search-result {
  position: absolute;
  left: 0;
  right: 0;
  height: 64px;
  padding: 0 24px;
  font-family: inherit;
  font-size: 28px;
  line-height: 58px;
  text-align: left;
  background: #151515;
  color: #EAF4F4;
  border: 6px solid transparent;
  border-radius: 16px;
}

.search-result:focus {
  border-color: #ffffff;
  outline: none;
  z-index: 1;
  box-shadow: 0 0 40px rgba(67, 198, 200, 0.16);
}

.search-empty {
  color: #AAC0C4;
  font-size: 28px;
}

.settings-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- Catalog: six portrait cards in each of two rows ---- */
.catalog { position: relative; height: 100%; }
.catalog-content { position: absolute; top: 0; bottom: 0; right: 0; left: calc(96px + 16px); }
.catalog-toolbar { position: relative; height: 100px; padding-top: 20px; white-space: nowrap; }
.catalog-tab, .catalog-control, .catalog-genre, .catalog-retry { height: 60px; border: 2px solid transparent; border-radius: 14px; color: #AAC0C4; background: transparent; padding: 0 24px; margin-right: 12px; font: inherit; font-size: 28px; font-weight: 600; line-height: 56px; }
.catalog-tab[aria-selected="true"] { color: #052528; background: #dce8e8; border-radius: 30px; }
.catalog-control { position: absolute; right: 0; top: 20px; margin: 0; border-color: rgba(170,192,196,.32); }
#catalog-sort { right: 204px; width: 420px; }
#catalog-filter { width: 184px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 14px; }
.catalog-tab:focus, .catalog-control:focus, .catalog-genre:focus, .catalog-retry:focus { outline: none; border-color: #eaf4f4; background: #0F3B41; color: #EAF4F4; }
.catalog-control:disabled { opacity: .4; }
.catalog-info { position: absolute; top: 112px; left: 0; right: 168px; height: 128px; }
.catalog-title { margin: 0; font-size: 40px; font-weight: 600; line-height: 48px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catalog-meta { margin: 4px 0 0; color: #AAC0C4; font-size: 24px; line-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catalog-summary { margin: 8px 0 0; color: #AAC0C4; font-size: 24px; line-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catalog-viewport { position: absolute; top: 256px; left: 0; right: 0; overflow: hidden; }
.catalog-track { position: relative; width: 100%; height: 100%; }
.catalog .poster-card { border-width: 3px; border-radius: 20px; }
.catalog .poster-art { border-radius: 16px; }
.catalog-status { position: absolute; top: 0; left: 0; right: 0; margin: 0; padding: 20px 24px; background: transparent; color: #AAC0C4; font-size: 28px; line-height: 40px; }
.catalog-retry { position: absolute; top: 96px; left: 0; background: #0F3B41; }
.catalog-page { position: absolute; top: 124px; right: 0; color: #AAC0C4; font-size: 24px; line-height: 30px; }
.catalog-filters { position: absolute; top: 92px; right: 0; width: 440px; padding: 20px; z-index: 4; background: #142329; border: 2px solid rgba(170,192,196,.3); border-radius: 18px; }
.catalog-genre { display: block; width: 100%; text-align: left; margin: 0 0 8px; }
.catalog-genre[aria-pressed="true"] { color: #43C6C8; }

.poster-placeholder { position: absolute; top: 50%; left: 50%; width: 48px; height: 64px; margin: -32px 0 0 -24px; color: #71858c; opacity: .5; }
.poster-placeholder svg { display: block; }
.catalog .poster-art img { position: relative; transition: opacity 120ms ease-out; }
.poster-rating { position: absolute; top: 12px; left: 12px; padding: 4px 12px; border: 1px solid rgba(234,244,244,.18); border-radius: 10px; background: rgba(21,34,40,.88); background: linear-gradient(180deg,rgba(56,72,79,.88),rgba(20,33,39,.92)); color: #eaf4f4; font-size: 24px; font-weight: 700; line-height: 30px; box-shadow: 0 3px 8px rgba(0,0,0,.2); pointer-events: none; }



/* Static WOFF subsets include Latin, Azerbaijani and Cyrillic glyphs.
   The same local faces work without variable-font or WOFF2 support. */

@font-face {
  font-family: 'HB Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/hb-sans-400.woff') format('woff');
}

@font-face {
  font-family: 'HB Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/hb-sans-600.woff') format('woff');
}

@font-face {
  font-family: 'HB Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/hb-sans-700.woff') format('woff');
}


/* Teal Blur owns geometry, motion and effect budgets. Sad Purple remaps colors
   and its 720p bitmap only; no extra focus layers, shadows or runtime blur. */
#canvas[data-theme="sad-purple"] {
  color: #eeedf3;
  background-color: #121117;
  background-image: url('backgrounds/sad-purple.jpg');
}
#canvas[data-theme="sad-purple"][data-effects="off"] { background-image: none; }
#canvas[data-theme="sad-purple"] .tv-settings { background: #23222b; color: #eeedf3; }
#canvas[data-theme="sad-purple"] .tv-settings-value,
#canvas[data-theme="sad-purple"] .tv-settings-hint,
#canvas[data-theme="sad-purple"] .tv-settings-section { color: #b8b5c3; }
#canvas[data-theme="sad-purple"] .tv-settings-row:focus,
#canvas[data-theme="sad-purple"] .tv-settings-close:focus { background: #44414f; border-color: #c7c2d5; }
#canvas[data-theme="sad-purple"] .tv-settings-row:focus .tv-settings-value { color: inherit; }
#canvas[data-theme="sad-purple"] .brand-accent { fill: #7fa5ae; }

/* Soft white text and neutral lavender-grey secondary copy; metadata keeps its existing hierarchy. */
#canvas[data-theme="sad-purple"] .hero-title,
#canvas[data-theme="sad-purple"] .rail-title,
#canvas[data-theme="sad-purple"] .poster-title,
#canvas[data-theme="sad-purple"] .row-card,
#canvas[data-theme="sad-purple"] .details-title,
#canvas[data-theme="sad-purple"] .details-stat-value,
#canvas[data-theme="sad-purple"] .settings-title,
#canvas[data-theme="sad-purple"] .search-query,
#canvas[data-theme="sad-purple"] .search-results-title,
#canvas[data-theme="sad-purple"] .channel-row,
#canvas[data-theme="sad-purple"] .channel-info-next,
#canvas[data-theme="sad-purple"] .route-error { color: #eeedf3; }
#canvas[data-theme="sad-purple"] .sidebar-item,
#canvas[data-theme="sad-purple"] .hero-description,
#canvas[data-theme="sad-purple"] .poster-meta,
#canvas[data-theme="sad-purple"] .category-description,
#canvas[data-theme="sad-purple"] .details-eyebrow,
#canvas[data-theme="sad-purple"] .details-description,
#canvas[data-theme="sad-purple"] .details-stat-label,
#canvas[data-theme="sad-purple"] .settings-readout,
#canvas[data-theme="sad-purple"] .auth-copy,
#canvas[data-theme="sad-purple"] .auth-intro-caption,
#canvas[data-theme="sad-purple"] .auth-key-hint,
#canvas[data-theme="sad-purple"] .auth-expiry,
#canvas[data-theme="sad-purple"] .auth-reveal,
#canvas[data-theme="sad-purple"] .tv-program-time,
#canvas[data-theme="sad-purple"] .tv-description,
#canvas[data-theme="sad-purple"] .channel-number,
#canvas[data-theme="sad-purple"] .channel-now,
#canvas[data-theme="sad-purple"] .tv-command,
#canvas[data-theme="sad-purple"] .tv-page-label,
#canvas[data-theme="sad-purple"] .livetv-phase,
#canvas[data-theme="sad-purple"] .tv-guide-state,
#canvas[data-theme="sad-purple"] .catalog-control,
#canvas[data-theme="sad-purple"] .catalog-tab,
#canvas[data-theme="sad-purple"] .catalog-genre,
#canvas[data-theme="sad-purple"] .catalog-status,
#canvas[data-theme="sad-purple"] .catalog-page,
#canvas[data-theme="sad-purple"] .search-empty,
#canvas[data-theme="sad-purple"] .route-error-detail,
#canvas[data-theme="sad-purple"] .splash-label,
#canvas[data-theme="sad-purple"] .splash-hint { color: #b8b5c3; }

/* Graphite elevation keeps violet in the atmosphere, with a pale focus color. */
#canvas[data-theme="sad-purple"] .hero-banner,
#canvas[data-theme="sad-purple"] .details-art,
#canvas[data-theme="sad-purple"] .poster-art,
#canvas[data-theme="sad-purple"] .settings-row,
#canvas[data-theme="sad-purple"] .search-key,
#canvas[data-theme="sad-purple"] .search-result,
#canvas[data-theme="sad-purple"] .player-control,
#canvas[data-theme="sad-purple"] .exit-modal-dialog,
#canvas[data-theme="sad-purple"] .catalog-filters { background-color: #23222b; color: #eeedf3; }
#canvas[data-theme="sad-purple"] .poster-card,
#canvas[data-theme="sad-purple"] .row-card { background: rgba(42, 40, 50, .8); border-color: rgba(226, 216, 239, .08); }
#canvas[data-theme="sad-purple"] .channel-card { background: rgba(55, 53, 65, .65); }
#canvas[data-theme="sad-purple"] .poster-card:focus,
#canvas[data-theme="sad-purple"] .row-card:focus,
#canvas[data-theme="sad-purple"] .channel-card:focus::after,
#canvas[data-theme="sad-purple"] .hero.is-focused .hero-banner,
#canvas[data-theme="sad-purple"] .settings-row:focus,
#canvas[data-theme="sad-purple"] .search-key:focus,
#canvas[data-theme="sad-purple"] .search-result:focus,
#canvas[data-theme="sad-purple"] .player-control:focus { border-color: #c7c2d5; }
#canvas[data-theme="sad-purple"][data-effects="off"] .row-card,
#canvas[data-theme="sad-purple"][data-effects="off"] .poster-card { background: #292731; }
#canvas[data-theme="sad-purple"] .category-card::after { background: linear-gradient(90deg, #23222b 0%, #23222b 40%, rgba(36, 33, 45, 0)); }
#canvas[data-theme="sad-purple"] .poster-rating { color: #eeedf3; background: rgba(48, 45, 59, .92); border-color: rgba(231, 223, 241, .18); }
#canvas[data-theme="sad-purple"] .poster-placeholder { color: #aaa5b7; }

/* Cool teal owns play/submit, graphite-lavender owns selection; semantic remote colors stay intact. */
#canvas[data-theme="sad-purple"] .auth-primary,
#canvas[data-theme="sad-purple"] .hero-cta .hero-play,
#canvas[data-theme="sad-purple"] .details-actions .details-play {
  color: #eeedf3; background: #3c5860;
  background: linear-gradient(to bottom, #44616a, #324c55);
}
#canvas[data-theme="sad-purple"] .auth-primary:focus,
#canvas[data-theme="sad-purple"] .hero-cta .hero-play:focus,
#canvas[data-theme="sad-purple"] .details-actions .details-play:focus { background: #506d76; background: linear-gradient(to bottom, #506d76, #405c66); }
#canvas[data-theme="sad-purple"] .hero-play svg { color: #eeedf3; }
#canvas[data-theme="sad-purple"][data-effects="off"] .auth-primary,
#canvas[data-theme="sad-purple"][data-effects="off"] .hero-cta .hero-play,
#canvas[data-theme="sad-purple"][data-effects="off"] .details-actions .details-play { background: #3c5860; }
#canvas[data-theme="sad-purple"][data-effects="off"] .auth-primary:focus,
#canvas[data-theme="sad-purple"][data-effects="off"] .hero-cta .hero-play:focus,
#canvas[data-theme="sad-purple"][data-effects="off"] .details-actions .details-play:focus { background: #506d76; }
#canvas[data-theme="sad-purple"] .hero-bookmark,
#canvas[data-theme="sad-purple"] .details-bookmark { color: #b8b5c3; background: rgba(31, 27, 39, .35); }
#canvas[data-theme="sad-purple"] .hero-bookmark.is-active,
#canvas[data-theme="sad-purple"] .details-bookmark.is-active { color: #ddd6ee; background: rgba(72, 63, 88, .8); }
#canvas[data-theme="sad-purple"] .hero-cta .hero-bookmark:focus,
#canvas[data-theme="sad-purple"] .details-actions .details-bookmark:focus,
#canvas[data-theme="sad-purple"] .details-actions .details-trailer:focus { color: #eeedf3; background: #44414f; }
#canvas[data-theme="sad-purple"] .poster-progress-fill,
#canvas[data-theme="sad-purple"] .player-progress-fill,
#canvas[data-theme="sad-purple"] .tv-program-fill,
#canvas[data-theme="sad-purple"] .channel-progress-fill,
#canvas[data-theme="sad-purple"] .splash-progress span { background: #8aafb7; }
#canvas[data-theme="sad-purple"] .splash-progress { background: #34313f; }
#canvas[data-theme="sad-purple"] .sidebar-item.is-active { color: #eeedf3; }
#canvas[data-theme="sad-purple"] .sidebar-item.is-active::before { background: #36333f; }
#canvas[data-theme="sad-purple"] .sidebar-item.is-active:focus::before { background: none; }
#canvas[data-theme="sad-purple"] .sidebar-focus { background: #4b4659; }
#canvas[data-theme="sad-purple"] .sidebar-item:focus { color: #eeedf3; }
#canvas[data-theme="sad-purple"] .sidebar-item:focus svg { color: #eeedf3; }
#canvas[data-theme="sad-purple"] .sidebar.is-expanded::before { background: rgba(27, 24, 34, .98); background: linear-gradient(to right, rgba(27, 24, 34, .99) 0%, rgba(27, 24, 34, .98) 56%, rgba(27, 24, 34, .8) 72%, rgba(27, 24, 34, 0)); }
#canvas[data-theme="sad-purple"][data-effects="off"] .sidebar.is-expanded::before { background: rgba(27, 24, 34, .98); }

/* Auth and secondary screens share the same palette, without changing geometry. */
#canvas[data-theme="sad-purple"] .auth-panel { background: #1c1b23; }
#canvas[data-theme="sad-purple"] .auth-art,
#canvas[data-theme="sad-purple"] .auth-benefit-icon { color: #beb9cc; }
#canvas[data-theme="sad-purple"] .auth-tabs { background: #24222c; }
#canvas[data-theme="sad-purple"] .auth-tabs .auth-control { color: #b8b5c3; background: transparent; }
#canvas[data-theme="sad-purple"] .auth-tabs [aria-selected="true"],
#canvas[data-theme="sad-purple"] .catalog-tab[aria-selected="true"] { color: #eeedf3; background: #44414f; }
#canvas[data-theme="sad-purple"] .auth-control { background: #2b2933; }
#canvas[data-theme="sad-purple"] .auth-input { color: #eeedf3; background: #2b2933; caret-color: #c7c2d5; }
#canvas[data-theme="sad-purple"] .auth-input::-webkit-input-placeholder { color: #b8b5c3; }
#canvas[data-theme="sad-purple"] .auth-input::placeholder { color: #b8b5c3; }
#canvas[data-theme="sad-purple"] .auth-control:focus,
#canvas[data-theme="sad-purple"] .auth-primary:focus,
#canvas[data-theme="sad-purple"] .auth-key:focus,
#canvas[data-theme="sad-purple"] .auth-reveal:focus { border-color: #c7c2d5; }
#canvas[data-theme="sad-purple"] .auth-input:focus { border-color: #c7c2d5; background: #35323f; }
#canvas[data-theme="sad-purple"] .auth-reveal:focus { background: #44414f; }
#canvas[data-theme="sad-purple"] .auth-keyboard-overlay { background: rgba(16, 13, 23, .9); }
#canvas[data-theme="sad-purple"] .auth-keyboard { background: #201e28; }
#canvas[data-theme="sad-purple"] .tv-guide { background: rgba(32,30,40,.94); }
#canvas[data-theme="sad-purple"][data-effects="off"] .tv-guide { background: #201e28; }
#canvas[data-theme="sad-purple"] .tv-guide-notice { background: #44414f; }
#canvas[data-theme="sad-purple"] .tv-guide-notice-time,
#canvas[data-theme="sad-purple"] .tv-guide-notice-icon,
#canvas[data-theme="sad-purple"] .tv-guide-duration { color: #b8b5c3; }
#canvas[data-theme="sad-purple"] .tv-guide-duration { background: rgba(199,194,213,.14); }
#canvas[data-theme="sad-purple"] .tv-guide-row:focus .tv-guide-duration { color: inherit; }
#canvas[data-theme="sad-purple"] .tv-category-panel { background: #23212c; color: #eeedf3; }
#canvas[data-theme="sad-purple"] .tv-category-count,
#canvas[data-theme="sad-purple"] .tv-category-position { color: #b8b5c3; }
#canvas[data-theme="sad-purple"] .tv-category-row[aria-pressed="true"] { background: #36333f; }
#canvas[data-theme="sad-purple"] .tv-category-row:focus,
#canvas[data-theme="sad-purple"] .tv-category-close:focus { background: #44414f; border-color: #c7c2d5; }
#canvas[data-theme="sad-purple"] .tv-category-row:focus .tv-category-count { color: inherit; }
#canvas[data-theme="sad-purple"] .tv-category-scroll span { background: #aaa1bc; }
#canvas[data-theme="sad-purple"] .auth-keyboard .auth-input { background: #17151d; }
#canvas[data-theme="sad-purple"] .auth-keyboard .auth-key,
#canvas[data-theme="sad-purple"] .auth-keyboard .auth-control,
#canvas[data-theme="sad-purple"] .tv-guide-row { color: #eeedf3; background: #3a3744; }
#canvas[data-theme="sad-purple"] .auth-keyboard [aria-pressed="true"] { background: #514a60; }
#canvas[data-theme="sad-purple"] .auth-keyboard .auth-key:focus,
#canvas[data-theme="sad-purple"] .auth-keyboard .auth-control:focus,
#canvas[data-theme="sad-purple"] .auth-keyboard .auth-primary:focus { color: #211e2a; background: #d7d2e3; border-color: #d7d2e3; }
#canvas[data-theme="sad-purple"] .tv-guide-close,
#canvas[data-theme="sad-purple"] .livetv-retry,
#canvas[data-theme="sad-purple"] .catalog-retry { color: #eeedf3; background: #3a3744; }
#canvas[data-theme="sad-purple"] .tv-guide-row:focus,
#canvas[data-theme="sad-purple"] .tv-guide-close:focus,
#canvas[data-theme="sad-purple"] .channel-row:focus,
#canvas[data-theme="sad-purple"] .tv-command:focus,
#canvas[data-theme="sad-purple"] .catalog-tab:focus,
#canvas[data-theme="sad-purple"] .catalog-control:focus,
#canvas[data-theme="sad-purple"] .catalog-genre:focus,
#canvas[data-theme="sad-purple"] .catalog-retry:focus { color: #eeedf3; background: #44414f; border-color: #c7c2d5; outline-color: #c7c2d5; }
#canvas[data-theme="sad-purple"] .tv-command[aria-pressed="true"],
#canvas[data-theme="sad-purple"] .catalog-genre[aria-pressed="true"],
#canvas[data-theme="sad-purple"] .tv-guide-row[aria-current="true"] { color: #8aafb7; }
#canvas[data-theme="sad-purple"] .tv-guide-day[aria-pressed="true"] { color: #eeedf3; background: #44414f; }
#canvas[data-theme="sad-purple"] .tv-guide-day:focus { border-color: #c7c2d5; }
#canvas[data-theme="sad-purple"] .tv-guide-time,
#canvas[data-theme="sad-purple"] .tv-guide-mark { color: #afa9bd; }
#canvas[data-theme="sad-purple"] .tv-guide-row[data-playable="true"] .tv-guide-mark { color: #8aafb7; }
#canvas[data-theme="sad-purple"] .channel-info-next { background: rgba(36, 32, 46, .94); }
#canvas[data-theme="sad-purple"] .tv-preview { background: #18161e; border-color: rgba(231, 223, 241, .18); }
#canvas[data-theme="sad-purple"] .tv-preview:focus { border-color: #c7c2d5; }
#canvas[data-theme="sad-purple"] .tv-preview-hint { color: #eeedf3; background: rgba(29,24,38,.9); }
#canvas[data-theme="sad-purple"] .tv-next-title { color: #eeedf3; }
#canvas[data-theme="sad-purple"] .tv-program-remaining,
#canvas[data-theme="sad-purple"] .tv-next-time { color: #b8b5c3; }
#canvas[data-theme="sad-purple"] .tv-live-badge { color: #d3cede; background: #3a3744; }
#canvas[data-theme="sad-purple"] .catalog-filters { border-color: rgba(231, 223, 241, .18); }
#canvas[data-theme="sad-purple"] .settings-back,
#canvas[data-theme="sad-purple"] .details-actions .details-trailer { border-color: #817a90; }
#canvas[data-theme="sad-purple"] .settings-back:focus,
#canvas[data-theme="sad-purple"] .details-actions .details-trailer:focus { border-color: #c7c2d5; }
#canvas[data-theme="sad-purple"] .settings-pane { background: rgba(28,26,35,.76); }
#canvas[data-theme="sad-purple"] .settings-section[aria-selected="true"],
#canvas[data-theme="sad-purple"] .settings-choice[aria-checked="true"],
#canvas[data-theme="sad-purple"] .settings-avatar,
#canvas[data-theme="sad-purple"] .settings-subscription { background: #36333f; }
#canvas[data-theme="sad-purple"] .settings-section:focus { color: #211e2a; background: #d7d2e3; }
#canvas[data-theme="sad-purple"] .settings-section:focus .settings-section-hint { color: #44414f; }
#canvas[data-theme="sad-purple"] .settings-section-hint,
#canvas[data-theme="sad-purple"] .settings-pane-hint,
#canvas[data-theme="sad-purple"] .settings-row-value,
#canvas[data-theme="sad-purple"] .settings-row-arrow,
#canvas[data-theme="sad-purple"] .settings-detail-label { color: #b8b5c3; }
#canvas[data-theme="sad-purple"] .settings-avatar { color: #aaa1bc; }
#canvas[data-theme="sad-purple"] .settings-subscription { color: #d7d2e3; }
#canvas[data-theme="sad-purple"] .settings-choice-panel { background: #23212c; }
#canvas[data-theme="sad-purple"] .settings-row:focus,
#canvas[data-theme="sad-purple"] .settings-choice:focus { color: #eeedf3; background: #44414f; border-color: #c7c2d5; }
#canvas[data-theme="sad-purple"] .settings-row:focus .settings-row-value { color: inherit; }
#canvas[data-theme="sad-purple"] .settings-choice { color: #eeedf3; }
#canvas[data-theme="sad-purple"] .settings-row[role="switch"]::before { background: #4b4659; }
#canvas[data-theme="sad-purple"] .settings-row[aria-checked="true"]::before { background: #7fa5ae; }
#canvas[data-theme="sad-purple"] .settings-row[role="switch"]::after,
#canvas[data-theme="sad-purple"] .settings-choice[aria-checked="true"]::after { background: #d7d2e3; }
#canvas[data-theme="sad-purple"] .settings-row[aria-checked="true"]::after { background: #211e2a; }
#canvas[data-theme="sad-purple"] .exit-modal-button { color: #eeedf3; border-color: #817a90; }
#canvas[data-theme="sad-purple"] .exit-modal-button:focus { color: #eeedf3; background: #44414f; border-color: #c7c2d5; }

/* Live overlays share the graphite palette; video itself remains untinted. */
#canvas[data-theme="sad-purple"] .live-player { color: #eeedf3; }
#canvas[data-theme="sad-purple"] .live-loading-ring { border-color: rgba(215,210,227,.28); border-top-color: #aaa1bc; }
#canvas[data-theme="sad-purple"] .live-overlay { background: linear-gradient(to bottom, transparent 28%, rgba(18,17,23,.6) 58%, rgba(18,17,23,.98)); }
#canvas[data-theme="sad-purple"][data-effects="off"] .live-overlay { background: rgba(18,17,23,.8); }
#canvas[data-theme="sad-purple"] .live-options { background: #23222b; }
#canvas[data-theme="sad-purple"] .live-transport { background: rgba(35,34,43,.78); }
#canvas[data-theme="sad-purple"] .live-stream-value { color: #d7d2e3; background: rgba(58,55,68,.72); }
#canvas[data-theme="sad-purple"] .live-program-tag,
#canvas[data-theme="sad-purple"] .live-channel-card { background: #2b2933; }
#canvas[data-theme="sad-purple"] .live-badge,
#canvas[data-theme="sad-purple"] .live-start,
#canvas[data-theme="sad-purple"] .live-end,
#canvas[data-theme="sad-purple"] .live-channel-program { color: #b8b5c3; }
#canvas[data-theme="sad-purple"] .live-control,
#canvas[data-theme="sad-purple"] .live-program-tag,
#canvas[data-theme="sad-purple"] .live-player-status,
#canvas[data-theme="sad-purple"] .live-option { color: #eeedf3; }
#canvas[data-theme="sad-purple"] .live-control:focus,
#canvas[data-theme="sad-purple"] .live-option:focus { background: #44414f; border-color: #c7c2d5; }
#canvas[data-theme="sad-purple"] .player #player-playpause { background: #d7d2e3; color: #211e2a; }
#canvas[data-theme="sad-purple"] .player #player-playpause:focus { background: #aba1c1; border-color: transparent; }
#canvas[data-theme="sad-purple"] .player #player-playpause:focus::after { border-color: #eeedf3; }
#canvas[data-theme="sad-purple"] .live-channel-card:focus { border-color: #c7c2d5; }
#canvas[data-theme="sad-purple"] .live-progress { background: rgba(215,210,227,.18); }
#canvas[data-theme="sad-purple"] .live-progress-fill { background: #aaa1bc; }
#canvas[data-theme="sad-purple"] .live-control[aria-pressed="true"],
#canvas[data-theme="sad-purple"] .live-channel-card[aria-current="true"] .live-channel-name { color: #8aafb7; }