/* Approved login composition. Deliberately scoped: recovery and app stay unchanged. */
#login-screen {
  --login-surface: #fff;
  --login-ink: #0a1d4b;
  --login-muted: #627c9d;
  --login-input: #f0f5fc;
  background: radial-gradient(ellipse at 35% 25%, #f6faff, #e4efff);
  padding: 32px;
  overflow-y: auto;
}
#login-screen .login-container {
  width: min(1390px, 100%);
  min-height: 720px;
  max-height: none;
  grid-template-columns: 48% 52%;
  background: var(--login-surface);
  box-shadow: 0 24px 60px #173f6b29;
  flex-shrink: 0;
  margin: auto;
}
#login-screen .login-form-panel { padding: 76px 12.8% 96px; overflow: visible; }
#login-screen .login-card { max-width: 454px; }
#login-screen .login-logo { width: 250px; margin: 0 0 58px; filter: none; opacity: 1; }
#login-screen .login-title { font-size: clamp(24px, 2.25vw, 32px); color: var(--login-ink); line-height: 1.25; letter-spacing: -.6px; }
#login-screen .login-subtitle { font-size: 17px; color: var(--login-muted); margin: 12px 0 44px; line-height: 1.5; }
#login-screen .form-group { margin-bottom: 22px; }
#login-screen .form-group label { color: var(--login-ink); font-size: 14px; font-weight: 500; margin-bottom: 9px; }
#login-screen .login-input-wrap input { height: 50px; background: var(--login-input); color: var(--login-ink); border: 1px solid transparent; font-size: 14px; padding-left: 52px; transition: border-color .18s, box-shadow .18s; }
#login-screen .login-input-wrap input::placeholder { color: var(--login-muted); opacity: 1; }
#login-screen .login-password-wrap input { padding-right: 52px; }
#login-screen .login-input-ico { left: 19px; width: 20px; height: 20px; color: var(--login-muted); }
#login-screen .login-input-wrap input:focus { border-color: #1761c3; box-shadow: 0 0 0 3px #1761c324; }
#login-screen .login-password-toggle { width: 44px; height: 44px; display: grid; place-items: center; color: var(--login-muted); padding: 10px; }
#login-screen .login-password-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#login-screen .login-eye-slash { display: none; }
#login-screen .login-password-toggle[aria-pressed="true"] .login-eye-slash { display: block; }
#login-screen button:focus-visible, #login-screen a:focus-visible { outline: 3px solid #5c9cff; outline-offset: 4px; }
#login-screen .login-submit { background: #1761c3; color: #fff; height: 52px; font-size: 17px; margin-top: 6px; border: 0; transition: background .18s; }
#login-screen .login-submit:hover { background: #104fa7; }
#login-screen .login-submit:disabled { opacity: .8; cursor: wait; }
#login-screen .login-forgot-link { color: #075cd3; font-size: 14px; margin-top: 24px; }
#login-screen .login-spinner { display: none; width: 18px; height: 18px; border: 2px solid #ffffff60; border-top-color: #fff; border-radius: 50%; }
#login-screen .login-submit[aria-busy="true"] .login-spinner { display: block; animation: login-spin .8s linear infinite; }
#login-screen .login-submit[aria-busy="true"] .login-submit-arrow { display: none; }
@keyframes login-spin { to { transform: rotate(360deg); } }
#login-screen .login-clip-defs { position: absolute; }
#login-screen .login-visual-panel { position: absolute; inset: 0; padding: 0; display: block; background: none; overflow: hidden; pointer-events: none; }
#login-screen .login-art-background { position: absolute; inset: 0; clip-path: url(#login-panel-clip); background: linear-gradient(125deg, #5c9eff 30%, #0751b1 55%, #03265d 100%); }
#login-screen .login-art-background::after { content: ''; position: absolute; width: 74%; height: 66%; right: -29%; bottom: 7%; border: 1px solid #28a7ef66; border-radius: 50%; transform: rotate(25deg); }
#login-screen .login-photo-frame { position: absolute; right: -13%; top: 0; width: 65%; height: 66%; mask-image: linear-gradient(#000 72%, transparent); }
#login-screen .login-visual-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; object-position: 67% center; }
#login-screen .login-photo-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #075eb133, transparent 65%, #064496); }
#login-screen .login-curve { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
#login-screen .login-curve path { fill: none; stroke: #438ff3; stroke-width: 19px; }
#login-screen .login-visual-illustration { position: absolute; left: 44%; top: 27%; width: 40%; height: auto; z-index: 2; }
#login-screen .login-benefits { right: 3.6%; bottom: 17.5%; width: 155px; gap: 18px; }
#login-screen .login-benefit-card { height: 62px; min-height: 62px; padding: 10px 12px; gap: 10px; border-radius: 11px; background: #1761c34d; border-color: #5ba4ff26; }
#login-screen .login-benefit-icon { width: 27px; height: 30px; background: none; border-radius: 0; }
#login-screen .login-benefit-icon .ico { width: 26px; height: 26px; }
#login-screen .login-benefit-text { font-size: 12px; font-weight: 500; }
html[data-theme="dark"] #login-screen { --login-surface: #102337; --login-ink: #edf4ff; --login-muted: #adbed4; --login-input: #1c344e; background: #091a2c; }
html[data-theme="dark"] #login-screen .login-logo { background: #fff; border-radius: 8px; padding: 12px; box-sizing: content-box; max-width: calc(100% - 24px); }
html[data-theme="dark"] #login-screen .login-forgot-link { color: #8ebcff; }
@media (min-width: 981px) and (max-width: 1200px) {
  #login-screen .login-container { min-height: 640px; }
  #login-screen .login-form-panel { padding: 54px 10%; }
  #login-screen .login-logo { width: 220px; margin-bottom: 46px; }
  #login-screen .login-title { font-size: 25px; }
  #login-screen .login-subtitle { font-size: 15px; margin-bottom: 34px; }
  #login-screen .login-benefits { right: 2.3%; width: 143px; gap: 14px; }
  #login-screen .login-benefit-card { padding: 8px; gap: 8px; }
  #login-screen .login-visual-illustration { left: 45%; top: 33%; width: 38%; }
}
@media (min-width: 981px) and (max-height: 850px) {
  #login-screen .login-container { min-height: 660px; }
  #login-screen .login-form-panel { padding-top: 54px; padding-bottom: 54px; }
  #login-screen .login-logo { margin-bottom: 46px; }
  #login-screen .login-subtitle { margin-bottom: 34px; }
}
@media (max-width: 980px) {
  #login-screen .login-container { width: min(510px, 100%); min-height: 0; grid-template-columns: 1fr; }
  #login-screen .login-visual-panel { display: none; }
  #login-screen .login-form-panel { padding: 48px 40px; }
  #login-screen .login-logo { width: 230px; margin-bottom: 42px; }
  #login-screen .login-title { font-size: 27px; }
  #login-screen .login-subtitle { font-size: 16px; margin-bottom: 32px; }
}
@media (max-width: 480px) {
  #login-screen { padding: 16px; }
  #login-screen .login-form-panel { padding: 36px 24px; }
  #login-screen .login-logo { width: 210px; margin-bottom: 34px; }
  #login-screen .login-title { font-size: 23px; letter-spacing: -.5px; }
  #login-screen .login-subtitle { font-size: 15px; margin-top: 10px; }
  #login-screen .login-input-wrap input { font-size: 16px; padding-left: 44px; }
  #login-screen .login-input-ico { left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #login-screen *, #login-screen *::after { transition: none; animation: none !important; }
}