/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.55;background:var(--bg);color:var(--text)}
a{color:var(--accent)}
img,video{max-width:100%}
h1,h2,h3{line-height:1.15;margin:0 0 .5em}
p{margin:0 0 1em}
code{background:rgba(127,127,127,.18);padding:.1em .35em;border-radius:4px;font-size:.9em}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem}
.ok-text{color:#6fcf97;font-weight:600}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ===== Tema do site público (veludo e latão, com papel de parede) ===== */
body.site{
  --bg:#150a10;--surface:#221018;--surface2:#2c1520;--text:#f2eadc;--muted:#bcad9e;--line:rgba(242,234,220,.16);
  --danger:#e5766f;--okc:#6fcf97;--glow1:rgba(201,164,92,.20);--glow2:rgba(150,40,90,.40);--base2:#0e050a;
  --dim:.65;--n1:168,85,255;--n2:34,211,238;--neon1:rgb(var(--n1));--neon2:rgb(var(--n2));--navfont:"Manrope",system-ui,sans-serif;--bfill:rgba(12,9,24,.82);--barbg:rgba(0,0,0,.55);
}
body.site.bgp-meia-noite{--bg:#0a1020;--surface:#111a30;--surface2:#17223f;--glow1:rgba(130,160,255,.22);--glow2:rgba(40,70,170,.42);--base2:#050914}
body.site.bgp-esmeralda{--bg:#07150f;--surface:#0e2119;--surface2:#142c22;--glow1:rgba(201,164,92,.18);--glow2:rgba(20,130,85,.40);--base2:#030c08}
body.site.bgp-grafite{--bg:#131316;--surface:#1c1c21;--surface2:#25252b;--glow1:rgba(255,255,255,.08);--glow2:rgba(110,110,135,.28);--base2:#0a0a0c}

/* Temas de neon e fontes da barra do topo */
body.site.neon-rosa{--n1:255,60,172;--n2:168,85,255}
body.site.neon-verde{--n1:57,255,136;--n2:34,211,238}
body.site.neon-dourado{--n1:255,196,64;--n2:255,120,60}
body.site.neon-azul{--n1:59,130,246;--n2:34,211,238}
body.site.neon-vermelho{--n1:255,59,92;--n2:255,150,60}
body.site.btnf-inter{--navfont:"Inter",system-ui,sans-serif}
body.site.btnf-poppins{--navfont:"Poppins",system-ui,sans-serif}
body.site.btnf-montserrat{--navfont:"Montserrat",system-ui,sans-serif}
body.site.btnf-orbitron{--navfont:"Orbitron",system-ui,sans-serif}
body.site.btnf-cinzel{--navfont:"Cinzel",Georgia,serif}

/* Papel de parede: ocupa a tela toda e fica parado atrás do conteúdo */
body.site::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(1000px 560px at 12% -8%,var(--glow1),transparent 62%),
    radial-gradient(900px 640px at 105% 8%,var(--glow2),transparent 62%),
    linear-gradient(180deg,var(--bg),var(--base2));
}
body.site.has-bg::before{
  background:linear-gradient(rgba(0,0,0,var(--dim)),rgba(0,0,0,var(--dim))),var(--bgimg) center/cover no-repeat;
}

body.site h1,body.site h2,body.site .pass h2{font-family:"Newsreader",Georgia,"Times New Roman",serif;font-weight:600;letter-spacing:-.01em}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.main{padding-top:8px;padding-bottom:40px;min-height:60vh}

/* Superfícies translúcidas: deixam o papel de parede aparecer, mantendo o texto legível */
.pass,.chead,.post,.plan,.plan-opt-body,.pix{
  background:var(--surface);
  background:color-mix(in srgb,var(--surface) 80%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}

.top{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--line);background:var(--barbg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:var(--barh,70px);padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.bar-left{display:flex;align-items:center;gap:18px;min-width:0}
.sitename{font-family:"Newsreader",Georgia,serif;font-size:1.25rem;font-weight:600;color:var(--text);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* Botões do site: todos iguais (mesma altura, mesma fonte, cantos arredondados) */
.nbtn,body.site .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border-radius:10px;
  background:var(--bfill);border:1px solid rgba(var(--n1),.6);color:#fff;
  font-family:var(--navfont);font-weight:700;font-size:.95rem;line-height:1.1;letter-spacing:.01em;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;
  box-shadow:0 0 14px rgba(var(--n1),.28);transition:box-shadow .2s,border-color .2s,transform .2s}
.nbtn:hover,body.site .btn:hover{border-color:rgb(var(--n2));transform:translateY(-1px);box-shadow:0 0 18px rgba(var(--n2),.5),0 0 32px rgba(var(--n1),.3)}
.nbtn.solid,body.site .btn-primary{background:linear-gradient(90deg,rgb(var(--n2)),rgb(var(--n1)));border-color:transparent;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45);
  box-shadow:0 0 16px rgba(var(--n1),.55),0 0 28px rgba(var(--n2),.3)}
.nbtn.solid:hover,body.site .btn-primary:hover{filter:brightness(1.08);box-shadow:0 0 22px rgba(var(--n2),.7),0 0 40px rgba(var(--n1),.5)}
body.site .btn-sm{height:36px;padding:0 15px;font-size:.85rem}
body.site .btn-lg{height:52px;padding:0 30px;font-size:1rem}
.nav .nbtn,.bar-left .nbtn{min-width:118px}
.nbtn{height:var(--nbtnh,44px);font-size:var(--nbtnfs,15px)}

/* Fundo dos botões e da barra do topo (escolhido no painel) */
/* Padrão: todos os botões com o degradê neon */
body.site.bfill-degrade .nbtn,body.site.bfill-degrade .btn{background:linear-gradient(90deg,rgb(var(--n2)),rgb(var(--n1)));border-color:transparent;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45);
  box-shadow:0 0 16px rgba(var(--n1),.55),0 0 28px rgba(var(--n2),.3)}
body.site.bfill-degrade .nbtn:hover,body.site.bfill-degrade .btn:hover{border-color:transparent;filter:brightness(1.08);box-shadow:0 0 22px rgba(var(--n2),.7),0 0 40px rgba(var(--n1),.5)}
body.site.bfill-vidro{--bfill:rgba(255,255,255,.08)}
body.site.bfill-transparente{--bfill:transparent}
body.site.bfill-vidro .nbtn:not(.solid),body.site.bfill-vidro .btn:not(.btn-primary){-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.site.bfill-vidro .nbtn:not(.solid),body.site.bfill-vidro .btn:not(.btn-primary),
body.site.bfill-transparente .nbtn:not(.solid),body.site.bfill-transparente .btn:not(.btn-primary){text-shadow:0 1px 4px rgba(0,0,0,.85)}
body.site.bar-vidro{--barbg:rgba(255,255,255,.06)}
body.site.bar-transparente{--barbg:transparent}
body.site.bar-transparente .top{position:relative;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}

.menu-home{display:none !important}

/* Nome do site na faixa de cima (esconder no computador / no celular, conforme o painel) */
.nm-d-off .sitename{display:none}

/* Celular: o botão Início fica de um lado e o nome do site no canto direito. Ao tocar no Início, abre o menu logo abaixo dele. */
@media (max-width:640px){
  .bar{position:relative;flex-wrap:nowrap;justify-content:flex-start;padding-left:14px;padding-right:14px;min-height:var(--mbarh,64px)}
  .bar-left{flex:1 1 auto;min-width:0;width:100%}
  .bar-left .nbtn{flex:none;min-width:0;padding:0 30px;height:var(--mnbtnh,46px);font-size:var(--mnbtnfs,15px)}
  .bar-left .sitename{display:block;margin:var(--mnamem,0 0 0 auto);max-width:58%;text-align:right;font-size:var(--mnamefs,16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nm-m-off .bar-left .sitename{display:none}
  .nav{display:none;position:absolute;left:14px;right:auto;top:100%;margin-top:-4px;width:min(240px,calc(100vw - 28px));flex-direction:column;align-items:stretch;gap:8px;padding:12px;
    border-radius:14px;background:rgba(10,6,18,.95);border:1px solid rgba(var(--n1),.45);box-shadow:0 14px 40px rgba(0,0,0,.55);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:40}
  .top.open .nav{display:flex}
  .nav .nbtn{width:100%;min-width:0;height:var(--mnbtnh,46px);font-size:var(--mnbtnfs,15px)}
  .menu-home{display:inline-flex !important}
  .hero-cta .btn + .btn{display:none}
  body.site .foot{padding:var(--mfootpad,20px) 0;font-size:var(--mfootfs,14px)}
}

.hero{padding:92px 0 60px;max-width:820px}
.hero h1{font-size:clamp(2.7rem,7.8vw,5.2rem);line-height:1.02;margin-bottom:.4em;animation:rise .8s ease both}
.hero p{font-size:1.2rem;color:var(--muted);max-width:50ch;animation:rise .8s .12s ease both}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;animation:rise .8s .24s ease both}
.btn-lg{padding:14px 26px;font-size:1rem;border-radius:12px}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.sec-title{font-size:1.7rem;margin:6px 0 20px}

/* Cartões de acesso: capa quadrada (1080 x 1080) com brilho neon roxo e ciano */
.passes{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:34px;padding:10px 0 70px}
.passes::before{content:"";position:absolute;inset:-20px 0 0;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side at 22% 38%,rgba(var(--n1),.22),transparent),radial-gradient(closest-side at 78% 66%,rgba(var(--n2),.16),transparent)}
.pass{position:relative;display:flex;flex-direction:column;border:1px solid rgba(var(--n1),.55);border-radius:18px;color:inherit;text-decoration:none;transition:border-color .2s,box-shadow .25s;
  box-shadow:0 0 0 1px rgba(var(--n2),.14),-10px -10px 34px rgba(var(--n1),.38),10px 10px 34px rgba(var(--n2),.30)}
.pass:hover{border-color:var(--neon2);box-shadow:0 0 0 1px rgba(var(--n2),.45),-12px -12px 42px rgba(var(--n1),.55),12px 12px 42px rgba(var(--n2),.45)}
.pass-top{width:100%;aspect-ratio:1/1;border-radius:17px 17px 0 0;background-size:cover;background-position:center;display:grid;place-items:center}
.pass-emoji{font-size:4.6rem;filter:drop-shadow(0 6px 16px rgba(0,0,0,.55))}
.pass-body{border-top:2px dashed rgba(var(--n2),.35);padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.pass h2{font-size:1.5rem;margin:0}
.pass p{color:var(--muted);font-size:.95rem;margin:0;flex:1}
.pass-foot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:12px}
.price{font-weight:700;color:color-mix(in srgb,var(--accent) 45%,#fff)}
.pass-cta{font-size:.9rem;color:var(--text);border-bottom:1px solid var(--neon2)}

/* Como funciona: é uma sequência de verdade, por isso numerada */
.steps3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;padding:0 0 70px}
.step3{border-top:2px solid var(--accent);padding-top:14px}
.step3 b{display:block;font-family:"Newsreader",Georgia,serif;font-size:2.2rem;line-height:1;color:var(--accent);margin-bottom:6px}
.step3 strong{display:block;font-size:1.05rem;margin-bottom:2px}
.step3 span{color:var(--muted);font-size:.95rem}

.empty{padding:48px 20px;text-align:center;border:1px dashed var(--line);border-radius:14px;color:var(--muted);margin:20px 0}

/* Canal */
.chead{position:relative;display:grid;grid-template-columns:minmax(240px,380px) 1fr;gap:0;margin:28px 0 8px;border:1px solid rgba(var(--n1),.55);border-radius:18px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(var(--n2),.14),-10px -10px 38px rgba(var(--n1),.34),10px 10px 38px rgba(var(--n2),.26)}
.chead-cover{width:100%;aspect-ratio:1/1;background-size:cover;background-position:center;display:grid;place-items:center}
.chead-info{padding:26px 28px 14px;align-self:center}
.chead-info h1{font-size:clamp(1.8rem,4.5vw,2.8rem)}
@media (max-width:760px){.chead{grid-template-columns:1fr}.chead-info{padding:20px 20px 8px}}
.plans{margin:28px 0}
.plans h2{font-size:1.5rem}
.plan-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.plan{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;color:var(--text);text-decoration:none}
.plan:hover{border-color:var(--accent)}
.plan-name{font-weight:700}
.plan-price{font-family:"Newsreader",Georgia,serif;font-size:1.7rem;color:color-mix(in srgb,var(--accent) 45%,#fff)}
.plan-days{color:var(--muted);font-size:.9rem}

.feed{max-width:720px;margin-top:28px}
.post{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:16px}
.post-meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.85rem;margin-bottom:10px}
.post-body{margin-bottom:12px;overflow-wrap:anywhere}
.media{display:grid;gap:6px;border-radius:10px;overflow:hidden}
.media.n1{grid-template-columns:1fr}.media.n2{grid-template-columns:1fr 1fr}.media.n3{grid-template-columns:1fr 1fr 1fr}
.media img,.media video{width:100%;display:block;background:#000;border-radius:6px;max-height:560px;object-fit:cover}
.media.n1 img,.media.n1 video{object-fit:contain}
.lock-box{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:34px 16px;border-radius:10px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 12px,transparent 12px 24px);border:1px dashed var(--line)}
.lock-ico{font-size:1.8rem}
.pager{display:flex;gap:10px;justify-content:center;margin:20px 0}

.foot{border-top:1px solid var(--line);padding:var(--footpad,24px) 0;color:var(--muted);font-size:var(--footfs,14px);background:rgba(0,0,0,.18)}
.foot .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}
.foot a{color:var(--text);text-decoration:none;border-bottom:1px solid rgba(var(--n2),.6)}
.foot a:hover{color:rgb(var(--n2))}

/* Login, cadastro, pagamento */
.auth,.pay{max-width:460px;margin:48px auto}
.pay{max-width:520px}
.auth h1,.pay h1{font-size:2rem}
.auth,.pay{padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--surface);background:color-mix(in srgb,var(--surface) 82%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.page-title{font-size:2rem;margin:34px 0 18px}
.block{margin:0 0 34px}
.block h2{font-size:1.4rem}
.line{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.line-actions{display:flex;gap:8px}
.plan-pick{display:grid;gap:10px;margin-bottom:18px}
.plan-opt{display:block;cursor:pointer}
.plan-opt input{position:absolute;opacity:0}
.plan-opt-body{display:grid;grid-template-columns:1fr auto;gap:0 12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px}
.plan-opt-body .muted{grid-column:1}
.plan-opt-price{grid-column:2;grid-row:1 / span 2;align-self:center;font-family:"Newsreader",Georgia,serif;font-size:1.5rem;color:var(--accent)}
.plan-opt input:checked + .plan-opt-body{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.plan-opt input:focus-visible + .plan-opt-body{outline:2px solid var(--accent);outline-offset:2px}
.pix{border:1px solid var(--line);border-radius:14px;padding:20px;display:grid;gap:12px;justify-items:start}
.pix-qr{width:230px;height:230px;background:#fff;padding:10px;border-radius:10px;align-self:center;justify-self:center}
.pix textarea{width:100%}
.pix-note{white-space:pre-line;color:var(--muted);margin:0}
.pix-wait{color:var(--accent);margin:0}
.admin-sim{margin-top:20px}
.pay-done{text-align:center;padding:30px 0}
.pay-done-ico{width:64px;height:64px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;font-size:1.8rem;border:2px solid var(--okc);color:var(--okc)}

/* ===== Componentes comuns ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text);font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;text-decoration:none;line-height:1.2}
.btn:hover{border-color:var(--accent)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#1b0f06}
.btn-primary:hover{filter:brightness(1.08)}
.btn-danger{color:var(--danger);border-color:var(--danger)}
.btn-sm{padding:6px 12px;font-size:.85rem;border-radius:8px}
.btn-block{width:100%}
.btn.on{background:var(--accent);color:#1b0f06;border-color:var(--accent)}
.form{display:grid;gap:14px}
.field{display:grid;gap:6px;font-size:.9rem;font-weight:600}
.field.inline{display:inline-grid}
.field input,.field select,.field textarea,.pix textarea,#whurl{width:100%;font:inherit;font-weight:400;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.field input[type=color]{padding:2px;height:42px;width:80px}
.field input[type=range]{padding:0}
.field input[type=file]{padding:8px}
.check{display:flex;align-items:center;gap:8px;font-weight:400;font-size:.95rem}
.check input{width:auto}
.alert{padding:12px 14px;border-radius:10px;margin:14px 0;border:1px solid var(--line)}
.alert.ok{border-color:var(--okc);background:rgba(111,207,151,.1)}
.alert.err{border-color:var(--danger);background:rgba(229,118,111,.1)}
.alert.warn{border-color:#d9a441;background:rgba(217,164,65,.12)}
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.75rem;font-weight:700;border:1px solid var(--line)}
.badge.vip{border-color:var(--accent);color:var(--accent)}
.st-paid{border-color:var(--okc);color:var(--okc)}
.st-pending{border-color:#d9a441;color:#d9a441}
.st-failed,.st-canceled,.st-expired{border-color:var(--danger);color:var(--danger)}
.table-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-weight:600;color:var(--muted);font-size:.82rem}

/* ===== Painel e instalador (tema claro) ===== */
body.adm{
  --bg:#f4f2ee;--surface:#ffffff;--text:#1f1a20;--muted:#6f6670;--line:#e2ddd5;--accent:#7a2f4a;
  --danger:#c2413b;--okc:#1f8a55;--surface2:#efeae2;
}
body.adm .btn-primary{color:#fff}
body.adm .btn.on{color:#fff}
body.adm .alert.ok{background:#e6f5ed}
body.adm .alert.err{background:#fbe9e7}
body.adm .alert.warn{background:#fdf3dc}
.adm-shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.adm-side{background:#2a121d;color:#f2eadc;padding:22px 14px;position:sticky;top:0;height:100vh}
.adm-brand{font-family:"Newsreader",Georgia,serif;font-size:1.2rem;font-weight:600;padding:0 10px 18px}
.adm-side nav{display:grid;gap:2px}
.adm-side a{color:#d9cdbd;text-decoration:none;padding:9px 12px;border-radius:8px;font-size:.95rem}
.adm-side a:hover{background:rgba(255,255,255,.07)}
.adm-side a.on{background:#f2eadc;color:#2a121d;font-weight:700}
.adm-side a.ext{margin-top:10px;color:#a99c8b}
.adm-main{padding:28px 32px 60px;min-width:0;max-width:1100px}
.adm-main h1{font-size:1.7rem;margin-bottom:18px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:20px}
.panel h2{font-size:1.15rem}
.panel h3{margin-top:22px;font-size:1rem}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.panel-head h2{margin:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:20px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.stat span{display:block;color:var(--muted);font-size:.85rem}
.stat strong{font-size:1.5rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));align-items:end}
.inline-form{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
form.inline{display:inline}
.row-actions{white-space:nowrap}
.row-actions .btn{margin:0 2px 4px 0}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.top-gap{margin-top:18px}
.plan-line{display:grid;grid-template-columns:2fr 1.2fr 1fr auto;gap:8px;margin-bottom:8px}
.plan-line input{padding:9px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;width:100%;background:var(--bg);color:var(--text)}
.gw-tabs{display:flex;gap:8px;flex-wrap:wrap}
.gw-tab{padding:9px 14px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--text);background:var(--bg);font-weight:600;font-size:.92rem;display:inline-flex;gap:8px;align-items:center}
.gw-tab.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.post-adm{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:10px;background:var(--bg)}
.post-adm summary{cursor:pointer;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.post-adm .form{margin-top:14px}
.form-delete{margin-top:10px}
.thumbs{display:flex;flex-wrap:wrap;gap:10px}
.thumb{display:grid;gap:4px;width:120px;font-size:.8rem}
.thumb img,.thumb video{width:120px;height:90px;object-fit:cover;border-radius:6px;background:#000}
.install{max-width:640px;margin:40px auto;padding:0 18px}
.steps{padding-left:20px}
.steps li{margin-bottom:10px}
.checks{list-style:none;padding:0;margin:0}
.checks li{padding:4px 0}
.checks .yes{color:var(--okc)}
.checks .no{color:var(--danger);font-weight:700}

/* ===== Mobile ===== */
@media (max-width:820px){
  .adm-shell{grid-template-columns:1fr}
  .adm-side{position:static;height:auto;padding:12px}
  .adm-side nav{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto}
  .adm-main{padding:20px 16px 50px}
  .grid2{grid-template-columns:1fr}
  .plan-line{grid-template-columns:1fr 1fr}
  .plan-line input[name="plan_name[]"]{grid-column:1 / -1}
}
@media (max-width:560px){
  .hero{padding:48px 0 34px}
  .auth,.pay{margin:24px auto;padding:20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;scroll-behavior:auto !important}}

.bg-preview{width:100%;max-width:320px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;border:1px solid var(--line)}

/* Vídeo de papel de parede */
.bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;background:#000}
.bg-overlay{position:fixed;inset:0;z-index:-1;background:rgba(0,0,0,var(--dim))}
body.site.has-video::before{display:none}
video.bg-preview{background:#000}
@media (prefers-reduced-motion:reduce){
  .bg-video,.bg-overlay{display:none}
  body.site.has-video::before{display:block}
}

/* Cartão VIP do canal: neon nas cores do tema (padrão: roxo e ciano) */
.vipcard{position:relative;margin:0 0 24px;padding:30px 22px 28px;border-radius:20px;text-align:center;
  background:rgba(12,7,26,.84);border:1px solid rgba(var(--n1),.75);
  box-shadow:0 0 0 1px rgba(var(--n2),.35),-12px -12px 42px rgba(var(--n1),.5),12px 12px 42px rgba(var(--n2),.4),inset 0 0 44px rgba(var(--n1),.12)}
.vipcard-title{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:20px;font-size:1.05rem;font-weight:700;letter-spacing:.02em;color:#fff;text-shadow:0 0 14px rgba(var(--n2),.85)}
.vipstats{display:flex;justify-content:center;gap:clamp(24px,7vw,64px);flex-wrap:wrap;margin-bottom:24px}
.vipstat b{display:block;font-family:"Newsreader",Georgia,serif;font-size:clamp(2.3rem,9vw,3.8rem);line-height:1;font-weight:600;
  background:linear-gradient(90deg,rgb(var(--n2)),rgb(var(--n1)));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(var(--n1),.6))}
.vipstat span{display:block;margin-top:8px;color:var(--text);font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.lock-mini{display:flex;align-items:center;gap:10px;padding:16px;border:1px dashed rgba(var(--n1),.45);border-radius:10px;color:var(--muted)}

/* Capas em vídeo */
.pass-top,.chead-cover{position:relative;overflow:hidden}
.cover-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

/* Página do canal no computador: coluna centralizada e card compacto (no celular continua ocupando a largura toda) */
.chead,.plans,.feed{max-width:780px;margin-left:auto;margin-right:auto}
.chead{grid-template-columns:minmax(220px,300px) 1fr}
.chead-info{padding:22px 26px}
@media (max-width:760px){.chead{grid-template-columns:1fr}.chead-info{padding:20px 20px 8px}}

/* Capa e texto independentes: a capa fica sempre quadrada e o texto pode ter qualquer tamanho */
.chead{align-items:start}
.chead-cover{align-self:start;height:auto;flex:none}
.chead-info{align-self:center;min-width:0}
.chead-info p{overflow-wrap:anywhere}
.pass-top{flex:none}
.pass p{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}

/* Capa e texto em dois cartões separados: o texto pode crescer à vontade sem esticar a capa */
.chead{background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible;gap:24px;-webkit-backdrop-filter:none;backdrop-filter:none}
.chead-cover{border:1px solid rgba(var(--n1),.6);border-radius:18px;
  box-shadow:0 0 0 1px rgba(var(--n2),.16),-10px -10px 34px rgba(var(--n1),.4),10px 10px 34px rgba(var(--n2),.32)}
.chead-info{align-self:start;padding:24px 26px;border:1px solid var(--line);border-radius:18px;
  background:var(--surface);background:color-mix(in srgb,var(--surface) 82%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@media (max-width:760px){.chead{gap:18px}.chead-info{padding:20px}}

/* Reações e visualizações reais dos posts */
.eng{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.eng-views{color:var(--muted);font-size:.9rem}
.reacts{display:flex;gap:8px;flex-wrap:wrap}
.react{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid rgba(var(--n1),.4);background:rgba(12,9,24,.6);color:var(--text);font:inherit;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.react span{font-size:1.15rem;line-height:1}
.react b{font-size:.85rem;font-weight:700;min-width:.4em}
.react:hover{border-color:rgb(var(--n2))}
.react.on{border-color:rgb(var(--n2));background:rgba(var(--n1),.22);box-shadow:0 0 12px rgba(var(--n2),.5)}
.react[disabled]{opacity:.6;pointer-events:none}

/* Envio de vários arquivos (painel) */
.bulk-item{display:grid;grid-template-columns:1fr 130px;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.bulk-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .15s}

/* =====================================================================
   Ajuste fino de layout: celular, tablet e computador
   ===================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
img,video,canvas{max-width:100%;height:auto}
button,.btn,.nbtn,.react{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.main > *{min-width:0}

/* Tela do Pix e páginas de entrada: tudo centralizado e organizado */
.pay h1,.pay > p,.auth h1,.auth > .muted{text-align:center}
.pay .pix{justify-items:center;text-align:center;padding:24px 18px;gap:14px}
.pay .pix .field{width:100%;text-align:center}
.pay .pix textarea{text-align:left;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;line-height:1.45;min-height:118px;resize:none;word-break:break-all}
.pay .pix .btn{width:100%;max-width:340px}
.pay .pix-qr{margin:0 auto}
.pix-note,.pix-wait{text-align:center;margin:0}
.pay .admin-sim{text-align:center}
.pay .admin-sim .btn{max-width:340px;width:100%}
.pay-done .btn{min-width:200px}
.plan-pick{max-width:100%}

/* Faixa de cima em tablet */
@media (min-width:641px) and (max-width:1024px){
  .nav{gap:8px}
  .nav .nbtn,.bar-left .nbtn{min-width:96px;padding:0 16px}
  .sitename{max-width:28vw;font-size:1.1rem}
  .hero{padding:72px 0 48px}
  .passes{gap:24px}
  .chead,.plans,.feed{max-width:none}
}

/* Telas grandes: um pouco mais de espaço lateral */
@media (min-width:1280px){
  .wrap{max-width:1180px}
  .chead,.plans,.feed{max-width:820px}
}
@media (min-width:1680px){
  .wrap{max-width:1280px}
}

/* Celular */
@media (max-width:640px){
  .wrap{padding-left:16px;padding-right:16px}
  /* campos com letra de 16px: evita o zoom automático do iPhone */
  .field input,.field select,.field textarea,.pix textarea{font-size:16px}
  .hero,.sec-title,.page-title,.plans h2{text-align:center}
  .hero p{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .hero-cta .btn{width:100%;max-width:420px}
  .passes{grid-template-columns:1fr;gap:26px}
  .pass{max-width:460px;width:100%;margin:0 auto}
  .steps3{text-align:center}
  .step3{padding-top:12px}
  .media.n3{grid-template-columns:1fr 1fr}
  .vipcard{padding:24px 16px 22px}
  .vipcard .btn{width:100%}
  .plan-row{grid-template-columns:1fr}
  .chead-cover{max-width:460px;width:100%;margin:0 auto}
  .line{flex-direction:column;align-items:flex-start}
  .line-actions{width:100%}
  .line-actions .btn{flex:1}
  .auth,.pay{margin:20px auto;padding:20px 16px}
  .pager .btn{flex:1}
  .foot .wrap{flex-direction:column;align-items:center;text-align:center}
  .foot-links{justify-content:center}
  /* tabelas largas rolam para o lado dentro da própria caixa */
  .table-wrap{-webkit-overflow-scrolling:touch}
  .tbl{min-width:560px}
}

/* Celulares pequenos */
@media (max-width:380px){
  .hero h1{font-size:2.3rem}
  .nbtn{font-size:.9rem}
  .vipstats{gap:18px}
  .react{padding:6px 10px}
}

/* Desempenho: efeitos de vidro pesam em celulares; ali usamos fundos sólidos */
@media (max-width:640px){
  .pass,.chead-info,.post,.plan,.plan-opt-body,.pix,.auth,.pay,.nav,.react{-webkit-backdrop-filter:none;backdrop-filter:none}
  .post,.plan,.pix,.auth,.pay,.chead-info{background:var(--surface);background:color-mix(in srgb,var(--surface) 93%,transparent)}
}
/* Feeds longos: o navegador só desenha o que está na tela */
.post{content-visibility:auto;contain-intrinsic-size:auto 360px}
/* Quem pediu economia de dados não baixa o vídeo de fundo */
@media (prefers-reduced-data:reduce){
  .bg-video,.bg-overlay{display:none}
  body.site.has-video::before{display:block}
}

/* Menu do celular: botão ☰ que abre e fecha só com CSS (não depende de JavaScript) */
.navtoggle{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;margin:0}
.burger{display:none;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}
.burger svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.burger .ico-close{display:none}
.navtoggle:checked ~ .bar-left .burger .ico-open{display:none}
.navtoggle:checked ~ .bar-left .burger .ico-close{display:block}
@media (max-width:640px){
  .homelink{display:none}
  .burger{display:inline-flex}
  .navtoggle:checked ~ .nav{display:flex}
}

/* Menu ☰ em todas as telas (opção do painel) */
body.menu-all .homelink{display:none}
body.menu-all .burger{display:inline-flex}
body.menu-all .bar{position:relative;flex-wrap:nowrap;justify-content:flex-start}
body.menu-all .bar-left{flex:1 1 auto;min-width:0}
body.menu-all .nav{display:none;position:absolute;left:20px;right:auto;top:100%;margin-top:4px;width:min(260px,calc(100vw - 32px));
  flex-direction:column;align-items:stretch;gap:8px;padding:12px;border-radius:14px;background:rgba(10,6,18,.95);
  border:1px solid rgba(var(--n1),.45);box-shadow:0 14px 40px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:40}
body.menu-all .navtoggle:checked ~ .nav{display:flex}
body.menu-all .nav .nbtn{width:100%;min-width:0}
body.menu-all .menu-home{display:inline-flex !important}
@media (max-width:640px){body.menu-all .nav{left:14px}}

/* Menu ☰ feito com <details>: abre e fecha sozinho no navegador, sem JavaScript e sem depender de seletores de irmãos */
.burger-menu{display:none;position:relative}
.mburger{display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
.mburger::-webkit-details-marker{display:none}
.mburger::marker{content:""}
.mburger svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.mburger .ico-close{display:none}
.burger-menu[open] .mburger .ico-open{display:none}
.burger-menu[open] .mburger .ico-close{display:block}
.menu-panel{position:absolute;top:100%;left:0;margin-top:10px;width:250px;max-width:calc(100vw - 28px);display:flex;flex-direction:column;gap:8px;padding:12px;
  border-radius:14px;background:rgba(10,6,18,.97);border:1px solid rgba(var(--n1),.5);box-shadow:0 14px 40px rgba(0,0,0,.6);z-index:60}
.menu-panel .nbtn{width:100%;min-width:0;padding:0 16px;height:var(--mnbtnh,46px);font-size:var(--mnbtnfs,15px)}
/* ☰ no lugar dos botões: só no celular, ou em todas as telas se for a opção do painel */
body.menu-all .burger-menu{display:block}
body.menu-all .homelink{display:none}
body.menu-all .nav{display:none}
@media (max-width:640px){
  .burger-menu{display:block}
  .homelink{display:none}
  .nav{display:none}
}

/* Proteção do conteúdo dos canais */
body.prot-copy .feed,body.prot-copy .chead-info,body.prot-copy .vipcard{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.prot-ctx .media img{pointer-events:none;-webkit-user-drag:none;-webkit-touch-callout:none}
body.prot-ctx .media video{-webkit-touch-callout:none}
.media.wm{position:relative}
.media.wm::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background-image:var(--wm);background-repeat:repeat}
body.prot-hidden .feed,body.prot-hidden .chead{filter:blur(26px);pointer-events:none}
@media print{body.prot-copy .feed,body.prot-copy .chead,body.prot-blur .feed,body.prot-blur .chead{display:none !important}}

/* Player de vídeo (Plyr) com as cores do site */
.plyr{--plyr-color-main:rgb(var(--n1));--plyr-video-control-color:#fff;--plyr-control-radius:10px;--plyr-font-family:"Manrope",system-ui,sans-serif;border-radius:10px;overflow:hidden;width:100%}
.plyr--video .plyr__control--overlaid{background:linear-gradient(135deg,rgb(var(--n2)),rgb(var(--n1)));box-shadow:0 0 22px rgba(var(--n1),.7)}
.plyr--video .plyr__control--overlaid:hover{background:linear-gradient(135deg,rgb(var(--n2)),rgb(var(--n1)));filter:brightness(1.1)}
.plyr__video-wrapper{background:#000}
.media .plyr video{max-height:560px;object-fit:contain;background:#000}
.plyr-wm{position:absolute;inset:0;z-index:2;pointer-events:none;background-repeat:repeat}
/* a marca d'água dos vídeos é desenhada dentro do player (aparece também em tela cheia) */
.media.wm.hasvid::after{display:none}
/* avisos de vídeo no painel */
.vbadge{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:99px;font-size:.75rem;font-weight:700;border:1px solid var(--line)}
.vb-ok{border-color:var(--okc);color:var(--okc)}
.vb-warn{border-color:#d9a441;color:#b57d10}
.vb-err{border-color:var(--danger);color:var(--danger)}
.thumb{width:150px}
.thumb img,.thumb video{width:150px;height:110px}

/* ===== Feed redesenhado: cada publicação é um cartão alinhado e igual aos outros ===== */
.feed{display:grid;gap:18px;max-width:760px}
.post{margin:0;padding:0;overflow:hidden;border-radius:18px;content-visibility:visible;contain-intrinsic-size:auto}
.post-head{display:flex;align-items:center;gap:12px;padding:14px 16px}
.post-av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:1.25rem;line-height:1;
  background-size:cover;background-position:center;border:1px solid rgba(var(--n1),.55);box-shadow:0 0 14px rgba(var(--n1),.35)}
.post-who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.post-who strong{font-size:.98rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post-who span{color:var(--muted);font-size:.8rem}
.post .post-body{padding:0 16px 14px;margin:0}
.post .eng{padding:12px 16px 14px;margin:0}
.post .lock-mini{margin:0 16px 16px}
/* mídia: encaixe uniforme */
.post .media{display:grid;gap:2px;margin:0;border-radius:0;overflow:hidden}
.post .media.n1{grid-template-columns:minmax(0,1fr)}
.post .media.n2,.post .media.n3{grid-template-columns:repeat(2,minmax(0,1fr))}
.post .media.n3 > :last-child:nth-child(odd){grid-column:1 / -1}
.post .media img{display:block;width:100%;height:auto;max-height:680px;object-fit:contain;background:#000;border-radius:0}
.post .media.n2 img,.post .media.n3 img{height:100%;aspect-ratio:1/1;object-fit:cover;max-height:none}
.vbox{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;min-width:0}
.vbox > video,.vbox .plyr,.vbox .plyr__video-wrapper{width:100%;height:100%}
.vbox > video{display:block;object-fit:contain;max-height:none;border-radius:0}
.vbox .plyr{border-radius:0}
.media .plyr video{max-height:none;object-fit:contain}
.verr{position:absolute;inset:0;z-index:6;display:grid;place-items:center;text-align:center;padding:18px;background:rgba(0,0,0,.85);color:#fff;font-size:.92rem;line-height:1.4}
@media (max-width:640px){
  .feed{gap:14px}
  .post-head{padding:12px 14px}
  .post .post-body{padding:0 14px 12px}
  .post .eng{padding:10px 14px 12px}
}

/* Links dentro dos textos dos canais e das publicações */
.post-body a,.chead-info a{color:rgb(var(--n2));text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere;word-break:break-word;-webkit-user-select:auto;user-select:auto;cursor:pointer}
.post-body a:hover,.chead-info a:hover{color:#fff}

/* ===== Painel: tema escuro (padrão) e botão de alternar ===== */
.adm-theme{display:block;width:calc(100% - 20px);margin:14px 10px 0;padding:9px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#d9cdbd;font:inherit;font-size:.9rem;text-align:left;cursor:pointer}
.adm-theme:hover{background:rgba(255,255,255,.08)}
html.adm-dark{color-scheme:dark}
html.adm-dark body.adm{
  --bg:#0e0a13;--surface:#17121f;--surface2:#211a2b;--text:#ece6f0;--muted:#a096ab;--line:#2d2538;--accent:#9b6bff;
  --danger:#ff6b66;--okc:#4cd08a;
}
html.adm-dark .adm-side{background:#07040b;border-right:1px solid #1d1627}
html.adm-dark .adm-side a.on{background:#9b6bff;color:#fff}
html.adm-dark .adm-brand{color:#fff}
html.adm-dark body.adm .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
html.adm-dark body.adm .btn.on{background:var(--accent);border-color:var(--accent);color:#fff}
html.adm-dark body.adm .alert.ok{background:rgba(76,208,138,.12)}
html.adm-dark body.adm .alert.err{background:rgba(255,107,102,.12)}
html.adm-dark body.adm .alert.warn{background:rgba(217,164,65,.14)}
html.adm-dark body.adm .note{background:var(--surface2) !important;color:var(--text)}
html.adm-dark body.adm code{background:rgba(255,255,255,.1)}
html.adm-dark body.adm .field input,html.adm-dark body.adm .field select,html.adm-dark body.adm .field textarea{background:#0e0a13;border-color:var(--line);color:var(--text)}
html.adm-dark body.adm .vb-warn{color:#e0b04a}
html.adm-dark body.adm .tbl th{color:var(--muted)}
html.adm-dark body.adm a{color:#b794ff}
html.adm-dark body.adm .btn,html.adm-dark body.adm .tab,html.adm-dark body.adm .gw-tab{color:var(--text)}
html.adm-dark body.adm .btn-primary{color:#fff}
html.adm-dark body.adm .gw-tab.on{box-shadow:0 0 0 1px var(--accent);border-color:var(--accent)}
html.adm-dark body.adm .post-adm{background:var(--bg)}
@media (max-width:820px){html.adm-dark .adm-side{border-right:0;border-bottom:1px solid #1d1627}}

/* Botão redondo para alternar o tema, fixo no canto da tela (aparece também no celular) */
.adm-theme-fab{position:fixed;right:16px;bottom:16px;z-index:60;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:1.3rem;line-height:1;cursor:pointer;box-shadow:0 6px 22px rgba(0,0,0,.4)}
.adm-theme-fab:hover{border-color:var(--accent)}
