:root{--bg:#05070c;--panel:#0d1220;--line:#1a2338;--txt:#e6ecf7;--txt-dim:#8b98b3;--txt-faint:#5a6782;--blue:#4da3ff;--blue-deep:#1e6fd9;--rose:#ff6b8a}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(900px 500px at 50% -10%,#0d1930 0%,transparent 60%),var(--bg);
  color:var(--txt);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:34px 30px}
.brand{display:flex;align-items:center;gap:9px;margin-bottom:28px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px var(--blue)}
.name{font-weight:600;letter-spacing:.16em;font-size:15px}
.sub{font-size:12px;color:var(--txt-faint);letter-spacing:.08em}
label{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-faint);margin:0 0 7px}
input{width:100%;padding:12px 14px;margin-bottom:18px;border-radius:10px;background:#080c15;
  border:1px solid var(--line);color:var(--txt);font:inherit;font-size:15px;outline:none;transition:.16s}
input:focus{border-color:var(--blue-deep);background:#0a0f1a}
/* Chrome paints autofilled fields a hard blue; keep the dark theme intact. */
input:-webkit-autofill,input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--txt);
  -webkit-box-shadow:0 0 0 1000px #0a0f1a inset;
  caret-color:var(--txt);
  transition:background-color 9999s ease-out}
button{width:100%;padding:13px;border-radius:10px;border:1px solid rgba(77,163,255,.45);
  background:rgba(77,163,255,.13);color:var(--blue);font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:.16s}
button:hover{background:rgba(77,163,255,.2)}
button:disabled{opacity:.5;cursor:not-allowed}
.err{margin:14px 0 0;font-size:13px;color:var(--rose);text-align:center}
.err[hidden]{display:none}
.note{margin:22px 0 0;font-size:11.5px;color:var(--txt-faint);text-align:center;line-height:1.6}

/* Why you landed here: expiry in amber, a deliberate sign-out in green. Sits
   above the form so it is read before the fields, not after. */
.notice{margin:0 0 20px;padding:10px 13px;border-radius:9px;font-size:13px;
  line-height:1.45;text-align:center;border:1px solid transparent}
.notice.warn{color:#ffb457;background:rgba(255,180,87,.08);border-color:rgba(255,180,87,.28)}
.notice.ok{color:#37d6a8;background:rgba(55,214,168,.08);border-color:rgba(55,214,168,.28)}
.notice[hidden]{display:none}

/* Same dark scrollbars as Mission Control, so a short window on the login
   page does not flash a white bar before you have even signed in. */
:root{--sb-track:#070a11;--sb-thumb:#28324a;--sb-thumb-hi:#3b4867}
*{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) var(--sb-track)}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:var(--sb-track)}
*::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:5px;border:2px solid var(--sb-track)}
*::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hi)}
*::-webkit-scrollbar-corner{background:var(--sb-track)}