:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
*{box-sizing:border-box;}body{margin:0;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:22px;color:#f4f6ff;background:radial-gradient(ellipse at 10% 0%,#343b83a9,transparent 43%),radial-gradient(ellipse at 90% 80%,#0b849166,transparent 40%),#0b122a;}
.login-card{width:min(100%,430px);padding:clamp(24px,6vw,40px);background:linear-gradient(160deg,#25355f,#141f3f);border:1px solid #6f87ba6e;border-radius:26px;box-shadow:0 25px 65px #0007;}
.logo{width:62px;height:62px;display:grid;grid-template-columns:repeat(2,1fr);gap:5px;padding:11px;border-radius:17px;background:#1c2a52;transform:rotate(-6deg);margin-bottom:20px;}.logo i{border-radius:5px}.logo i:nth-child(1){background:#69dffa}.logo i:nth-child(2){background:#ffba66}.logo i:nth-child(3){background:#b69bff}.logo i:nth-child(4){background:#f773bc}
h1{margin:0;font-size:2rem;letter-spacing:-.07em}h1 span{background:linear-gradient(100deg,#92e8ff,#ad9dff 70%,#e6a5fa);background-clip:text;color:transparent;}
.tagline{color:#a5b4dc;font-size:.89rem;margin:7px 0 27px}h2{margin:0 0 18px;font-size:1.2rem;}form{display:grid;gap:10px;}label{font-size:.85rem;font-weight:600;color:#c3cfeb;}input{width:100%;min-height:47px;border-radius:12px;border:1px solid #58719f;background:#0d1937;color:white;font:inherit;padding:11px 13px;margin-bottom:8px;}input:focus{outline:2px solid #77e3ff;}button{margin-top:7px;min-height:48px;border:0;border-radius:12px;background:linear-gradient(115deg,#66d8f3,#998ff8);font:inherit;font-weight:800;color:#0d1838;cursor:pointer;}button:disabled{opacity:.6;cursor:wait;}.error{color:#ffc4c4;font-size:.84rem;margin:0}.foot{font-size:.76rem;text-align:center;line-height:1.6;margin:24px 0 0;color:#9faed1;}

/* Keep the expanded title readable on phones. */
h1 { font-size: clamp(1.58rem, 6vw, 1.9rem); line-height: 1.12; letter-spacing: -.055em; }
h1 span { margin-left: .11em; }

/* v0.2.5: matching discreet version text on the sign-in screen. */
.login-brand-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.login-brand-heading h1 { min-width: 0; }
.login-version { font-size: .65rem; font-weight: 650; color: #a6b7d5; white-space: nowrap; letter-spacing: .015em; }
@media (max-width: 430px) {
  .login-brand-heading { gap: 2px 5px; }
  .login-brand-heading h1 { font-size: clamp(1.16rem, 5.25vw, 1.45rem); }
  .login-version { font-size: .58rem; }
}