:root {
  /* "IPTV UAI" — o vermelho da bandeira de Minas é a marca, então as superfícies
     ficam neutras: contra fundo avermelhado o próprio vermelho não destacava.
     Neutro embaixo = o acento vira sinal (foco, CTA, AO VIVO), não ruído. */
  /* Neutros com vies frio (matiz ~235). Nao e capricho: o comentario abaixo
     ja tinha descoberto na pratica que fundo avermelhado apaga o acento, e
     cinza rigorosamente neutro renderiza esverdeado em muito painel LCD da
     LG. Enviesar para o azul afasta o vermelho no espaco de cor — o acento
     volta a ser sinal — e tira o resultado da sorte do painel. */
  --bg-primary: #0a0b0f;
  --bg-secondary: #14161e;
  /* Elevacao estava INVERTIDA: tertiary (#1a1a1f) era mais escuro que card
     (#1c1c20), entao o item selecionado afundava em vez de subir. Em UI
     escura, elevar = clarear. */
  --bg-tertiary: #252938;
  --bg-card: #1c1f2b;
  --text-primary: #edeff5;
  --text-secondary: #b7bccc;
  /* Era #8a6a6f: 3.65:1 sobre os cards, reprovava AA. Agora 6.16:1 no pior caso. */
  --text-muted: #9096a8;
  --accent: #e4202f;
  /* O acento puro como TEXTO dá 3.79:1 e reprova AA. Este clareado dá 5.61:1;
     use-o para texto ("Ver tudo"), nunca o --accent. */
  --accent-text: #ff6b73;
  /* Era #7a121a — escuro demais para ler como "pressionado": o botao focado
     sumia no fundo. Branco sobre este da 6.09:1. */
  --accent-dim: #c4111f;
  /* Faltava um fundo tenue de selecao. E a ausencia dele que obrigou a UI a
     usar borda em tudo para marcar estado. */
  --accent-quiet: #2a1418;
  --accent-glow: rgba(228, 32, 47, 0.35);
  --danger: #ff5560;
  --success: #3ddc84;
  --warning: #ffb020;
  --border: #2a2e3d;
  /* Borda que precisa ser vista (input vazio, botao fantasma), separada da
     divisoria decorativa. */
  --border-strong: #3a3f52;

  /* Superficie translucida: eram TREZE opacidades diferentes de branco para a
     mesma funcao ("um degrau acima do fundo"). Tres bastam, e agora a escolha
     e nomeada em vez de sorteada. */
  --surface-a: rgba(255, 255, 255, 0.05);
  --surface-b: rgba(255, 255, 255, 0.09);
  --surface-c: rgba(255, 255, 255, 0.14);

  /* Elevacao: eram 23 sombras distintas para tres alturas reais. Em UI escura
     quem comunica altura e a claridade da superficie; a sombra so reforca. */
  --elev-1: 0 8px 22px rgba(0, 0, 0, 0.45);
  --elev-2: 0 16px 40px rgba(0, 0, 0, 0.55);
  --elev-3: 0 24px 64px rgba(0, 0, 0, 0.7);

  /* Um brilho de acento so: existiam quatro vermelhos diferentes cumprindo
     esta mesma funcao, dois deles fora de qualquer token. */
  --glow-accent: 0 18px 45px rgba(228, 32, 47, 0.35);

  --radius-sm: 4px;
  --radius-full: 999px;
  /* Superficie grande de marketing (os paineis da landing dentro do app). Elas
     usavam 24, 26 e 34px — tres raios para um papel so. Fica um, e maior que o
     --radius-lg de proposito: a linguagem da landing e mais macia que a do app. */
  --radius-xl: 26px;
  /* Branco, não o acento: vermelho sobre card avermelhado dava 3.79:1 — o pior
     contraste da UI justo no elemento que guia o controle remoto. Agora ~17:1. */
  /* O anel branco tinha contraste otimo (17:1) e ainda assim falhava: ele
     ENCOSTA no conteudo, entao sobre cartaz claro o contraste real e ~1:1 e
     ele some — o mesmo defeito que fez o vermelho ser abandonado, so que em
     outra classe de imagem. A saida e nao deixar o anel tocar a arte: um vao
     escuro por dentro faz o contraste ser medido contra uma cor que nos
     controlamos (5.59:1 garantido), e nao contra o pixel do poster. */
  --focus-ring: #ff3b48;
  --focus-gap: #0a0b0f;
  --focus-shadow: 0 0 0 3px var(--focus-gap), 0 0 0 7px var(--focus-ring);
  /* Inter para texto e escolha tecnica, nao estetica: altura-x alta, que e o
     que decide legibilidade a 3 metros. Archivo para titulo aguenta peso 800
     sem fechar as contraformas quando o canvas de 1920 e reescalado por
     transform (que nao e hinting-aware). O fallback mantem 'LG Smart UI',
     que ja esta na TV, para o caso de a rede da TV nao entregar a fonte. */
  --font-display: Archivo, -apple-system, 'LG Smart UI', 'Helvetica Neue', Arial, sans-serif;
  --font-text: Inter, -apple-system, 'LG Smart UI', 'Helvetica Neue', Arial, sans-serif;

  --radius: 8px;
  /* Caixa grande (modal, aviso): existia como var(--radius-lg) em uma regra
     que o browser descartava inteira porque o token nunca foi declarado. */
  --radius-lg: 16px;
  /* Cartaz de um titulo: a moldura e a arte dentro dela. Os 2px de diferenca
     sao a borda que o foco reserva — arte com o mesmo raio da moldura
     encostaria no anel. Antes: 14/12 na Home e 8/8 em Filmes, para o mesmo
     objeto em duas telas. */
  --radius-card: 14px;
  --radius-art: 12px;
  --transition: var(--dur-micro) var(--ease-decel);
  /* O foco tem orcamento proprio, mais curto que o resto: o auto-repeat do
     d-pad do webOS dispara a cada ~120ms, entao uma transicao de 200ms deixa
     o anel permanentemente atras do dedo do usuario — e a UI parece mole.
     90ms cabe dentro do repeat com folga. */
  --dur-focus: 90ms;
  --ease-focus: cubic-bezier(0.2, 0, 0, 1);
  --dur-micro: 160ms;
  --dur-enter: 220ms;
  --dur-exit: 180ms;
  --ease-decel: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  /* Uma escala unica para o foco. Eram cinco valores (1.02 a 1.08) sem
     criterio: o mesmo clique de controle respondia com forca diferente a
     cada tela. */
  --focus-scale: 1.04;
}

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

/* The UI is designed at a fixed 1920×1080 canvas. `html` is the real viewport
   (any TV panel / browser window); `body` is the fixed canvas, centred and
   scaled by --app-scale (set in JS to min(vw/1920, vh/1080)) so the whole app
   fits any screen with letterboxing. On a 1080p webOS TV the scale is 1. */
html {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-primary);
}

body {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  /* Height derived so (height × scale) === viewport height → fills, no bars. */
  height: calc(100vh / var(--app-scale, 1));
  overflow: hidden;
  transform: scale(var(--app-scale, 1));
  transform-origin: top left;
  font-family: var(--font-text);
  font-size: 24px;
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}

.view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hidden {
  display: none !important;
}

h2 {
  font-family: var(--font-display);
  letter-spacing: -0.005em;
  font-size: 32px;
  font-weight: 600;
  color: var(--text-primary);
}

h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

/* Loading */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 24px;
}

.loading-spinner {
  width: 64px;
  height: 64px;
  border: 4px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.loading-text {
  font-size: 26px;
  color: var(--text-secondary);
}

/* Public landing / first screen. `height` (not min-height) is required: the
   app runs on a fixed 1920×1080 canvas with `overflow: hidden` on <body> (see
   the comment above `html {}`), so a child that only sets min-height never
   gets a bounded box to scroll WITHIN — content taller than the screen just
   gets clipped with no way to reach it, mouse wheel included (the global
   wheel handler in navigation/key-handler.ts only lets a real scrollable
   ancestor handle wheel events; scrollHeight must exceed clientHeight). */
.public-landing {
  height: 100%;
  padding: 32px 72px 56px;
  background:
    radial-gradient(circle at 78% 12%, rgba(228, 32, 47, 0.24), transparent 32%),
    linear-gradient(135deg, #080809 0%, #13070a 52%, #080809 100%);
  overflow-y: auto;
}

.public-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1680px;
  margin: 0 auto;
}

.public-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.public-brand img {
  /* A marca e a silhueta, nao uma plaqueta: o logo agora vem nu (sem o campo
     claro embutido), entao a placa de 6% branco que existia aqui para separar
     o antigo do fundo escuro so o transformava em adesivo. */
  width: 52px;
  height: 52px;
}

.public-brand strong {
  display: block;
  font-size: 32px;
  line-height: 1;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.public-brand span {
  display: block;
  margin-top: 6px;
  font-size: 18px;
  color: var(--text-secondary);
}

.public-nav {
  display: flex;
  gap: 14px;
}

.public-nav button,
.public-button {
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--surface-a);
  color: #fff;
  cursor: pointer;
  font: inherit;
  outline: none;
}

.public-nav button {
  min-width: 128px;
  padding: 14px 22px;
  font-size: 20px;
}

.public-nav-cta {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

.public-main {
  max-width: 1680px;
  margin: 72px auto 0;
}

.public-hero {
  display: grid;
  grid-template-columns: 1fr 720px;
  gap: 72px;
  align-items: center;
}

.public-eyebrow {
  display: inline-flex;
  padding: 8px 16px;
  border: 1px solid rgba(255, 91, 100, 0.35);
  border-radius: var(--radius-full);
  background: rgba(228, 32, 47, 0.12);
  color: var(--accent-text);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.public-copy h1 {
  max-width: 780px;
  margin-top: 26px;
  font-size: 76px;
  line-height: 0.96;
  letter-spacing: -0.05em;
  color: #fff;
}

.public-copy p {
  max-width: 700px;
  margin-top: 24px;
  font-size: 26px;
  line-height: 1.38;
  color: #d0c8ca;
}

.public-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 38px;
}

.public-button {
  min-width: 230px;
  padding: 18px 30px;
  font-size: 24px;
  font-weight: 800;
}

.public-button-primary {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
}

.public-button-secondary {
  background: var(--surface-b);
}

.public-price-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 26px;
  color: var(--text-secondary);
  font-size: 20px;
}

.public-price-row strong {
  color: #fff;
}

.public-hero-downloads {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 18px;
  font-size: 18px;
  color: var(--text-muted);
}

.public-hero-downloads a {
  color: var(--accent-text);
  font-weight: 700;
  text-decoration: none;
}

.public-hero-downloads a:hover,
.public-hero-downloads a.focused {
  text-decoration: underline;
}

.public-hero-downloads-hint {
  flex-basis: 100%;
  font-size: 18px;
  color: var(--text-muted);
  opacity: 0.8;
}

.public-product-card {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: 22px;
  background: linear-gradient(160deg, var(--surface-c), rgba(255,255,255,0.03));
  box-shadow: var(--elev-3);
}

.public-device-top {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 0 18px;
}

.public-device-top span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface-c);
}

.public-device-top span:first-child {
  background: var(--accent);
}

.public-device-top strong {
  margin-left: auto;
  color: var(--text-secondary);
  font-size: 18px;
}

.public-main-shot {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: contain;
  object-position: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--bg-primary);
}

.public-mini-shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}

.public-mini-shots img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: contain;
  object-position: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
}

.public-product-card img[data-focusable] {
  cursor: zoom-in;
}

.public-product-card img.focused {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.public-lightbox {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  padding: 72px 40px 40px;
  background: rgba(0, 0, 0, 0.94);
}

.public-lightbox img {
  display: block;
  width: auto;
  max-width: 94vw;
  height: auto;
  max-height: calc(100vh - 150px);
  object-fit: contain;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-3);
}

.public-lightbox-close {
  position: absolute;
  top: 22px;
  right: 28px;
  padding: 10px 18px;
  color: #fff;
  background: var(--surface-b);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.public-lightbox-close.focused,
.public-lightbox-close:focus {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.public-lightbox-hint {
  margin: 0;
  color: var(--text-secondary);
  font-size: 16px;
}

.public-device-hero {
  min-height: 290px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0,0,0,0.28)),
    radial-gradient(circle at 76% 22%, rgba(255, 255, 255, 0.24), transparent 24%),
    linear-gradient(135deg, #4b0d14, #151521 70%);
}

.public-device-hero span {
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--accent);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.public-device-hero strong {
  max-width: 430px;
  font-size: 40px;
  line-height: 1.05;
}

.public-device-hero small {
  max-width: 420px;
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: 18px;
}

.public-device-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.public-device-grid div {
  min-height: 112px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(0, 0, 0, 0.28);
}

.public-device-grid strong {
  display: block;
  font-size: 22px;
}

.public-device-grid span {
  display: block;
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 18px;
}

.public-progress {
  height: 10px;
  margin-top: 22px;
  border-radius: var(--radius-full);
  background: var(--surface-c);
  overflow: hidden;
}

.public-progress span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.public-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 62px;
}

.public-trust article {
  min-height: 150px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-a);
}

.public-trust strong {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-size: 24px;
}

.public-trust span {
  display: block;
  color: var(--text-secondary);
  font-size: 20px;
}

.public-downloads {
  margin-top: 62px;
  padding: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-a);
  text-align: center;
}

.public-downloads h2 {
  font-size: 26px;
  color: #fff;
  margin-bottom: 8px;
}

.public-downloads p {
  color: var(--text-secondary);
  font-size: 18px;
  margin-bottom: 22px;
}

.public-download-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.public-download-card {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-a);
}

/* .public-button is normally a <button>; the download links reuse it as an
   <a>, which needs its own display/decoration/centering. */
.public-download-card a.public-button {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.public-download-note {
  margin-top: 14px;
  text-align: left;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
}

.public-download-note strong {
  color: var(--text-secondary);
}

.public-landing [data-focused="true"],
.public-landing button:focus {
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.16), 0 0 34px rgba(228, 32, 47, 0.42);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  font-size: 22px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
  outline: none;
}

.btn-primary {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: white;
}

/* Destructive but never primary. Loud by default, four "Remover" buttons
   outshouted the single CTA that adds a list — the screen read as if deleting
   were the point. Quiet until focused; the danger colour arrives with focus,
   which is when it starts to matter. */
.btn-danger {
  background: transparent;
  border-color: var(--border);
  color: var(--text-secondary);
}

.btn-large {
  padding: 14px 40px;
  font-size: 26px;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-card);
  color: var(--text-primary);
  padding: 14px 32px;
  border-radius: var(--radius);
  font-size: 24px;
  border: 1px solid var(--border);
  opacity: 0;
  transition:
    opacity var(--dur-exit) var(--ease-in),
    transform var(--dur-exit) var(--ease-in);
  z-index: 9999;
  pointer-events: none;
}

.toast.visible {
  transition:
    opacity var(--dur-enter) var(--ease-decel),
    transform var(--dur-enter) var(--ease-decel);
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* Empty state */
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: var(--text-muted);
  font-size: 26px;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-sm);
}

/* Primary navigation rail (vertical icons, left edge) */
.nav-rail {
  /* 128 e a largura medida, nao escolhida: o rotulo mais longo ("Trocar Lista")
     ocupa 103px a 18px em Inter 600, mais 8 de padding e 16 de margem do item.
     A 104px de antes ele cabia exatamente — porque a fonte era 14px, ilegivel
     a tres metros. O trilho e que estava dimensionado para a fonte errada.
     136 e nao 128 porque a 'LG Smart UI' da TV nao da para medir daqui: 128
     deixaria 1px de folga, e o rotulo quebraria em duas linhas se a metrica
     da fonte do aparelho for um pouco mais larga. */
  width: 136px;
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 16px 0;
  gap: 6px;
  overflow-y: auto;
}

.nav-rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 4px;
  margin: 0 8px;
  border-radius: var(--radius-art);
  border: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.nav-rail-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  position: relative;
}

.nav-rail-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
}

/* Monoline icon set (src/components/icon-set.ts), rendered as inline <svg> so
   `stroke="currentColor"` lets one glyph follow the colour of whatever contains
   it. CSS masks would do the same, but webOS 5 / Chromium 68 only supports them
   prefixed and the compat gate rejects them. */
.icon {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.nav-rail-icon .icon {
  width: 28px;
  height: 28px;
}

.nav-rail-label { font-size: 18px; font-weight: 600; }

.nav-rail-item.active {
  color: var(--accent-text);
  background: var(--bg-tertiary);
}

.nav-rail-item.focused {
  border-color: var(--focus-gap) !important;
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Active profile chip, pinned to the bottom of the rail. */
.nav-rail-profile { margin-top: auto; }

.nav-rail-avatar {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, var(--accent), #7a0d14);
  border-radius: var(--radius);
  overflow: hidden;
}

.nav-rail-profile .nav-rail-label {
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* +18 PIN modal */
.pin-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pin-box {
  background: var(--bg-secondary);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-width: 420px;
}

.pin-title {
  font-size: 32px;
  font-weight: 600;
  color: var(--accent-text);
}

.pin-input {
  width: 240px;
  text-align: center;
  letter-spacing: 16px;
  font-size: 40px;
  padding: 12px 16px;
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  outline: none;
}

.pin-input:focus { border-color: var(--accent); }

.pin-error {
  color: var(--danger);
  font-size: 22px;
}

.pin-actions {
  display: flex;
  gap: 16px;
}

/* Confirm dialog — reuses .pin-overlay backdrop */
.confirm-box {
  background: var(--bg-secondary);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.confirm-message {
  font-size: 26px;
  text-align: center;
  line-height: 1.4;
}

/* Track picker (audio / subtitles) — reuses .pin-overlay backdrop */
.track-box {
  background: var(--bg-secondary);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  min-width: 420px;
  max-width: 600px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.track-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}

.track-row {
  padding: 14px 18px;
  font-size: 24px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  background: var(--bg-tertiary);
  cursor: pointer;
}

.track-row.active {
  color: var(--accent-text);
  border-color: var(--accent-dim);
}

.track-row:hover,
.track-row:focus {
  border-color: var(--focus-ring);
  outline: none;
}

.track-empty {
  color: var(--text-muted);
  font-size: 20px;
  padding: 12px;
}

#video-player {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: black;
  object-fit: contain;
  display: none;
}

#video-player.active {
  display: block;
}

/* ── Account: login + "Who's watching" profile selection ───────────── */
.account-view {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(228, 32, 47, 0.18), transparent 60%),
    var(--bg-primary);
}

.account-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 460px;
  max-width: 90vw;
  padding: 48px 44px;
  background: var(--bg-secondary);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
}

.account-box-wide {
  width: auto;
  min-width: 460px;
  max-width: 96vw;
}

.account-title {
  font-size: 40px;
  font-weight: 700;
  color: var(--accent-text);
  margin: 0;
}

.account-sub {
  font-size: 22px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.account-input {
  width: 100%;
  font-size: 24px;
  padding: 14px 16px;
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  outline: none;
}

.account-input:focus,
.account-input.focused {
  border-color: var(--focus-ring);
}

.account-btn {
  width: 100%;
  justify-content: center;
}

.btn-secondary {
  background: var(--bg-tertiary);
  border-color: var(--border);
  color: var(--text-primary);
}

.account-btn.focused,
.account-skip.focused {
  border-color: var(--focus-gap) !important;
}

.account-error {
  width: 100%;
  text-align: center;
  font-size: 20px;
  color: var(--danger);
}

.account-skip {
  margin-top: 8px;
  background: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 10px 18px;
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
  outline: none;
}

.account-actions-row {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* Login brand layer. The logo is intentionally an asset so it can be replaced
   by the final brand without changing the component markup. */
/* Esta tela ficou de fora da passada que neutralizou as superfícies, então
   destoava do resto do app: fundo lavado de vermelho, com o vermelho da marca
   competindo contra vermelho. Agora é neutro, com um só brilho de marca
   discreto atrás do formulário. */
.account-login-screen {
  overflow: hidden;
  align-items: stretch;
  justify-content: center;
  gap: 9vw;
  background:
    radial-gradient(72% 100% at 100% 50%, rgba(228, 32, 47, 0.1), transparent 70%),
    var(--bg-primary);
}

.account-brand-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 560px;
  min-height: 680px;
  padding: 36px 0;
}

.account-brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.account-brand-logo {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: var(--radius-lg);
  filter: drop-shadow(0 10px 24px rgba(228, 32, 47, 0.25));
}

.account-brand-copy { max-width: 560px; }
.account-eyebrow { color: var(--accent-text); font-size: 18px; font-weight: 700; letter-spacing: 0.18em; }

.account-brand-copy h1 {
  margin: 18px 0 20px;
  color: var(--text-primary);
  font-size: 76px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.account-brand-copy h1 span { color: var(--accent-text); }
.account-brand-copy p { max-width: 500px; color: var(--text-secondary); font-size: 20px; line-height: 1.55; }

.account-benefits { display: flex; flex-direction: column; gap: 14px; color: var(--text-secondary); font-size: 18px; }
.account-benefits div { display: flex; align-items: center; gap: 12px; }
.account-benefit-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: #fff; font-size: 14px; background: var(--accent); border-radius: 50%; }
.account-brand-footer { color: var(--text-muted); font-size: 18px; letter-spacing: 0.04em; }
.account-brand-footer span { margin: 0 8px; color: var(--accent-text); }

.account-label {
  align-self: stretch;
  margin-bottom: -8px;
  color: var(--text-secondary);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.account-login-box {
  align-self: center;
  gap: 16px;
  width: 460px;
  padding: 42px 38px 30px;
  background: rgba(25, 10, 13, 0.92);
  border: 1px solid rgba(255, 137, 146, 0.2);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.account-login-heading { align-self: stretch; margin-bottom: 10px; }
.account-login-heading h2 { margin: 10px 0 5px; color: #fff; font-size: 32px; font-weight: 700; }
.account-login-heading p { color: var(--text-muted); font-size: 18px; }
.account-login-box .account-input { padding: 13px 15px; font-size: 18px; background: rgba(8, 4, 5, 0.7); border-color: rgba(255, 255, 255, 0.12); }
.account-login-box .account-input::placeholder { color: #765e62; }
.account-login-box .account-btn { margin-top: 2px; }

@media (max-width: 900px) and (min-width: 641px) {
  .account-brand-panel { width: 46vw; }
  .account-brand-copy h1 { font-size: 56px; }
  .account-brand-copy p { font-size: 18px; }
  .account-login-box { width: 390px; padding: 32px 28px 24px; }
}

/* Profile picker */
.profile-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: center;
  margin: 24px 0;
  max-width: 760px;
}

.profile-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 3px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
}

.profile-tile.focused {
  border-color: var(--focus-ring);
}

.profile-avatar {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, var(--accent), #7a0d14);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
}

.profile-avatar .avatar-photo {
  border-radius: var(--radius-lg);
}

.profile-add .profile-avatar {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

.profile-name {
  font-size: 24px;
  color: var(--text-primary);
}

.profile-add-form {
  justify-content: center;
  gap: 14px;
  width: 200px;
}

.profile-edit-badge {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  border: 3px solid var(--bg-secondary);
  z-index: 2;
}

/* Illustrated character avatars (spritesheet 4 cols x 2 rows) */
.avatar-photo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-image: url('../assets/profile-avatars.png');
  background-size: 400% 200%;
  background-repeat: no-repeat;
}

.avatar-photo-space-explorer { background-position: 0% 0%; }
.avatar-photo-detective      { background-position: 33.3333% 0%; }
.avatar-photo-royal-hero     { background-position: 66.6667% 0%; }
.avatar-photo-action-hero    { background-position: 100% 0%; }
.avatar-photo-robot          { background-position: 0% 100%; }
.avatar-photo-adventure-kid  { background-position: 33.3333% 100%; }
.avatar-photo-villain        { background-position: 66.6667% 100%; }
.avatar-photo-space-pilot    { background-position: 100% 100%; }

.avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* Avatar picker (profile editor) */
.avatar-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  max-width: 560px;
  max-height: 260px;
  overflow-y: auto;
  margin: 6px 0 12px;
}

.avatar-option {
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background: var(--bg-tertiary);
  border: 3px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  transition: transform var(--transition), border-color var(--transition);
}

.avatar-option.selected {
  border-color: var(--accent);
  transform: scale(var(--focus-scale));
}

.avatar-option.focused {
  border-color: var(--focus-ring);
  transform: scale(var(--focus-scale));
}

.account-btn-inline {
  min-width: 84px;
  padding: 10px 20px;
}

.settings-provider-note {
  width: 100%;
  margin: 4px 0 12px;
  padding: 14px 16px;
  color: var(--text-primary);
  background: rgba(220, 32, 43, 0.12);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-size: 18px;
  line-height: 1.35;
}

/* Provider administration */
.admin-box {
  max-height: 92vh;
  overflow-y: auto;
  gap: 12px;
}

.admin-help {
  width: 100%;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1.35;
}

.admin-help code {
  color: var(--text-primary);
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.admin-textarea {
  width: 100%;
  min-height: 190px;
  resize: vertical;
  font: 18px/1.35 monospace;
  padding: 12px;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  outline: none;
}

.admin-textarea:focus,
.admin-textarea.focused {
  border-color: var(--focus-ring);
}

.admin-section-title {
  width: 100%;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--accent-text);
  font-size: 24px;
  font-weight: 700;
}

.admin-account-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-account-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 18px;
}

.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-account-row strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-status {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 18px;
}

.admin-status.active { color: var(--success); }
.admin-status.free { color: #8cc8ff; }
.admin-status.pending { color: var(--accent-text); }
.admin-status.revoked { color: var(--danger); }

.desktop-update-notice {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 720px;
  max-width: calc(100vw - 48px);
  padding: 16px 18px;
  color: var(--text-primary);
  background: rgba(18, 4, 7, 0.96);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 28px rgba(237, 28, 45, 0.24);
}

.desktop-update-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font-size: 18px;
  line-height: 1.35;
}

.desktop-update-text span {
  color: var(--text-muted);
}

.desktop-update-link {
  flex: 0 0 auto;
  padding: 10px 14px;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent-text);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 700;
}

.desktop-update-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 720px) {
  .desktop-update-notice {
    right: 12px;
    bottom: 12px;
    left: 12px;
    flex-wrap: wrap;
    max-width: none;
  }
}




/* prefers-reduced-motion e Chromium 74; o webOS 5 roda 68, entao a media query
   nunca casa la e o bloco existente e codigo morto na TV. Esta classe no <html>
   e a versao que funciona no aparelho — falta ligar o interruptor em Ajustes.
   1ms e nao "none": se algum codigo escuta transitionend, "none" nunca dispara
   o evento e a feature trava esperando. */
.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
}