:root {
  --bg: #010605;
  --ciano: #5eead4;
  --ciano-forte: #2dd4bf;
  --ciano-texto: #ccfbf1;
  --ouro: #ffc861;
  --erro: #fca5a5;
  --muted: rgba(204, 251, 241, 0.55);
  --linha: rgba(94, 234, 212, 0.14);
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body { background: var(--bg); color: var(--ciano-texto); font-family: 'Space Grotesk', system-ui, sans-serif; }
canvas#cena { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
body.sem-3d { background: radial-gradient(ellipse at 70% 40%, rgba(45,212,191,.18), transparent 55%), var(--bg); }
body.sem-3d canvas#cena { display: none; }
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); opacity: .35; }
.veu { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: rgba(1, 6, 5, .74); }
.pagina { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; padding: 22px clamp(16px, 4vw, 48px) 26px; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
.marca { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .28em; color: var(--ciano-texto); text-decoration: none; }
.marca svg { width: 22px; height: 22px; color: var(--ciano); filter: drop-shadow(0 0 6px rgba(94,234,212,.6)); }
.acoes-topo { display: flex; gap: 10px; }
.holo { position: relative; border: 1px solid rgba(94,234,212,.2); background-color: rgba(2,14,12,.62); backdrop-filter: blur(14px);
  --c: var(--ciano);
  background-image: linear-gradient(var(--c),var(--c)), linear-gradient(var(--c),var(--c)), linear-gradient(var(--c),var(--c)), linear-gradient(var(--c),var(--c)),
    linear-gradient(var(--c),var(--c)), linear-gradient(var(--c),var(--c)), linear-gradient(var(--c),var(--c)), linear-gradient(var(--c),var(--c));
  background-repeat: no-repeat;
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%; }
.holo-btn { --c: var(--ciano); font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ciano-texto);
  text-decoration: none; padding: 10px 16px; cursor: pointer; border: 1px solid rgba(94,234,212,.22); background-color: rgba(45,212,191,.05);
  background-image: linear-gradient(var(--c),var(--c)), linear-gradient(var(--c),var(--c)), linear-gradient(var(--c),var(--c)), linear-gradient(var(--c),var(--c)),
    linear-gradient(var(--c),var(--c)), linear-gradient(var(--c),var(--c)), linear-gradient(var(--c),var(--c)), linear-gradient(var(--c),var(--c));
  background-repeat: no-repeat; background-size: 8px 1px, 1px 8px, 8px 1px, 1px 8px, 8px 1px, 1px 8px, 8px 1px, 1px 8px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  transition: background-color .2s, box-shadow .2s, color .2s; }
.holo-btn:hover, .holo-btn:focus-visible { background-color: rgba(45,212,191,.16); color: #fff; outline: none; box-shadow: 0 0 20px -4px rgba(45,212,191,.55); }
.holo-btn.perigo { --c: #f87171; color: var(--erro); }
.holo-btn[disabled] { opacity: .45; cursor: default; }
.kick { font-family: var(--mono); font-size: 10px; letter-spacing: .32em; color: var(--ciano); display: flex; align-items: center; gap: 10px; text-transform: uppercase; }
.kick::before { content: ''; width: 24px; height: 1px; background: var(--ciano); box-shadow: 0 0 6px var(--ciano); }
.mono { font-family: var(--mono); }
.dim { color: rgba(204,251,241,.42); }
.ok { color: var(--ciano-forte); }
.ouro { color: var(--ouro); }
.erro { color: var(--erro); }
.campo { display: grid; gap: 6px; }
.campo > span { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ciano); }
.campo input, .campo select, .campo textarea { font: 15px var(--mono); color: #effffb; background: rgba(1,6,5,.6); border: 0; border-bottom: 1px solid rgba(94,234,212,.35);
  padding: 9px 2px; outline: none; border-radius: 0; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-bottom-color: var(--ciano); box-shadow: 0 8px 14px -12px var(--ciano); }
.oculto { display: none !important; }
/* Preenchimento automático do navegador: sem fundo claro nem fonte trocada. */
:root { color-scheme: dark; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: #effffb;
  caret-color: var(--ciano);
  font-family: var(--mono);
  transition: background-color 600000s 0s, color 600000s 0s;
}
input:autofill {
  -webkit-text-fill-color: #effffb;
  font-family: var(--mono);
  transition: background-color 600000s 0s, color 600000s 0s;
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }