/* Conta, planos, textos legais, rodapé e cadeados dos casos pagos. Usa os tokens de cor de app.css. */
#page-conta { padding: 36px clamp(16px, 4vw, 56px) 40px; }
.conta-wrap { max-width: 460px; margin: 0 auto; }
.conta-wrap.largo { max-width: 980px; }
.conta-cartao { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 26px 26px 22px; }
.conta-cartao h1, .conta-wrap > h1, .conta-topo h1 { margin: 0 0 14px; font-size: 24px; letter-spacing: -.3px; }
.conta-cartao > p { line-height: 1.55; }
.lead { color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 680px; margin: 0 0 24px; }

/* formulários */
.form-conta { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-weight: 600; font-size: 13px; }
.campo-input, .campo input[type=text], .campo input[type=email] { width: 100%; background: var(--bg2); border: 1px solid var(--line2);
  border-radius: 5px; padding: 10px 12px; font-size: 14.5px; color: var(--text); outline: none; }
.campo-input:focus { border-color: var(--accent); }
.campo-senha { position: relative; display: flex; }
.campo-senha .campo-input { padding-right: 76px; }
.campo-ver { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--accent);
  font-size: 12px; font-weight: 600; cursor: pointer; padding: 6px 8px; border-radius: 6px; }
.campo-dica { color: var(--dim); font-size: 12px; line-height: 1.4; }
.form-erro { margin: 0; padding: 9px 12px; border-radius: 5px; border: 1px solid rgba(255, 92, 122, .45); background: rgba(255, 92, 122, .1);
  color: #ffc2cd; font-size: 13px; line-height: 1.45; }
.btn.largo { width: 100%; padding: 11px 16px; font-size: 14.5px; }
.aceite { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.aceite input { margin-top: 3px; width: 16px; height: 16px; flex: none; }
.conta-links { margin: 16px 0 0; text-align: center; color: var(--muted); font-size: 13px; }

/* avisos */
.conta-aviso { border-radius: 6px; padding: 10px 13px; font-size: 13.5px; line-height: 1.5; margin: 0 0 14px; border: 1px solid var(--line2); background: var(--panel2); }
.conta-aviso.ok { border-color: rgba(61, 220, 151, .5); background: rgba(61, 220, 151, .1); color: #b6f5d8; }
.conta-aviso.info { border-color: var(--line2); background: var(--panel2); color: var(--text); }
.conta-aviso.erro { border-color: rgba(255, 92, 122, .45); background: rgba(255, 92, 122, .1); color: #ffc2cd; }

/* minha conta */
.conta-wrap:has(.conta-secoes) { max-width: 720px; }
.conta-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.conta-topo h1 { margin: 0; }
.conta-secoes { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.conta-sec { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; }
.conta-sec h2 { margin: 0 0 10px; font-size: 16px; }
.conta-sec h3 { margin: 18px 0 4px; font-size: 13.5px; }
.conta-sec p { margin: 0 0 10px; line-height: 1.5; }
.conta-sec .form-conta { max-width: 420px; }
.conta-det { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.conta-det summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: 4px 0; }
.conta-det.perigo summary { color: var(--danger); }
.conta-det[open] summary { margin-bottom: 8px; }
.sessoes { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sessoes li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg2); font-size: 13px; }
.sessoes em { color: var(--ok); font-style: normal; font-weight: 600; }
.sessoes small { color: var(--dim); }

/* planos */
.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; align-items: stretch; }
/* página de planos: título gigante atrás, cartões de vidro por cima (o título aparece desfocado através deles) */
.planos-pag { max-width: 1180px; }
.planos-pag .lead { text-align: center; max-width: 60ch; margin: 8px auto 0; color: var(--muted); }
.planos-pag > h1 { font-size: clamp(76px, 13vw, 210px); line-height: .9; letter-spacing: -.055em; font-weight: 700; text-align: center;
  margin: 18px 0 32px; color: #f2f2f2; }   /* inteiro à vista: os cartões ficam abaixo, sem cobrir as letras */
.planos-pag .planos { position: relative; }
.plano { background: rgba(40, 40, 40, .42); -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 60px rgba(0, 0, 0, .35);
  border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.plano.destaque { border-color: rgba(255, 255, 255, .28); }
.plano h2 { margin: 0; font-size: 17px; }
.preco { margin: 0; display: flex; align-items: baseline; gap: 4px; }
.preco b { font-size: 36px; font-weight: 700; letter-spacing: -1.2px; font-variant-numeric: tabular-nums; }
.preco span { color: var(--muted); }
.selo { margin: 0; align-self: flex-start; font-size: 12.5px; font-weight: 500; color: var(--ok); }
.plano-lista { margin: 4px 0 8px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.plano-lista li { position: relative; padding-left: 24px; line-height: 1.45; font-size: 13.5px; }
.plano-lista li::before { content: '—'; position: absolute; left: 2px; top: 0; color: var(--dim); }
.plano-notas { margin-top: 24px; color: var(--muted); font-size: 13px; line-height: 1.55; max-width: 760px; }
.plano-notas p { margin: 0 0 8px; }
.plano-notas b { color: var(--text); }

/* termos e privacidade */
.conta-wrap.legal { max-width: 760px; line-height: 1.65; }
.legal h1 { font-size: 28px; margin: 6px 0 16px; }
.legal h2 { font-size: 16px; margin: 26px 0 8px; }
.legal p, .legal li { color: var(--muted); font-size: 14px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal .destaque { color: var(--warn); font-weight: 600; }

/* topo: conta */
.top-right { display: flex; align-items: center; gap: 8px; }
.conta-chip { display: inline-flex; align-items: center; gap: 8px; color: var(--text); padding: 3px 10px 3px 3px; border-radius: 6px;
  border: 1px solid var(--line2); background: var(--panel); font-weight: 600; font-size: 13px; }
.conta-chip:hover { border-color: var(--accent); }
.avatar { width: 24px; height: 24px; border-radius: 4px; display: grid; place-items: center; font-weight: 600; font-size: 12px; color: var(--text);
  background: var(--line2); }

/* cadeados nos cartões */
.cadeado { position: absolute; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 4px; background: rgba(8, 10, 16, .82); border: 1px solid rgba(255, 201, 60, .45);
  color: #ffe7a6; padding: 2px 7px; border-radius: 3px; font-size: 11.5px; font-weight: 500; }
.cadeado.livre { border-color: rgba(61, 220, 151, .5); color: #9ff3cd; }
.case-card.bloqueado .case-thumb { filter: saturate(.6) brightness(.8); }
.mini-case.bloqueado .mini-thumb { filter: saturate(.6) brightness(.8); }

/* rodapé */
.inicio-corpo .rodape { max-width: none; }
.rodape { max-width: 1120px; margin: 48px auto 0; padding-top: 18px; border-top: 1px solid var(--line); display: flex;
  justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; color: var(--dim); font-size: 12.5px; }
.rodape nav { display: flex; gap: 16px; flex-wrap: wrap; }
.rodape a { color: var(--muted); }
.rodape a:hover { color: var(--text); }

@media (max-width: 900px) {
  .conta-nome { display: none; }
  .conta-cartao { padding: 20px 16px; }
  .top-right .btn.small { padding: 5px 8px; }
}

/* código de 6 dígitos */
.campo-codigo { font-size: 22px !important; letter-spacing: 8px; font-variant-numeric: tabular-nums; text-align: center;
  font-family: var(--mono); }
.codigo-dev { font-size: 16px; letter-spacing: 3px; font-family: var(--mono); }
.conta-links.row { justify-content: center; }

/* página não encontrada */
.nao-encontrada { text-align: center; padding: 40px 0; }
.nao-encontrada .codigo-erro { font-family: var(--mono); font-size: 56px; font-weight: 600; letter-spacing: -2px; color: var(--accent); margin: 0; }
.nao-encontrada .row { justify-content: center; margin-top: 18px; }

/* contraste AA: o cartão passa sobre as letras claras do título gigante */
.plano { background: rgba(20, 20, 20, .78); }
.plano .muted, .plano .preco span { color: #c4c4c4; }