@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Orbitron:wght@500;700;900&family=Rajdhani:wght@500;600;700&display=swap');

        /* New Header Styles */
        .main-header-structure {
            background: #000;
            display: flex;
            flex-direction: column;
            width: 100%;
            position: relative;
            z-index: 1000;
        }

        .top-bar-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            max-width: 1200px !important;
            margin: 0 auto;
            width: 100%;
        }

        .brand-wrapper {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .brand-link {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            white-space: nowrap;
            /* Prevent wrapping */
        }

        .header-logo {
            display: none;
        }

        .header-title {
            font-family: 'Orbitron', 'Inter', sans-serif !important;
            font-weight: 900;
            font-size: 1.8rem;
            text-transform: uppercase;
            margin: 0;
            color: #fff;
            letter-spacing: 1px;
            line-height: 1;
            text-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
        }

        /* Search Bar Improvements */
        .search-wrapper {
            margin-left: auto;
            max-width: 400px;
            width: 100%;
        }

        .header-search-form {
            display: flex;
            background: rgba(30, 41, 59, 0.8);
            /* Semi-transparent dark */
            border-radius: 8px;
            /* More rounded */
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.2);
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .header-search-form:focus-within {
            border-color: #818cf8;
            /* Indigo accent */
            box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            background: rgba(30, 41, 59, 1);
        }

        .header-search-input {
            background: transparent;
            border: none;
            color: #e2e8f0;
            padding: 10px 18px;
            /* Larger touch target */
            width: 100%;
            outline: none;
            font-size: 0.95rem;
        }

        .header-search-input::placeholder {
            color: #64748b;
        }

        .header-search-btn {
            background: transparent;
            border: none;
            color: #94a3b8;
            padding: 0 20px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .header-search-btn:hover {
            color: #818cf8;
            background: rgba(255, 255, 255, 0.05);
        }

        /* Nav Bar - Unified Color */
        .nav-bar-container {
            background: #3730a3;
            /* Deep indigo/purple background */
            padding: 0;
            height: 48px;
            display: flex;
            align-items: center;
            width: 100%;
            position: relative;
            z-index: 50;
        }

        .nav-bar-container .container-fluid {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            width: 100% !important;
            max-width: 1200px !important;
            margin: 0 auto !important;
            padding: 0 20px !important;
            position: relative;
            z-index: 1;
        }

        .main-nav {
            display: flex;
            gap: 20px;
            height: 100%;
            align-items: center;
        }

        .nav-item {
            color: #e0e7ff;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: capitalize;
            padding: 6px 14px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            transition: all 0.2s;
            background: transparent;
        }

        .nav-item:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        .nav-item.active {
            background: #4f46e5;
            color: #fff;
        }

        .nav-item.active:hover {
            background: #6366f1;
            color: #fff;
        }

        .user-actions {
            display: flex;
            align-items: center;
            gap: 15px;
            position: relative;
            margin-left: auto;
            /* Push it to the right */
        }

        .user-dropdown-trigger {
            color: #fff;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.85rem;
            padding: 6px 14px;
            border-radius: 6px;
            background: rgba(0, 0, 0, 0.2);
            transition: background 0.2s;
            border: 1px solid transparent;
        }

        .user-dropdown-trigger:hover {
            background: rgba(0, 0, 0, 0.35);
        }

        .btn-surprise {
            background: rgba(0, 0, 0, 0.2);
            color: #e0e7ff;
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 0.85rem;
            font-weight: 600;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: all 0.2s;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .btn-surprise:hover {
            background: rgba(0, 0, 0, 0.4);
            color: #fff;
        }


        .user-dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            background: #1e293b;
            border: 1px solid #334155;
            border-radius: 4px;
            width: 200px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            z-index: 1000;
            padding: 5px 0;
            margin-top: 5px;
        }

        .user-dropdown-menu a,
        .user-dropdown-menu button {
            display: block;
            padding: 8px 15px;
            color: #cbd5e1;
            text-decoration: none;
            transition: background 0.2s;
            width: 100%;
            text-align: left;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.9rem;
        }

        .user-dropdown-menu a:hover,
        .user-dropdown-menu button:hover {
            background: #334155;
            color: #fff;
        }

        .dropdown-divider {
            height: 1px;
            background: #334155;
            margin: 5px 0;
        }

        .desktop-only {
            display: inline-flex;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .desktop-only {
                display: none !important;
            }

            .header-title {
                font-size: 1.5rem;
                /* Down from 1.8rem */
            }

            .top-bar-container {
                flex-direction: column;
                gap: 15px;
                padding: 15px 15px 12px;
            }

            .search-wrapper {
                margin-left: 0;
                width: 100%;
                padding: 0;
            }

            .nav-bar-container {
                height: auto;
                min-height: auto;
            }

            .nav-bar-container::before {
                top: 24px;
                /* Keep line locked to the middle of the first row */
            }

            /* The container wraps two rows now */
            .nav-bar-container .container-fluid {
                height: auto;
                flex-direction: column;
                justify-content: flex-start !important;
                gap: 0;
                padding: 0 !important;
                overflow: visible;
            }

            .main-nav {
                width: 100%;
                height: 48px;
                overflow-x: auto;
                white-space: nowrap;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                gap: 12px;
                padding: 0 15px !important;
                -ms-overflow-style: none;
                /* IE and Edge */
                scrollbar-width: none;
                /* Firefox */
            }

            .main-nav::after {
                content: '';
                padding-right: 15px;
                /* Hack to preserve right padding */
            }

            .main-nav::-webkit-scrollbar {
                display: none;
                /* Chrome, Safari and Opera */
            }

            .user-actions {
                width: 100%;
                min-height: 48px;
                margin-left: 0;
                justify-content: space-between;
                flex-wrap: wrap;
                /* allow wrapping on extremely narrow screens */
                padding: 8px 15px;
                background: rgba(0, 0, 0, 0.2);
                border-top: 1px solid rgba(255, 255, 255, 0.05);
                overflow: visible;
                gap: 10px;
            }

            .user-dropdown-menu {
                left: 15px;
                right: auto;
                top: calc(100% + 5px);
                /* Position dynamically below the user-actions height */
                width: calc(100% - 30px);
            }
        }

        /* Hide old elements */
        .header-banner,
        .header-profile-info,
        .page-header {
            display: none !important;
        }

        /* Override Bootstrap Container for 1400px Wide Layout */
        .web-novelas-container .container {
            max-width: 1250px !important;
            padding: 0 15px !important;
        }