/* ORBIT Estúdio: a entrada. Preto quase puro, o âmbar só no que se faz (o botão), IBM Plex. */
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-mono-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 100 700; font-display: swap; src: url(fonts/ibm-plex-sans-var-latin.woff2) format('woff2'); }

:root {
  color-scheme: dark;
  --fundo: #07080A;
  --painel: #0D0F14;
  --linha: rgba(255, 255, 255, 0.10);
  --linha-2: rgba(255, 255, 255, 0.18);
  --ink: #E6E8EC;
  --ink-2: #A3A7B0;
  --ink-3: #868A94;
  --accent: #FF8A3D;
  --accent-2: #FF9D5C;
  --azul: #63AEFF;
  --erro: #F0645B;
  --erro-fundo: rgba(240, 100, 91, 0.10);
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100dvh; background: var(--fundo); color: var(--ink); font: 400 14px/20px var(--sans); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }

.entrada { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 16px; }

/* A órbita: o único momento animado da página (um anel a dar uma volta lenta). */
.orbita { width: 96px; height: 96px; display: grid; place-items: center; }
.orbita svg { width: 96px; height: 96px; overflow: visible; }
.orbita-anel { fill: none; stroke: var(--accent); stroke-width: 2; }
.orbita-anel.fraco { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.5; }
.orbita-nucleo { fill: var(--accent); }
.orbita svg { animation: orbita-gira 24s linear infinite; }
@keyframes orbita-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orbita svg { animation: none; } }

.marca { margin: 24px 0 0; font: 600 24px/32px var(--sans); letter-spacing: -0.01em; }
.marca span { font-family: var(--mono); letter-spacing: 0.12em; }
.por { margin: 4px 0 0; font: 500 12px/16px var(--mono); color: var(--ink-3); }

.cartao { width: min(360px, 100%); margin-top: 32px; display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--linha); border-radius: 8px; background: var(--painel); }
.campo { font: 500 13px/20px var(--sans); color: var(--ink-2); }
.entrada-senha { margin-top: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--linha-2); border-radius: 6px; background: var(--fundo); color: var(--ink); font: 400 16px/24px var(--sans); }
.entrada-senha:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(99, 174, 255, 0.18); }
.entrada-senha[aria-invalid="true"] { border-color: rgba(240, 100, 91, 0.6); }

.erro { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 8px 12px; border: 1px solid rgba(240, 100, 91, 0.35); border-radius: 6px; background: var(--erro-fundo); color: var(--erro); font: 400 13px/20px var(--sans); }
.erro .ic { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.entrar { margin-top: 16px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: #07080A; font: 600 14px/1 var(--sans); cursor: pointer; }
.entrar:hover { background: var(--accent-2); border-color: var(--accent-2); }
.entrar:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.entrada-senha:focus-visible { outline: none; }

.nota { margin: 24px 0 0; max-width: 360px; text-align: center; font: 400 13px/20px var(--sans); color: var(--ink-3); }