.zk-auth {
    --bg-primary: #1a1d21;
    --bg-secondary: #22262b;
    --bg-card: #22262b;
    --bg-tertiary: #2c3036;
    --bg-input: #2c3036;
    --border-primary: #3a3f46;
    --border-secondary: #2c3036;
    --border-focus: #009b4f;
    --text-primary: #e8ecef;
    --text-secondary: #9aa3ad;
    --text-tertiary: #9aa3ad;
    --color-primary: #009b4f;
    --color-primary-light: rgba(0, 155, 79, 0.18);
    --shadow-xl: 0 0.0625rem 0 rgba(255, 255, 255, 0.03), 0 1.25rem 3rem rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(180deg, #1a1d21 0%, #171a1d 100%);
    color: var(--text-primary);
    color-scheme: dark;
}
.zk-auth .login-container { width: 100%; max-width: 25rem; padding: var(--spacing-lg); }
.zk-auth.zk-auth-wide .login-container { max-width: 26.25rem; }
.zk-auth .login-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: var(--radius-xl); padding: var(--spacing-xl); box-shadow: var(--shadow-xl); }
.zk-auth .login-header { text-align: center; margin-bottom: var(--spacing-xl); }
.zk-auth .login-logo { font-size: 3rem; margin-bottom: var(--spacing-md); }
.zk-auth .login-logo-img { display: block; width: 6.5rem; height: 6.5rem; margin: 0 auto var(--spacing-md); object-fit: contain; }
.zk-auth .login-title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0 0 var(--spacing-xs); }
.zk-auth .login-subtitle { color: var(--text-tertiary); font-size: 0.875rem; font-weight: 400; line-height: 1.4; }
.zk-auth .login-form .form-group, .zk-auth .form-group { margin-bottom: var(--spacing-md); }
/* ≥16px prevents iOS Safari auto-zoom on focus (login + reset + OTP). */
.zk-auth .form-input, .zk-auth .totp-input, .zk-auth input[type="email"], .zk-auth input[type="password"], .zk-auth input[type="text"], .zk-auth input[type="tel"], .zk-auth input[type="number"] { font-size: 1rem; }
.zk-auth .login-form .btn-primary { width: 100%; padding: var(--spacing-md); font-size: 1rem; }
.zk-auth .sso-divider { display: flex; align-items: center; gap: var(--spacing-sm); margin: var(--spacing-md) 0; color: var(--text-tertiary); font-size: 0.8rem; }
.zk-auth .sso-divider::before, .zk-auth .sso-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-primary); }
.zk-auth .sso-btn { width: 100%; padding: var(--spacing-md); font-size: 0.95rem; display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); }
.zk-auth .login-footer { text-align: center; margin-top: var(--spacing-lg); padding-top: var(--spacing-lg); border-top: 1px solid var(--border-primary); }
.zk-auth .login-footer a { color: var(--color-primary); font-size: 0.875rem; }
.zk-auth .totp-section { display: none; }
.zk-auth .totp-section.show { display: block; }
.zk-auth .totp-input { font-size: 1.5rem; text-align: center; letter-spacing: 0.5em; font-family: monospace; }
.zk-auth .alert { padding: var(--spacing-md); border-radius: var(--radius-md); margin-bottom: var(--spacing-md); font-size: 0.875rem; }
.zk-auth .alert-danger { background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid var(--color-danger); }
.zk-auth .alert-success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success); }
.zk-auth .remember-me { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-md); }
.zk-auth .remember-me a { color: var(--color-primary); font-size: 0.875rem; text-decoration: none; }
.zk-auth .form-checkbox input[type="checkbox"], .zk-auth .remember-me input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 1.125rem; height: 1.125rem; border: 2px solid var(--border-primary); border-radius: 4px; background: var(--bg-primary) !important; cursor: pointer; position: relative; flex-shrink: 0; transition: border-color 0.15s ease, background 0.15s ease; margin: 0; accent-color: unset; }
.zk-auth .form-checkbox input[type="checkbox"]:checked, .zk-auth .remember-me input[type="checkbox"]:checked { background: var(--color-primary) !important; border-color: var(--color-primary); }
.zk-auth .form-checkbox input[type="checkbox"]:checked::after, .zk-auth .remember-me input[type="checkbox"]:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--text-primary); font-size: 0.65rem; font-weight: 700; line-height: 1; }
.zk-auth .form-checkbox input[type="checkbox"]:hover, .zk-auth .remember-me input[type="checkbox"]:hover { border-color: var(--text-secondary); }
.zk-auth .form-checkbox { display: inline-flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; color: var(--text-secondary); font-size: 0.875rem; }
/* forgot-password wizard steps + footer overrides */
.zk-auth .login-subtitle-block { margin: 0 0 var(--spacing-lg); }
.zk-auth .form-input { width: 100%; }
.zk-auth .step { display: none; }
.zk-auth .step.active { display: block; }
.zk-auth.zk-auth-wide .login-footer { border-top: none; padding-top: 0; }