/* Paginas do site (inicio, conta, biblioteca, planos, painel).
   As CORES vem de /assets/tema.css -- o mesmo tema das ferramentas.
   Aqui so o desenho das paginas; nenhuma cor nova. */
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--text);font-family:var(--body);min-height:100vh;
     display:flex;flex-direction:column;line-height:1.5}
a{color:var(--accent)}
header.site{height:56px;display:flex;align-items:center;gap:18px;padding:0 18px;background:var(--chrome)}
header.site .logo{display:flex;align-items:center;gap:10px;text-decoration:none}
header.site .logo img{width:30px;height:30px;display:block}
header.site .logo b{font-family:var(--disp);font-weight:600;font-size:21px;color:#fff}
header.site nav{display:flex;gap:16px;flex:1}
header.site nav a,header.site .conta a{color:#fff;text-decoration:none;font-weight:600;font-size:15px;opacity:.9}
header.site nav a:hover,header.site .conta a:hover{opacity:1;text-decoration:underline}
header.site .conta{display:flex;gap:14px;align-items:center}
@media (max-width:720px){ header.site nav{display:none} }

main{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:40px 20px 72px}
h1.titulo{font-family:var(--disp);font-weight:600;font-size:clamp(26px,4vw,36px);line-height:1.15;margin-bottom:8px}
p.sub{color:var(--muted);margin-bottom:28px;max-width:40em}
h2{font-family:var(--disp);font-weight:600;font-size:22px;margin:32px 0 14px}

.cartao{background:var(--panel);border:2px solid var(--border);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sombra)}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--border);
     background:var(--panel2);color:var(--text);font:600 15px var(--body);padding:10px 18px;
     border-radius:var(--r-pill);cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--accent)}
.btn.principal{background:var(--cta);border-color:var(--cta-edge);color:var(--cta-tx)}
.btn.azul{background:var(--accent);border-color:var(--accent);color:var(--accent-tx)}
.btn:disabled{opacity:.5;cursor:default}
.btn.largo{width:100%}

label.campo{display:block;margin:12px 0 4px;font-weight:600;font-size:14px}
input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{
  width:100%;padding:10px 12px;border:2px solid var(--border);border-radius:var(--r-sm);
  background:var(--panel2);color:var(--text);font:15px var(--body)}
textarea{min-height:80px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}

.msg{padding:10px 14px;border-radius:var(--r-sm);margin:12px 0;font-size:14px}
.msg.erro{background:var(--erro-bg);border:1px solid var(--erro-bd);color:var(--erro-tx)}
.msg.ok{background:var(--ok-bg);border:1px solid var(--ok-bd);color:var(--ok-tx)}
.msg.aviso{background:var(--aviso-bg);border:1px solid var(--aviso-bd);color:var(--aviso-tx)}
.muted{color:var(--muted)}
.selo{display:inline-block;background:var(--brilho);border-radius:var(--r-pill);padding:2px 10px;font-size:12px;font-weight:700}
.preco{font-family:var(--disp);font-size:22px;font-weight:600}
.foto{aspect-ratio:4/3;background:var(--stage);border-radius:var(--r-md);overflow:hidden;margin-bottom:12px;
      display:flex;align-items:center;justify-content:center;color:var(--muted)}
.foto img{width:100%;height:100%;object-fit:cover}
.ou{display:flex;align-items:center;gap:10px;color:var(--muted);margin:16px 0;font-size:14px}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--border)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px;border-bottom:1px solid var(--border);vertical-align:top}
footer.site{padding:24px;text-align:center;color:var(--muted);font-size:13px}