:root {
  --brand-1:#0b1e3f; --brand-2:#12306b;
  --card:#ffffff; --text:#0f172a; --muted:#64748b; --line:#cbd5e1; --field:#ffffff;
  --accent:#1e40af; --accent-hover:#1e3a8a; --focus:#3b82f6;
  --err:#b91c1c; --err-bg:#fef2f2; --ok:#047857; --ok-bg:#ecfdf5;
}
* { box-sizing:border-box; }
html { min-height:100%; background:var(--brand-1); }
body { margin:0; min-height:100vh; color:var(--text); font:15px/1.5 "Segoe UI", system-ui, -apple-system, Arial, sans-serif; -webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 90% at 0% 0%, var(--brand-2) 0%, var(--brand-1) 70%) fixed; }

.stage { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 16px; }
.logo { display:block; width:auto; height:96px; margin-bottom:28px; }

/* the card is white in every theme */
.card { width:100%; max-width:400px; padding:32px; background:var(--card); border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.12), 0 12px 32px rgba(2,8,23,.35); }
h1 { margin:0 0 6px; font-size:24px; font-weight:600; letter-spacing:-.2px; }
.card h2 { margin:0 0 20px; font-size:14.5px; font-weight:400; color:var(--muted); }
label { display:block; margin:16px 0 6px; font-size:13px; font-weight:600; }
input[type=text], input[type=email], input[type=password] {
  width:100%; height:44px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:var(--field); color:var(--text); font:inherit; transition:border-color .15s, box-shadow .15s; }
input::placeholder { color:#94a3b8; }
input:hover { border-color:#94a3b8; }
input:focus { outline:none; border-color:var(--focus); box-shadow:0 0 0 3px rgba(59,130,246,.28); }
button, .btn { display:block; width:100%; height:44px; margin-top:24px; border:0; border-radius:8px; background:var(--accent); color:#fff; font:inherit; font-weight:600; line-height:44px; text-align:center; text-decoration:none; cursor:pointer; transition:background .15s; }
button:hover, .btn:hover { background:var(--accent-hover); }
button:focus-visible, .btn:focus-visible { outline:3px solid rgba(59,130,246,.45); outline-offset:2px; }
.msg-err, .msg-ok { margin:16px 0 0; padding:10px 12px; border-radius:8px; font-size:13.5px; }
.msg-err { color:var(--err); background:var(--err-bg); border:1px solid rgba(185,28,28,.3); }
.msg-ok { color:var(--ok); background:var(--ok-bg); border:1px solid rgba(4,120,87,.3); }
.links { margin:22px 0 0; font-size:13.5px; text-align:center; color:var(--muted); }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.foot { margin:24px 0 0; font-size:12.5px; color:#8fa3cc; text-align:center; }

ul.apps { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
ul.apps a { display:block; padding:14px 16px; border:1px solid var(--line); border-radius:8px; color:var(--text); font-weight:600; }
ul.apps a:hover { border-color:var(--accent); text-decoration:none; }
ul.apps small { display:block; margin-top:2px; font-weight:400; color:var(--muted); }

@media (max-width: 480px) { .card { padding:24px 20px; } .logo { height:80px; margin-bottom:20px; } }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }