/* Visual "vidro clean" do app (visual.js/style.css): grafite, cartões de vidro fosco, botões brancos com texto escuro.
   Carregado por último em todas as páginas; cor só onde informa (ok/aviso/erro). */
:root{--bg:#0b0c10;--bg1:#141519;--bg2:#1a1b20;--line:#23242a;--line2:#2e2f36;--text:#f4f5f7;--muted:#8e909b;
  --acc:#e9eaef;--accTx:#f4f5f7;--grad:linear-gradient(135deg,#f6f7f9 0%,#dfe0e6 100%);--glass:rgba(255,255,255,.035);--glassLine:rgba(255,255,255,.08)}
body{background:radial-gradient(700px 520px at 18% -5%,rgba(255,255,255,.07),transparent 70%),radial-gradient(700px 560px at 95% 105%,rgba(255,255,255,.04),transparent 70%),linear-gradient(160deg,#16171c,#0b0c10) fixed;color:var(--text)}
a{color:var(--text)}a:hover{opacity:.85}
nav.top{background:rgba(11,12,16,.6);border-bottom-color:var(--glassLine);backdrop-filter:blur(22px) saturate(150%)}
.card,.modal,.modalbg .modal,.price{background:var(--glass);border-color:var(--glassLine);backdrop-filter:blur(22px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 30px rgba(0,0,0,.18)}
.btn{border-color:var(--glassLine);border-radius:12px}.btn:hover{filter:none;background:rgba(255,255,255,.06)}
.btn.solid{background:var(--grad);color:#0b0c10;border-color:transparent;box-shadow:0 8px 24px rgba(0,0,0,.35)}.btn.solid:hover{filter:brightness(1.05);background:var(--grad)}
.hero{background:radial-gradient(60% 70% at 15% 0%,rgba(255,255,255,.08),transparent 70%)}
h1 span,.steps .card:before{background:linear-gradient(135deg,#fff,#a9abb6);-webkit-background-clip:text;background-clip:text;color:transparent}
.card .ic{background:rgba(255,255,255,.08);border:1px solid var(--glassLine);color:#d9dbe2}
.price.best{border-color:rgba(255,255,255,.28);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 20px 50px rgba(0,0,0,.35)}
.tabs button{background:var(--glass);border-color:var(--glassLine)}.tabs button.on{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.18)}
input,select,textarea,.modalbg input,.copy code{background:rgba(255,255,255,.04);border-color:var(--glassLine);color:var(--text)}
input:focus,select:focus,textarea:focus{border-color:rgba(255,255,255,.35)}
#toast{background:rgba(26,27,32,.9);border-color:rgba(255,255,255,.18);backdrop-filter:blur(22px)}
.bars i{background:linear-gradient(180deg,#f4f5f7,#8e909b)}
.modalbg a{color:var(--text)}.modalbg label,.modalbg .muted{color:var(--muted)}
/* tela de login (Minha conta / afiliado) */
.login{max-width:420px;margin:72px auto;padding:34px 30px 26px;border-radius:22px;text-align:center}
.glass{background:var(--glass);border:1px solid var(--glassLine);backdrop-filter:blur(22px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 20px 60px rgba(0,0,0,.35)}
.lgLogo{width:52px;height:52px;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.login h2{margin:16px 0 6px;font-size:24px;letter-spacing:-.02em}.lgSub{margin:0 0 24px;font-size:14.5px}
.login label{text-align:left;margin-top:4px}.login label b{color:var(--text);font-weight:600}
.login input{padding:13px 14px;border-radius:12px;margin:8px 0 14px}
.login .btn{width:100%;padding:13px}
.lgCode{text-align:center;font-size:26px!important;letter-spacing:.5em;font-weight:700}
.lgGoogle{display:flex;justify-content:center;min-height:44px}
.lgOu{display:flex;align-items:center;gap:12px;margin:20px 0 16px;color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}.lgOu:before,.lgOu:after{content:"";flex:1;height:1px;background:var(--glassLine)}
.lgVoltar{background:none;border:0;color:var(--muted);font:inherit;font-size:13px;margin-top:12px;cursor:pointer}.lgVoltar:hover{color:var(--text)}
.lgRodape{margin:18px 0 0;line-height:1.5}.lgRodape a{text-decoration:underline}
nav.top .r a{color:var(--muted);text-decoration:none;padding:7px 12px;border-radius:999px}nav.top .r a:hover{color:var(--text);background:rgba(255,255,255,.06)}