/* ============================================================
   NovaRede WebPlayer — design system (base: design-novarede)
   ============================================================ */
:root{
  --brand:#2f6bff; --brand-2:#7a3cff; --brand-d:#1f4fd0;
  --kids:#ff8a3d; --kids-2:#ffd23d;
  --bg:#0a0b10; --bg2:#101218; --card:#161a24; --card2:#1d2230;
  --line:rgba(255,255,255,.08); --t:#fff; --t2:rgba(255,255,255,.62); --t3:rgba(255,255,255,.40);
  --ok:#37d67a; --warn:#ffb23d; --bad:#ff5470;
  --grad:linear-gradient(135deg,var(--brand),var(--brand-2));
  --nav-h:64px; --mnav-h:62px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Segoe UI',Roboto,system-ui,sans-serif;background:var(--bg);color:var(--t);
     overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
img{display:block}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2a3040;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* ===== Logo ===== */
.logo{font-weight:800;letter-spacing:.3px;display:inline-flex;align-items:center;gap:1px;user-select:none}
.logo .n{color:#fff}
.logo .r{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo .dot{width:8px;height:8px;border-radius:50%;background:var(--grad);margin-left:4px}

/* ===== Ícones ===== */
svg.ic{display:block;width:20px;height:20px;fill:currentColor;flex-shrink:0}

/* ===== Botões / campos / chips ===== */
.btn{border:none;border-radius:9px;padding:11px 22px;font-size:14px;font-weight:700;cursor:pointer;
     display:inline-flex;align-items:center;gap:8px;color:#fff;transition:.15s;white-space:nowrap}
.btn:disabled{opacity:.5;cursor:default}
.btn.p{background:#fff;color:#111}
.btn.s{background:rgba(255,255,255,.14)}
.btn.s:hover{background:rgba(255,255,255,.22)}
.btn.brand{background:var(--grad)}
.btn.brand:hover{filter:brightness(1.12)}
.btn.danger{background:transparent;border:1px solid var(--bad);color:var(--bad)}
.btn.full{justify-content:center;width:100%}
.btn svg.ic{width:16px;height:16px}
.field{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:0 14px;
     display:flex;align-items:center;gap:11px;color:var(--t2)}
.field svg.ic{width:18px;height:18px;fill:var(--t2)}
.field input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-size:14px;
     padding:13px 0;min-width:0}
.field input::placeholder{color:var(--t3)}
.field:focus-within{border-color:var(--brand)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{padding:7px 14px;border-radius:20px;background:var(--card);border:1px solid var(--line);
     font-size:12px;color:var(--t2);white-space:nowrap;cursor:pointer;flex-shrink:0;transition:.15s}
.chip:hover{background:var(--card2);color:#fff}
.chip.on{background:var(--grad);color:#fff;border-color:transparent}
.badge{font-size:9px;font-weight:700;padding:2px 7px;border-radius:20px;background:var(--grad);
     text-transform:uppercase;letter-spacing:.5px}
.badge.k{background:linear-gradient(135deg,var(--kids),var(--kids-2));color:#3a2400}
.badge.live{background:var(--bad)}

/* ===== Spinner / skeleton / vazio ===== */
.spin{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--brand);
     border-radius:50%;animation:rot 1s linear infinite;margin:40px auto}
@keyframes rot{to{transform:rotate(360deg)}}
.skel{background:linear-gradient(100deg,var(--card) 40%,var(--card2) 50%,var(--card) 60%);
     background-size:200% 100%;animation:shine 1.4s infinite}
@keyframes shine{to{background-position:-200% 0}}
.empty{color:var(--t3);text-align:center;padding:40px 20px;font-size:14px}

/* ===== Toast ===== */
#toasts{position:fixed;bottom:calc(var(--mnav-h) + 16px);left:50%;transform:translateX(-50%);
     display:flex;flex-direction:column;gap:8px;z-index:400;align-items:center;pointer-events:none}
.toast{background:#20263a;border:1px solid var(--line);color:#fff;padding:11px 18px;border-radius:11px;
     font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:pop .2s;max-width:86vw}
.toast.err{border-color:var(--bad)}
.toast.ok{border-color:var(--ok)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}

/* ===== Modal ===== */
.modal-bg{position:fixed;inset:0;background:rgba(3,4,8,.72);z-index:300;display:flex;
     align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(3px)}
.modal{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;
     width:min(440px,100%);max-height:86vh;overflow-y:auto;animation:pop .18s}
.modal h3{font-size:18px;margin-bottom:6px}
.modal .sub{color:var(--t2);font-size:13px;margin-bottom:16px}

/* ===== Nav topo (desktop) ===== */
.topnav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);display:flex;align-items:center;
     gap:26px;padding:0 34px;z-index:100;
     background:linear-gradient(180deg,rgba(6,7,10,.96),rgba(6,7,10,.75) 70%,transparent);
     backdrop-filter:blur(6px)}
.topnav .logo{font-size:22px;cursor:pointer}
.tv-nav{display:flex;gap:22px;font-size:15px}
.tv-nav a{color:var(--t2);cursor:pointer;padding:4px 2px;border-bottom:2px solid transparent}
.tv-nav a:hover{color:#fff}
.tv-nav a.on{color:#fff;font-weight:700;border-bottom-color:var(--brand)}
.topnav .right{margin-left:auto;display:flex;align-items:center;gap:16px;color:var(--t2)}
.topnav .right .nico{cursor:pointer;color:var(--t2)}
.topnav .right .nico:hover{color:#fff}
.av{width:34px;height:34px;border-radius:9px;background:var(--grad);display:grid;place-items:center;
     font-weight:800;font-size:14px;cursor:pointer;color:#fff}
.av.k{background:linear-gradient(135deg,var(--kids),var(--kids-2));color:#3a2400}

/* ===== Nav inferior (mobile) ===== */
.bottomnav{display:none;position:fixed;left:0;right:0;bottom:0;height:var(--mnav-h);
     background:rgba(12,14,20,.94);border-top:1px solid var(--line);z-index:100;
     justify-content:space-around;align-items:center;backdrop-filter:blur(8px)}
.bottomnav .i{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--t3);
     font-size:10px;cursor:pointer;flex:1;padding:6px 0}
.bottomnav .i svg.ic{width:22px;height:22px}
.bottomnav .i.on{color:#fff}
.bottomnav .i.on svg.ic{fill:var(--brand);color:var(--brand)}

/* ===== Página / conteúdo ===== */
#app{min-height:100vh}
.page{padding:calc(var(--nav-h) + 10px) 34px 40px;min-height:100vh}
.rowh{font-weight:700;font-size:16px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.rowh .more{margin-left:auto;font-size:12px;color:var(--t3);cursor:pointer;font-weight:400}
.rowh .more:hover{color:var(--brand)}

/* ===== Posters ===== */
.poster{border-radius:10px;background:linear-gradient(160deg,#23304f,#3a2747);border:1px solid var(--line);
     position:relative;overflow:hidden;flex-shrink:0;cursor:pointer;transition:transform .16s,outline-color .16s;
     outline:3px solid transparent;outline-offset:-1px}
.poster:hover{transform:scale(1.045);outline-color:var(--brand);z-index:2}
.poster img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.poster .pt{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;font-size:11px;font-weight:600;
     background:linear-gradient(transparent,rgba(0,0,0,.92));white-space:nowrap;overflow:hidden;
     text-overflow:ellipsis;z-index:1}
.poster .prog{position:absolute;left:0;bottom:0;height:3px;background:var(--brand);z-index:2}
.poster .rk-n{position:absolute;top:2px;left:9px;font-size:30px;font-weight:800;color:#fff;
     text-shadow:0 2px 10px rgba(0,0,0,.85);z-index:2;line-height:1}
.poster .ch-logo{position:absolute;inset:0;display:grid;place-items:center;padding:18%}
.poster .ch-logo img{position:static;width:100%;height:100%;object-fit:contain}

/* trilhas horizontais */
.strip{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip .poster{width:150px;aspect-ratio:2/3}
.strip.wide .poster{width:210px;aspect-ratio:16/10}
.hrow{margin-top:22px}

/* grade de pôsteres */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;align-content:start}
.pgrid .poster{aspect-ratio:2/3}
.pgrid.chgrid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.pgrid.chgrid .poster{aspect-ratio:16/10}
.loadmore{display:flex;justify-content:center;margin:22px 0 6px}

/* ===== Login ===== */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
     background:radial-gradient(75% 95% at 50% 0%,#1c2447,var(--bg))}
.login .box{width:min(430px,100%);background:var(--card);border:1px solid var(--line);border-radius:18px;
     padding:30px 28px;display:flex;flex-direction:column;gap:13px}
.login .box .logo{font-size:30px;justify-content:center;margin-bottom:4px}
.login .box .sub{color:var(--t2);font-size:13px;text-align:center;margin-bottom:6px}
.login .alt{color:var(--t3);font-size:12px;text-align:center;margin-top:4px}
.login .alt b{color:var(--brand);cursor:pointer}
.login .err{color:var(--bad);font-size:13px;text-align:center;min-height:16px}

/* ===== Perfis ===== */
.profiles-scr{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
     gap:30px;padding:24px;background:radial-gradient(75% 95% at 50% 0%,#141a33,var(--bg))}
.profiles-scr h2{font-size:clamp(22px,4vw,30px);font-weight:700}
.profiles{display:flex;gap:30px;flex-wrap:wrap;justify-content:center}
.profile{display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;position:relative}
.pf-av{width:110px;height:110px;border-radius:18px;display:grid;place-items:center;font-size:40px;
     font-weight:800;border:3px solid transparent;transition:.15s;color:#fff}
.profile:hover .pf-av{border-color:#fff;transform:scale(1.05)}
.profile .nm{font-size:15px;color:var(--t2);display:flex;align-items:center;gap:6px}
.profile:hover .nm{color:#fff}
.pf-av.c0{background:linear-gradient(135deg,#2f6bff,#7a3cff)}
.pf-av.c1{background:linear-gradient(135deg,#11998e,#38ef7d)}
.pf-av.c2{background:linear-gradient(135deg,#e05aa9,#7a3cff)}
.pf-av.k{background:linear-gradient(135deg,var(--kids),var(--kids-2));color:#3a2400}
.pf-av.add{background:var(--card);border:2px dashed var(--line);color:var(--t2);font-size:46px}
.pf-lock{position:absolute;top:78px;right:2px;background:#000a;border-radius:6px;padding:2px 6px;font-size:11px}
.pinbox{display:flex;gap:10px;justify-content:center;margin:10px 0}
.pinbox input{width:46px;height:56px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);
     text-align:center;font-size:26px;font-weight:800;color:#fff;outline:none}
.pinbox input:focus{border-color:var(--brand)}

/* ===== Hero (Início) ===== */
.hero{position:relative;margin:calc(-1 * (var(--nav-h) + 10px)) -34px 8px;padding:0 34px;
     min-height:min(62vh,520px);display:flex;align-items:flex-end;overflow:hidden}
.hero .bg{position:absolute;inset:0;background:radial-gradient(80% 90% at 80% 20%,#2a2350,var(--bg))}
.hero .bg img{width:100%;height:100%;object-fit:cover;opacity:.45}
.hero .shade{position:absolute;inset:0;background:
     linear-gradient(90deg,rgba(6,7,10,.94) 20%,rgba(6,7,10,.35) 60%,transparent),
     linear-gradient(0deg,var(--bg) 2%,transparent 55%)}
.hero .hc{position:relative;max-width:560px;padding:110px 0 34px;z-index:2}
.hero .tag{color:var(--brand);font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase}
.hero h1{font-size:clamp(26px,4.4vw,42px);line-height:1.06;margin:8px 0 10px}
.hero .meta{display:flex;gap:10px;color:var(--t2);font-size:13px;margin-bottom:10px;align-items:center;flex-wrap:wrap}
.hero .meta .hd{border:1px solid var(--t3);border-radius:4px;padding:0 5px;font-size:11px}
.hero p{color:var(--t2);font-size:14px;line-height:1.5;margin-bottom:16px;display:-webkit-box;
     -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}

/* ===== TV ao vivo ===== */
.live-wrap{display:flex;gap:12px;height:calc(100vh - var(--nav-h) - 26px)}
.lpanel{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
     display:flex;flex-direction:column;min-height:0}
.lpanel .h{padding:11px 13px;font-size:11px;color:var(--t2);border-bottom:1px solid var(--line);
     text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}
.lpanel .list{flex:1;overflow-y:auto;min-height:0}
.lpanel .li{padding:11px 13px;font-size:13px;border-bottom:1px solid rgba(255,255,255,.04);
     display:flex;align-items:center;gap:9px;color:#dcdcdc;cursor:pointer}
.lpanel .li:hover{background:var(--card2)}
.lpanel .li.on{background:var(--brand);color:#fff;font-weight:600}
.lpanel .li .nm2{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lpanel .li .now{font-size:10px;color:var(--t3);display:block;white-space:nowrap;overflow:hidden;
     text-overflow:ellipsis;margin-top:2px}
.lpanel .li.on .now{color:rgba(255,255,255,.75)}
.dot-logo{width:30px;height:30px;border-radius:6px;background:var(--card2);flex-shrink:0;
     display:grid;place-items:center;overflow:hidden}
.dot-logo img{width:100%;height:100%;object-fit:contain}
.lpreview{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}
.lscreen{flex:1;border-radius:12px;background:#000;position:relative;border:1px solid var(--line);
     overflow:hidden;min-height:180px;display:grid;place-items:center}
.lscreen video{position:absolute;inset:0;width:100%;height:100%;background:#000}
.lscreen .hint{color:var(--t3);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:12px}
.lscreen .pbig{width:54px;height:54px;border-radius:50%;background:var(--grad);display:grid;place-items:center}
.lscreen .pbig svg.ic{width:22px;height:22px;margin-left:3px}
.lscreen .fsbtn{position:absolute;right:10px;bottom:10px;z-index:5;background:#000a;border:none;color:#fff;
     border-radius:8px;padding:8px;cursor:pointer;display:grid;place-items:center}
.lname{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;padding:0 2px;min-height:22px}
.lname .sub2{color:var(--t2);font-weight:400;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lname .favb{margin-left:auto;cursor:pointer;color:var(--t2)}
.lname .favb.on{color:var(--bad)}
.epgbox{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;
     height:30%;min-height:96px;overflow-y:auto;flex-shrink:0}
.epgbox .e{display:flex;gap:10px;font-size:12px;padding:4px 0;color:#cfcfcf}
.epgbox .e .t{color:var(--brand-2);font-weight:700;min-width:46px}
.epgbox .e.now .t{color:var(--ok)}

/* ===== Detalhes ===== */
.detail-scr{position:relative;margin:calc(-1 * (var(--nav-h) + 10px)) -34px 0;padding:0 34px}
.detail-bg{position:absolute;inset:0;max-height:560px;overflow:hidden}
.detail-bg img{width:100%;height:100%;object-fit:cover;opacity:.35}
.detail-bg .shade{position:absolute;inset:0;background:
     linear-gradient(90deg,var(--bg) 26%,transparent 72%),
     linear-gradient(0deg,var(--bg) 6%,transparent 60%)}
.detail-c{position:relative;padding-top:110px;z-index:2;display:flex;gap:30px}
.detail-c .pcol{flex-shrink:0;width:210px}
.detail-c .pcol .poster{aspect-ratio:2/3;cursor:default}
.detail-c .pcol .poster:hover{transform:none;outline-color:transparent}
.detail-c .info{flex:1;min-width:0}
.detail-c .tag{color:var(--brand);font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.detail-c h1{font-size:clamp(24px,3.6vw,38px);line-height:1.05;margin:6px 0 8px}
.detail-c .meta{display:flex;gap:10px;color:var(--t2);font-size:13px;margin-bottom:12px;align-items:center;flex-wrap:wrap}
.detail-c .meta .hd{border:1px solid var(--t3);border-radius:4px;padding:0 5px;font-size:11px}
.detail-c p.plot{color:var(--t2);max-width:760px;font-size:14px;line-height:1.55;margin-bottom:16px}
.detail-c .crew{color:var(--t3);font-size:12px;margin-bottom:16px;line-height:1.6}
.detail-c .crew b{color:var(--t2);font-weight:600}
.seasons{display:flex;gap:8px;margin:20px 0 12px;flex-wrap:wrap}
.eps{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px}
.ep{width:220px;background:var(--card);border-radius:10px;overflow:hidden;border:1px solid var(--line);
     flex-shrink:0;cursor:pointer;transition:.15s}
.ep:hover{border-color:var(--brand)}
.ep .thumb{height:110px;background:radial-gradient(circle at 50% 40%,#243240,#10141a);position:relative}
.ep .thumb img{width:100%;height:100%;object-fit:cover}
.ep .thumb .pl{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.25)}
.ep .thumb .pl svg.ic{width:30px;height:30px}
.ep .thumb .dur{position:absolute;right:6px;bottom:6px;background:#000a;border-radius:4px;padding:1px 6px;font-size:10px}
.ep .et{padding:9px 11px}
.ep .et .n{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ep .et .d{font-size:10.5px;color:var(--t2);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;
     -webkit-box-orient:vertical;overflow:hidden}

/* ===== Busca ===== */
.searchbar{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
     border-radius:12px;padding:0 16px;font-size:15px;color:var(--t2);margin-bottom:18px}
.searchbar svg.ic{fill:var(--t2)}
.searchbar input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-size:15px;padding:14px 0}
.recent{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}

/* ===== Player fullscreen ===== */
#player-ov{position:fixed;inset:0;background:#000;z-index:200;display:none}
#player-ov.show{display:block}
#player-ov video{position:absolute;inset:0;width:100%;height:100%}
#player-ov .pf-top{position:absolute;top:0;left:0;right:0;padding:18px 26px;display:flex;align-items:center;
     gap:14px;background:linear-gradient(rgba(0,0,0,.72),transparent);z-index:5;transition:opacity .25s}
#player-ov .pf-top .bk{cursor:pointer;color:#fff}
#player-ov .pf-top .ti{font-weight:700;font-size:16px}
#player-ov .pf-top .su{font-size:11px;color:var(--t2)}
#player-ov .pf-center{position:absolute;inset:0;display:grid;place-items:center;z-index:4}
#player-ov .pf-center .pp{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.14);
     display:grid;place-items:center;border:2px solid rgba(255,255,255,.4);cursor:pointer;transition:opacity .25s}
#player-ov .pf-center .pp svg.ic{width:30px;height:30px;margin-left:2px}
#player-ov .pf-center .spin{margin:0}
#player-ov .pf-bottom{position:absolute;left:0;right:0;bottom:0;padding:16px 26px 20px;
     background:linear-gradient(transparent,rgba(0,0,0,.82));z-index:5;transition:opacity .25s}
#player-ov .pf-bar{height:5px;border-radius:5px;background:rgba(255,255,255,.22);position:relative;
     margin-bottom:14px;cursor:pointer}
#player-ov .pf-bar .buf{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.28);border-radius:5px}
#player-ov .pf-bar .cur{position:absolute;left:0;top:0;bottom:0;background:var(--brand);border-radius:5px}
#player-ov .pf-bar .cur::after{content:"";position:absolute;right:-7px;top:50%;transform:translateY(-50%);
     width:14px;height:14px;border-radius:50%;background:#fff}
#player-ov .pf-ctrls{display:flex;align-items:center;gap:20px;color:#fff}
#player-ov .pf-ctrls .cbtn{background:none;border:none;color:#fff;cursor:pointer;display:grid;place-items:center;padding:2px}
#player-ov .pf-ctrls .cbtn:hover{color:var(--brand)}
#player-ov .pf-ctrls svg.ic{width:24px;height:24px}
#player-ov .pf-ctrls .t{font-size:12px;color:var(--t2);font-variant-numeric:tabular-nums}
#player-ov .pf-ctrls .sp{margin-left:auto}
#player-ov .vol{display:flex;align-items:center;gap:8px}
#player-ov .vol input[type=range]{width:90px;accent-color:var(--brand)}
#player-ov.hideui .pf-top,#player-ov.hideui .pf-bottom,#player-ov.hideui .pf-center .pp{opacity:0;pointer-events:none}
#player-ov.hideui{cursor:none}

/* ===== Conta / painéis ===== */
.acc-cols{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.acc-cols>div{flex:1;min-width:300px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px}
.pl-row{display:flex;align-items:center;gap:12px}
.plan-ic{width:46px;height:46px;border-radius:12px;background:var(--grad);display:grid;place-items:center;color:#fff;flex-shrink:0}
.plan-name{font-weight:800;font-size:17px}
.plan-sub{color:var(--t2);font-size:12px;margin-top:2px}
.exp-chip{margin-left:auto;text-align:right}
.exp-chip .d{font-weight:800;font-size:15px}
.exp-chip .k{color:var(--t2);font-size:10px}
.renew{width:100%;margin-top:14px;justify-content:center;background:var(--grad);color:#fff;border:none;
     border-radius:11px;padding:13px;font-weight:800;font-size:15px;cursor:pointer;display:flex;
     align-items:center;gap:8px;transition:.15s}
.renew:hover{filter:brightness(1.12)}
.sec-title{font-size:12px;color:var(--t2);text-transform:uppercase;letter-spacing:.6px;margin:4px 4px 8px;
     display:flex;align-items:center;gap:8px}
.meter{flex:0 1 140px;height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;background:var(--brand)}
.prow{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line)}
.prow:last-child{border:none}
.prow .pf-mini{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;font-weight:800;
     font-size:14px;color:#fff;flex-shrink:0}
.prow .pa{margin-left:auto;display:flex;gap:8px}
.prow .pa button{background:var(--card2);border:1px solid var(--line);color:var(--t2);border-radius:8px;
     padding:7px;cursor:pointer;display:grid;place-items:center}
.prow .pa button:hover{color:#fff;border-color:var(--brand)}
.prow .pa button.del:hover{color:var(--bad);border-color:var(--bad)}
.switch{position:relative;width:42px;height:24px;flex-shrink:0;cursor:pointer}
.switch input{opacity:0;width:0;height:0}
.switch .sl{position:absolute;inset:0;background:var(--card2);border:1px solid var(--line);border-radius:24px;transition:.2s}
.switch .sl::before{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--t2);transition:.2s}
.switch input:checked + .sl{background:var(--grad);border-color:transparent}
.switch input:checked + .sl::before{transform:translateX(18px);background:#fff}

/* ===== PIX / renovação ===== */
.plan-opt{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--line);
     border-radius:12px;padding:13px 14px;cursor:pointer;transition:.15s;margin-bottom:9px}
.plan-opt:hover{border-color:var(--brand)}
.plan-opt.on{border-color:var(--brand);background:linear-gradient(135deg,rgba(47,107,255,.18),rgba(122,60,255,.10))}
.plan-opt .pn{font-weight:700;font-size:14px}
.plan-opt .pd{font-size:11px;color:var(--t2);margin-top:2px}
.plan-opt .pv{margin-left:auto;font-weight:800;font-size:15px;white-space:nowrap}
.qrbox{display:flex;flex-direction:column;align-items:center;gap:12px;margin:6px 0}
.qrbox img{width:210px;height:210px;border-radius:12px;background:#fff;padding:8px}
.pixcode{display:flex;gap:8px;align-items:stretch}
.pixcode input{flex:1;background:var(--bg2);border:1px solid var(--line);border-radius:9px;color:var(--t2);
     font-size:11px;padding:10px;min-width:0}
.paywait{display:flex;align-items:center;gap:10px;justify-content:center;color:var(--t2);font-size:13px;margin-top:10px}
.paywait .spin{width:18px;height:18px;border-width:2px;margin:0}
.payok{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 0;color:var(--ok);
     font-weight:700;font-size:16px;text-align:center}
.payok svg.ic{width:44px;height:44px;fill:var(--ok)}

/* ===== Configurações ===== */
.cfg .g{margin-bottom:18px}
.cfg .gt{font-size:12px;color:var(--t2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px}
.cfg .crow{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
     border-radius:10px;padding:14px 16px;margin-bottom:8px;cursor:pointer;transition:.15s}
.cfg .crow:hover{border-color:var(--brand)}
.cfg .crow.static{cursor:default}
.cfg .crow.static:hover{border-color:var(--line)}
.cfg .crow svg.ic{color:var(--t2)}
.cfg .crow .v{margin-left:auto;color:var(--t2);font-size:13px;display:flex;align-items:center;gap:6px}
.cfg .crow.danger{color:var(--bad)}
.cfg .crow.danger svg.ic{color:var(--bad)}

/* ===== Notificações ===== */
.nico{position:relative}
.nico .nbadge{position:absolute;top:-6px;right:-8px;background:var(--bad);color:#fff;font-size:9px;
     font-weight:800;border-radius:10px;padding:1px 5px;min-width:15px;text-align:center}
.notif{display:flex;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line)}
.notif:last-child{border:none}
.notif img{width:44px;height:44px;border-radius:9px;object-fit:cover;flex-shrink:0}
.notif .ni{width:38px;height:38px;border-radius:9px;background:var(--card2);display:grid;place-items:center;
     color:var(--t2);flex-shrink:0}
.notif .nt{font-size:13px;font-weight:700}
.notif.unread .nt::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
     background:var(--brand);margin-right:6px;vertical-align:1px}
.notif .nm2{font-size:12px;color:var(--t2);margin-top:2px;line-height:1.45}
.notif .nd{font-size:10px;color:var(--t3);margin-top:3px}

/* ===== Tabs do Início (mobile) ===== */
.m-tabs{display:none;gap:18px;padding:2px 0 10px;font-size:14px;overflow-x:auto;scrollbar-width:none}
.m-tabs::-webkit-scrollbar{display:none}
.m-tabs a{color:var(--t2);white-space:nowrap;padding-bottom:5px;cursor:pointer}
.m-tabs a.on{color:#fff;font-weight:700;border-bottom:2px solid var(--brand)}

/* ============================================================
   Tema Novix — mesma paleta do app de PC (NovixPlay)
   Ativa com theme:'novix' no config.js
   ============================================================ */
body.theme-novix{
  --brand:#e50914; --brand-2:#ff2b3d; --brand-d:#b0060f;
  --bg:#07070b; --bg2:#0d0d14; --card:#12121c; --card2:#171724;
  --t:#f5f5f7; --t2:#9ca0ad; --t3:rgba(245,245,247,.42);
  --grad:linear-gradient(135deg,var(--brand),var(--brand-2));
  background:var(--bg);
}
body.theme-novix .poster{background:linear-gradient(160deg,#1d1d2a,#26141a)}
body.theme-novix .hero .bg{background:radial-gradient(80% 90% at 80% 20%,#2b141a,var(--bg))}
body.theme-novix .login,
body.theme-novix .profiles-scr{background:radial-gradient(75% 95% at 50% 0%,#1a0d12,var(--bg))}
body.theme-novix .detail-bg .shade{background:
  linear-gradient(90deg,var(--bg) 26%,transparent 72%),
  linear-gradient(0deg,var(--bg) 6%,transparent 60%)}
body.theme-novix .pf-av.c0{background:linear-gradient(135deg,#e50914,#ff2b3d)}
body.theme-novix .pf-av.c1{background:linear-gradient(135deg,#7a1020,#e50914)}
body.theme-novix .pf-av.c2{background:linear-gradient(135deg,#ff2b3d,#ff7a3d)}
body.theme-novix .lscreen{background:#000}

/* ===== Modo Infantil ===== */
body.kids-ui{--brand:#ff8a3d;--brand-2:#ffd23d;--brand-d:#e0762a;
     --grad:linear-gradient(135deg,#ff8a3d,#ffd23d)}
body.kids-ui .page,body.kids-ui #app{background:radial-gradient(80% 60% at 50% 0%,#241b3e,var(--bg))}
body.kids-ui .btn.brand,body.kids-ui .renew{color:#3a2400}
body.kids-ui .chip.on,body.kids-ui .badge{color:#3a2400}
body.kids-ui .tv-nav a.on,body.kids-ui .m-tabs a.on{border-bottom-color:var(--kids)}
body.kids-ui .poster:hover{outline-color:var(--kids)}
body.kids-ui .poster .prog,body.kids-ui .meter i{background:var(--kids)}
.kids-exit{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.4);border:1px solid var(--line);
     border-radius:20px;padding:5px 12px;font-size:11px;color:#fff;cursor:pointer}
.kids-exit svg.ic{width:13px;height:13px}

/* sessões ativas (409) */
.dev{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line)}
.dev:last-child{border:none}
.dev .di{width:34px;height:34px;border-radius:9px;background:var(--card2);display:grid;place-items:center;color:var(--t2)}
.dev .dn{font-size:13px;font-weight:600}
.dev .ds{font-size:11px;color:var(--t2)}
.dev .kick{margin-left:auto;font-size:11px;color:var(--bad);border:1px solid var(--bad);background:none;
     border-radius:7px;padding:5px 10px;cursor:pointer}

/* ============================================================
   MOBILE  (<= 760px)
   ============================================================ */
@media (max-width:760px){
  .topnav{padding:0 14px;gap:14px;height:56px;--nav-h:56px}
  .topnav .tv-nav{display:none}
  .bottomnav{display:flex}
  .m-tabs{display:flex}
  .acc-cols{flex-direction:column}
  .acc-cols>div{min-width:0;width:100%}
  .page{padding:calc(56px + 8px) 14px calc(var(--mnav-h) + 18px)}
  .hero{margin:calc(-1 * (56px + 8px)) -14px 8px;padding:0 14px;min-height:56vh}
  .hero .hc{padding:96px 0 24px}
  .strip .poster{width:110px}
  .strip.wide .poster{width:160px}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
  .pgrid.chgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .profiles{gap:18px}
  .pf-av{width:96px;height:96px;font-size:34px}
  .pf-lock{top:66px}

  /* live: empilha (preview em cima, listas abaixo) */
  .live-wrap{flex-direction:column;height:auto}
  .live-wrap .lpanel{width:100%!important;max-height:38vh}
  .lpreview{order:-1}
  .lscreen{aspect-ratio:16/9;flex:none}
  .epgbox{height:auto;max-height:150px}

  .detail-scr{margin:calc(-1 * (56px + 8px)) -14px 0;padding:0 14px}
  .detail-c{flex-direction:column;gap:16px;padding-top:84px}
  .detail-c .pcol{width:130px}
  .ep{width:180px}
  .ep .thumb{height:92px}

  #player-ov .pf-top{padding:12px 14px}
  #player-ov .pf-bottom{padding:12px 14px 16px}
  #player-ov .pf-ctrls{gap:14px}
  #player-ov .vol input[type=range]{display:none}
}
@media (min-width:761px){
  #toasts{bottom:24px}
}