/* Base Editorial Settings */
        body {
            background-color: #fafafa;
            /* Zinc-50 */
            color: #18181b;
            /* Zinc-900 */
            -webkit-font-smoothing: antialiased;
        }

        :root {
            --bg-page: #fafafa;
            --text-main: #18181b;
            --text-soft: #71717a;
            --surface-1: #ffffff;
            --surface-2: #f4f4f5;
            --surface-3: #fafafa;
            --line: #e4e4e7;
            --header-bg: rgba(24, 24, 27, 0.97);
            --header-text: #ffffff;
            --hero-overlay: rgba(250, 250, 250, 0.85);
            --chip-bg: #f4f4f5;
            --chip-text: #52525b;
            --card-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
            --footer-bg: #ffffff;
            --input-bg: #ffffff;
            --input-text: #18181b;
            --input-border: #e4e4e7;
            --header-btn-bg: #ffffff;
            --header-btn-text: #18181b;
            --header-btn-border: #d4d4d8;
        }

        html.dark-mode {
            --bg-page: #0f1018;
            --text-main: #f4f4f5;
            --text-soft: #a1a1aa;
            --surface-1: #171923;
            --surface-2: #12141d;
            --surface-3: #10131b;
            --line: #2a2f3f;
            --header-bg: rgba(10, 11, 17, 0.96);
            --header-text: #f4f4f5;
            --hero-overlay: rgba(10, 11, 17, 0.72);
            --chip-bg: #1e2230;
            --chip-text: #d4d4d8;
            --card-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
            --footer-bg: #11131b;
            --input-bg: #171923;
            --input-text: #f4f4f5;
            --input-border: #2f3548;
            --header-btn-bg: #1f2333;
            --header-btn-text: #f4f4f5;
            --header-btn-border: #353c55;
        }

        body {
            background: var(--bg-page);
            color: var(--text-main);
            transition: background 0.25s ease, color 0.25s ease;
        }

        .app-header {
            background: var(--header-bg) !important;
            color: var(--header-text) !important;
            border-bottom-color: color-mix(in oklab, var(--line) 55%, transparent) !important;
        }

        .header-search-shell {
            background: var(--input-bg) !important;
            border-color: var(--input-border) !important;
        }

        .header-search-shell input {
            color: var(--input-text) !important;
        }

        .hero-overlay-layer {
            position: absolute;
            inset: 0;
            background: var(--hero-overlay);
            z-index: 0;
            transition: background 0.25s ease;
        }

        .hero-title {
            color: var(--text-main) !important;
        }

        .hero-subtitle {
            color: var(--text-soft) !important;
        }

        .section-surface {
            background: var(--surface-1) !important;
            border-color: var(--line) !important;
        }

        .section-muted {
            color: var(--text-soft) !important;
        }

        .filter-chip {
            background: var(--chip-bg) !important;
            color: var(--chip-text) !important;
            border: 1px solid var(--line) !important;
        }

        .filter-chip.active {
            background: #7c3aed !important;
            color: #ffffff !important;
            border-color: #7c3aed !important;
        }

        .vault-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 1.5rem;
        }

        .vault-card {
            position: relative;
            background: var(--surface-1);
            border: 1px solid var(--line);
            border-radius: 28px;
            padding: 1.75rem;
            min-height: 260px;
            box-shadow: var(--card-shadow);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            overflow: hidden;
        }

        .vault-card h3 {
            color: var(--text-main);
            font-size: 1.1rem;
            font-weight: 700;
            margin-top: 0.85rem;
            word-break: break-word;
        }

        .vault-card p {
            color: var(--text-soft);
            font-size: 0.75rem;
            margin-top: 0.4rem;
        }

        .vault-logo-wrap {
            width: 110px;
            height: 110px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .vault-logo {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .pagination-wrap {
            margin-top: 2.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .page-btn {
            border: 1px solid var(--line);
            background: var(--surface-1);
            color: var(--text-main);
            border-radius: 999px;
            padding: 0.65rem 1rem;
            font-weight: 700;
            font-size: 0.9rem;
        }

        .page-btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        .studio-card-light {
            background: var(--surface-1) !important;
            border-color: var(--line) !important;
        }

        .studio-card-light h3 {
            color: var(--text-main) !important;
        }

        .studio-card-light p {
            color: var(--text-soft) !important;
        }

        .studio-preview-light {
            background: var(--surface-2) !important;
            border-color: var(--line) !important;
        }

        .footer-shell {
            background: var(--footer-bg);
            border-top: 1px solid var(--line);
        }

        .footer-link {
            color: var(--text-soft);
        }

        .footer-link:hover {
            color: #7c3aed;
        }

        .app-header .header-nav-link {
            color: color-mix(in oklab, var(--header-text) 80%, transparent) !important;
        }

        .app-header .header-nav-link:hover {
            color: var(--header-text) !important;
        }

        .header-login {
            background: var(--header-btn-bg) !important;
            color: var(--header-btn-text) !important;
            border: 1px solid var(--header-btn-border) !important;
        }

        .header-login:hover {
            filter: brightness(0.95);
        }

        .discover-title,
        .studio-title {
            color: var(--text-main) !important;
        }

        .discover-sub,
        .studio-sub {
            color: var(--text-soft) !important;
        }

        .studio-card-contrast {
            background: var(--surface-2) !important;
            border: 1px solid var(--line) !important;
        }

        .studio-card-contrast h3 {
            color: var(--text-main) !important;
        }

        .studio-card-contrast p {
            color: var(--text-soft) !important;
        }

        .studio-preview-contrast {
            background: var(--surface-3) !important;
            border-color: var(--line) !important;
        }

        .studio-badge {
            background: var(--surface-1) !important;
            border-color: var(--line) !important;
            color: var(--text-main) !important;
        }

        /* Explicit light/dark mapping for runtime-injected top bar and PLS grid */
        html:not(.dark-mode) .app-header {
            background: rgba(24, 24, 27, 0.97) !important;
            color: #ffffff !important;
        }

        html:not(.dark-mode) .header-search-shell {
            background: #ffffff !important;
            border-color: #e4e4e7 !important;
        }

        html:not(.dark-mode) .header-search-shell input {
            color: #18181b !important;
        }

        html:not(.dark-mode) .header-login {
            background: #ffffff !important;
            color: #18181b !important;
            border-color: #d4d4d8 !important;
        }

        html:not(.dark-mode) .pls-grid-section {
            background: #ffffff !important;
            border-top: 1px solid #e4e4e7 !important;
            border-bottom: 1px solid #e4e4e7 !important;
        }

        html:not(.dark-mode) .pls-grid-title {
            color: #18181b !important;
        }

        html:not(.dark-mode) .pls-grid-sub {
            color: #71717a !important;
        }

        html:not(.dark-mode) .pls-gc {
            background: #ffffff !important;
            border: 1px solid #e4e4e7 !important;
        }

        html:not(.dark-mode) .pls-gc span {
            color: #18181b !important;
        }

        html:not(.dark-mode) .pls-gc small {
            color: #71717a !important;
            opacity: 0.9 !important;
        }

        html:not(.dark-mode) .pls-grid-pager button {
            background: #ffffff !important;
            color: #18181b !important;
            border: 1px solid #e4e4e7 !important;
        }

        html:not(.dark-mode) .pls-grid-pager span {
            color: #71717a !important;
        }

        html.dark-mode .app-header {
            background: rgba(10, 11, 17, 0.96) !important;
            color: #f4f4f5 !important;
        }

        html.dark-mode .header-search-shell {
            background: #171923 !important;
            border-color: #2f3548 !important;
        }

        html.dark-mode .header-search-shell input {
            color: #f4f4f5 !important;
        }

        html.dark-mode .header-login {
            background: #1f2333 !important;
            color: #f4f4f5 !important;
            border-color: #353c55 !important;
        }

        html.dark-mode .pls-grid-section {
            background: #11131b !important;
            border-top: 1px solid #2a2f3f !important;
            border-bottom: 1px solid #2a2f3f !important;
        }

        html.dark-mode .pls-grid-title {
            color: #f4f4f5 !important;
        }

        html.dark-mode .pls-grid-sub {
            color: #a1a1aa !important;
        }

        html.dark-mode .pls-gc {
            background: #171923 !important;
            border: 1px solid #2f3548 !important;
        }

        html.dark-mode .pls-gc span {
            color: #f4f4f5 !important;
        }

        html.dark-mode .pls-gc small {
            color: #a1a1aa !important;
            opacity: 0.9 !important;
        }

        html.dark-mode .pls-grid-pager button {
            background: #171923 !important;
            color: #f4f4f5 !important;
            border: 1px solid #2f3548 !important;
        }

        html.dark-mode .pls-grid-pager span {
            color: #a1a1aa !important;
        }

        @media (max-width: 1279px) {
            .vault-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        @media (max-width: 900px) {
            .vault-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 640px) {
            body {
                padding-top: 76px;
            }

            .vault-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.8rem;
            }

            .vault-card {
                border-radius: 16px;
                min-height: 184px;
                padding: 0.9rem 0.55rem;
            }

            .vault-logo-wrap {
                width: 96px;
                height: 96px;
            }

            .vault-card h3 {
                font-size: 0.75rem;
                margin-top: 0.45rem;
            }

            .vault-card p {
                font-size: 0.58rem;
                margin-top: 0.25rem;
            }
        }

        /* Gradient Utilities */
        .text-gradient {
            background: linear-gradient(135deg, #7c3aed, #d946ef);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .bg-gradient-brand {
            background: linear-gradient(135deg, #7c3aed, #d946ef);
        }

        /* Premium Interactions & Easing */
        .card-vault {
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            transform: translateY(0);
        }

        .card-vault:hover {
            transform: translateY(-12px);
            box-shadow: 0 25px 50px -12px rgba(124, 58, 237, 0.15), 0 0 0 1px rgba(124, 58, 237, 0.1);
        }

        .img-vault {
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .card-vault:hover .img-vault {
            transform: scale(1.1);
        }

        /* Glassmorphism AI Overlay */
        .ai-overlay {
            opacity: 0;
            backdrop-filter: blur(0px);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .card-vault:hover .ai-overlay {
            opacity: 1;
            backdrop-filter: blur(8px);
        }

        /* Staggered Entrance Animations */
        .stagger-1 {
            animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
        }

        .stagger-2 {
            animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
        }

        .stagger-3 {
            animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
        }

        .stagger-4 {
            animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Hide Scrollbar for clean UI */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #fafafa;
        }

        ::-webkit-scrollbar-thumb {
            background: #e4e4e7;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #d4d4d8;
        }