:root{
  --bg:#071a33;
  --panel:#0e2748;
  --panel-border:#22466f;
  --field:#2a4369;
  --field-border:#47678d;
  --text:#f3f7fc;
  --muted:#c1d0e3;
  --accent:#3a78d5;
  --accent-strong:#2d6cca;
  --secondary:#213d60;
  --secondary-border:#50759d;
  --link:#8ec7ff;
  --danger:#ffb1b1;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body.login-body{margin:0;background:linear-gradient(180deg,#071b34 0%,#082142 100%);color:var(--text)}
.login-shell{min-height:100%;display:flex;align-items:flex-start;justify-content:center;padding:34px 16px}
.login-card{width:min(100%, 640px);background:var(--panel);border:1px solid var(--panel-border);border-radius:18px;padding:24px 28px 26px;box-shadow:0 10px 28px rgba(0,0,0,.22)}
.brand-panel{background:#edf1f5;border-radius:16px;padding:26px 24px;display:flex;align-items:center;justify-content:center;margin-bottom:26px}
.brand-logo{max-width:100%;width:460px;height:auto;display:block}
h1{margin:0 0 14px;font-size:22px;line-height:1.2;font-weight:700;color:#ffffff}
.intro-copy{margin:0 0 24px;font-size:16px;line-height:1.55;color:var(--text)}
.notice{min-height:22px;margin:0 0 12px;font-size:14px}
.muted{color:var(--muted)}
.login-form{display:grid;grid-template-columns:1fr;gap:10px}
label{font-size:14px;color:#f1f6ff}
input{width:100%;padding:14px 16px;border-radius:9px;border:1px solid var(--field-border);background:var(--field);color:#fff;font:inherit;outline:none}
input::placeholder{color:#c8d3e0;opacity:.95}
input:focus-visible{border-color:#8ec7ff;box-shadow:0 0 0 3px rgba(95,171,255,.18)}
button{font:inherit;cursor:pointer;border-radius:9px;transition:background .15s ease, border-color .15s ease, transform .05s ease}
button:active{transform:translateY(1px)}
.primary-action{margin-top:8px;width:100%;padding:14px 18px;border:1px solid var(--accent);background:var(--accent);color:#fff;font-size:17px;font-weight:500}
.primary-action:hover{background:var(--accent-strong)}
.secondary-links{margin:18px 0 18px;font-size:15px;line-height:1.45;color:#f3f7fc}
a{color:var(--link)}
.secondary-action{padding:13px 18px;min-width:245px;border:1px solid var(--secondary-border);background:var(--secondary);color:#fff;font-size:16px}
.secondary-action:hover{background:#27476d}
@media (max-width: 700px){
  .login-card{padding:18px 18px 22px;border-radius:16px}
  .brand-panel{padding:18px}
  .brand-logo{width:100%}
}