.login-screen {
  padding:88px 28px 40px; overflow-y:auto;
  background:radial-gradient(ellipse at 12% 20%,var(--login-end),transparent 60%),var(--paper);
}
.login-layout {
  display:grid; grid-template-columns:1.05fr 1fr; width:min(1030px,100%);
  background:var(--white); border:1px solid var(--line); border-radius:28px; overflow:hidden;
  box-shadow:0 32px 90px color-mix(in srgb,var(--sidebar) 15%,transparent);
}
.login-screen svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.login-screen .brand span:last-child { display:block; }
.login-story {
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  padding:40px; min-height:610px; color:#f2f8f4;
  background:radial-gradient(ellipse at 100% 0,#30684e,transparent 65%),#112e22;
}
[data-theme="dark"] .login-story { background:radial-gradient(ellipse at 100% 0,#244c37,transparent 65%),#0d241a; }
.login-story::after { content:''; position:absolute; width:300px; height:300px; bottom:-175px; right:-145px; border:1px solid #dffc7520; border-radius:50%; box-shadow:0 0 0 40px #dffc7505,0 0 0 80px #dffc7503; pointer-events:none; }
.login-story .brand { color:#f2f8f4; margin:0; gap:12px; font-size:27px; letter-spacing:-.8px; }
.login-story .brand-mark { width:42px; height:42px; border-radius:13px; }
.login-brand-caption { display:block; margin-top:4px; font:700 8px 'DM Sans',sans-serif; letter-spacing:.18em; color:#acc5b8; }
.login-story h2 { margin:20px 0 12px; font-size:39px; line-height:1.18; letter-spacing:-1.6px; }
.login-story h2>span { color:var(--lime); }
.login-story-content>p { margin:0; max-width:330px; color:#b9d0c3; font-size:13px; line-height:1.7; }
.login-pass { position:relative; margin:28px 0 0; padding:22px 24px; border:1px solid #c9ead335; border-radius:18px; background:linear-gradient(125deg,#ffffff15,#ffffff05); box-shadow:0 16px 30px #0002; }
.login-pass-top,.login-pass-bottom { display:flex; justify-content:space-between; align-items:center; font-size:9px; font-weight:700; letter-spacing:.12em; color:#b9d0c3; }
.login-pass-top svg { color:var(--lime); }
.login-pass-chip { display:grid; place-items:center; width:36px; height:30px; margin:20px 0 12px; border:1px solid #dffc7540; border-radius:7px; color:var(--lime); background:#dffc750a; }
.login-pass strong { display:block; font:600 17px Manrope,sans-serif; line-height:1.5; letter-spacing:-.3px; }
.login-pass-bottom { margin-top:22px; font-size:8px; }
.login-pass-bottom span:last-child { padding:5px 8px; border-radius:5px; background:#ffffff12; color:#edf8f0; }
.login-story-footer { display:flex; align-items:center; gap:8px; color:#b9d0c3; font-size:10px; margin-top:30px; }
.login-story-footer svg { width:14px; height:14px; }
.login-screen .login-card {
  display:flex; flex-direction:column; justify-content:center; width:100%; min-width:0;
  margin:0; padding:48px; border:0; border-radius:0; box-shadow:none; color:var(--ink); background:var(--white);
}
.login-mobile-brand { display:none; }
.login-heading-icon { width:48px; height:48px; display:grid; place-items:center; margin-bottom:24px; color:var(--green); background:var(--surface-soft); border:1px solid var(--line); border-radius:15px; }
.login-heading-icon svg { width:23px; height:23px; }
.login-screen .login-card .eyebrow { color:var(--green); font-size:9px; margin:0 0 10px; letter-spacing:.14em; }
.login-card h1 { font-size:28px; line-height:1.3; letter-spacing:-1px; }
.login-screen .login-description { font-size:13px; line-height:1.7; color:var(--muted); margin:10px 0 27px; }
.login-card .login-field { margin:0 0 18px; gap:9px; font-size:12px; }
.login-input-wrap { position:relative; display:flex; align-items:center; }
.login-input-wrap>svg { position:absolute; left:16px; color:var(--muted); width:18px; height:18px; pointer-events:none; }
.login-input-wrap input { min-height:52px; padding:14px 46px; border-radius:12px; font-size:13px; }
.login-password-toggle { position:absolute; right:7px; display:grid; place-items:center; width:38px; height:38px; padding:0; border:0; background:transparent; color:var(--muted); border-radius:8px; cursor:pointer; }
.login-password-toggle:hover { color:var(--green); background:var(--surface-soft); }
.login-password-toggle[aria-pressed="true"] { color:var(--green); }
.login-screen .login-card .form-error { margin:0; min-height:0; font-size:12px; line-height:1.6; }
.login-card .form-error:not(:empty) { padding:11px 13px; margin-bottom:16px!important; border:1px solid color-mix(in srgb,var(--danger) 25%,transparent); border-radius:10px; background:var(--danger-bg); }
.login-screen .login-card .login-submit { display:flex; align-items:center; justify-content:center; gap:14px; min-height:52px; margin-top:5px; border-radius:12px; font-size:13px; box-shadow:0 7px 16px color-mix(in srgb,var(--primary) 18%,transparent); }
.login-submit[aria-busy="true"] svg { opacity:.35; }
.login-form-footer { display:flex; align-items:center; gap:12px; margin-top:32px; }
.login-form-footer p { margin:0; color:var(--muted); font-size:10px; white-space:nowrap; }
.login-form-footer>span { flex:1; height:1px; background:var(--line); }
@media(max-width:840px) {
  .login-screen { padding:88px 20px 32px; }
  .login-layout { grid-template-columns:1fr; max-width:460px; border-radius:22px; }
  .login-story { display:none; }
  .login-screen .login-card { padding:34px; }
  .login-mobile-brand { display:flex; color:var(--ink); margin:0 0 28px; }
  .login-mobile-brand .brand-mark { width:36px; height:36px; font-size:20px; }
  .login-heading-icon { display:none; }
}
@media(max-width:420px) {
  .login-screen { padding:78px 14px 24px; }
  .login-screen .login-card { padding:28px 24px; }
  .login-card h1 { font-size:25px; }
  .login-form-footer { gap:8px; }
}
@media(max-height:700px) { .login-screen { place-items:start center; } }