:root {
  color-scheme: dark;
  --login-accent: #00f59b;
  --login-border: #20272b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html,
body { min-width: 320px; min-height: 100%; margin: 0; background: #000; color: #f4f7f6; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.login-shell { width: min(100%, 390px); }
.login-brand { margin-bottom: 18px; text-align: center; }
.login-brand span { display: block; color: #778289; font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; text-transform: uppercase; }
.login-brand h1 { margin: 7px 0 0; font-size: clamp(22px, 7vw, 30px); letter-spacing: -.035em; }

.login-card { display: grid; gap: 9px; padding: 24px; border: 1px solid var(--login-border); border-radius: 12px; background: #020304; box-shadow: 0 22px 65px rgba(0,0,0,.65); }
.login-card p { margin: 0 0 8px; color: #7e898f; font-size: 13px; line-height: 1.5; }
.login-card label { color: #aeb8bc; font-size: 12px; }
.login-card input { width: 100%; min-height: 46px; margin-bottom: 5px; padding: 10px 12px; border: 1px solid #283137; border-radius: 8px; outline: 0; background: #000; color: #f5f8f7; font-size: 16px; }
.login-card input:focus-visible { border-color: var(--login-accent); box-shadow: 0 0 0 3px rgba(0,245,155,.12); }
.login-card button { min-height: 46px; margin-top: 5px; border: 1px solid var(--login-accent); border-radius: 8px; background: #06150f; color: var(--login-accent); font-size: 14px; font-weight: 750; cursor: pointer; }
.login-card button:hover { background: #092219; }
.login-card button:focus-visible { outline: 3px solid rgba(0,245,155,.22); outline-offset: 2px; }
.login-card button:disabled { cursor: wait; opacity: .58; }
.login-status { min-height: 20px; color: #839097; font-size: 12px; }
.login-status[data-state="error"] { color: #ff8d95; }
.login-status[data-state="success"] { color: #70eebd; }

@media (max-width: 360px) {
  .login-card { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}