html {
            background: #050817;
        }
        :root {
            --primary: #7c3aed;
            --primary-dark: #5b21b6;
            --primary-light: #a78bfa;
            --secondary: #0f172a;
            --accent: #f59e0b;
            --bg-body: #f8fafc;
            --bg-card: #ffffff;
            --text-muted: #64748b;
            --radius: 16px;
            --radius-sm: 10px;
            --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
            --shadow-lg: 0 10px 40px rgba(0,0,0,.08);
            --shadow-xl: 0 20px 60px rgba(0,0,0,.12);
            --gradient: linear-gradient(135deg, #7c3aed, #a855f7);
            --gradient-hover: linear-gradient(135deg, #6d28d9, #9333ea);
            --gradient-hero: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%);
        }

        * { box-sizing: border-box; }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg-body);
            color: #1e293b;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: 2147483000;
            pointer-events: none;
            background:
                radial-gradient(circle at 18% 8%, rgba(124,58,237,.2), transparent 30rem),
                linear-gradient(135deg, #050817 0%, #090016 100%);
            opacity: 0;
            visibility: hidden;
            transition: opacity 120ms ease, visibility 120ms ease;
        }

        body.page-is-navigating::before {
            opacity: 1;
            visibility: visible;
        }

        @media (prefers-reduced-motion: reduce) {
            body::before {
                transition: none;
            }
        }

        main { flex: 1; }

        /* ─── Navbar ─── */
        .navbar {
            background: rgba(0, 9, 31, .96) !important;
            backdrop-filter: blur(20px) saturate(1.5);
            border-bottom: 1px solid rgba(255,255,255,.06);
            padding: .55rem 0;
            z-index: 1060;
        }
        .navbar-brand {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 800;
            font-size: 1.35rem;
            letter-spacing: 0;
            display: flex;
            align-items: center;
            gap: .4rem;
            min-width: 0;
            padding: 0;
            height: 56px;
            width: 210px;
            overflow: hidden;
            background: transparent;
            border: 0;
            box-shadow: none;
            margin-left: 0;
        }
        .navbar-brand .brand-logo-mark {
            width: 100%;
            height: 56px;
            max-width: 210px;
            object-fit: contain;
            object-position: center;
            display: block;
            border-radius: 0;
            border: 0;
            opacity: .98;
            filter: drop-shadow(0 0 12px rgba(139,92,246,.24));
        }
        .navbar-brand .brand-logo-mobile-lockup {
            display: none;
        }
        .navbar-brand .brand-lockup-text {
            display: none;
        }
        .brand-lockup-text {
            display: inline-flex;
            flex-direction: column;
            justify-content: center;
            min-width: 0;
            line-height: .98;
            text-transform: uppercase;
            text-shadow: 0 0 16px rgba(250,204,21,.16), 0 0 18px rgba(34,211,238,.1);
        }
        .brand-lockup-text__top,
        .brand-lockup-text__bottom {
            display: block;
            letter-spacing: 0;
            white-space: nowrap;
        }
        .brand-lockup-text__top {
            color: #fff7ad;
            font-size: .98rem;
            font-weight: 900;
        }
        .brand-lockup-text__bottom {
            margin-top: .12rem;
            color: #e9d5ff;
            font-size: .76rem;
            font-weight: 800;
        }
        .brand-text-fallback {
            color: #f8fafc;
            font-size: 1.3rem;
            font-weight: 900;
            letter-spacing: 0;
            line-height: 1;
        }
        .header-avatar-img,
        .header-avatar-fallback {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 1px solid rgba(216,180,254,.35);
            flex: 0 0 28px;
        }
        .header-avatar-img {
            object-fit: cover;
        }
        .header-avatar-fallback {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            background: var(--gradient);
            font-size: .75rem;
            font-weight: 800;
            text-transform: uppercase;
        }
        .header-message-link {
            position: relative;
        }
        .header-unread-badge {
            position: absolute;
            top: .12rem;
            right: .18rem;
            min-width: 17px;
            height: 17px;
            display: inline-grid;
            place-items: center;
            border: 2px solid rgba(0,9,31,.96);
            border-radius: 999px;
            color: #fff;
            background: #ef4444;
            font-size: .62rem;
            font-weight: 800;
            line-height: 1;
        }
        .navbar .nav-link:focus-visible,
        .navbar .dropdown-item:focus-visible {
            outline: 2px solid rgba(216,180,254,.8);
            outline-offset: 3px;
            border-radius: 10px;
        }
        .footer-wordmark {
            width: min(260px, 70vw);
            height: 94px;
            object-fit: contain;
            object-position: center;
            border-radius: 0;
            border: 0;
            opacity: .92;
            filter: drop-shadow(0 0 14px rgba(139,92,246,.18));
        }
        .footer-brand-lockup {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .75rem;
        }
        .footer-brand-lockup .brand-lockup-text {
            text-align: left;
        }

        body.page-admin-dashboard .footer,
        body.page-my-subscription .footer,
        body.page-admin-subscriptions .footer,
        body.page-subscriptions-public .footer,
        body.page-profile .footer,
        body.page-favorites .footer,
        body.page-audiobooks .footer {
            min-height: 0 !important;
            margin-top: 0 !important;
            padding: .45rem 0 !important;
            background: transparent;
            border-top: 0;
        }

        body.page-admin-dashboard .footer .footer-brand-lockup,
        body.page-admin-dashboard .footer p,
        body.page-my-subscription .footer .footer-brand-lockup,
        body.page-my-subscription .footer p,
        body.page-admin-subscriptions .footer .footer-brand-lockup,
        body.page-admin-subscriptions .footer p,
        body.page-subscriptions-public .footer .footer-brand-lockup,
        body.page-subscriptions-public .footer p,
        body.page-profile .footer .footer-brand-lockup,
        body.page-profile .footer p,
        body.page-favorites .footer .footer-brand-lockup,
        body.page-favorites .footer p,
        body.page-audiobooks .footer .footer-brand-lockup,
        body.page-audiobooks .footer p {
            display: none !important;
        }
        @media (max-width: 1024px) {
            .navbar-brand {
                width: 172px;
                height: 50px;
            }
            .navbar-brand .brand-logo-mark {
                height: 50px;
                max-width: 172px;
            }
        }
        .mobile-nav-backdrop,
        .mobile-nav-drawer-header {
            display: none;
        }

        @media (max-width: 991.98px) {
            html,
            body {
                width: 100%;
                max-width: 100%;
                overflow-x: hidden;
            }

            body.mobile-menu-open {
                overflow: hidden;
            }

            .mobile-nav-backdrop {
                display: block;
                position: fixed;
                inset: 0;
                z-index: 1088;
                border: 0;
                background: rgba(2, 6, 23, .64);
                opacity: 0;
                pointer-events: none;
                transition: opacity .22s ease;
            }

            body.mobile-menu-open .mobile-nav-backdrop {
                opacity: 1;
                pointer-events: auto;
            }

            .navbar-collapse {
                display: block !important;
                position: fixed;
                top: calc(64px + env(safe-area-inset-top, 0px));
                right: max(10px, env(safe-area-inset-right, 0px));
                bottom: auto;
                width: min(330px, calc(100vw - 20px));
                height: auto;
                max-height: calc(100dvh - 76px - env(safe-area-inset-top, 0px));
                margin: 0;
                padding: .72rem;
                border: 1px solid rgba(255,255,255,.1);
                border-radius: 14px;
                background: rgba(8, 12, 28, .98);
                box-shadow: 0 18px 48px rgba(0,0,0,.42);
                overflow-y: auto;
                z-index: 1095;
                transform: translateY(-8px) scale(.985);
                transform-origin: top right;
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transition: transform .2s ease, opacity .16s ease, visibility .2s ease;
                flex-basis: auto;
                order: initial;
            }

            .navbar-collapse.show {
                transform: translateY(0) scale(1);
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
            }

            .mobile-nav-drawer-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: .75rem;
                padding: .2rem .15rem .85rem;
                margin-bottom: .35rem;
                border-bottom: 1px solid rgba(255,255,255,.08);
                color: #fff;
                font-weight: 800;
            }

            .mobile-nav-close {
                width: 38px;
                height: 38px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border: 1px solid rgba(255,255,255,.12);
                border-radius: 12px;
                background: rgba(255,255,255,.06);
                color: #fff;
            }

            .navbar-collapse .navbar-nav {
                margin: 0 !important;
                gap: .25rem;
                align-items: stretch !important;
            }

            .navbar .nav-link {
                border-radius: 10px;
            }
        }

        @media (max-width: 576px) {
            .navbar-collapse {
                width: min(88vw, 330px);
                margin: 0;
            }
        }

        @media (max-width: 768px) {
            .navbar-brand {
                height: 44px;
                width: min(42vw, 152px);
                margin-left: 0;
                gap: 0;
            }
            .navbar-brand .brand-lockup-text {
                display: none;
            }
            .navbar-brand .brand-logo-mark {
                display: block;
                width: min(42vw, 152px);
                max-width: 152px;
                height: 42px;
                object-fit: cover;
                object-position: center 49%;
                border: 0;
                border-radius: 0;
                opacity: 1;
            }
            .navbar-brand .brand-logo-mobile-lockup {
                display: none;
            }
            .footer-wordmark {
                width: min(220px, 72vw);
                height: 78px;
            }
            .brand-lockup-text__top {
                font-size: .88rem;
            }
            .brand-lockup-text__bottom {
                font-size: .68rem;
            }
            .footer {
                padding: 1.25rem 0 1rem;
                margin-top: 2rem;
            }
        }
        @media (max-width: 480px) {
            .navbar-brand {
                width: min(42vw, 148px);
                height: 42px;
            }
            .navbar-brand .brand-logo-mark {
                width: min(42vw, 148px);
                max-width: 148px;
                height: 40px;
            }
        }
        @media (max-width: 360px) {
            .navbar-brand {
                width: 126px;
                height: 40px;
            }
            .navbar-brand .brand-logo-mark {
                width: 126px;
                height: 38px;
            }
            .brand-lockup-text__top {
                font-size: .78rem;
            }
            .brand-lockup-text__bottom {
                font-size: .6rem;
            }
            .footer-wordmark {
                width: min(190px, 74vw);
                height: 68px;
            }
        }
        .navbar .nav-link {
            font-weight: 500;
            font-size: .9rem;
            padding: .5rem 1rem !important;
            border-radius: var(--radius-sm);
            transition: all .2s;
            color: rgba(255,255,255,.7) !important;
        }
        .navbar .nav-link:hover {
            background: rgba(255,255,255,.08);
            color: #fff !important;
        }
        .desktop-expanded-nav { display: none; }

        @media (min-width: 1200px) {
            .page-support .navbar {
                min-height: 76px;
                padding: 0;
                background: rgba(2, 8, 22, .98) !important;
            }
            .page-support .navbar > .container-fluid {
                display: grid;
                grid-template-columns: clamp(210px, 17vw, 270px) minmax(0, 1fr) auto auto;
                align-items: center;
                width: min(calc(100% - clamp(24px, 3vw, 64px)), 1920px);
                padding-inline: 0;
                gap: clamp(.75rem, 1.2vw, 1.25rem);
            }
            .page-support .navbar-brand {
                width: clamp(210px, 17vw, 270px);
                height: 74px;
                margin: 0;
                flex: 0 0 clamp(210px, 17vw, 270px);
            }
            .page-support .navbar-brand img {
                width: 100%;
                height: 48px;
                max-width: 178px;
                object-fit: contain;
            }
            .page-support .desktop-expanded-nav { display: list-item; }
            .page-support .navbar-collapse { order: 3; grid-column: 3; justify-self: end; flex: 0 1 auto; }
            .page-support .navbar-nav { margin: 0 !important; gap: .28rem; flex-wrap: nowrap; }
            .page-support .navbar .nav-link {
                white-space: nowrap;
                padding: .62rem clamp(.56rem, .7vw, .8rem) !important;
                font-size: clamp(.78rem, .78vw, .9rem);
            }
            .page-support .navbar .nav-icon-only-desktop {
                width: 42px;
                height: 42px;
                padding: 0 !important;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }
            .page-support .navbar .nav-icon-only-desktop i {
                margin: 0 !important;
                font-size: 1rem;
            }
            .page-support .navbar .nav-icon-only-desktop .nav-label {
                position: absolute;
                width: 1px;
                height: 1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
            }
            .page-support .navbar .nav-link.active {
                color: #fff !important;
                background: linear-gradient(135deg, rgba(91,33,182,.72), rgba(49,46,129,.38));
                box-shadow: inset 0 0 0 1px rgba(167,139,250,.12);
            }
            .page-support .navbar-utility-search {
                order: 2;
                grid-column: 3;
                justify-self: end;
                flex: 0 0 auto;
                width: auto;
                max-width: none;
                margin: 0 -.15rem 0 0;
                min-width: 0;
            }
            .page-support .header-search-form {
                height: 44px;
                border-radius: 14px;
                background: rgba(3,7,20,.72);
            }
            .page-support #navbarNav { order: 3; grid-column: 4; }
            .page-support .navbar-nav { align-items: center; }
            .page-support .navbar-nav > .nav-item { display: flex; align-items: center; }
            .page-support .navbar .nav-item.dropdown > .nav-link > .d-lg-inline {
                display: none !important;
            }
        }
        @media (min-width: 1200px) and (max-width: 1450px) {
            .page-support .navbar > .container-fluid {
                grid-template-columns: clamp(188px, 15vw, 226px) minmax(0, 1fr) auto auto;
                gap: .65rem;
            }
            .page-support .navbar-brand {
                width: clamp(188px, 15vw, 226px);
                flex-basis: clamp(188px, 15vw, 226px);
            }
            .page-support .navbar .nav-link {
                padding-inline: .52rem !important;
                font-size: .82rem;
            }
        }
        .navbar .dropdown-menu {
            background: #1e293b;
            border: 1px solid rgba(255,255,255,.08);
            border-radius: var(--radius-sm);
            box-shadow: var(--shadow-xl);
            padding: .4rem;
            z-index: 9999;
        }
        @media (min-width: 992px) {
            .navbar .nav-icon-only-desktop,
            .navbar .header-account-toggle {
                width: 42px;
                height: 42px;
                padding: 0 !important;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border-radius: 14px;
            }
            .navbar .nav-icon-only-desktop i,
            .navbar .header-account-toggle i {
                margin: 0 !important;
                font-size: 1.03rem;
            }
            .navbar .nav-icon-only-desktop .nav-label {
                position: absolute;
                width: 1px;
                height: 1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                clip-path: inset(50%);
                white-space: nowrap;
            }
            .navbar .nav-link.active {
                color: #fff !important;
                background:
                    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent),
                    rgba(124, 58, 237, .18);
                box-shadow: inset 0 0 0 1px rgba(216, 180, 254, .18);
            }
            .navbar .header-account-toggle::after {
                margin-left: .18rem;
                transform: scale(.82);
            }
            .navbar .header-account-toggle {
                width: auto;
                min-width: 46px;
                padding-inline: .38rem !important;
                gap: .18rem !important;
            }
        }
        .navbar .dropdown-item {
            color: rgba(255,255,255,.7);
            border-radius: 8px;
            padding: .5rem .8rem;
            font-size: .875rem;
            transition: all .15s;
        }
        .navbar .dropdown-item:hover {
            background: rgba(124, 58, 237, .2);
            color: #fff;
        }
        .navbar .dropdown-item i { width: 1.2rem; }
        .navbar .dropdown-divider { border-color: rgba(255,255,255,.08); }
        .navbar .dropdown-item-text { font-size: .8rem; }

        .navbar > .container,
        .navbar > .container-fluid {
            max-width: none;
            padding-left: clamp(1rem, 5vw, 7rem);
            padding-right: clamp(1rem, 5vw, 7rem);
            position: relative;
        }
        .navbar-collapse {
            min-width: 0;
            flex-grow: 0;
            order: 2;
        }
        .navbar-nav {
            margin-left: auto;
            min-width: 0;
        }
        .header-search-item {
            position: relative;
            display: flex;
            align-items: center;
            min-width: 0;
        }
        .navbar-utility-search {
            order: 1;
            margin-left: auto;
            margin-right: .55rem;
        }
        .navbar-toggler {
            order: 4;
        }
        .header-search-toggle,
        .header-search-close {
            width: 38px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 0;
            border-radius: 999px;
            background: transparent;
            color: rgba(255,255,255,.72);
            transition: background .2s ease, color .2s ease, box-shadow .2s ease;
        }
        .header-search-toggle:hover,
        .header-search-toggle:focus-visible,
        .header-search-close:hover,
        .header-search-close:focus-visible,
        .header-search-item.is-open .header-search-toggle {
            background: rgba(255,255,255,.08);
            color: #fff;
            outline: none;
            box-shadow: 0 0 0 3px rgba(124,58,237,.2);
        }
        .header-search-shell {
            position: absolute;
            top: 50%;
            right: 0;
            width: 0;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            overflow: visible;
            transform: translateY(-50%) translateX(.35rem);
            transition: width .3s ease, opacity .2s ease, transform .3s ease, visibility .2s ease;
            z-index: 1080;
        }
        .header-search-item.is-open .header-search-shell {
            width: clamp(240px, 30vw, 450px);
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(-50%) translateX(0);
        }
        .header-search-form {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
            height: 42px;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 999px;
            background: rgba(2,6,23,.72);
            box-shadow: inset 0 0 0 1px rgba(124,58,237,.05);
        }
        .header-search-form:focus-within {
            border-color: rgba(192,132,252,.7);
            box-shadow: 0 0 0 3px rgba(124,58,237,.18);
        }
        .header-search-form > i {
            color: rgba(255,255,255,.52);
            margin-left: .9rem;
            flex-shrink: 0;
        }
        .header-search-input {
            min-width: 0;
            flex: 1;
            border: 0;
            outline: 0;
            background: transparent;
            color: #fff;
            padding: .45rem 2.75rem .45rem .6rem;
            font-size: .9rem;
        }
        .header-search-form .header-search-close {
            position: absolute;
            top: 50%;
            right: 8px;
            z-index: 3;
            width: 30px;
            height: 30px;
            min-width: 30px;
            padding: 0;
            transform: translateY(-50%);
            line-height: 1;
        }
        .header-search-form .header-search-close i {
            display: block;
            width: 16px;
            height: 16px;
            margin: 0;
            font-size: 16px;
            line-height: 1;
        }
        .header-search-input::placeholder {
            color: rgba(255,255,255,.38);
        }
        .header-search-results {
            position: absolute;
            top: calc(100% + .55rem);
            right: 0;
            width: 100%;
            max-height: min(400px, 68vh);
            overflow-y: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
            background: rgba(15,23,42,.98);
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 14px;
            box-shadow: 0 20px 70px rgba(0,0,0,.38);
            padding: .45rem;
            z-index: 4000;
            display: none;
        }
        .header-search-results::-webkit-scrollbar {
            display: none;
            width: 0;
            height: 0;
        }
        .header-search-item.is-open .header-search-results.is-visible {
            display: block;
        }
        .header-search-result,
        .header-search-empty {
            display: flex;
            align-items: center;
            gap: .75rem;
            width: 100%;
            padding: .65rem;
            border-radius: 10px;
            color: rgba(255,255,255,.82);
            text-decoration: none;
            border: 0;
            background: transparent;
            text-align: left;
        }
        .header-search-result:hover,
        .header-search-result.is-active {
            background: rgba(124,58,237,.22);
            color: #fff;
        }
        .header-search-thumb {
            width: 42px;
            height: 42px;
            flex: 0 0 42px;
            border-radius: 8px;
            object-fit: cover;
            background: rgba(255,255,255,.08);
        }
        .header-search-title {
            display: block;
            font-weight: 750;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .header-search-meta {
            display: block;
            margin-top: .2rem;
            color: rgba(255,255,255,.48);
            font-size: .78rem;
        }
        .header-search-empty {
            color: rgba(255,255,255,.55);
            justify-content: center;
            min-height: 54px;
        }

        @media (max-width: 991.98px) {
            .header-search-item {
                width: auto;
                flex-wrap: nowrap;
                position: static;
            }
            .navbar-utility-search {
                position: static;
                order: 2;
                margin-left: auto;
                margin-right: .45rem;
            }
            .navbar-toggler {
                order: 3;
            }
            .navbar-collapse {
                order: 4;
                flex-basis: 100%;
            }
            .navbar-utility-search .header-search-shell {
                position: absolute;
                left: 1rem;
                right: 1rem;
                top: calc(100% + .55rem);
                z-index: 3000;
                opacity: 0;
                visibility: hidden;
                transform: translateY(-.25rem);
            }
            .header-search-item.is-open .header-search-shell {
                width: auto;
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }
            .header-search-results {
                left: 0;
                right: auto;
                width: 100%;
                max-height: min(400px, calc(100vh - 145px));
            }
            .header-search-result,
            .header-search-empty {
                min-height: 56px;
            }
        }

        /* ─── Alerts ─── */
        .alert-modern {
            border: none;
            border-radius: 0;
            padding: .85rem 0;
            font-size: .9rem;
            font-weight: 500;
            margin: 0;
        }
        .alert-modern.alert-success { background: #ffffff; color: #1e293b; border-bottom: 1px solid #e2e8f0; }
        .alert-modern.alert-danger { background: #7f1d1d; color: #fca5a5; }
        .alert-modern .btn-close { filter: brightness(0) opacity(.5); }
        .alert-modern.alert-danger .btn-close { filter: brightness(0) invert(1) opacity(.6); }

        /* ─── Cards ─── */
        .card {
            border: none;
            background: var(--bg-card);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            transition: all .3s cubic-bezier(.4,0,.2,1);
        }
        .card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
        .card-header {
            background: transparent;
            border-bottom: 1px solid rgba(0,0,0,.04);
            padding: 1.25rem 1.5rem;
            font-weight: 600;
        }
        .card-body { padding: 1.5rem; }
        .card-footer {
            background: transparent;
            border-top: 1px solid rgba(0,0,0,.04);
            padding: 1rem 1.5rem;
        }

        /* ─── Buttons ─── */
        .btn {
            font-weight: 600;
            font-size: .875rem;
            padding: .55rem 1.25rem;
            border-radius: var(--radius-sm);
            transition: all .25s cubic-bezier(.4,0,.2,1);
            border: none;
        }
        .btn-primary {
            background: var(--gradient);
            color: #fff;
            box-shadow: 0 4px 15px rgba(124,58,237,.3);
        }
        .btn-primary:hover {
            background: var(--gradient-hover);
            box-shadow: 0 6px 25px rgba(124,58,237,.4);
            transform: translateY(-1px);
            color: #fff;
        }
        .btn-outline-primary {
            background: transparent;
            border: 2px solid var(--primary);
            color: var(--primary);
        }
        .btn-outline-primary:hover {
            background: var(--gradient);
            border-color: transparent;
            color: #fff;
            box-shadow: 0 4px 15px rgba(124,58,237,.3);
            transform: translateY(-1px);
        }
        .btn-outline-secondary {
            border: 1px solid #e2e8f0;
            color: var(--text-muted);
            background: transparent;
        }
        .btn-outline-secondary:hover {
            background: #f1f5f9;
            border-color: #cbd5e1;
            color: #1e293b;
        }
        .btn-light {
            background: rgba(255,255,255,.15);
            color: #fff;
            border: 1px solid rgba(255,255,255,.2);
        }
        .btn-light:hover {
            background: rgba(255,255,255,.25);
            color: #fff;
        }
        .btn-sm { padding: .35rem .75rem; font-size: .8rem; }
        .btn-group .btn { border-radius: 0; }
        .btn-group .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
        .btn-group .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

        /* ─── Forms ─── */
        .form-control, .form-select {
            border: 2px solid #e2e8f0;
            border-radius: var(--radius-sm);
            padding: .65rem 1rem;
            font-size: .9rem;
            transition: all .2s;
            background: #fff;
        }
        .form-control:focus, .form-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(124,58,237,.12);
        }
        .form-label { font-weight: 600; font-size: .85rem; color: #334155; margin-bottom: .4rem; }
        .input-group-text {
            background: #f8fafc;
            border: 2px solid #e2e8f0;
            border-right: none;
            border-radius: var(--radius-sm) 0 0 var(--radius-sm);
            color: var(--text-muted);
        }
        .input-group .form-control { border-left: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
        .form-text { font-size: .8rem; color: var(--text-muted); }

        /* ─── Badges ─── */
        .badge {
            font-weight: 600;
            padding: .3em .7em;
            border-radius: 50px;
            font-size: .75rem;
        }
        .badge-primary { background: var(--gradient); color: #fff; }

        /* ─── Audiobook Cover ─── */
        .audiobook-cover {
            width: 100%;
            height: 220px;
            object-fit: cover;
            transition: all .4s ease;
        }
        img.is-fallback-cover {
            object-fit: contain !important;
            object-position: center;
            max-width: 100%;
            max-height: 100%;
        }
        .collection-cover img.is-fallback-cover,
        .collection-search-thumb.is-fallback-cover,
        .favorite-cover img.is-fallback-cover,
        .updated-audiobook-card__cover img.is-fallback-cover,
        .history-cover img.is-fallback-cover,
        .header-search-thumb.is-fallback-cover,
        .global-audio-cover img.is-fallback-cover,
        .admin-audiobooks-page img.is-fallback-cover {
            display: block;
            object-fit: contain !important;
            object-position: center;
        }
        .card:hover .audiobook-cover:not(.is-fallback-cover) { transform: scale(1.03); }
        /* ─── Tables ─── */
        .table {
            margin-bottom: 0;
        }
        .table thead th {
            background: #f8fafc;
            border-bottom: 2px solid #e2e8f0;
            color: var(--text-muted);
            font-weight: 600;
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: .03em;
            padding: 1rem .75rem;
        }
        .table tbody td {
            padding: .85rem .75rem;
            vertical-align: middle;
            border-color: #f1f5f9;
        }
        .table tbody tr { transition: background .15s; }
        .table tbody tr:hover { background: #f8fafc; }

        /* ─── Playlist ─── */
        .playlist-item {
            cursor: pointer;
            transition: all .15s ease;
            border-left: 3px solid transparent;
        }
        .playlist-item:hover {
            background: #f1f5f9;
            border-left-color: var(--primary-light);
        }
        .playlist-item.active {
            background: rgba(124,58,237,.08);
            border-left-color: var(--primary);
        }
        .play-btn {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50% !important;
            transition: all .2s;
        }
        .play-btn:hover {
            background: var(--gradient) !important;
            color: #fff !important;
            transform: scale(1.1);
        }
        .playlist-item.active .play-btn {
            background: var(--gradient) !important;
            color: #fff !important;
        }

        /* ─── Player Card ─── */
        .player-card {
            background: var(--gradient-hero);
            border-radius: var(--radius);
            box-shadow: var(--shadow-xl);
        }
        .player-card .form-range {
            height: 4px;
        }
        .player-card .form-range::-webkit-slider-thumb {
            background: #fff;
            width: 14px;
            height: 14px;
            margin-top: -5px;
        }

        /* ─── Auth Pages ─── */
        .auth-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--gradient-hero);
            padding: 2rem;
            position: relative;
            overflow: hidden;
        }
        .auth-section::before {
            content: '';
            position: absolute;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(124,58,237,.15), transparent 70%);
            top: -200px;
            right: -200px;
            border-radius: 50%;
        }
        .auth-section::after {
            content: '';
            position: absolute;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(168,85,247,.1), transparent 70%);
            bottom: -100px;
            left: -100px;
            border-radius: 50%;
        }
        .auth-card {
            background: rgba(255,255,255,.98);
            border-radius: 24px;
            padding: 2.5rem;
            width: 100%;
            max-width: 440px;
            box-shadow: 0 25px 80px rgba(0,0,0,.3);
            position: relative;
            z-index: 1;
        }
        .auth-card .brand-icon {
            width: 56px;
            height: 56px;
            background: var(--gradient);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            font-size: 1.5rem;
            color: #fff;
            box-shadow: 0 8px 25px rgba(124,58,237,.3);
        }

        /* ─── Dashboard ─── */
        .stat-card {
            padding: 1.5rem;
            border-radius: var(--radius);
            background: var(--bg-card);
            border: 1px solid rgba(0,0,0,.04);
            transition: all .3s;
        }
        .stat-card:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-2px);
        }
        .stat-icon {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
        }

        /* ─── Mobile Bottom Nav ─── */
        .bottom-nav {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1050;
            background: rgba(15, 23, 42, .98);
            backdrop-filter: blur(20px) saturate(1.5);
            border-top: 1px solid rgba(255,255,255,.06);
            padding: .35rem 0;
            align-items: center;
        }
        .bottom-nav .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            min-width: 0;
            text-decoration: none;
            color: rgba(255,255,255,.5);
            font-size: .6rem;
            font-weight: 500;
            padding: .25rem .5rem;
            transition: color .2s, transform .2s, text-shadow .2s;
            border: none;
            background: none;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }
        .bottom-nav .nav-item i {
            font-size: 1.2rem;
            margin-bottom: .1rem;
        }
        .bottom-nav .nav-item.active,
        .bottom-nav .nav-item:hover {
            color: var(--primary-light);
        }
        .bottom-nav .nav-item .badge-dot {
            position: absolute;
            top: 2px;
            right: -2px;
            width: 8px;
            height: 8px;
            background: var(--accent);
            border-radius: 50%;
        }
        body {
            padding-bottom: 0;
        }
        @media (max-width: 767.98px) {
            .bottom-nav {
                display: grid;
                grid-template-columns: repeat(6, minmax(0, 1fr));
                z-index: 1105;
                pointer-events: auto;
            }
            body {
                padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
            }
            .stat-card {
                padding: .85rem .9rem;
            }
            .stat-card .stat-icon {
                width: 36px;
                height: 36px;
                font-size: 1rem;
                border-radius: 10px;
                flex-shrink: 0;
            }
            .stat-card .fs-2 {
                font-size: 1.2rem !important;
            }
            .stat-card .text-muted.small {
                font-size: .7rem !important;
            }
            .stat-card .d-flex.align-items-center.gap-3 {
                gap: .65rem !important;
            }
        }

        /* ─── Footer ─── */
        .footer {
            background: #0f172a;
            color: rgba(255,255,255,.4);
            padding: 2rem 0;
            margin-top: 4rem;
            font-size: .875rem;
        }

        @media (max-width: 767.98px) {
            html,
            body {
                width: 100%;
                max-width: 100%;
                overflow-x: hidden;
            }

            body {
                padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
                background: #050817;
            }

            main {
                width: 100%;
                max-width: 100%;
                min-height: 0 !important;
                padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
                box-sizing: border-box;
            }

            .footer {
                display: none !important;
            }

            .bottom-nav {
                left: max(.6rem, env(safe-area-inset-left, 0px)) !important;
                right: max(.6rem, env(safe-area-inset-right, 0px)) !important;
                bottom: calc(.55rem + env(safe-area-inset-bottom, 0px)) !important;
                width: auto !important;
                min-height: 72px;
                grid-template-columns: repeat(6, minmax(0, 1fr));
                gap: .08rem;
                padding: .42rem .38rem .46rem;
                background:
                    radial-gradient(circle at 16% 0%, rgba(168,85,247,.2), transparent 36%),
                    linear-gradient(180deg, rgba(9,12,31,.97), rgba(4,7,19,.99)) !important;
                border: 1px solid rgba(192,132,252,.22) !important;
                border-radius: 22px 22px 20px 20px;
                box-shadow:
                    0 -18px 48px rgba(0,0,0,.34),
                    0 0 38px rgba(124,58,237,.16),
                    inset 0 1px 0 rgba(255,255,255,.06) !important;
                backdrop-filter: blur(18px) saturate(1.28) !important;
                z-index: 1105 !important;
                pointer-events: auto !important;
            }

            .bottom-nav .nav-item {
                min-width: 0;
                min-height: 52px;
                justify-content: center;
                position: relative;
                z-index: 1;
            }
        }

        /* ─── Misc ─── */
        .breadcrumb {
            background: transparent;
            padding: 0;
            margin-bottom: 1rem;
        }
        .breadcrumb-item a { color: var(--primary); text-decoration: none; font-weight: 500; }
        .breadcrumb-item.active { color: var(--text-muted); }
        .breadcrumb-item+.breadcrumb-item::before { color: var(--text-muted); }
        .text-muted { color: var(--text-muted) !important; }
        .section-title {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 700;
            font-size: 1.5rem;
            letter-spacing: 0;
        }
        .page-header {
            padding: 2rem 0 1.5rem;
        }
        .page-header h2 {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 800;
            font-size: 1.75rem;
            letter-spacing: 0;
        }
        .empty-state {
            padding: 4rem 2rem;
            text-align: center;
        }
        .empty-state i {
            font-size: 3.5rem;
            color: #cbd5e1;
            margin-bottom: 1rem;
        }
        .empty-state h4 { color: var(--text-muted); font-weight: 600; }

        /* ─── Animations ─── */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-in {
            animation: fadeInUp .5s ease forwards;
        }
        .animate-in:nth-child(2) { animation-delay: .05s; }
        .animate-in:nth-child(3) { animation-delay: .1s; }
        .animate-in:nth-child(4) { animation-delay: .15s; }
        .animate-in:nth-child(5) { animation-delay: .2s; }
        .animate-in:nth-child(6) { animation-delay: .25s; }

        /* ─── Scrollbar ─── */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        html,
        body,
        * {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        ::-webkit-scrollbar {
            width: 0 !important;
            height: 0 !important;
            display: none !important;
        }

        /* ─── Responsive ─── */
        @media (max-width: 768px) {
            .auth-card { padding: 1.75rem; }
            .page-header h2 { font-size: 1.35rem; }
            .card-body { padding: 1.25rem; }
        }
        @media (max-width: 576px) {
            .auth-section { padding: 1rem; }
        }

        /* ─── Mobile Navbar Fix ─── */
        @media (max-width: 991.98px) {
            .navbar-collapse {
                background: rgba(15, 23, 42, .98);
                border-radius: 12px;
                padding: .75rem;
                margin-top: .5rem;
                border: 1px solid rgba(255,255,255,.08);
                position: relative;
                z-index: 1061;
            }
            .navbar .nav-link {
                padding: .7rem 1rem !important;
                font-size: 1rem;
                border-radius: 8px;
            }
            .navbar .nav-link i {
                width: 1.4rem;
                text-align: center;
            }
            .navbar-nav .dropdown-menu {
                position: static !important;
                background: rgba(255,255,255,.06);
                border: none;
                border-radius: 8px;
                box-shadow: none;
                padding: .25rem;
                margin: .25rem 0 .5rem 1.5rem;
                z-index: 9999;
            }
            .navbar-nav .dropdown-menu .dropdown-item {
                color: rgba(255,255,255,.7);
                padding: .6rem .8rem;
                font-size: .9rem;
            }
            .navbar-nav .dropdown-menu .dropdown-item:hover {
                background: rgba(124, 58, 237, .2);
                color: #fff;
            }
            .navbar-nav .dropdown-menu .dropdown-item-text {
                color: rgba(255,255,255,.5);
                padding: .4rem .8rem;
            }
            .navbar-nav .dropdown-menu .dropdown-divider {
                border-color: rgba(255,255,255,.1);
            }
            .navbar-nav .nav-item {
                margin-bottom: 2px;
            }
            .navbar .navbar-nav {
                gap: 2px;
            }
        }

        @media (max-width: 991.98px) {
            .mobile-nav-backdrop {
                display: block;
                position: fixed;
                inset: 0;
                z-index: 1088;
                border: 0;
                background: rgba(2, 6, 23, .64);
                opacity: 0;
                pointer-events: none;
                transition: opacity .22s ease;
            }

            body.mobile-menu-open {
                overflow: hidden;
            }

            body.mobile-menu-open .mobile-nav-backdrop {
                opacity: 1;
                pointer-events: auto;
            }

            .navbar-collapse {
                display: block !important;
                position: fixed !important;
                top: calc(64px + env(safe-area-inset-top, 0px));
                right: max(10px, env(safe-area-inset-right, 0px));
                bottom: auto;
                width: min(330px, calc(100vw - 20px));
                height: auto;
                max-height: calc(100dvh - 76px - env(safe-area-inset-top, 0px));
                margin: 0 !important;
                padding: .72rem;
                border: 1px solid rgba(196, 181, 253, .18);
                border-radius: 14px;
                background:
                    radial-gradient(circle at 20% 0%, rgba(124, 58, 237, .22), transparent 16rem),
                    linear-gradient(180deg, rgba(8, 12, 28, .92), rgba(4, 8, 22, .9));
                box-shadow: 0 22px 70px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.06);
                backdrop-filter: blur(22px) saturate(1.28);
                overflow-y: auto;
                z-index: 1095;
                transform: translateY(-8px) scale(.985);
                transform-origin: top right;
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transition: transform .2s ease, opacity .16s ease, visibility .2s ease;
                flex-basis: auto !important;
                order: initial !important;
            }

            .navbar-collapse.show {
                transform: translateY(0) scale(1);
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
            }

            .mobile-nav-drawer-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: .75rem;
                padding: .2rem .15rem .85rem;
                margin-bottom: .35rem;
                border-bottom: 1px solid rgba(255,255,255,.08);
                color: #fff;
                font-weight: 800;
            }

            .navbar-collapse .navbar-nav {
                margin: 0 !important;
                gap: .22rem;
                align-items: stretch !important;
            }

            .mobile-nav-section-label {
                padding: .74rem .15rem .28rem;
                color: rgba(196, 181, 253, .74);
                font-size: .68rem;
                font-weight: 900;
                letter-spacing: .08em;
                line-height: 1;
                text-transform: uppercase;
            }

            .navbar-collapse .nav-link {
                min-height: 42px;
                display: flex;
                align-items: center;
                border: 1px solid transparent;
                color: rgba(241, 245, 249, .86) !important;
                background: rgba(255,255,255,.035);
            }

            .navbar-collapse .nav-link:hover,
            .navbar-collapse .nav-link:focus-visible,
            .navbar-collapse .nav-link.active {
                border-color: rgba(216,180,254,.24);
                color: #fff !important;
                background: rgba(124,58,237,.16);
            }

            .navbar-collapse .nav-link i {
                flex: 0 0 1.35rem;
                width: 1.35rem;
                text-align: center;
            }

            .navbar-collapse .nav-label {
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .mobile-logout-form {
                margin: 0;
            }

            .mobile-logout-button {
                width: 100%;
                border: 1px solid rgba(248,113,113,.18) !important;
                border-radius: 10px;
                color: #fecaca !important;
                background: rgba(127,29,29,.13) !important;
                font: inherit;
                text-align: left;
            }

            .mobile-logout-button:hover,
            .mobile-logout-button:focus-visible {
                color: #fff !important;
                background: rgba(220,38,38,.2) !important;
                border-color: rgba(248,113,113,.28) !important;
            }

        }
        @media (max-width: 576px) {
            .navbar-collapse {
                right: max(8px, env(safe-area-inset-right, 0px));
                width: min(322px, calc(100vw - 16px));
                border-radius: 14px;
            }
        }

        /* ─── Global Mobile Responsive Enhancements ─── */
        @media (max-width: 768px) {
            body {
                padding-bottom: 70px; /* space for bottom nav */
            }
            .container {
                padding-left: 1rem;
                padding-right: 1rem;
            }
            .py-4 {
                padding-top: 1rem !important;
                padding-bottom: 1rem !important;
            }
            h2 {
                font-size: 1.35rem !important;
            }
            h3 {
                font-size: 1.2rem !important;
            }
            h4 {
                font-size: 1.1rem !important;
            }
            h5 {
                font-size: 1rem !important;
            }
            .page-header {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: .75rem !important;
            }
            .page-header .btn {
                width: 100%;
            }
            .btn-group {
                flex-wrap: wrap;
            }
            .btn-group .btn {
                font-size: .8rem;
                padding: .35rem .6rem;
            }
            /* Cards */
            .card-body {
                padding: 1rem !important;
            }
            .row.g-4 > .col-12 {
                padding-bottom: 0;
            }
            /* Tables: force horizontal scroll only when needed */
            .table-responsive {
                font-size: .85rem;
            }
            .table td, .table th {
                padding: .5rem .4rem;
                white-space: nowrap;
            }
            /* Filters */
            .d-flex.gap-2.mb-3.flex-wrap {
                flex-direction: column;
                align-items: stretch !important;
            }
            .d-flex.gap-2.mb-3.flex-wrap .ms-auto {
                margin-left: 0 !important;
            }
            .d-flex.gap-2.mb-3.flex-wrap input,
            .d-flex.gap-2.mb-3.flex-wrap select {
                width: 100% !important;
            }
            /* Auth cards */
            .auth-card {
                margin: 1rem;
                padding: 1.5rem 1.25rem !important;
            }
            /* Step indicator */
            .step-indicator {
                gap: .25rem !important;
            }
            .step-line {
                width: 20px !important;
            }
            .step span {
                font-size: .6rem !important;
            }
            /* Stats row */
            .stat-card {
                padding: .85rem !important;
            }
            /* Modals */
            .modal-dialog {
                margin: .5rem;
            }
            .modal-body {
                padding: 1rem !important;
            }
            /* Bottom nav padding */
            .bottom-nav {
                padding: .35rem 0;
            }
            .bottom-nav .nav-item span {
                font-size: .6rem;
            }
            .bottom-nav .nav-item i {
                font-size: 1.15rem;
            }
            /* Alerts */
            .alert-modern {
                padding: .75rem 1rem;
                font-size: .85rem;
            }
            /* Dropdowns in mobile nav */
            .navbar-nav .dropdown-menu {
                padding: .25rem !important;
            }
            .navbar-nav .dropdown-item {
                font-size: .85rem !important;
                padding: .5rem .75rem !important;
            }
            /* Audio cards grid */
            .row.g-4 > .col-md-4.col-lg-3 {
                padding-bottom: 0;
            }
            /* Admin cards */
            .admin-card {
                padding: 1.15rem !important;
            }
            .admin-card-icon {
                width: 40px !important;
                height: 40px !important;
                font-size: 1.1rem !important;
            }
            /* Plan cards */
            .plan-admin-card {
                margin-bottom: .5rem;
            }
            .plan-option-content {
                padding: 1.25rem !important;
            }
            /* Icon selector */
            .icon-btn {
                width: 48px !important;
                height: 48px !important;
            }
        }
        @media (max-width: 400px) {
            .step-line {
                width: 12px !important;
            }
            .step-circle {
                width: 22px !important;
                height: 22px !important;
                font-size: .65rem !important;
            }
            .step span {
                font-size: .55rem !important;
            }
            .bottom-nav .nav-item span {
                font-size: .55rem;
            }
            .bottom-nav .nav-item i {
                font-size: 1rem;
            }
            .auth-card {
                padding: 1.25rem 1rem !important;
            }
        }

        /* Unified dark audiobook app theme */
        :root {
            --primary: #8b5cf6;
            --primary-dark: #6d28d9;
            --primary-light: #c084fc;
            --secondary: #f8fafc;
            --accent: #22d3ee;
            --accent-warm: #f59e0b;
            --bg-body: #050711;
            --bg-card: rgba(15, 23, 42, .78);
            --bg-card-solid: #0f172a;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --border-soft: rgba(148, 163, 184, .16);
            --shadow: 0 14px 45px rgba(0,0,0,.22);
            --shadow-lg: 0 22px 70px rgba(0,0,0,.34);
            --shadow-xl: 0 30px 90px rgba(0,0,0,.46);
            --gradient: linear-gradient(135deg, #7c3aed, #d946ef);
            --gradient-hover: linear-gradient(135deg, #6d28d9, #c026d3);
            --gradient-hero: radial-gradient(circle at 18% 10%, rgba(139,92,246,.28), transparent 34%),
                             radial-gradient(circle at 88% 18%, rgba(34,211,238,.13), transparent 28%),
                             linear-gradient(135deg, #070816 0%, #13051d 48%, #070816 100%);
        }

        html,
        body {
            background: var(--gradient-hero) !important;
            color: var(--text-main);
        }
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            background:
                linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
            background-size: 44px 44px;
            mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 78%);
            z-index: -1;
        }
        main {
            background: transparent;
        }
        .navbar {
            background: rgba(7, 8, 22, .9) !important;
            border-bottom: 1px solid var(--border-soft);
            box-shadow: 0 18px 60px rgba(0,0,0,.28);
        }
        .footer,
        .bottom-nav {
            background: rgba(7, 8, 22, .94);
            border-color: var(--border-soft);
            color: rgba(248,250,252,.62);
        }

        @media (max-width: 767.98px) {
            .bottom-nav {
                display: grid !important;
                grid-template-columns: repeat(6, minmax(0, 1fr));
                gap: .08rem;
                left: max(.6rem, env(safe-area-inset-left, 0px)) !important;
                right: max(.6rem, env(safe-area-inset-right, 0px)) !important;
                bottom: calc(.55rem + env(safe-area-inset-bottom, 0px)) !important;
                width: auto !important;
                min-height: 72px !important;
                padding: .42rem .38rem .46rem !important;
                background:
                    radial-gradient(circle at 16% 0%, rgba(168, 85, 247, .2), transparent 36%),
                    linear-gradient(180deg, rgba(8, 10, 28, .98), rgba(4, 7, 19, .99)) !important;
                border: 1px solid rgba(192, 132, 252, .24) !important;
                border-radius: 22px 22px 20px 20px;
                box-shadow:
                    0 -18px 48px rgba(0, 0, 0, .38),
                    0 0 38px rgba(124, 58, 237, .16),
                    inset 0 1px 0 rgba(255, 255, 255, .06) !important;
            }

            .bottom-nav .nav-item {
                min-width: 0 !important;
                min-height: 52px !important;
                width: 100%;
                justify-content: center;
                gap: .08rem;
                padding: .22rem .04rem .1rem !important;
                border-radius: 13px;
                color: rgba(226, 232, 240, .68);
                font-size: clamp(.55rem, 2.1vw, .66rem) !important;
                font-weight: 780;
                line-height: 1.05;
                text-shadow: 0 0 0 transparent;
            }

            .bottom-nav .nav-item i {
                width: 1.45em;
                height: 1.45em;
                display: grid;
                place-items: center;
                margin-bottom: .06rem !important;
                font-size: clamp(1.04rem, 4.4vw, 1.28rem) !important;
                line-height: 1;
            }

            .bottom-nav .nav-item span {
                display: block;
                width: 100%;
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                text-align: center;
                font-size: inherit !important;
            }

            .bottom-nav .nav-item::after {
                content: '';
                width: 18px;
                height: 3px;
                margin-top: .18rem;
                border-radius: 999px;
                background: linear-gradient(90deg, #8b5cf6, #d946ef);
                box-shadow: 0 0 14px rgba(168, 85, 247, .46);
                opacity: 0;
                transform: scaleX(.55);
                transition: opacity .2s ease, transform .2s ease;
            }

            .bottom-nav .nav-item.active,
            .bottom-nav .nav-item:hover {
                color: #d8b4fe;
                text-shadow: 0 0 18px rgba(168, 85, 247, .32);
            }

            .bottom-nav .nav-item.active i {
                color: #a855f7;
                filter: drop-shadow(0 0 10px rgba(168, 85, 247, .48));
            }

            .bottom-nav .nav-item.active::after {
                opacity: 1;
                transform: scaleX(1);
            }

            .bottom-nav .nav-item:focus-visible {
                outline: 2px solid rgba(216, 180, 254, .85);
                outline-offset: -2px;
                background: rgba(168, 85, 247, .12);
            }
        }

        .card,
        .content-card,
        .stat-card,
        .auth-card,
        .modal-content,
        .dropdown-menu,
        .filter-section,
        .admin-card,
        .plan-admin-card,
        .selected-plan-summary,
        .favorite-card .card {
            background: var(--bg-card) !important;
            color: var(--text-main);
            border: 1px solid var(--border-soft) !important;
            box-shadow: var(--shadow);
            backdrop-filter: blur(18px) saturate(1.15);
        }
        .card:hover,
        .content-card:hover,
        .stat-card:hover {
            box-shadow: var(--shadow-lg);
        }
        .card-header,
        .card-footer,
        .modal-header,
        .modal-footer,
        .border-top {
            border-color: var(--border-soft) !important;
        }
        .page-header h1,
        .page-header h2,
        .page-header h3,
        .section-title,
        h1, h2, h3, h4, h5, h6,
        .fw-bold,
        .fw-semibold,
        strong,
        label {
            color: var(--text-main);
        }
        .text-muted,
        .form-text,
        .breadcrumb-item.active {
            color: var(--text-muted) !important;
        }
        a {
            color: var(--primary-light);
        }
        a:hover {
            color: #e9d5ff;
        }
        .bg-light,
        .bg-white,
        .table thead th,
        .input-group-text,
        .list-group-item {
            background: rgba(15, 23, 42, .78) !important;
            color: var(--text-main) !important;
            border-color: var(--border-soft) !important;
        }
        .table {
            color: var(--text-main);
        }
        .table tbody td,
        .table tbody tr,
        .table th {
            color: var(--text-main);
            border-color: var(--border-soft);
        }
        .table tbody tr:hover {
            background: rgba(139, 92, 246, .12) !important;
        }
        .form-control,
        .form-select,
        textarea,
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="url"],
        input[type="number"] {
            background: rgba(2, 6, 23, .72) !important;
            border-color: var(--border-soft) !important;
            color: var(--text-main) !important;
        }
        .form-control::placeholder,
        .form-select::placeholder {
            color: rgba(148,163,184,.76) !important;
        }
        .form-select option {
            background: #0f172a;
            color: #f8fafc;
        }
        .form-control:focus,
        .form-select:focus {
            border-color: rgba(192,132,252,.85) !important;
            box-shadow: 0 0 0 4px rgba(139,92,246,.2) !important;
        }
        .btn-outline-primary,
        .btn-outline-secondary,
        .btn-outline-dark {
            color: var(--primary-light);
            border: 1px solid rgba(192,132,252,.38);
            background: rgba(15,23,42,.42);
        }
        .btn-outline-primary:hover,
        .btn-outline-secondary:hover,
        .btn-outline-dark:hover,
        .btn-light:hover {
            background: rgba(139,92,246,.22) !important;
            color: #fff !important;
            border-color: rgba(216,180,254,.68) !important;
        }
        .btn-light {
            background: rgba(255,255,255,.08) !important;
            color: #f8fafc !important;
            border: 1px solid var(--border-soft) !important;
        }
        .alert-modern.alert-success,
        .alert-success,
        .alert-info,
        .alert-warning,
        .alert-danger {
            background: rgba(15, 23, 42, .92) !important;
            color: var(--text-main) !important;
            border: 1px solid var(--border-soft) !important;
        }
        .dropdown-item,
        .dropdown-item-text {
            color: rgba(248,250,252,.76) !important;
        }
        .dropdown-item:hover {
            background: rgba(139,92,246,.22) !important;
            color: #fff !important;
        }
        .empty-state {
            background: radial-gradient(circle at 30% 15%, rgba(139,92,246,.28), transparent 44%),
                        linear-gradient(135deg, rgba(15,23,42,.9), rgba(49,46,129,.45));
            color: rgba(248,250,252,.55);
        }
        .empty-state i {
            color: rgba(192,132,252,.72);
        }
        .badge-primary,
        .badge.bg-primary {
            background: var(--gradient) !important;
            color: #fff !important;
        }
        .progress {
            background: rgba(148,163,184,.18);
        }
        .progress-bar {
            background: var(--gradient);
        }

        /* Shared scoped dark UI for subscription/account and admin dashboard pages */
        .my-subscription-page,
        .admin-dashboard-page {
            max-width: 1240px;
            padding-top: clamp(1.6rem, 3vw, 2.5rem);
            padding-bottom: clamp(3rem, 5vw, 4.5rem);
        }
        .subscription-page-header {
            max-width: 820px;
            margin: 0 auto 1.25rem;
            text-align: center;
        }
        .subscription-page-header h1 {
            margin: .2rem 0 .45rem;
            color: #fff;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 900;
            letter-spacing: 0;
        }
        .subscription-page-header p,
        .subscription-plan-card p,
        .subscription-summary-panel p,
        .cancellation-panel,
        .admin-dashboard-page p {
            color: rgba(203,213,225,.74);
        }
        .subscription-eyebrow,
        .admin-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            color: rgba(216,180,254,.86);
            font-size: .74rem;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
        }
        .subscription-eyebrow.muted,
        .admin-eyebrow.muted {
            color: #c084fc;
        }
        .subscription-summary-panel,
        .subscription-plan-card,
        .cancellation-panel,
        .admin-hero,
        .admin-invite-panel,
        .admin-dashboard-card {
            border: 1px solid rgba(148,163,184,.16);
            background:
                radial-gradient(circle at 18% 0%, rgba(124,58,237,.16), transparent 34%),
                linear-gradient(180deg, rgba(15,23,42,.94), rgba(10,13,28,.96));
            box-shadow: 0 24px 70px rgba(0,0,0,.28);
        }
        .subscription-summary-panel {
            display: grid;
            grid-template-columns: minmax(230px, .8fr) minmax(0, 1.6fr) auto;
            gap: 1rem;
            align-items: center;
            border-radius: 22px;
            padding: 1rem;
            margin-bottom: 1.35rem;
        }
        .subscription-summary-panel.empty {
            grid-template-columns: minmax(0, 1fr);
            text-align: center;
        }
        .subscription-summary-main {
            display: flex;
            align-items: center;
            gap: .85rem;
            min-width: 0;
        }
        .subscription-summary-panel h2,
        .subscription-section-heading h2,
        .subscription-plan-card h3,
        .cancellation-panel h3,
        .admin-hero h1,
        .admin-section-heading h2,
        .admin-invite-copy h2,
        .admin-dashboard-card h3 {
            color: #fff;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 900;
        }
        .subscription-summary-panel h2 {
            margin: .1rem 0 0;
            font-size: clamp(1.1rem, 2vw, 1.35rem);
        }
        .subscription-summary-label,
        .feature-label {
            display: block;
            color: rgba(148,163,184,.9);
            font-size: .7rem;
            font-weight: 900;
            letter-spacing: .06em;
            text-transform: uppercase;
        }
        .subscription-summary-meta {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: .65rem;
        }
        .subscription-summary-meta span {
            display: block;
            border-radius: 14px;
            border: 1px solid rgba(148,163,184,.12);
            background: rgba(2,6,23,.28);
            color: rgba(226,232,240,.82);
            padding: .7rem .75rem;
            font-size: .82rem;
            overflow-wrap: anywhere;
        }
        .subscription-summary-meta strong {
            display: block;
            color: rgba(148,163,184,.88);
            font-size: .68rem;
            font-weight: 900;
            letter-spacing: .06em;
            text-transform: uppercase;
        }
        .subscription-status-pill,
        .plan-badge,
        .plan-status-note,
        .admin-card-badge {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            border-radius: 999px;
            font-size: .75rem;
            font-weight: 900;
        }
        .subscription-status-pill {
            white-space: nowrap;
            border: 1px solid rgba(255,255,255,.12);
            background: rgba(15,23,42,.72);
            color: rgba(248,250,252,.9);
            padding: .45rem .7rem;
        }
        .subscription-status-pill.active i,
        .plan-feature-list i,
        .plan-status-note i {
            color: #22c55e;
        }
        .subscription-status-pill.expired i,
        .plan-status-note.warning i {
            color: #fb7185;
        }
        .subscription-status-pill.neutral i {
            color: #c084fc;
        }
        .subscription-section-heading,
        .admin-section-heading {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 1rem;
            margin: 0 0 .95rem;
        }
        .subscription-plan-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 22px;
            align-items: stretch;
            width: 100%;
            margin-inline: auto;
        }
        .subscription-plan-card {
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 100%;
            overflow: hidden;
            border-radius: 22px;
            transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
        }
        .subscription-plan-card:hover,
        .subscription-plan-card:focus-within {
            transform: translateY(-4px);
            border-color: rgba(192,132,252,.42);
        }
        .subscription-plan-card.is-current {
            border-color: rgba(192,132,252,.72);
            box-shadow: 0 0 0 1px rgba(168,85,247,.28), 0 30px 90px rgba(88,28,135,.36);
            transform: translateY(-2px);
        }
        .plan-badge-row {
            position: absolute;
            z-index: 3;
            top: .85rem;
            left: .85rem;
            right: .85rem;
            display: flex;
            flex-wrap: wrap;
            gap: .45rem;
            pointer-events: none;
        }
        .plan-badge {
            padding: .36rem .62rem;
            color: #fff;
            box-shadow: 0 12px 24px rgba(0,0,0,.2);
        }
        .plan-badge.current {
            background: linear-gradient(135deg, #7c3aed, #c026d3);
        }
        .plan-badge.popular {
            margin-left: auto;
            background: linear-gradient(135deg, #f59e0b, #f97316);
        }
        .subscription-plan-card .plan-art {
            position: relative;
            height: 214px;
            display: grid;
            place-items: center;
            padding: 1.2rem;
            overflow: hidden;
            border-bottom: 1px solid rgba(148,163,184,.14);
            background:
                radial-gradient(circle at 50% 34%, rgba(192,132,252,.28), transparent 33%),
                radial-gradient(circle at 80% 16%, rgba(34,211,238,.1), transparent 24%),
                linear-gradient(145deg, rgba(17,24,39,.82), rgba(49,46,129,.36));
        }
        .subscription-plan-card.confused-egg .plan-art {
            background: radial-gradient(circle at 52% 38%, rgba(245,158,11,.28), transparent 32%), linear-gradient(145deg, rgba(17,24,39,.86), rgba(120,53,15,.3));
        }
        .subscription-plan-card.baby-dragon-intern .plan-art {
            background: radial-gradient(circle at 52% 38%, rgba(248,113,113,.28), transparent 32%), linear-gradient(145deg, rgba(17,24,39,.86), rgba(127,29,29,.32));
        }
        .plan-art-glow {
            position: absolute;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(216,180,254,.34), transparent 68%);
            filter: blur(14px);
        }
        .plan-character {
            position: relative;
            width: clamp(138px, 9vw, 176px);
            height: clamp(142px, 9.5vw, 184px);
            display: grid;
            place-items: center;
            filter: drop-shadow(0 20px 24px rgba(0,0,0,.32));
        }
        .subscription-plan-card.confused-egg .plan-character {
            width: clamp(125px, 8vw, 164px);
        }
        .subscription-plan-card.baby-dragon-intern .plan-character {
            width: clamp(132px, 8.5vw, 170px);
        }
        .tier-artwork-img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
        }
        .tier-svg {
            width: 64px;
            height: 64px;
            display: block;
            overflow: visible;
        }
        .plan-content {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: .95rem;
            padding: 1.1rem;
        }
        .plan-heading {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: .9rem;
            align-items: start;
        }
        .plan-heading h3 {
            margin: 0 0 .4rem;
            font-size: 1.12rem;
        }
        .plan-heading p {
            margin: 0;
            font-size: .84rem;
            line-height: 1.5;
        }
        .plan-price-block {
            text-align: right;
            white-space: nowrap;
        }
        .plan-price-block strong {
            display: block;
            color: #e9d5ff;
            font-size: 1.25rem;
            line-height: 1;
        }
        .plan-price-block span {
            color: rgba(203,213,225,.74);
            font-size: .78rem;
            font-weight: 700;
        }
        .feature-label {
            margin-bottom: .5rem;
            color: rgba(248,250,252,.68);
        }
        .plan-feature-box,
        .plan-status-note {
            border: 1px solid rgba(148,163,184,.13);
            background: rgba(2,6,23,.28);
            border-radius: 16px;
        }
        .plan-feature-box {
            padding: .95rem;
            flex: 1;
        }
        .plan-feature-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            gap: .58rem;
        }
        .plan-feature-list li {
            display: flex;
            align-items: flex-start;
            gap: .55rem;
            color: rgba(226,232,240,.82);
            font-size: .84rem;
            line-height: 1.35;
        }
        .plan-status-note {
            padding: .68rem .8rem;
            color: rgba(226,232,240,.84);
        }
        .subscription-plan-card__actions {
            margin-top: auto;
            padding: 0 1.1rem 1.1rem;
        }
        .subscription-primary-action,
        .subscription-muted-action,
        .subscription-cancel-action {
            border-radius: 12px;
            padding: .72rem 1rem;
            font-weight: 900;
        }
        .subscription-primary-action {
            border: 0;
            color: #fff;
            background: linear-gradient(135deg, #7c3aed, #d946ef);
            box-shadow: 0 16px 36px rgba(124,58,237,.28);
            transition: transform .2s ease, filter .2s ease;
        }
        .subscription-primary-action:hover,
        .subscription-primary-action:focus {
            color: #fff;
            filter: brightness(1.08);
            transform: translateY(-1px);
        }
        .subscription-primary-action:disabled,
        .subscription-primary-action.is-loading,
        .subscription-muted-action:disabled {
            opacity: .68;
            cursor: not-allowed;
            transform: none;
        }
        .subscription-muted-action {
            border: 1px solid rgba(148,163,184,.18);
            color: rgba(226,232,240,.74);
            background: rgba(15,23,42,.62);
        }
        .subscription-cancel-action {
            border: 1px solid rgba(248,113,113,.28);
            color: #fb7185;
            background: rgba(127,29,29,.08);
        }
        .subscription-cancel-action:hover,
        .subscription-cancel-action:focus {
            color: #fecdd3;
            border-color: rgba(248,113,113,.55);
            background: rgba(127,29,29,.18);
        }
        .cancellation-panel {
            display: flex;
            gap: .85rem;
            border-radius: 18px;
            margin: 1.35rem auto 0;
            padding: 1rem;
        }
        .cancellation-panel > i {
            color: #c084fc;
            font-size: 1.15rem;
            margin-top: .1rem;
        }
        .cancellation-panel h3 {
            margin: 0 0 .45rem;
            font-size: 1rem;
        }
        .cancellation-panel ul {
            margin: 0;
            padding-left: 1rem;
            color: rgba(203,213,225,.76);
            font-size: .88rem;
        }
        @media (max-width: 1100px) {
            .subscription-plan-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .subscription-summary-panel {
                grid-template-columns: 1fr;
            }
            .subscription-summary-actions {
                justify-self: start;
            }
        }
        @media (max-width: 760px) {
            .subscription-summary-meta {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
        @media (max-width: 700px) {
            .subscription-plan-grid {
                grid-template-columns: 1fr;
            }
            .plan-heading {
                grid-template-columns: 1fr;
            }
            .plan-price-block {
                text-align: left;
            }
        }
        @media (max-width: 520px) {
            .subscription-summary-main,
            .cancellation-panel {
                align-items: stretch;
                flex-direction: column;
            }
            .subscription-summary-meta {
                grid-template-columns: 1fr;
            }
        }
        @media (max-width: 576px) {
            .navbar-collapse {
                width: min(88vw, 330px);
                margin: 0 !important;
            }
        }

/* Premium layout overrides extracted from the global header for browser caching. */
/* Ultra-premium density pass: remove dead space without shrinking readable controls. */
        html, body { min-height: 100%; }
        body { padding-bottom: 0 !important; }
        body > main { min-height: 0 !important; padding-bottom: 0 !important; }
        body > main > *:last-child { margin-bottom: 0 !important; }
        .footer { display: none !important; }

        /* The full mobile drawer is the secondary-navigation surface. Hide fixed
           bars while it is open so controls never stack on top of each other. */
        @media (max-width: 991.98px) {
            body.mobile-menu-open .bottom-nav,
            body.mobile-menu-open .global-audio-player,
            body.mobile-menu-open .global-audio-collapsed {
                opacity: 0 !important;
                visibility: hidden !important;
                pointer-events: none !important;
            }
        }

        .page-header, .section-header { margin-bottom: clamp(.65rem, 1.3vw, 1.15rem); }
        .container.py-4 { padding-top: clamp(.8rem, 1.8vw, 1.35rem) !important; padding-bottom: clamp(.45rem, 1vw, .85rem) !important; }
        .card { --bs-card-spacer-y: .9rem; --bs-card-spacer-x: .95rem; }

        /* Never reserve a fake footer-sized viewport below real content. */
        .support-page, .support-result-page, .subscriptions-public-page, .my-subscription-page,
        .collection-shell, .favorites-page, .recently-updated-page, .profile-page,
        .admin-subscriptions-page, .admin-dashboard-page, .admin-users-page, .admin-audiobooks-page {
            min-height: 0 !important;
        }

        @media (min-width: 992px) {
            /* Detail pages use one viewport with internal episode/review scrolling. */
            .show-shell {
                height: calc(100dvh - 64px) !important;
                min-height: 0 !important;
                overflow: hidden !important;
                padding: .55rem 1rem .35rem !important;
            }
            .show-layout {
                height: 100% !important;
                min-height: 0 !important;
                grid-template-columns: minmax(320px, 42%) minmax(420px, 58%) !important;
                gap: clamp(.8rem, 1.35vw, 1.35rem) !important;
                overflow: hidden !important;
            }
            .show-left, .show-right, .audiobook-left-panel, .audiobook-left-panel > .row, .tab-card {
                min-height: 0 !important;
                max-height: 100% !important;
            }
            .show-left {
                position: relative !important;
                top: auto !important;
                height: 100% !important;
                overflow: hidden !important;
            }
            .show-left > .card.overflow-hidden { height: 100% !important; overflow: hidden !important; }
            .show-left > .card.overflow-hidden > .row { height: 100% !important; }
            .audiobook-cover-section, .show-left > .card.overflow-hidden .col-md-4 {
                width: auto !important;
                height: min(30dvh, 260px) !important;
                max-height: 260px !important;
                aspect-ratio: 1 / 1 !important;
                margin: 0 auto .45rem !important;
                border-radius: 14px !important;
            }
            .audiobook-cover-section img, .audiobook-cover-section > div,
            .show-left > .card.overflow-hidden .col-md-4 img,
            .show-left > .card.overflow-hidden .col-md-4 > div {
                min-height: 0 !important;
                border-radius: inherit !important;
            }
            .audiobook-details-scroll, .show-left > .card.overflow-hidden .col-md-8 {
                margin: 0 !important;
                padding: 0 !important;
                max-height: none !important;
                min-height: 0 !important;
                overflow-y: auto !important;
            }
            .show-left > .card.overflow-hidden .card-body { padding: .25rem .35rem .35rem !important; }
            .show-left h3, .show-title {
                font-size: clamp(1.55rem, 2.15vw, 2.35rem) !important;
                margin-bottom: .45rem !important;
            }
            .story-rank { margin-bottom: .4rem !important; padding: .35rem .55rem !important; font-size: .68rem !important; }
            .show-left .d-flex.flex-wrap.gap-2 { margin-bottom: .45rem !important; gap: .45rem !important; }
            .detail-play-hero-btn, #favoriteBtn { min-height: 42px !important; height: 42px !important; font-size: .86rem !important; }
            .series-description-block { margin-top: .4rem !important; }
            .show-description { font-size: .86rem !important; line-height: 1.38 !important; max-height: 2.8em !important; }
            .details-bottom-breadcrumb { margin-top: .45rem !important; }
            .show-right { height: 100% !important; overflow: hidden !important; }
            .tab-card { height: 100% !important; overflow: hidden !important; }
            .show-tabs { padding: .15rem 0 .48rem !important; gap: 1rem !important; }
            .show-tabs .nav-link { font-size: .94rem !important; padding-bottom: .38rem !important; }
            .show-tab-content { height: calc(100% - 44px) !important; overflow: hidden !important; }
            .show-tab-content > .tab-pane.active { height: 100% !important; overflow: hidden !important; }
            .tab-pane-inner { height: 100% !important; min-height: 0 !important; overflow-y: auto !important; padding-top: .55rem !important; }
            #playlist.episode-scroll-list {
                min-height: 0 !important;
                max-height: calc(100dvh - 190px) !important;
                padding-bottom: .35rem !important;
            }
            #playlist .playlist-item { min-height: 52px !important; padding: .45rem 0 !important; }
        }

        @media (min-width: 768px) {
            body > main { padding-bottom: .35rem !important; }

            /* Desktop/tablet pages behave like a single app viewport. Long
               collections, admin tables and settings scroll inside the page
               shell instead of creating a second screen of empty document space. */
            .collection-shell, .favorites-page, .recently-updated-page, .profile-page,
            .support-page, .support-result-page, .subscriptions-public-page,
            .my-subscription-page, .admin-subscriptions-page, .admin-dashboard-page,
            .admin-users-page, .admin-audiobooks-page {
                max-height: calc(100dvh - 64px) !important;
                overflow-y: auto !important;
                overflow-x: clip !important;
                overscroll-behavior: contain;
                scrollbar-gutter: stable;
            }
            .collection-shell, .favorites-page, .recently-updated-page, .profile-page, .show-shell,
            .support-page, .support-result-page, .subscriptions-public-page,
            .my-subscription-page, .admin-subscriptions-page, .admin-dashboard-page,
            .admin-users-page, .admin-audiobooks-page {
                padding-bottom: .45rem !important;
                margin-bottom: 0 !important;
            }
            .messages-app { margin-bottom: .45rem !important; }
            #playlist.episode-scroll-list { padding-bottom: .4rem !important; }
        }

        @media (max-width: 767.98px) {
            body.is-guest > main { padding-bottom: .2rem !important; }
            body.is-authenticated > main {
                padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
            }
            body.is-authenticated.global-audio-active > main {
                padding-bottom: calc(64px + 118px + env(safe-area-inset-bottom, 0px)) !important;
            }

            .bottom-nav {
                display: grid !important;
                grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
                left: max(.5rem, env(safe-area-inset-left, 0px)) !important;
                right: max(.5rem, env(safe-area-inset-right, 0px)) !important;
                bottom: calc(.35rem + env(safe-area-inset-bottom, 0px)) !important;
                min-height: 58px !important;
                padding: .25rem .28rem .28rem !important;
                gap: .08rem !important;
                border-radius: 18px !important;
                background: linear-gradient(180deg, rgba(12,15,39,.96), rgba(5,8,23,.985)) !important;
                border: 1px solid rgba(192,132,252,.18) !important;
                box-shadow: 0 12px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05) !important;
                backdrop-filter: blur(18px) saturate(1.2) !important;
            }
            .bottom-nav .nav-item {
                min-height: 48px !important;
                padding: .22rem .12rem !important;
                gap: .08rem !important;
                border-radius: 13px !important;
                font-size: .62rem !important;
                line-height: 1 !important;
            }
            .bottom-nav .nav-item i {
                margin: 0 !important;
                font-size: 1.08rem !important;
                line-height: 1 !important;
            }
            .bottom-nav .nav-item span {
                display: block !important;
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .bottom-nav .nav-item.active {
                background: rgba(139,92,246,.13) !important;
            }
            .bottom-nav .nav-item::after { bottom: 1px !important; }

            .collection-shell, .favorites-page, .recently-updated-page, .profile-page, .show-shell,
            .support-page, .support-result-page, .subscriptions-public-page,
            .my-subscription-page, .admin-subscriptions-page, .admin-dashboard-page,
            .admin-users-page, .admin-audiobooks-page {
                margin-bottom: 0 !important;
                padding-bottom: .25rem !important;
            }
            body:not(.page-messages):not(.page-admin-messages) .messages-app {
                margin-bottom: 0 !important;
                padding-bottom: .25rem !important;
            }
            #playlist.episode-scroll-list {
                padding-bottom: .4rem !important;
            }
            .container.py-4 { padding-top: .65rem !important; padding-bottom: .25rem !important; }
            .page-header, .section-header { margin-bottom: .65rem !important; }

            .show-shell { min-height: 0 !important; height: auto !important; padding: .5rem .65rem .2rem !important; }
            .show-right { margin-top: .65rem !important; }
            .show-tabs { gap: .8rem !important; padding-bottom: .45rem !important; }
            .show-tabs .nav-link { font-size: .88rem !important; padding-bottom: .35rem !important; }
            #playlist.episode-scroll-list { min-height: 220px !important; max-height: 48dvh !important; padding-bottom: .35rem !important; }
            #playlist .playlist-item { min-height: 56px !important; padding-top: .45rem !important; padding-bottom: .45rem !important; }
        }

        @media (max-width: 575.98px) {
            /* Keep the audiobook identity/actions visible without a giant mobile hero. */
            .audiobook-left-panel > .row, .show-left > .card.overflow-hidden > .row {
                display: grid !important;
                grid-template-columns: 112px minmax(0, 1fr) !important;
                align-items: start !important;
                gap: .65rem !important;
            }
            .audiobook-cover-section, .show-left > .card.overflow-hidden .col-md-4 {
                width: 112px !important;
                height: 112px !important;
                min-height: 0 !important;
                max-height: 112px !important;
                aspect-ratio: 1 / 1 !important;
                margin: 0 !important;
                border-radius: 12px !important;
            }
            .audiobook-cover-section img, .audiobook-cover-section > div,
            .show-left > .card.overflow-hidden .col-md-4 img,
            .show-left > .card.overflow-hidden .col-md-4 > div { min-height: 0 !important; border-radius: inherit !important; }
            .audiobook-details-scroll, .show-left > .card.overflow-hidden .col-md-8 {
                width: auto !important;
                margin: 0 !important;
                padding: 0 !important;
                max-height: 250px !important;
                overflow-y: auto !important;
            }
            .show-left > .card.overflow-hidden .card-body { padding: 0 !important; }
            .show-left h3, .show-title { font-size: clamp(1.2rem, 6vw, 1.55rem) !important; line-height: 1.08 !important; margin-bottom: .4rem !important; }
            .story-rank { margin-bottom: .35rem !important; padding: .28rem .42rem !important; font-size: .6rem !important; }
            .show-left .d-flex.flex-wrap.gap-2 { gap: .35rem !important; margin-bottom: .35rem !important; }
            .detail-play-hero-btn, #favoriteBtn { min-height: 44px !important; height: 44px !important; min-width: 0 !important; padding: 0 .7rem !important; font-size: .75rem !important; }
            .series-description-block { margin-top: .35rem !important; padding-right: 2.6rem !important; }
            .show-description { font-size: .76rem !important; line-height: 1.32 !important; max-height: 2.64em !important; }
            .details-bottom-breadcrumb { margin-top: .35rem !important; font-size: .66rem !important; }
        }

/* Persistent global player shell. */
.global-audio-player,
        .global-audio-collapsed {
            position: fixed;
            z-index: 1100;
            color: #fff;
        }

        :root {
            --player-bar-height: 0px;
            --bottom-nav-height: 0px;
        }

        body.global-audio-active {
            --player-bar-height: 92px;
        }

        body.global-audio-active main {
            padding-bottom: calc(var(--bottom-nav-height) + var(--player-bar-height) + env(safe-area-inset-bottom));
        }

        .global-audio-player {
            left: 50%;
            bottom: calc(16px + env(safe-area-inset-bottom));
            width: min(820px, calc(100vw - 24px));
            min-width: 0;
            transform: translate(-50%, 150%);
            display: grid;
            grid-template-columns: 48px minmax(0, 1fr) auto auto;
            align-items: center;
            gap: .5rem;
            padding: .5rem .62rem;
            border: 1px solid rgba(168, 85, 247, .3);
            border-radius: 16px;
            background:
                linear-gradient(135deg, rgba(12, 18, 34, .94), rgba(16, 15, 29, .95)),
                rgba(9, 12, 24, .92);
            box-shadow: 0 18px 48px rgba(0, 0, 0, .48), 0 0 0 1px rgba(255,255,255,.05) inset, 0 0 34px rgba(147,51,234,.12);
            backdrop-filter: blur(18px) saturate(1.14);
            opacity: 0;
            pointer-events: none;
            transition: transform .22s ease, opacity .22s ease;
        }

        .global-audio-player {
            min-height: 74px;
            max-height: none;
        }

        .global-audio-player.is-visible {
            transform: translate(-50%, 0);
            opacity: 1;
            pointer-events: auto;
        }

        .global-audio-cover {
            width: 48px;
            height: 48px;
            border-radius: 11px;
            overflow: hidden;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg, #581c87, #a855f7);
            flex-shrink: 0;
        }

        .global-audio-cover img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .global-audio-title-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: .6rem;
            min-width: 0;
        }

        .global-audio-main {
            min-width: 0;
        }

        .global-audio-window-actions {
            position: relative;
            z-index: 2;
            flex-shrink: 0;
        }

        .global-audio-actions {
            position: relative;
            z-index: 1;
        }

        .global-audio-title-row strong {
            display: block;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: .9rem;
            line-height: 1.15;
        }

        .global-audio-title-row a,
        .global-audio-title-row a:hover {
            color: #fff;
            text-decoration: none;
        }

        .global-audio-main small {
            display: block;
            color: rgba(255,255,255,.62);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .02em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: .7rem;
            line-height: 1.15;
        }

        .global-audio-progress {
            display: block;
            width: 100%;
            height: 5px;
            margin-top: .34rem;
            padding: 0;
            border: 0;
            border-radius: 999px;
            background: rgba(148, 163, 184, .28);
            overflow: hidden;
            cursor: pointer;
            text-align: left;
            touch-action: pan-x;
        }

        .global-audio-progress:focus-visible {
            outline: 3px solid rgba(216,180,254,.42);
            outline-offset: 4px;
        }

        .global-audio-progress span {
            display: block;
            width: 0%;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #c084fc, #d946ef);
        }

        .global-audio-times {
            display: flex;
            justify-content: space-between;
            color: rgba(255,255,255,.66);
            font-size: .66rem;
            font-weight: 800;
            margin-top: .16rem;
        }

        .global-audio-actions,
        .global-audio-window-actions,
        .global-audio-extras {
            display: flex;
            align-items: center;
            gap: .32rem;
        }

        .global-audio-actions {
            justify-content: center;
        }

        .global-audio-actions button,
        .global-audio-window-actions button,
        .global-audio-extras button,
        .global-audio-collapsed {
            border: 0;
            color: #fff;
            background: rgba(255,255,255,.1);
            display: grid;
            place-items: center;
            transition: background .16s ease, box-shadow .16s ease, transform .16s ease, opacity .16s ease;
        }

        .global-audio-actions button,
        .global-audio-window-actions button,
        .global-audio-extras button {
            width: 32px;
            height: 32px;
            border-radius: 50%;
        }

        .global-audio-actions button:hover,
        .global-audio-window-actions button:hover,
        .global-audio-extras button:hover {
            background: rgba(192,132,252,.18);
            transform: translateY(-1px);
        }

        .global-audio-actions button:focus-visible,
        .global-audio-window-actions button:focus-visible,
        .global-audio-extras button:focus-visible,
        .global-audio-collapsed button:focus-visible {
            outline: 3px solid rgba(216,180,254,.45);
            outline-offset: 3px;
        }

        .global-audio-actions button:disabled,
        .global-audio-window-actions button:disabled,
        .global-audio-extras button:disabled {
            cursor: not-allowed;
            opacity: .42;
            transform: none;
        }

        .global-audio-extras {
            min-width: 164px;
            justify-content: flex-end;
        }

        .global-audio-speed,
        .global-audio-volume {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            min-height: 34px;
            padding: 0 .4rem;
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 999px;
            color: rgba(255,255,255,.78);
            background: rgba(255,255,255,.07);
        }

        .global-audio-speed {
            position: relative;
        }

        .global-audio-speed-button {
            min-width: 48px;
            min-height: 28px;
            border: 0;
            border-radius: 999px;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .28rem;
            font-weight: 800;
            background: rgba(255,255,255,.08);
            outline: 0;
            cursor: pointer;
            touch-action: manipulation;
        }

        .global-audio-speed-button:hover,
        .global-audio-speed-button:focus-visible {
            background: rgba(192,132,252,.18);
            box-shadow: 0 0 0 3px rgba(192,132,252,.14);
        }

        .global-audio-speed-menu {
            position: fixed;
            z-index: 1125;
            display: grid;
            gap: .18rem;
            width: max-content;
            min-width: 112px;
            max-width: calc(100vw - 16px);
            max-height: min(320px, calc(100vh - 24px));
            overflow: auto;
            padding: .32rem;
            border: 1px solid rgba(216,180,254,.24);
            border-radius: 12px;
            background:
                radial-gradient(circle at 20% 0%, rgba(124,58,237,.2), transparent 42%),
                rgba(10, 15, 31, .98);
            box-shadow: 0 22px 58px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
            backdrop-filter: blur(18px) saturate(1.18);
        }

        .global-audio-speed-menu-title {
            padding: .28rem .48rem .18rem;
            color: rgba(226,232,240,.62);
            font-size: .68rem;
            font-weight: 900;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .global-audio-speed-menu[hidden] {
            display: none !important;
        }

        .global-audio-speed-option {
            width: 100%;
            min-height: 34px;
            border: 0;
            border-radius: 9px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .65rem;
            color: rgba(248,250,252,.84);
            background: transparent;
            padding: .42rem .58rem;
            font-size: .78rem;
            font-weight: 900;
            text-align: left;
            cursor: pointer;
            white-space: nowrap;
        }

        .global-audio-speed-option:hover,
        .global-audio-speed-option:focus-visible {
            color: #fff;
            background: rgba(139,92,246,.22);
            outline: 0;
        }

        .global-audio-speed-option[aria-selected="true"] {
            color: #fff;
            background: linear-gradient(135deg, rgba(124,58,237,.72), rgba(217,70,239,.36));
            box-shadow: inset 0 0 0 1px rgba(216,180,254,.2);
        }

        .global-audio-speed-option[aria-selected="true"]::after {
            content: "✓";
            color: #fde68a;
            font-size: .82rem;
        }

        .global-audio-volume input {
            width: 50px;
            accent-color: #c084fc;
            cursor: pointer;
            touch-action: pan-x;
        }

        .global-audio-main-action {
            width: 48px !important;
            height: 48px !important;
            background: linear-gradient(135deg, #9333ea, #d946ef) !important;
            box-shadow: 0 0 28px rgba(217, 70, 239, .28);
            font-size: 1.42rem;
        }

        @keyframes globalAudioSpin {
            to { transform: rotate(360deg); }
        }

        @keyframes globalAudioShimmer {
            0% { background-position: 0% 50%; }
            100% { background-position: 200% 50%; }
        }

        .global-audio-player.is-loading .global-audio-main-action i {
            animation: globalAudioSpin .78s linear infinite;
        }

        .global-audio-player.is-loading .global-audio-progress span {
            width: 36% !important;
            background: linear-gradient(90deg, #fde68a, #d946ef, #22d3ee, #fde68a);
            background-size: 200% 100%;
            animation: globalAudioShimmer 1.1s linear infinite;
        }

        .global-audio-collapsed {
            left: 50%;
            bottom: calc(16px + env(safe-area-inset-bottom));
            width: min(460px, calc(100vw - 24px));
            min-height: 64px;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: .5rem;
            padding: .5rem;
            border: 1px solid rgba(168,85,247,.28);
            border-radius: 18px;
            background:
                linear-gradient(135deg, rgba(12,18,34,.96), rgba(17,14,28,.96)),
                rgba(9,12,24,.94);
            box-shadow: 0 14px 38px rgba(0,0,0,.46), 0 0 0 1px rgba(255,255,255,.05) inset;
            backdrop-filter: blur(16px) saturate(1.12);
            opacity: 0;
            pointer-events: none;
            transform: translate(-50%, 150%);
            transition: transform .2s ease, opacity .2s ease;
        }

        .global-audio-collapsed.is-visible {
            opacity: 1;
            pointer-events: auto;
            transform: translate(-50%, 0);
        }

        .global-audio-collapsed-open,
        .global-audio-collapsed-play {
            border: 0;
            color: #fff;
            background: rgba(255,255,255,.09);
        }

        .global-audio-collapsed-open {
            min-width: 0;
            display: grid;
            grid-template-columns: 42px minmax(0, 1fr);
            align-items: center;
            gap: .54rem;
            min-height: 52px;
            padding: .34rem .5rem;
            border-radius: 14px;
            text-align: left;
        }

        .global-audio-collapsed-cover {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            overflow: hidden;
            background: linear-gradient(135deg, #581c87, #a855f7);
        }

        .global-audio-collapsed-cover img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

        .global-audio-collapsed-main {
            min-width: 0;
            display: grid;
            gap: .34rem;
        }

        .global-audio-collapsed-title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: .86rem;
            font-weight: 900;
            line-height: 1.1;
        }

        .global-audio-collapsed-progress {
            height: 4px;
            border-radius: 999px;
            overflow: hidden;
            background: rgba(148,163,184,.28);
        }

        .global-audio-collapsed-progress span {
            display: block;
            width: 0%;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #22d3ee, #c084fc, #f472b6);
        }

        .global-audio-collapsed-play {
            width: 46px;
            height: 46px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg, #9333ea, #d946ef);
            box-shadow: 0 10px 26px rgba(217,70,239,.25);
        }

        @media (max-width: 767.98px) {
            :root {
                --bottom-nav-height: 64px;
            }

            body.global-audio-active {
                --player-bar-height: 104px;
            }

            body.global-audio-active main {
                padding-bottom: calc(var(--bottom-nav-height) + var(--player-bar-height) + env(safe-area-inset-bottom));
            }

            .global-audio-player {
                width: calc(100% - 16px);
                grid-template-columns: 38px minmax(76px, 1fr) auto;
                grid-template-areas:
                    "cover main main"
                    "controls controls extras";
                min-height: 0;
                border-radius: 14px;
                gap: .34rem .4rem;
                padding: .44rem .48rem;
                bottom: calc(var(--bottom-nav-height, 64px) + .3rem + env(safe-area-inset-bottom));
                background:
                    linear-gradient(135deg, rgba(13, 18, 32, .98), rgba(10, 15, 28, .98)),
                    rgba(15, 23, 42, .96);
                border: 1px solid rgba(148, 163, 184, .2);
                box-shadow: 0 14px 30px rgba(0, 0, 0, .46), 0 0 0 1px rgba(255,255,255,.04) inset;
                z-index: 1115;
            }

            .global-audio-cover {
                grid-area: cover;
                width: 38px;
                height: 38px;
                border-radius: 10px;
            }

            .global-audio-main {
                grid-area: main;
                align-self: center;
                min-width: 0;
            }

            .global-audio-title-row {
                gap: .35rem;
                min-width: 0;
            }

            .global-audio-title-row a {
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .global-audio-title-row strong {
                font-size: .78rem;
            }

            .global-audio-main small {
                max-width: 100%;
                font-size: .52rem;
                line-height: 1.1;
            }

            .global-audio-window-actions {
                display: flex;
                gap: .28rem;
            }

            .global-audio-window-actions button {
                width: 26px;
                height: 26px;
                font-size: .78rem;
            }

            #globalAudioMinimize {
                display: inline-grid;
                place-items: center;
            }

            .global-audio-actions {
                grid-area: controls;
                justify-content: flex-start;
                gap: .2rem;
                padding-right: 0;
            }

            .global-audio-actions button:not(.global-audio-main-action) {
                display: inline-grid;
                place-items: center;
                width: 30px;
                height: 30px;
            }

            #globalAudioBack,
            #globalAudioForward {
                display: none !important;
            }

            .global-audio-extras {
                grid-area: extras;
                display: flex;
                justify-content: flex-end;
                min-width: 0;
                width: auto;
                gap: .22rem;
                padding-top: 0;
            }

            .global-audio-times {
                display: none;
            }

            .global-audio-progress {
                height: 3px;
                margin-top: .2rem;
                background: rgba(255, 255, 255, .22);
            }

            .global-audio-progress span {
                background: linear-gradient(90deg, #fde68a, #f472b6, #c084fc);
            }

            .global-audio-actions button,
            .global-audio-extras button {
                width: 30px;
                height: 30px;
                font-size: .78rem;
            }

            .global-audio-speed,
            .global-audio-volume {
                min-height: 28px;
                padding: 0 .2rem;
                font-size: .68rem;
            }

            .global-audio-speed-button {
                font-size: .68rem;
                min-height: 26px;
                min-width: 38px;
            }

            .global-audio-speed > i {
                display: none;
            }

            .global-audio-volume input {
                width: min(48px, 13vw);
            }

            .global-audio-main-action {
                width: 40px !important;
                height: 40px !important;
                font-size: 1.12rem;
                border-radius: 11px !important;
                background: linear-gradient(135deg, #9333ea, #d946ef) !important;
                box-shadow: 0 10px 24px rgba(217,70,239,.22);
            }

            .global-audio-collapsed {
                bottom: calc(var(--bottom-nav-height, 64px) + .28rem + env(safe-area-inset-bottom));
                z-index: 1115;
            }
        }

        @media (max-width: 359.98px) {
            .global-audio-volume {
                display: none;
            }
        }

        @media (min-width: 768px) and (max-width: 1024px) {
            body.global-audio-active {
                --player-bar-height: 118px;
            }

            body.global-audio-active main {
                padding-bottom: calc(var(--player-bar-height) + env(safe-area-inset-bottom));
            }

            .global-audio-player {
                width: min(760px, calc(100% - 32px));
                min-width: 0;
                grid-template-columns: 52px minmax(0, 1fr) auto auto;
                gap: .62rem;
                padding: .72rem .8rem;
                border-radius: 24px;
            }

            .global-audio-cover {
                width: 52px;
                height: 52px;
                border-radius: 15px;
            }

            .global-audio-actions {
                grid-column: auto;
                grid-row: 1;
            }

            .global-audio-extras {
                grid-column: auto;
                justify-content: flex-end;
                min-width: 154px;
                gap: .38rem;
            }

            .global-audio-speed,
            .global-audio-volume {
                min-height: 38px;
                padding: 0 .55rem;
            }

            .global-audio-volume input {
                width: 52px;
            }

            .global-audio-main-action {
                width: 52px !important;
                height: 52px !important;
            }
        }

        .session-expiry-warning {
            position: fixed;
            right: max(16px, env(safe-area-inset-right));
            bottom: calc(var(--bottom-nav-height, 0px) + var(--player-bar-height, 0px) + 18px + env(safe-area-inset-bottom));
            z-index: 10020;
            width: min(360px, calc(100vw - 24px));
            padding: .78rem;
            border: 1px solid rgba(216, 180, 254, .28);
            border-radius: 14px;
            color: #f8fafc;
            background:
                radial-gradient(circle at 20% 0%, rgba(147, 51, 234, .28), transparent 42%),
                rgba(10, 12, 24, .96);
            box-shadow: 0 18px 48px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255,255,255,.08);
            backdrop-filter: blur(16px) saturate(1.15);
        }

        .session-expiry-warning[hidden] {
            display: none !important;
        }

        .session-expiry-warning strong {
            display: block;
            font-size: .92rem;
            line-height: 1.2;
        }

        .session-expiry-warning p {
            margin: .28rem 0 .7rem;
            color: rgba(226, 232, 240, .74);
            font-size: .78rem;
            line-height: 1.35;
        }

        .session-expiry-actions {
            display: flex;
            justify-content: flex-end;
            gap: .45rem;
        }

        .session-expiry-actions .btn {
            min-height: 34px;
            border-radius: 10px;
            font-size: .78rem;
            font-weight: 800;
        }

        @media (max-width: 575.98px) {
            .session-expiry-warning {
                left: 12px;
                right: 12px;
                width: auto;
                bottom: calc(var(--bottom-nav-height, 64px) + var(--player-bar-height, 0px) + 10px + env(safe-area-inset-bottom));
            }
        }