/* Visual compartilhado das páginas logadas (área do cliente, app no navegador, painel admin) — o mesmo do app */
:root{
  --bg:#0F1115; --bg2:#0B0D10; --card:#181B22; --card2:#20242D; --line:#2C313C;
  --txt:#EEF1F6; --dim:#C4CAD6; --muted:#8A93A6; --accent:#FF7A1A; --accent2:#E0650A; --red:#E5484D; --green:#3DD68C;
  --yellow:#F2C14E; --blue:#6C8CFF; --glass:rgba(24,27,34,.9); --stroke:rgba(255,255,255,.08); --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{background:var(--bg);color:var(--txt);font-family:Inter,"Segoe UI",system-ui,sans-serif;line-height:1.5;font-size:15px}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
.mono{font-family:"JetBrains Mono",Consolas,monospace}
.i{width:18px;height:18px;flex:none;vertical-align:middle}
[hidden]{display:none!important}

/* fundo: cena dos magos escurecida (como no app) */
.fundo{position:fixed;inset:0;z-index:-2;background:#000 url(/midia/magos.jpg) center/cover}
.fundo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fundo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,12,.78),rgba(8,9,12,.62) 40%,rgba(8,9,12,.85))}

/* topo no estilo do app: logo, menu com traço neon */
.topo{position:sticky;top:0;z-index:40;background:rgba(8,9,12,.82);border-bottom:1px solid rgba(255,255,255,.07)}
.topo .in{max-width:1180px;margin:0 auto;padding:0 18px;height:62px;display:flex;align-items:center;gap:18px}
.logo{display:flex;align-items:center;gap:9px;font-weight:900;font-size:19px;color:var(--accent);letter-spacing:.2px;white-space:nowrap}
.logo svg{width:26px;height:26px}
.menu{display:flex;gap:2px;position:relative;align-self:stretch;align-items:center;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.menu::-webkit-scrollbar{display:none}
.menu a,.menu button{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:10px;border:1px solid transparent;background:none;
  font-size:14px;font-weight:600;color:rgba(238,241,246,.75);cursor:pointer;white-space:nowrap;transition:.15s}
.menu a:hover,.menu button:hover{color:var(--accent);background:rgba(255,122,26,.1);border-color:rgba(255,122,26,.42)}
.menu .on{color:#fff}
.menu .traco{position:absolute;bottom:8px;height:2px;border-radius:2px;background:var(--accent);box-shadow:0 0 10px var(--accent);
  transition:left .3s cubic-bezier(.2,.8,.2,1),width .3s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.topo .dir{display:flex;align-items:center;gap:8px;margin-left:auto}
.badge{font-size:11px;font-weight:800;padding:5px 11px;border-radius:99px;background:var(--card);color:var(--muted);white-space:nowrap}
.badge.premium{color:#111;background:var(--accent)}
.badge.ok{color:var(--green)}

/* blocos */
.pagina{max-width:1180px;margin:0 auto;padding:26px 18px 60px}
.card{background:var(--glass);border:1px solid var(--stroke);border-radius:var(--r);padding:20px}
.card h2{font-size:17px;font-weight:800;display:flex;align-items:center;gap:9px;margin-bottom:12px}
.card h2 .i{color:var(--accent)}
.grade{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sub{color:var(--muted);font-size:13.5px}
.rot{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.big{font-size:44px;font-weight:800;line-height:1.1}
.prog{height:6px;background:var(--card2);border-radius:9px;overflow:hidden;margin:8px 0}
.prog i{display:block;height:100%;width:0;background:var(--accent);border-radius:9px;transition:width .3s linear}
.linha{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.esp{flex:1}
.crit{color:var(--red)!important}

/* botões e campos */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;font-weight:800;font-size:14px;
  padding:11px 18px;cursor:pointer;border:1px solid transparent;transition:transform .12s,background .15s,border-color .15s,color .15s;white-space:nowrap}
.btn:disabled{opacity:.55;cursor:default}
.btn-p{background:var(--accent);color:#111}.btn-p:hover:not(:disabled){background:#FF8A33}
.btn-s{background:transparent;color:var(--txt);border-color:var(--line)}
.btn-s:hover:not(:disabled){color:var(--accent);border-color:rgba(255,122,26,.55);background:rgba(255,122,26,.07)}
.btn-r{background:transparent;color:var(--red);border-color:rgba(229,72,77,.45)}.btn-r:hover{background:rgba(229,72,77,.1)}
.btn-sm{padding:7px 12px;font-size:12.5px}
.btn-w{width:100%}
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.campo label{font-size:12.5px;font-weight:700;color:var(--dim)}
.campo input,.campo select,input.in{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;outline:none;min-width:0}
.campo input:focus,input.in:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,122,26,.18)}
select{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.seg{display:inline-flex;background:var(--card2);border-radius:10px;padding:3px;gap:3px}
.seg button{border:0;background:none;padding:7px 14px;border-radius:8px;font-weight:700;font-size:13px;color:var(--dim);cursor:pointer}
.seg button.on{background:var(--accent);color:#111}
.chave{position:relative;width:38px;height:22px;border-radius:99px;background:#3a3f4b;cursor:pointer;flex:none;border:0;transition:.2s}
.chave:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#E6E9EF;transition:.2s}
.chave.on{background:var(--accent)}.chave.on:after{left:19px}
.erro{color:var(--red);font-size:13px;min-height:18px;margin-top:4px}
.ok{color:var(--green)}

/* tabela */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:10px 10px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06);white-space:nowrap}
th{color:var(--muted);font-size:11.5px;letter-spacing:.8px;text-transform:uppercase;font-weight:800}
tbody tr:hover{background:rgba(255,255,255,.025)}
.tabela{overflow-x:auto}
.tag{display:inline-block;font-size:11px;font-weight:800;padding:3px 8px;border-radius:99px;background:var(--card2);color:var(--muted)}
.tag.pr{background:rgba(255,122,26,.15);color:var(--accent)}.tag.vd{background:rgba(61,214,140,.12);color:var(--green)}
.tag.vm{background:rgba(229,72,77,.13);color:var(--red)}

/* avisos e janelas */
#avisos{position:fixed;right:16px;bottom:16px;z-index:99;display:flex;flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 32px))}
.aviso{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:11px 14px;
  font-size:13.5px;box-shadow:0 14px 30px -10px rgba(0,0,0,.7);animation:entra .25s}
.aviso.erro-a{border-left-color:var(--red)}
@keyframes entra{from{opacity:0;transform:translateY(8px)}}
.modal{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.7);display:grid;place-items:center;padding:16px}
.modal h2{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:800;margin-bottom:8px}
.modal h2 .i{color:var(--accent)}
.modal .caixa{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto}

@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}.big{font-size:38px}.topo .in{gap:10px}.logo span{display:none}
  .menu a span,.menu button span{display:none}.menu a,.menu button{padding:7px 8px}.topo .dir .badge{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}