/* Tema inicial v1.0.7 — proporções reproduzidas do layout Android fornecido. */
:root{
  --provider-primary:#8d35e8;
  --provider-primary-rgb:141,53,232;
  --provider-bg:url("splashBackground.png");
  --home-pad-x:clamp(18px,2.11vw,40px);
  --home-pad-y:clamp(10px,1.94vh,21px);
  --home-live-w:clamp(174px,13.6vw,262px);
  --home-menu-w:clamp(346px,27vw,520px);
  --home-gap:clamp(12px,1.02vw,20px)
}

#catalogApp{
  position:relative;
  box-sizing:border-box;
  width:100vw;
  height:100vh;
  min-width:960px;
  min-height:540px;
  padding:var(--home-pad-y) var(--home-pad-x);
  overflow:hidden;
  background:#020307 var(--provider-bg) center/cover no-repeat;
  color:#fff
}
#catalogApp:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(90deg,rgba(1,2,6,.97),rgba(3,4,10,.84) 54%,rgba(2,3,7,.91));
  pointer-events:none
}
#catalogApp>*{position:relative;z-index:1}

/* O cabeçalho flutua sobre as três colunas, como no APK. */
#catalogApp .catalog-header{
  position:absolute;
  inset:var(--home-pad-y) var(--home-pad-x) auto;
  z-index:6;
  height:clamp(42px,6.1vh,66px);
  display:block;
  padding:0;
  border:0;
  background:transparent;
  pointer-events:none
}
#catalogApp .catalog-brand{
  position:absolute;
  left:clamp(19px,2.5vw,48px);
  top:clamp(8px,1.5vh,16px);
  width:clamp(72px,7.1vw,136px);
  height:clamp(52px,8.2vh,88px);
  display:flex;
  align-items:flex-start;
  justify-content:center
}
#catalogApp .catalog-logo{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center top;
  filter:drop-shadow(0 7px 16px rgba(0,0,0,.68))
}
#catalogApp .catalog-status{
  position:absolute;
  top:0;
  left:calc(var(--home-live-w) + var(--home-gap) + clamp(64px,6vw,116px));
  width:min(54.4vw,1045px);
  height:clamp(42px,6.1vh,66px);
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:0 clamp(12px,1.25vw,24px);
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background:rgba(13,14,22,.91);
  box-shadow:0 12px 34px rgba(0,0,0,.36);
  font-size:clamp(12px,1.08vw,20px);
  font-weight:700;
  white-space:nowrap;
  pointer-events:auto
}
#catalogApp .catalog-status>*{
  min-width:0;
  padding:0 clamp(10px,1.14vw,22px);
  border-left:1px solid rgba(255,255,255,.12)
}
#catalogApp .catalog-status>*:first-child{border-left:0}
#catalogApp .catalog-status strong{font-size:clamp(25px,2.35vw,45px);line-height:.95;color:#fff}
#catalogApp .catalog-status small{font-size:clamp(10px,.84vw,16px);color:#fff}
#catalogApp .forecast-day{color:#fff;text-transform:uppercase}

.provider-dashboard{
  position:absolute;
  inset:var(--home-pad-y) var(--home-pad-x) clamp(86px,14vh,152px);
  height:auto;
  display:grid;
  grid-template-columns:var(--home-live-w) var(--home-menu-w) minmax(0,1fr);
  gap:var(--home-gap);
  align-items:stretch;
  padding:0
}
.provider-live{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:clamp(9px,1vw,18px);
  padding:clamp(30px,5vh,54px) 16px clamp(20px,3.5vh,38px);
  background:linear-gradient(155deg,var(--provider-primary),rgba(var(--provider-primary-rgb),.68));
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:0 0 24px rgba(var(--provider-primary-rgb),.5),inset 0 0 0 1px rgba(255,255,255,.12);
  cursor:pointer
}
.provider-live:before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.2),transparent 34%),linear-gradient(90deg,transparent 49%,rgba(255,255,255,.075) 50%,transparent 51%);
  pointer-events:none
}
.provider-live-icon{
  margin:clamp(54px,9vh,98px) 0 clamp(21px,3.4vh,37px);
  font-size:clamp(66px,7.2vw,138px);
  line-height:.8;
  transform:rotate(-12deg)
}
.provider-live strong{font-size:clamp(25px,2.1vw,40px);line-height:1}
.provider-live small{max-width:150px;margin-top:clamp(10px,1.6vh,17px);font-size:clamp(12px,1vw,19px);line-height:1.35;color:#f7efff}
.provider-live b{
  position:absolute;
  bottom:clamp(18px,3.2vh,35px);
  padding:7px 13px;
  border-radius:999px;
  background:rgba(39,12,66,.44);
  font-size:clamp(10px,.82vw,16px)
}
.provider-live b i{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#ff4c91}

#catalogApp .main-nav{
  box-sizing:border-box;
  height:100%;
  min-height:0;
  padding-top:clamp(50px,8vh,86px);
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1.15fr 1.55fr 1.3fr .92fr .47fr;
  gap:clamp(7px,1.1vh,12px);
  background:transparent;
  border:0
}
#catalogApp .nav-item{
  box-sizing:border-box;
  min-width:0;
  min-height:0;
  margin:0;
  padding:clamp(10px,1.55vw,30px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:clamp(9px,.85vw,16px);
  background:linear-gradient(132deg,rgba(24,24,33,.97),rgba(13,14,22,.91));
  color:#fff;
  display:flex;
  align-items:center;
  gap:clamp(10px,1.2vw,23px);
  text-align:left;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015)
}
#catalogApp .nav-item:nth-child(1),#catalogApp .nav-item:nth-child(2){grid-column:1/3}
#catalogApp .nav-item>i{
  width:clamp(39px,3.75vw,72px);
  height:clamp(39px,3.75vw,72px);
  flex:0 0 clamp(39px,3.75vw,72px);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(var(--provider-primary-rgb),.14);
  border:1px solid rgba(var(--provider-primary-rgb),.68);
  color:var(--provider-primary);
  font-style:normal;
  font-size:clamp(19px,1.8vw,35px)
}
#catalogApp .nav-item span{display:flex;flex:1;min-width:0;flex-direction:column}
#catalogApp .nav-item strong{font-size:clamp(18px,1.55vw,30px);line-height:1.12}
#catalogApp .nav-item small{margin-top:5px;color:#b9bdc8;font-size:clamp(10px,.86vw,17px);line-height:1.25}
#catalogApp .nav-item>b{display:none}
#catalogApp .nav-half{padding:clamp(9px,1.1vw,21px);gap:clamp(8px,.8vw,15px)}
#catalogApp .nav-half>i{width:clamp(34px,3vw,58px);height:clamp(34px,3vw,58px);flex-basis:clamp(34px,3vw,58px);font-size:clamp(17px,1.45vw,28px)}
#catalogApp .nav-half strong{font-size:clamp(15px,1.18vw,23px)}
#catalogApp .nav-half small{font-size:clamp(9px,.72vw,14px)}
#catalogApp .nav-small{padding:clamp(6px,.75vw,14px);justify-content:center;gap:clamp(6px,.55vw,11px)}
#catalogApp .nav-small>i{width:clamp(28px,2.35vw,45px);height:clamp(28px,2.35vw,45px);flex-basis:clamp(28px,2.35vw,45px);font-size:clamp(14px,1.15vw,22px)}
#catalogApp .nav-small span{flex:0 1 auto}
#catalogApp .nav-small strong{font-size:clamp(12px,.94vw,18px)}

#catalogApp .catalog-hero{
  position:relative;
  min-width:0;
  min-height:0;
  height:100%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  border-radius:clamp(12px,1.25vw,24px);
  background-color:#090a10;
  background-position:center;
  background-size:cover;
  box-shadow:0 24px 70px rgba(0,0,0,.38)
}
#catalogApp .catalog-hero .hero-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(2,3,7,.98),rgba(2,3,7,.78) 36%,rgba(2,3,7,.08) 74%),linear-gradient(90deg,rgba(2,3,7,.35),transparent)
}
#catalogApp .highlight-copy{
  position:absolute;
  z-index:2;
  left:clamp(20px,1.55vw,30px);
  right:clamp(20px,1.55vw,30px);
  bottom:clamp(18px,2.8vh,31px);
  max-width:none;
  padding:0
}
#catalogApp .highlight-copy .kicker{margin:0;color:var(--provider-primary);font-size:clamp(9px,.72vw,14px);font-weight:800;letter-spacing:.15em}
#catalogApp .highlight-copy h1{max-width:72%;margin:8px 0 4px;font-size:clamp(19px,1.72vw,33px);line-height:1.08}
#catalogApp .highlight-copy .highlight-meta{margin:0;font-weight:700}
#catalogApp .highlight-copy>p{max-width:78%;margin:5px 0 0;font-size:clamp(10px,.78vw,15px);line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#catalogApp .highlight-actions{display:flex;gap:9px;margin-top:clamp(10px,1.7vh,18px)}
#catalogApp .highlight-actions button{width:min(42%,260px);min-height:clamp(40px,5.5vh,59px);border-radius:clamp(7px,.65vw,13px);padding:0 18px;font-size:clamp(12px,.88vw,17px)}
.provider-dashboard .featured-poster{
  position:absolute;
  z-index:3;
  right:clamp(17px,1.4vw,27px);
  top:clamp(18px,2.65vh,29px);
  width:clamp(94px,7.35vw,141px);
  height:clamp(139px,19.3vh,209px);
  overflow:hidden;
  border:2px solid var(--provider-primary);
  border-radius:clamp(8px,.75vw,14px);
  box-shadow:0 18px 40px rgba(0,0,0,.52)
}
.provider-dashboard .featured-poster img{width:100%;height:100%;object-fit:cover}

#catalogApp .focusable:focus,#catalogApp .focusable.focused{
  outline:0;
  border-color:#f3dfff;
  box-shadow:0 0 0 3px var(--provider-primary),0 0 25px rgba(var(--provider-primary-rgb),.72);
  transform:none
}
#catalogApp .primary{background:var(--provider-primary);border-color:var(--provider-primary)}
#catalogApp #homeBottom{display:none!important}
#catalogApp .library-panel{position:absolute;inset:clamp(72px,10vh,108px) var(--home-pad-x) var(--home-pad-y);background:#05070b}

/* Resolução lógica 1280x720 usada por vários televisores webOS. */
@media(max-width:1280px), (max-height:720px){
  :root{--home-pad-x:27px;--home-pad-y:14px;--home-live-w:174px;--home-menu-w:346px;--home-gap:13px}
  #catalogApp .catalog-header{height:44px}
  #catalogApp .catalog-status{height:44px;left:264px;width:696px;padding:0 10px;font-size:14px}
  #catalogApp .catalog-status>*{padding:0 10px}
  #catalogApp .catalog-status strong{font-size:28px}
  #catalogApp .catalog-status small{font-size:10px}
  #catalogApp .catalog-brand{left:25px;top:8px;width:70px;height:64px}
  .provider-dashboard{bottom:101px}
  #catalogApp .main-nav{padding-top:58px;grid-template-rows:110fr 155fr 125fr 91fr 45fr;gap:8px}
  #catalogApp .nav-item{padding:15px;gap:12px}
  #catalogApp .nav-item>i{width:44px;height:44px;flex-basis:44px;font-size:22px}
  #catalogApp .nav-item strong{font-size:20px}
  #catalogApp .nav-item small{font-size:11px}
  #catalogApp .nav-half{padding:11px 12px;gap:9px}
  #catalogApp .nav-half>i{width:37px;height:37px;flex-basis:37px;font-size:18px}
  #catalogApp .nav-half strong{font-size:15px}
  #catalogApp .nav-half small{font-size:9px}
  #catalogApp .nav-small{padding:6px;gap:7px}
  #catalogApp .nav-small>i{width:28px;height:28px;flex-basis:28px;font-size:14px}
  #catalogApp .nav-small strong{font-size:12px}
  .provider-live-icon{font-size:70px}
  .provider-live strong{font-size:26px}
  .provider-live small{font-size:12px}
}

/* Mantém as proporções em painéis HD menores sem cortar o conteúdo. */
@media(max-height:620px){
  :root{--home-pad-y:9px}
  .provider-dashboard{bottom:58px}
  #catalogApp .main-nav{padding-top:48px;gap:6px}
  #catalogApp .catalog-brand{top:4px;height:52px}
  .provider-live-icon{margin-top:44px;margin-bottom:15px}
}