:root{--bg:#050b13;--panel:#0b1624;--line:#22364d;--text:#edf6ff;--muted:#8fa7bd;--blue:#0b85ff;--green:#12d441}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#0b1c31,#03070d 70%);color:var(--text);font-family:Segoe UI,Arial,sans-serif}
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:min(420px,100%);background:linear-gradient(180deg,rgba(16,31,50,.96),rgba(8,18,31,.96));border:1px solid var(--line);border-radius:14px;padding:34px;box-shadow:0 22px 60px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.03)}
.login-logo{color:#ffc400;font-size:42px;text-align:center;margin-bottom:12px}
h1{margin:0;text-align:center;font-size:26px}
p{text-align:center;color:var(--muted);margin:8px 0 26px}
label{display:block;color:#9fb8cf;font-weight:800;font-size:13px;margin-bottom:14px;text-align:left}
input{width:100%;margin-top:7px;padding:13px 14px;border-radius:8px;border:1px solid #263b54;background:#07111e;color:#eaf6ff;font-size:16px}
button{width:100%;margin-top:8px;padding:14px;border:0;border-radius:8px;background:linear-gradient(90deg,#0b85ff,#20e3d2);color:white;font-weight:900;cursor:pointer}
button:disabled{opacity:.65;cursor:not-allowed}
.login-message{min-height:22px;margin-top:16px;color:#ff8e94;text-align:center;font-weight:700}
.login-message.ok{color:#75ff94}

/* =========================================================
   LOGIN — MOBILE
   ========================================================= */

@media (max-width: 520px) {
  .login-shell { padding: 16px; align-items: flex-start; padding-top: 40px; }
  .login-card { padding: 24px 18px; border-radius: 12px; }
  .login-logo { font-size: 36px; }
  h1 { font-size: 22px; }
  input { font-size: 16px !important; min-height: 48px; padding: 13px 14px; }
  button { min-height: 50px; font-size: 16px; }
}