/* Modern login layer - 2026-01-13 */
:root{
  --ui-bg:#0b1220;
  --ui-card:#0f172a;
  --ui-card2:#111c34;
  --ui-text:#e5e7eb;
  --ui-muted:rgba(229,231,235,.70);
  --ui-primary:#2563eb;
  --ui-radius:18px;
  --ui-shadow: 0 18px 50px rgba(0,0,0,.35);
}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(37,99,235,.35), transparent 55%),
              radial-gradient(900px 500px at 80% 20%, rgba(16,185,129,.22), transparent 55%),
              radial-gradient(900px 500px at 50% 100%, rgba(245,158,11,.18), transparent 55%),
              var(--ui-bg);
  color:var(--ui-text);
  font-family: Arial, Helvetica, sans-serif;
}
.login{width:100%; max-width:980px; padding:18px;}
.login .form{
  width:100%;
  max-width:420px;
  margin:0 auto;
  background: linear-gradient(180deg, var(--ui-card), var(--ui-card2));
  border-radius:var(--ui-radius);
  box-shadow:var(--ui-shadow);
  padding:26px 22px;
  border:1px solid rgba(255,255,255,.08);
}
.login h2{margin:0 0 16px; font-size:22px; letter-spacing:.2px;}
label{display:block; margin:10px 0 6px; color:var(--ui-muted); font-weight:700;}
input, select{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color:black;
  padding:12px 12px;
  outline:none;
}
input:focus, select:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.18);
}
button, .btn{
  width:100%;
  margin-top:14px;
  border:0;
  border-radius:14px;
  padding:12px 14px;
  background: var(--ui-primary);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  box-shadow: 0 12px 24px rgba(37,99,235,.25);
}
button:hover, .btn:hover{filter:brightness(1.05);}
.small-links{margin-top:12px; text-align:center; font-size:14px;}
.small-links a{color:#93c5fd; text-decoration:none;}
.small-links a:hover{text-decoration:underline;}