/* Authentication screens use the same calm surface system as the app workspace. */
body.auth-page { background: #f4f7fb; color: #14213d; min-height: 100dvh; overflow-x: hidden; overflow-y: auto; }
.auth-page .auth-wrapper { align-items: center; background: transparent; box-sizing: border-box; display: flex; justify-content: center; margin: 0; max-width: none; min-height: 100dvh; padding: 28px 24px; position: relative; width: 100%; }
.auth-page .auth-wrapper::before { display: none; }
.auth-context-panel, .auth-page .auth-card { background: #fff; border: 1px solid #e3ebf6; border-radius: 24px; box-shadow: 0 14px 38px rgba(31, 59, 103, .07); }
.auth-context-panel { align-self: stretch; display: flex; flex-direction: column; min-height: 580px; padding: 30px; }
.auth-context-panel .auth-back { align-self: flex-start; color: #62718b; font-size: 13px; font-weight: 700; margin-bottom: 42px; }
.auth-back-floating { color: #62718b; font-size: 13px; font-weight: 700; left: 30px; position: fixed; top: 30px; }
.auth-context-panel .auth-back:hover { color: var(--primary);
  background-image: var(--primary-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.auth-brand-mark { align-items: center; display: flex; gap: 11px; }
.auth-brand-mark img { height: 39px; width: 39px; }
.auth-brand-mark strong { color: #111c33; font-size: 25px; letter-spacing: -.05em; }
.auth-context-copy { margin-top: auto; }
.auth-context-copy .auth-kicker { color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background-image: var(--primary-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.auth-context-copy h1 { color: #152344; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.045em; line-height: 1.08; margin: 10px 0 12px; }
.auth-context-copy p { color: #70809a; font-size: 14px; line-height: 1.65; margin: 0; }
.auth-page .auth-card { align-self: center; box-sizing: border-box; display: flex; flex-direction: column; min-height: 472px; height: auto; max-height: calc(100dvh - 40px); justify-self: center; max-width: 540px !important; overflow-y: auto; padding: 34px !important; width: 100%; }
.register-page .auth-card.wide { max-width: 540px !important; }
.auth-page .modal-header { margin-bottom: 26px !important; min-height: 50px; }
.auth-page .modal-header > div { gap: 13px !important; }
.auth-page .modal-header h3 { color: #13203c !important; font-size: 23px !important; letter-spacing: -.04em; }
.auth-page .modal-header p { color: #71809a !important; font-size: 13px !important; line-height: 1.45; }
.auth-page .login-brand-logo { height: 42px; width: 42px; }
.auth-page .form-group { margin-bottom: 17px !important; }
.auth-page .form-label { color: #263653; font-size: 12px !important; font-weight: 750 !important; margin-bottom: 7px !important; }
.auth-page .input-icon { display: none !important; }
.auth-page .form-input.has-left-icon { padding-left: 14px !important; }
.auth-page .form-input, .auth-page .form-select { background: #f8faff !important; border: 1px solid #dce6f3 !important; border-radius: 12px !important; color: #172440 !important; min-height: 48px; padding: 11px 14px !important; }
.auth-page .form-input::placeholder { color: #98a6bb; }
.auth-page .form-input:focus, .auth-page .form-select:focus { background: #fff !important; border-color: var(--primary) !important; box-shadow: 0 0 0 4px rgba(47,115,245,.11); }
.auth-page .input-wrapper .password-toggle { color: #53709d; font-size: 11px; font-weight: 700; right: 14px; z-index: 2; cursor: pointer; pointer-events: auto; user-select: none; }
.auth-page .role-tabs-wrap { background: #f4f7fc; border: 1px solid #e0e8f4; border-radius: 14px; gap: 4px; margin-bottom: 20px; padding: 4px; }
.auth-page .role-tab-btn { border-radius: 10px; color: #71809a; font-size: 12px; font-weight: 700; min-height: 38px; padding: 8px 10px; }
.auth-page .role-tab-btn.active { background: var(--primary-gradient); box-shadow: 0 6px 14px rgba(47,115,245,.22); color: #fff; }
.auth-page .form-checkbox-label { color: #71809a; }
.auth-page .form-checkbox { accent-color: var(--primary); }
.auth-page .btn-primary { border: 0; border-radius: 12px; box-shadow: 0 10px 20px rgba(47,115,245,.18); min-height: 50px; color: #fff; -webkit-text-fill-color: #fff; }
.auth-page .btn-primary:hover { transform: translateY(-1px); }
.auth-page .auth-card > div:last-child { color: #71809a !important; margin-top: 18px !important; min-height: 18px; }
.register-page .auth-card.wide { padding: 34px !important; display: flex; flex-direction: column; min-height: 472px; height: auto; max-height: calc(100dvh - 40px); overflow-y: auto; }
.register-page #registerForm { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.register-page .modal-header { margin-bottom: 26px !important; }
.register-page #registerForm > .form-group { margin-bottom: 14px !important; }
.register-page .register-password-grid { gap: 14px !important; margin-bottom: 14px !important; }
.register-page .register-password-grid .form-group { margin-bottom: 0 !important; }
.register-page .register-contact-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.register-page .register-contact-grid .form-group { margin-bottom: 14px !important; min-width: 0; }
.register-page .register-step { display: none; }
.register-page .register-step.active { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.register-progress { margin: -4px 0 20px; }
.register-progress-meta { align-items: center; color: #71809a; display: flex; font-size: 11px; font-weight: 700; justify-content: space-between; margin-bottom: 7px; }
.register-progress-meta strong { color: var(--primary);
  background-image: var(--primary-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.register-progress-track { background: #e8eef7; border-radius: 999px; height: 5px; overflow: hidden; }
.register-progress-track span { background: var(--primary-gradient); border-radius: inherit; display: block; height: 100%; transition: width .25s ease; width: 33.333%; }
.register-step-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: auto; padding-top: 20px; }
.register-step-actions .btn { min-height: 44px; padding: 10px 20px; }
.register-step-actions .register-next { min-height: 50px; min-width: 130px; }
.register-step[data-register-step="1"] .register-step-actions .register-next { width: 100%; }
.register-step-actions .register-prev { background: #eef3fa; border: 0; border-radius: 12px; color: #5e718e; }
.register-step-actions .register-prev:hover { background: #e3ebf6; }
.register-final-actions { justify-content: flex-start; margin-top: 10px; }
.login-page #loginForm { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.login-page #loginForm #submitBtn { margin-top: auto; }
.auth-page .preference-controls-floating { align-items: center; background: rgba(255,255,255,.72); border: 1px solid #d8e2ef; border-radius: 999px; color: #334866; height: 38px; justify-content: center; margin: 0; padding: 0 7px; right: 30px; top: 24px; width: 62px; z-index: 1100; }
.auth-page .preference-controls-floating .theme-switch { border: 1px solid currentColor; color: inherit; height: 20px; min-width: 48px; }
html[data-theme='dark'] .auth-page .preference-controls-floating { background: #142036; border-color: #344967; color: #d6e5f8; }
html[data-theme='dark'] body.auth-page { background: #0d1524; color: #edf4ff; }
html[data-theme='dark'] .auth-context-panel, html[data-theme='dark'] .auth-page .auth-card { background: #142036; border-color: #263855; box-shadow: none; }
html[data-theme='dark'] .auth-brand-mark strong, html[data-theme='dark'] .auth-context-copy h1, html[data-theme='dark'] .auth-page .modal-header h3, html[data-theme='dark'] .auth-page .form-label { color: #edf4ff !important; }
html[data-theme='dark'] .auth-context-copy p, html[data-theme='dark'] .auth-page .modal-header p, html[data-theme='dark'] .auth-page .form-checkbox-label, html[data-theme='dark'] .auth-page .auth-card > div:last-child { color: #a8b8d0 !important; }
html[data-theme='dark'] .auth-context-panel .auth-back { color: #b4c4dc; }
html[data-theme='dark'] .auth-page .form-input, html[data-theme='dark'] .auth-page .form-select { background: #0f192a !important; border-color: #2d4263 !important; color: #edf4ff !important; }
html[data-theme='dark'] .auth-page .form-input:focus, html[data-theme='dark'] .auth-page .form-select:focus { background: #101c30 !important; }
html[data-theme='dark'] .auth-page .role-tabs-wrap { background: #101b2d; border-color: #2b3d5b; }
html[data-theme='dark'] .auth-page .role-tab-btn { color: #a8b8d0; }
html[data-theme='dark'] .auth-page .role-tab-btn.active { color: #fff; }
html[data-theme='dark'] .register-progress-track { background: #283a56; }
html[data-theme='dark'] .register-step-actions .register-prev { background: #20314a; color: #d6e5f8; }
html[data-theme='dark'] .register-step-actions .register-prev:hover { background: #2b4060; }
@media (max-width: 760px) { .auth-page .auth-wrapper { max-width: 560px; min-height: 100dvh; padding: 76px 18px 18px; } .auth-page .auth-card { max-width: none !important; padding: 26px !important; } .auth-back-floating { left: 18px; top: 25px; } .auth-page .preference-controls-floating { right: 18px; top: 14px; } }
@media (max-width: 480px) { .auth-page .auth-wrapper { padding-inline: 12px; } .auth-back-floating { left: 12px; } .auth-page .auth-card, .register-page .auth-card.wide { border-radius: 20px; padding: 22px !important; } .register-page .register-password-grid, .register-page .register-contact-grid { grid-template-columns: 1fr !important; } .register-step-actions { justify-content: stretch; } .register-step-actions .btn { flex: 1; } }