:root {
  --fundo: #eceeea;
  --papel: #f6f5f1;
  --superficie: #ffffff;
  --linha: #dfe3df;
  --tinta: #1e2a2d;
  --suave: #5d6a6e;
  --fraco: #8b9598;
  --acento: #2f7d74;
  --acento-claro: #e2f1ee;
  --acento-tinta: #1f5d56;
  --erro: #b4461f;
  --erro-claro: #fce9e2;
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --texto: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta); font: 400 15px/1.5 var(--texto);
  -webkit-text-size-adjust: 100%; overflow-x: hidden;
}
button, input { font: inherit; color: inherit; }
a { color: var(--acento-tinta); }

/* ---------- papel de parede: mapa de centralidades (desenhado por login.js) ---------- */
#mapa { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
#mapa .via { fill: none; stroke: #c3cbc7; stroke-width: 1.1; stroke-linecap: round; }
#mapa .anel-via { fill: none; stroke: #cdd4d0; stroke-width: 1; stroke-dasharray: 2 7; }
#mapa .no { fill: #b6c1bc; }
#mapa .centro-no { fill: var(--acento); opacity: .75; }
#mapa .anel { fill: none; stroke: var(--acento); stroke-width: 1; opacity: .22; transform-box: fill-box; transform-origin: center; }
#mapa .anel.fraco { stroke: #9fb0aa; opacity: .35; }
#mapa .pulso { animation: pulso 6s ease-in-out infinite; animation-delay: var(--atraso, 0s); }
@keyframes pulso { 0%, 100% { transform: scale(1); opacity: .22; } 50% { transform: scale(1.08); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { #mapa .pulso { animation: none; } }

/* ---------- cartão ---------- */
.centro {
  position: relative; z-index: 1; min-height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 18px; padding: 28px 16px;
}
.cartao {
  width: 100%; max-width: 420px; background: color-mix(in srgb, var(--superficie) 94%, transparent);
  backdrop-filter: blur(8px); border: 1px solid var(--linha); border-radius: 22px; padding: 30px 30px 26px;
  box-shadow: 0 1px 2px rgb(30 42 45 / .05), 0 18px 48px rgb(30 42 45 / .10); animation: entra .45s both;
}
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .cartao { animation: none; } }

.marca { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.marca svg { width: 52px; height: 52px; }
.marca .fundo { fill: var(--acento); }
.marca .arco { fill: none; stroke: #9fd3c9; stroke-width: 2; stroke-dasharray: 2.5 3; stroke-linecap: round; }
.marca .haste { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; }
.marca .cabeca { fill: #fff; }
.marca .regua { stroke: #f3c9a8; stroke-width: 2.6; stroke-linecap: round; }
.marca h1 { font: 700 30px/1 var(--display); margin: 0; letter-spacing: -.025em; }
.marca p { margin: 4px 0 0; color: var(--suave); font-size: 13.5px; }

h2 { font: 700 21px/1.2 var(--display); margin: 0 0 14px; letter-spacing: -.015em; }
label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; color: var(--suave); }
input[type="text"], input[type="password"], input[type="email"] {
  width: 100%; height: 46px; padding: 0 14px; border: 1px solid #cfd5d0; border-radius: 11px; background: #fff;
  font-size: 16px; transition: border-color .15s, box-shadow .15s;
}
input:focus-visible { outline: 0; border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-claro); }
input[readonly] { background: #f1f3f1; color: var(--suave); }
input.codigo { text-align: center; font: 700 26px/1 ui-monospace, Consolas, monospace; letter-spacing: .4em; padding-left: .4em; }

.senha { position: relative; }
.senha input { padding-right: 46px; }
.olho {
  position: absolute; right: 4px; top: 4px; width: 38px; height: 38px; border: 0; border-radius: 9px; background: none; cursor: pointer;
  background: no-repeat center / 20px url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9598' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/><circle cx='12' cy='12' r='3'/></svg>");
}
.olho:hover { background-color: #f1f3f1; }
.olho.ativo { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17.9 17.9A10.1 10.1 0 0 1 12 19c-6.4 0-10-7-10-7a18 18 0 0 1 5.1-5.9M9.9 4.2A9.7 9.7 0 0 1 12 4c6.4 0 10 8 10 8a18 18 0 0 1-2.2 3.2M1 1l22 22'/></svg>"); }
.olho:focus-visible { outline: 2px solid var(--acento); }

.botao {
  width: 100%; height: 48px; margin-top: 18px; border: 0; border-radius: 12px; background: var(--acento); color: #fff;
  font-weight: 600; font-size: 16px; cursor: pointer; transition: background .15s, transform .1s;
}
.botao:hover { background: var(--acento-tinta); }
.botao:active { transform: translateY(1px); }
.botao:focus-visible { outline: 3px solid var(--acento-claro); outline-offset: 2px; }
.botao[disabled] { opacity: .65; cursor: progress; }

.erro { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--erro-claro); color: var(--erro); font-size: 14px; }
.erro[hidden] { display: none; }
.erro.visivel { margin-top: 0; }
.dica { margin: 0 0 4px; color: var(--suave); font-size: 14px; }
.dica.ok { color: var(--acento-tinta); background: var(--acento-claro); padding: 10px 14px; border-radius: 10px; margin-bottom: 8px; }
.dica.pequena { font-size: 12.5px; color: var(--fraco); margin: 6px 0 0; }
.nota { margin: 18px 0 0; font-size: 12.5px; color: var(--fraco); text-align: center; }
.links { margin: 16px 0 0; text-align: center; font-size: 14px; }
.links a { font-weight: 500; }
a[aria-disabled="true"] { color: var(--fraco); pointer-events: none; text-decoration: none; }
.carregando { color: var(--fraco); text-align: center; margin: 24px 0; }
[hidden] { display: none !important; }

.marca-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--tinta); margin: 16px 0 0; cursor: pointer; font-size: 13.5px; }
.marca-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--acento); flex: none; }

.forca { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; }
.forca i { height: 4px; border-radius: 4px; background: #e2e6e2; transition: background .2s; }
.forca[data-n="1"] i:nth-child(-n+1) { background: #d8643a; }
.forca[data-n="2"] i:nth-child(-n+2) { background: #d9a23a; }
.forca[data-n="3"] i:nth-child(-n+3) { background: #7fb069; }
.forca[data-n="4"] i { background: var(--acento); }

.rodape { margin: 0; font-size: 12.5px; color: var(--fraco); text-align: center; }

@media (max-width: 480px) {
  .cartao { padding: 24px 20px 22px; border-radius: 18px; }
  .marca h1 { font-size: 26px; }
}