:root{
  --login-bg:#eef2f7;
  --login-surface:#fff;
  --login-text:#152033;
  --login-muted:#667085;
  --login-border:#dfe5ec;
  --login-accent:#1f6feb;
}
[data-theme="dark"]{
  --login-bg:#0b1220;
  --login-surface:#111a2a;
  --login-text:#f2f5f9;
  --login-muted:#9aa8ba;
  --login-border:#29374b;
  --login-accent:#60a5fa;
}
.app-login{
  min-height:100vh;
  background:var(--login-bg);
  color:var(--login-text);
  font-family:'Play',sans-serif;
}
.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr)}
.login-brand{position:relative;display:flex;align-items:center;overflow:hidden;padding:7vw;background:#142033;color:#fff}
.login-brand:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(31,111,235,.20),rgba(31,32,35,.05))}
.login-brand-grid{position:absolute;inset:0;opacity:.13;background-image:linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px);background-size:46px 46px;transform:skewY(-6deg) scale(1.2)}
.login-brand-content{position:relative;max-width:620px;z-index:1}
.login-brand-mark{width:58px;height:58px;border-radius:15px;display:grid;place-items:center;background:#fff;color:#1f6feb;font-size:25px;box-shadow:0 12px 35px rgba(0,0,0,.2);margin-bottom:28px}
.login-eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;opacity:.72;font-weight:700}
.login-brand h1{font-size:clamp(34px,4vw,62px);line-height:1.03;margin:12px 0 20px;font-weight:700}
.login-brand p{font-size:17px;line-height:1.7;max-width:540px;color:rgba(255,255,255,.74)}
.login-points{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.login-point{border:1px solid rgba(255,255,255,.15);padding:9px 13px;border-radius:999px;font-size:12px;color:rgba(255,255,255,.82)}
.login-panel{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--login-bg)}
.login-card-modern{width:min(470px,100%);background:var(--login-surface);border:1px solid var(--login-border);border-radius:24px;box-shadow:0 24px 70px rgba(15,23,42,.12);padding:40px}
.login-logo-small{display:flex;align-items:center;gap:12px;margin-bottom:34px}
.login-logo-small .mark{width:42px;height:42px;border-radius:12px;background:var(--login-accent);color:#fff;display:grid;place-items:center}
.login-logo-small strong{font-size:15px}.login-logo-small span{display:block;color:var(--login-muted);font-size:11px;margin-top:2px}
.login-card-modern h2{font-size:29px;margin:0 0 8px}.login-card-modern .subtitle{color:var(--login-muted);margin-bottom:30px}
.login-field{margin-bottom:18px}.login-field label{font-weight:600;font-size:13px;margin-bottom:8px}
.login-input{height:50px;border:1px solid var(--login-border);border-radius:12px;background:transparent!important;color:var(--login-text)!important}
.login-input:focus{border-color:var(--login-accent);box-shadow:0 0 0 4px rgba(31,111,235,.12)}
.login-input-group{position:relative}.login-input-group .field-icon{position:absolute;left:16px;top:16px;color:var(--login-muted);z-index:2}.login-input-group input{padding-left:44px;padding-right:45px}
.password-toggle{position:absolute;right:9px;top:8px;width:34px;height:34px;border:0;background:transparent;color:var(--login-muted);z-index:3}
.login-error{font-size:12px;color:#dc3545;margin-top:6px}.login-meta{display:flex;justify-content:flex-end;margin:6px 0 22px}.login-meta a{font-size:12px;color:var(--login-accent)}
.btn-modern-login{height:50px;border:0;border-radius:12px;background:var(--login-accent);color:#fff;font-weight:700;width:100%;transition:.2s}.btn-modern-login:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(31,111,235,.22)}
.login-footer{text-align:center;color:var(--login-muted);font-size:11px;margin-top:28px}.login-footer a{color:inherit}
.forgot-modal .modal-content{border:0;border-radius:20px;background:var(--login-surface);color:var(--login-text)}
@media(max-width:900px){.login-shell{grid-template-columns:1fr}.login-brand{display:none}.login-panel{min-height:100vh;padding:24px}.login-card-modern{padding:28px 22px}}
@media(max-width:420px){.login-panel{padding:14px}.login-card-modern{border-radius:18px;padding:24px 18px}}

.login-theme-toggle{position:fixed;top:20px;right:20px;width:40px;height:40px;border-radius:11px;border:1px solid var(--login-border);background:var(--login-surface);color:var(--login-text);z-index:5;box-shadow:0 8px 24px rgba(15,23,42,.08)}