/**
 * Login — mainstream SaaS (clean card)
 */

body.auth-page {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 24px !important;
    font-family: var(--tp-font, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
    background: var(--tp-page-gradient, linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%)) !important;
    background-color: var(--tp-page-bg, #f8fafc) !important;
    -webkit-font-smoothing: antialiased !important;
}

body.auth-page .login-container {
    width: 100% !important;
    max-width: 400px !important;
    background: var(--tp-surface, #fff) !important;
    border: 1px solid var(--tp-border, #e2e8f0) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-lg, 0 8px 30px rgba(15, 23, 42, 0.08)) !important;
    overflow: hidden !important;
}

body.auth-page .login-header {
    display: none !important;
}

body.auth-page .login-body {
    padding: 36px 32px 32px !important;
}

body.auth-page .login-body > h2,
body.auth-page .login-footer {
    display: none !important;
}

/* Brand */
body.auth-page .tp-login-brand {
    margin: 0 0 28px !important;
}

body.auth-page .tp-login-brand-line {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    line-height: 1.2 !important;
}

body.auth-page .tp-login-brand-primary {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
    color: var(--tp-text, #0f172a) !important;
}

body.auth-page .tp-login-brand-secondary {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--tp-text-muted, #64748b) !important;
}

body.auth-page .tp-login-tagline {
    display: block !important;
    margin-top: 8px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--tp-text-muted, #64748b) !important;
}

/* Form */
body.auth-page .form-group {
    margin-bottom: 18px !important;
}

body.auth-page .form-label {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--tp-text, #0f172a) !important;
}

body.auth-page .form-input {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid var(--tp-border, #e2e8f0) !important;
    border-radius: 8px !important;
    background: var(--tp-surface, #fff) !important;
    font-size: 15px !important;
    color: var(--tp-text, #0f172a) !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.auth-page .form-input:focus {
    outline: none !important;
    border-color: var(--tp-primary, #2563eb) !important;
    box-shadow: 0 0 0 3px var(--tp-primary-ring, rgba(37, 99, 235, 0.2)) !important;
}

body.auth-page .form-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 22px !important;
}

body.auth-page .form-checkbox label {
    font-size: 13px !important;
    color: var(--tp-text-muted, #64748b) !important;
}

body.auth-page .form-checkbox input {
    accent-color: var(--tp-primary, #2563eb) !important;
}

body.auth-page .error-message {
    margin-bottom: 16px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
}

body.auth-page .success-message {
    margin-bottom: 16px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
}

body.auth-page .btn-login {
    display: block !important;
    width: 100% !important;
    padding: 11px 16px !important;
    border: none !important;
    border-radius: 8px !important;
    background: var(--tp-primary, #2563eb) !important;
    color: #fff !important;
    font-size: 0 !important;
    font-weight: 600 !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

body.auth-page .btn-login:hover {
    background: var(--tp-primary-hover, #1d4ed8) !important;
}

body.auth-page .btn-login::after {
    content: "Sign in" !important;
    font-size: 15px !important;
}

body.auth-page .login-body > div[style*="text-align: center"] {
    margin-top: 18px !important;
    text-align: center !important;
}

body.auth-page .login-body a {
    font-size: 13px !important;
    color: var(--tp-text-muted, #64748b) !important;
    text-decoration: none !important;
}

body.auth-page .login-body a:hover {
    color: var(--tp-primary, #2563eb) !important;
}

[data-theme="dark"] body.auth-page {
    background: var(--tp-page-gradient) !important;
    background-color: var(--tp-page-bg) !important;
}

[data-theme="dark"] body.auth-page .login-container {
    background: var(--tp-surface) !important;
    border-color: var(--tp-border) !important;
}

[data-theme="dark"] body.auth-page .form-input {
    background: var(--tp-surface-raised) !important;
    border-color: var(--tp-border) !important;
    color: var(--tp-text) !important;
}

[data-theme="dark"] body.auth-page .tp-login-brand-primary {
    color: var(--tp-text) !important;
}