/* FANSFLEX v7.2 legacy CSS request consolidation; order must be preserved */

/* === FANSFLEX V7.2 SOURCE: fansflex-auth-v24.css === */
/* FansFlex v2.4 — authentication, verification and error surfaces. */
:root{--ff24-navy-950:#05111d;--ff24-navy-900:#071827;--ff24-navy-850:#0a2032;--ff24-blue:#1d75ff;--ff24-gold:#c7a66b;--ff24-ink:#122638;--ff24-muted:#6d8190;--ff24-shadow:0 28px 70px rgba(4,18,31,.19)}
.fansflex-no-nav{min-height:100vh;background:#f4f7fa}.fansflex-no-nav .flex-fill{min-height:0}.fansflex-no-nav .ff-auth{min-height:calc(100vh - 54px);padding:0;background:#f5f8fb}.fansflex-no-nav .ff-auth>.row{min-height:calc(100vh - 54px)}.fansflex-no-nav .ff-auth .col-md-6:first-child{background:#fff}.fansflex-no-nav .ff-auth-panel{min-height:calc(100vh - 54px);padding:64px 5vw!important}.fansflex-no-nav .ff-auth-panel>.container{max-width:680px}.fansflex-no-nav .ff-auth-panel .col-lg-7,.fansflex-no-nav .ff-auth-panel .col-xl-6{width:100%;max-width:520px}.fansflex-no-nav .brand-logo{width:auto;max-width:184px;max-height:48px;object-fit:contain;padding-bottom:0!important;margin-bottom:44px}
.ff-auth-kicker{display:inline-flex;align-items:center;gap:9px;margin-bottom:12px;color:#60798a;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.ff-auth-kicker:before{content:"";width:28px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--ff24-blue),var(--ff24-gold))}.ff-auth-title{margin:0 0 12px;color:var(--ff24-ink);font-size:clamp(30px,3vw,46px);line-height:1.04;letter-spacing:-.035em;font-weight:760!important}.ff-auth-subtitle{max-width:470px;margin:0 0 34px;color:var(--ff24-muted);font-size:15px;line-height:1.7}
.fansflex-no-nav .ff-auth form label{color:#405a6c;font-size:12px;font-weight:750;letter-spacing:.025em}.fansflex-no-nav .ff-auth .form-control,.fansflex-no-nav .ff-auth .input-group-text,.ff-auth-verify .form-control{min-height:52px;border:1px solid #d9e3e9!important;border-radius:12px!important;background:#f9fbfc!important;color:#142b3e!important;box-shadow:none!important}.fansflex-no-nav .ff-auth .form-control{padding:12px 15px}.fansflex-no-nav .ff-auth .form-control:focus,.ff-auth-verify .form-control:focus{border-color:#78aef1!important;background:#fff!important;box-shadow:0 0 0 4px rgba(29,117,255,.10)!important}.fansflex-no-nav .ff-auth .is-invalid{border-color:#dc5662!important}.fansflex-no-nav .ff-auth .invalid-feedback{color:#bd3c49;font-size:12px}
.fansflex-no-nav .ff-auth .btn-primary,.ff-auth-verify .btn-primary{min-height:52px;border:0!important;border-radius:12px!important;background:linear-gradient(135deg,#0e2c43 0%,#155d96 54%,#237ed0 100%)!important;color:#fff!important;font-weight:780;letter-spacing:.015em;box-shadow:0 13px 28px rgba(12,65,107,.20);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.fansflex-no-nav .ff-auth .btn-primary:hover,.ff-auth-verify .btn-primary:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(12,65,107,.27);filter:saturate(1.08)}.fansflex-no-nav .ff-auth a{color:#175f9b;font-weight:650;text-decoration:none}.fansflex-no-nav .ff-auth a:hover{color:#0c4271}.fansflex-no-nav .ff-auth hr{margin:28px 0 20px;border-color:#e3eaf0;opacity:1}.fansflex-no-nav .ff-auth .form-check-input:checked{background-color:#176bb2;border-color:#176bb2}
.fansflex-no-nav .ff-auth .bg-image{position:relative;min-height:100%;overflow:hidden;background:radial-gradient(circle at 72% 18%,rgba(87,158,216,.22),transparent 28%),linear-gradient(145deg,#061522 0%,#0a2336 47%,#102f47 100%)!important}.fansflex-no-nav .ff-auth .bg-image>div{position:relative;z-index:1;background-color:transparent!important;background-size:cover!important;background-position:center!important}.fansflex-no-nav .ff-auth .bg-image:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(4,15,25,.15),rgba(4,15,25,.62)),linear-gradient(180deg,rgba(4,15,25,.04),rgba(4,15,25,.5))}.fansflex-no-nav .ff-auth .bg-image:after{content:"FANSFLEX\A CREATOR BUSINESS, ELEVATED.\A\A One professional workspace for content, audience and growth.";white-space:pre-wrap;position:absolute;z-index:3;left:clamp(42px,5vw,84px);right:clamp(42px,6vw,96px);bottom:clamp(48px,8vh,104px);color:#f7fbfd;font-size:clamp(13px,1.1vw,16px);line-height:1.65;letter-spacing:.025em;text-shadow:0 2px 18px rgba(0,0,0,.34)}.fansflex-no-nav footer{background:#fff!important;border-top:1px solid #edf1f4}
.ff-auth-verify{max-width:1080px;padding:70px 52px!important;border:1px solid #dfe7ec;border-radius:24px;background:#fff;box-shadow:var(--ff24-shadow)}.ff-auth-verify img{max-height:320px;filter:saturate(.78)}.ff-auth-verify p{color:#647b8b;line-height:1.7}
.ff-error-page{max-width:920px;margin-top:56px;margin-bottom:56px}.ff-error-page .error-container{width:100%;padding:54px 36px;border:1px solid #dde7ed;border-radius:24px;background:linear-gradient(180deg,#fff,#f7fafc);box-shadow:var(--ff24-shadow)}.ff-error-page .error-container img{max-width:min(350px,72vw);max-height:260px}.ff-error-page h3{color:#153047;font-size:32px;letter-spacing:-.025em}.ff-error-page p{color:#6c8190}.ff-error-page a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:10px;background:#0e2d45;color:#fff!important;text-decoration:none;font-weight:750}
[data-bs-theme=dark] .fansflex-no-nav,[data-theme=dark] .fansflex-no-nav{background:var(--ff24-navy-950)}[data-bs-theme=dark] .fansflex-no-nav .ff-auth .col-md-6:first-child,[data-theme=dark] .fansflex-no-nav .ff-auth .col-md-6:first-child{background:#071624}[data-bs-theme=dark] .ff-auth-title,[data-theme=dark] .ff-auth-title{color:#f4f8fb}[data-bs-theme=dark] .ff-auth-subtitle,[data-theme=dark] .ff-auth-subtitle{color:#91a8b7}[data-bs-theme=dark] .ff-auth-kicker,[data-theme=dark] .ff-auth-kicker{color:#abc0cd}[data-bs-theme=dark] .fansflex-no-nav .ff-auth form label,[data-theme=dark] .fansflex-no-nav .ff-auth form label{color:#b6c7d1}[data-bs-theme=dark] .fansflex-no-nav .ff-auth .form-control,[data-theme=dark] .fansflex-no-nav .ff-auth .form-control{border-color:rgba(151,178,195,.24)!important;background:#0a2132!important;color:#f3f8fb!important}[data-bs-theme=dark] .fansflex-no-nav .ff-auth .form-control:focus,[data-theme=dark] .fansflex-no-nav .ff-auth .form-control:focus{border-color:#4e95cd!important;background:#0b2639!important;box-shadow:0 0 0 4px rgba(66,143,199,.13)!important}[data-bs-theme=dark] .fansflex-no-nav .ff-auth a,[data-theme=dark] .fansflex-no-nav .ff-auth a{color:#79b7e8}[data-bs-theme=dark] .fansflex-no-nav .ff-auth hr,[data-theme=dark] .fansflex-no-nav .ff-auth hr{border-color:rgba(151,178,195,.18)}[data-bs-theme=dark] .fansflex-no-nav footer,[data-theme=dark] .fansflex-no-nav footer{background:#06131f!important;border-color:#102b3e}[data-bs-theme=dark] .ff-auth-verify,[data-theme=dark] .ff-auth-verify{border-color:rgba(151,178,195,.20);background:linear-gradient(180deg,#0a2132,#071724)}[data-bs-theme=dark] .ff-auth-verify p,[data-theme=dark] .ff-auth-verify p{color:#9eb2bf}[data-bs-theme=dark] .ff-error-page .error-container,[data-theme=dark] .ff-error-page .error-container{border-color:rgba(151,178,195,.20);background:linear-gradient(180deg,#0a2132,#071724)}[data-bs-theme=dark] .ff-error-page h3,[data-theme=dark] .ff-error-page h3{color:#f3f8fb}[data-bs-theme=dark] .ff-error-page p,[data-theme=dark] .ff-error-page p{color:#9db1be}
.fansflex-no-nav .ff-auth .social-login-box .btn,.fansflex-no-nav .ff-auth [class*=social] .btn{min-height:48px;border-radius:11px!important}
@media(max-width:991.98px){.fansflex-no-nav .ff-auth-panel{padding:52px 6vw!important}.fansflex-no-nav .brand-logo{margin-bottom:32px}.ff-auth-verify{margin-left:18px;margin-right:18px;padding:44px 28px!important}}
@media(max-width:767.98px){.fansflex-no-nav .ff-auth,.fansflex-no-nav .ff-auth>.row,.fansflex-no-nav .ff-auth-panel{min-height:auto}.fansflex-no-nav .ff-auth-panel{padding:42px 22px 56px!important}.fansflex-no-nav .ff-auth-panel .container{padding-left:0;padding-right:0}.fansflex-no-nav .brand-logo{max-width:155px}.ff-auth-title{font-size:34px}.ff-auth-subtitle{margin-bottom:28px}.ff-auth-verify{border-radius:18px}}

/* === FANSFLEX V7.2 SOURCE: fansflex-compat-v29.css === */
/* FansFlex v2.9 — legacy token + story compatibility bridge.
   Purpose: eliminate old magenta Bootstrap defaults without editing vendor assets.
   Scoped to FansFlex application/public shells only. */

.fansflex-app.ff-ui-v29,
.fansflex-generic.ff-ui-v29,
.fansflex-no-nav.ff-ui-v29 {
    --ff29-blue: #2b83d8;
    --ff29-blue-hover: #1e69b1;
    --ff29-blue-soft: rgba(43,131,216,.13);
    --ff29-champagne: #d7b56d;
    --ff29-ring-seen: #8799aa;
    --bs-primary: var(--ff29-blue);
    --bs-primary-rgb: 43,131,216;
    --bs-primary-text-emphasis: #174f82;
    --bs-primary-bg-subtle: rgba(43,131,216,.12);
    --bs-primary-border-subtle: rgba(43,131,216,.34);
    --bs-link-color: var(--ff29-blue);
    --bs-link-color-rgb: 43,131,216;
    --bs-link-hover-color: var(--ff29-blue-hover);
    --bs-link-hover-color-rgb: 30,105,177;
    --bs-focus-ring-color: rgba(43,131,216,.25);
}

[data-bs-theme="dark"] .fansflex-app.ff-ui-v29,
[data-bs-theme="dark"] .fansflex-generic.ff-ui-v29,
[data-bs-theme="dark"] .fansflex-no-nav.ff-ui-v29 {
    --ff29-blue: #55a8f5;
    --ff29-blue-hover: #7bbcf7;
    --ff29-blue-soft: rgba(85,168,245,.15);
    --ff29-ring-seen: #5f7385;
    --bs-primary-text-emphasis: #9bcdf9;
    --bs-primary-bg-subtle: rgba(40,115,181,.16);
    --bs-primary-border-subtle: rgba(85,168,245,.36);
}

/* Bootstrap utility/component bridge. Keep semantic status colors untouched. */
.fansflex-app.ff-ui-v29 :where(.text-primary,.link-primary),
.fansflex-generic.ff-ui-v29 :where(.text-primary,.link-primary),
.fansflex-no-nav.ff-ui-v29 :where(.text-primary,.link-primary) {
    color: var(--ff29-blue) !important;
}
.fansflex-app.ff-ui-v29 :where(.bg-primary),
.fansflex-generic.ff-ui-v29 :where(.bg-primary),
.fansflex-no-nav.ff-ui-v29 :where(.bg-primary) {
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
}
.fansflex-app.ff-ui-v29 :where(.border-primary),
.fansflex-generic.ff-ui-v29 :where(.border-primary),
.fansflex-no-nav.ff-ui-v29 :where(.border-primary) {
    border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity, 1)) !important;
}
.fansflex-app.ff-ui-v29 :where(.form-check-input:checked),
.fansflex-generic.ff-ui-v29 :where(.form-check-input:checked),
.fansflex-no-nav.ff-ui-v29 :where(.form-check-input:checked) {
    background-color: var(--ff29-blue);
    border-color: var(--ff29-blue);
}
.fansflex-app.ff-ui-v29 :where(.form-check-input:focus),
.fansflex-generic.ff-ui-v29 :where(.form-check-input:focus),
.fansflex-no-nav.ff-ui-v29 :where(.form-check-input:focus) {
    border-color: color-mix(in srgb, var(--ff29-blue) 62%, #fff);
    box-shadow: 0 0 0 .2rem rgba(43,131,216,.18);
}
.fansflex-app.ff-ui-v29 :where(.page-link),
.fansflex-generic.ff-ui-v29 :where(.page-link),
.fansflex-no-nav.ff-ui-v29 :where(.page-link) { color: var(--ff29-blue); }
.fansflex-app.ff-ui-v29 :where(.active > .page-link,.page-link.active),
.fansflex-generic.ff-ui-v29 :where(.active > .page-link,.page-link.active),
.fansflex-no-nav.ff-ui-v29 :where(.active > .page-link,.page-link.active) {
    background-color: var(--ff29-blue);
    border-color: var(--ff29-blue);
    color: #fff;
}
.fansflex-app.ff-ui-v29 :where(.progress-bar) { background-color: var(--ff29-blue); }

/* Stories: preserve unseen/seen meaning, replace the legacy Instagram-like magenta ring. */
.fansflex-app.ff-ui-v29 .story-thumb-avatar-wrap,
.fansflex-app.ff-ui-v29 .story-thumb.story-thumb-unseen .story-thumb-avatar-wrap,
.fansflex-app.ff-ui-v29 .stories-swiper-skeleton__ring,
.fansflex-app.ff-ui-v29 .profile-avatar-wrap.profile-has-stories.profile-stories-unseen::before {
    background: linear-gradient(135deg, #72b9f7 0%, #2b83d8 48%, #1b5e9d 78%, var(--ff29-champagne) 100%) !important;
}
.fansflex-app.ff-ui-v29 .story-thumb.story-thumb-seen .story-thumb-avatar-wrap,
.fansflex-app.ff-ui-v29 .profile-avatar-wrap.profile-has-stories.profile-stories-seen::before {
    background: var(--ff29-ring-seen) !important;
}
.fansflex-app.ff-ui-v29 .story-thumb-add-badge {
    background: var(--ff29-blue) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ff29-blue) 18%, transparent);
}

/* Story creator: keep all user-selectable colors, but make the default FansFlex-native. */
.fansflex-app.ff-ui-v29.ff-route-stories-create .story-bg-choice--default {
    background: linear-gradient(135deg, #123856, #2b83d8 62%, #d7b56d) !important;
}

/* Prevent legacy primary glow leaking into keyboard focus without suppressing focus itself. */
.fansflex-app.ff-ui-v29 :where(a,button,input,select,textarea):focus-visible,
.fansflex-generic.ff-ui-v29 :where(a,button,input,select,textarea):focus-visible,
.fansflex-no-nav.ff-ui-v29 :where(a,button,input,select,textarea):focus-visible {
    outline-color: var(--ff29-blue);
}

/* === FANSFLEX V7.2 SOURCE: fansflex-resilience-v30.css === */
/* FansFlex v3.0 resilience layer.
   Defensive layout/theme rules only. Route-specific CSS still owns page composition. */

:root {
    --ff-safe-bottom: env(safe-area-inset-bottom, 0px);
    --ff-safe-left: env(safe-area-inset-left, 0px);
    --ff-safe-right: env(safe-area-inset-right, 0px);
}

/* Prevent flex/grid children with long creator names, URLs or transaction ids from widening the app. */
.fansflex-app .main-wrapper,
.fansflex-app .content-wrapper,
.fansflex-app .content-wrapper > *,
.fansflex-app .row > [class*="col-"],
.fansflex-app .d-flex > *,
.fansflex-app .card,
.fansflex-app .modal-content,
.fansflex-app .dropdown-menu {
    min-width: 0;
}

.fansflex-app :is(.card, .modal-content, .dropdown-menu, .alert, td, th, .list-group-item) :is(a, p, span, strong, small) {
    overflow-wrap: anywhere;
}

.fansflex-app img,
.fansflex-app video,
.fansflex-app canvas,
.fansflex-app svg {
    max-width: 100%;
}

/* Keep dense financial/admin-style tables usable without forcing the entire page sideways. */
.fansflex-app .table-responsive {
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
}

.fansflex-app .table > :not(caption) > * > * {
    vertical-align: middle;
}

/* Shared dialogs remain reachable on short laptops and landscape phones. */
.fansflex-app .modal-dialog {
    margin-left: max(.75rem, var(--ff-safe-left));
    margin-right: max(.75rem, var(--ff-safe-right));
}

.fansflex-app .modal-content {
    max-height: calc(100dvh - 1.5rem);
}

.fansflex-app .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Fixed mobile navigation must not cover the final interactive row. */
@media (max-width: 767.98px) {
    body.fansflex-app.has-mobile-bottom-nav .flex-fill {
        padding-bottom: calc(78px + var(--ff-safe-bottom));
    }

    .fansflex-app .ff-mobile-nav-shell {
        padding-left: var(--ff-safe-left);
        padding-right: var(--ff-safe-right);
        padding-bottom: var(--ff-safe-bottom);
    }

    .fansflex-app .modal-dialog {
        max-width: calc(100vw - max(1.5rem, var(--ff-safe-left) + var(--ff-safe-right)));
    }
}

/* 320-374px devices: avoid clipped action clusters while preserving 44px touch targets. */
@media (max-width: 374.98px) {
    .fansflex-app :is(.btn-group, .ff-action-row, .settings-action-row) {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .fansflex-app .dropdown-menu {
        max-width: calc(100vw - 1rem);
    }
}

/* Wide desktops: keep text measure controlled even as the shell expands. */
@media (min-width: 1600px) {
    .fansflex-app .content-wrapper :is(.prose, .public-page-content, .settings-description, .ff-copy-measure) {
        max-width: 78ch;
    }
}

/* Theme-preference.js marks the root as resolved before first paint. */
html:not([data-ff-theme-resolved="1"]) body.fansflex-app {
    visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    html[data-ff-theme-resolved="1"] body.ff-theme-transitioning,
    html[data-ff-theme-resolved="1"] body.ff-theme-transitioning * {
        transition-property: background-color, border-color, color, box-shadow;
        transition-duration: 140ms;
        transition-timing-function: ease-out;
    }
}

/* === FANSFLEX V7.2 SOURCE: fansflex-runtime-v31.css === */
/* FansFlex v3.1 runtime interaction stability layer.
   Keeps transient Bootstrap states visually consistent without changing their JS contracts. */

/* When a modal owns the interaction, remove the floating mobile dock from the visual/focus plane. */
@media (max-width: 767.98px) {
    body.fansflex-app.modal-open .ff-mobile-nav-shell {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* Bootstrap can briefly leave a focused trigger behind a closing overlay. Keep focus readable, never magenta. */
.fansflex-app :where(.modal, .dropdown-menu) :focus-visible,
.fansflex-app :where([data-bs-toggle="modal"], [data-bs-toggle="dropdown"]):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--ff-blue, #2f7cf6) 78%, white);
    outline-offset: 2px;
}

/* Keep dynamically-open dropdowns above local cards but below modal/backdrop layers. */
.fansflex-app .dropdown-menu.show {
    z-index: 1040;
}

/* Prevent an open mobile menu from extending under the safe-area/dock edge. */
@media (max-width: 767.98px) {
    .fansflex-app .mobile-create-dropdown.show,
    .fansflex-app .mobile-more-dropdown.show {
        max-height: calc(100dvh - 118px - env(safe-area-inset-bottom, 0px));
        overscroll-behavior: contain;
    }
}

/* Dynamic content can arrive after theme resolution; avoid a one-frame transition flash on insertion. */
html[data-ff-theme-resolved="1"] body.fansflex-app.ff-dynamic-theme-syncing *,
html[data-ff-theme-resolved="1"] body.fansflex-app.ff-dynamic-theme-syncing *::before,
html[data-ff-theme-resolved="1"] body.fansflex-app.ff-dynamic-theme-syncing *::after {
    transition: none !important;
}

/* === FANSFLEX V7.2 SOURCE: fansflex-runtime-v32.css === */
/* FansFlex v3.2 behavior-state visuals. Progressive enhancement only. */

/* Native POST submit guard: communicate the pending state without changing button geometry. */
:is(.fansflex-app, .fansflex-generic, .fansflex-no-nav) form[aria-busy="true"] .ff-submit-pending {
    cursor: progress;
    opacity: .72;
}

:is(.fansflex-app, .fansflex-generic, .fansflex-no-nav) form[aria-busy="true"] .ff-submit-pending::after {
    content: "";
    display: inline-block;
    width: .78em;
    height: .78em;
    margin-inline-start: .5em;
    vertical-align: -.08em;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: ff32-submit-spin .7s linear infinite;
}

@keyframes ff32-submit-spin {
    to { transform: rotate(360deg); }
}

/* Keep the last mobile form control comfortably above the floating dock and keyboard-safe area. */
@media (max-width: 767.98px) {
    body.fansflex-app.has-mobile-bottom-nav :is(form, .ff-form-shell, .settings-data-page) {
        scroll-margin-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    }

    body.fansflex-app.has-mobile-bottom-nav :is(input, select, textarea, button, [contenteditable="true"]):focus {
        scroll-margin-bottom: calc(118px + env(safe-area-inset-bottom, 0px));
    }
}

/* Restored focus after modal/AJAX replacement should remain obvious in both themes. */
:is(.fansflex-app, .fansflex-generic, .fansflex-no-nav) :focus-visible {
    scroll-margin-block: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    :is(.fansflex-app, .fansflex-generic, .fansflex-no-nav) .ff-submit-pending::after {
        animation-duration: 1.4s;
    }
}

/* === FANSFLEX V7.2 SOURCE: fansflex-runtime-v33.css === */
/* FansFlex v3.3 validation + mobile keyboard continuity. */

:is(.fansflex-app, .fansflex-generic, .fansflex-no-nav) .is-invalid {
    scroll-margin-block: 1.25rem;
}

:is(.fansflex-app, .fansflex-generic, .fansflex-no-nav) .invalid-feedback,
:is(.fansflex-app, .fansflex-generic, .fansflex-no-nav) .invalid-tooltip {
    line-height: 1.4;
}

/* Make validation state visible without reverting to the legacy magenta palette. */
:is(.fansflex-app, .fansflex-generic, .fansflex-no-nav) :is(.form-control, .form-select).is-invalid:focus {
    box-shadow: 0 0 0 .2rem color-mix(in srgb, #ef4444 18%, transparent);
}

/* When the on-screen keyboard consumes the lower viewport, the floating nav must not cover the active field. */
@media (max-width: 767.98px) {
    body.fansflex-app.ff-virtual-keyboard-open .ff-mobile-nav-shell {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
    }

    body.fansflex-app.ff-virtual-keyboard-open .content-wrapper,
    body.fansflex-app.ff-virtual-keyboard-open .main-wrapper {
        min-height: min(100dvh, var(--ff-visual-viewport-height, 100dvh));
    }

    body.fansflex-app.ff-virtual-keyboard-open :is(input, select, textarea, [contenteditable="true"]):focus {
        scroll-margin-bottom: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.fansflex-app .ff-mobile-nav-shell {
        transition: none !important;
    }
}

/* === FANSFLEX V7.2 SOURCE: fansflex-runtime-v34.css === */
/* FansFlex v3.4 transient feedback polish. */
:is(.fansflex-app, .fansflex-generic, .fansflex-no-nav) #toast-container {
    max-height: min(70dvh, 34rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

:is(.fansflex-app, .fansflex-generic, .fansflex-no-nav) #toast-container > .toast:focus-within {
    box-shadow: 0 0 0 2px rgba(89, 166, 255, .22), 0 18px 44px rgba(3, 10, 22, .28);
}

:is(.fansflex-app, .fansflex-generic, .fansflex-no-nav) #toast-container .toast-close:focus-visible,
:is(.fansflex-app, .fansflex-generic, .fansflex-no-nav) .alert .btn-close:focus-visible {
    outline: 2px solid #59a6ff;
    outline-offset: 3px;
    box-shadow: none;
}

@media (max-width: 767.98px) {
    body.fansflex-app #toast-container.bottom-right,
    body.fansflex-app #toast-container.bottom-left,
    body.fansflex-app #toast-container.bottom-center {
        bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }

    body.fansflex-app.ff-virtual-keyboard-open #toast-container.bottom-right,
    body.fansflex-app.ff-virtual-keyboard-open #toast-container.bottom-left,
    body.fansflex-app.ff-virtual-keyboard-open #toast-container.bottom-center {
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.fansflex-app, .fansflex-generic, .fansflex-no-nav) #toast-container > .toast {
        transition: none !important;
    }
}

/* === FANSFLEX V7.2 SOURCE: fansflex-runtime-v35.css === */
/* FansFlex v3.5 disclosure-state polish. */
.ff-ui-v35 [data-bs-toggle="dropdown"][aria-expanded="true"],
.ff-ui-v35 [data-bs-toggle="collapse"][aria-expanded="true"] {
    border-color: rgba(70, 150, 255, .42);
}

.ff-ui-v35.fansflex-app [data-bs-toggle="dropdown"][aria-expanded="true"],
.ff-ui-v35.fansflex-app [data-bs-toggle="collapse"][aria-expanded="true"] {
    background-color: rgba(46, 130, 246, .10);
}

.ff-ui-v35 [role="tab"][aria-selected="false"] {
    opacity: .78;
}

.ff-ui-v35 [role="tab"][aria-selected="true"] {
    opacity: 1;
}

.ff-ui-v35 [data-bs-toggle="dropdown"]:focus-visible,
.ff-ui-v35 [data-bs-toggle="collapse"]:focus-visible,
.ff-ui-v35 [role="tab"]:focus-visible {
    outline: 2px solid rgba(72, 152, 255, .92);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .ff-ui-v35 [data-bs-toggle="dropdown"],
    .ff-ui-v35 [data-bs-toggle="collapse"],
    .ff-ui-v35 [role="tab"] {
        transition: none !important;
    }
}

/* === FANSFLEX V7.2 SOURCE: fansflex-runtime-v36.css === */
/* FansFlex v3.6 focus/disclosure continuity polish. */
.ff-ui-v36 [data-bs-toggle="dropdown"],
.ff-ui-v36 [data-bs-toggle="collapse"],
.ff-ui-v36 [data-bs-toggle="tab"],
.ff-ui-v36 [data-bs-toggle="pill"] {
    scroll-margin-block: 88px;
}

.ff-ui-v36 [data-bs-toggle="dropdown"]:focus-visible,
.ff-ui-v36 [data-bs-toggle="collapse"]:focus-visible,
.ff-ui-v36 [data-bs-toggle="tab"]:focus-visible,
.ff-ui-v36 [data-bs-toggle="pill"]:focus-visible {
    outline: 2px solid rgba(52, 145, 255, .92);
    outline-offset: 3px;
}

@media (max-width: 767.98px) {
    .ff-ui-v36.has-mobile-bottom-nav [data-bs-toggle="dropdown"],
    .ff-ui-v36.has-mobile-bottom-nav [data-bs-toggle="collapse"],
    .ff-ui-v36.has-mobile-bottom-nav [data-bs-toggle="tab"],
    .ff-ui-v36.has-mobile-bottom-nav [data-bs-toggle="pill"] {
        scroll-margin-bottom: calc(104px + env(safe-area-inset-bottom));
    }
}

/* === FANSFLEX V7.2 SOURCE: fansflex-design-unification-v46.css === */
/* FANSFLEX v4.6: cross-route design consolidation. Loaded LAST in all user-facing layouts. */
:root, [data-bs-theme="light"], [data-theme="light"] {
  --bs-primary:#176db6; --bs-primary-rgb:23,109,182;
  --ff-action:#176db6; --ff-action-hover:#12588f;
  --ff-action-ink:#fff; --ff-focus:rgba(37,129,198,.24);
  --ff-unified-radius:12px;
}
[data-bs-theme="dark"], [data-theme="dark"] {
  --bs-primary:#65b6ee; --bs-primary-rgb:101,182,238;
  --ff-action:#338dc7; --ff-action-hover:#57ace2;
  --ff-action-ink:#fff; --ff-focus:rgba(101,182,238,.28);
}
/* Remove legacy purple from interactive actions, not from user-uploaded media. */
body.fansflex-app,body.fansflex-generic,body.fansflex-no-nav {
  --bs-link-color:#2684c5; --bs-link-hover-color:#1469a8;
  --bs-focus-ring-color:var(--ff-focus);
  --ff-v27-accent:#2684c5; --ff-v27-accent-soft:rgba(38,132,197,.12);
  accent-color:var(--ff-action);
}
body.fansflex-app .btn-primary,body.fansflex-generic .btn-primary,body.fansflex-no-nav .btn-primary,
body.fansflex-app .bg-primary,body.fansflex-generic .bg-primary,body.fansflex-no-nav .bg-primary,
body.fansflex-app .badge.bg-primary,body.fansflex-generic .badge.bg-primary,body.fansflex-no-nav .badge.bg-primary,
body.fansflex-app .btn.btn-purple,body.fansflex-generic .btn.btn-purple,body.fansflex-no-nav .btn.btn-purple,
body.fansflex-app .btn.btn-violet,body.fansflex-generic .btn.btn-violet,body.fansflex-no-nav .btn.btn-violet {
  background:var(--ff-action)!important;border-color:var(--ff-action)!important;color:var(--ff-action-ink)!important;
  background-image:none!important;box-shadow:none;
}
body.fansflex-app .btn-primary:hover,body.fansflex-generic .btn-primary:hover,body.fansflex-no-nav .btn-primary:hover,
body.fansflex-app .btn.btn-purple:hover,body.fansflex-generic .btn.btn-purple:hover,body.fansflex-no-nav .btn.btn-purple:hover {
  background:var(--ff-action-hover)!important;border-color:var(--ff-action-hover)!important;
}
body.fansflex-app .btn-outline-primary,body.fansflex-generic .btn-outline-primary,body.fansflex-no-nav .btn-outline-primary {
  color:var(--ff-action)!important;border-color:var(--ff-action)!important;background:transparent!important;
}
body.fansflex-app .btn-outline-primary:hover,body.fansflex-generic .btn-outline-primary:hover,body.fansflex-no-nav .btn-outline-primary:hover {
  color:#fff!important;background:var(--ff-action)!important;
}
body.fansflex-app .text-primary,body.fansflex-generic .text-primary,body.fansflex-no-nav .text-primary,
body.fansflex-app a:not(.btn):not(.nav-link),body.fansflex-generic a:not(.btn):not(.nav-link),body.fansflex-no-nav a:not(.btn):not(.nav-link) {
  --bs-text-opacity:1;
}
body.fansflex-app .text-primary,body.fansflex-generic .text-primary,body.fansflex-no-nav .text-primary {color:var(--ff-action)!important;}
body.fansflex-app .form-check-input:checked,body.fansflex-generic .form-check-input:checked,body.fansflex-no-nav .form-check-input:checked {
  background-color:var(--ff-action)!important;border-color:var(--ff-action)!important;
}
body.fansflex-app :is(.form-control,.form-select,.form-check-input,.btn):focus-visible,
body.fansflex-generic :is(.form-control,.form-select,.form-check-input,.btn):focus-visible,
body.fansflex-no-nav :is(.form-control,.form-select,.form-check-input,.btn):focus-visible {
  outline:2px solid var(--ff-action);outline-offset:2px;box-shadow:0 0 0 .2rem var(--ff-focus)!important;
}
body.fansflex-app :is(.btn,.card,.modal-content,.dropdown-menu,.form-control,.form-select),
body.fansflex-generic :is(.btn,.card,.modal-content,.dropdown-menu,.form-control,.form-select),
body.fansflex-no-nav :is(.btn,.card,.modal-content,.dropdown-menu,.form-control,.form-select) {border-radius:var(--ff-unified-radius);}
body.fansflex-app :is(.btn,.form-control,.form-select),body.fansflex-generic :is(.btn,.form-control,.form-select),body.fansflex-no-nav :is(.btn,.form-control,.form-select) {transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;}
@media(prefers-reduced-motion:reduce){body.fansflex-app *,body.fansflex-generic *,body.fansflex-no-nav *{transition-duration:.01ms!important;}}

/* === FANSFLEX V7.2 SOURCE: fansflex-design-unification-v47.css === */
/* FANSFLEX v4.7: user-facing shared component migration. Loaded after v4.6. */
:root,[data-bs-theme="light"],[data-theme="light"] { --ff-surface:#fff;--ff-surface-alt:#f3f8fc;--ff-stroke:#dce7ef;--ff-muted:#607789;--ff-active-bg:#e7f3fc; }
[data-bs-theme="dark"],[data-theme="dark"] { --ff-surface:#142533;--ff-surface-alt:#1a3041;--ff-stroke:#30495b;--ff-muted:#a7bfce;--ff-active-bg:#1e435b; }
:is(body.fansflex-app,body.fansflex-generic,body.fansflex-no-nav) :is(.btn-primary,.btn-purple,.btn-violet,.bg-primary,.page-item.active .page-link,.progress-bar.bg-primary,.nav-pills .nav-link.active,.list-group-item.active,.dropdown-item.active,.dropdown-item:active) { background-color:var(--ff-action)!important;border-color:var(--ff-action)!important;color:#fff!important;background-image:none!important; }
:is(body.fansflex-app,body.fansflex-generic,body.fansflex-no-nav) :is(.btn-primary,.btn-purple,.btn-violet,.nav-pills .nav-link.active):hover { background-color:var(--ff-action-hover)!important;border-color:var(--ff-action-hover)!important; }
:is(body.fansflex-app,body.fansflex-generic,body.fansflex-no-nav) :is(.btn-outline-primary,.page-link,.nav-link.active:not(.btn),.link-primary,.text-primary,.dropdown-item:focus-visible) { color:var(--ff-action)!important; }
:is(body.fansflex-app,body.fansflex-generic,body.fansflex-no-nav) :is(.page-link,.dropdown-menu,.modal-content,.list-group-item,.card) { border-color:var(--ff-stroke); }
:is(body.fansflex-app,body.fansflex-generic,body.fansflex-no-nav) :is(.page-link,.dropdown-menu,.modal-content) { background-color:var(--ff-surface); }
:is(body.fansflex-app,body.fansflex-generic,body.fansflex-no-nav) :is(.nav-tabs .nav-link.active,.dropdown-item:hover:not(.active),.list-group-item-action:hover:not(.active)) { background-color:var(--ff-active-bg); }
:is(body.fansflex-app,body.fansflex-generic,body.fansflex-no-nav) :is(.form-range,.form-check-input,.form-switch .form-check-input) { accent-color:var(--ff-action); }
:is(body.fansflex-app,body.fansflex-generic,body.fansflex-no-nav) .form-range::-webkit-slider-thumb { background:var(--ff-action); }
:is(body.fansflex-app,body.fansflex-generic,body.fansflex-no-nav) .form-range::-moz-range-thumb { background:var(--ff-action); }
:is(body.fansflex-app,body.fansflex-generic,body.fansflex-no-nav) :is(.form-control,.form-select):focus { border-color:var(--ff-action);box-shadow:0 0 0 .2rem var(--ff-focus); }
:is(body.fansflex-app,body.fansflex-generic,body.fansflex-no-nav) :is(.btn-primary,.btn-outline-primary,.page-link,.nav-link,.dropdown-item):focus-visible { outline:2px solid var(--ff-action);outline-offset:2px;box-shadow:0 0 0 .2rem var(--ff-focus)!important; }
@media(prefers-reduced-motion:reduce){:is(body.fansflex-app,body.fansflex-generic,body.fansflex-no-nav) :is(.btn,.page-link,.nav-link){transition:none!important;}}

/* === FANSFLEX V7.2 SOURCE: fansflex-design-unification-v48.css === */
/* FANSFLEX v4.8 - active navigation contrast regression repair. */
/* v4.7's later .nav-link.active:not(.btn) rule accidentally turned active pill text
   blue on a blue fill. Preserve active state legibility in light and dark themes. */
:is(body.fansflex-app,body.fansflex-generic,body.fansflex-no-nav) :is(
  .nav-pills .nav-link.active,
  .nav-pills .show > .nav-link,
  .list-group-item.active,
  .dropdown-item.active,
  .dropdown-item:active,
  .page-item.active .page-link
) { color:#fff!important; background-color:var(--ff-action)!important; border-color:var(--ff-action)!important; }
:is(body.fansflex-app,body.fansflex-generic,body.fansflex-no-nav) :is(
  .nav-pills .nav-link.active,
  .nav-pills .show > .nav-link,
  .list-group-item.active,
  .dropdown-item.active,
  .page-item.active .page-link
):focus-visible { outline:2px solid var(--ff-action-hover); outline-offset:2px; }
/* Ensure disabled active pagination does not look clickable. */
:is(body.fansflex-app,body.fansflex-generic,body.fansflex-no-nav) .page-item.disabled .page-link { opacity:.55; cursor:not-allowed; }
