/* The existing two-panel composition, with the form as the focal point. */
.dx-legacy-login { max-width: 960px; }
.dx-legacy-login .dx-login-grid { display: grid; grid-template-columns: .85fr 1.15fr; border: 1px solid var(--dx-border); border-radius: var(--dx-radius-md); overflow: hidden; background: var(--dx-surface); }
.dx-legacy-login .dx-visual-panel { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 20px; background: var(--dx-brand-soft); color: var(--dx-brand); }
.dx-legacy-login .dx-sys-brand { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.dx-legacy-login .dx-sys-sub { display: block; margin-top: 4px; color: var(--dx-text-soft); font-size: 13px; }
.dx-legacy-login .dx-login-intro .dx-login-title { font-size: 22px; color: var(--dx-brand); letter-spacing: -.025em; line-height: 1.3; font-weight: 500; margin: 0 0 12px; }
.dx-legacy-login .dx-login-intro p { color: var(--dx-text-soft); margin: 0; font-size: 14px; line-height: 1.6; }
.dx-legacy-login .dx-form-panel { padding: 20px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.dx-legacy-login .dx-form-header { margin-bottom: 24px; }
.dx-legacy-login :is(.dx-headline,.dx-welcome-title) { margin: 0 0 8px; font-size: 28px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; overflow-wrap: anywhere; text-wrap: pretty; }
.dx-legacy-login .dx-desc { color: var(--dx-text-soft); margin: 0; font-size: 14px; line-height: 1.5; }
.dx-legacy-login .dx-reg-callout { margin: 24px 0 0; font-size: 14px; color: var(--dx-text-soft); line-height: 1.6; }
.dx-legacy-login .dx-reg-callout a { color: var(--dx-brand); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.dx-legacy-login .dx-access-btn { align-self: flex-start; margin-top: 24px; }
.dx-legacy-login .dx-logged-in-panel { min-height: 280px; }
.dx-legacy-login .dx-login-pass { width: 100%; max-width: 300px; align-self: center; padding: 18px; border-radius: 16px; color: #fff; transform: rotate(-4deg); mask: radial-gradient(circle at 0 76%,transparent 7px,#000 7.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 76%,transparent 7px,#000 7.5px) right / 51% 100% no-repeat; }
.dx-legacy-login .dx-login-pass-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.dx-legacy-login .dx-login-pass-head > :last-child { color: #fff0b5; font-size: 11px; font-weight: 400; letter-spacing: 0; }
.dx-legacy-login .dx-login-pass-art { position: relative; display: grid; place-items: center; height: 124px; }
.dx-legacy-login .dx-login-pass-number { font-size: 88px; line-height: 1; font-weight: 500; letter-spacing: -.08em; padding-right: .08em; }
.dx-legacy-login .dx-login-pass-orbit { position: absolute; width: 156px; height: 100px; border-radius: 50%; transform: rotate(-28deg); }
.dx-legacy-login .dx-login-pass-caption { display: block; margin-top: 12px; font-size: 11px; color: #eee0dc; }
@media (max-width: 760px) {
  .dx-legacy-login .dx-login-grid { grid-template-columns: minmax(0,1fr); }
  .dx-legacy-login .dx-visual-panel { display: grid; grid-template-columns: minmax(0,1fr) 116px; align-items: center; gap: 16px; padding: 16px; }
  .dx-legacy-login .dx-login-pass { padding: 10px; border-radius: 12px; }
  .dx-legacy-login .dx-login-pass-head { font-size: 10px; }
  .dx-legacy-login .dx-login-pass-head > :last-child { font-size: 8px; }
  .dx-legacy-login .dx-login-pass-art { height: 48px; }
  .dx-legacy-login .dx-login-pass-number { font-size: 40px; }
  .dx-legacy-login .dx-login-pass-orbit { width: 70px; height: 44px; }
  .dx-legacy-login .dx-login-pass-caption { display: none; }
  .dx-legacy-login .dx-login-intro { display: none; }
  .dx-legacy-login .dx-form-panel { padding: 20px 16px; }
  .dx-legacy-login :is(.dx-headline,.dx-welcome-title) { font-size: 24px; }
}