/* ================================================================
   Órbita Play — identidade visual própria
   menu lateral estilo TV, cores azul-petróleo, cantos e cartões novos
   ================================================================ */
:root{--rail:5.4rem;--grad:linear-gradient(120deg,var(--accent),var(--accent2));--panel:#0f1622;--panel2:#162030;--line:#1c2738}
html{background:var(--bg)}
#bgfx{display:none}
body{background:radial-gradient(60rem 40rem at 85% -10%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),radial-gradient(50rem 40rem at -10% 110%,#1e3a8a33,transparent 60%),var(--bg);background-attachment:fixed}

/* ---------- menu lateral (computador e TV) ---------- */
#orail{position:fixed;left:0;top:0;bottom:0;z-index:80;width:var(--rail);display:flex;flex-direction:column;padding:1.1rem 0;
  background:linear-gradient(90deg,#060a12 0%,#060a12f0 70%,#060a1200);transition:width .25s ease,background .25s,box-shadow .25s;overflow:hidden}
#orail:hover,#orail:focus-within{width:17rem;background:#070c16f7;box-shadow:1.5rem 0 4rem #000c}
#orail .rtop{display:flex;align-items:center;gap:.9rem;padding:0 1.05rem;height:3.4rem;margin-bottom:1.6rem;white-space:nowrap}
#orail .rlogo{flex:none;width:3.3rem;height:3.3rem;border-radius:1rem;display:grid;place-items:center;background:var(--grad);box-shadow:0 .6rem 1.6rem color-mix(in srgb,var(--accent) 25%,transparent);overflow:hidden}
#orail .rlogo img{width:100%;height:100%;object-fit:cover}
#orail .rlogo b{font-size:1.5rem;font-weight:800;color:#fff}
#orail .rname{font-weight:800;font-size:1.15rem;opacity:0;transition:opacity .2s}
#orail:hover .rname,#orail:focus-within .rname{opacity:1}
#orail .rnav{display:flex;flex-direction:column;gap:.35rem;flex:1;justify-content:center}
#orail .rbot{display:flex;flex-direction:column;gap:.35rem}
#orail .ri{position:relative;display:flex;align-items:center;gap:1.1rem;height:3.2rem;margin:0 .9rem;padding:0 .95rem;border-radius:1.6rem;color:#aab6c8;white-space:nowrap;transition:background .15s,color .15s,transform .15s}
#orail .ri .ico{width:1.55rem;height:1.55rem;flex:none;stroke-width:1.8}
#orail .ri span{font-size:1.05rem;font-weight:600;opacity:0;transition:opacity .2s}
#orail:hover .ri span,#orail:focus-within .ri span{opacity:1}
#orail .ri.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
#orail .ri.on::before{content:'';position:absolute;left:-.9rem;top:.7rem;bottom:.7rem;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
#orail .ri:hover,#orail .ri:focus,#orail .ri:focus-visible{background:#fff;color:#060a12;outline:none;transform:scale(1.02)}
#orail .rprof .avatar,#orail .rprof img{width:1.9rem;height:1.9rem;border-radius:.55rem;font-size:.85rem;flex:none;margin-left:-.18rem;box-shadow:none}
body.hasrail #app{padding-left:var(--rail)}
body.hasrail #app > .back,body.hasrail .fbrand{display:none}
body.hasrail .split{padding-top:1.4rem}
body.hasrail .cats{top:1.2rem}
body.hasrail .livepage{padding-top:1.4rem}
body.hasrail .settings{padding-top:1rem}
body.hasrail .search{padding-top:1.4rem}
body.hasrail .events{padding-top:1rem}
html.tv #orail .ri:focus{background:#fff;color:#060a12}

/* ---------- destaque da tela inicial ---------- */
.hero{height:min(40rem,72vh)}
.hero .shade{background:linear-gradient(90deg,var(--bg) 6%,#060a12d9 32%,#060a1233 62%,#060a1200),linear-gradient(0deg,var(--bg) 2%,#060a1200 35%)}
.hero .btn{background:#ffffff1a;border:1px solid #ffffff22;border-radius:2rem}
.hero .btn:first-of-type,.hero [data-play]{background:var(--grad);border:0;color:#fff;box-shadow:0 .7rem 1.8rem color-mix(in srgb,var(--accent) 25%,transparent)}
.hero .dots i.on,.hero .dt i.on{background:var(--accent)}

/* ---------- cartões ---------- */
.pp,.poster,.cm .im,.evcard .box,.pcard .im{border-radius:.9rem}
.pp:hover,.poster:hover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 1.2rem 2.4rem #000a;transform:translateY(-4px) scale(1.03)}
.pcard:hover .im,.pcard.on .im{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 .8rem 1.8rem #000a}
.pcard.on::after{background:var(--accent)}
.evcard:hover .box{border-color:var(--accent)}
.rowtitle{font-weight:800;letter-spacing:-.01em}
.rowtitle::before{content:'';display:inline-block;width:.32rem;height:1.15rem;border-radius:.2rem;background:var(--grad);margin-right:.2rem;align-self:center}
.provwrap{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,var(--bg)),var(--bg))}
.colwrap{border-radius:1.2rem;margin:0 1.2rem}
.expiry{border-radius:.9rem;border:1px solid color-mix(in srgb,var(--accent) 18%,transparent)}
.stab{border-radius:1rem}
.stab.on::after{background:var(--accent)}
.cat.on{background:color-mix(in srgb,var(--accent) 11%,transparent);color:#fff}
.cat.on::after,.cat.on .bar{background:var(--accent)}
.filters button.on{background:var(--accent);color:#fff}
.smenu button.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:#fff}
.smenu button:hover{background:#18263a}
.chrow.on::before{background:var(--accent)}

/* ---------- login: painel da marca + formulário ---------- */
.login{grid-template-columns:1.1fr 1fr;gap:0;padding:0;align-items:stretch}
.login .oside{justify-self:stretch;align-self:stretch;width:100%;min-height:100vh;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:3.5rem;background:radial-gradient(40rem 30rem at 30% 30%,color-mix(in srgb,var(--accent) 35%,#060a12),#060a12 70%)}
.login .oside .otx{position:relative;z-index:2;max-width:30rem}
.login .oside .brand{height:3.2rem;margin-bottom:1.6rem}
.login .oside .brand-text{font-size:2.2rem}
.login .oside h2{font-size:2.3rem;line-height:1.15;font-weight:800;letter-spacing:-.02em;margin-bottom:.9rem}
.login .oside p{color:#a9b8c9;font-size:1.05rem;line-height:1.6}
.login .orb{position:absolute;left:58%;top:40%;width:26rem;height:26rem;transform:translate(-50%,-50%)}
.login .orb i{position:absolute;inset:0;border:1.5px solid color-mix(in srgb,var(--accent) 33%,transparent);border-radius:50%;animation:orbspin 18s linear infinite}
.login .orb i:nth-child(2){inset:3.5rem;border-color:color-mix(in srgb,var(--accent2) 33%,transparent);animation-duration:12s;animation-direction:reverse}
.login .orb i:nth-child(3){inset:7rem;border-color:#ffffff22;animation-duration:9s}
.login .orb i::after{content:'';position:absolute;top:-.4rem;left:50%;width:.8rem;height:.8rem;border-radius:50%;background:var(--accent);box-shadow:0 0 1.2rem var(--accent)}
.login .orb span{position:absolute;inset:10.5rem;border-radius:50%;background:var(--grad);box-shadow:0 0 5rem color-mix(in srgb,var(--accent) 40%,transparent)}
@keyframes orbspin{to{transform:rotate(360deg)}}
.login .login-box{align-self:center;justify-self:center;padding:2rem}
.login .seg .on{background:var(--accent);color:#fff}
.login .btn.light{background:var(--grad);color:#fff}
.login .field:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 33%,transparent)}
@media (max-width:1000px){.login{grid-template-columns:1fr}.login .oside{display:none}}

/* ---------- perfis: cantos arredondados ---------- */
.prof .avatar,.prof img{border-radius:1.6rem !important}
.prof:hover .avatar,.prof:hover img,.prof:focus .avatar,.prof:focus img{box-shadow:0 0 0 3px var(--accent) !important}
.profiles h1{letter-spacing:-.02em}

/* ---------- player ---------- */
.player .seek{accent-color:var(--accent)}
.player .resumebox{border:1px solid color-mix(in srgb,var(--accent) 27%,transparent)}

/* ================= celular: barra inferior ================= */
#otabs{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:90;height:64px;display:flex;align-items:stretch;justify-content:space-around;
  border-radius:20px;background:#0c1320f2;backdrop-filter:blur(14px);border:1px solid #ffffff12;box-shadow:0 10px 30px #000c}
#otabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#8796ab;font-size:11px;font-weight:600}
#otabs a .ico{width:23px;height:23px;stroke-width:1.8}
#otabs a.on{color:var(--accent)}
#otabs a.on .ico{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 53%,transparent))}
body.hastabs #app{padding-bottom:100px}
body.hastabs .mham,body.hastabs .mvoltar{display:none}
body.hastabs .mtop{padding-left:16px}
html.mob .mbig{background:var(--grad);color:#fff}
html.mob .mseg button.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:#fff}
html.mob .mephd2::after{background:var(--accent)}
html.mob .mep2 .th i{background:var(--accent)}
html.mob .mdrawer a.on,.mdrawer a.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:#fff}
html.mob .mrp .pp,html.mob .mprov .pcard .im{border-radius:12px}
html.mob .mhero .dt i.on{background:var(--accent)}
@media (orientation:portrait) and (max-width:1300px){.login{grid-template-columns:1fr}.login .oside{display:none}}