:root { --fundo:#0b1020; --cartao:#121a30; --borda:#24304f; --texto:#e8ecf6; --suave:#9aa6c4; --acento:#7c5cff; --acento2:#22d3ee; --erro:#ff6b7a; --aviso:#fbbf24; }
* { box-sizing: border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--fundo); color:var(--texto); font:16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.topo { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--borda); flex-wrap:wrap; }
.marca strong { display:block; letter-spacing:.04em; background:linear-gradient(90deg,var(--acento),var(--acento2)); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:1.15rem; }
.marca span { color:var(--suave); font-size:.85rem; }
.selo { font-size:.8rem; padding:4px 10px; border-radius:999px; border:1px solid var(--acento2); color:var(--acento2); }
.selo.off { border-color:var(--erro); color:var(--erro); }
main { max-width:960px; margin:0 auto; padding:20px 16px 40px; display:grid; gap:20px; }
.cartao { background:var(--cartao); border:1px solid var(--borda); border-radius:14px; padding:22px; }
h1 { margin:0 0 6px; font-size:1.45rem; } h2 { margin:0 0 4px; font-size:1.25rem; } h3 { font-size:1rem; margin:18px 0 6px; }
.sub { color:var(--suave); margin:0 0 16px; }
label { display:block; font-size:.9rem; color:var(--suave); margin-bottom:12px; }
label small { float:right; }
input, select, textarea { width:100%; margin-top:4px; padding:10px 12px; border-radius:10px; border:1px solid var(--borda); background:#0d1428; color:var(--texto); font:inherit; }
textarea { resize:vertical; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--acento); border-color:transparent; }
.grade { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 14px; }
button { border:0; border-radius:10px; padding:11px 18px; font:inherit; font-weight:600; cursor:pointer; color:#fff; background:linear-gradient(90deg,var(--acento),#5b8cff); }
button:disabled { opacity:.5; cursor:not-allowed; }
button.sec { background:transparent; border:1px solid var(--borda); color:var(--texto); font-weight:500; padding:8px 12px; font-size:.88rem; }
.msg { min-height:1.4em; margin:10px 0 0; color:var(--suave); } .msg.erro { color:var(--erro); }
.cab-resultado { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.acoes { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-start; }
.aviso { border-left:3px solid var(--aviso); padding:8px 12px; background:rgba(251,191,36,.08); color:#f5deb0; font-size:.88rem; border-radius:6px; }
.avisos { color:var(--aviso); font-size:.9rem; padding-left:20px; }
.avisos:empty { display:none; }
.cenas { list-style:none; padding:0; margin:16px 0; display:grid; gap:12px; }
.cena { border:1px solid var(--borda); border-radius:12px; padding:14px; background:#0e1529; }
.cena p { margin:6px 0; overflow-wrap:anywhere; }
.cena-cab { font-weight:700; color:var(--acento2); }
.cena .prompt { font-family:ui-monospace, Consolas, monospace; font-size:.83rem; color:var(--suave); }
.meta { color:var(--suave); font-size:.82rem; }
.rodape { text-align:center; color:var(--suave); font-size:.82rem; padding:18px; border-top:1px solid var(--borda); }
.usuario { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.usuario .conta { color:var(--suave); font-size:.88rem; }
.entrada { max-width:420px; width:100%; margin:24px auto 0; }
.esqueci-linha { display:flex; justify-content:flex-end; margin:-4px 0 14px; }
button.link { background:none; border:0; padding:4px 0; color:var(--acento2); font-weight:500; font-size:.88rem; }
.entrada form > button[type=submit] { width:100%; }
.entrada .link#voltar-login { display:block; margin:12px auto 0; }
.centro { text-align:center; }
.pacotes { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:14px; }
.pacote { display:grid; gap:2px; border:1px solid var(--borda); border-radius:12px; padding:12px; margin:0; cursor:pointer; color:var(--texto); background:#0e1529; }
.pacote input { width:auto; margin:0 0 4px; accent-color:var(--acento); }
.pacote span { font-size:1.15rem; font-weight:700; }
.pacote small { color:var(--suave); }
.pacote:has(input:checked) { border-color:var(--acento); box-shadow:0 0 0 1px var(--acento); }
#compra .acoes { margin-top:4px; }
.msg a { color:var(--acento2); }