/* --- Ascension & License System (v2.0 REDESIGN) --- */
        #profile-hub {
            position: relative;
            display: flex;
            align-items: center;
            margin-right: 0;
            height: 100%;
        }

        #profile-badge {
            cursor: pointer;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            transition: all 0.2s ease-in-out;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            background-color: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            overflow: hidden;
        }

        #profile-badge .badge-icon {
            width: 33px;
            height: 33px;
            transform: scale(0.95);
            box-shadow: none;
        }

        #profile-badge .badge-icon .inner-icon {
            width: 65%;
            height: 65%;
        }

        #profile-badge:hover {
            transform: scale(1.05);
            border-color: var(--primary-color);
            box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.3);
        }

        /* Add a subtle shine to the badge */
        #profile-badge::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.1) 100%);
            opacity: 0;
            transition: opacity 0.3s ease-out;
            border-radius: inherit;
            pointer-events: none;
        }

        #profile-badge:hover::before {
            opacity: 1;
        }

        #profile-badge:hover {
            transform: scale(1.05);
            background-color: var(--bg-tertiary);
        }

        #profile-badge.active {
            background-color: var(--bg-tertiary);
            border: 1px solid var(--primary-color);
            box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.3);
        }

        /* Battery Optimization: Pause animations on header badge by default when idle.
           Runs for 5 seconds upon screen navigation/load via .is-animating, or during hover */
        #profile-badge .astral,
        #profile-badge .astral .inner-icon,
        #profile-badge .astral .orbiting-dots {
            animation-play-state: paused !important;
        }

        #profile-badge.is-animating .astral,
        #profile-badge.is-animating .astral .inner-icon,
        #profile-badge.is-animating .astral .orbiting-dots,
        #profile-badge:hover .astral,
        #profile-badge:hover .astral .inner-icon,
        #profile-badge:hover .astral .orbiting-dots {
            animation-play-state: running !important;
        }

        /* Hide the welcome text */
        #profile-welcome {
            display: none;
        }

        /* NEW: Profile Notification Card - Polished & Clean */
        #profile-notification-card {
            position: absolute;
            top: calc(100% + 12px);
            left: -5px;
            width: 320px;
            background-color: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.02);
            padding: 1.25rem;
            z-index: 1000;
            display: none;
            flex-direction: column;
            gap: 1rem;
            transform-origin: top left;
            animation: fadeInScale 0.2s ease-out forwards;
        }

        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.95);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Pointer/Arrow */
        #profile-notification-card::before {
            content: '';
            position: absolute;
            top: -8px;
            left: 24px;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid var(--border-color);
        }

        #profile-notification-card::after {
            content: '';
            position: absolute;
            top: -7px;
            left: 24px;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid var(--bg-primary);
        }

        .notification-header {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        /* Ensure Badge is perfectly circular and not stretched */
        .spark-particle {
            position: fixed;
            pointer-events: none;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            z-index: 999999;
            box-shadow: 0 0 4px currentColor;
        }

        #notification-badge-icon {
            flex-shrink: 0;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: var(--bg-secondary);
            overflow: hidden;

            /* 3D Pop Effect & Draggability */
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
            cursor: grab;
            position: relative;
            z-index: 1001;
        }

        #notification-badge-icon:hover {
            transform: scale(1.15) translateZ(0);
            box-shadow:
                0 10px 20px -5px rgba(0, 0, 0, 0.2),
                inset 0 -5px 10px rgba(0, 0, 0, 0.1),
                inset 0 5px 10px rgba(255, 255, 255, 0.5);
            z-index: 1002;
        }

        #notification-badge-icon:active {
            cursor: grabbing;
            transform: scale(1.05);
        }

        /* Force image or svg inside to fit nicely */
        #notification-badge-icon svg,
        #notification-badge-icon img,
        #notification-badge-icon .badge-icon {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover;
            pointer-events: none;
        }

        #notification-title {
            font-family: var(--article-font-family);
            font-weight: 700;
            font-size: 0.95rem;
            line-height: 1.25;
            color: var(--text-primary);
        }

        .notification-message {
            font-family: var(--article-font-family);
            font-style: italic;
            font-size: 1rem;
            line-height: 1.5;
            color: var(--text-secondary);
            background-color: var(--bg-secondary);
            padding: 1rem;
            border-radius: 8px;
            border-left: 3px solid var(--primary-color);
        }

        /* Hide the link section as requested */
        #notification-link {
            display: none !important;
        }




        /* NEW ELEGANT LOCKED STYLE */
        .premium-feature-locked {
            display: inline-block;
            opacity: 0.6;
            cursor: not-allowed !important;
            position: relative;
            overflow: hidden;
            border-radius: var(--border-radius);
        }

        /* --- DEFINITIVE REGRESSION FIX --- */
        .control-group.premium-feature-locked {
            display: flex;
            flex-direction: row;
        }

        .premium-feature-locked::before {
            content: '';
            position: absolute;
        }

        .premium-feature-locked::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: inherit;
            border: 1px dashed color-mix(in srgb, var(--primary-color) 60%, transparent);
            pointer-events: none;
        }

        .premium-feature-locked:hover::before {
            border: 1px solid var(--primary-color);
            box-shadow: 0 0 8px color-mix(in srgb, var(--primary-color) 30%, transparent);
        }


        .license-header-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 1rem 0 1.5rem;
            text-align: center;
        }

        .license-header-badge {
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 6px 16px;
            border-radius: 20px;
            color: var(--text-on-primary, #fff);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
            margin-bottom: 0.75rem;
            font-size: 1.1em;
        }

        .license-header-info p {
            margin: 0;
            color: var(--text-secondary);
            font-size: 0.95rem;
        }

        .license-status-display {
            background-color: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            margin-top: 1.5rem;
            text-align: center;
        }

        .license-status-display p {
            margin-bottom: 0.5rem;
            font-size: 1.05rem;
            color: var(--text-primary);
        }

        .license-status-display p strong {
            color: var(--primary-color);
        }

        .license-form-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
            margin-top: 1.5rem;
        }

        @media (min-width: 600px) {
            .license-form-grid {
                grid-template-columns: 120px 1fr;
                align-items: center;
                gap: 1.25rem;
            }

            .license-form-grid label {
                text-align: right;
                padding-right: 1rem;
                color: var(--text-secondary);
                font-weight: 500;
            }
        }

        .license-form-grid textarea {
            resize: vertical;
            min-height: 70px;
        }

        .license-footer-text {
            font-size: 0.85rem;
            color: var(--text-secondary);
            text-align: center;
            margin-top: 1.5rem;
        }

        .modal-hr {
            border: none;
            border-top: 1px solid var(--border-color);
            margin: 1rem 0 2rem;
        }

        #new-article-btn.limit-reached {
            background-color: var(--bg-tertiary);
            cursor: pointer;
            animation: none;
        }

        #new-article-btn.limit-reached svg {
            color: var(--danger-color);
        }

        /* --- REDESIGNED ASCENSION MODAL --- */
        .modal-close-btn {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: transparent;
            border: none;
            font-size: 1.5rem;
            line-height: 1;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 0.5rem;
            transition: transform 0.2s ease, color 0.2s ease;
        }

        .modal-close-btn:hover {
            color: var(--text-primary);
            transform: scale(1.1);
        }

        .ascension-modal {
            max-width: 720px;
            width: 100%;
            text-align: center;
            border: 1px solid var(--border-color);
            background: linear-gradient(145deg, var(--bg-primary), var(--bg-secondary));
            max-height: 90vh;
            overflow-y: auto;
        }

        /* --- NEW: Ascension Modal Gradient Text (v2) --- */
        .witty-gradient-text {
            font-weight: 700;
            background-size: 200% auto;
            color: #000;
            background-clip: text;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: witty-text-glow 6s linear infinite;
        }

        [data-theme="light"] .witty-gradient-text {
            background-image: linear-gradient(90deg, #0d9488, #581c87, #be185d, #0d9488);
        }

        [data-theme="dark"] .witty-gradient-text {
            background-image: linear-gradient(90deg, #F7C96D, #34d399, #f06292, #F7C96D);
        }

        [data-theme="sepia"] .witty-gradient-text {
            background-image: linear-gradient(90deg, #8c6d46, #4d7c0f, #a16207, #8c6d46);
        }

        @keyframes witty-text-glow {
            to {
                background-position: -200% center;
            }
        }

        .ascension-badges-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 1.25rem;
            margin: 2rem 0;
        }

        .ascension-badge {
            padding: 1.25rem 1rem;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-lg);
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            background-color: var(--bg-tertiary);
            position: relative;
            overflow: hidden;
        }

        .ascension-badge:hover {
            transform: translateY(-5px) scale(1.02);
            border-color: var(--primary-color);
            box-shadow: var(--shadow-lg);
        }

        .ascension-badge .badge-icon {
            font-size: 3rem;
            line-height: 1;
            margin-bottom: 0.75rem;
            display: block;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .ascension-badge .badge-name {
            font-weight: 600;
            font-size: 1rem;
            margin-top: 0.5rem;
            display: block;
            color: var(--text-primary);
        }

        .ascension-badge .badge-duration {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        /* Special style for the best tier */
        .ascension-badge.tier-quantum {
            border-color: var(--primary-color);
            background: linear-gradient(to bottom right, var(--bg-secondary), var(--bg-tertiary));
            animation: quantum-glow 3s infinite alternate;
        }

        @keyframes quantum-glow {
            from {
                box-shadow: 0 0 5px color-mix(in srgb, var(--primary-color) 20%, transparent);
            }

            to {
                box-shadow: 0 0 20px 5px color-mix(in srgb, var(--primary-color) 40%, transparent);
            }
        }

        .ascension-badge.tier-quantum .badge-name {
            color: var(--primary-color);
        }

        .ascension-features {
            text-align: left;
            margin: 2rem auto;
            max-width: 450px;
            padding: 1.5rem;
            background-color: var(--bg-primary);
            border-radius: var(--border-radius);
        }

        .ascension-features h5 {
            margin-top: 0;
            margin-bottom: 1rem;
        }

        .ascension-features ul {
            list-style: none;
            padding: 0;
        }

        .ascension-features li {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .ascension-features svg {
            color: #2ecc71;
            flex-shrink: 0;
        }

        .ascension-footer {
            margin-top: 1.5rem;
            font-size: 0.9rem;
        }

        .ascension-footer a {
            color: var(--text-secondary);
            text-decoration: none;
            border-bottom: 1px dotted var(--text-secondary);
        }

        .ascension-footer a:hover {
            color: var(--text-primary);
            border-bottom-color: var(--text-primary);
        }

        /* NEW: Styled Maybe Later Button */
        .ascension-footer-button {
            background-color: var(--bg-tertiary);
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
            padding: 0.75rem 1.5rem;
            border-radius: var(--border-radius-lg);
            font-weight: 500;
            transition: all 0.2s ease-in-out;
        }

        .ascension-footer-button:hover {
            background-color: color-mix(in srgb, var(--primary-color) 10%, var(--bg-tertiary));
            border-color: var(--primary-color);
            color: var(--primary-color);
        }

        .modal-content {
            max-height: 90vh;
            overflow-y: auto;
        }

        .ascension-features {
            text-align: left;
            margin: 2rem auto;
            max-width: 450px;
            padding: 1.5rem;
            background-color: var(--bg-tertiary);
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--border-color);
        }

        .ascension-features h5 {
            margin-top: 0;
            margin-bottom: 1rem;
            color: var(--primary-color);
            font-size: 1.1em;
        }

        .ascension-features ul {
            list-style: none;
            padding: 0;
        }

        .ascension-features li {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
            color: var(--text-primary);
            font-size: 0.95rem;
        }

        .ascension-features svg {
            color: var(--success-color);
            flex-shrink: 0;
        }

        /* Use success color for checkmarks */
        #license-hub-container {
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
            padding: 1rem 0;
            margin: 1rem 0;
        }

        .license-hub-grid {
            align-items: center;
        }

        #license-hub-status-badge {
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        /* --- NEW: Polished Ascension Cards (v2) --- */
        .ascension-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            padding: 1.5rem 1rem;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-lg);
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            background-color: var(--bg-tertiary);
            position: relative;
            overflow: hidden;
        }

        .ascension-card:hover {
            transform: translateY(-5px) scale(1.02);
            border-color: var(--primary-color);
            box-shadow: var(--shadow-lg);
        }

        .ascension-card-name {
            font-weight: 600;
            font-size: 1.05rem;
            color: var(--text-primary);
        }

        .ascension-card-duration {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }

        .ascension-card.is-current-tier {
            cursor: default;
            background-color: var(--bg-secondary);
            border-style: dashed;
        }

        .ascension-card.is-current-tier:hover {
            transform: none;
            box-shadow: none;
            border-color: var(--border-color);
        }

        .ascension-card.is-current-tier::after {
            content: 'CURRENTLY';
            position: absolute;
            top: 16px;
            right: -35px;
            transform: rotate(45deg);
            background-color: var(--primary-color);
            color: var(--text-on-primary);
            font-size: 0.55rem;
            font-weight: 700;
            padding: 5px 32px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        /* --- NEW: Ascension Grid Layout (v2) --- */
        .ascension-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 1.25rem;
            margin: 2rem 0 1.2rem 0;
        }

        /* First 3 cards (Spark, Bronze, Silver) take 2 columns each, filling the first row */
        .ascension-grid .ascension-card:nth-child(-n+3) {
            grid-column: span 2;
        }

        /* Last 2 cards (Gold, Diamond) take 3 columns each, filling and centering on the second row */
        .ascension-grid .ascension-card:nth-child(n+4) {
            grid-column: span 3;
        }

        /* Media query for smaller screens to stack them nicely */
        @media (max-width: 680px) {
            .ascension-grid {
                grid-template-columns: 1fr;
            }

            .ascension-grid .ascension-card:nth-child(-n+3),
            .ascension-grid .ascension-card:nth-child(n+4) {
                grid-column: span 1;
            }
        }

        /* --- NEW: Refined Maybe Later Button (v2) --- */
        .ascension-footer-button.witty-gradient-text {
            border: 2px solid var(--border-color);
            padding: 0.75rem 1.5rem;
            font-size: 1.1rem;
            font-weight: bold;
            transition: border-color 0.3s ease;
        }

        .ascension-footer-button.witty-gradient-text:hover {
            border-color: var(--primary-color);
        }

        /* Center the button */
        .ascension-modal .modal-buttons {
            justify-content: center;
        }

        /* ═══════════════════════════════════════════════════════════════════
           ASCENSION MODAL — PURE DARK AESTHETIC MASTERPIECE (v4.0)
           Designed for ultimate luxury, luminous astral badges, cut-off pricing,
           and zero regressions across all views.
        ═══════════════════════════════════════════════════════════════════ */

        /* ═══════════════════════════════════════════════════════════════════
           ASCENSION MODAL — PURE DARK AESTHETIC MASTERPIECE (v4.1)
           Designed for ultimate luxury, luminous astral badges, cut-off pricing,
           3+2 flagship card hierarchy, border-mounted pill tags, 3x3 feature grid,
           and zero regressions across all views and themes.
        ═══════════════════════════════════════════════════════════════════ */

        .ascension-backdrop-dark,
        body.mobile-view .ascension-backdrop-dark {
            position: fixed !important;
            inset: 0 !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            height: 100dvh !important;
            z-index: 999999 !important;
            background: rgba(4, 6, 14, 0.92) !important;
            backdrop-filter: blur(24px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
            display: flex !important;
            align-items: flex-start !important;
            justify-content: center !important;
            padding: 0 !important;
            margin: 0 !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            animation: ascensionFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            color-scheme: dark !important;
        }

        @keyframes ascensionFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .ascension-modal-dark,
        body.mobile-view .ascension-modal-dark {
            position: relative !important;
            width: 100% !important;
            max-width: 920px !important;
            min-height: 100% !important;
            margin: 0 auto !important;
            padding: 3rem 1.5rem 4.5rem !important;
            border-radius: 0 !important;
            border: none !important;
            box-sizing: border-box !important;
            background: radial-gradient(ellipse at 50% 0%, #151c34 0%, #0c101d 50%, #060810 100%) !important;
            color: #f8fafc !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            box-shadow: none !important;
            transform: none !important;
            animation: none !important;
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
        }

        .ascension-modal-dark::-webkit-scrollbar {
            width: 6px;
        }
        .ascension-modal-dark::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.18);
            border-radius: 99px;
        }

        /* Floating Frosted Close Button */
        .ascension-dark-close-btn {
            position: fixed !important;
            top: 1.5rem !important;
            right: 1.75rem !important;
            width: 44px !important;
            height: 44px !important;
            border-radius: 50% !important;
            background: rgba(255, 255, 255, 0.08) !important;
            border: 1px solid rgba(255, 255, 255, 0.16) !important;
            color: #cbd5e1 !important;
            font-size: 1.65rem !important;
            line-height: 1 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            cursor: pointer !important;
            z-index: 1000000 !important;
            backdrop-filter: blur(16px) !important;
            -webkit-backdrop-filter: blur(16px) !important;
            transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        }

        .ascension-dark-close-btn:hover {
            background: rgba(255, 255, 255, 0.2) !important;
            color: #ffffff !important;
            border-color: rgba(255, 255, 255, 0.35) !important;
            transform: scale(1.1) rotate(90deg) !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
        }

        /* Modal Inner Container */
        .ascension-modal-inner {
            width: 100%;
            max-width: 860px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
            z-index: 1;
        }

        /* Header & Value Proposition */
        .ascension-header-wrap {
            margin-bottom: 1.75rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.65rem;
        }

        .ascension-master-title {
            font-size: clamp(1.9rem, 4.5vw, 2.75rem) !important;
            font-weight: 900 !important;
            letter-spacing: -0.03em !important;
            margin: 0 !important;
            line-height: 1.15 !important;
            color: #ffffff !important;
            background: linear-gradient(135deg, #ffffff 0%, #fef08a 25%, #f59e0b 50%, #ec4899 75%, #a855f7 100%) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            animation: ascensionShimmer 6s linear infinite !important;
        }

        @keyframes ascensionShimmer {
            to { background-position: -200% center; }
        }

        .ascension-multiapp-pill {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 5px 16px;
            border-radius: 99px;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(168, 85, 247, 0.18) 50%, rgba(236, 72, 153, 0.12));
            border: 1px solid rgba(168, 85, 247, 0.42);
            color: #e0e7ff;
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            box-shadow: 0 0 22px rgba(168, 85, 247, 0.2), inset 0 0 12px rgba(168, 85, 247, 0.1);
            backdrop-filter: blur(8px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .ascension-multiapp-pill:hover {
            border-color: rgba(192, 132, 252, 0.7);
            box-shadow: 0 0 28px rgba(168, 85, 247, 0.35), inset 0 0 14px rgba(168, 85, 247, 0.2);
            transform: translateY(-1px);
        }

        .ascension-multiapp-pill .multiapp-sparkle {
            display: inline-block;
            color: #c084fc;
            font-size: 0.85rem;
            animation: multiappPulse 2s infinite ease-in-out;
        }

        @keyframes multiappPulse {
            0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 4px #c084fc); }
            50% { transform: scale(1.3) rotate(12deg); filter: drop-shadow(0 0 8px #e879f9); }
        }

        .ascension-deal-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 18px;
            border-radius: 99px;
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(234, 88, 12, 0.1));
            border: 1px solid rgba(245, 158, 11, 0.4);
            color: #fde047;
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            box-shadow: 0 0 24px rgba(245, 158, 11, 0.16), inset 0 0 12px rgba(245, 158, 11, 0.08);
            backdrop-filter: blur(8px);
        }

        .ascension-deal-pill .deal-sparkle {
            display: inline-block;
            animation: dealBlink 1.4s infinite ease-in-out;
        }

        @keyframes dealBlink {
            0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px #fbbf24); }
            50% { transform: scale(1.3); filter: drop-shadow(0 0 8px #f59e0b); }
        }

        /* ── TIER PRICING GRID (3 + 2 LUXURY LAYOUT) ────────────────────────── */
        .ascension-tier-grid {
            display: grid !important;
            grid-template-columns: repeat(6, 1fr) !important;
            gap: 16px !important;
            width: 100% !important;
            margin: 1.5rem 0 2rem !important;
        }

        /* Top Row: Spark, Bronze, Silver (3 cards) */
        .ascension-tier-card.tier-spark,
        .ascension-tier-card.tier-bronze,
        .ascension-tier-card.tier-silver {
            grid-column: span 2 !important;
        }

        /* Bottom Row: Gold & Diamond (2 wider cards) */
        .ascension-tier-card.tier-gold,
        .ascension-tier-card.tier-diamond {
            grid-column: span 3 !important;
        }

        @media (max-width: 860px) {
            .ascension-tier-grid {
                gap: 12px !important;
            }
        }

        @media (max-width: 680px) {
            .ascension-tier-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 16px 10px !important;
            }
            .ascension-tier-card.tier-spark,
            .ascension-tier-card.tier-bronze {
                grid-column: span 1 !important;
            }
            .ascension-tier-card.tier-silver {
                grid-column: span 2 !important;
            }
            .ascension-tier-card.tier-gold,
            .ascension-tier-card.tier-diamond {
                grid-column: span 2 !important;
            }
        }

        @media (max-width: 460px) {
            .ascension-tier-grid {
                grid-template-columns: 1fr !important;
                gap: 18px !important;
            }
            .ascension-tier-card.tier-spark,
            .ascension-tier-card.tier-bronze,
            .ascension-tier-card.tier-silver,
            .ascension-tier-card.tier-gold,
            .ascension-tier-card.tier-diamond {
                grid-column: span 1 !important;
            }
        }

        /* ── TIER CARDS ─────────────────────────────────────────────────────── */
        .ascension-tier-card {
            background: rgba(18, 23, 38, 0.72) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-radius: 22px !important;
            padding: 1.45rem 1rem 1.15rem !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: space-between !important;
            text-align: center !important;
            cursor: pointer !important;
            position: relative !important;
            overflow: visible !important; /* Essential: lets border pills sit seamlessly across top border */
            min-height: 285px !important;
            backdrop-filter: blur(16px) !important;
            -webkit-backdrop-filter: blur(16px) !important;
            transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
            box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5) !important;
            box-sizing: border-box !important;
        }

        .ascension-tier-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 22px;
            background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
            pointer-events: none;
            opacity: 0.6;
            transition: opacity 0.28s ease;
        }

        .ascension-tier-card:hover {
            transform: translateY(-7px) scale(1.02) !important;
            background: rgba(22, 28, 48, 0.9) !important;
        }

        .ascension-tier-card:hover::before {
            opacity: 1;
        }

        /* Animated Badge Ring Wrapper */
        .ascension-badge-glow-ring {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0.35rem 0 0.5rem;
            transition: transform 0.28s ease;
        }

        .ascension-tier-card:hover .ascension-badge-glow-ring {
            transform: scale(1.08);
        }

        /* Title & Subtitle */
        .ascension-card-title-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }

        .ascension-tier-title {
            font-size: 1.1rem !important;
            font-weight: 800 !important;
            color: #ffffff !important;
            letter-spacing: -0.01em !important;
            line-height: 1.2 !important;
        }

        .ascension-tier-duration {
            font-size: 0.74rem !important;
            color: #94a3b8 !important;
            font-weight: 600 !important;
        }

        /* ── CUT-OFF PRICING BOX ────────────────────────────────────────────── */
        .ascension-card-pricing-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            margin: 0.5rem 0;
            width: 100%;
        }

        .ascension-price-row {
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 6px;
        }

        .ascension-price-row.single {
            justify-content: center;
        }

        /* Struck-through Original Price (Sleek Clean Cut) */
        .ascension-orig-price {
            font-size: 0.95rem !important;
            font-weight: 600 !important;
            color: #94a3b8 !important;
            text-decoration: line-through !important;
            text-decoration-color: rgba(148, 163, 184, 0.75) !important;
            text-decoration-thickness: 1.5px !important;
            opacity: 0.8 !important;
        }

        /* Discounted Active Price */
        .ascension-price-main {
            font-size: 1.45rem !important;
            font-weight: 900 !important;
            color: #ffffff !important;
            line-height: 1 !important;
            letter-spacing: -0.02em !important;
        }

        .ascension-price-free {
            font-size: 1.3rem !important;
            font-weight: 900 !important;
            color: #cbd5e1 !important;
            line-height: 1 !important;
        }

        .ascension-price-meta {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex-wrap: wrap;
        }

        /* Frosted USD Pricing Capsule */
        .ascension-usd-pill {
            font-size: 0.68rem !important;
            font-weight: 800 !important;
            padding: 2px 8px !important;
            border-radius: 99px !important;
            background: rgba(255, 255, 255, 0.08) !important;
            color: #e2e8f0 !important;
            border: 1px solid rgba(255, 255, 255, 0.18) !important;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
            letter-spacing: 0.02em !important;
        }

        .ascension-cadence {
            font-size: 0.72rem !important;
            color: #94a3b8 !important;
            font-weight: 500 !important;
        }

        /* ── CARD ACTION BUTTON ────────────────────────────────────────────── */
        .ascension-card-action {
            width: 100%;
            margin-top: 0.35rem;
        }

        .action-label {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 7px 10px;
            border-radius: 11px;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            transition: all 0.22s ease;
            box-sizing: border-box;
        }

        .action-label.upgrade-plan {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.14);
            color: #e2e8f0;
        }

        .ascension-tier-card:hover .action-label.upgrade-plan {
            background: #ffffff;
            color: #0b0f19;
            border-color: #ffffff;
            box-shadow: 0 4px 16px rgba(255, 255, 255, 0.35);
        }

        .action-label.default-plan {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.07);
            color: #64748b;
        }

        .action-label.active-plan {
            background: rgba(59, 130, 246, 0.18);
            border: 1px solid rgba(59, 130, 246, 0.45);
            color: #60a5fa;
        }

        /* ── TIER-SPECIFIC CUSTOM THEMING & GLOWS ───────────────────────────── */

        /* Spark (Free) */
        .ascension-tier-card.tier-spark {
            border-color: rgba(148, 163, 184, 0.16) !important;
        }
        .ascension-tier-card.tier-spark:hover {
            border-color: rgba(148, 163, 184, 0.45) !important;
            box-shadow: 0 12px 32px -8px rgba(148, 163, 184, 0.22) !important;
        }

        /* Bronze (3 Months) */
        .ascension-tier-card.tier-bronze {
            border-color: rgba(217, 119, 6, 0.32) !important;
        }
        .ascension-tier-card.tier-bronze:hover {
            border-color: #d97706 !important;
            box-shadow: 0 14px 38px -6px rgba(217, 119, 6, 0.45) !important;
        }
        .ascension-tier-card.tier-bronze .ascension-tier-title {
            color: #fcd34d !important;
        }

        /* Silver (6 Months) */
        .ascension-tier-card.tier-silver {
            border-color: rgba(203, 213, 225, 0.32) !important;
        }
        .ascension-tier-card.tier-silver:hover {
            border-color: #cbd5e1 !important;
            box-shadow: 0 14px 38px -6px rgba(203, 213, 225, 0.38) !important;
        }
        .ascension-tier-card.tier-silver .ascension-tier-title {
            color: #f1f5f9 !important;
        }

        /* Gold (1 Year - Popular, Flagship Wide) */
        .ascension-tier-card.tier-gold {
            border: 1px solid rgba(245, 158, 11, 0.55) !important;
            background: linear-gradient(180deg, rgba(245, 158, 11, 0.11) 0%, rgba(18, 23, 38, 0.82) 100%) !important;
            box-shadow: 0 10px 32px -8px rgba(245, 158, 11, 0.28) !important;
        }
        .ascension-tier-card.tier-gold:hover {
            border-color: #fbbf24 !important;
            box-shadow: 0 16px 46px -4px rgba(245, 158, 11, 0.55) !important;
        }
        .ascension-tier-card.tier-gold .ascension-tier-title {
            color: #fbbf24 !important;
        }
        .ascension-tier-card.tier-gold .ascension-price-main {
            color: #fef08a !important;
        }

        /* Diamond (Lifetime - Best Value, Flagship Wide) */
        .ascension-tier-card.tier-diamond {
            border: 1px solid rgba(6, 182, 212, 0.6) !important;
            background: linear-gradient(180deg, rgba(6, 182, 212, 0.12) 0%, rgba(18, 23, 38, 0.82) 100%) !important;
            box-shadow: 0 10px 32px -8px rgba(6, 182, 212, 0.32) !important;
        }
        .ascension-tier-card.tier-diamond:hover {
            border-color: #38bdf8 !important;
            box-shadow: 0 16px 46px -4px rgba(6, 182, 212, 0.6) !important;
        }
        .ascension-tier-card.tier-diamond .ascension-tier-title {
            color: #38bdf8 !important;
        }
        .ascension-tier-card.tier-diamond .ascension-price-main {
            color: #e0f2fe !important;
        }

        /* ── BORDER-MOUNTED PILL BADGES (MOST POPULAR & BEST VALUE) ────────── */
        .ascension-featured-pill {
            position: absolute !important;
            top: -12px !important; /* Centered right across top border */
            left: 50% !important;
            transform: translateX(-50%) !important;
            font-size: 0.62rem !important;
            font-weight: 900 !important;
            letter-spacing: 0.08em !important;
            padding: 3px 14px !important;
            border-radius: 99px !important;
            white-space: nowrap !important;
            text-transform: uppercase !important;
            z-index: 20 !important;
        }

        .tier-gold .ascension-featured-pill {
            background: linear-gradient(135deg, #f59e0b, #d97706) !important;
            color: #0b0f19 !important;
            border: 1px solid rgba(254, 240, 138, 0.7) !important;
            box-shadow: 0 4px 16px rgba(245, 158, 11, 0.6) !important;
        }

        .tier-diamond .ascension-featured-pill {
            background: linear-gradient(135deg, #06b6d4, #3b82f6) !important;
            color: #ffffff !important;
            border: 1px solid rgba(186, 230, 253, 0.7) !important;
            box-shadow: 0 4px 16px rgba(6, 182, 212, 0.6) !important;
        }

        /* Active Plan Border Pill */
        .ascension-current-ribbon {
            position: absolute !important;
            top: -10px !important;
            right: 14px !important;
            background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
            color: #ffffff !important;
            font-size: 0.54rem !important;
            font-weight: 900 !important;
            padding: 3px 10px !important;
            border-radius: 99px !important;
            border: 1px solid rgba(191, 219, 254, 0.4) !important;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
            letter-spacing: 0.08em !important;
            z-index: 20 !important;
        }

        .ascension-tier-card.is-current-tier {
            cursor: default !important;
            border-style: dashed !important;
            opacity: 0.92;
        }
        .ascension-tier-card.is-current-tier:hover {
            transform: none !important;
            box-shadow: none !important;
        }

        /* ── FOMO SPOTLIGHT CARD ("DID YOU KNOW?") ─────────────────────────── */
        .ascension-fomo-card {
            width: 100% !important;
            max-width: 660px !important;
            margin: 0.5rem auto 2rem !important;
            padding: 1.2rem 1.6rem !important;
            border-radius: 18px !important;
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(239, 68, 68, 0.07)) !important;
            border: 1px solid rgba(245, 158, 11, 0.34) !important;
            box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6), inset 0 0 16px rgba(245, 158, 11, 0.06) !important;
            text-align: center !important;
            backdrop-filter: blur(12px) !important;
            -webkit-backdrop-filter: blur(12px) !important;
            position: relative !important;
            overflow: hidden !important;
            box-sizing: border-box !important;
        }

        .ascension-fomo-label {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 5px !important;
            font-size: 0.68rem !important;
            font-weight: 900 !important;
            letter-spacing: 0.14em !important;
            text-transform: uppercase !important;
            color: #fbbf24 !important;
            margin-bottom: 0.45rem !important;
        }

        .ascension-fomo-spark {
            display: inline-block !important;
            animation: fomoSparkAnim 1.4s infinite ease-in-out !important;
        }

        @keyframes fomoSparkAnim {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.35) rotate(12deg); }
        }

        .ascension-fomo-msg {
            font-size: 0.92rem !important;
            color: #e2e8f0 !important;
            margin: 0 !important;
            line-height: 1.55 !important;
            font-weight: 500 !important;
        }

        .ascension-fomo-msg strong {
            color: #fbbf24 !important;
            font-weight: 800 !important;
        }

        /* ── "EVERYTHING UNLOCKED" FEATURES SECTION (3x3 GRID) ──────────────── */
        .ascension-features-section {
            width: 100% !important;
            max-width: 820px !important;
            margin-top: 0.5rem !important;
        }

        .ascension-features-header {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 0.8rem !important;
            margin-bottom: 1.2rem !important;
        }

        .ascension-features-header-text {
            font-size: 0.86rem !important;
            font-weight: 800 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.14em !important;
            color: #94a3b8 !important;
            white-space: nowrap !important;
        }

        .ascension-features-header-line {
            flex: 1 !important;
            height: 1px !important;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent) !important;
        }

        .ascension-feature-grid {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 12px !important;
        }

        @media (max-width: 740px) {
            .ascension-feature-grid {
                grid-template-columns: repeat(2, 1fr) !important;
            }
        }

        @media (max-width: 480px) {
            .ascension-feature-grid {
                grid-template-columns: 1fr !important;
            }
        }

        .ascension-feature-tile {
            background: rgba(18, 23, 38, 0.65) !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            border-top: 3px solid var(--tile-accent, #6366f1) !important;
            border-radius: 14px !important;
            padding: 0.95rem 1.05rem !important;
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            gap: 0.85rem !important;
            text-align: left !important;
            position: relative !important;
            overflow: hidden !important;
            backdrop-filter: blur(12px) !important;
            -webkit-backdrop-filter: blur(12px) !important;
            transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
            box-sizing: border-box !important;
        }

        .ascension-feature-tile:hover {
            background: rgba(26, 32, 54, 0.92) !important;
            border-color: color-mix(in srgb, var(--tile-accent, #6366f1) 50%, transparent) !important;
            transform: translateY(-4px) scale(1.025) !important;
            box-shadow: 0 8px 24px color-mix(in srgb, var(--tile-accent, #6366f1) 25%, transparent) !important;
        }

        .ascension-feature-icon-wrap {
            width: 38px !important;
            height: 38px !important;
            border-radius: 10px !important;
            background: color-mix(in srgb, var(--tile-accent, #6366f1) 18%, transparent) !important;
            border: 1px solid color-mix(in srgb, var(--tile-accent, #6366f1) 30%, transparent) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex-shrink: 0 !important;
            font-size: 1.25rem !important;
            transition: transform 0.22s ease !important;
        }

        .ascension-feature-tile:hover .ascension-feature-icon-wrap {
            transform: scale(1.12) rotate(-6deg) !important;
        }

        .ascension-feature-info {
            flex: 1 !important;
            min-width: 0 !important;
        }

        .ascension-feature-name {
            font-size: 0.82rem !important;
            font-weight: 800 !important;
            color: #f8fafc !important;
            line-height: 1.25 !important;
            margin-bottom: 2px !important;
        }

        .ascension-feature-desc {
            font-size: 0.72rem !important;
            color: #94a3b8 !important;
            line-height: 1.35 !important;
        }

        .ascension-feature-tile .tile-badge {
            position: absolute !important;
            top: 8px !important;
            right: 10px !important;
            font-size: 0.54rem !important;
            font-weight: 800 !important;
            padding: 2px 7px !important;
            border-radius: 99px !important;
            background: linear-gradient(135deg, #f59e0b, #ef4444) !important;
            color: #ffffff !important;
            text-transform: uppercase !important;
            letter-spacing: 0.06em !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
        }

        /* ── CONTEXT HERO BLOCK ────────────────────────────────────────────── */
        .ascension-hero-block {
            display: flex !important;
            align-items: center !important;
            gap: 1.25rem !important;
            margin: 0 0 1.5rem 0 !important;
            padding: 1.25rem 1.5rem !important;
            border-radius: 20px !important;
            text-align: left !important;
            position: relative !important;
            overflow: hidden !important;
            width: 100% !important;
            max-width: 820px !important;
            box-sizing: border-box !important;
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(30, 27, 75, 0.5)) !important;
            border: 1px solid rgba(245, 158, 11, 0.35) !important;
            border-left: 4px solid #f59e0b !important;
            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(245, 158, 11, 0.08) !important;
            backdrop-filter: blur(16px) !important;
            -webkit-backdrop-filter: blur(16px) !important;
            animation: heroPulseIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
        }

        @keyframes heroPulseIn {
            from { opacity: 0; transform: translateY(-12px) scale(0.97); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .ascension-hero-emoji {
            font-size: 3rem !important;
            line-height: 1 !important;
            flex-shrink: 0 !important;
            filter: drop-shadow(0 6px 16px rgba(245, 158, 11, 0.6)) !important;
            animation: heroEmojiFloat 3s ease-in-out infinite !important;
        }

        @keyframes heroEmojiFloat {
            0%, 100% { transform: translateY(0) rotate(-3deg); }
            50% { transform: translateY(-6px) rotate(3deg); }
        }

        .ascension-hero-text {
            flex: 1 !important;
            min-width: 0 !important;
        }

        .ascension-exclusive-pill {
            display: inline-flex !important;
            align-items: center !important;
            gap: 0.3rem !important;
            font-size: 0.58rem !important;
            font-weight: 900 !important;
            letter-spacing: 0.12em !important;
            text-transform: uppercase !important;
            color: #ffffff !important;
            background: linear-gradient(135deg, #f59e0b, #d97706) !important;
            padding: 3px 9px !important;
            border-radius: 99px !important;
            margin-bottom: 0.45rem !important;
            box-shadow: 0 2px 8px rgba(245, 158, 11, 0.45) !important;
        }

        .ascension-hero-headline {
            font-size: 1.15rem !important;
            font-weight: 800 !important;
            color: #ffffff !important;
            margin: 0 0 0.35rem 0 !important;
            letter-spacing: -0.01em !important;
            line-height: 1.3 !important;
        }

        .ascension-hero-sub {
            font-size: 0.88rem !important;
            color: #cbd5e1 !important;
            margin: 0 !important;
            line-height: 1.55 !important;
        }

        /* ── MODAL FOOTER ──────────────────────────────────────────────────── */
        .ascension-modal-footer {
            margin-top: 2.25rem;
            display: flex;
            justify-content: center;
            width: 100%;
        }

        .ascension-maybe-later-btn {
            background: rgba(255, 255, 255, 0.05) !important;
            border: 1px solid rgba(255, 255, 255, 0.14) !important;
            color: #94a3b8 !important;
            padding: 0.8rem 2.25rem !important;
            border-radius: 99px !important;
            font-weight: 600 !important;
            font-size: 0.92rem !important;
            cursor: pointer !important;
            backdrop-filter: blur(12px) !important;
            -webkit-backdrop-filter: blur(12px) !important;
            transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        }

        .ascension-maybe-later-btn:hover {
            background: rgba(255, 255, 255, 0.14) !important;
            color: #ffffff !important;
            border-color: rgba(255, 255, 255, 0.28) !important;
            transform: translateY(-2px) scale(1.03) !important;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
        }

        /* Force Astral Badges inside dark modal to always render in rich dark aesthetic */
        .ascension-modal-dark .astral.spark {
            background: radial-gradient(circle at 35% 35%, #475569, #1e293b 80%) !important;
            color: #94a3b8 !important;
            box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(148, 163, 184, 0.2) !important;
        }
        .ascension-modal-dark .astral.spark .inner-icon svg {
            fill: #cbd5e1 !important;
        }

        .ascension-modal-dark .astral.bronze {
            background: radial-gradient(circle at 35% 35%, #b45309, #78350f 70%, #451a03) !important;
            color: #fde68a !important;
            box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 4px 18px rgba(217, 119, 6, 0.35) !important;
        }
        .ascension-modal-dark .astral.bronze .inner-icon svg {
            fill: #fef3c7 !important;
        }

        .ascension-modal-dark .astral.silver {
            background: radial-gradient(circle at 35% 35%, #94a3b8, #475569 70%, #1e293b) !important;
            color: #f8fafc !important;
            --glow-color: rgba(226, 232, 240, 0.4);
            animation: very-subtle-glow 8s infinite ease-in-out !important;
            box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 4px 18px rgba(148, 163, 184, 0.3) !important;
        }
        .ascension-modal-dark .astral.silver .inner-icon svg {
            fill: #ffffff !important;
            filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)) !important;
        }

        .ascension-modal-dark .astral.gold {
            background: radial-gradient(circle at 35% 35%, #f59e0b, #d97706 60%, #78350f) !important;
            color: #fffbeb !important;
            --glow-color: rgba(245, 158, 11, 0.55);
            animation: subtle-glow 6s infinite ease-in-out !important;
            box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 4px 22px rgba(245, 158, 11, 0.45) !important;
        }
        .ascension-modal-dark .astral.gold .inner-icon svg {
            fill: #ffffff !important;
            filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.85)) !important;
        }

        .ascension-modal-dark .astral.diamond {
            background: radial-gradient(circle at 35% 35%, #38bdf8, #0284c7 60%, #082f49) !important;
            color: #ffffff !important;
            --glow-color: rgba(56, 189, 248, 0.65);
            animation: subtle-glow 5s infinite ease-in-out !important;
            box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 4px 24px rgba(56, 189, 248, 0.5) !important;
        }
        .ascension-modal-dark .astral.diamond .inner-icon svg {
            fill: #ffffff !important;
            filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.95)) !important;
        }

        /* --- THE ASTRAL CORE: MASTERPIECE EDITION BADGES (v2.0) --- */
        .badge-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
        }

        .badge-label {
            font-weight: 500;
            font-size: 0.9rem;
            color: var(--text-secondary);
        }

        .badge-icon {
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .badge-icon:hover {
            transform: scale(1.1) translateY(-5px);
            box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.4);
        }

        .badge-icon .inner-icon {
            width: 62%;
            height: 62%;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* FIX: Specific rule to correctly size the small profile badge icon */
        #profile-badge .badge-icon {
            width: 100%;
            height: 100%;
            box-shadow: none;
        }

        #profile-badge .inner-icon {
            width: 60%;
            height: 60%;
        }

        .badge-icon .inner-icon svg {
            width: 100%;
            height: 100%;
        }

        /* --- Badge Icon Fills (Definitive Cross-Browser Fix) --- */
        [data-theme="light"] .astral.spark .inner-icon svg {
            fill: #6c757d;
        }

        [data-theme="light"] .astral.bronze .inner-icon svg {
            fill: #fff3e0;
        }

        [data-theme="light"] .astral.silver .inner-icon svg {
            fill: #ffffff;
        }

        [data-theme="light"] .astral.gold .inner-icon svg {
            fill: #424242;
        }

        [data-theme="light"] .astral.diamond .inner-icon svg {
            fill: #ffffff;
        }

        [data-theme="dark"] .astral.spark .inner-icon svg {
            fill: #a0aec0;
        }

        [data-theme="dark"] .astral.bronze .inner-icon svg {
            fill: #d7ccc8;
        }

        [data-theme="dark"] .astral.silver .inner-icon svg {
            fill: #eceff1;
        }

        [data-theme="dark"] .astral.gold .inner-icon svg {
            fill: #fffde7;
        }

        [data-theme="dark"] .astral.diamond .inner-icon svg {
            fill: #fff;
        }

        [data-theme="sepia"] .astral.spark .inner-icon svg {
            fill: #7a6a57;
        }

        [data-theme="sepia"] .astral.bronze .inner-icon svg {
            fill: #f5f5f5;
        }

        [data-theme="sepia"] .astral.silver .inner-icon svg {
            fill: #f5f5f5;
        }

        [data-theme="sepia"] .astral.gold .inner-icon svg {
            fill: #fbf0d9;
        }

        [data-theme="sepia"] .astral.diamond .inner-icon svg {
            fill: #fbf0d9;
        }

        /* Badge Animations & Theme Backgrounds (No changes here) */
        @keyframes subtle-glow {

            0%,
            100% {
                box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 10px 0px var(--glow-color);
            }

            50% {
                box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 20px 5px var(--glow-color);
            }
        }

        @keyframes very-subtle-glow {

            0%,
            100% {
                box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 5px 0px var(--glow-color);
            }

            50% {
                box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 10px 2px var(--glow-color);
            }
        }

        @keyframes icon-pulse {

            0%,
            100% {
                transform: scale(0.90);
                filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)) brightness(1);
            }

            50% {
                transform: scale(1.15);
                filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)) brightness(1.25);
            }
        }

        @keyframes rotate-veryslow {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes planetary-rotation {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        [data-theme="light"] .astral.spark {
            background: linear-gradient(145deg, #e9ecef, #dee2e6);
            color: #6c757d;
        }

        [data-theme="light"] .astral.bronze {
            background: linear-gradient(145deg, #d3a985, #b96f48);
            color: #fff3e0;
        }

        [data-theme="light"] .astral.silver {
            background: linear-gradient(145deg, #e0e0e0, #bdbdbd);
            color: #ffffff;
            --glow-color: rgba(33, 33, 33, 0.2);
            animation: very-subtle-glow 8s infinite ease-in-out;
        }

        [data-theme="light"] .astral.gold {
            background: linear-gradient(145deg, #fff176, #fbc02d);
            color: #424242;
            --glow-color: rgba(251, 192, 45, 0.3);
            animation: subtle-glow 7s infinite ease-in-out;
        }

        [data-theme="light"] .astral.diamond {
            background: linear-gradient(145deg, #81d4fa, #29b6f6);
            color: #ffffff;
            --glow-color: rgba(3, 155, 229, 0.5);
            animation: subtle-glow 6s infinite ease-in-out;
        }

        [data-theme="dark"] .astral.spark {
            background: radial-gradient(circle, #4a5568, #2d3748);
            color: #a0aec0;
        }

        [data-theme="dark"] .astral.bronze {
            background: radial-gradient(circle, #8d6e63, #4e342e);
            color: #d7ccc8;
        }

        [data-theme="dark"] .astral.silver {
            background: radial-gradient(circle, #78909c, #37474f);
            color: #eceff1;
            --glow-color: rgba(176, 190, 197, 0.3);
            animation: very-subtle-glow 8s infinite ease-in-out;
        }

        [data-theme="dark"] .astral.gold {
            background: radial-gradient(ellipse at center, #7f3d02, #ffb300, #f57f17);
            color: #fffde7;
            --glow-color: rgba(255, 236, 179, 0.35);
            animation: subtle-glow 7s infinite ease-in-out;
        }

        [data-theme="dark"] .astral.diamond {
            background: radial-gradient(ellipse at center, #01579b, #29b6f6, #000);
            color: #fff;
            --glow-color: rgba(128, 222, 234, 0.5);
            animation: subtle-glow 6s infinite ease-in-out;
        }

        [data-theme="sepia"] .astral.spark {
            background: radial-gradient(circle at 30% 30%, #fbf0d9, #e9dbbf);
            color: #7a6a57;
        }

        [data-theme="sepia"] .astral.bronze {
            background: radial-gradient(circle, #ab8669, #8c6d46);
            color: #f5f5f5;
        }

        [data-theme="sepia"] .astral.silver {
            background: radial-gradient(circle, #d2d0cb, #a8a399);
            color: #f5f5f5;
            --glow-color: rgba(215, 204, 182, 0.3);
            animation: very-subtle-glow 8s infinite ease-in-out;
        }

        [data-theme="sepia"] .astral.gold {
            background: radial-gradient(circle, #e6c589, #b08d4b);
            color: #fbf0d9;
            --glow-color: rgba(199, 159, 87, 0.4);
            animation: subtle-glow 7s infinite ease-in-out;
        }

        [data-theme="sepia"] .astral.diamond {
            background: radial-gradient(circle, #b8cdd9, #839aac);
            color: #fbf0d9;
            --glow-color: rgba(131, 154, 172, 0.4);
            animation: subtle-glow 6s infinite ease-in-out;
        }

        .astral.spark .inner-icon svg {
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
        }

        [data-theme="sepia"] .astral.spark .inner-icon svg {
            filter: drop-shadow(0 1px 2px rgba(91, 70, 54, 0.2));
        }

        .astral.bronze .orbiting-dots {
            animation: planetary-rotation 20s infinite linear;
            transform-origin: center;
        }

        .astral.silver .inner-icon {
            animation: rotate-veryslow 90s infinite linear;
        }

        .astral.silver .inner-icon svg {
            filter: drop-shadow(0 0 5px rgba(236, 239, 241, 0.5));
        }

        [data-theme="light"] .astral.silver .inner-icon svg {
            filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
        }

        [data-theme="sepia"] .astral.silver .inner-icon svg {
            filter: drop-shadow(0 0 6px rgba(251, 240, 217, 0.6));
        }

        .astral.gold .inner-icon {
            animation: icon-pulse 18s infinite ease-in-out;
        }

        .astral.diamond .inner-icon {
            animation: icon-pulse 18s infinite ease-in-out -3.5s;
        }


        /* NEW: Premium Flashcard Upsell Tile (v2.0 REDESIGN) */
        .premium-upsell-tile {
            background: rgba(var(--bg-secondary-rgb), 0.5);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
            border-left: 5px solid var(--primary-color) !important;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 1.25rem;
            text-align: center;
            transition: all 0.2s ease-in-out;
            aspect-ratio: 1.7 / 1;
            min-height: 165px;
        }

        .premium-upsell-tile:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 0 20px 5px color-mix(in srgb, var(--primary-color) 20%, transparent);
            border-color: var(--primary-color);
        }

        .upsell-badge {
            align-self: center;
            background-color: var(--primary-color);
            color: var(--text-on-primary);
            font-size: 0.8rem;
            font-weight: 600;
            padding: 4px 12px;
            border-radius: 16px;
        }

        .upsell-content h4 {
            margin: 1rem 0 0.5rem 0;
            font-size: 1.1rem;
            color: var(--text-primary);
        }

        .upsell-content p {
            font-size: 0.9rem;
            color: var(--text-secondary);
            line-height: 1.5;
            margin: 0;
        }

        .upsell-progress-bar {
            height: 6px;
            background-color: var(--border-color);
            border-radius: 3px;
            margin: 0.75rem auto 0;
            overflow: hidden;
            width: 90%;
        }

        .upsell-progress {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 80%, white));
            border-radius: 3px;
            transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            box-shadow: 0 0 8px color-mix(in srgb, var(--primary-color) 30%, transparent);
        }

        .upsell-cta {
            font-weight: 600;
            color: var(--primary-color);
            margin-top: 1rem;
            font-size: 0.95rem;
        }

        /* NEW: Library Premium Upsell Card */
        .library-premium-card {
            grid-column: 1 / -1;
            border-color: var(--primary-color) !important;
            background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 5%, var(--bg-secondary)), var(--bg-secondary));
            cursor: pointer;
            border-radius: var(--border-radius);
            transition: transform 0.2s, box-shadow 0.2s;
        }

        /* FIX #4: Add a beautiful hover effect */
        .library-premium-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 0 20px 5px color-mix(in srgb, var(--primary-color) 20%, transparent);
        }

        .premium-badge {
            background-color: var(--primary-color) !important;
            color: var(--text-on-primary) !important;
        }

        .premium-card-footer {
            flex-direction: column;
            align-items: stretch !important;
            gap: 0.75rem !important;
        }

        .premium-progress-bar {
            height: 6px;
            background-color: var(--border-color);
            border-radius: 3px;
            overflow: hidden;
            width: 100%;
        }

        .premium-progress {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 80%, white));
            border-radius: 3px;
            transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            box-shadow: 0 0 8px color-mix(in srgb, var(--primary-color) 30%, transparent);
        }

        .premium-cta-text {
            font-weight: 600;
            color: var(--primary-color);
            text-align: right;
        }