/* Mission Control: la pantalla de acceso del VPS con la estética de la oficina
   (negro cálido, crema, títulos con serifa, letra de máquina y el cerebro azul al fondo).
   Solo redefine variables y unos pocos estilos del login de AS Video Studio. */
:root {
  --bg: #121110; --bg-elev: #1A1917; --surface: #1A1917; --surface-hi: #22211E;
  --border: #33312C; --border-hi: #48453F;
  --text: #ECE8E0; --text-muted: #8E897F; --text-dim: #6F6A61;
  --gold: #EDE5D3; --gold-hi: #FFF6E2; --gold-dim: rgba(237, 229, 211, .18); --sobre-acento: #1A1917;
  --danger: #FF8A78; --danger-bg: rgba(229, 83, 61, .12); --success: #57D18B;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
}
html, body { background: radial-gradient(90% 80% at 50% 45%, #1B1A17 0%, #121110 70%) fixed, #121110 !important; color: var(--text); }
.aurora { display: none !important; }
body::before { /* el núcleo de la oficina: el cerebro de puntos azules */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(63, 120, 255, .34), rgba(63, 120, 255, .09) 24%, transparent 42%),
    radial-gradient(rgba(156, 194, 255, .34) 1px, transparent 1.5px) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 0, transparent 62%); mask-image: radial-gradient(circle at 50% 46%, #000 0, transparent 62%);
  animation: mc-gira 120s linear infinite;
}
@keyframes mc-gira { to { background-position: 0 0, 24px 24px; } }
.login { position: relative; z-index: 1; }
.brand__mark { background: #F4F1EA !important; color: #E5533D !important; border-radius: 9px !important; box-shadow: 0 0 24px -6px rgba(229, 83, 61, .6) !important; }
.brand__mark svg { color: #E5533D !important; width: 22px !important; height: 22px !important; }
.brand__text, .brand__text em { font-family: var(--serif) !important; font-style: normal !important; font-weight: 700 !important; letter-spacing: .03em; text-transform: uppercase; color: var(--text) !important; }
.card { background: rgba(26, 25, 23, .94) !important; border: 1px solid var(--border) !important; border-radius: 18px !important; box-shadow: 0 40px 80px -40px #000, inset 0 1px 0 rgba(255, 255, 255, .04) !important; backdrop-filter: blur(10px); }
.card__title { font-family: var(--serif) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .02em; }
.card__sub, .field__label, .login__legal, .recuperacion summary {
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace !important; font-size: 11px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted) !important; }
.input { background: #22211E !important; border: 1px solid var(--border) !important; border-radius: 12px !important; color: var(--text) !important; }
.input:focus { border-color: #5A564E !important; box-shadow: 0 0 0 3px rgba(237, 229, 211, .12) !important; }
.btn { background: var(--gold) !important; color: var(--sobre-acento) !important; border: 0 !important; border-radius: 99px !important;
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace !important; font-weight: 800 !important; letter-spacing: .1em; text-transform: uppercase; }
.btn:hover { background: var(--gold-hi) !important; }
.recuperacion a { color: var(--gold) !important; }
.recuperacion code { background: #22211E !important; color: var(--gold) !important; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }