* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 :root {
     --purple-main: #7f00d4;
     --purple-dark: #560bad;
     --purple-darker: #3c096c;
     --purple-light: #c9a7eb;
     --purple-glow: rgba(114, 9, 183, 0.4);
     --green-verified: #0cbc87;
     --text-primary: #ffffff;
     --text-secondary: #e9d5ff;
     --text-muted: #999;
     --bg-black: #000000;
     --bg-dark: #0a0118;
     --bg-card: rgba(26, 10, 46, 0.4);
 }

 :root {
     --bg-color: #000;
     --text-color: #e5e5e5;
     --accent-color: #8b5cf6;
     --accent-hover: #9f7aea;
     --dark-panel: #111;
     --border-color: rgba(255, 255, 255, 0.08);
 }

 .hamburger-btn {
     display: none;
 }

 body {
     font-family: 'Inter', sans-serif;
     /* Base font for readability */
     background: var(--bg-black);
     color: var(--text-secondary);
     line-height: 1.6;
     padding-top: 0;
     /* For visibility */
 }

 .noselect {
     -webkit-touch-callout: none;
     /* iOS Safari */
     -webkit-user-select: none;
     /* Safari */
     -khtml-user-select: none;
     /* Konqueror HTML */
     -moz-user-select: none;
     /* Old versions of Firefox */
     -ms-user-select: none;
     /* Internet Explorer/Edge */
     user-select: none;
     /* Non-prefixed version, currently
                                            supported by Chrome, Edge, Opera and Firefox */
 }

 /* ==================== NAVBAR ==================== */
 #navbar-placeholder {
     min-height: 54px;
     width: 100%;
     display: block;
 }

 .navbar {
     position: -webkit-sticky;
     position: sticky;
     top: 0;
     z-index: 1000;
     width: 100%;
     min-height: 54px;
     background: rgba(0, 0, 0, 0.95);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }


 @media (max-width: 900px) {

     #navbar-placeholder,
     .navbar {
         min-height: 56px;
         /* Reservar espacio en Móvil */
     }
 }

 .navbar {
     padding: 0.5rem 0;
 }

 /* Top Promo Banner */
 .promo-banner {
     width: 100%;
     background: linear-gradient(90deg, #560bad, #7209b7, #560bad);
     color: #fff;
     text-align: center;
     padding: 6px 0;
     font-size: 0.75rem;
     font-weight: 700;
     letter-spacing: 0.5px;
     cursor: pointer;
     text-decoration: none;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 10px;
     font-family: 'Plus Jakarta Sans', sans-serif;
     background-size: 200% 100%;
     animation: gradientMove 5s infinite alternate;
 }

 @keyframes gradientMove {
     0% {
         background-position: 0% 50%;
     }

     100% {
         background-position: 100% 50%;
     }
 }

 .promo-banner:hover {
     opacity: 1;
     filter: brightness(1.1);
 }

 .promo-banner:hover i {
     transform: translateX(4px);
 }

 .promo-banner i {
     transition: transform 0.2s;
 }

 .navbar-container {
     max-width: 1400px;
     margin: auto;
     padding: 0 1.5rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 2rem;
 }

 /* Prevent text selection on interactive navbar elements */
 .navbar-brand,
 .nav-links a,
 .navbar-right,
 .user-trigger,
 .nav-icon-btn,
 .currency-dropdown {
     user-select: none;
     -webkit-user-select: none;
 }

 .logo {
     font-size: 1.25rem;
     font-weight: 900;
     letter-spacing: 1px;
     flex-shrink: 0;
 }

 .logo a {
     color: #fff;
     text-decoration: none;
     display: flex;
     align-items: center;
     gap: 0.5rem;
     transition: opacity 0.3s;
 }

 .navbar-center {
     display: flex;
     align-items: center;
     gap: 1.5rem;
     flex: 1;
 }

 .navbar-links {
     display: flex;
     list-style: none;
     gap: 0.25rem;
     align-items: center;
 }

 .navbar-links li {
     position: relative;
 }

 .navbar-links>li>a {
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     font-size: 0.8125rem;
     font-weight: 600;
     letter-spacing: 0.3px;
     padding: 0.5rem 0.875rem;
     border-radius: 6px;
     display: flex;
     align-items: center;
     gap: 0.375rem;
     cursor: pointer;
     white-space: nowrap;
     user-select: none;
     /* Prevent text selection on click */
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
 }

 .navbar-links>li>a:hover,
 .navbar-links>li>a.active {
     color: #fff;
     background: rgba(255, 255, 255, 0.05);
 }

 .navbar-links>li>a i.bi-chevron-down {
     font-size: 0.6rem;
     transition: transform 0.3s;
 }

 .navbar-links>li.dropdown-active>a i.bi-chevron-down {
     transform: rotate(180deg);
 }

 .nav-badge {
     background: linear-gradient(135deg, #7209b7, #560bad);
     color: #fff;
     font-size: 0.5rem;
     padding: 0.125rem 0.375rem;
     border-radius: 3px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-left: 0.25rem;
 }

 .dropdown-menu {
     position: absolute;
     top: calc(100% + 0.5rem);
     left: 0;
     background: #080808 !important;
     /* Force solid background */
     backdrop-filter: none !important;
     /* Disable any transparency effect */
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 10px;
     padding: 0.5rem;
     min-width: 240px;
     opacity: 0;
     visibility: hidden;
     transform: translateY(-10px);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 10px 40px rgba(0, 0, 0, 1);
     /* Intense shadow for separation */
     z-index: 1001;
 }

 .dropdown-active .dropdown-menu {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .dropdown-menu.dropdown-large {
     min-width: 440px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 0.5rem;
 }

 .dropdown-section {
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
 }

 /* Mega Menu Compact Links (No Icon, No Desc) */
 .mega-nav-link {
     display: flex;
     align-items: center;
     padding: 6px 0;
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     font-size: 0.9rem;
     transition: all 0.2s;
 }

 .mega-nav-link:hover {
     color: #fff;
     transform: translateX(4px);
 }

 .mega-nav-link i {
     margin-right: 8px;
     font-size: 0.85rem;
     color: #666;
 }

 /* Layout for Mega Menu Columns - Widened for proper breathing room */
 .dropdown-menu.mega-columns {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
     /* Increased gap */
     min-width: 520px;
     /* Increased width to fix "weird" cramping */
     padding: 12px;
 }

 .mega-column-box {
     background: rgba(255, 255, 255, 0.03);
     border-radius: 12px;
     padding: 12px;
     /* Compact padding */
     border: 1px solid rgba(255, 255, 255, 0.05);
     height: 100%;
 }

 /* Adjust hover effect for items inside box - Consolidated & Compact */
 .mega-column-box .mega-nav-link {
     padding: 6px 10px;
     /* Compact padding like profile */
     border-radius: 6px;
     margin-bottom: 1px;
     font-size: 0.85rem;
     /* Smaller font */
 }

 .mega-column-box .mega-nav-link:hover {
     background: rgba(255, 255, 255, 0.08);
     /* Clean White Tint */
     color: #fff;
     transform: none;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }

 .mega-nav-link i {
     margin-right: 8px;
     font-size: 0.85rem;
     color: #888;
     /* Standard Grey Icon Color */
     transition: color 0.2s;
 }

 .mega-nav-link:hover i {
     color: #fff;
     /* White on hover */
 }

 .dropdown-section-title {
     font-size: 0.625rem;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.5);
     font-weight: 700;
     letter-spacing: 1px;
     padding: 0.375rem 0.75rem 0.125rem;
 }

 .dropdown-item {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.625rem 0.75rem;
     color: rgba(255, 255, 255, 0.75);
     text-decoration: none;
     border-radius: 6px;
     transition: all 0.2s;
     font-size: 0.8125rem;
     font-weight: 500;
 }

 .dropdown-item:hover {
     background: rgba(255, 255, 255, 0.08);
     /* Clean White Tint */
     color: #fff;
 }

 /* Ensure icon turns white on hover to match Recursos */
 .dropdown-item:hover i {
     color: #fff !important;
 }

 .dropdown-item i {
     font-size: 1rem;
     color: #888;
     /* Changed from Purple to Grey to match Recursos defaults */
     width: 18px;
     text-align: center;
     flex-shrink: 0;
     transition: color 0.2s;
 }

 .dropdown-item-content {
     flex: 1;
 }

 .dropdown-item-title {
     font-size: 0.8125rem;
     font-weight: 600;
     color: #fff;
 }

 .dropdown-item-desc {
     font-size: 0.6875rem;
     color: rgba(255, 255, 255, 0.5);
     margin-top: 0.125rem;
 }

 .dropdown-divider {
     height: 1px;
     background: rgba(255, 255, 255, 0.08);
     margin: 0.375rem 0;
     grid-column: 1 / -1;
 }

 .navbar-right {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     flex-shrink: 0;
 }

 .navbar-login-link {
     color: rgba(255, 255, 255, 0.75);
     text-decoration: none;
     font-size: 0.8125rem;
     font-weight: 600;
     padding: 0.5rem 0.75rem;
     border-radius: 6px;
     transition: all 0.3s;
     white-space: nowrap;
 }

 .navbar-login-link:hover {
     color: #fff;
     background: rgba(255, 255, 255, 0.05);
 }

 .btn-join {
     background: linear-gradient(135deg, #7209b7 0%, #560bad 100%);
     color: #fff;
     padding: 0.5rem 1.25rem;
     border-radius: 8px;
     text-decoration: none;
     font-size: 0.8125rem;
     font-weight: 700;
     transition: all 0.3s;
     display: flex;
     align-items: center;
     gap: 0.375rem;
     border: none;
     cursor: pointer;
     letter-spacing: 0.3px;
     white-space: nowrap;
 }

 .btn-join:hover {
     background-color: #6d28d9;
     /* Slight darkening only */
     transform: translateY(0);
     /* Remove jump */
     box-shadow: none;
     /* Remove intense glow, keep it clean */
 }

 .navbar-icon-button {
     background: transparent;
     border: 1px solid rgba(255, 255, 255, 0.12);
     color: rgba(255, 255, 255, 0.75);
     width: 36px;
     height: 36px;
     border-radius: 8px;
     font-size: 1rem;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s;
     text-decoration: none;
     position: relative;
     user-select: none;
     -webkit-user-select: none;
 }

 .navbar-icon-button:hover {
     color: #fff;
     background: rgba(255, 255, 255, 0.05);
     border-color: rgba(255, 255, 255, 0.2);
 }

 .menu-toggle {
     display: none;
     background: none;
     border: none;
     color: #fff;
     font-size: 1.25rem;
     cursor: pointer;
     padding: 0.5rem;
 }

 .btn-nav-primary {
     background: var(--purple-main) !important;
     color: var(--text-primary) !important;
     background-image: linear-gradient(135deg, var(--purple-main), var(--purple-dark)) !important;
     border-radius: 8px !important;
     transition: all 0.3s !important;
     display: inline-flex !important;
     align-items: center !important;
     justify-content: center !important;
     text-align: center !important;
     padding: 0.5rem 1rem !important;
     border: none !important;
     line-height: 1.2 !important;
     min-width: auto !important;
     width: auto !important;
     white-space: nowrap !important;
     height: 36px !important;
     position: relative;
     overflow: hidden;
     vertical-align: middle !important;
     margin: 0 !important;
 }

 .btn-nav-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 30px rgba(114, 9, 183, 0.7);
 }

 @media (max-width: 1024px) {
     .navbar-links {
         display: none;

     }
 }

 /* ESTO ES EL NAV BAR GENERAL 


  /* ==================== DASHBOARD NAVBAR CSS ==================== */
 /* ---------- NOTIFICATION DROPDOWN ---------- */
 .notification-dropdown {
     position: relative;
 }

 .notification-badge {
     position: absolute;
     top: -6px;
     right: -6px;
     background: #ffffff;
     /* White */
     color: #000000;
     /* Black text */
     font-size: 11px;
     font-weight: 800;
     min-width: 18px;
     height: 18px;
     padding: 0 4px;
     /* Allow widening for 10+ */
     border-radius: 9px;
     /* Pill shape */
     display: none;
     align-items: center;
     justify-content: center;
     border: 2px solid #000;
     /* Dark border to separate from icon */
     z-index: 10;
     /* No animation, purely static */
 }

 /* MATCHING STYLE FOR CART BADGE */
 .cart-label-count {
     position: absolute;
     top: -6px;
     right: -6px;
     background: #ffffff;
     color: #000000;
     font-size: 11px;
     font-weight: 800;
     min-width: 18px;
     height: 18px;
     padding: 0 4px;
     border-radius: 9px;
     display: none;
     align-items: center;
     justify-content: center;
     border: 2px solid #000;
     z-index: 10;
 }

 .notification-menu {
     position: absolute;
     top: calc(100% + 12px);
     right: 0;
     background: #080808 !important;
     /* Total Black */
     border: 1px solid rgba(255, 255, 255, .1);
     border-radius: 12px;
     padding: 12px;
     min-width: 350px;
     max-width: 400px;
     opacity: 0;
     visibility: hidden;
     transform: translateY(-10px);
     transition: all 0.3s ease;
     box-shadow: 0 10px 40px rgba(0, 0, 0, .9);
     backdrop-filter: none !important;
     /* No see-through */
     z-index: 1001;
     overflow: visible !important;
 }

 .notification-dropdown.active .notification-menu {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .notification-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 8px 12px 14px;
     border-bottom: 1px solid rgba(255, 255, 255, .08);
     margin-bottom: 8px;
 }

 .notification-header h3 {
     font-size: 0.95rem;
     font-weight: 700;
     color: #fff;
 }

 .mark-read-btn {
     font-size: 0.75rem;
     color: #8b5cf6;
     background: none;
     border: none;
     cursor: pointer;
     font-weight: 600;
 }

 /* Target by ID for specificity */
 #notification-list {
     max-height: 260px !important;
     overflow-y: auto;
     overflow-x: hidden !important;
     /* KILL THE SCROLLBAR */
     padding: 0;
     margin: 0;
     scrollbar-width: thin;
     scrollbar-color: #333 transparent;
     position: relative;
 }

 /* Custom Scrollbar (Webkit) */
 #notification-list::-webkit-scrollbar {
     width: 4px;
 }

 #notification-list::-webkit-scrollbar-track {
     background: transparent;
 }

 #notification-list::-webkit-scrollbar-thumb {
     background: #444;
     border-radius: 4px;
 }

 #notification-list::-webkit-scrollbar-thumb:hover {
     background: #666;
 }

 #notification-list::-webkit-scrollbar-button {
     display: none;
 }

 .notification-list::-webkit-scrollbar-button {
     display: none;
 }

 .notification-item {
     display: flex;
     gap: 8px;
     padding: 8px 10px;
     /* Increased breathing room */
     border-radius: 10px;
     /* Match newer styling */
     transition: background-color 0.1s;
     cursor: pointer;
     position: relative;
     text-decoration: none;
     margin-bottom: 4px;
     /* Separation between items */
     border-bottom: none;
 }

 .notification-item:last-child {
     margin-bottom: 0;
 }

 .notification-item:hover {
     background-color: rgba(255, 255, 255, 0.05);
     transform: none;
 }

 .notification-item {
     position: relative !important;
     /* Ensure dots align to item edge */
 }

 /* View All Link Style */
 .notif-view-all {
     font-size: 0.75rem;
     color: #888;
     text-decoration: none;
     font-weight: 500;
     transition: color 0.2s;
 }

 .notif-view-all:hover {
     color: #fff;
     text-decoration: underline;
 }

 .notification-item.unread {
     background: transparent !important;
     /* Remove background, Blue Dot Only */
 }

 .notification-item.unread:hover {
     background-color: rgba(255, 255, 255, 0.05) !important;
     /* Restore Hover Effect Forcefully */
 }

 /* BLUE DOT INDICATOR */
 .notification-item.unread::after {
     content: '';
     position: absolute;
     right: 14px;
     top: 50%;
     transform: translateY(-50%);
     width: 8px;
     height: 8px;
     background-color: #3b82f6;
     /* BeatStars Blue */
     border-radius: 50%;
     box-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
 }

 .notif-icon {
     width: 28px;
     height: 28px;
     border-radius: 6px;
     background: #222;
     color: #ccc;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     font-size: 0.75rem;
     border: 1px solid #333;
 }

 .notif-content {
     flex: 1;
 }

 .notif-title {
     font-size: 0.75rem;
     font-weight: 600;
     color: #fff;
     margin-bottom: 0;
 }

 .notif-message {
     font-size: 0.7rem;
     color: #999;
     line-height: 1.2;
     margin-bottom: 2px;
 }

 .notif-time {
     font-size: 0.65rem;
     color: #666;
 }

 /* Notification Options (Hover Menu) */
 .notif-options {
     position: relative;
     opacity: 0;
     transition: opacity 0.2s;
     margin-left: auto;
     align-self: flex-start;
 }

 .notification-item:hover .notif-options {
     opacity: 1;
 }

 /* Dots removed, now using hover trash */
 #notification-list .notif-options-hover {
     position: absolute !important;
     right: 12px !important;
     top: 50% !important;
     transform: translateY(-50%) !important;
     opacity: 0;
     transition: opacity 0.2s ease, transform 0.2s ease;
     z-index: 2000;
 }

 .notification-item:hover .notif-options-hover {
     opacity: 1;
 }

 .notif-delete-btn-inline {
     background: transparent;
     border: none;
     color: #555;
     /* Neutral initially */
     cursor: pointer;
     padding: 8px;
     font-size: 1.1rem;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     transition: all 0.2s;
 }

 .notif-delete-btn-inline:hover {
     color: #ef4444;
     /* Red on hover */
     background: rgba(239, 68, 68, 0.1);
     transform: scale(1.1);
 }

 /* Dots at the absolute edge */
 #notification-list .notif-options {
     position: absolute !important;
     right: 12px !important;
     top: 50% !important;
     transform: translateY(-50%) !important;
     margin-right: 0 !important;
     z-index: 2000;
 }

 /* Floating menu - Base styles (Fixed positioning is handled by JS) */
 #notification-list .notif-menu {
     position: fixed !important;
     background: #1a1a1a !important;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 8px;
     padding: 4px;
     min-width: 110px;
     display: none;
     opacity: 1 !important;
 }

 #notification-list .notif-menu.active {
     display: block !important;
 }

 .notif-opt-btn {
     background: transparent;
     border: none;
     color: #888;
     cursor: pointer;
     padding: 4px 6px;
     font-size: 1rem;
     border-radius: 4px;
 }

 .notif-opt-btn:hover {
     color: #fff;
     background: rgba(255, 255, 255, 0.1);
 }

 .notif-menu {
     position: absolute;
     right: 0;
     top: 100%;
     background: #1a1a1a;
     border: 1px solid #333;
     border-radius: 6px;
     padding: 2px;
     display: none;
     min-width: 90px;
     z-index: 100;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
 }

 .notif-menu.dropdown-right {
     position: absolute;
     /* Styles handled above for specific #notification-list case */
 }

 .notif-menu.active {
     display: block;
 }

 .notif-menu button {
     background: transparent;
     border: none;
     color: #ccc;
     font-size: 0.7rem;
     padding: 6px 10px;
     width: 100%;
     text-align: left;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 6px;
     border-radius: 4px;
 }

 .notif-menu button:hover {
     background: #2a2a2a;
     color: #ef4444;
     /* Red for delete */
 }

 /* Botones de acción en notificación */
 .notif-actions {
     display: flex;
     gap: 8px;
     margin-top: 8px;
 }

 .notif-btn.accept {
     background: #8b5cf6;
     color: #fff;
 }

 .notif-btn.accept:hover {
     background: #7c3aed;
 }

 .notif-btn.reject {
     background: rgba(255, 255, 255, .05);
     color: #999;
     border: 1px solid rgba(255, 255, 255, .1);
 }

 .notif-btn.reject:hover {
     background: rgba(255, 255, 255, .08);
     color: #fff;
 }

 .notif-empty {
     padding: 40px 20px;
     text-align: center;
     color: #666;
     font-size: 0.85rem;
 }

 .user-dropdown {
     position: relative;
 }

 .user-dropdown-menu {
     position: absolute;
     top: calc(100% + 12px);
     right: 0;
     background: rgba(20, 20, 20, .98);
     border: 1px solid rgba(255, 255, 255, .1);
     border-radius: 12px;
     padding: 12px;
     min-width: 260px;
     opacity: 0;
     visibility: hidden;
     transform: translateY(-10px);
     transition: all .3s ease;
     box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
     backdrop-filter: blur(20px);
     z-index: 1001;
 }

 .user-dropdown.active .user-dropdown-menu {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 /* Arreglo para que no haga scroll y se vea flotante limpio */
 .user-dropdown-menu {
     max-height: 85vh;
     /* Por si la pantalla es muy pequeña */
     overflow-y: hidden;
 }

 .user-dropdown-header {
     padding: 12px;
     border-bottom: 1px solid rgba(255, 255, 255, .08);
     margin-bottom: 8px;
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .user-dropdown-avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: #333;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: 1rem;
     color: #666;
 }

 .user-dropdown-info {
     flex: 1;
 }

 .user-dropdown-name {
     font-weight: 600;
     color: #fff;
     font-size: .9rem;
     margin-bottom: 2px;
 }

 .user-dropdown-email {
     font-size: .75rem;
     color: #666;
 }

 /* Wavs Style Grid */
 .user-dropdown-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 8px;
     margin-bottom: 12px;
     padding-bottom: 12px;
     border-bottom: 1px solid rgba(255, 255, 255, .08);
 }

 .user-dropdown-grid-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: 10px;
     padding: 12px 8px;
     text-decoration: none;
     transition: all 0.2s;
     color: #ccc;
     gap: 6px;
 }

 .user-dropdown-grid-item:hover {
     background: rgba(139, 92, 246, 0.1);
     border-color: rgba(139, 92, 246, 0.3);
     color: #fff;
     transform: translateY(-2px);
 }

 .user-dropdown-grid-item i {
     font-size: 1.2rem;
     color: #8b5cf6;
     margin-bottom: 2px;
 }

 .user-dropdown-grid-item span {
     font-size: 0.7rem;
     font-weight: 600;
 }

 /* Adjusted List Items */
 .user-dropdown-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 10px 12px;
     color: #999;
     text-decoration: none;
     font-size: .85rem;
     border-radius: 8px;
     transition: all .2s;
     font-weight: 500;
 }

 /* Remove old specific icon style to avoid conflict if needed, 
           but we keep the color logic */
 .user-dropdown-item i {
     width: 20px;
     text-align: center;
     color: #8b5cf6;
     /* Brand Purple */
 }

 .user-dropdown-item .soon-badge {
     margin-left: auto;
     background: rgba(255, 255, 255, .08);
     color: #666;
     padding: 2px 8px;
     border-radius: 8px;
     font-size: .6rem;
     font-weight: 600;
     text-transform: uppercase;
 }

 .user-dropdown-item.logout {
     color: #ef4444;
     margin-top: 8px;
     border-top: 1px solid rgba(255, 255, 255, .08);
     padding-top: 12px;
 }

 .user-dropdown-item.logout:hover {
     background: rgba(239, 68, 68, .1);
 }

 /* OVERRIDE AUTH-UI.CSS DEFAULTS FOR ANALYSIS */
 /* Since we don't have the JS running to add 'user-authenticated' class to body, 
           we must manually correct the visibility for this analysis file. */
 .logged-in {
     display: flex !important;
 }

 .logged-out {
     display: none !important;
 }

 /* Wavs Navbar Icons */
 .nav-icon-btn {
     width: 42px;
     height: 42px;
     border-radius: 50%;
     background: #232323;
     /* Dark Grey Background */
     border: none;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #ccc;
     font-size: 1.1rem;
     cursor: pointer;
     transition: all 0.2s ease;
     position: relative;
     /* For tooltip */
     text-decoration: none;
     margin: 0 4px;
 }

 .nav-icon-btn:hover {
     background: #333;
     color: #fff;
     transform: translateY(-1px);
 }

 /* Tooltip (White box below) */
 .nav-icon-btn::after {
     content: attr(data-label);
     position: absolute;
     top: 120%;
     left: 50%;
     transform: translateX(-50%) translateY(-5px);
     background: #e5e5e5;
     color: #000;
     padding: 5px 10px;
     border-radius: 6px;
     font-size: 0.75rem;
     font-weight: 600;
     white-space: nowrap;
     opacity: 0;
     visibility: hidden;
     transition: all 0.2s ease;
     pointer-events: none;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     z-index: 1000;
 }

 .nav-icon-btn:hover::after,
 .user-trigger:hover::after {
     opacity: 1;
     visibility: visible;
     transform: translateX(-50%) translateY(0);
 }

 /* Tooltip (Shared rule for Avatar) */
 .user-trigger::after {
     content: attr(data-label);
     position: absolute;
     top: 120%;
     left: 50%;
     transform: translateX(-50%) translateY(-5px);
     background: #e5e5e5;
     color: #000;
     padding: 5px 10px;
     border-radius: 6px;
     font-size: 0.75rem;
     font-weight: 600;
     white-space: nowrap;
     opacity: 0;
     visibility: hidden;
     transition: all 0.2s ease;
     pointer-events: none;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     z-index: 1000;
 }

 /* Upload Button (Purple Pill) */
 .btn-upload {
     background: #8b5cf6;
     color: white;
     padding: 8px 20px;
     border-radius: 50px;
     font-size: 0.85rem;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.2s;
     margin-left: 8px;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .btn-upload:hover {
     background: #7c3aed;
     color: white;
     /* Removed scale and large shadow for subtler feel */
 }

 /* Updated Minimalist Navbar Dimensions */
 .navbar {
     padding: 0.4rem 0;
     /* Slimmer vertical padding */
 }

 .logo img {
     height: 32px !important;
     /* Smaller logo */
 }

 /* Wavs Navbar Icons - Scaled down for minimalism */
 .nav-icon-btn {
     width: 36px;
     height: 36px;
     font-size: 1rem;
     margin: 0 4px;
 }

 /* Upload Button - Scaled down */
 .btn-upload {
     padding: 6px 16px;
     font-size: 0.8rem;
 }

 /* Avatar Container & Image Fix */
 .user-dropdown-avatar-lg,
 .user-avatar-placeholder {
     position: relative;
     overflow: hidden;
     /* Ensure nothing spills out */
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .user-dropdown-avatar-lg img,
 .user-avatar-placeholder img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     border-radius: 50%;
     /* Force circle on image too */
 }

 /* Adjust Avatar within smaller circle */
 .user-dropdown-avatar {
     width: 28px !important;
     height: 28px !important;
     font-size: 0.8rem !important;
 }

 /* Wavs Dropdown Redesign */
 .user-dropdown-menu {
     width: 320px;
     background: #141414;
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 16px;
     padding: 16px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
 }

 .user-dropdown-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-bottom: 16px;
     border-bottom: none;
     margin-bottom: 0;
 }

 .dropdown-user-info-group {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .user-dropdown-avatar-lg {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: #333;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
     color: #fff;
 }

 .dropdown-user-text h4 {
     margin: 0;
     font-size: 0.95rem;
     color: #fff;
     font-weight: 600;
 }

 .dropdown-user-text span {
     font-size: 0.75rem;
     color: #888;
 }

 .btn-subscribe-sm {
     background: #8b5cf6;
     color: white;
     font-size: 0.7rem;
     padding: 4px 12px;
     border-radius: 20px;
     text-decoration: none;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 4px;
 }

 .btn-subscribe-sm:hover {
     background: #7c3aed;
     color: white;
 }

 /* Wavs Grid Cards */
 .w-grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 8px;
     margin-bottom: 16px;
 }

 .w-grid-item {
     background: #222;
     border-radius: 12px;
     padding: 16px 8px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 8px;
     text-decoration: none;
     color: #ccc;
     transition: all 0.2s;
 }

 .w-grid-item:hover {
     background: #2a2a2a;
     color: #fff;
     transform: translateY(-2px);
 }

 .w-grid-item i {
     font-size: 1.2rem;
     color: #fff;
     opacity: 0.8;
 }

 .w-grid-item span {
     font-size: 0.7rem;
     font-weight: 600;
 }

 /* Wavs List */
 .w-list-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 8px 12px;
     color: #bbb;
     text-decoration: none;
     font-size: 0.8rem;
     border-radius: 8px;
     transition: all 0.2s;
     font-weight: 500;
 }

 .w-list-item:hover {
     background: rgba(255, 255, 255, 0.05);
     color: #fff;
 }

 .w-list-item i {
     width: 20px;
     text-align: center;
     font-size: 0.9rem;
     color: #888;
 }

 .w-list-item:hover i {
     color: #fff;
 }

 .w-list-item.new-badge::after {
     content: 'NEW';
     background: #14b8a6;
     color: #000;
     font-size: 0.6rem;
     padding: 1px 4px;
     border-radius: 4px;
     font-weight: 800;
     margin-left: auto;
 }


 /* ESTO ES LA PARTE DE PERFIL Y OTRAS MAS PARTE 2

       <style>
          /* Focus & Glow Effects */
 .navbar-search {
     width: 500px !important;
     max-width: 500px !important;
     position: relative;
 }

 /* FIX: Ensure search is above overlay when active */
 .navbar-search.focused {
     z-index: 1002;
 }

 .navbar-search.focused input,
 .navbar-search input:focus {
     background: #0a0a0a;
     border-color: #333 !important;
     box-shadow: none !important;
 }

 /* Filter Trigger Hover & Active */
 .search-filter-trigger {
     transition: all 0.2s;
 }

 .search-filter-trigger:hover {
     /* User requested to remove hover effect */
     background: transparent !important;
 }

 /* 1. FILTER SELECTION FEEDBACK (Ensured) */
 /* 1. FILTER SELECTION FEEDBACK (Neutral) */
 .search-filter-trigger.active-filter {
     border: 1px solid rgba(255, 255, 255, 0.2) !important;
     background: rgba(255, 255, 255, 0.05) !important;
 }

 .search-filter-trigger.active-filter span {
     color: #fff !important;
 }

 /* Dropdown Items */
 .search-filter-item {
     padding: 8px 12px;
     border-radius: 6px;
     color: #bbb;
     font-size: 0.8rem;
     cursor: pointer;
     transition: all 0.2s;
     position: relative;
     margin-bottom: 4px;
     /* Added spacing to prevent touching */
 }

 .search-filter-item:hover {
     background: rgba(255, 255, 255, 0.08);
     /* Unified White Tint */
     color: #fff;
 }

 /* Selected Indicator */
 .search-filter-item.selected {
     color: #fff;
     background: rgba(255, 255, 255, 0.1);
     /* Neutral White Tint */
 }

 .search-filter-item.selected::before {
     content: '';
     position: absolute;
     left: 0;
     top: 6px;
     bottom: 6px;
     width: 3px;
     background: #fff;
     /* White Bar */
     border-radius: 0 4px 4px 0;
 }

 /* Trend Tags */
 .trend-tag {
     background: rgba(255, 255, 255, 0.05);
     padding: 6px 12px;
     border-radius: 20px;
     font-size: 0.8rem;
     color: #bbb;
     cursor: pointer;
     transition: all 0.2s;
     border: 1px solid transparent;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .trend-tag i {
     font-size: 0.75rem;
     color: #8b5cf6;
 }

 .trend-tag:hover {
     background: rgba(139, 92, 246, 0.1);
     border-color: rgba(139, 92, 246, 0.3);
     color: #fff;
     /* Removed transform to prevent growing */
 }


 /* 3. CURRENCY ITEM SELECTION */
 .currency-item {
     transition: all 0.2s;
     position: relative;
     border-radius: 6px;
     margin-bottom: 2px;
 }

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

 .currency-item.selected {
     background: rgba(255, 255, 255, 0.15) !important;
     color: #fff !important;
     font-weight: 600 !important;
 }

 /* Chevron Rotation */
 .dropdown-active .bi-chevron-down,
 .active .bi-caret-down-fill {
     transform: rotate(180deg);
     transition: transform 0.3s ease;
 }

 /* Specific for Currency Button Chevron separate from parent class if needed */
 #currency-toggle-btn.active-currency i {
     transform: rotate(180deg);
 }

 /* 4. CURRENCY DROPDOWN TRANSITION */
 #currency-menu {
     /* Base State (Hidden) */
     opacity: 0;
     visibility: hidden;
     transform: translateY(-10px);
     /* Start slightly ABOVE */
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     display: flex !important;
     /* Always display flex for layout, toggle vis/opacity */
     /* Override generic display:none from inline styles or JS if necessary */
 }

 #currency-menu.active {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
     /* Drops DOWN to position */
 }

 /* Chevron Rotation sync with parent (handled by JS active class on button) */
 #currency-toggle-btn i {
     transition: transform 0.3s ease;
 }

 /* 5. USER AVATAR (Initial + Online Status) */
 .user-avatar-placeholder {
     width: 38px;
     height: 38px;
     background: #1f1f1f;
     color: #bbb;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 600;
     font-size: 1rem;
     border: 1px solid rgba(255, 255, 255, 0.1);
     position: relative;
 }

 /* Green status dot removed as requested */
 /*
.user-avatar-placeholder::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: #22c55e;
    border: 2px solid #000;
    border-radius: 50%;
}
*/

 /* 2. CURRENCY HOVER (Transition Added inline in HTML, reinforced here) */
 #currency-toggle-btn:hover {
     color: #fff !important;
     border-radius: 6px;
 }

 /* 1. FILTER SELECTION FEEDBACK */
 /* 1. FILTER SELECTION FEEDBACK (Neutral) */
 .search-filter-trigger.active-filter {
     border: 1px solid rgba(255, 255, 255, 0.2) !important;
     background: rgba(255, 255, 255, 0.05) !important;
 }

 .search-filter-trigger.active-filter span {
     color: #fff !important;
 }

 /* Recent Items removed from here - consolidated at end of file */

 /* Search Overlay */
 #search-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100vh;
     background: rgba(0, 0, 0, 0.5);
     z-index: 999;
     display: none;
     backdrop-filter: blur(2px);
     transition: opacity 0.3s;
 }

 /* Search Results & Skeleton */
 .search-result-item {
     display: flex;
     align-items: center;
     gap: 16px;
     padding: 12px 14px;
     border-radius: 12px;
     cursor: pointer;
     transition: all 0.2s ease;
     border: 1px solid transparent;
     background: transparent;
 }

 .search-result-item:hover,
 .search-result-item.selected {
     background: rgba(255, 255, 255, 0.08);
     border-color: rgba(255, 255, 255, 0.05);
     transform: translateX(4px);
 }

 .result-img {
     width: 48px;
     height: 48px;
     border-radius: 10px;
     background: #252525;
     object-fit: cover;
     flex-shrink: 0;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }

 .result-info {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 4px;
     min-width: 0;
 }

 .result-title {
     font-size: 0.95rem;
     color: #fff;
     font-weight: 600;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     letter-spacing: 0.3px;
 }

 .result-meta {
     font-size: 0.8rem;
     color: #888;
     font-weight: 500;
     color: #888;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 /* Shimmer Skeleton */
 .skeleton {
     background: #222;
     position: relative;
     overflow: hidden;
 }

 .skeleton::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0) 100%);
     transform: skewX(-20deg);
     animation: shimmer 1.5s infinite;
 }

 @keyframes shimmer {
     0% {
         transform: translateX(-150%) skewX(-20deg);
     }

     100% {
         transform: translateX(150%) skewX(-20deg);
     }
 }

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

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

 /* Specific Opaqueness for Search Results Panel */
 #search-trending-panel {
     background: #080808 !important;
     backdrop-filter: none !important;
     border: 1px solid rgba(255, 255, 255, 0.15);
     box-shadow: 0 10px 50px rgba(0, 0, 0, 1) !important;
     border-radius: 12px;
     z-index: 1002 !important;
 }

 /* Search Filter Dropdown Items Style */
 .search-filter-item {
     padding: 8px 12px;
     cursor: pointer;
     transition: all 0.2s ease;
     border-radius: 6px;
     font-size: 0.85rem;
     color: #bbb;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .search-filter-item:hover {
     background: rgba(255, 255, 255, 0.05);
     color: #fff;
 }

 .search-filter-item.selected {
     background: rgba(139, 92, 246, 0.1) !important;
     color: #8b5cf6 !important;
     font-weight: 700;
 }

 /* --- LOGGED OUT BUTTONS --- */
 .navbar-login-link {
     color: #bbb;
     font-size: 0.9rem;
     font-weight: 600;
     text-decoration: none;
     padding: 8px 12px;
     transition: color 0.2s;
 }

 .navbar-login-link:hover {
     color: #fff;
 }

 .btn-join {
     background-color: #7c3aed;
     /* Violet 600 */
     color: #fff;
     font-size: 0.9rem;
     font-weight: 700;
     text-decoration: none;
     padding: 8px 16px;
     border-radius: 8px;
     display: flex;
     align-items: center;
     gap: 6px;
     transition: background-color 0.2s, transform 0.1s;
 }

 .btn-join:hover {
     background-color: #6d28d9;
     /* Violet 700 */
     transform: translateY(-1px);
 }

 .btn-join i {
     font-size: 0.85rem;
 }


 /* ==================== SEARCH HISTORY UI ==================== */
 .recent-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 8px 12px;
     border-radius: 8px;
     color: #bbb;
     cursor: pointer;
     transition: all 0.2s;
     font-size: 0.85rem;
     position: relative;
     min-height: 36px;
 }

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

 .history-delete-btn {
     margin-left: auto;
     color: #666;
     padding: 4px;
     border-radius: 4px;
     font-size: 1.1rem !important;
     transition: all 0.2s;
     opacity: 0;
     pointer-events: none;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .recent-item:hover .history-delete-btn {
     opacity: 1;
     pointer-events: auto;
 }

 .history-delete-btn:hover {
     color: #ef4444 !important;
     background: rgba(239, 68, 68, 0.1);
 }

 .recent-item i.bi-clock-history {
     font-size: 0.9rem;
     opacity: 0.6;
 }

 /* ==================== MOBILE RESPONSIVE (NEW) ==================== */
 .hamburger-btn {
     display: none;
 }

 .nav-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
 }

 @media (max-width: 900px) {
     .navbar-container {
         justify-content: space-between;
         position: relative;
         /* Ensure context */
     }

     .hamburger-btn {
         display: block;
         font-size: 28px;
         background: none;
         border: none;
         color: white;
         cursor: pointer;
         z-index: 20002;
         /* Above everything else */
         position: relative;
     }

     /* OFF-CANVAS MENU — slides from LEFT */
     .nav-container {
         position: fixed;
         top: 0;
         left: -100%;
         right: auto;
         width: 80%;
         max-width: 320px;
         height: 100vh;
         background: #0a0a0a;
         flex-direction: column;
         padding: 65px 20px 40px;
         transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         z-index: 20001;
         box-shadow: 5px 0 25px rgba(0, 0, 0, 0.7);
         justify-content: flex-start;
         align-items: stretch;
     }

     .nav-container.active {
         left: 0;
     }

     /* INTERNAL ELEMENTS ADJUSTMENTS */
     .navbar-center {
         flex-direction: column;
         width: 100%;
         gap: 20px;
         margin-bottom: 20px;
     }

     .navbar-links {
         display: flex !important;
         /* Override previous hide */
         flex-direction: column;
         width: 100%;
         gap: 15px;
         align-items: center;
     }

     .navbar-links>li {
         width: 100%;
         text-align: center;
     }

     .navbar-links>li>a {
         justify-content: center;
         width: 100%;
         font-size: 1.1rem;
         /* Bigger for touch */
         padding: 12px;
     }

     /* MEGA MENU MOBILE TWEAKS */
     .dropdown-menu.mega-columns {
         position: static;
         width: 100%;
         min-width: auto;
         opacity: 1;
         visibility: visible;
         display: none;
         /* Hidden by default, toggled via JS if needed or just show all? */
         /* For simple MVP, let's allow toggle or just show. 
           But usually mobile menus show submenus on click. 
           Existing JS toggleDropdown might work if we adjust CSS.
           For now, let's letting existing JS handle 'dropdown-active'
        */
         box-shadow: none;
         border: none;
         background: transparent !important;
         grid-template-columns: 1fr;
         /* Single column */
         padding: 0;
     }

     .dropdown-active .dropdown-menu {
         display: grid;
         /* Show when active */
     }

     /* SEARCH BAR */
     .navbar-search {
         margin-left: 0 !important;
         width: 100% !important;
         max-width: none !important;
         margin-bottom: 20px;
     }

     /* RIGHT SIDE BUTTONS */
     .navbar-right {
         flex-direction: column;
         gap: 15px;
         width: 100%;
         justify-content: center;
     }

     /* HIDE OLD TOGGLE IF PRESENT */
     .menu-toggle {
         display: none !important;
     }

     /* BACKDROP FOR MOBILE MENU */
     .mobile-menu-backdrop {
         position: fixed !important;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.6);
         backdrop-filter: none;
         z-index: 20000;
         opacity: 0;
         visibility: hidden;
         transition: 0.3s;
         pointer-events: none;
         /* Allow clicks to go through when inactive */
     }

     .mobile-menu-backdrop.active {
         opacity: 1;
         visibility: visible;
         pointer-events: auto;
         /* Catch clicks when active */
     }
 }

 /* === MOVED FROM EXPLORE.CSS === */

 /* === MOBILE MENU (Default Hidden on Desktop) === */
 .mobile-menu-slider-wrapper {
     display: none;
 }

 /* ==================== MOBILE NAVBAR RESPONSIVE ==================== */
 /* Desktop: hide mobile-only elements */
 .mobile-topbar-actions {
     display: none !important;
 }

 .mobile-search-wrapper {
     display: none !important;
 }

 .sidebar-header {
     display: none !important;
 }

 /* Mobile: show mobile elements, rearrange top bar */
 @media (max-width: 900px) {

     /* === TOP BAR LAYOUT === */
     .navbar {
         padding: 0 !important;
         backdrop-filter: none !important;
         /* blur traps fixed children */
         background: #000 !important;
         /* Solid bg since no blur */
     }

     /* Lock body scroll when menu is open */
     body.menu-open {
         overflow: hidden !important;
         /* Avoid shifting content if scrollbar disappears */
         padding-right: var(--scrollbar-width, 0) !important;
     }

     /* Stability for header/search during menu open */
     body.menu-open .navbar {
         z-index: 20005 !important;
     }

     body.menu-open .mobile-search-wrapper {
         z-index: 20004 !important;
     }

     body.menu-open .nav-container {
         z-index: 20010 !important;
         /* Ensure sidebar is above the fixed header elements */
     }

     .navbar-container {
         display: flex !important;
         align-items: flex-start !important;
         /* Top align to prevent centering */
         padding: 8px 12px !important;
         gap: 8px !important;
         flex-wrap: nowrap !important;
         min-height: 56px !important;
         height: 100% !important;
         /* Ensure full height for background */
         position: relative !important;
     }

     .logo {
         display: flex;
         align-items: center;
         justify-content: center;
         margin-left: 4px !important;
     }

     .mobile-logo-img {
         height: 34px !important;
         /* Matching the size of the hamburger menu more closely */
         width: auto !important;
         transform: none !important;
         display: block !important;
     }

     .hamburger-btn {
         z-index: 11;
         display: flex !important;
         align-items: center;
         justify-content: center;
         background: transparent;
         border: none;
         color: #fff;
         cursor: pointer;
     }

     /* === SLIDING MOBILE MENU STYLES === */
     .desktop-menu-only {
         display: none !important;
     }

     .mobile-menu-slider-wrapper {
         display: flex !important;
         /* Override global display:none */
         flex: 1;
         overflow: hidden;
         /* Hide the slide that is out of view */
         position: relative;
         width: 100%;
         margin-top: 0;
         padding-top: 10px;
         /* Moved higher to match reference. Clears header line nicely. */
         /* Spacing below header */
     }

     .mobile-menu-slides {
         display: flex;
         width: 200%;
         min-width: 200%;
         /* Force width */
         flex-shrink: 0;
         /* Prevent shrinking */
         transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
         transform: translateX(0);
         /* Default: Show Main */
     }

     .menu-slide {
         width: 50%;
         flex-shrink: 0;
         display: flex;
         flex-direction: column;
         gap: 4px;
         padding: 0 4px;
         height: 100%;
         padding-bottom: 24px;
         /* Space for improvements */
     }

     /* Link Styles */
     .mobile-menu-link {
         display: flex;
         align-items: center;
         gap: 12px;
         padding: 12px 16px;
         color: #eee;
         text-decoration: none;
         font-size: 0.95rem;
         font-weight: 500;
         border-radius: 8px;
         transition: background 0.2s;
         cursor: pointer;
     }

     .mobile-menu-link:hover,
     .mobile-menu-link:active {
         background: rgba(255, 255, 255, 0.05);
         color: #fff;
     }

     .mobile-menu-link i {
         font-size: 1.1rem;
         color: #888;
         width: 24px;
         text-align: center;
     }

     .mobile-menu-link.secondary {
         color: #aaa;
         font-size: 0.9rem;
     }

     .mobile-menu-link.highlight {
         color: #8b5cf6;
     }

     .mobile-menu-link.highlight i {
         color: #8b5cf6;
     }

     /* Arrow for Drilldown */
     .mobile-menu-link.has-arrow {
         justify-content: space-between;
     }

     .mobile-menu-link.has-arrow span {
         display: flex;
         align-items: center;
         gap: 12px;
     }

     /* Submenu Header (Back Button) */
     .mobile-menu-header {
         display: flex;
         align-items: center;
         gap: 8px;
         padding: 12px 16px;
         margin-bottom: 8px;
         color: #fff;
         font-weight: 700;
         font-size: 1rem;
         cursor: pointer;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }

     .mobile-menu-header i {
         font-size: 1.1rem;
     }

     .mobile-menu-content {
         display: flex;
         flex-direction: column;
         gap: 4px;
     }

     .mobile-menu-link.sub {
         padding-left: 20px;
         font-size: 0.9rem;
     }

     .mobile-section-title {
         font-size: 0.75rem;
         color: #666;
         font-weight: 700;
         text-transform: uppercase;
         margin: 12px 16px 4px;
         letter-spacing: 1px;
     }

     .mobile-menu-divider {
         height: 1px;
         background: rgba(255, 255, 255, 0.05);
         margin: 8px 16px;
     }

     /* Hamburger - leftmost */
     .hamburger-btn {
         order: 1 !important;
         flex-shrink: 0;
         font-size: 24px !important;
         padding: 4px !important;
         margin: 0 !important;
     }

     /* Logo - after hamburger, same visual size as hamburger */
     .navbar-container .logo {
         order: 2 !important;
         flex: 0 0 auto;
         margin: 0 !important;
     }

     .navbar-container .logo img {
         height: 28px !important;
         transform: none !important;
     }

     /* Mobile topbar actions - rightmost */
     .mobile-topbar-actions {
         display: flex !important;
         align-items: center !important;
         gap: 10px !important;
         order: 3 !important;
         margin-left: auto !important;
         flex-shrink: 0;
     }

     /* Guest actions (sign in / join) */
     .mobile-guest-actions {
         align-items: center;
         gap: 8px;
     }

     .mobile-login-link {
         color: #ccc;
         font-size: 0.7rem;
         font-weight: 600;
         text-decoration: none;
         padding: 6px 8px;
         border-radius: 6px;
         transition: all 0.2s;
         white-space: nowrap;
     }

     .mobile-login-link:hover {
         color: #fff;
         background: rgba(255, 255, 255, 0.08);
     }

     .mobile-join-btn {
         background: linear-gradient(135deg, #8b5cf6, #6d28d9);
         color: white;
         font-size: 0.7rem;
         font-weight: 700;
         padding: 6px 12px;
         border-radius: 20px;
         text-decoration: none;
         white-space: nowrap;
         transition: all 0.2s;
     }

     .mobile-join-btn:hover {
         background: linear-gradient(135deg, #9f7aea, #7c3aed);
         transform: translateY(-1px);
     }

     /* Auth actions (avatar, messages, notifications) */
     .mobile-auth-actions {
         display: flex;
         align-items: center;
         gap: 8px;
     }

     .mobile-notif-btn,
     .mobile-cart-btn {
         background: transparent;
         border: none;
         color: #e5e5e5;
         font-size: 1.15rem;
         /* Tweak icon size visually */
         cursor: pointer;
         width: 32px;
         height: 32px;
         padding: 0;
         border-radius: 50%;
         transition: all 0.2s;
         position: relative;
         display: flex;
         align-items: center;
         justify-content: center;
         text-decoration: none;
     }

     .mobile-notif-btn:hover,
     .mobile-cart-btn:hover {
         color: #fff;
         background: rgba(255, 255, 255, 0.05);
     }

     .mobile-notif-badge,
     .mobile-cart-badge {
         position: absolute;
         top: -4px;
         right: -4px;
         background: #ef4444;
         /* Standard red badge */
         color: #fff;
         font-size: 0.55rem;
         font-weight: 700;
         min-width: 16px;
         height: 16px;
         border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
         line-height: 1;
         border: 2px solid #000;
     }

     .mobile-avatar-btn {
         width: 30px;
         /* Slightly smaller than 32px because the circle appears big */
         height: 30px;
         border-radius: 50%;
         background: linear-gradient(135deg, #2b00ff, #0a0066);
         /* Closer to Beatstars blueish gradient or plain black */
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         font-size: 0.85rem;
         font-weight: 700;
         color: #fff;
         overflow: hidden;
         transition: all 0.2s;
         border: 1px solid rgba(255, 255, 255, 0.15);
         /* More visible outline */
     }

     .mobile-avatar-btn:hover {
         box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.4);
     }

     /* Off-canvas: hide everything except nav links (all duplicated in mobile topbar) */
     .nav-container .navbar-search,
     .nav-container .navbar-right {
         display: none !important;
     }

     /* === SIDEBAR HEADER (close + logo) === */
     .sidebar-header {
         display: flex !important;
         align-items: center;
         justify-content: flex-start;
         gap: 12px;
         padding: 14px 16px;
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         z-index: 2;
         border-bottom: 1px solid rgba(255, 255, 255, 0.08);
         background: #0a0a0a;
     }

     .sidebar-logo img {
         height: 28px;
         width: auto;
     }

     .sidebar-close-btn {
         background: none;
         border: none;
         color: #fff;
         font-size: 22px;
         cursor: pointer;
         padding: 2px 4px;
         line-height: 1;
     }

     /* Prevent sidebar scroll from leaking to the page behind */
     .nav-container {
         overscroll-behavior: contain;
     }

     .mobile-search-wrapper {
         display: block !important;
         background: #000;
         padding: 0 16px 12px;
         /* Slightly larger horizontal padding to match reference edges */
         position: relative;
     }

     .mobile-search-inner {
         display: flex;
         align-items: center;
         gap: 8px;
         background: #111;
         /* Opaque dark bg like reference */
         border: 1px solid rgba(255, 255, 255, 0.08);
         border-radius: 8px;
         /* Sharper corners */
         padding: 8px 12px;
         transition: all 0.2s;
     }

     .mobile-search-inner i {
         color: #666;
         font-size: 0.9rem;
     }

     .mobile-search-inner input {
         background: transparent !important;
         border: none !important;
         color: #fff !important;
         font-size: 0.85rem !important;
         /* Smaller text */
         width: 100%;
         outline: none;
         min-height: 24px;
         /* Fix height */
     }

     .mobile-search-inner:focus-within {
         border-color: rgba(139, 92, 246, 0.4);
         box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.1);
     }

     .mobile-search-inner i {
         color: #666;
         font-size: 0.75rem;
         flex-shrink: 0;
     }

     .mobile-search-inner input {
         background: transparent;
         border: none;
         outline: none;
         color: #eee;
         font-size: 16px;
         /* Prevents auto-zoom on iOS */
         width: 100%;
         font-family: inherit;
     }

     .mobile-search-inner input::placeholder {
         color: #555;
     }

     /* Search results: compact on mobile, max 3 visible */
     #search-trending-panel {
         max-height: 220px !important;
         overflow-y: auto !important;
     }

     .search-result-item {
         gap: 10px !important;
         padding: 8px 10px !important;
     }

     .result-img {
         width: 36px !important;
         height: 36px !important;
         border-radius: 8px !important;
     }

     .result-info .result-title {
         font-size: 0.75rem !important;
     }

     .result-info .result-subtitle {
         font-size: 0.65rem !important;
     }

     /* === PROFILE DROPDOWN ON MOBILE === */
     .user-dropdown-menu.show {
         display: block !important;
         position: fixed !important;
         top: 56px !important;
         right: 8px !important;
         left: auto !important;
         width: calc(100vw - 16px) !important;
         max-width: 360px !important;
         max-height: calc(100vh - 70px) !important;
         overflow-y: auto !important;
         z-index: 100001 !important;
         border-radius: 16px !important;
         box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
     }

 }