/* Login/register surfaces use the same hierarchy in standalone and embedded views. */
html[data-theme="light"] .account-page {
    background:
        radial-gradient(circle at 78% 4%, rgba(121, 88, 210, .09), transparent 30%),
        var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

html[data-theme="light"] .account-page.account-embed {
    background: var(--surface) !important;
}

html[data-theme="light"] .account-page .account-card {
    border-color: var(--border) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-elevated) !important;
}

html[data-theme="light"] .account-page.account-embed .account-card {
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme="light"] .account-page .account-card h2 {
    color: var(--text-primary) !important;
}

html[data-theme="light"] .account-page .account-card > p,
html[data-theme="light"] .account-page .auth-switch {
    color: var(--text-secondary) !important;
}

html[data-theme="light"] .account-page .account-card label {
    color: #454052 !important;
}

html[data-theme="light"] .account-page .account-card input {
    border-color: var(--border-strong) !important;
    background: var(--surface-muted) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

html[data-theme="light"] .account-page .account-card input::placeholder {
    color: #817b8d !important;
    -webkit-text-fill-color: #817b8d !important;
}

html[data-theme="light"] .account-page .account-card input:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border)) !important;
}

html[data-theme="light"] .account-page .account-card input:focus {
    border-color: var(--accent) !important;
    background: var(--surface-elevated) !important;
    box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

html[data-theme="light"] .account-page .password-toggle {
    color: #625b72 !important;
}

html[data-theme="light"] .account-page .password-toggle:hover,
html[data-theme="light"] .account-page .password-toggle:focus-visible {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}

html[data-theme="light"] .account-page .primary-btn {
    border-color: var(--accent) !important;
    background: linear-gradient(135deg, #8b6cdf, var(--accent)) !important;
    color: #f8f6fb !important;
    box-shadow: 0 10px 24px rgba(104, 71, 194, .24) !important;
}

html[data-theme="light"] .account-page .auth-switch {
    border-color: var(--border) !important;
}

html[data-theme="light"] .account-page .auth-switch a {
    color: var(--accent) !important;
}

html[data-theme="light"] .account-page .auth-switch a:hover {
    color: var(--accent-hover) !important;
}

html[data-theme="light"] .account-page .auth-error {
    border-color: color-mix(in srgb, var(--danger) 36%, var(--border)) !important;
    background: rgba(185, 76, 98, .08) !important;
    color: var(--danger) !important;
}