/* Mobile account and information surfaces from the supplied mobile prototype.
 * Every override stays below the existing desktop breakpoint. */
@layer fuuvo-mobile-design {
@media (max-width: 920px) {
    html body {
        --mobile-account-ink: #171821 !important;
        --mobile-account-muted: #676976 !important;
        --mobile-account-line: #dddfe6 !important;
        --mobile-account-surface: #fff !important;
        --mobile-account-soft: #f6f6f8 !important;
        --mobile-account-tint: #eeeafa !important;
        --mobile-account-accent: #554776 !important;
        --mobile-account-warning: #8d540e !important;
        --mobile-account-warning-soft: #fff6e8 !important;
        --mobile-account-danger: #b33950 !important;
        --mobile-account-danger-soft: #fff0f3 !important;
        --mobile-account-success: #166b44 !important;
    }

    html[data-theme="dark"] body,
    html[data-ui-theme="dark"] body,
    html body[data-theme="dark"],
    html body[data-ui-theme="dark"] {
        --mobile-account-ink: #f2f1f6 !important;
        --mobile-account-muted: #b3b0c0 !important;
        --mobile-account-line: #393545 !important;
        --mobile-account-surface: #1a1820 !important;
        --mobile-account-soft: #24212d !important;
        --mobile-account-tint: #30283f !important;
        --mobile-account-accent: #d5bfef !important;
        --mobile-account-warning: #efc98d !important;
        --mobile-account-warning-soft: #352c22 !important;
        --mobile-account-danger: #ffb3c3 !important;
        --mobile-account-danger-soft: #39242d !important;
        --mobile-account-success: #91d7b0 !important;
    }

    html body:is(.kc-page, .legal-page),
    html body :is(.membership-app, .purchased-services-app, .pricing-page-app, .portal-shell) {
        --member-text: var(--mobile-account-ink) !important;
        --member-muted: var(--mobile-account-muted) !important;
        --member-line: var(--mobile-account-line) !important;
        --member-soft: var(--mobile-account-soft) !important;
        --member-brand: var(--mobile-account-accent) !important;
        --member-surface: var(--mobile-account-surface) !important;
        --service-bg: var(--mobile-account-surface) !important;
        --service-panel: var(--mobile-account-surface) !important;
        --service-soft: var(--mobile-account-soft) !important;
        --service-line: var(--mobile-account-line) !important;
        --service-text: var(--mobile-account-ink) !important;
        --service-muted: var(--mobile-account-muted) !important;
        --service-brand: var(--mobile-account-accent) !important;
        --kc-bg: var(--mobile-account-surface) !important;
        --kc-surface: var(--mobile-account-surface) !important;
        --kc-surface-soft: var(--mobile-account-soft) !important;
        --kc-text: var(--mobile-account-ink) !important;
        --kc-muted: var(--mobile-account-muted) !important;
        --kc-line: var(--mobile-account-line) !important;
        --kc-accent: var(--mobile-account-accent) !important;
        --kc-radius: 15px !important;
    }

    html body .ac-export-summary { padding-left: 20px !important; color: var(--mobile-account-muted) !important; font-size: 14px !important; line-height: 1.75 !important; }
    html body .ac-export-summary li { margin: 6px 0 !important; overflow-wrap: anywhere !important; }

    /* Authentication keeps its real forms, OAuth and consent checks. */
    html body .auth-page:has(.auth-brand) {
        min-height: 100dvh !important;
        background: radial-gradient(ellipse 115% 180px at 16% 0, #fff0f5 0, transparent 72%), radial-gradient(ellipse 110% 210px at 90% 0, #f1edfc 0, transparent 72%), var(--mobile-account-surface) !important;
        color: var(--mobile-account-ink) !important;
        color-scheme: light dark !important;
    }
    html:is([data-theme="dark"], [data-ui-theme="dark"]) body .auth-page:has(.auth-brand),
    html body[data-ui-theme="dark"] .auth-page:has(.auth-brand) {
        background: radial-gradient(ellipse 115% 180px at 16% 0, #35222f 0, transparent 72%), radial-gradient(ellipse 110% 210px at 90% 0, #2c253c 0, transparent 72%), var(--mobile-account-surface) !important;
    }
    html body .auth-page:has(.auth-brand) .auth-header {
        height: 56px !important;
        min-height: 56px !important;
        padding: 6px 14px !important;
        border: 0 !important;
        background: transparent !important;
    }
    html body .auth-page:has(.auth-brand) .auth-header > .auth-brand,
    html body .auth-page:has(.auth-brand) :is(.switch-link, .auth-mode-tabs, .auth-showcase, .illustration) { display: none !important; }
    html body .auth-mobile-back[hidden] {
        width: 44px !important;
        height: 44px !important;
        display: grid !important;
        place-items: center !important;
        color: var(--mobile-account-ink) !important;
        font-size: 24px !important;
        border-radius: 12px !important;
    }
    html body .auth-page:has(.auth-brand) :is(.auth-main, .auth-main.has-showcase) {
        display: block !important;
        min-height: 0 !important;
        width: 100% !important;
        max-width: 520px !important;
        padding: 12px 20px 24px !important;
        margin: 0 auto !important;
        flex: 1 !important;
        background: transparent !important;
    }
    html body .auth-page:has(.auth-brand) .auth-card {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        color: var(--mobile-account-ink) !important;
    }
    html body .auth-mobile-logo[hidden] { display: block !important; width: 210px !important; height: 60px !important; margin: 16px 0 24px !important; }
    html body .auth-mobile-logo img { display: block !important; width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: left center !important; }
    html body .auth-title-mobile[hidden], html body .auth-mobile-footer[hidden] { display: block !important; }
    html body .auth-page:has(.auth-brand) .auth-title-desktop { display: none !important; }
    html body .auth-page:has(.auth-brand) .auth-title {
        margin: 12px 0 !important;
        text-align: left !important;
        color: var(--mobile-account-ink) !important;
        font-size: 27px !important;
        font-weight: 650 !important;
        line-height: 1.2 !important;
        letter-spacing: -.7px !important;
    }
    html body .auth-page:has(.auth-brand) .auth-subtitle { margin: 0 0 24px !important; text-align: left !important; font-size: 14px !important; line-height: 1.6 !important; color: var(--mobile-account-muted) !important; }
    html body .auth-page:has(.auth-brand) .field { margin: 18px 0 !important; }
    html body .auth-page:has(.auth-brand) .field label { margin-bottom: 8px !important; font-size: 12px !important; font-weight: 600 !important; color: var(--mobile-account-ink) !important; }
    html body .auth-page:has(.auth-brand) .field input {
        height: 48px !important;
        border-radius: 12px !important;
        padding: 12px 13px !important;
        font-size: 16px !important;
        border-color: var(--mobile-account-line) !important;
        background: var(--mobile-account-surface) !important;
        color: var(--mobile-account-ink) !important;
    }
    html body .auth-page:has(.auth-brand) .password-field input { padding-right: 48px !important; }
    html body .auth-page:has(.auth-brand) .password-toggle { width: 44px !important; height: 48px !important; min-height: 48px !important; color: var(--mobile-account-muted) !important; }
    html body .auth-page:has(.auth-brand) :is(.submit-btn, .social-btn) { height: 48px !important; border-radius: 13px !important; font-size: 14px !important; font-weight: 600 !important; }
    html body .auth-page:has(.auth-brand) .submit-btn { color: #fff !important; background: #202027 !important; }
    html body .auth-page:has(.auth-brand) .social-btn { border-color: var(--mobile-account-line) !important; background: var(--mobile-account-surface) !important; color: var(--mobile-account-ink) !important; }
    html body .auth-page:has(.auth-brand) :is(.helper, .legal-check, .consent-note, .age-note) { font-size: 12px !important; color: var(--mobile-account-muted) !important; }
    html body .auth-page:has(.auth-brand) .legal-check { grid-template-columns: 18px minmax(0, 1fr) !important; align-items: start !important; }
    html body .auth-page:has(.auth-brand) .legal-link { color: var(--mobile-account-accent) !important; font-weight: 500 !important; text-decoration: underline !important; }
    html body .auth-page:has(.auth-brand) .auth-links { gap: 14px !important; flex-wrap: wrap !important; margin: 18px 0 !important; font-size: 12px !important; }
    html body .auth-mobile-footer { text-align: center !important; margin-top: 20px !important; font-size: 12px !important; line-height: 1.7 !important; color: var(--mobile-account-muted) !important; }
    html body .auth-mobile-footer p { margin: 0 0 12px !important; }
    html body .auth-mobile-footer a { display: inline-flex !important; align-items: center !important; min-height: 44px !important; color: var(--mobile-account-accent) !important; }
    html body .auth-page:has(.auth-brand) .auth-footer { gap: 12px !important; padding: 14px 20px 20px !important; border: 0 !important; flex-wrap: wrap !important; font-size: 11px !important; background: transparent !important; color: var(--mobile-account-muted) !important; }
    html body:has(.auth-page .auth-brand) .legal-dialog { width: 100% !important; max-height: 88dvh !important; border-radius: 24px 24px 0 0 !important; background: var(--mobile-account-surface) !important; color: var(--mobile-account-ink) !important; }
    html body:has(.auth-page .auth-brand) .legal-overlay { align-items: flex-end !important; padding: 0 !important; }
    html body.auth-forbidden-page { min-height: 100dvh !important; padding: 20px !important; background: var(--mobile-account-surface) !important; color: var(--mobile-account-ink) !important; }
    html body.auth-forbidden-page > .card { width: 100% !important; padding: 24px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
    html body.auth-forbidden-page h1 { font-size: 27px !important; line-height: 1.2 !important; color: var(--mobile-account-ink) !important; }
    html body.auth-forbidden-page p { font-size: 14px !important; line-height: 1.6 !important; color: var(--mobile-account-muted) !important; }
    html body.auth-forbidden-page .actions { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }
    html body.auth-forbidden-page .btn { min-height: 48px !important; border-radius: 13px !important; font-size: 14px !important; font-weight: 600 !important; }
    html body.auth-forbidden-page .btn.primary { background: #272330 !important; }
    html body.auth-forbidden-page .btn.secondary { border-color: var(--mobile-account-line) !important; color: var(--mobile-account-ink) !important; background: var(--mobile-account-surface) !important; }

    /* The real settings dialog becomes a full mobile page; its tabs and forms
     * retain the existing theme, language, profile, password and legal handlers. */
    html body #user-settings-overlay {
        inset: 0 !important;
        width: 100% !important;
        height: var(--mobile-viewport-height, 100dvh) !important;
        max-height: none !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        overflow: hidden !important;
        background: var(--mobile-account-surface) !important;
        z-index: 10030 !important;
    }
    html body #user-settings-dialog {
        --text: var(--mobile-account-ink) !important;
        --muted: var(--mobile-account-muted) !important;
        --brand-strong: var(--mobile-account-accent) !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: var(--mobile-account-surface) !important;
        color: var(--mobile-account-ink) !important;
        box-shadow: none !important;
        color-scheme: light !important;
    }
    html body #user-settings-dialog > .auth-close {
        position: absolute !important;
        top: calc(6px + env(safe-area-inset-top)) !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: transparent !important;
        color: var(--mobile-account-ink) !important;
        font-size: 27px !important;
        line-height: 1 !important;
        box-shadow: none !important;
        z-index: 3 !important;
    }
    html body #user-settings-dialog .settings-shell { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important; }
    html body #user-settings-dialog .settings-sidebar { flex: 0 0 auto !important; display: block !important; padding: 0 !important; border: 0 !important; background: var(--mobile-account-surface) !important; overflow: visible !important; }
    html body #user-settings-dialog .settings-sidebar > div:first-child { display: flex !important; align-items: center !important; justify-content: center !important; height: calc(56px + env(safe-area-inset-top)) !important; padding: env(safe-area-inset-top) 60px 0 !important; box-sizing: border-box !important; }
    html body #user-settings-dialog .settings-sidebar h3 { margin: 0 !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.3 !important; text-align: center !important; color: var(--mobile-account-ink) !important; }
    html body #user-settings-dialog .settings-nav { display: flex !important; width: calc(100% - 40px) !important; max-width: calc(100% - 40px) !important; box-sizing: border-box !important; gap: 4px !important; margin: 0 20px 12px !important; padding: 4px !important; min-height: 48px !important; border: 0 !important; border-radius: 12px !important; background: var(--mobile-account-soft) !important; overflow-x: auto !important; }
    html body #user-settings-dialog .settings-nav-btn { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; min-height: 40px !important; padding: 8px 8px !important; justify-content: center !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; color: var(--mobile-account-muted) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.4 !important; white-space: nowrap !important; }
    html body #user-settings-dialog .settings-nav-btn > span { max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    html body #user-settings-dialog .settings-nav-btn.active { background: var(--mobile-account-surface) !important; color: var(--mobile-account-ink) !important; box-shadow: 0 1px 4px #17182112 !important; }
    html body #user-settings-dialog .settings-content { flex: 1 1 0 !important; width: 100% !important; min-height: 0 !important; gap: 0 !important; padding: 12px 20px calc(24px + env(safe-area-inset-bottom)) !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; scrollbar-gutter: auto !important; background: var(--mobile-account-surface) !important; }
    html body #user-settings-dialog .settings-panel { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; gap: 20px !important; }
    html body #user-settings-dialog .settings-panel:not(.active) { display: none !important; }
    html body #user-settings-dialog .settings-panel.active { display: grid !important; }
    html body #user-settings-dialog .settings-panel-head h4 { margin: 0 !important; color: var(--mobile-account-ink) !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.4 !important; }
    html body #user-settings-dialog .settings-grid { display: grid !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
    html body #user-settings-dialog :is(.settings-card, .settings-profile-form, .settings-password-form) { min-width: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
    html body #user-settings-dialog .settings-grid > .settings-card { padding: 16px 0 !important; border-bottom: 1px solid var(--mobile-account-line) !important; }
    html body #user-settings-dialog .settings-grid > .settings-card:first-child { padding-top: 0 !important; }
    html body #user-settings-dialog .settings-field { gap: 8px !important; }
    html body #user-settings-dialog :is(.settings-field, .auth-field) label { color: var(--mobile-account-ink) !important; font-size: 12px !important; font-weight: 600 !important; }
    html body #user-settings-dialog :is(.settings-select, .auth-field input:not([type="hidden"]):not([type="file"]), .auth-field textarea) { width: 100% !important; max-width: 100% !important; min-height: 48px !important; padding: 12px 13px !important; box-sizing: border-box !important; border: 1px solid var(--mobile-account-line) !important; border-radius: 12px !important; background: var(--mobile-account-surface) !important; color: var(--mobile-account-ink) !important; font-size: 16px !important; line-height: 1.4 !important; box-shadow: none !important; }
    html body #user-settings-dialog .auth-field input[readonly] { background: var(--mobile-account-soft) !important; color: var(--mobile-account-muted) !important; }
    html body #user-settings-dialog .auth-field:has(.password-toggle) input { padding-right: 48px !important; }
    html body #user-settings-dialog .password-toggle { right: 2px !important; bottom: 2px !important; width: 44px !important; height: 44px !important; color: var(--mobile-account-muted) !important; }
    html body #user-settings-dialog :is(input, select, textarea):focus-visible { border-color: var(--mobile-account-accent) !important; outline: 2px solid var(--mobile-account-tint) !important; outline-offset: 2px !important; }
    html body #user-settings-dialog :is(.settings-inline-help, .settings-account-name-help, .settings-profile-copy > span, .settings-legal-copy > span) { color: var(--mobile-account-muted) !important; font-size: 12px !important; line-height: 1.6 !important; }
    html body #user-settings-dialog .settings-form-actions { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-top: 4px !important; }
    html body #user-settings-dialog .settings-form-actions > :is(.btn, .auth-submit-btn) { width: 100% !important; min-height: 48px !important; padding: 12px 16px !important; border: 0 !important; border-radius: 13px !important; background: var(--mobile-account-ink) !important; color: var(--mobile-account-surface) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; box-shadow: none !important; }
    html body #user-settings-dialog .settings-form-actions > :is(.btn, .auth-submit-btn):disabled { opacity: .55 !important; cursor: not-allowed !important; }
    html body #user-settings-dialog .settings-password-form { padding-top: 20px !important; border-top: 1px solid var(--mobile-account-line) !important; }
    html body #user-settings-dialog .settings-profile-head { align-items: center !important; gap: 12px !important; }
    html body #user-settings-dialog :is(.settings-profile-avatar-wrap, .settings-profile-avatar) { width: 56px !important; height: 56px !important; flex-basis: 56px !important; border-radius: 50% !important; }
    html body #user-settings-dialog .settings-profile-avatar { background: var(--mobile-account-tint) !important; color: var(--mobile-account-ink) !important; font-size: 22px !important; }
    html body #user-settings-dialog :is(.settings-profile-copy strong, .settings-legal-copy strong, .settings-legal-head h5) { color: var(--mobile-account-ink) !important; font-size: 14px !important; }
    html body #user-settings-dialog :is(.settings-profile-actions .btn, .settings-legal-btn) { min-height: 44px !important; padding: 8px 12px !important; border: 1px solid var(--mobile-account-line) !important; border-radius: 10px !important; background: var(--mobile-account-surface) !important; color: var(--mobile-account-ink) !important; font-size: 12px !important; }
    html body #user-settings-dialog .settings-legal-list { gap: 0 !important; }
    html body #user-settings-dialog .settings-legal-item { min-height: 72px !important; padding: 14px 0 !important; gap: 12px !important; border: 0 !important; border-bottom: 1px solid var(--mobile-account-line) !important; border-radius: 0 !important; background: transparent !important; }
    html body #user-settings-dialog :is(.settings-status, .auth-message) { overflow-wrap: anywhere !important; font-size: 12px !important; line-height: 1.6 !important; }
    html body #user-settings-dialog :is([hidden], .hidden) { display: none !important; }
    html:is([data-theme="dark"], [data-ui-theme="dark"]) body #user-settings-dialog,
    html body:is([data-theme="dark"], [data-ui-theme="dark"]) #user-settings-dialog { color-scheme: dark !important; }
    html body #legal-doc-overlay { inset: 0 !important; width: 100% !important; height: var(--mobile-viewport-height, 100dvh) !important; max-height: none !important; padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; overflow: hidden !important; background: var(--mobile-account-surface) !important; z-index: 10040 !important; }
    html body #legal-doc-overlay .legal-doc-dialog { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; border: 0 !important; border-radius: 0 !important; background: var(--mobile-account-surface) !important; color: var(--mobile-account-ink) !important; box-shadow: none !important; }
    html body #legal-doc-overlay .legal-doc-dialog > .auth-close { position: absolute !important; top: calc(6px + env(safe-area-inset-top)) !important; right: max(12px, env(safe-area-inset-right)) !important; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--mobile-account-ink) !important; font-size: 27px !important; line-height: 1 !important; box-shadow: none !important; z-index: 3 !important; }
    html body #legal-doc-overlay .legal-doc-head { flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; height: calc(56px + env(safe-area-inset-top)) !important; padding: env(safe-area-inset-top) 60px 0 !important; box-sizing: border-box !important; border-bottom: 1px solid var(--mobile-account-line) !important; }
    html body #legal-doc-overlay .legal-doc-head h3 { margin: 0 !important; color: var(--mobile-account-ink) !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.3 !important; text-align: center !important; }
    html body #legal-doc-content { flex: 1 1 0 !important; min-height: 0 !important; padding: 16px 20px calc(24px + env(safe-area-inset-bottom)) !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; color: var(--mobile-account-ink) !important; background: var(--mobile-account-surface) !important; font-size: 14px !important; line-height: 1.75 !important; overflow-wrap: anywhere !important; }

    /* Membership shows selectable plans on mobile without altering prices or checkout. */
    html body .membership-app .membership-main,
    html body .pricing-page-app .pricing-main,
    html body .purchased-services-app .purchased-services-main {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 12px 20px calc(24px + env(safe-area-inset-bottom)) !important;
        color: var(--mobile-account-ink) !important;
        background: var(--mobile-account-surface) !important;
        box-sizing: border-box !important;
    }
    html body :is(.membership-hero, .purchased-services-hero, .service-use-heading) { margin: 0 0 24px !important; }
    html body :is(.membership-kicker, .membership-plan-title p, .purchased-services-hero p, .service-use-heading > p) { display: none !important; }
    html body :is(.membership-hero h1, .pricing-heading h1, .purchased-services-hero h1, .service-use-heading h1) { margin: 12px 0 !important; color: var(--mobile-account-ink) !important; font-size: 27px !important; font-weight: 650 !important; letter-spacing: -.7px !important; line-height: 1.2 !important; }
    html body :is(.membership-hero > p:not(.membership-kicker), .pricing-heading p, .purchased-services-hero span, .service-use-heading > span) { margin-top: 0 !important; color: var(--mobile-account-muted) !important; font-size: 14px !important; line-height: 1.6 !important; }
    html body .membership-current { padding: 14px !important; margin-top: 16px !important; gap: 8px !important; border-radius: 15px !important; background: var(--mobile-account-tint) !important; }
    html body .membership-current strong { color: var(--mobile-account-ink) !important; background: var(--mobile-account-surface) !important; border-color: var(--mobile-account-line) !important; }
    html body :is(.membership-plans, .membership-addons, .membership-notes) { margin-top: 24px !important; }
    html body .membership-section-head { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; }
    html body .membership-section-head h2, html body .service-section-title h2 { color: var(--mobile-account-ink) !important; font-size: 18px !important; }
    html body .membership-section-head > div > p { display: none !important; }
    html body .membership-period { width: 100% !important; min-height: 48px !important; padding: 4px !important; border: 0 !important; border-radius: 12px !important; background: var(--mobile-account-soft) !important; }
    html body .membership-period button { flex: 1 !important; min-height: 40px !important; border-radius: 9px !important; font-size: 13px !important; font-weight: 600 !important; }
    html body .mobile-membership-plans[hidden] { display: flex !important; gap: 8px !important; margin: 20px 0 12px !important; }
    html body .mobile-membership-plans button { flex: 1 !important; min-width: 0 !important; min-height: 64px !important; padding: 12px 8px !important; border: 1px solid var(--mobile-account-line) !important; border-radius: 12px !important; background: var(--mobile-account-surface) !important; color: var(--mobile-account-ink) !important; font: inherit !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer !important; }
    html body .mobile-membership-plans button[aria-pressed="true"] { border-color: #a48ab9 !important; box-shadow: inset 0 0 0 1px #a48ab9 !important; background: var(--mobile-account-tint) !important; }
    html body .membership-plan-grid { display: block !important; margin-top: 12px !important; }
    html body .membership-plan-grid[data-mobile-plan] > .membership-plan-card { display: none !important; }
    html body .membership-plan-grid[data-mobile-plan] > .membership-plan-card[data-mobile-selected="true"] { display: flex !important; }
    html body :is(.membership-plan-card, .pricing-card, .purchased-service-card, .service-use-form, .service-result-card, .service-usage-section) { min-height: 0 !important; padding: 16px !important; margin-bottom: 12px !important; border: 1px solid var(--mobile-account-line) !important; border-radius: 15px !important; background: var(--mobile-account-surface) !important; box-shadow: none !important; }
    html body .membership-plan-card.featured { border-color: #a48ab9 !important; background: linear-gradient(135deg, var(--mobile-account-surface), var(--mobile-account-tint)) !important; }
    html body .membership-plan-title h3 { font-size: 19px !important; }
    html body .membership-plan-title > span { width: 34px !important; height: 34px !important; background: var(--mobile-account-tint) !important; color: var(--mobile-account-accent) !important; }
    html body .membership-plan-badge { border-radius: 0 0 8px 8px !important; background: #65527d !important; }
    html body .membership-price { min-height: 0 !important; margin-top: 20px !important; }
    html body .membership-price strong { font-size: 28px !important; }
    html body .membership-plan-card ul { grid-template-columns: 1fr !important; margin: 18px 0 !important; gap: 10px !important; }
    html body .membership-plan-card li { font-size: 13px !important; color: var(--mobile-account-muted) !important; }
    html body :is(.membership-plan-card button, .membership-secondary-action, .membership-addon-list button, .purchased-service-actions > a.primary, .service-use-form button) { min-height: 48px !important; border-radius: 13px !important; background: #272330 !important; color: #fff !important; border-color: #272330 !important; font-size: 14px !important; font-weight: 600 !important; }
    html body .membership-secondary-action { background: var(--mobile-account-surface) !important; color: var(--mobile-account-ink) !important; border-color: var(--mobile-account-line) !important; }
    html body .membership-addon-list article { padding: 16px 0 !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 12px !important; }
    html body .membership-addon-list article button { grid-column: 1 / -1 !important; }
    html body .membership-notes { grid-template-columns: 1fr !important; gap: 12px !important; padding-top: 20px !important; }
    html body :is(.pricing-grid, .purchased-service-grid, .service-use-layout) { grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 20px !important; }
    html body .pricing-card h2 { font-size: 19px !important; color: var(--mobile-account-ink) !important; }
    html body .pricing-card .price { font-size: 28px !important; color: var(--mobile-account-accent) !important; }
    html body :is(.purchased-services-hero, .service-section-title) { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; }
    html body .service-usage-row { border-radius: 12px !important; }
    html body .service-usage-row summary { padding: 14px 12px !important; gap: 10px !important; }
    html body .service-usage-row summary span { min-width: 0 !important; overflow-wrap: anywhere !important; }
    html body .service-usage-row summary small { font-size: 11px !important; }
    html body .service-use-form textarea { min-height: 160px !important; padding: 12px 13px !important; background: var(--mobile-account-surface) !important; font-size: 16px !important; line-height: 1.5 !important; border-radius: 12px !important; }
    html body .service-result-content { min-height: 180px !important; font-size: 14px !important; }

    /* Help hubs use compact list rows; articles retain full published content. */
    html body.kc-page { background: var(--mobile-account-surface) !important; color: var(--mobile-account-ink) !important; }
    html body.fuuvo-mobile-prototype .kc-header {
        position: sticky !important;
        top: 0 !important;
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        align-items: center !important;
        height: 56px !important;
        min-height: 56px !important;
        padding: 0 max(12px, env(safe-area-inset-left)) !important;
        gap: 4px !important;
        border: 0 !important;
        background: var(--mobile-account-surface) !important;
        color: var(--mobile-account-ink) !important;
        box-shadow: none !important;
        z-index: 80 !important;
    }
    html body.fuuvo-mobile-prototype .kc-header-inner {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    html body.fuuvo-mobile-prototype .kc-header :is(.kc-nav-toggle, .kc-nav) { display: none !important; }
    html body.fuuvo-mobile-prototype .kc-header .kc-workspace-menu {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        padding: 10px !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: transparent !important;
        color: var(--mobile-account-ink) !important;
    }
    html body.fuuvo-mobile-prototype .kc-header .kc-workspace-menu :is(picture, img) { width: 24px !important; height: 24px !important; }
    html body.fuuvo-mobile-prototype .kc-header .kc-workspace-menu img { filter: brightness(0) !important; }
    html:is([data-theme="dark"], [data-ui-theme="dark"]) body.fuuvo-mobile-prototype .kc-header .kc-workspace-menu img,
    html body.fuuvo-mobile-prototype:is([data-theme="dark"], [data-ui-theme="dark"]) .kc-header .kc-workspace-menu img { filter: brightness(0) invert(1) !important; }
    html body .kc-container { width: 100% !important; max-width: none !important; margin-right: 0 !important; margin-left: 0 !important; padding-right: 20px !important; padding-left: 20px !important; box-sizing: border-box !important; }
    html body .kc-hero { padding: 12px 0 0 !important; border: 0 !important; background: var(--mobile-account-surface) !important; }
    html body .kc-hero-orb, html body .kc-kicker, html body .kc-section-number { display: none !important; }
    html body .kc-hero h1 { margin: 12px 0 !important; font-size: 27px !important; font-weight: 650 !important; line-height: 1.2 !important; letter-spacing: -.7px !important; color: var(--mobile-account-ink) !important; }
    html body .kc-hero-intro { max-width: none !important; margin: 0 0 20px !important; color: var(--mobile-account-muted) !important; font-size: 14px !important; line-height: 1.6 !important; }
    html body .kc-search { min-height: 48px !important; margin: 16px 0 0 !important; padding: 0 13px !important; border-radius: 12px !important; border: 1px solid var(--mobile-account-line) !important; box-shadow: none !important; background: var(--mobile-account-soft) !important; }
    html body .kc-search input { font-size: 16px !important; }
    html body .kc-search kbd { display: none !important; }
    html body .kc-card-section { padding-top: 20px !important; padding-bottom: 12px !important; }
    html body .kc-section-heading { display: block !important; margin-bottom: 12px !important; }
    html body .kc-section-heading h2 { font-size: 18px !important; letter-spacing: -.4px !important; }
    html body .kc-section-heading > p { margin: 8px 0 !important; color: var(--mobile-account-muted) !important; font-size: 12px !important; }
    html body .kc-card-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; }
    html body .kc-topic-card { display: flex !important; flex-direction: row !important; align-items: center !important; min-height: 72px !important; gap: 12px !important; padding: 14px 0 !important; border: 0 !important; border-bottom: 1px solid var(--mobile-account-line) !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; transform: none !important; }
    html body .kc-topic-card::after { content: none !important; display: none !important; }
    html body .kc-topic-card[hidden] { display: none !important; }
    html body .kc-topic-card:last-child { border-bottom: 0 !important; }
    html body .kc-topic-icon { width: 26px !important; min-width: 26px !important; height: 26px !important; flex: 0 0 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--mobile-account-accent) !important; }
    html body .kc-topic-icon svg { width: 24px !important; height: 24px !important; }
    html body .kc-topic-copy { flex: 1 !important; min-width: 0 !important; gap: 4px !important; }
    html body .kc-topic-copy strong { display: block !important; font-size: 14px !important; font-weight: 550 !important; line-height: 1.4 !important; }
    html body .kc-topic-copy > span { display: block !important; margin-top: 4px !important; color: var(--mobile-account-muted) !important; font-size: 11px !important; line-height: 1.45 !important; }
    html body .kc-topic-arrow { position: static !important; flex: 0 0 auto !important; margin: 0 !important; color: var(--mobile-account-muted) !important; font-size: 20px !important; transform: none !important; }
    html body .kc-flow-section, html body .kc-overview-section { padding-top: 20px !important; padding-bottom: 20px !important; }
    html body :is(.kc-flow, .kc-overview-shell, .kc-article-layout, .legal-article-layout) { display: block !important; }
    html body .kc-flow article { margin-bottom: 12px !important; padding: 16px !important; border-radius: 15px !important; }
    html body .kc-overview-shell { padding: 16px !important; border-radius: 15px !important; }
    html body .kc-article-main { padding-top: 12px !important; padding-bottom: 24px !important; }
    html body .kc-breadcrumbs { margin-bottom: 16px !important; font-size: 11px !important; gap: 6px !important; flex-wrap: wrap !important; }
    html body .kc-article-nav { position: static !important; padding: 0 !important; margin: 0 0 20px !important; border: 0 !important; background: transparent !important; }
    html body .kc-article-nav > p, html body .kc-side-support { display: none !important; }
    html body .kc-article-nav > nav { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; padding: 0 0 8px !important; overflow-x: auto !important; }
    html body .kc-article-nav > nav a { min-width: max-content !important; min-height: 40px !important; margin: 0 !important; padding: 10px 12px !important; border: 1px solid var(--mobile-account-line) !important; border-radius: 10px !important; font-size: 12px !important; }
    html body .kc-back-link { display: inline-flex !important; min-height: 44px !important; align-items: center !important; margin-bottom: 8px !important; font-size: 12px !important; }
    html body .kc-article { min-width: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
    html body .kc-article-hero { margin-bottom: 20px !important; padding: 0 0 16px !important; border: 0 !important; border-bottom: 1px solid var(--mobile-account-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
    html body .kc-article-hero h1 { margin: 12px 0 !important; color: var(--mobile-account-ink) !important; font-size: 27px !important; letter-spacing: -.7px !important; line-height: 1.2 !important; }
    html body .kc-copy { font-size: 14px !important; line-height: 1.7 !important; color: var(--mobile-account-ink) !important; overflow-wrap: anywhere !important; }
    html body .kc-article > .kc-copy { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
    html body .kc-copy :is(p, li) { font-size: 14px !important; line-height: 1.7 !important; }
    html body .kc-copy h2 { margin-top: 24px !important; font-size: 20px !important; }
    html body .kc-copy h3 { font-size: 18px !important; }
    html body .kc-copy :is(table, pre) { display: block !important; max-width: 100% !important; overflow-x: auto !important; }
    html body .kc-toc { position: static !important; margin-top: 24px !important; padding: 16px !important; border: 1px solid var(--mobile-account-line) !important; border-radius: 15px !important; background: var(--mobile-account-soft) !important; }
    html body .kc-article-pager { gap: 12px !important; grid-template-columns: 1fr !important; }
    html body .kc-footer { padding: 20px 0 !important; color: var(--mobile-account-muted) !important; font-size: 11px !important; }
    html body .kc-footer .kc-container { display: block !important; }
    html body.legal-page .legal-article-hero { padding: 12px 0 16px !important; text-align: left !important; }
    html body.legal-page .legal-article > .legal-copy { padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; }

    /* Safety and privacy tools stay editable; no simulated permission or request state. */
    html body .portal-main { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 12px 20px 24px !important; box-sizing: border-box !important; background: var(--mobile-account-surface) !important; color: var(--mobile-account-ink) !important; }
    html body :is(.safety-redesign-page, .safety-account-page, .safety-report-page, .safety-safe-page, .data-control-page, .ai-card-redesign) {
        --sr-blue: var(--mobile-account-accent) !important;
        --sr-ink: var(--mobile-account-ink) !important;
        --sr-text: var(--mobile-account-ink) !important;
        --sr-muted: var(--mobile-account-muted) !important;
        --sr-line: var(--mobile-account-line) !important;
        --sr-soft: var(--mobile-account-soft) !important;
        --ac-blue: var(--mobile-account-accent) !important;
        --ac-deep: var(--mobile-account-ink) !important;
        --ac-text: var(--mobile-account-ink) !important;
        --ac-muted: var(--mobile-account-muted) !important;
        --ac-line: var(--mobile-account-line) !important;
        --ac-soft: var(--mobile-account-soft) !important;
        --ss-blue: var(--mobile-account-accent) !important;
        --ss-deep: var(--mobile-account-ink) !important;
        --ss-text: var(--mobile-account-ink) !important;
        --ss-muted: var(--mobile-account-muted) !important;
        --ss-line: var(--mobile-account-line) !important;
        --ss-pale: var(--mobile-account-soft) !important;
        --ss-orange: var(--mobile-account-warning) !important;
        --ss-red: var(--mobile-account-danger) !important;
        width: 100% !important;
        color: var(--mobile-account-ink) !important;
    }
    html body :is(.sr-hero, .sr-hero.compact) { padding: 12px 0 20px !important; text-align: left !important; }
    html body :is(.sr-hero, .sr-hero.compact) h1 { font-size: 27px !important; font-weight: 650 !important; line-height: 1.2 !important; letter-spacing: -.7px !important; }
    html body :is(.sr-hero, .ac-heading) p { font-size: 14px !important; line-height: 1.6 !important; color: var(--mobile-account-muted) !important; }
    html body :is(.sr-home-grid, .sr-two-grid, .sr-three-grid, .sr-content-grid, .sr-account-grid, .sr-rights-grid, .ac-training-grid, .ac-contact-cards, .ac-policy-layout) { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
    html body :is(.sr-home-grid, .sr-two-grid, .sr-account-grid, .sr-rights-grid, .ac-home-grid) { gap: 0 !important; }
    html body :is(.sr-feature-card, .sr-wide-card, .sr-account-grid > a, .ac-home-grid > a) {
        min-height: 72px !important;
        padding: 14px 0 !important;
        grid-template-columns: 28px minmax(0, 1fr) auto !important;
        gap: 12px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--mobile-account-line) !important;
        border-radius: 0 !important;
        background: transparent !important;
    }
    html body :is(.sr-feature-card, .sr-wide-card, .sr-account-grid > a, .ac-home-grid > a) > :is(svg, img.safety-design-icon) { width: 24px !important; height: 24px !important; object-fit: contain !important; }
    html body :is(.sr-feature-card, .sr-wide-card, .sr-account-grid > a, .ac-home-grid > a) strong { font-size: 14px !important; font-weight: 550 !important; line-height: 1.4 !important; }
    html body :is(.sr-feature-card, .sr-wide-card, .sr-account-grid > a, .ac-home-grid > a) small { font-size: 11px !important; line-height: 1.45 !important; }
    html body :is(.sr-feature-card, .sr-wide-card, .sr-account-grid > a, .ac-home-grid > a) > b { font-size: 20px !important; color: var(--mobile-account-muted) !important; }
    html body :is(.sr-wide-card, .sr-account-grid > a, .ac-home-grid > a):hover { background: var(--mobile-account-soft) !important; }
    html body .sr-rights-grid > a { min-height: 72px !important; padding: 14px 0 !important; display: grid !important; grid-template-columns: 28px minmax(0, 1fr) 16px !important; gap: 4px 12px !important; border: 0 !important; border-bottom: 1px solid var(--mobile-account-line) !important; border-radius: 0 !important; text-align: left !important; align-items: center !important; }
    html body .sr-rights-grid > a > :is(svg, img.safety-design-icon) { width: 24px !important; height: 24px !important; grid-column: 1 !important; grid-row: 1 / 3 !important; object-fit: contain !important; }
    html body .sr-rights-grid > a strong { grid-column: 2 !important; margin: 0 !important; font-size: 14px !important; font-weight: 550 !important; }
    html body .sr-rights-grid > a small { grid-column: 2 !important; margin: 0 !important; font-size: 11px !important; line-height: 1.45 !important; }
    html body .sr-rights-grid > a b { grid-column: 3 !important; grid-row: 1 / 3 !important; margin: 0 !important; font-size: 20px !important; }
    html body :is(.sr-banner, .sr-login-banner, .sr-training-control, .sr-process, .sr-three-grid article, .sr-content-grid article, .ac-training-banner, .ac-info-strip, .ac-support-strip, .ac-contact-cards article) { min-height: 0 !important; padding: 16px !important; gap: 12px !important; border-color: var(--mobile-account-line) !important; border-radius: 15px !important; background: var(--mobile-account-soft) !important; box-shadow: none !important; }
    html body :is(.sr-banner, .sr-banner.slim, .sr-banner.caution, .sr-login-banner, .ac-training-banner) > :is(svg, img.safety-design-icon) { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; object-fit: contain !important; }
    html body :is(.sr-banner, .ac-training-banner) :is(strong, small), html body .sr-login-banner span { color: var(--mobile-account-ink) !important; font-size: 13px !important; line-height: 1.6 !important; }
    html body :is(.sr-three-grid article, .sr-content-grid article, .ac-contact-cards article) { grid-template-columns: 28px minmax(0, 1fr) !important; }
    html body :is(.sr-three-grid article, .sr-content-grid article) > :is(svg, img.safety-design-icon), html body .ac-contact-cards :is(i, svg, img.safety-design-icon) { width: 24px !important; height: 24px !important; object-fit: contain !important; }
    html body .ac-contact-cards i { background: transparent !important; }
    html body :is(.sr-three-grid, .sr-content-grid, .ac-contact-cards) strong { font-size: 14px !important; line-height: 1.45 !important; }
    html body .sr-section-title { margin: 24px 0 12px !important; font-size: 18px !important; }
    html body .sr-action-row > a { min-height: 48px !important; padding: 12px !important; border-color: var(--mobile-account-line) !important; border-radius: 12px !important; font-size: 13px !important; }
    html body .sr-action-row :is(svg, img.safety-design-icon) { width: 24px !important; height: 24px !important; object-fit: contain !important; }
    html body :is(.sr-text-links, .ac-footer-links) { flex-wrap: wrap !important; gap: 12px !important; }
    html body .ac-policy-layout aside { grid-template-columns: minmax(0, 1fr) !important; }
    html body .ac-training-grid > .ac-panel { min-height: 0 !important; padding: 16px !important; }
    html body :is(.ac-support-form, .ac-account-delete, .ac-export-email) :is(input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), select, textarea), html body :is(.ac-policy-search, .ac-chat-search, .dc-chat-search) {
        min-height: 48px !important;
        border-radius: 12px !important;
        border-color: var(--mobile-account-line) !important;
        background: var(--mobile-account-surface) !important;
        color: var(--mobile-account-ink) !important;
        font-size: 16px !important;
    }
    html body .ac-support-form textarea { min-height: 120px !important; }
    html body .ac-support-form > label { color: var(--mobile-account-ink) !important; }
    html body .ac-policy-tabs button { min-height: 48px !important; border-radius: 12px !important; border-color: var(--mobile-account-line) !important; background: var(--mobile-account-surface) !important; color: var(--mobile-account-ink) !important; }
    html body .ac-policy-tabs button.active { border-color: var(--mobile-account-accent) !important; background: var(--mobile-account-tint) !important; }
    html body :is(.portal-hero h1, .portal-heading h1, .ac-heading h1, .dc-heading h1, .rr-hero h1, .rr-heading h1, .ss-hero h1, .safety-local-heading h1) { font-size: 27px !important; line-height: 1.2 !important; letter-spacing: -.7px !important; color: var(--mobile-account-ink) !important; }
    html body :is(.portal-layout, .portal-help-grid, .portal-control-grid, .portal-contact-grid, .ac-home-grid, .ac-support-layout, .ac-export-layout, .ac-delete-layout, .dc-export-layout, .dc-delete-layout, .dc-record-layout, .rr-main-grid, .rr-records-grid, .safety-page-layout) { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
    html body :is(.portal-help-card, .portal-action-card, .portal-control-card, .portal-form-card, .ac-panel, .dc-panel, .rr-panel, .portal-policy-card, .safety-inline-card, .safety-page-toc) { min-width: 0 !important; padding: 16px !important; border-color: var(--mobile-account-line) !important; border-radius: 15px !important; background: var(--mobile-account-surface) !important; box-shadow: none !important; }
    html body .portal-help-card { min-height: 72px !important; border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid var(--mobile-account-line) !important; padding: 14px 0 !important; }
    html body .portal-icon-circle { width: 24px !important; height: 24px !important; min-width: 24px !important; border-radius: 0 !important; background: transparent !important; color: var(--mobile-account-accent) !important; }
    html body .portal-icon-circle :is(svg, img.safety-design-icon) { width: 24px !important; height: 24px !important; object-fit: contain !important; }
    html body .portal-help-copy strong { font-size: 14px !important; font-weight: 550 !important; }
    html body .portal-help-copy p { font-size: 11px !important; color: var(--mobile-account-muted) !important; }
    html body :is(.portal-toc, .safety-page-toc) { position: static !important; max-width: 100% !important; margin-bottom: 16px !important; }
    html body :is(.portal-field input, .portal-field textarea, .portal-field select, .ac-support-form textarea, .rr-input, .rr-textarea) { min-height: 48px !important; border-radius: 12px !important; font-size: 16px !important; border-color: var(--mobile-account-line) !important; background: var(--mobile-account-surface) !important; color: var(--mobile-account-ink) !important; }
    html body :is(.portal-button, .ac-primary-button, .dc-primary-button, .rr-primary, .ac-danger-button, .dc-danger-button) { min-height: 48px !important; border-radius: 13px !important; font-size: 14px !important; }
    html body :is(.ac-delete-layout, .dc-delete-layout) :is(button, input) { max-width: 100% !important; }
    html body :is(.ac-policy-tabs, .dc-link-row, .portal-tabs) { max-width: 100% !important; overflow-x: auto !important; }
    html body :is(.rr-status, .ac-status, .portal-status) { overflow-wrap: anywhere !important; font-size: 12px !important; line-height: 1.5 !important; }
    html body :is(.rr-status, .ac-status, .portal-status, .settings-status, #user-settings-dialog .auth-message).error { color: var(--mobile-account-danger) !important; }
    html body :is(.rr-status, .ac-status, .portal-status, .settings-status, #user-settings-dialog .auth-message).success { color: var(--mobile-account-success) !important; }
    html body :is(.feature-layout, .article-layout) { grid-template-columns: 1fr !important; gap: 16px !important; }
    html body :is(.feature-body, .article-body) { min-width: 0 !important; font-size: 14px !important; line-height: 1.7 !important; }
    html body :is(.feature-layout, .article-layout) :is(.feature-heading h1, .article-heading h1) { font-size: 27px !important; line-height: 1.2 !important; }
    html body :is(.feature-layout, .article-layout) :is(.feature-grid, .control-grid, .report-cards, .data-summary, .data-grid, .contact-grid, .three-columns) { grid-template-columns: 1fr !important; gap: 12px !important; }

    /* All safety subpages use the same compact mobile rows and real controls. */
    html body :is(.ss-hero, .ss-hero.compact, .rr-hero, .dc-heading.centered) { padding: 12px 0 20px !important; text-align: left !important; }
    html body :is(.ss-hero, .rr-hero, .dc-heading, .ai-card-heading) p { color: var(--mobile-account-muted) !important; font-size: 14px !important; line-height: 1.6 !important; }
    html body :is(.ss-entry-grid, .ss-action-grid, .ss-important-layout, .ss-decision-grid, .ss-conduct-grid, .ss-minor-grid, .ss-verify-grid, .ss-verify-steps, .ss-bottom-links) { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
    html body .ss-entry-grid { gap: 0 !important; margin-top: 20px !important; }
    html body :is(.ss-entry-grid > a, .ss-list-panel > a, .ss-feedback-card > a) { min-height: 72px !important; padding: 14px 0 !important; grid-template-columns: 28px minmax(0, 1fr) auto !important; gap: 12px !important; border: 0 !important; border-bottom: 1px solid var(--mobile-account-line) !important; border-radius: 0 !important; background: transparent !important; }
    html body :is(.ss-entry-grid > a, .ss-feedback-card > a) > :is(svg, img.safety-design-icon), html body .ss-list-panel i > :is(svg, img.safety-design-icon) { width: 24px !important; height: 24px !important; flex: 0 0 24px !important; object-fit: contain !important; }
    html body .ss-list-panel i { width: 28px !important; height: 28px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
    html body :is(.ss-entry-grid, .ss-list-panel, .ss-feedback-card) strong { color: var(--mobile-account-ink) !important; font-size: 14px !important; font-weight: 550 !important; line-height: 1.4 !important; }
    html body :is(.ss-entry-grid, .ss-list-panel, .ss-feedback-card) small { color: var(--mobile-account-muted) !important; font-size: 11px !important; line-height: 1.5 !important; }
    html body :is(.ss-entry-grid, .ss-list-panel, .ss-feedback-card, .ss-action-grid, .ss-bottom-links) b { font-size: 20px !important; color: var(--mobile-account-muted) !important; }
    html body .ss-action-grid > a { min-height: 48px !important; padding: 12px !important; gap: 10px !important; grid-template-columns: 24px minmax(0, 1fr) auto !important; border-color: var(--mobile-account-line) !important; border-radius: 12px !important; background: var(--mobile-account-surface) !important; color: var(--mobile-account-accent) !important; font-size: 14px !important; }
    html body :is(.ss-action-grid, .ss-bottom-links) :is(svg, img.safety-design-icon) { width: 24px !important; height: 24px !important; flex: 0 0 24px !important; object-fit: contain !important; }
    html body :is(.ss-safety-steps, .ss-list-panel, .ss-decision-grid article, .ss-minor-grid article, .ss-minor-banner, .ss-verify-steps, .ss-research-card, .ss-feedback-card, .ss-report-callout, .ss-verify-report, .ss-answer) { min-height: 0 !important; padding: 16px !important; gap: 12px !important; border: 1px solid var(--mobile-account-line) !important; border-radius: 15px !important; background: var(--mobile-account-surface) !important; box-shadow: none !important; color: var(--mobile-account-ink) !important; }
    html body :is(.ss-minor-banner, .ss-verify-steps) { background: var(--mobile-account-soft) !important; }
    html body .ss-warning-banner { min-height: 0 !important; padding: 16px !important; gap: 12px !important; border-color: color-mix(in srgb, var(--mobile-account-warning) 35%, var(--mobile-account-line)) !important; border-radius: 15px !important; background: var(--mobile-account-warning-soft) !important; }
    html body :is(.ss-warning-banner, .ss-minor-banner, .ss-report-callout, .ss-verify-report) > :is(svg, img.safety-design-icon) { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; object-fit: contain !important; }
    html body :is(.ss-warning-banner, .ss-report-callout, .ss-verify-report) strong { color: var(--mobile-account-ink) !important; font-size: 14px !important; line-height: 1.5 !important; }
    html body :is(.ss-warning-banner, .ss-report-callout, .ss-verify-report) small { color: var(--mobile-account-muted) !important; font-size: 12px !important; line-height: 1.6 !important; }
    html body :is(.ss-decision-grid article, .ss-report-callout, .ss-verify-report) { grid-template-columns: 30px minmax(0, 1fr) !important; }
    html body .ss-decision-grid i { width: 30px !important; height: 30px !important; border: 0 !important; }
    html body :is(.ss-decision-grid i, .ss-minor-grid article) > :is(svg, img.safety-design-icon) { width: 30px !important; height: 30px !important; object-fit: contain !important; }
    html body :is(.ss-report-callout, .ss-verify-report) > a { grid-column: 1 / -1 !important; min-height: 48px !important; padding: 12px !important; border-radius: 12px !important; font-size: 14px !important; }
    html body .ss-safety-steps > div { min-height: 86px !important; grid-template-columns: 25px 30px minmax(0, 1fr) !important; gap: 10px !important; }
    html body .ss-safety-steps i { width: 30px !important; height: 30px !important; border: 0 !important; }
    html body .ss-safety-steps i > :is(svg, img.safety-design-icon), html body .ss-verify-steps > div > :is(svg, img.safety-design-icon) { width: 26px !important; height: 26px !important; object-fit: contain !important; }
    html body .ss-verify-steps > div { grid-template-columns: 28px 26px minmax(0, 1fr) !important; gap: 10px !important; }
    html body .ss-verify-steps > div::after { content: none !important; }
    html body :is(.ss-safety-steps, .ss-list-panel, .ss-minor-grid, .ss-research-card, .ss-feedback-card) h2 { color: var(--mobile-account-ink) !important; font-size: 18px !important; line-height: 1.4 !important; }
    html body :is(.ss-minor-banner ul, .ss-minor-grid ul, .ss-research-card > p, .ss-answer > p, .ss-answer > small, .ss-answer-note, .ss-footnote, .ss-support) { color: var(--mobile-account-muted) !important; font-size: 13px !important; line-height: 1.7 !important; }
    html body .ss-source-tags span { white-space: normal !important; overflow-wrap: anywhere !important; border-color: var(--mobile-account-line) !important; color: var(--mobile-account-muted) !important; }
    html body .ss-source-tags b { color: var(--mobile-account-ink) !important; }
    html body .ss-answer-note :is(svg, img.safety-design-icon) { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; object-fit: contain !important; }

    html body .rr-field-title { color: var(--mobile-account-ink) !important; font-size: 14px !important; }
    html body .rr-category-grid label { border-color: var(--mobile-account-line) !important; background: var(--mobile-account-surface) !important; color: var(--mobile-account-ink) !important; }
    html body .rr-category-grid label:has(input:checked) { border-color: var(--mobile-account-accent) !important; background: var(--mobile-account-tint) !important; box-shadow: inset 0 0 0 1px var(--mobile-account-accent) !important; }
    html body .rr-category-grid label:has(input:focus-visible) { outline: 2px solid var(--mobile-account-accent) !important; outline-offset: 2px !important; }
    html body .rr-category-grid :is(svg, img.safety-design-icon) { width: 24px !important; height: 24px !important; object-fit: contain !important; }
    html body .rr-textarea { background: transparent !important; }
    html body .rr-textarea textarea { display: block !important; min-height: 120px !important; padding: 12px 13px 28px !important; border-color: var(--mobile-account-line) !important; border-radius: 12px !important; background: var(--mobile-account-surface) !important; color: var(--mobile-account-ink) !important; font-size: 16px !important; line-height: 1.6 !important; }
    html body .rr-textarea.short textarea { min-height: 96px !important; }
    html body .rr-textarea small { color: var(--mobile-account-muted) !important; }
    html body :is(.rr-input, .rr-textarea textarea):focus { border-color: var(--mobile-account-accent) !important; box-shadow: 0 0 0 3px var(--mobile-account-tint) !important; }
    html body :is(.rr-upload, .rr-record-box, .rr-appeal-link, .rr-notice, .rr-sensitive-note, .rr-before-panel article, .rr-detail-note) { min-height: 0 !important; padding: 16px !important; gap: 12px !important; border-color: var(--mobile-account-line) !important; border-radius: 15px !important; background: var(--mobile-account-soft) !important; color: var(--mobile-account-muted) !important; }
    html body :is(.rr-notice, .rr-sensitive-note, .rr-detail-note) { font-size: 12px !important; line-height: 1.6 !important; }
    html body .rr-before-panel article { grid-template-columns: 30px minmax(0, 1fr) !important; }
    html body .rr-before-panel article i { width: 30px !important; height: 30px !important; background: transparent !important; }
    html body :is(.rr-before-panel article i, .rr-upload, .rr-notice, .rr-sensitive-note, .rr-detail-note) > :is(svg, img.safety-design-icon) { width: 26px !important; height: 26px !important; flex: 0 0 26px !important; object-fit: contain !important; }
    html body .rr-record-box > :is(svg, img.safety-design-icon) { width: 48px !important; height: 48px !important; padding: 0 !important; background: transparent !important; object-fit: contain !important; }
    html body :is(.rr-panel h2, .rr-before-panel strong, .rr-timeline strong) { color: var(--mobile-account-ink) !important; font-size: 18px !important; }
    html body :is(.rr-processing-panel > p, .rr-original-status, .rr-before-panel small, .rr-record-box span, .rr-appeal-link small, .rr-timeline small) { color: var(--mobile-account-muted) !important; font-size: 12px !important; line-height: 1.6 !important; }
    html body .rr-primary { background: #272330 !important; color: #fff !important; }
    html body .rr-record-box a, html body .rr-detail-actions :is(a, button) { min-height: 48px !important; border-color: var(--mobile-account-line) !important; border-radius: 12px !important; color: var(--mobile-account-accent) !important; font-size: 14px !important; }
    html body .rr-timeline { margin-left: 0 !important; }
    html body .rr-record-tabs { max-width: 100% !important; display: flex !important; gap: 4px !important; }
    html body .rr-record-tabs button { flex: 1 1 0 !important; min-width: 0 !important; min-height: 44px !important; padding: 8px !important; border-color: var(--mobile-account-line) !important; background: var(--mobile-account-soft) !important; color: var(--mobile-account-muted) !important; font-size: 13px !important; }
    html body .rr-record-tabs button.active { background: var(--mobile-account-tint) !important; color: var(--mobile-account-accent) !important; }
    html body .rr-empty { margin: 12px 0 !important; color: var(--mobile-account-muted) !important; font-size: 13px !important; line-height: 1.6 !important; }
    html body .rr-record-list > button { padding: 12px !important; gap: 10px !important; border-color: var(--mobile-account-line) !important; background: var(--mobile-account-surface) !important; color: var(--mobile-account-ink) !important; }
    html body .rr-record-list span { min-width: 0 !important; overflow-wrap: anywhere !important; }
    html body .rr-record-list i { width: 32px !important; height: 32px !important; background: var(--mobile-account-tint) !important; }
    html body .rr-record-list i > :is(svg, img.safety-design-icon) { width: 24px !important; height: 24px !important; object-fit: contain !important; }

    html body :is(.dc-panel h2, .dc-training-banner strong, .dc-login-banner strong, .dc-support-strip span, .dc-account-card li, .ac-export-select label, .dc-export-format label) { color: var(--mobile-account-ink) !important; }
    html body :is(.dc-heading p, .dc-panel > p, .dc-training-banner small, .dc-training-current > p, .dc-training-history > div, .dc-export-left section > p, .dc-export-process > p, .dc-export-process li small, .ac-export-select label small, .dc-export-format small, .dc-guest-chat p, .dc-record-empty > p, .dc-record-help > p, .dc-bottom-note, .dc-record-rows time) { color: var(--mobile-account-muted) !important; }
    html body :is(.dc-training-banner, .dc-login-banner, .dc-login-inline, .dc-info-box, .dc-support-strip) { min-height: 0 !important; padding: 16px !important; gap: 12px !important; border-color: var(--mobile-account-line) !important; border-radius: 15px !important; background: var(--mobile-account-soft) !important; color: var(--mobile-account-ink) !important; }
    html body :is(.dc-training-banner, .dc-login-banner, .dc-login-inline, .dc-info-box, .dc-support-strip) > :is(svg, img.safety-design-icon) { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; object-fit: contain !important; }
    html body .dc-warning-banner { margin: 20px 0 !important; padding: 16px !important; gap: 12px !important; border-color: color-mix(in srgb, var(--mobile-account-warning) 35%, var(--mobile-account-line)) !important; border-radius: 15px !important; background: var(--mobile-account-warning-soft) !important; color: var(--mobile-account-warning) !important; font-size: 13px !important; line-height: 1.6 !important; }
    html body .dc-warning-banner > :is(svg, img.safety-design-icon) { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; object-fit: contain !important; }
    html body .dc-account-card > label { border-color: var(--mobile-account-line) !important; border-radius: 12px !important; color: var(--mobile-account-muted) !important; }
    html body .dc-account-card > label input, html body .dc-chat-search input { min-width: 0 !important; min-height: 48px !important; border-color: var(--mobile-account-line) !important; border-radius: 12px !important; background: var(--mobile-account-surface) !important; color: var(--mobile-account-ink) !important; font-size: 16px !important; }
    html body .dc-link-row { flex-wrap: wrap !important; gap: 12px !important; overflow: visible !important; }
    html body .dc-link-row a { min-height: 44px !important; display: inline-flex !important; align-items: center !important; color: var(--mobile-account-accent) !important; font-size: 13px !important; }
    html body :is(.dc-account-card > a, .dc-learn-more a, .dc-record-help a) { color: var(--mobile-account-accent) !important; }
    html body :is(.ac-primary-button, .dc-primary-button, .dc-login-banner a, .dc-login-inline a, .rr-login-required a, .ss-verify-report > a) { min-height: 48px !important; border-radius: 12px !important; background: #272330 !important; color: #fff !important; }
    html body :is(.ss-safety-steps em, .ss-verify-steps em, .dc-export-process li > b) { background: #65527d !important; color: #fff !important; }
    html body :is(.dc-danger-button, .dc-danger-outline) { min-height: 48px !important; border-color: var(--mobile-account-danger) !important; border-radius: 12px !important; background: var(--mobile-account-danger-soft) !important; color: var(--mobile-account-danger) !important; font-size: 14px !important; }
    html body :is(.dc-record-table, .dc-chat-list, .ac-chat-row, .dc-record-head, .dc-record-rows article) { border-color: var(--mobile-account-line) !important; }
    html body .dc-record-rows article { color: var(--mobile-account-ink) !important; overflow-wrap: anywhere !important; }
    html body .dc-record-rows em { max-width: 100% !important; white-space: normal !important; }
    html body :is(.dc-guest-chat i, .dc-record-help i) { width: 48px !important; height: 48px !important; flex: 0 0 48px !important; background: var(--mobile-account-tint) !important; }
    html body :is(.dc-guest-chat i, .dc-record-help i) > :is(svg, img.safety-design-icon) { width: 30px !important; height: 30px !important; object-fit: contain !important; }
    html body .ac-chat-row button { min-width: 44px !important; min-height: 44px !important; flex-shrink: 0 !important; color: var(--mobile-account-danger) !important; }
    html body .dc-chat-controls { display: grid !important; gap: 8px !important; margin-top: 12px !important; }
    html body .dc-chat-controls button { margin: 0 !important; min-height: 48px !important; }
    html body .dc-chat-controls [hidden] { display: none !important; }
    html body .dc-chat-controls .ac-status { margin: 0 !important; min-height: 0 !important; font-size: 12px !important; line-height: 1.6 !important; }
    html body .dc-record-placeholder { border-color: var(--mobile-account-line) !important; background: var(--mobile-account-soft) !important; color: var(--mobile-account-muted) !important; }
    html body .dc-training-status-row { align-items: flex-start !important; gap: 12px !important; color: var(--mobile-account-ink) !important; font-size: 14px !important; }
    html body .dc-training-status-row b { display: inline-block !important; max-width: 100% !important; margin-top: 6px !important; border-color: var(--mobile-account-line) !important; background: var(--mobile-account-soft) !important; color: var(--mobile-account-muted) !important; }
    html body .dc-switch input:checked + i { background: var(--mobile-account-accent) !important; }
    html body .dc-switch:has(input:focus-visible) { outline: 2px solid var(--mobile-account-accent) !important; outline-offset: 3px !important; border-radius: 20px !important; }

    html body .ai-card-heading h1 { color: var(--mobile-account-ink) !important; font-size: 27px !important; font-weight: 650 !important; line-height: 1.2 !important; letter-spacing: -.7px !important; }
    html body .ai-card-heading > span { color: var(--mobile-account-muted) !important; white-space: normal !important; font-size: 12px !important; }
    html body :is(.ai-card-glance, .ai-card-panel, .ai-card-toc) { min-height: 0 !important; padding: 16px !important; border-color: var(--mobile-account-line) !important; border-radius: 15px !important; background: var(--mobile-account-surface) !important; }
    html body .ai-card-glance { background: var(--mobile-account-soft) !important; }
    html body :is(.ai-card-glance h2, .ai-card-panel-title h2, .ai-card-toc h2) { color: var(--mobile-account-ink) !important; font-size: 18px !important; line-height: 1.4 !important; }
    html body :is(.ai-card-glance h2, .ai-card-panel-title) > :is(.ai-card-section-icon, img.safety-design-icon) { width: 24px !important; height: 24px !important; object-fit: contain !important; }
    html body .ai-card-panel-title em { width: 28px !important; height: 28px !important; flex: 0 0 28px !important; border-color: var(--mobile-account-line) !important; background: var(--mobile-account-tint) !important; color: var(--mobile-account-accent) !important; font-size: 13px !important; }
    html body .ai-card-glance-grid > a { padding: 14px 0 !important; gap: 12px !important; border-color: var(--mobile-account-line) !important; color: var(--mobile-account-ink) !important; }
    html body :is(.ai-card-glance-grid, .ai-card-data-grid) :is(svg, img.safety-design-icon) { width: 24px !important; height: 24px !important; flex: 0 0 24px !important; object-fit: contain !important; }
    html body :is(.ai-card-glance-grid, .ai-card-data-grid) strong { color: var(--mobile-account-ink) !important; font-size: 14px !important; font-weight: 550 !important; }
    html body :is(.ai-card-glance-grid, .ai-card-data-grid) small { color: var(--mobile-account-muted) !important; font-size: 11px !important; line-height: 1.5 !important; }
    html body .ai-card-toc a { min-height: 44px !important; color: var(--mobile-account-muted) !important; font-size: 13px !important; }
    html body .ai-card-toc a span { color: inherit !important; }
    html body .ai-card-toc a:is(.active, :hover) { background: var(--mobile-account-tint) !important; color: var(--mobile-account-accent) !important; }
    html body :is(.ai-card-featured-actions > a, .ai-card-report-grid > a, .ai-card-controls > div > a) { min-height: 48px !important; padding: 12px !important; border-color: var(--mobile-account-line) !important; border-radius: 12px !important; background: var(--mobile-account-surface) !important; color: var(--mobile-account-accent) !important; font-size: 13px !important; }
    html body :is(.ai-card-featured-actions, .ai-card-report-grid, .ai-card-controls) :is(svg, img.safety-design-icon) { width: 24px !important; height: 24px !important; flex: 0 0 24px !important; object-fit: contain !important; }
    html body .ai-card-capabilities > p { color: var(--mobile-account-muted) !important; }
    html body .ai-card-capabilities > p a, html body .ai-card-legal a, html body .ai-card-next { color: var(--mobile-account-accent) !important; }
    html body .ai-card-risks { border-color: color-mix(in srgb, var(--mobile-account-warning) 35%, var(--mobile-account-line)) !important; background: var(--mobile-account-warning-soft) !important; }
    html body .ai-card-risks > a { min-height: 48px !important; padding: 12px 8px !important; border-color: color-mix(in srgb, var(--mobile-account-warning) 35%, var(--mobile-account-line)) !important; color: var(--mobile-account-ink) !important; font-size: 13px !important; line-height: 1.6 !important; }
    html body .ai-card-data-grid > a { min-height: 72px !important; padding: 14px 0 !important; border-color: var(--mobile-account-line) !important; }

    /* Article media and order identifiers stay within a narrow viewport. */
    html body .kc-copy :is(img, video, iframe) { max-width: 100% !important; }
    html body .kc-copy :is(img, video) { height: auto !important; }
    html body .kc-report-cta { padding: 16px !important; gap: 12px !important; border-radius: 15px !important; }
    html body .kc-report-cta > a { min-height: 48px !important; border-radius: 12px !important; }
    html body .stripe-plan-section { margin: 24px 0 18px !important; padding: 16px !important; border-color: var(--mobile-account-line) !important; border-radius: 15px !important; background: var(--mobile-account-soft) !important; }
    html body .stripe-plan-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; margin-top: 16px !important; }
    html body .stripe-plan-card { min-height: 0 !important; padding: 16px !important; border-color: var(--mobile-account-line) !important; border-radius: 12px !important; background: var(--mobile-account-surface) !important; }
    html body .stripe-plan-heading h2, html body .stripe-plan-card h3 { color: var(--mobile-account-ink) !important; font-size: 19px !important; }
    html body .stripe-plan-heading > p, html body .stripe-plan-price { color: var(--mobile-account-accent) !important; }
    html body :is(.stripe-plan-heading > span, .stripe-plan-price small, .stripe-plan-card p, .stripe-plan-note) { color: var(--mobile-account-muted) !important; font-size: 13px !important; line-height: 1.6 !important; }
    html body .stripe-plan-card button { min-height: 48px !important; border-radius: 12px !important; background: #272330 !important; color: #fff !important; font-size: 14px !important; }
    html body .pricing-card :is(p, li) { color: var(--mobile-account-muted) !important; font-size: 13px !important; }
    html body .pricing-card :is(a, span.action) { min-height: 48px !important; border-color: var(--mobile-account-line) !important; border-radius: 12px !important; color: var(--mobile-account-accent) !important; font-size: 14px !important; }
    html body .pricing-card.featured a { background: #272330 !important; border-color: #272330 !important; color: #fff !important; }
    html body .pricing-card span.action { background: var(--mobile-account-soft) !important; color: var(--mobile-account-muted) !important; }
    html body .purchase-detail-list p { min-width: 0 !important; }
    html body .purchase-detail-list :is(b, span) { max-width: 100% !important; overflow-wrap: anywhere !important; }
    html body .purchased-service-card-head em { flex-shrink: 0 !important; white-space: nowrap !important; font-size: 11px !important; }

    /* Checkout/result actions retain their server-verified payment flow. */
    html body .membership-app .payment-confirm-main { max-width: none !important; padding: 0 !important; margin: 0 !important; }
    html body .payment-confirm-header h1 { margin: 12px 0 !important; color: var(--mobile-account-ink) !important; font-size: 27px !important; }
    html body .payment-confirm-header > p { display: none !important; }
    html body .payment-confirm-card { padding: 16px !important; border-radius: 15px !important; border-color: var(--mobile-account-line) !important; background: var(--mobile-account-surface) !important; box-shadow: none !important; }
    html body .payment-confirm-plan { display: block !important; }
    html body .payment-confirm-plan h2 { color: var(--mobile-account-ink) !important; font-size: 19px !important; }
    html body .payment-confirm-plan { border-color: var(--mobile-account-line) !important; }
    html body .payment-confirm-plan p, html body .payment-confirm-price small, html body .payment-confirm-method span { color: var(--mobile-account-muted) !important; }
    html body .payment-confirm-section h3 { color: var(--mobile-account-ink) !important; }
    html body .payment-confirm-price { margin-top: 16px !important; text-align: left !important; }
    html body .payment-confirm-price strong { color: var(--mobile-account-accent) !important; font-size: 28px !important; }
    html body .payment-confirm-method { min-height: 56px !important; padding: 12px !important; border-radius: 12px !important; border-color: var(--mobile-account-line) !important; color: var(--mobile-account-ink) !important; }
    html body .payment-confirm-method:has(input:checked) { border-color: #a48ab9 !important; background: var(--mobile-account-tint) !important; box-shadow: none !important; }
    html body .payment-confirm-method input { accent-color: var(--mobile-account-accent) !important; }
    html body .payment-confirm-notice { padding: 14px !important; border-radius: 12px !important; background: var(--mobile-account-soft) !important; color: var(--mobile-account-muted) !important; overflow-wrap: anywhere !important; }
    html body .payment-confirm-actions { flex-direction: column !important; gap: 10px !important; }
    html body .payment-confirm-actions button { order: -1 !important; background: #272330 !important; border-color: #272330 !important; }
    html body .payment-confirm-actions :is(a, button) { min-height: 48px !important; justify-content: center !important; border-radius: 13px !important; font-size: 14px !important; }
    html body .payment-confirm-actions a { border-color: var(--mobile-account-line) !important; background: var(--mobile-account-surface) !important; color: var(--mobile-account-ink) !important; }
    html body .wechat-payment-modal { z-index: 10050 !important; padding: 0 !important; align-items: end !important; background: #17182170 !important; }
    html body .wechat-payment-dialog { width: 100% !important; max-height: calc(var(--mobile-viewport-height, 100dvh) - 24px) !important; overflow-y: auto !important; overscroll-behavior: contain !important; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)) !important; border: 0 !important; border-radius: 24px 24px 0 0 !important; background: var(--mobile-account-surface) !important; color: var(--mobile-account-ink) !important; }
    html body .wechat-payment-dialog h2 { color: var(--mobile-account-ink) !important; font-size: 20px !important; }
    html body .wechat-payment-dialog p { color: var(--mobile-account-muted) !important; }
    /* A white QR canvas is required for reliable scanning in either theme. */
    html body .wechat-payment-qr { color: #171821 !important; }
    html body .wechat-payment-code { border-color: var(--mobile-account-line) !important; background: var(--mobile-account-soft) !important; color: var(--mobile-account-muted) !important; user-select: all !important; -webkit-user-select: all !important; }
    html body .wechat-payment-actions { gap: 10px !important; }
    html body .wechat-payment-actions button { flex: 1 1 0 !important; min-width: 0 !important; min-height: 48px !important; border-color: #272330 !important; border-radius: 12px !important; background: #272330 !important; color: #fff !important; }
    html body .wechat-payment-actions button.secondary { border-color: var(--mobile-account-line) !important; background: var(--mobile-account-surface) !important; color: var(--mobile-account-ink) !important; }
    html body .wechat-payment-actions button:focus-visible { outline: 2px solid var(--mobile-account-accent) !important; outline-offset: 3px !important; }
    html body .wechat-payment-status[data-payment-feedback="error"] { color: var(--mobile-account-danger) !important; }
    html body .wechat-payment-status[data-payment-feedback="success"] { color: var(--mobile-account-success) !important; }
    html body .payment-result { min-height: 100dvh !important; padding: 20px !important; background: var(--mobile-account-surface) !important; }
    html body .payment-result-card { width: 100% !important; padding: 24px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
    html body .payment-result h1 { color: var(--mobile-account-ink) !important; font-size: 27px !important; }
    html body .payment-result p { color: var(--mobile-account-muted) !important; font-size: 14px !important; }
    html body .payment-result-icon { width: 64px !important; height: 64px !important; background: var(--mobile-account-tint) !important; color: var(--mobile-account-accent) !important; }
    html body .payment-result-meta { border-radius: 15px !important; background: var(--mobile-account-soft) !important; color: var(--mobile-account-ink) !important; overflow-wrap: anywhere !important; }
    html body .payment-result-actions { display: grid !important; gap: 12px !important; }
    html body .payment-result-actions a { min-height: 48px !important; border-radius: 13px !important; border-color: var(--mobile-account-line) !important; color: var(--mobile-account-ink) !important; font-size: 14px !important; }
    html body .payment-result-actions a.primary { background: #272330 !important; color: #fff !important; border-color: #272330 !important; }
    html body :is(.membership-plan-card button, .membership-addon-list button, .payment-confirm-actions button, .stripe-plan-card button, .rr-primary, .dc-primary-button):disabled { background: var(--mobile-account-soft) !important; border-color: var(--mobile-account-line) !important; color: var(--mobile-account-muted) !important; opacity: .7 !important; cursor: not-allowed !important; }

    /* Standalone media previews keep their content, download and WeChat flow. */
    html body:has(> .preview-page) { --preview-bg: var(--mobile-account-soft) !important; --preview-surface: var(--mobile-account-surface) !important; --preview-surface-soft: var(--mobile-account-soft) !important; --preview-text: var(--mobile-account-ink) !important; --preview-muted: var(--mobile-account-muted) !important; --preview-line: var(--mobile-account-line) !important; --preview-accent: var(--mobile-account-accent) !important; }
    html body .preview-page .preview-header { min-height: calc(56px + env(safe-area-inset-top)) !important; padding: calc(6px + env(safe-area-inset-top)) 14px 6px !important; gap: 10px !important; background: var(--mobile-account-surface) !important; }
    html body .preview-page .preview-heading { flex: 1 1 auto !important; min-width: 0 !important; }
    html body .preview-page .preview-title { font-size: 14px !important; }
    html body .preview-page .preview-file-kind { display: none !important; }
    html body .preview-page .preview-button { min-height: 44px !important; padding: 0 12px !important; border-color: var(--mobile-account-line) !important; border-radius: 12px !important; color: var(--mobile-account-ink) !important; background: var(--mobile-account-soft) !important; font-size: 12px !important; }
    html body .preview-page .preview-button.primary { background: #272330 !important; border-color: #272330 !important; color: #fff !important; }
    html body:not(.preview-embedded) .preview-page .preview-stage { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)) !important; }
    html body .preview-page :is(.preview-image-content, .office-preview-wrap) { min-width: 0 !important; }
    html body:not(.preview-embedded) .preview-page .preview-media { max-height: calc(var(--preview-viewport-height) - 84px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; }
    html body:not(.preview-embedded) .preview-page .preview-frame { height: calc(var(--preview-viewport-height) - 84px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; }
}

}