:root {
  --fundo: #f3f5f9; --cartao: #fff; --tinta: #16213a; --suave: #5b6578; --linha: #dde2ea;
  --cor: #1d3557; --cor-clara: #e8eef6; --destaque: #2a9d6f; --erro: #b3261e; --raio: 12px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .05), 0 2px 8px rgba(0, 0, 0, .05);
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tinta); background: var(--fundo); }
[hidden] { display: none !important; }
h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 1.25rem 0 .5rem; color: var(--suave); }

.topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; background: var(--cor); color: #fff; }
.marca { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.marca strong { display: block; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca span { font-size: .8rem; opacity: .8; }
.logo { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #fff; color: var(--cor); font-weight: 800; letter-spacing: -.5px; flex: none; }
.btn-sair { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .5); border-radius: 8px; padding: .4rem .8rem; font: inherit; cursor: pointer; }

.abas { display: flex; overflow-x: auto; background: #fff; border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 2; }
.abas button { flex: 1; min-width: 6.5rem; padding: .85rem .5rem; border: 0; background: none; font: inherit; font-weight: 600; color: var(--suave); border-bottom: 3px solid transparent; cursor: pointer; }
.abas button[aria-selected="true"] { color: var(--cor); border-bottom-color: var(--cor); }

.central { min-height: 70vh; display: grid; place-items: center; padding: 1rem; }
.conteudo { max-width: 760px; margin: 0 auto; padding: 1rem; display: grid; gap: 1rem; }
.cartao { background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.25rem; }
.estreito { width: 100%; max-width: 420px; }
.dica { color: var(--suave); font-size: .92rem; margin: 0 0 .9rem; }
.dica-cartao { background: var(--cor-clara); box-shadow: none; }
.dica-cartao p { margin: 0; }

.campo { display: grid; gap: .3rem; margin-bottom: .85rem; font-size: .9rem; font-weight: 600; color: var(--suave); }
.campo input, .campo select, .campo textarea { font: inherit; font-weight: 400; color: var(--tinta); padding: .65rem .75rem; border: 1px solid var(--linha); border-radius: 10px; background: #fff; width: 100%; }
.campo textarea { resize: vertical; }
.campo :focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid #7aa7d9; outline-offset: 1px; }
.check { display: flex; align-items: center; gap: .5rem; margin-bottom: .85rem; }
.check input { width: 1.2rem; height: 1.2rem; }
.grade2 { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .grade2 { grid-template-columns: 1fr; } }

.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .25rem; }
.btn-primario, .btn-secundario { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55rem 1rem; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn-primario { background: var(--cor); color: #fff; border: 1px solid var(--cor); }
.btn-primario:disabled { opacity: .6; cursor: wait; }
.btn-secundario { background: #fff; color: var(--cor); border: 1px solid var(--cor); }
.btn-link { background: none; border: 0; color: var(--cor); font: inherit; text-decoration: underline; cursor: pointer; padding: .5rem; min-height: 44px; }
.largo { width: 100%; }
#form-entrar .btn-link { display: block; margin: .25rem auto 0; }

.status, .msg { font-size: .9rem; color: var(--destaque); }
.status.erro, .msg.erro { color: var(--erro); }
.resposta { white-space: pre-wrap; font: inherit; font-size: .95rem; background: var(--fundo); border-radius: 10px; padding: 1rem; margin: 1rem 0 .5rem; }

.gravar { display: grid; justify-items: center; gap: .4rem; margin: .5rem 0 0; }
.btn-audio { display: inline-flex; align-items: center; gap: .5rem; min-height: 64px; padding: .8rem 1.6rem; border-radius: 40px; border: 0; background: var(--destaque); color: #fff; font: inherit; font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.btn-audio[aria-pressed="true"] { background: var(--erro); animation: pulsar 1.2s ease-in-out infinite; }
.btn-audio:disabled { opacity: .6; cursor: wait; }
@keyframes pulsar { 50% { box-shadow: 0 0 0 10px rgba(179, 38, 30, .15); } }
@media (prefers-reduced-motion: reduce) { .btn-audio[aria-pressed="true"] { animation: none; } }
.ou { text-align: center; color: var(--suave); font-size: .85rem; margin: 1rem 0 .5rem; }
.item { border-top: 1px solid var(--linha); padding: .9rem 0; }
.item:first-child { border-top: 0; }
.item-topo { display: flex; justify-content: space-between; gap: 1rem; }
.item-topo span { font-weight: 700; white-space: nowrap; }
.itens { margin: .35rem 0; padding-left: 1.1rem; color: var(--suave); font-size: .92rem; }
.info { color: var(--suave); font-size: .88rem; margin-top: .2rem; }
.selo { font-size: .72rem; font-weight: 600; background: var(--cor-clara); color: var(--cor); border-radius: 6px; padding: .1rem .4rem; vertical-align: middle; }
.vazio { color: var(--suave); text-align: center; padding: 1rem 0; }