:root {
  color-scheme: dark;
  font-family: Arial, "Helvetica Neue", sans-serif;
  color: #f2f4f8;
  background: #10151d;
  --muted: #a0adc0;
  --accent: #aab7fc;
  --outline: #2b3747;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 24px 25px;
  display: grid;
  place-items: center;
  background: radial-gradient(at 65% 14%, #202a3a, #10151d 62%);
}
.login-stack { width: min(100%, 360px); transform: translateY(7px); }
.login-brand { margin-bottom: 12px; text-align: center; }
.login-brand h1 { margin: 0; font-size: 42px; line-height: 48px; letter-spacing: -2.2px; font-weight: 750; }
.login-brand h1 span { color: var(--accent); }
.login-brand p { margin: 9px 0 0; padding-left: 3px; color: var(--muted); font-size: 12px; line-height: 18px; letter-spacing: 3px; }
.login-card { display: grid; gap: 11px; padding: 20px; margin: 0; background: #171e28; border: 1px solid var(--outline); border-radius: 17px; box-shadow: 0 18px 45px #080b124d; }
.field { position: relative; }
.field input { width: 100%; height: 48px; border: 1px solid var(--outline); border-radius: 11px; padding: 0 14px 0 52px; background: #465a6670; background: rgb(70 90 126 / 40%); color: #fff; font: 14px Arial, sans-serif; }
.field input::placeholder { color: var(--muted); opacity: 1; }
.field-password input { padding-right: 48px; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.field-icon { position: absolute; width: 27px; height: 27px; inset: 50% auto auto 11px; transform: translateY(-50%); color: var(--accent); pointer-events: none; }
button { font: inherit; cursor: pointer; }
.pw-toggle { position: absolute; top: 2px; right: 3px; display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 9px; background: transparent; color: var(--accent); }
.pw-toggle:hover { background: #aab7fc17; }
.pw-toggle svg { width: 24px; height: 24px; }
.pw-toggle[aria-pressed="false"] .eye-open, .pw-toggle[aria-pressed="true"] .eye-closed { display: none; }
.primary { min-height: 45px; display: flex; align-items: center; justify-content: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 11px; background: var(--accent); color: #10151d; font-size: 16px; font-weight: 700; }
.primary svg { width: 20px; height: 20px; }
.primary:hover { background: #bec7ff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
footer { margin-top: 14px; text-align: center; color: var(--muted); font-size: 11px; line-height: 18px; }
.message { margin: 0; border: 1px solid #805157; border-radius: 9px; padding: 9px 11px; background: #362830; color: #ffd6dc; font-size: 13px; line-height: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.panel-stack { width: min(100%, 420px); }
.panel-stack h2 { margin: 0; font-size: 20px; }
.panel-stack p { margin: 0; color: var(--muted); }
#activate-form label { display: block; margin-bottom: 5px; font-size: 14px; }
#activate-form .field input { padding-inline: 12px; }
#activate-form a { color: var(--accent); }
.login-help { justify-self: center; color: var(--accent); font-size: 13px; padding: 4px; }
.reset-form label { display: block; margin-bottom: 5px; font-size: 14px; }
.reset-form .field input { padding-inline: 12px; }
.reset-form a { color: var(--accent); }
#reset-fields { display: grid; gap: 11px; }
.reset-success { margin: 0; color: #93ddbd; font-size: 13px; line-height: 1.5; }
.modules { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.modules li { padding: 10px 12px; border: 1px solid var(--outline); border-radius: 9px; }
@media (max-width: 400px) { body { padding-inline: 18px; } .login-card { padding: 16px; } .field input { font-size: 16px; } }