/* Shared sizing for login and registration: desktop, tablet and phone. */
:root { --slate-200: #e2e8f0; --slate-400: #94a3b8; }
html { min-width: 0; }
body { min-width: 0; line-height: 1.5; }
.page-container { min-height: 100vh; min-height: 100svh; }
.left-panel, .right-panel, .form-wrapper, .form-container, .left-content { min-width: 0; }
.left-panel { flex: 1 1 48%; width: 48%; padding: clamp(28px, 4vw, 64px); }
.left-content { width: 100%; }
.left-content h1 { font-size: clamp(28px, 3.1vw, 44px); overflow-wrap: break-word; }
.right-panel { flex: 1 1 52%; width: 52%; padding: clamp(24px, 4vw, 64px); }
.form-wrapper { width: 100%; max-width: 440px; margin-inline: auto; }
.form-container { width: 100%; max-width: none; }
.form-group label { display: block; margin-bottom: 7px; font-weight: 600; font-size: 14px; }
.form-control { min-height: 48px; font-size: 16px; min-width: 0; }
.input-wrapper:has(.password-toggle) .form-control { padding-right: 52px; }
.password-toggle { width: 44px; min-height: 44px; right: 4px; display: flex; align-items: center; justify-content: center; }
.submit-btn { min-height: 48px; }
.alert, .success-card, .switch-form-link { overflow-wrap: anywhere; }
.form-control:focus-visible, .submit-btn:focus-visible, a:focus-visible { outline: 3px solid #5eead4; outline-offset: 3px; }
.auth-home { color: inherit; text-decoration: none; }
@media (max-width: 1100px) {
    .page-container { display: flex; flex-direction: column; background: var(--slate-100); }
    .left-panel { display: none; }
    .mobile-header { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 24px 58px; background: linear-gradient(135deg, var(--primary-800), var(--primary-600)); color: white; }
    .mobile-header .logo { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; margin-bottom: 12px; }
    .mobile-header h1 { font-size: clamp(25px, 4vw, 32px); line-height: 1.25; }
    .right-panel { display: block; flex: 1 0 auto; width: 100%; padding: 0 32px 36px; background: transparent; }
    .form-wrapper { width: 100%; max-width: 560px; margin-inline: auto; }
    .form-container { position: relative; width: 100%; max-width: none; margin-top: -28px; padding: 32px; border-radius: 16px; background: white; box-shadow: 0 12px 32px #134e4a12; }
    .form-header { display: block; text-align: left; margin-bottom: 26px; }
    .form-header h2 { font-size: 27px; }
    .form-header p { font-size: 14px; margin-top: 6px; }
    .switch-form-link { display: none; }
    .mobile-features { display: block; padding: 28px 0 0; background: transparent; }
    .mobile-features-title { text-align: center; font-size: 20px; margin-bottom: 16px; }
    .mobile-features-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    .mobile-feature-card { min-width: 0; padding: 16px 8px; border: 1px solid var(--primary-100); border-radius: 12px; background: var(--primary-50); display: flex; flex-direction: column; align-items: center; text-align: center; }
    .mobile-feature-card .icon { color: var(--primary-500); font-size: 24px; margin-bottom: 10px; }
    .mobile-feature-card h3 { font-size: 12px; line-height: 1.5; color: var(--primary-900); }
}
@media (max-width: 599px) {
    .mobile-header { padding: 24px 16px 48px; }
    .right-panel { padding: 0 16px 28px; }
    .form-container { margin-top: -24px; padding: 24px 20px; }
    .form-header h2 { font-size: 25px; }
    .mobile-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mobile-feature-card { padding: 16px 12px; }
    .mobile-feature-card h3 { font-size: 14px; }
    .success-card { padding: 24px 16px; }
}
@media (min-width: 1101px) and (max-height: 780px) {
    .left-panel, .right-panel { align-items: flex-start; padding-block: 32px; }
    .left-content .logo { margin-bottom: 24px; }
    .left-content p, .features { margin-bottom: 24px; }
}