/* LEyDI · Refined Cinema | TV webOS 4.5 / Chromium 53 / controle remoto.
   Sem grid, gap, clamp, inset, backdrop obrigatório ou JavaScript novo. */
:root{
  --bg:var(--leydi-obsidian);
  --fg:var(--leydi-pearl);
  --muted:var(--leydi-slate);
  --line:var(--leydi-line);
  --focus:var(--leydi-jade);
  --glass:rgba(28,36,43,.50);
  --glass-strong:rgba(36,45,53,.78);
  --glass-line:rgba(221,244,242,.16);
  --glass-hi:rgba(255,255,255,.15);
  --panel:rgba(16,21,28,.96);
  --surface:rgba(36,45,53,.82);
  --button:var(--leydi-pearl);
  --button-fg:#090C10;
  --ambient:.3;
}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.first{padding:3vh 4vw 2.5vh}
.topbar{margin-bottom:1.8vh}
.leydi-wordmark{
  display:block;flex:0 0 auto;margin-right:26px;white-space:nowrap;
  font-size:27px;font-weight:800;letter-spacing:-1.3px;line-height:1.15;color:var(--fg)
}
.leydi-wordmark span{color:var(--leydi-jade)}
.tabs{border-radius:26px}
.tab{font-size:15px}
.tab[aria-selected="true"]{background:var(--leydi-pearl);color:var(--bg)}
.kind-toolbar{margin-bottom:12px}
.kind-option[aria-pressed="true"]{background:var(--leydi-pearl);color:var(--bg)}
.glass{box-shadow:inset 0 1px 0 var(--glass-hi),0 10px 28px rgba(0,0,0,.25)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .glass{-webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%)}
}
.hero{border-radius:24px;background:#111921;box-shadow:0 18px 40px rgba(0,0,0,.32)}
.scrim{border-radius:24px;background:linear-gradient(90deg,rgba(5,9,14,.96),rgba(5,9,14,.61) 47%,rgba(5,9,14,.09)),linear-gradient(0deg,rgba(5,9,14,.72),transparent 70%)}
.hero-content{left:4.5%;bottom:8%;width:65%;max-width:820px}
.hero-title{font-weight:750;letter-spacing:-1.6px}
.hero-meta,.synopsis{color:#D8DEE4}
.cta{border-radius:999px;background:var(--leydi-jade);color:#091310;box-shadow:0 8px 22px rgba(0,0,0,.25)}
.cta.secondary{color:var(--fg);background:rgba(30,39,46,.75);border-color:var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi)}
.cta.focused{box-shadow:0 12px 26px rgba(0,0,0,.5),0 0 0 3px var(--leydi-jade);-webkit-transform:scale(1.055);transform:scale(1.055)}
.cta.secondary.focused{background:var(--leydi-pearl);color:var(--bg)}
.apps-label,.shelf-title{letter-spacing:.2px}
.tile{border-radius:16px;border-color:rgba(255,255,255,.12);box-shadow:0 6px 15px rgba(0,0,0,.28)}
.tile:after{border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.14),transparent 40%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.app.focused .tile{-webkit-transform:scale(1.055) translateY(-3px);transform:scale(1.055) translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,.45),0 0 0 3px var(--leydi-jade)}
.shelf-art{border-radius:12px;background:var(--surface);border-color:var(--leydi-line);box-shadow:0 8px 20px rgba(0,0,0,.30)}
.shelf-card.focused .shelf-art{-webkit-transform:scale(1.055) translateY(-3px);transform:scale(1.055) translateY(-3px);box-shadow:0 12px 25px rgba(0,0,0,.45),0 0 0 3px var(--leydi-jade)}
.tv-library-dialog{background:var(--panel)}
.tv-library-dialog button:focus,.tv-library-dialog input:focus{outline:3px solid var(--leydi-jade);outline-offset:2px}
.tv-detail-progress,.tv-detail-message{color:var(--leydi-jade)!important}
@media(max-width:800px){
  .leydi-wordmark{font-size:19px;margin-right:12px}
  .tab{font-size:12px;padding:7px 10px}
  .hero-title{letter-spacing:-.7px}
}
@media(prefers-reduced-motion:reduce){
  .cta,.tile,.shelf-art,.backdrop,.toast{transition:none!important}
  .cta.focused,.app.focused .tile,.shelf-card.focused .shelf-art{-webkit-transform:none;transform:none}
}

/* -------------------------------------------------------------------------
   Refined Cinema · alinhamento de brand e hierarquia TV/10-foot UI.
   CSS mantém compatibilidade com Chromium 53 do webOS.
   ------------------------------------------------------------------------- */
:root{--muted:var(--leydi-text-secondary);--line:var(--leydi-line);--focus:var(--leydi-jade)}
body{font-family:var(--leydi-font)}
.first{padding:3vh 4vw 2.5vh}
.topbar{min-height:56px;margin-bottom:1.4vh}
.leydi-wordmark{
  /* Proporção do SVG 432×136: largura e altura explícitas (inline SVG no Chromium 53). */
  display:block;width:132px;height:42px;max-width:132px;
  margin-right:28px;flex:0 0 132px;
  font-size:0;letter-spacing:normal
}
.tabs{border:1px solid var(--leydi-glass-border);background:rgba(23,28,35,.83);box-shadow:none}
.tab{font-size:15px;font-weight:600;min-height:46px;border-radius:15px;padding:10px 19px}
.tab[aria-selected="true"]{
  background:rgba(113,217,198,.15);
  color:var(--leydi-pearl);
  box-shadow:inset 0 0 0 1px rgba(113,217,198,.35)
}
.tab.focused,.icon-btn.focused,.kind-option.focused,.library-btn.focused{
  background:var(--leydi-deep-jade);
  color:var(--leydi-pearl);
  box-shadow:0 0 0 3px var(--leydi-jade),0 10px 24px rgba(0,0,0,.4)
}
.tab.focused{-webkit-transform:scale(1.035);transform:scale(1.035)}
.kind-label{font-size:15px;font-weight:500}
.kind-options{border-radius:999px;background:var(--leydi-elevated)}
.kind-option{border-radius:999px;min-height:43px;font-size:15px}
.kind-option[aria-pressed="true"]{background:var(--leydi-pearl);color:var(--leydi-obsidian)}
/* Cinematic hero — foco no filme e gradientes capazes de proteger o título. */
.hero{border-radius:24px;background:var(--leydi-graphite);box-shadow:0 16px 36px rgba(0,0,0,.35)}
.hero::after,.backdrop,.scrim{border-radius:24px}
.scrim{background:linear-gradient(90deg,rgba(4,8,12,.96),rgba(4,8,12,.66) 43%,rgba(4,8,12,.07) 100%),linear-gradient(0deg,rgba(4,8,12,.65),transparent 65%)}
.hero-content{left:4.6%;bottom:9%;width:65%;max-width:830px}
.hero-title{font-size:48px;line-height:1.08;font-weight:700;letter-spacing:-1.8px;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero-meta,.synopsis{color:var(--leydi-text-secondary)}
.synopsis{font-size:17px;line-height:1.5;max-width:640px}
.type-badge{border-radius:999px;font-size:12px;font-weight:650;letter-spacing:1px;background:rgba(9,12,16,.65);border-color:rgba(255,255,255,.25)}
.service-badge{border-radius:999px;background:rgba(9,12,16,.62);border-color:rgba(255,255,255,.22);box-shadow:none}
.ratings .rating{background:rgba(14,20,28,.72);border-color:var(--leydi-glass-border)}
.cta{min-height:52px;padding:13px 27px;border-radius:999px;font-size:17px;font-weight:700}
.cta.secondary{background:rgba(23,30,38,.93);border:1px solid var(--leydi-glass-border);box-shadow:none}
.cta.focused,.cta.secondary.focused{-webkit-transform:scale(1.045);transform:scale(1.045);box-shadow:0 0 0 3px var(--leydi-jade),0 14px 28px rgba(0,0,0,.48)}
.cta.secondary.focused{background:var(--leydi-pearl);color:var(--leydi-obsidian)}
.pager{border-radius:20px;background:rgba(22,28,34,.85);box-shadow:none}
.apps-label{font-size:12px;color:var(--leydi-text-secondary);letter-spacing:1.7px}
.apps{padding-top:10px;padding-bottom:11px}
.tile{height:8vh;max-height:92px;min-height:52px;border-radius:14px;box-shadow:none}
.tile:after{border-radius:14px;background:linear-gradient(155deg,rgba(255,255,255,.10),transparent 47%);box-shadow:inset 0 1px 0 rgba(255,255,255,.13)}
.app.focused .tile{-webkit-transform:scale(1.045) translateY(-2px);transform:scale(1.045) translateY(-2px);box-shadow:0 0 0 3px var(--leydi-jade),0 12px 24px rgba(0,0,0,.38)}
.app-name{font-size:13px;margin-top:5px}
.hint{font-size:12px;color:var(--leydi-text-muted);margin-top:.6vh}
.shelves{padding:12px 4vw 7vh}
.shelf-title{font-size:24px;font-weight:650;line-height:32px;letter-spacing:-.6px;color:var(--leydi-pearl)}
.shelf-card strong{font-size:15px;line-height:22px;font-weight:600}
.shelf-card small{color:var(--leydi-text-muted)}
.shelf-art{border-radius:12px;box-shadow:none;background:var(--leydi-elevated)}
.shelf-card.focused .shelf-art{-webkit-transform:scale(1.045) translateY(-2px);transform:scale(1.045) translateY(-2px);box-shadow:0 0 0 3px var(--leydi-jade),0 14px 24px rgba(0,0,0,.45)}
/* Quando conectado, o primeiro trilho aparece ainda na primeira dobra. */
.tv.has-shelves .first{height:84vh}
.tv.has-shelves .shelves{padding-top:7px}
@media(min-width:1600px){
  .leydi-wordmark{width:158px;max-width:158px;flex-basis:158px;height:50px}
  .hero-title{font-size:64px;line-height:72px;letter-spacing:-2px}
  .synopsis{font-size:22px;line-height:32px}
  .hero-meta{font-size:22px;line-height:30px}
  .shelf-title{font-size:32px;line-height:40px}
  .cta{font-size:20px;min-height:58px}
}
@media(max-width:800px){
  .leydi-wordmark{width:96px;max-width:96px;flex-basis:96px;height:30px;margin-right:10px}
  .hero-title{font-size:32px}
  .tabs{padding:2px}
  .tab{padding:7px 10px;min-height:38px}
  .kind-option{min-height:36px}
}
@media(prefers-reduced-motion:reduce){
  .cta,.tile,.shelf-art,.backdrop,.toast,.tab,.icon-btn{transition:none!important}
  .cta.focused,.cta.secondary.focused,.app.focused .tile,.shelf-card.focused .shelf-art,.tab.focused{-webkit-transform:none!important;transform:none!important}
}

/* -------------------------------------------------------------------------
   Refined Cinema v2 · revisão de uso diário (canvas "LEyDI · Refined Cinema").
   Ação = Pearl; foco = anel Jade com vão escuro (nunca a mesma linguagem).
   Selecionado = Pearl (abas) ou Deep Jade (filtros). Chromium 53: sem gap/inset/clamp.
   ------------------------------------------------------------------------- */
.tab[aria-selected="true"]{background:var(--leydi-pearl);color:var(--leydi-obsidian);box-shadow:none}
.tab.focused,.icon-btn.focused,.kind-option.focused,.library-btn.focused{box-shadow:0 0 0 3px var(--leydi-obsidian),0 0 0 6px var(--leydi-jade),0 10px 24px rgba(0,0,0,.4)}
.tab.focused{background:var(--leydi-deep-jade);color:var(--leydi-pearl)}
.tab.focused[aria-selected="true"]{background:var(--leydi-pearl);color:var(--leydi-obsidian)}
.kind-options{background:transparent;border:0;box-shadow:none}
.kind-option{margin-right:8px;border:1px solid var(--leydi-line);background:var(--leydi-graphite);color:var(--leydi-text-secondary);font-weight:500}
.kind-option[aria-pressed="true"]{background:var(--leydi-deep-jade);border-color:var(--leydi-jade);color:#9CEADB;font-weight:600}
.kind-option.focused{background:var(--leydi-elevated);color:var(--leydi-pearl)}
.kind-option.focused[aria-pressed="true"]{background:var(--leydi-deep-jade);color:#9CEADB}
/* Destaque: ação principal Pearl; "Não quero ver" discreto. */
.cta{background:var(--leydi-pearl);color:var(--leydi-obsidian);box-shadow:none}
.cta .play{border-left-color:var(--leydi-obsidian)}
.cta.focused,.cta.secondary.focused{box-shadow:0 0 0 4px var(--leydi-obsidian),0 0 0 8px var(--leydi-jade),0 14px 28px rgba(0,0,0,.45)}
.cta.secondary.focused{background:rgba(23,30,38,.93);color:var(--leydi-pearl)}
.cta.quiet-cta{background:transparent;border-color:transparent;color:var(--leydi-text-secondary);font-weight:600}
.cta.quiet-cta.focused{background:var(--leydi-elevated);color:var(--leydi-pearl)}
.app.focused .tile,.shelf-card.focused .shelf-art{box-shadow:0 0 0 3px var(--leydi-obsidian),0 0 0 6px var(--leydi-jade),0 14px 24px rgba(0,0,0,.45)}
.hint{opacity:.75}
/* Sino: ponto Jade discreto, sem contador (a quantidade vai no rótulo acessível). */
.notice-dot{position:absolute;top:7px;right:8px;width:9px;height:9px;border-radius:5px;background:var(--leydi-jade);box-shadow:0 0 0 2px var(--leydi-obsidian)}
/* Toast: alto à direita, abaixo do topo — fora das zonas de foco (abas, filtros, destaque, apps). */
.toast{top:calc(3vh + 66px);bottom:auto;left:auto;right:4vw;max-width:44%;text-align:left;padding:12px 20px 12px 42px;border-radius:999px;
  background:var(--leydi-elevated);border:1px solid var(--leydi-line-strong);box-shadow:0 16px 40px rgba(0,0,0,.5);font-size:16px;
  -webkit-transform:translateY(-8px);transform:translateY(-8px)}
.toast.show{-webkit-transform:none;transform:none}
.toast:before{content:"";position:absolute;left:18px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:6px;background:var(--leydi-success)}
.toast[data-kind="error"]{border-color:rgba(255,102,107,.5)}
.toast[data-kind="error"]:before{background:var(--leydi-error)}
.toast[data-kind="progress"]:before{background:transparent;border:2px solid var(--leydi-line-strong);border-top-color:var(--leydi-pearl);width:10px;height:10px;-webkit-animation:leydi-spin .9s linear infinite;animation:leydi-spin .9s linear infinite}
@-webkit-keyframes leydi-spin{to{-webkit-transform:rotate(360deg)}}
@keyframes leydi-spin{to{transform:rotate(360deg)}}
/* Gaveta de notificações: à direita, não move o layout; foco entra no primeiro aviso, Voltar fecha. */
.tv-library-backdrop.tv-notices{-webkit-box-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;-webkit-box-align:stretch;-webkit-align-items:stretch;align-items:stretch;background:rgba(5,7,10,.62);padding:2.5vh 2vw}
.tv-notices .tv-library-dialog{width:34%;min-width:400px;max-width:640px;max-height:none;padding:28px 22px;border:1px solid var(--leydi-line);background:var(--leydi-graphite)}
.tv-notices .tv-library-heading h2{font-size:28px;letter-spacing:-.6px}
.tv-notice{display:block;width:100%;text-align:left;margin:0 0 8px;padding:12px 16px 12px 30px;position:relative;border-radius:18px;background:transparent;border:0;color:var(--leydi-pearl)}
.tv-notice small{display:block;font-size:14px;color:var(--leydi-text-muted);margin-bottom:4px}
.tv-notice strong{display:block;font-size:18px;line-height:24px;font-weight:500;color:#C3CAD2}
.tv-notice.unread strong{font-weight:600;color:var(--leydi-pearl)}
.tv-notice.unread:before{content:"";position:absolute;left:10px;top:18px;width:10px;height:10px;border-radius:5px;background:var(--leydi-jade)}
.tv-notice:focus{outline:none;background:var(--leydi-elevated);box-shadow:0 0 0 3px var(--leydi-graphite),0 0 0 6px var(--leydi-jade)}
.tv-notice-empty{font-size:18px;line-height:26px;color:var(--leydi-text-secondary)}
.tv-notice-hint{margin-top:16px;font-size:14px;color:var(--leydi-text-muted)}
@media(min-width:1600px){.tv-notice small{font-size:17px}.tv-notice strong{font-size:23px;line-height:30px}.toast{font-size:20px}}
@media(prefers-reduced-motion:reduce){.toast[data-kind="progress"]:before{-webkit-animation:none;animation:none}}
/* Painéis abertos ficam acima do toast; na gaveta, o "Fechar" do corpo substitui o do cabeçalho. */
.toast{z-index:19}
.tv-notices #tvLibraryClose{display:none}

/* -------------------------------------------------------------------------
   Destaque com espaço garantido (LG 1280×720, conectada com trilhos).
   O conteúdo do destaque nunca sai do cartão: mais altura para o cartão,
   menos elementos repetidos ao redor e conteúdo ancorado embaixo, com limite.
   ------------------------------------------------------------------------- */
.tv.has-shelves .first{height:94vh}
.tv.has-shelves .hint{display:none}
.hero{min-height:52vh}
.hero-content{bottom:8%;max-height:84%;overflow:hidden}
.hero-content > * + *{margin-top:10px}
.hero-title{font-size:52px;line-height:56px;letter-spacing:-1.8px;margin-top:10px}
.hero-meta{font-size:17px}
.synopsis{font-size:17px;line-height:25px}
/* O cartão do app já mostra o nome; a legenda só aparece quando o app não está na TV. */
.app-name{display:none}
.app[data-available="false"] .app-name{display:block;margin-top:4px}
.apps{padding-top:8px;padding-bottom:8px}
.tile{height:8vh;min-height:52px;max-height:88px}
.apps-label{margin-bottom:0}
@media(max-height:650px){.hero{min-height:46vh}.hero-title{font-size:38px;line-height:42px}}
@media(min-width:1600px){.hero-title{font-size:70px;line-height:76px}.hero-meta,.synopsis{font-size:22px;line-height:32px}}
/* Ano · gênero e notas na mesma linha: uma linha a menos no destaque. */
.hero-meta{display:inline-block;vertical-align:middle;margin-right:14px}
.hero-content > .ratings{display:inline-block;vertical-align:middle;margin-top:0}
.hero-content > .ratings .rating{display:inline-block;margin:0 6px 0 0}
.hero-content{bottom:6%;max-height:88%}
/* Título e sinopse já são limitados a 2 linhas: sem corte no contêiner, o anel de foco aparece inteiro. */
.hero-content{max-height:none;overflow:visible}

/* Toast acima dos painéis: a resposta a "Assistir agora" nos detalhes precisa ser vista.
   Abrir um painel limpa o toast anterior (não sobra aviso velho sobre a gaveta). */
.toast{z-index:31}
.toast[data-kind="info"]:before{background:var(--leydi-pearl)}