/* Login-specific styles (self-contained) */
:root{
  --font-sans: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --bg: #0b1220;
  --text: #e6eef8;
  --muted: #9fb8d6;
  --primary: #0f5bd1;
  --primary-2: #0b47b3;
  --accent: #7dd3fc;
  --card-bg: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  --glass-border: rgba(255,255,255,0.03);
  --shadow: 0 12px 36px rgba(2,6,23,0.7);
  --radius: 12px;
  --focus-ring: rgba(58,167,255,0.08);
}
*,:before,:after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font-sans);background:linear-gradient(180deg,var(--bg) 0%, #0a0f16 60%);color:var(--text);-webkit-font-smoothing:antialiased}

.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{width:420px;max-width:100%;background:var(--card-bg);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);border:1px solid var(--glass-border);margin:0 auto}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:12px}
.login-brand .logo{font-size:1.5rem;font-weight:800;color:var(--accent)}
.login-brand .title{font-size:1.05rem;font-weight:700;color:#eaf6ff;text-align:center}
.login-sub{text-align:center;color:var(--muted);margin-bottom:12px}

.form{display:flex;flex-direction:column;gap:12px}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:0.95rem;color:var(--text);font-weight:600}
.form-input{width:100%;padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:#0b141c;color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,0.02)}
.form-input:focus{outline:none;border-color:#3aa7ff;box-shadow:0 0 0 4px var(--focus-ring)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:8px;border:none;cursor:pointer;font-weight:600}
.btn-primary{background:linear-gradient(180deg,var(--primary),var(--primary-2));color:#fff}
.btn:active{transform:translateY(1px)}

.form-note{font-size:0.9rem;color:var(--muted)}
.form-error{color:#ff6b6b;font-weight:700;margin-top:6px}
.footer-small{margin-top:12px;font-size:0.85rem;color:#7f9fb6;text-align:center}

/* accessibility helpers */
.hidden-visually{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Autofill overrides (Chrome / Edge / Safari) */
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
  box-shadow: inset 0 0 0 1000px #0b141c !important;
  -webkit-text-fill-color: #e6eef8 !important;
  color: var(--text) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}
input:-webkit-autofill:focus, textarea:-webkit-autofill:focus, select:-webkit-autofill:focus{
  box-shadow: inset 0 0 0 1000px #07121a !important;
}

/* Autofill for Firefox */
input:-moz-autofill, textarea:-moz-autofill, select:-moz-autofill{
  box-shadow: inset 0 0 0 1000px #0b141c !important;
  -moz-text-fill-color: #e6eef8 !important;
  color: var(--text) !important;
}

/* accessibility: skip link */
.skip-link{position:fixed;left:8px;top:8px;padding:8px 10px;background:#071224;color:#fff;z-index:300;border-radius:6px;transform:translateY(-120%);transition:transform .12s ease}
.skip-link:focus{transform:translateY(0);outline:none;box-shadow:0 0 0 6px rgba(58,167,255,0.08)}

/* responsive */
@media (max-width:520px){
  .login-page{padding:16px}
  .login-card{padding:20px;width:100%;max-width:none}
  .login-brand .logo{font-size:1.3rem}
  .login-brand .title{font-size:0.95rem}
  .form-input{font-size:16px !important}
  .btn{min-height:48px;font-size:16px}
}