/* ================= CSS VARIABLES ================= */

        @font-face {
            font-family: 'Rabar021';
            src: url('../../fonts/rabar_021.ttf?v=20260330h') format('truetype');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }

        :root {
            --primary: #6200ea;
            --secondary: #3700b3;
            --accent: #00e676;
            --danger: #ff1744;
            --warning: #ff9800;
            --dark: #121212;
            --light: #f5f5f7;
            --white: #ffffff;
            --gray: #757575;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
            --shadow-md: 0 8px 16px rgba(0,0,0,0.15);
            --radius: 16px;
            --font-main: 'Rabar021', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne Color", sans-serif;
            --scroll-track: rgba(17, 24, 39, 0.12);
            --scroll-thumb: linear-gradient(135deg, #7d5bff 0%, #00d4ff 100%);
            --scroll-thumb-border: rgba(255, 255, 255, 0.55);
            --scroll-size: 10px;
            --motion-fast: 140ms;
            --motion-medium: 220ms;
            --motion-slow: 340ms;
            --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
            --motion-enter-distance: 14px;
            --motion-lift-sm: -2px;
            --motion-lift-md: -4px;
            --motion-press-scale: 0.985;
            --liquid-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(239, 244, 255, 0.82));
            --liquid-glass-bg-strong: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(238, 244, 255, 0.9));
            --liquid-glass-border: rgba(104, 124, 191, 0.26);
            --liquid-glass-shadow: 0 10px 24px rgba(41, 55, 98, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.82);
            --liquid-glass-sheen: rgba(255, 255, 255, 0.52);
            --liquid-glass-blob-a: rgba(158, 115, 255, 0.24);
            --liquid-glass-blob-b: rgba(86, 190, 255, 0.22);
        }

        * {
            scrollbar-width: thin;
            scrollbar-color: #7d5bff var(--scroll-track);
        }

        img, video, iframe {
            max-width: 100%;
        }

        html {
            scroll-behavior: smooth;
        }
        *::-webkit-scrollbar {
            width: var(--scroll-size);
            height: var(--scroll-size);
        }

        *::-webkit-scrollbar-track {
            background: var(--scroll-track);
            border-radius: 999px;
        }

        *::-webkit-scrollbar-thumb {
            background: var(--scroll-thumb);
            border-radius: 999px;
            border: 2px solid var(--scroll-thumb-border);
            background-clip: padding-box;
        }

        *::-webkit-scrollbar-thumb:hover {
            filter: brightness(1.08);
        }

        *::-webkit-scrollbar-button {
            display: none;
            width: 0;
            height: 0;
        }
        
        /* ================= DARK MODE - COMPLETE ================= */
        body.dark-mode {
            background:
                radial-gradient(circle at 18% 14%, rgba(170, 136, 255, 0.26), transparent 38%),
                radial-gradient(circle at 82% 18%, rgba(128, 98, 242, 0.22), transparent 36%),
                radial-gradient(circle at 50% 84%, rgba(96, 66, 204, 0.2), transparent 40%),
                linear-gradient(135deg, #202334 0%, #1c2030 52%, #181c2b 100%),
                linear-gradient(
                    180deg,
                    transparent 0%,
                    transparent 74%,
                    rgba(176, 137, 255, 0.9) 74%,
                    rgba(176, 137, 255, 0.9) 76%,
                    transparent 76%,
                    transparent 80%,
                    rgba(126, 97, 240, 0.78) 80%,
                    rgba(126, 97, 240, 0.78) 82%,
                    transparent 82%,
                    transparent 100%
                ) !important;
            background-size: 165% 165%, 145% 145%, 150% 150%, 100% 100%, 100% 100% !important;
            animation: pageFadeIn 0.55s ease-out, bodyNebulaShift 24s ease-in-out infinite alternate !important;
            color: #ffffff !important;
            --scroll-track: rgba(168, 180, 215, 0.2);
            --scroll-thumb: linear-gradient(135deg, #aa8cff 0%, #4ac8ff 100%);
            --scroll-thumb-border: rgba(24, 28, 38, 0.7);
            --liquid-glass-bg: linear-gradient(135deg, rgba(45, 52, 79, 0.66), rgba(29, 35, 58, 0.68));
            --liquid-glass-bg-strong: linear-gradient(135deg, rgba(55, 64, 97, 0.72), rgba(33, 41, 66, 0.72));
            --liquid-glass-border: rgba(157, 176, 236, 0.34);
            --liquid-glass-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(220, 232, 255, 0.16);
            --liquid-glass-sheen: rgba(214, 230, 255, 0.24);
            --liquid-glass-blob-a: rgba(153, 110, 255, 0.3);
            --liquid-glass-blob-b: rgba(72, 198, 255, 0.24);
        }

        body.dark-mode .site-loader {
            background:
                radial-gradient(circle at 18% 14%, rgba(135, 97, 255, 0.24), transparent 36%),
                radial-gradient(circle at 82% 18%, rgba(64, 223, 143, 0.18), transparent 34%),
                radial-gradient(circle at 50% 84%, rgba(98, 0, 234, 0.2), transparent 36%),
                linear-gradient(135deg, #08050f 0%, #0f0a19 52%, #07050f 100%);
        }

        body.motion-lite {
            --motion-fast: 110ms;
            --motion-medium: 170ms;
            --motion-slow: 250ms;
            --motion-enter-distance: 8px;
            animation: pageFadeIn 0.35s ease-out !important;
        }
        body.motion-lite.dark-mode {
            animation: pageFadeIn 0.35s ease-out !important;
        }

        body.motion-lite .search-area,
        body.motion-lite .filters,
        body.motion-lite .advanced-filters,
        body.motion-lite .products,
        body.motion-lite .card,
        body.motion-lite .dash-card,
        body.motion-lite #seller-profile-header,
        body.motion-lite .ad-strip,
        body.motion-lite .broadcast-feed {
            animation-duration: var(--motion-slow) !important;
            animation-delay: 0ms !important;
        }

        body.motion-lite .loader-orb {
            opacity: 0.28;
            filter: blur(4px);
            animation-duration: 12s !important;
        }
        body.motion-lite .site-loader::before,
        body.motion-lite .site-loader-panel::before {
            animation-duration: 20s !important;
        }
        body.motion-lite .site-loader-panel::after {
            animation-duration: 4.5s !important;
        }

        body.motion-lite .site-loader-rings span {
            animation-duration: 1.6s !important;
        }

        body.motion-lite :is(.btn-ghost, nav a, .chip, .dash-tab, .language-btn) {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            box-shadow: 0 6px 14px rgba(36, 44, 82, 0.16) !important;
        }
        body.motion-lite :is(.search-area, .advanced-filters, .price-range-wrap) {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            box-shadow: 0 8px 18px rgba(36, 44, 82, 0.14) !important;
        }
        body.motion-lite :is(.btn-ghost, nav a, .chip, .dash-tab, .language-btn)::before,
        body.motion-lite :is(.btn-ghost, nav a, .chip, .dash-tab, .language-btn)::after,
        body.motion-lite :is(.search-area, .advanced-filters, .price-range-wrap)::before,
        body.motion-lite .filter-select {
            animation: none !important;
        }
        body.motion-lite .filter-select {
            background-size: 100% 100% !important;
        }
        body.motion-lite .subscription-plan-card.is-gold,
        body.motion-lite .subscription-plan-action.is-gold,
        body.motion-lite .mobile-bottom-nav-badge {
            animation: none !important;
        }
        body.motion-lite .card {
            will-change: auto;
        }

        html.motion-reduced-scroll {
            scroll-behavior: auto !important;
        }

        body.motion-reduced,
        body.motion-reduced * {
            animation: none !important;
            transition: none !important;
        }

        body.motion-reduced .site-loader-bar span {
            transform: translateX(32%) !important;
        }

        /* Keep loader visibly animated even on reduced mode, per product requirement */
        body.motion-reduced .site-loader::before {
            animation: loaderBackdropSpin 16s linear infinite !important;
        }
        body.motion-reduced .site-loader-panel {
            animation: loaderPanelPop 0.6s ease both !important;
        }
        body.motion-reduced .site-loader-panel::before {
            animation: loaderBorderSpin 2.8s linear infinite !important;
        }
        body.motion-reduced .loader-orb {
            animation: loaderOrbFloat 9.5s ease-in-out infinite !important;
        }
        body.motion-reduced .site-loader-logo {
            animation: loaderLogoPulse 2.2s ease-in-out infinite !important;
        }
        body.motion-reduced .site-loader-logo-glow {
            animation: loaderGlowBreath 1.8s ease-in-out infinite !important;
        }
        body.motion-reduced .site-loader-rings span {
            animation: loaderRingSpin 1.1s linear infinite !important;
        }
        body.motion-reduced .site-loader-rings span:nth-child(2) {
            animation-duration: 1.4s !important;
            animation-direction: reverse !important;
        }
        body.motion-reduced .site-loader-rings span:nth-child(3) {
            animation-duration: 1.8s !important;
        }
        body.motion-reduced .site-loader-title {
            animation: loaderTextShimmer 2.3s linear infinite !important;
        }
        body.motion-reduced .site-loader-subtitle::after {
            animation: loaderDots 1.4s steps(4, end) infinite !important;
        }
        body.motion-reduced .site-loader-bar span {
            animation: loaderBarFlow 1.25s ease-in-out infinite !important;
        }

        .reveal-on-scroll {
            --reveal-delay: 0ms;
            --reveal-distance: var(--motion-enter-distance);
            --reveal-scale: 0.992;
            transition:
                opacity var(--motion-medium) var(--motion-ease),
                transform var(--motion-medium) var(--motion-ease);
            transition-delay: var(--reveal-delay);
            will-change: auto;
            backface-visibility: hidden;
        }

        .reveal-on-scroll:not(.is-visible) {
            opacity: 0;
            transform: translate3d(0, var(--reveal-distance), 0) scale(var(--reveal-scale));
            pointer-events: none;
            will-change: opacity, transform;
        }

        .reveal-on-scroll.is-visible {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1);
            pointer-events: auto;
            will-change: auto;
        }

        body.motion-lite .reveal-on-scroll {
            --reveal-distance: 8px;
            --reveal-scale: 0.996;
            transition-duration: var(--motion-fast);
        }

        body.motion-reduced .reveal-on-scroll,
        body.motion-reduced .reveal-on-scroll:not(.is-visible),
        body.motion-reduced .reveal-on-scroll.is-visible {
            opacity: 1 !important;
            transform: none !important;
            pointer-events: auto !important;
        }

        .btn,
        nav a,
        .chip,
        .dash-tab,
        .card,
        .ad-card,
        .broadcast-card,
        .filter-select,
        .form-input,
        .modal,
        .message,
        .popup-ad {
            transition-timing-function: var(--motion-ease) !important;
        }

        .btn,
        nav a,
        .chip,
        .dash-tab,
        .filter-select,
        .form-input {
            transition-duration: var(--motion-fast) !important;
        }

        .card,
        .ad-card,
        .broadcast-card,
        .modal,
        .message,
        .popup-ad {
            transition-duration: var(--motion-medium) !important;
        }

        .btn,
        nav a,
        .card,
        .ad-card,
        .broadcast-card {
            backface-visibility: hidden;
            transform: translateZ(0);
        }

        .market-assurance-card,
        .community-topic-card,
        .community-store-card,
        .subscription-plan-card,
        .cart-quick-card,
        .profile-dashboard-stat-card,
        .profile-dashboard-menu-row,
        .broadcast-card,
        .dash-card {
            contain: paint;
        }

        @supports (content-visibility: auto) {
            #main-view > section,
            #community-view > section,
            #dashboard-view .dash-card,
            footer.market-footer .market-footer-content {
                content-visibility: auto;
                contain-intrinsic-size: 1px 520px;
            }
        }

        body.dark-mode *:not(input):not(textarea):not(select):not(.btn):not(.badge):not(.social-icon):not(.fa):not(.fas):not(.fab):not(i):not(.chat-message-input):not(.search-input):not(.form-input):not(.chat-input) {
            color: #ffffff !important;
        }

        body.dark-mode header {
            background: #1a1a1a !important;
        }

        body.dark-mode nav ul {
            background: rgba(24, 29, 43, 0.9) !important;
            border-color: rgba(138, 154, 196, 0.28) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 28px rgba(0, 0, 0, 0.32);
        }

        body.dark-mode nav a {
            color: #dce7ff !important;
        }

        body.dark-mode nav a:hover {
            color: #ffffff !important;
            background: rgba(130, 107, 255, 0.2) !important;
        }

        body.dark-mode nav a.is-active {
            color: #ffffff !important;
            background: linear-gradient(135deg, #7f5bff 0%, #5a31ff 100%) !important;
            box-shadow: 0 8px 18px rgba(90, 49, 255, 0.4);
        }

        body.dark-mode .card,
        body.dark-mode .dash-card,
        body.dark-mode .modal,
        body.dark-mode .search-area {
            background: #1e1e1e !important;
            border-color: #333 !important;
        }

        body.dark-mode .chat-container {
            background: #1e1e1e !important;
        }

        body.dark-mode input,
        body.dark-mode textarea,
        body.dark-mode select {
            background: #2d2d2d !important;
            color: #ffffff !important;
            border-color: #444 !important;
        }
        body.dark-mode input:-webkit-autofill,
        body.dark-mode textarea:-webkit-autofill,
        body.dark-mode select:-webkit-autofill {
            -webkit-text-fill-color: #ffffff !important;
            box-shadow: 0 0 0 1000px #2d2d2d inset !important;
            -webkit-box-shadow: 0 0 0 1000px #2d2d2d inset !important;
            border-color: #444 !important;
            transition: background-color 9999s ease-out 0s;
        }

        /* DARK MODE FOR ALL SECTIONS */
        body.dark-mode .chip {
            background: #2d2d2d !important;
            color: #ffffff !important;
            border-color: #444 !important;
        }
        
        body.dark-mode .chip.active {
            background: var(--primary) !important;
            color: white !important;
            border-color: var(--primary) !important;
        }
        
        body.dark-mode .filter-select {
            background: #2d2d2d !important;
            color: #ffffff !important;
            border-color: #444 !important;
        }

        body.dark-mode .message.received {
            background: #2d2d2d !important;
            color: #ffffff !important;
        }

        body.dark-mode .upload-area {
            background: #2d2d2d !important;
            border-color: #444 !important;
            color: #ffffff !important;
        }
        
        body.dark-mode #seller-profile-header {
            background: #1e1e1e !important;
            border: 1px solid #333 !important;
        }
        
        body.dark-mode .language-dropdown {
            background: #1e1e1e !important;
            border: 1px solid #333 !important;
        }
        
        body.dark-mode .language-option {
            color: #ffffff !important;
        }
        
        body.dark-mode .language-option:hover {
            background: #2a2a2a !important;
        }
        
        body.dark-mode #security-email-card,
        body.dark-mode #security-password-card,
        body.dark-mode #security-reset-card,
        body.dark-mode #blocked-users-card {
            background: #252525 !important;
            border: 1px solid #333 !important;
        }

        body.dark-mode footer {
            background: #000000 !important;
        }

        body.dark-mode .card-title,
        body.dark-mode .card-price,
        body.dark-mode .card-meta,
        body.dark-mode .form-label,
        body.dark-mode h1,
        body.dark-mode h2,
        body.dark-mode h3,
        body.dark-mode h4,
        body.dark-mode h5,
        body.dark-mode h6,
        body.dark-mode p,
        body.dark-mode span,
        body.dark-mode div:not(.btn):not(.badge),
        body.dark-mode .notification {
            color: #ffffff !important;
        }

        body.dark-mode .search-input::placeholder,
        body.dark-mode .chat-input::placeholder {
            color: #b0b0b0 !important;
        }

        body.dark-mode .dash-tab {
            color: #b0b0b0 !important;
        }

        body.dark-mode .dash-tab.active {
            color: var(--primary) !important;
        }

        body.dark-mode .message-item {
            background: #1e1e1e !important;
            border-color: #333 !important;
        }

        body.dark-mode .message-item:hover {
            background: #252525 !important;
        }

        body.dark-mode .message-item.unread {
            background: #2a2a2a !important;
        }

        body.dark-mode .star-rating label {
            color: #555 !important;
        }

        body.dark-mode .star-rating input:checked ~ label,
        body.dark-mode .star-rating label:hover,
        body.dark-mode .star-rating label:hover ~ label {
            color: #ffab00 !important;
        }

        /* ONLINE/OFFLINE STATUS STYLES */
        .status-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-left: 5px;
        }

        .status-dot.online {
            background-color: #00e676;
            box-shadow: 0 0 5px #00e676;
        }

        .status-dot.offline {
            background-color: #ff1744;
            box-shadow: 0 0 5px #ff1744;
        }

        body.dark-mode .status-dot.online {
            background-color: #00e676;
            box-shadow: 0 0 8px #00e676;
        }

        body.dark-mode .status-dot.offline {
            background-color: #ff5252;
            box-shadow: 0 0 8px #ff5252;
        }

        /* PHOTO UPLOAD IN CHAT STYLES */
        .chat-photo-preview {
            max-width: 200px;
            max-height: 200px;
            border-radius: 12px;
            margin-bottom: 5px;
            object-fit: cover;
        }

        .chat-video-preview {
            max-width: 220px;
            max-height: 220px;
            border-radius: 12px;
            margin-bottom: 5px;
            background: #000;
        }

        .message-with-photo {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        body.dark-mode .chat-photo-preview {
            border: 2px solid #444;
        }

        /* Dark mode for floating notification */
        body.dark-mode .floating-notification {
            background: linear-gradient(135deg, #2d2d2d, #1a1a1a);
            border-left: 5px solid var(--accent);
        }

        /* ================= IMPROVED CHAT CONTAINER ================= */
        .chat-container { 
            position: fixed; 
            bottom: 20px; 
            right: 20px; 
            width: 380px; 
            height: 580px; 
            background: white; 
            border-radius: 16px; 
            box-shadow: 0 8px 32px rgba(0,0,0,0.2); 
            z-index: 1955;
            display: none; 
            flex-direction: column;
            overflow: hidden;
            border: 1px solid #e0e0e0;
            max-height: calc(100dvh - 24px);
        }
        
        .chat-header { 
            background: linear-gradient(135deg, var(--primary), var(--secondary)); 
            color: white; 
            padding: 15px 20px; 
            display: flex; 
            justify-content: space-between; 
            align-items: center;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            flex-shrink: 0;
        }
        
        .chat-header-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .chat-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(255,255,255,0.3);
        }
        
        .chat-status {
            font-size: 11px;
            opacity: 0.9;
            margin-top: 2px;
        }
        
        .chat-header-actions {
            display: flex;
            gap: 10px;
        }
        
        .chat-header-actions button {
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }
        
        .chat-header-actions button:hover {
            background: rgba(255,255,255,0.3);
        }
        
        .chat-messages { 
            flex: 1; 
            min-height: 0;
            padding: 20px; 
            overflow-y: auto; 
            display: flex; 
            flex-direction: column; 
            gap: 12px;
            background: #f8f9fa;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }
        
        body.dark-mode .chat-messages {
            background: #1a1a1a;
        }

        /* Keep chat font consistent without forcing emoji fallback */
        .chat-messages,
        .chat-messages .message,
        .chat-messages .message *,
        #chat-message-input,
        #chats-list .message-preview {
            font-family: var(--font-main) !important;
            font-variant-emoji: normal;
        }
        
        .message { 
            max-width: 70%; 
            padding: 12px 16px; 
            border-radius: 18px; 
            position: relative;
            animation: fadeIn 0.3s ease;
        }
        
        .message.sent { 
            background: var(--primary); 
            color: white; 
            align-self: flex-end; 
            border-bottom-right-radius: 6px;
            margin-left: auto;
        }
        
        .message.received { 
            background: white; 
            color: #333; 
            align-self: flex-start; 
            border-bottom-left-radius: 6px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
            margin-right: auto;
        }
        
        .message-time { 
            font-size: 11px; 
            opacity: 0.7; 
            margin-top: 4px; 
            text-align: right;
        }
        
        .message.received .message-time { 
            color: rgba(0,0,0,0.5);
        }
        
        body.dark-mode .message.received .message-time {
            color: rgba(255,255,255,0.5);
        }

        .message-seen-status {
            font-size: 11px;
            line-height: 1.2;
            margin-top: 2px;
            text-align: right;
            opacity: 0.9;
            color: rgba(255,255,255,0.92);
        }
        
        .chat-input-area { 
            padding: 15px; 
            border-top: 1px solid #e0e0e0; 
            display: flex; 
            gap: 10px; 
            align-items: center;
            background: white;
            flex-shrink: 0;
        }
        
        body.dark-mode .chat-input-area {
            background: #1e1e1e;
            border-color: #333;
        }
        
        .chat-input { 
            flex: 1; 
            min-width: 0;
            padding: 12px 15px; 
            border: 1px solid #ddd; 
            border-radius: 24px; 
            outline: none;
            font-size: 14px;
        }
        
        .chat-input:focus {
            border-color: var(--primary);
        }
        
        .send-button {
            background: var(--primary);
            color: white;
            border: none;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
        }
        
        .send-button:hover {
            background: var(--secondary);
            transform: scale(1.05);
        }
        
        .message-status {
            font-size: 10px;
            margin-left: 5px;
        }
        
        /* ================= MESSAGES LIST ================= */
        .messages-list { 
            max-height: 500px; 
            overflow-y: auto; 
            background: white;
            border-radius: 12px;
            border: 1px solid #eee;
        }
        .support-quick-start {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 10px 12px;
            margin-bottom: 10px;
            border-radius: 12px;
            border: 1px solid rgba(79, 140, 255, 0.3);
            background: linear-gradient(135deg, rgba(79, 140, 255, 0.1), rgba(98, 0, 234, 0.08));
        }
        .support-quick-start-text {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }
        .support-quick-start-text strong {
            font-size: 14px;
            color: #20305b;
        }
        .support-quick-start-text span {
            font-size: 12px;
            color: #4d5f85;
        }
        
        body.dark-mode .messages-list {
            background: #1e1e1e;
            border-color: #333;
        }
        body.dark-mode .support-quick-start {
            border-color: rgba(129, 157, 226, 0.45);
            background: linear-gradient(135deg, rgba(74, 108, 190, 0.22), rgba(98, 0, 234, 0.2));
        }
        body.dark-mode .support-quick-start-text strong {
            color: #ebf1ff;
        }
        body.dark-mode .support-quick-start-text span {
            color: #c9d4f1;
        }
        @media (max-width: 640px) {
            .support-quick-start {
                flex-direction: column;
                align-items: stretch;
            }
            .support-quick-start .btn {
                width: 100%;
            }
        }

        .notifications-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }

        .notification-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .notifications-list {
            max-height: 430px;
            overflow-y: auto;
            border: 1px solid #eee;
            border-radius: 12px;
            background: #fff;
            margin-bottom: 12px;
        }

        .notification-item {
            padding: 12px;
            border-bottom: 1px solid #eee;
            background: #fff;
        }

        .notification-item:last-child {
            border-bottom: none;
        }

        .notification-item.unread {
            background: #f5f8ff;
        }

        .notification-item-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 6px;
            flex-wrap: wrap;
        }

        .notification-item-title {
            font-weight: 800;
            font-size: 14px;
            color: #202020;
        }

        .notification-category-badge {
            font-size: 11px;
            padding: 3px 8px;
            border-radius: 999px;
            border: 1px solid #e0d7ff;
            background: #f4efff;
            color: #5b3fb7;
            font-weight: 700;
        }

        .notification-item-message {
            font-size: 13px;
            color: #555;
            margin-bottom: 8px;
            white-space: pre-wrap;
            word-break: break-word;
        }

        .notification-item-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            flex-wrap: wrap;
            font-size: 12px;
            color: var(--gray);
        }

        .notification-item-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .notification-preferences-card {
            border: 1px solid #eee;
            border-radius: 12px;
            padding: 12px;
            background: #fafafa;
        }

        .notification-preferences-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px 12px;
        }

        .notification-pref-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 600;
            color: #333;
            user-select: none;
        }

        .notification-pref-item input {
            width: 16px;
            height: 16px;
            accent-color: var(--primary);
        }

        body.dark-mode .notifications-list {
            background: #1e1e1e;
            border-color: #333;
        }

        body.dark-mode .notification-item {
            background: #1e1e1e;
            border-bottom-color: #333;
        }

        body.dark-mode .notification-item.unread {
            background: #252535;
        }

        body.dark-mode .notification-item-title {
            color: #f3f3f3;
        }

        body.dark-mode .notification-item-message {
            color: #d2d2d2;
        }

        body.dark-mode .notification-category-badge {
            border-color: #463a67;
            background: #2f2944;
            color: #d9c9ff;
        }

        body.dark-mode .notification-preferences-card {
            background: #1b1b1b;
            border-color: #333;
        }

        body.dark-mode .notification-pref-item {
            color: #e8e8e8;
        }
        
        .message-item { 
            padding: 15px; 
            border-bottom: 1px solid #eee; 
            cursor: pointer; 
            transition: background 0.3s; 
        }
        
        .message-item:hover { 
            background: #f9f9f9; 
        }
        
        body.dark-mode .message-item:hover {
            background: #252525;
        }
        
        .message-item.unread { 
            background: #f0f7ff; 
        }
        
        body.dark-mode .message-item.unread {
            background: #2a2a2a;
        }
        
        .message-item-header { 
            display: flex; 
            justify-content: space-between; 
            margin-bottom: 5px; 
        }
        
        .message-sender { 
            font-weight: bold; 
            font-size: 14px; 
        }

        .blocked-users-list {
            max-height: 320px;
            overflow-y: auto;
            background: white;
            border-radius: 12px;
            border: 1px solid #eee;
        }

        body.dark-mode .blocked-users-list {
            background: #1e1e1e;
            border-color: #333;
        }

        .blocked-users-empty {
            padding: 14px;
            text-align: center;
            color: var(--gray);
            font-size: 14px;
        }

        .blocked-users-error {
            color: var(--danger);
        }

        .blocked-user-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 12px;
            border-bottom: 1px solid #eee;
        }

        .blocked-user-item:last-child {
            border-bottom: none;
        }

        body.dark-mode .blocked-user-item {
            border-bottom-color: #333;
        }

        .blocked-user-main {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            flex: 1;
        }

        .blocked-user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            background: #eee;
            flex-shrink: 0;
        }

        .blocked-user-info {
            min-width: 0;
        }

        .blocked-user-name {
            font-weight: 700;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .blocked-user-id {
            color: var(--gray);
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 250px;
        }

        .blocked-user-actions {
            display: flex;
            gap: 8px;
            flex-shrink: 0;
        }
        
        .message-time { 
            font-size: 11px; 
            color: var(--gray); 
        }
        
        .message-preview { 
            font-size: 13px; 
            color: #666; 
            overflow: hidden; 
            text-overflow: ellipsis; 
            white-space: nowrap; 
        }
        .detail-desc-box {
            white-space: pre-wrap;
            background: #f9f9f9;
            padding: 10px;
            border-radius: 10px;
        }

        .detail-car-specs-box {
            margin: 8px 0 10px;
            padding: 10px;
            border-radius: 10px;
            border: 1px solid rgba(79, 140, 255, 0.26);
            background: rgba(79, 140, 255, 0.08);
        }

        .detail-car-specs-box h4 {
            margin: 0 0 8px;
            font-size: 14px;
        }

        .detail-car-specs-box p {
            margin: 4px 0;
            font-size: 13px;
        }

        .detail-seller-box {
            background: #f0ebff;
            padding: 10px 12px;
            border-radius: 10px;
            margin-top: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .detail-seller-avatar {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            object-fit: cover;
            background: #e9ebf2;
            border: 1px solid rgba(16, 24, 40, 0.12);
            flex: 0 0 46px;
        }
        .detail-seller-copy {
            min-width: 0;
            flex: 1;
        }
        .detail-seller-title {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px;
            font-weight: 700;
        }
        .detail-seller-subtitle {
            margin-top: 4px;
            color: #6b6485;
            font-size: 13px;
            font-weight: 700;
        }
        .detail-safe-trade-box {
            margin-top: 10px;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid rgba(46, 125, 80, 0.28);
            background: rgba(76, 175, 80, 0.1);
            color: #1f4f2d;
            font-size: 13px;
            line-height: 1.5;
        }
        .detail-safe-trade-box strong {
            margin-left: 6px;
            color: #1e6a34;
        }
        
        body.dark-mode .message-preview {
            color: #b0b0b0;
        }
        body.dark-mode .detail-desc-box {
            background: #2a2a2a !important;
            color: #ffffff !important;
            border: 1px solid #333 !important;
        }

        body.dark-mode .detail-car-specs-box {
            background: rgba(79, 140, 255, 0.16) !important;
            border-color: rgba(129, 176, 255, 0.45) !important;
            color: #f3f6ff !important;
        }

        body.dark-mode .detail-seller-box {
            background: #2b2340 !important;
            color: #ffffff !important;
            border: 1px solid #3b3157 !important;
        }
        body.dark-mode .detail-seller-avatar {
            background: #262d41;
            border-color: rgba(187, 200, 237, 0.35);
        }
        body.dark-mode .detail-seller-subtitle {
            color: #d8cfef;
        }
        body.dark-mode .detail-safe-trade-box {
            background: rgba(46, 125, 80, 0.2) !important;
            border-color: rgba(115, 214, 143, 0.35) !important;
            color: #d7f5e0 !important;
        }
        body.dark-mode .detail-safe-trade-box strong {
            color: #b4f4c6 !important;
        }
        
        /* ================= FLOATING NOTIFICATION SYSTEM ================= */
        .floating-notification {
            position: fixed;
            top: 100px;
            right: 20px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 15px 20px;
            border-radius: 12px;
            box-shadow: var(--shadow-md);
            z-index: 1002;
            display: flex;
            align-items: center;
            gap: 12px;
            max-width: 350px;
            animation: floatIn 0.5s ease, floatOut 0.5s ease 4.5s forwards;
            cursor: pointer;
            border-left: 5px solid var(--accent);
        }

        .floating-notification i {
            font-size: 22px;
        }

        .floating-notification-content {
            flex: 1;
        }

        .floating-notification-title {
            font-weight: bold;
            font-size: 15px;
            margin-bottom: 3px;
        }

        .floating-notification-message {
            font-size: 13px;
            opacity: 0.9;
        }

        .floating-notification-close {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 50%;
            font-size: 12px;
            width: 25px;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .floating-notification-close:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        @keyframes floatIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes floatOut {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(100%);
                opacity: 0;
            }
        }

        .ad-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.35);
            z-index: 9997;
            display: none;
        }

        .popup-ad {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            width: 300px;
            z-index: 9998;
            display: none;
            animation: popupAdSlide 0.5s ease;
            overflow: hidden;
        }
        
        body.dark-mode .popup-ad {
            background: #1e1e1e;
        }
        
        .popup-ad-header {
            background: linear-gradient(135deg, #00b894, #00a085);
            color: white;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .ad-sponsor {
            letter-spacing: 0.1px;
        }

        #adTimer {
            font-size: 12px;
            opacity: 0.9;
        }
        
        .popup-ad-close {
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #skipAdText {
            display: none;
        }
        
        .popup-ad-content {
            padding: 20px;
            text-align: center;
        }
        
        .popup-ad-image {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 15px;
        }
        
        @keyframes popupAdSlide {
            from {
                opacity: 0;
                transform: translateX(100px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        /* REST OF THE STYLES... */
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-main); -webkit-tap-highlight-color: transparent; }
        body {
            color: #333;
            line-height: 1.6;
            direction: rtl;
            text-align: right;
            overflow-x: hidden;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background:
                radial-gradient(circle at 10% -10%, rgba(128, 98, 242, 0.15), transparent 42%),
                radial-gradient(circle at 92% 0%, rgba(73, 192, 255, 0.13), transparent 40%),
                radial-gradient(circle at 50% 118%, rgba(186, 160, 255, 0.16), transparent 50%),
                linear-gradient(180deg, #f8f9ff 0%, #f3f5ff 55%, #eef2ff 100%);
            background-size: 148% 148%, 140% 140%, 150% 150%, 100% 100%;
            animation: pageFadeIn 0.55s ease-out, bodyLightDrift 22s ease-in-out infinite alternate;
            font-variant-emoji: normal;
        }
        html {
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }
        html.modal-open,
        body.modal-open {
            overflow: hidden;
        }
        body.modal-open {
            animation: none !important;
            overscroll-behavior: none;
            touch-action: none;
        }
        body.modal-open.dark-mode {
            animation: none !important;
        }

        body.app-loading {
            overflow: hidden;
        }

        .site-loader {
            position: fixed;
            inset: 0;
            z-index: 12000;
            display: grid;
            place-items: center;
            padding: 20px;
            background:
                radial-gradient(circle at 18% 14%, rgba(128, 76, 255, 0.3), transparent 34%),
                radial-gradient(circle at 82% 18%, rgba(0, 230, 118, 0.16), transparent 30%),
                radial-gradient(circle at 50% 84%, rgba(98, 0, 234, 0.22), transparent 34%),
                linear-gradient(135deg, #0c1220 0%, #18112b 44%, #120d20 100%);
            transition: opacity 3s ease, visibility 3s ease;
            overflow: hidden;
        }
        #site-loader {
            display: grid;
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
        }
        .site-loader::before {
            content: "";
            position: absolute;
            inset: -40%;
            background:
                conic-gradient(from 0deg, rgba(126, 93, 255, 0.16), rgba(255, 255, 255, 0.02), rgba(0, 230, 118, 0.14), rgba(126, 93, 255, 0.16));
            filter: blur(28px);
            animation: loaderBackdropSpin 16s linear infinite;
            pointer-events: none;
        }
        .site-loader::after {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
            background-size: 54px 54px;
            mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.9), transparent 78%);
            opacity: 0.34;
            pointer-events: none;
        }

        .site-loader.is-hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .site-loader-orbs {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .loader-orb {
            position: absolute;
            border-radius: 999px;
            filter: blur(8px);
            opacity: 0.44;
            animation: loaderOrbFloat 9.5s ease-in-out infinite;
        }
        .loader-orb.orb-1 {
            width: 220px;
            height: 220px;
            top: 10%;
            left: -30px;
            background: radial-gradient(circle, rgba(142, 89, 255, 0.92), rgba(142, 89, 255, 0));
        }
        .loader-orb.orb-2 {
            width: 180px;
            height: 180px;
            top: 12%;
            right: -18px;
            background: radial-gradient(circle, rgba(94, 217, 255, 0.9), rgba(94, 217, 255, 0));
            animation-delay: 1.7s;
        }
        .loader-orb.orb-3 {
            width: 260px;
            height: 260px;
            bottom: -70px;
            left: 20%;
            background: radial-gradient(circle, rgba(81, 46, 201, 0.88), rgba(81, 46, 201, 0));
            animation-delay: 3.1s;
        }
        .loader-orb.orb-4 {
            width: 210px;
            height: 210px;
            bottom: -50px;
            right: 14%;
            background: radial-gradient(circle, rgba(0, 230, 118, 0.56), rgba(0, 230, 118, 0));
            animation-delay: 2.4s;
        }

        .site-loader-panel {
            position: relative;
            width: min(540px, 100%);
            border-radius: 30px;
            border: 1px solid rgba(167, 143, 255, 0.32);
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 20%),
                linear-gradient(145deg, rgba(21, 27, 46, 0.9), rgba(24, 16, 43, 0.92));
            box-shadow:
                0 30px 70px rgba(2, 0, 8, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.04) inset,
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            padding: 20px 20px 18px;
            display: grid;
            justify-items: center;
            gap: 16px;
            animation: loaderPanelPop 0.6s ease both;
            overflow: hidden;
            isolation: isolate;
        }
        .site-loader-panel::before {
            content: "";
            position: absolute;
            inset: -1px;
            border-radius: inherit;
            background: conic-gradient(from 0deg, rgba(166, 137, 255, 0.72), rgba(255, 255, 255, 0.08), rgba(0, 230, 118, 0.56), rgba(166, 137, 255, 0.72));
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            padding: 1px;
            animation: loaderBorderSpin 2.8s linear infinite;
            pointer-events: none;
            z-index: 0;
        }
        .site-loader-panel::after {
            content: "";
            position: absolute;
            inset: 14px;
            border-radius: 22px;
            background:
                radial-gradient(circle at top center, rgba(116, 204, 255, 0.08), transparent 42%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 26%, transparent 76%, rgba(0, 230, 118, 0.08));
            border: 1px solid rgba(255, 255, 255, 0.04);
            pointer-events: none;
            z-index: 0;
        }
        .site-loader-kicker {
            position: relative;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 30px;
            padding: 8px 14px;
            border-radius: 999px;
            border: 1px solid rgba(173, 148, 255, 0.28);
            background: rgba(255, 255, 255, 0.06);
            color: #d9d4ef;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }
        .site-loader-logo-wrap {
            position: relative;
            width: min(320px, 82vw);
            display: grid;
            justify-items: center;
            z-index: 2;
        }

        .site-loader-logo {
            width: 100%;
            height: auto;
            object-fit: contain;
            position: relative;
            z-index: 2;
            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 12px rgba(128, 76, 255, 0.42));
            animation: loaderLogoPulse 2.2s ease-in-out infinite;
        }

        .site-loader-logo-glow {
            position: absolute;
            width: 90%;
            height: 34px;
            border-radius: 999px;
            bottom: -7px;
            background: radial-gradient(circle, rgba(121, 84, 255, 0.9) 0%, rgba(121, 84, 255, 0) 74%);
            filter: blur(9px);
            animation: loaderGlowBreath 1.8s ease-in-out infinite;
        }

        .site-loader-rings {
            position: relative;
            width: 68px;
            height: 68px;
            display: grid;
            place-items: center;
            z-index: 2;
            flex: 0 0 auto;
        }

        .site-loader-core {
            position: relative;
            z-index: 2;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            padding: 6px 4px 2px;
        }

        .site-loader-copy {
            display: grid;
            gap: 6px;
            justify-items: start;
            text-align: start;
        }

        .site-loader-rings span {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.18);
            border-top-color: rgba(171, 143, 255, 0.95);
            border-right-color: rgba(98, 0, 234, 0.9);
            animation: loaderRingSpin 1.1s linear infinite;
        }
        .site-loader-rings span:nth-child(2) {
            inset: 8px;
            border-top-color: rgba(0, 230, 118, 0.75);
            border-right-color: rgba(194, 255, 218, 0.9);
            animation-duration: 1.4s;
            animation-direction: reverse;
        }
        .site-loader-rings span:nth-child(3) {
            inset: 16px;
            border-top-color: rgba(194, 176, 255, 0.9);
            border-right-color: rgba(98, 0, 234, 0.88);
            animation-duration: 1.8s;
        }

        .site-loader-title {
            margin: 0;
            font-size: clamp(26px, 2.4vw, 34px);
            font-weight: 900;
            letter-spacing: 0.02em;
            color: #fff;
            background: linear-gradient(90deg, #e8dfff, #fff, #e8dfff);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: loaderTextShimmer 2.3s linear infinite;
            z-index: 2;
        }

        .site-loader-subtitle {
            margin: 0;
            font-size: 13px;
            font-weight: 700;
            color: #cfc6ee;
            text-align: start;
            opacity: 0.96;
            z-index: 2;
            position: relative;
            min-height: 18px;
        }
        .site-loader-subtitle::after {
            content: none;
        }

        .site-loader-bar {
            width: min(340px, 84vw);
            height: 10px;
            border-radius: 999px;
            overflow: hidden;
            background: rgba(234, 225, 255, 0.12);
            border: 1px solid rgba(171, 143, 255, 0.24);
            box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.25);
            z-index: 2;
        }

        .site-loader-bar span {
            display: block;
            width: 42%;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, rgba(98, 0, 234, 0.8), rgba(153, 120, 255, 1), rgba(0, 230, 118, 0.8));
            animation: loaderBarFlow 1.25s ease-in-out infinite;
            box-shadow: 0 0 16px rgba(153, 120, 255, 0.5);
        }

        .site-loader-meta {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .site-loader-meta span {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 34px;
            padding: 8px 12px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(164, 182, 255, 0.14);
            color: #ebe7ff;
            font-size: 12px;
            font-weight: 800;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }
        .site-loader-meta i {
            color: #71d7ff;
            font-size: 12px;
        }

        @media (max-width: 768px) {
            .site-loader-panel {
                width: min(500px, 100%);
                padding: 18px 16px 16px;
                gap: 14px;
            }
            .site-loader-kicker {
                font-size: 10px;
                letter-spacing: 0.18em;
            }
            .site-loader-core {
                gap: 12px;
            }
            .site-loader-rings {
                width: 60px;
                height: 60px;
            }
            .site-loader-bar {
                width: min(300px, 86vw);
            }
        }

        @media (max-width: 560px) {
            .site-loader-panel {
                border-radius: 24px;
            }
            .site-loader-panel::after {
                inset: 10px;
                border-radius: 18px;
            }
            .site-loader-logo-wrap {
                width: min(280px, 80vw);
            }
            .site-loader-core {
                flex-direction: column;
                gap: 10px;
                padding-top: 0;
            }
            .site-loader-copy {
                justify-items: center;
                text-align: center;
            }
            .site-loader-subtitle {
                text-align: center;
            }
        }

        @media (max-width: 420px) {
            .site-loader {
                padding: 14px;
            }
            .site-loader-kicker {
                padding: 7px 12px;
                min-height: 28px;
                font-size: 9px;
            }
            .site-loader-meta {
                gap: 8px;
            }
            .site-loader-meta span {
                font-size: 11px;
                padding: 7px 10px;
                min-height: 32px;
            }
        }

        .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(10px, 2.2vw, 20px); flex: 1; }
        
        header {
            background: #ffffff;
            backdrop-filter: blur(10px);
            color: var(--dark);
            padding: 15px 0;
            position: sticky;
            top: 0;
            z-index: 1000;
            border-bottom: 1px solid rgba(83, 93, 141, 0.14);
            box-shadow: 0 10px 24px rgba(29, 38, 66, 0.08);
            animation: headerDrop 0.45s ease-out both;
        }
        .header-content {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 14px;
        }
        .logo { font-size: 24px; font-weight: 900; color: var(--primary); display: flex; align-items: center; gap: 0; cursor: pointer; }
        .logo .logo-mark {
            width: clamp(108px, 8.2vw, 148px);
            max-height: clamp(108px, 8.2vw, 148px);
            height: auto;
            object-fit: contain;
            object-position: center;
            display: block;
            filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.55)) drop-shadow(0 3px 8px rgba(0, 0, 0, 0.15));
        }
        body.dark-mode .logo .logo-mark {
            filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.2)) drop-shadow(0 0 10px rgba(0, 224, 255, 0.35));
        }
        .header-menu-divider,
        .header-menu-toggle,
        .header-shortcuts {
            display: none;
        }
        .header-menu-divider {
            width: 1px;
            height: 46px;
            border-radius: 999px;
            background: linear-gradient(180deg, rgba(86, 97, 141, 0.1), rgba(86, 97, 141, 0.32), rgba(86, 97, 141, 0.1));
        }
        .header-menu-toggle {
            width: 54px;
            height: 54px;
            border: 0;
            border-radius: 16px;
            background: transparent;
            color: #0f1428;
            cursor: pointer;
            padding: 0;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex-direction: column;
        }
        .header-menu-toggle span {
            width: 34px;
            height: 6px;
            border-radius: 999px;
            background: currentColor;
            transition: transform var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease);
        }
        .header-shortcuts {
            gap: 10px;
        }
        .header-shortcut {
            border: 1px solid rgba(99, 111, 156, 0.18);
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 255, 0.92));
            border-radius: 18px;
            min-height: 58px;
            padding: 10px 8px;
            color: #1e2745;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-family: var(--font-main);
            font-size: 12px;
            font-weight: 900;
            cursor: pointer;
            box-shadow: 0 10px 22px rgba(31, 41, 72, 0.08);
            transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
        }
        .header-shortcut i {
            font-size: 16px;
            color: var(--warning);
        }
        .header-shortcut:hover {
            transform: translateY(-1px);
            border-color: rgba(98, 0, 234, 0.24);
            box-shadow: 0 12px 24px rgba(43, 53, 89, 0.12);
        }
        .header-shortcut.is-active {
            color: #ffffff;
            border-color: transparent;
            background: linear-gradient(135deg, var(--primary), #4f1fff);
            box-shadow: 0 12px 26px rgba(98, 0, 234, 0.28);
        }
        .header-shortcut.is-active i {
            color: #ffffff;
        }
        body.dark-mode .header-menu-divider {
            background: linear-gradient(180deg, rgba(208, 221, 255, 0.1), rgba(208, 221, 255, 0.3), rgba(208, 221, 255, 0.1));
        }
        body.dark-mode .header-menu-toggle {
            color: #f4f7ff;
        }
        body.dark-mode .header-shortcut {
            color: #edf3ff;
            border-color: rgba(160, 179, 233, 0.28);
            background: linear-gradient(145deg, rgba(44, 52, 79, 0.84), rgba(32, 38, 60, 0.88));
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
        }
        body.dark-mode .header-shortcut i {
            color: #ffcc80;
        }
        .footer-purple-image {
            width: 230px;
            max-width: 80%;
            height: auto;
            object-fit: contain;
            display: block;
        }
        
        nav {
            display: flex;
            justify-content: center;
            min-width: 0;
        }
        nav ul {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            list-style: none;
            padding: 5px;
            border-radius: 999px;
            border: 1px solid rgba(94, 110, 168, 0.2);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(246, 249, 255, 0.9));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 8px 20px rgba(45, 61, 104, 0.1);
            flex-wrap: nowrap;
            overflow-x: auto;
            max-width: 100%;
        }
        nav a {
            text-decoration: none;
            color: #283046;
            font-weight: 800;
            font-size: 13px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 38px;
            padding: 0 14px;
            border-radius: 999px;
            white-space: nowrap;
            transition: color .2s ease, background .2s ease, transform .15s ease, box-shadow .2s ease;
        }
        nav a:hover {
            color: var(--primary);
            background: rgba(98, 0, 234, 0.09);
            transform: translateY(-1px);
        }
        nav a:focus-visible {
            outline: 2px solid rgba(98, 0, 234, 0.38);
            outline-offset: 2px;
        }
        nav a.is-active {
            color: #fff;
            background: linear-gradient(135deg, var(--primary), #4f1fff);
            box-shadow: 0 8px 18px rgba(98, 0, 234, 0.32);
        }

        .user-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-start; min-width: 0; }

        .btn { padding: 10px 20px; border: none; border-radius: 12px; cursor: pointer; font-weight: 700; font-size: 14px; transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease, filter var(--motion-fast) ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
        .btn:active { transform: scale(0.97); }
        .btn-primary { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; box-shadow: 0 4px 10px rgba(98, 0, 234, 0.3); }
        .btn-accent { background: linear-gradient(135deg, var(--accent), #00c853); color: white; box-shadow: 0 4px 10px rgba(0, 230, 118, 0.3); }
        .btn-danger { background: linear-gradient(135deg, var(--danger), #b00020); color: white; }
        .btn-warning { background: linear-gradient(135deg, var(--warning), #ff5722); color: white; }
        .btn-ghost {
            background: rgba(255, 255, 255, 0.78);
            color: #2d3561;
            border: 1.5px solid rgba(90, 108, 171, 0.44);
        }
        .btn-ghost:hover {
            color: #1e2547;
            border-color: rgba(82, 98, 158, 0.62);
            background: rgba(255, 255, 255, 0.9);
        }
        body.dark-mode .btn-ghost {
            color: #e9efff;
            border-color: rgba(147, 168, 230, 0.48);
            background: rgba(53, 61, 91, 0.56);
        }
        body.dark-mode .btn-ghost:hover {
            color: #ffffff;
            border-color: rgba(174, 192, 248, 0.7);
            background: rgba(68, 78, 116, 0.62);
        }
        .btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
        .status-toggle-btn.is-online {
            color: #0b8f4f;
            border-color: #22c56f;
            background: rgba(34, 197, 111, 0.08);
        }
        .status-toggle-btn.is-offline {
            color: #d81f4c;
            border-color: #ff4a72;
            background: rgba(255, 74, 114, 0.08);
        }
        body.dark-mode .status-toggle-btn.is-online {
            color: #91ffc4;
            border-color: #4de29a;
            background: rgba(77, 226, 154, 0.12);
        }
        body.dark-mode .status-toggle-btn.is-offline {
            color: #ff9ab0;
            border-color: #ff6f91;
            background: rgba(255, 111, 145, 0.12);
        }

        .search-area {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(246, 249, 255, 0.9));
            border: 1px solid rgba(103, 118, 176, 0.2);
            padding: 10px;
            border-radius: var(--radius);
            box-shadow: 0 10px 20px rgba(32, 48, 90, 0.08);
            display: flex;
            gap: 10px;
            margin: 20px 0;
            flex-wrap: wrap;
            animation: sectionRise 0.5s ease-out both;
        }
        .search-input { flex: 1; border: none; outline: none; font-size: 16px; padding: 5px; min-width: 150px; }
        .verify-card {
            margin: 20px 0;
            padding: 18px;
            border-radius: 16px;
            border: 1px solid rgba(79, 140, 255, 0.26);
            background: rgba(79, 140, 255, 0.06);
            box-shadow: var(--shadow-sm);
        }
        .verify-head h2 { margin: 0; font-size: 24px; font-weight: 900; }
        .verify-head p { margin: 8px 0 14px; color: var(--gray); font-size: 13px; }
        .verify-card .status {
            margin: 0 0 12px;
            padding: 10px 12px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,.12);
            background: rgba(0,0,0,.08);
            color: var(--gray);
            font-size: 12px;
            white-space: pre-wrap;
            display: none;
        }
        .car-smart-section {
            margin-bottom: 12px;
            padding: 12px;
            border-radius: 14px;
            border: 1px solid rgba(98, 0, 234, 0.22);
            background: linear-gradient(135deg, rgba(98, 0, 234, 0.05), rgba(0, 212, 255, 0.04));
        }
        .sell-wizard-shell {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .sell-wizard-progress {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
        }
        .sell-wizard-step {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            padding: 10px 12px;
            border-radius: 16px;
            border: 1px solid rgba(148, 163, 184, 0.22);
            background: rgba(248, 250, 252, 0.95);
            color: #64748b;
            transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
        }
        .sell-wizard-step.is-active {
            border-color: rgba(37, 99, 235, 0.24);
            background: rgba(37, 99, 235, 0.1);
            color: #1e3a8a;
            box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
        }
        .sell-wizard-step.is-complete {
            border-color: rgba(16, 185, 129, 0.24);
            background: rgba(16, 185, 129, 0.1);
            color: #047857;
        }
        .sell-wizard-step-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.92);
            font-size: 13px;
            font-weight: 900;
            flex: 0 0 32px;
        }
        .sell-wizard-step-copy {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }
        .sell-wizard-step-copy strong,
        .sell-wizard-step-copy small {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .sell-wizard-step-copy strong {
            font-size: 13px;
            font-weight: 900;
        }
        .sell-wizard-step-copy small {
            font-size: 11px;
            font-weight: 700;
            opacity: 0.86;
        }
        .sell-wizard-step-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }
        .sell-wizard-step-meta strong {
            font-size: 16px;
            font-weight: 900;
            color: var(--dark);
        }
        .sell-wizard-step-meta span {
            font-size: 12px;
            font-weight: 800;
            color: var(--gray);
        }
        .sell-draft-banner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 14px 16px;
            border-radius: 18px;
            border: 1px solid rgba(14, 165, 233, 0.2);
            background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(37, 99, 235, 0.06));
            box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
            flex-wrap: wrap;
        }
        .sell-draft-banner-copy {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
            flex: 1 1 240px;
        }
        .sell-draft-banner-copy strong {
            font-size: 15px;
            font-weight: 900;
            color: #1e3a8a;
        }
        .sell-draft-banner-copy p {
            margin: 0;
            font-size: 12px;
            font-weight: 700;
            color: #475569;
        }
        .sell-draft-banner-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .sell-wizard-page {
            display: none;
        }
        .sell-wizard-page.is-active {
            display: block;
        }
        .sell-category-explorer,
        .sell-subcategory-explorer,
        .sell-specs-section {
            margin-bottom: 12px;
            padding: 14px;
            border-radius: 18px;
            border: 1px solid rgba(37, 99, 235, 0.14);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 255, 0.92));
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
        }
        .sell-category-explorer-head,
        .sell-specs-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }
        .sell-category-eyebrow {
            margin: 0 0 6px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #2563eb;
        }
        .sell-category-title {
            margin: 0;
            font-size: 20px;
            font-weight: 900;
            color: var(--dark);
        }
        .sell-category-hint,
        .sell-specs-subtitle {
            margin: 6px 0 0;
        }
        .sell-category-selected {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 58px;
            padding: 8px 14px 8px 8px;
            border-radius: 999px;
            border: 1px solid rgba(37, 99, 235, 0.16);
            background: rgba(37, 99, 235, 0.08);
            color: #1e3a8a;
            font-weight: 800;
        }
        .sell-category-selected-art,
        .sell-category-card-art,
        .sell-subcategory-row-art {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: relative;
            box-sizing: border-box;
            overflow: hidden;
            background:
                radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.98) 28%, rgba(244, 246, 248, 0.98) 72%, rgba(239, 241, 244, 0.98) 100%);
            border: 1px solid rgba(231, 234, 238, 0.98);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.98),
                0 10px 22px rgba(15, 23, 42, 0.06);
            color: var(--sell-category-accent, var(--primary));
        }
        .sell-category-selected-art {
            width: 42px;
            height: 42px;
            padding: 7px;
            border-radius: 14px;
            font-size: 16px;
            flex: 0 0 42px;
        }
        .sell-category-selected-art img,
        .sell-category-card-art img,
        .sell-subcategory-row-art img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            display: block;
            transform: scale(var(--sell-category-image-scale, 1.12));
            transform-origin: center;
            filter: drop-shadow(0 10px 14px rgba(15, 23, 42, 0.08));
        }
        .sell-category-selected-art i,
        .sell-category-card-art i,
        .sell-subcategory-row-art i {
            font-size: 1em;
        }
        .sell-category-search {
            margin-bottom: 12px !important;
        }
        .sell-category-grid,
        .sell-specs-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }
        .sell-subcategory-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .sell-subcategory-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }
        .sell-subcategory-back {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1px solid rgba(37, 99, 235, 0.16);
            background: rgba(37, 99, 235, 0.08);
            color: #1e3a8a;
            font-weight: 800;
            border-radius: 999px;
            padding: 10px 14px;
            cursor: pointer;
        }
        .sell-subcategory-back:hover,
        .sell-subcategory-back:focus-visible {
            border-color: rgba(37, 99, 235, 0.3);
            background: rgba(37, 99, 235, 0.12);
            outline: none;
        }
        .sell-subcategory-breadcrumbs {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            min-height: 40px;
        }
        .sell-subcategory-crumb {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1px solid rgba(148, 163, 184, 0.24);
            background: #fff;
            color: var(--dark);
            border-radius: 999px;
            padding: 8px 12px;
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
        }
        .sell-subcategory-crumb.is-root {
            color: var(--primary);
        }
        .sell-subcategory-crumb.is-active {
            border-color: rgba(37, 99, 235, 0.25);
            background: rgba(37, 99, 235, 0.1);
            color: #1e3a8a;
        }
        .sell-category-card {
            display: flex;
            align-items: center;
            gap: 14px;
            justify-content: space-between;
            width: 100%;
            min-height: 98px;
            padding: 14px;
            border-radius: 18px;
            border: 1px solid rgba(148, 163, 184, 0.22);
            background: rgba(255, 255, 255, 0.95);
            text-align: start;
            cursor: pointer;
            transition: transform var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease;
        }
        .sell-category-card:hover,
        .sell-category-card:focus-visible {
            transform: translateY(-1px);
            border-color: var(--sell-category-accent, #2563eb);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
            outline: none;
        }
        .sell-category-card.is-active {
            border-color: var(--sell-category-accent, #2563eb);
            background: var(--sell-category-soft, rgba(37, 99, 235, 0.12));
            box-shadow: 0 12px 26px rgba(37, 99, 235, 0.12);
        }
        .sell-category-card-art {
            width: 68px;
            height: 68px;
            padding: 10px;
            border-radius: 22px;
            font-size: 18px;
            flex: 0 0 68px;
        }
        .sell-category-card-copy {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
            flex: 1 1 auto;
        }
        .sell-category-card-copy strong,
        .sell-category-card-copy small {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .sell-category-card-copy strong {
            font-size: 14px;
            font-weight: 800;
            color: var(--dark);
            white-space: normal;
        }
        .sell-category-card-copy small {
            font-size: 11px;
            font-weight: 700;
            color: var(--gray);
            white-space: nowrap;
        }
        .sell-category-empty {
            grid-column: 1 / -1;
            padding: 14px;
            border-radius: 14px;
            border: 1px dashed rgba(148, 163, 184, 0.45);
            color: var(--gray);
            text-align: center;
            font-weight: 700;
        }
        .sell-subcategory-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            width: 100%;
            min-height: 92px;
            padding: 14px 16px;
            border-radius: 18px;
            border: 1px solid rgba(148, 163, 184, 0.2);
            background: rgba(255, 255, 255, 0.98);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
            text-align: start;
            cursor: pointer;
            transition: transform var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease;
        }
        .sell-subcategory-row:hover,
        .sell-subcategory-row:focus-visible {
            transform: translateY(-1px);
            border-color: var(--sell-category-accent, #2563eb);
            box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
            outline: none;
        }
        .sell-subcategory-row.is-active {
            border-color: var(--sell-category-accent, #2563eb);
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.98), var(--sell-category-soft, rgba(37, 99, 235, 0.12)));
            box-shadow: 0 16px 30px rgba(37, 99, 235, 0.14);
        }
        .sell-subcategory-row.is-branch {
            border-style: solid;
        }
        .sell-subcategory-row-art {
            width: 60px;
            height: 60px;
            padding: 9px;
            border-radius: 20px;
            font-size: 17px;
            flex: 0 0 60px;
        }
        .sell-subcategory-copy {
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-width: 0;
            flex: 1 1 auto;
        }
        .sell-subcategory-copy strong {
            font-size: 16px;
            font-weight: 900;
            color: var(--dark);
        }
        .sell-subcategory-copy small {
            font-size: 12px;
            font-weight: 700;
            color: var(--gray);
        }
        .sell-subcategory-row-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 12px;
            background: var(--sell-category-soft, rgba(37, 99, 235, 0.12));
            color: var(--sell-category-accent, #2563eb);
            flex: 0 0 38px;
        }
        .sell-subcategory-row-icon i {
            font-size: 15px;
        }
        .sell-subcategory-copy .sell-subcategory-trail {
            font-size: 11px;
            font-weight: 700;
            color: #64748b;
        }
        .sell-media-shell {
            margin-top: 6px;
            margin-bottom: 12px;
            padding: 14px;
            border-radius: 18px;
            border: 1px solid rgba(37, 99, 235, 0.14);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 255, 0.92));
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
        }
        .sell-media-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }
        .sell-media-head strong {
            display: block;
            font-size: 18px;
            font-weight: 900;
            color: var(--dark);
        }
        .sell-media-reminder {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-top: 12px;
            padding: 14px 16px;
            border-radius: 18px;
            border: 1px solid rgba(37, 99, 235, 0.16);
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(14, 165, 233, 0.05));
            box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
            flex-wrap: wrap;
        }
        .sell-media-reminder-copy {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
            flex: 1 1 240px;
        }
        .sell-media-reminder-copy strong {
            font-size: 15px;
            font-weight: 900;
            color: #1e3a8a;
        }
        .sell-media-reminder-copy p {
            margin: 0;
            font-size: 12px;
            font-weight: 700;
            color: #475569;
        }
        .sell-media-reminder-btn {
            flex: 0 0 auto;
        }
        .sell-upload-area {
            cursor: pointer;
            margin-bottom: 12px;
        }
        .sell-upload-area:focus-visible {
            outline: 2px solid rgba(37, 99, 235, 0.42);
            outline-offset: 3px;
        }
        .sell-media-ai-assist {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
            padding: 14px 16px;
            border-radius: 18px;
            border: 1px solid rgba(16, 185, 129, 0.2);
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(59, 130, 246, 0.06));
            box-shadow: 0 10px 24px rgba(16, 185, 129, 0.08);
            flex-wrap: wrap;
        }
        .sell-media-ai-assist-copy {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
            flex: 1 1 240px;
        }
        .sell-media-ai-assist-copy strong {
            font-size: 15px;
            font-weight: 900;
            color: #0f766e;
        }
        .sell-media-ai-assist-copy p {
            margin: 0;
            font-size: 12px;
            font-weight: 700;
            color: #475569;
        }
        .sell-media-ai-assist-btn {
            flex: 0 0 auto;
        }
        .sell-media-preview-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
        }
        .sell-media-empty {
            grid-column: 1 / -1;
            padding: 16px;
            border-radius: 16px;
            border: 1px dashed rgba(148, 163, 184, 0.36);
            color: var(--gray);
            text-align: center;
            font-weight: 700;
        }
        .sell-media-card {
            position: relative;
            border-radius: 18px;
            border: 1px solid rgba(148, 163, 184, 0.22);
            background: #fff;
            box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06);
            overflow: hidden;
        }
        .sell-media-card.is-cover {
            border-color: rgba(37, 99, 235, 0.34);
            box-shadow: 0 14px 28px rgba(37, 99, 235, 0.14);
        }
        .sell-wizard-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }
        .sell-wizard-nav-btn {
            min-width: 132px;
        }
        .sell-wizard-footer-copy {
            flex: 1 1 220px;
            font-size: 12px;
            font-weight: 700;
            color: var(--gray);
            text-align: center;
        }
        .sell-media-cover-badge {
            position: absolute;
            top: 10px;
            inset-inline-start: 10px;
            z-index: 2;
            padding: 6px 10px;
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.9);
            color: #fff;
            font-size: 11px;
            font-weight: 800;
        }
        .sell-media-remove {
            position: absolute;
            top: 10px;
            inset-inline-end: 10px;
            z-index: 2;
            width: 34px;
            height: 34px;
            border-radius: 999px;
            border: none;
            background: rgba(255, 255, 255, 0.94);
            color: #dc2626;
            cursor: pointer;
            box-shadow: 0 6px 14px rgba(15, 23, 42, 0.16);
        }
        .sell-media-thumb {
            width: 100%;
            aspect-ratio: 1 / 1;
            border: none;
            padding: 0;
            background: linear-gradient(180deg, #f8fafc, #e2e8f0);
            cursor: pointer;
            display: block;
            overflow: hidden;
        }
        .sell-media-thumb img,
        .sell-media-thumb video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .sell-media-meta {
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .sell-media-meta small {
            color: var(--gray);
            font-weight: 700;
        }
        .sell-media-cover-action {
            width: 100%;
            border: 1px solid rgba(37, 99, 235, 0.18);
            background: rgba(37, 99, 235, 0.08);
            color: #1d4ed8;
            border-radius: 12px;
            padding: 10px 12px;
            font-weight: 800;
            cursor: pointer;
        }
        .sell-media-cover-action.is-active {
            background: #1d4ed8;
            border-color: #1d4ed8;
            color: #fff;
        }
        .photo-tips-modal {
            max-width: 860px;
        }
        .photo-tips-intro {
            color: var(--gray);
            margin-bottom: 14px;
        }
        .photo-tips-list {
            max-height: min(72vh, 760px);
            overflow-y: auto;
            padding-inline-end: 6px;
            display: grid;
            gap: 14px;
        }
        .photo-tip-card {
            border: 1px solid rgba(148, 163, 184, 0.2);
            border-radius: 18px;
            padding: 18px;
            background: #fff;
            box-shadow: 0 10px 20px rgba(15, 23, 42, 0.05);
        }
        .photo-tip-card h3 {
            margin: 0 0 8px;
            font-size: 20px;
            font-weight: 900;
            color: var(--dark);
        }
        .photo-tip-card p {
            margin: 0;
            color: var(--gray);
            line-height: 1.8;
        }
        .photo-tip-examples {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
            margin-top: 14px;
        }
        .photo-tip-example {
            position: relative;
            min-height: 110px;
            border-radius: 16px;
            padding: 16px;
            border: 1px solid rgba(148, 163, 184, 0.18);
            background: linear-gradient(135deg, #f8fafc, #e2e8f0);
        }
        .photo-tip-example strong {
            display: block;
            margin-bottom: 8px;
            font-size: 18px;
            font-weight: 900;
        }
        .photo-tip-example small {
            display: block;
            color: #475569;
            line-height: 1.6;
            font-weight: 700;
        }
        .photo-tip-example.is-good {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(59, 130, 246, 0.14));
        }
        .photo-tip-example.is-bad {
            background: linear-gradient(135deg, rgba(248, 113, 113, 0.16), rgba(251, 191, 36, 0.14));
        }
        .photo-tip-mark {
            position: absolute;
            top: 12px;
            inset-inline-end: 12px;
            width: 30px;
            height: 30px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 14px;
            font-weight: 900;
        }
        .photo-tip-example.is-good .photo-tip-mark {
            background: #16a34a;
        }
        .photo-tip-example.is-bad .photo-tip-mark {
            background: #dc2626;
        }
        .sell-spec-field .form-label {
            margin-bottom: 6px;
        }
        .form-label.is-required::after {
            content: ' *';
            color: #dc2626;
        }
        .car-smart-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 8px;
            flex-wrap: wrap;
        }
        .car-smart-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }
        .car-smart-grid .form-label {
            margin-bottom: 6px;
        }
        #car-smart-status {
            min-height: 18px;
        }
        body.dark-mode .car-smart-section {
            border-color: rgba(144, 168, 255, 0.3);
            background: linear-gradient(135deg, rgba(98, 0, 234, 0.12), rgba(0, 212, 255, 0.08));
        }
        body.dark-mode .sell-wizard-step {
            border-color: rgba(120, 144, 255, 0.18);
            background: rgba(19, 26, 38, 0.9);
            color: #cbd5e1;
        }
        body.dark-mode .sell-wizard-step.is-active {
            border-color: rgba(120, 144, 255, 0.3);
            background: rgba(88, 101, 242, 0.18);
            color: #dbe6ff;
        }
        body.dark-mode .sell-wizard-step.is-complete {
            border-color: rgba(52, 211, 153, 0.28);
            background: rgba(6, 95, 70, 0.24);
            color: #d1fae5;
        }
        body.dark-mode .sell-wizard-step-badge {
            background: rgba(8, 14, 24, 0.58);
        }
        body.dark-mode .sell-wizard-step-meta strong {
            color: #f6f7fb;
        }
        body.dark-mode .sell-wizard-step-meta span,
        body.dark-mode .sell-wizard-footer-copy {
            color: #aab4d0;
        }
        body.dark-mode .sell-draft-banner {
            border-color: rgba(96, 165, 250, 0.3);
            background: linear-gradient(135deg, rgba(30, 64, 175, 0.24), rgba(8, 47, 73, 0.32));
            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
        }
        body.dark-mode .sell-draft-banner-copy strong {
            color: #dbeafe;
        }
        body.dark-mode .sell-draft-banner-copy p {
            color: #cbd5f5;
        }
        body.dark-mode .sell-category-explorer,
        body.dark-mode .sell-subcategory-explorer,
        body.dark-mode .sell-specs-section {
            border-color: rgba(120, 144, 255, 0.28);
            background: linear-gradient(180deg, rgba(23, 28, 41, 0.92), rgba(16, 22, 34, 0.92));
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
        }
        body.dark-mode .sell-category-title,
        body.dark-mode .sell-category-card-copy strong,
        body.dark-mode .sell-subcategory-copy strong {
            color: #f6f7fb;
        }
        body.dark-mode .sell-category-selected {
            border-color: rgba(120, 144, 255, 0.3);
            background: rgba(88, 101, 242, 0.18);
            color: #dbe6ff;
        }
        body.dark-mode .sell-subcategory-back {
            border-color: rgba(120, 144, 255, 0.28);
            background: rgba(88, 101, 242, 0.18);
            color: #dbe6ff;
        }
        body.dark-mode .sell-subcategory-crumb {
            border-color: rgba(120, 144, 255, 0.18);
            background: rgba(19, 26, 38, 0.92);
            color: #dbe6ff;
        }
        body.dark-mode .sell-category-selected-art {
            background: linear-gradient(180deg, rgba(36, 45, 68, 0.96), rgba(17, 24, 39, 0.96));
            border-color: rgba(120, 144, 255, 0.18);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 12px 26px rgba(0, 0, 0, 0.24);
        }
        body.dark-mode .sell-category-card {
            border-color: rgba(120, 144, 255, 0.18);
            background: rgba(19, 26, 38, 0.9);
        }
        body.dark-mode .sell-category-card-art,
        body.dark-mode .sell-subcategory-row-art {
            background: linear-gradient(180deg, rgba(36, 45, 68, 0.96), rgba(17, 24, 39, 0.96));
            border-color: rgba(120, 144, 255, 0.18);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 12px 26px rgba(0, 0, 0, 0.24);
        }
        body.dark-mode .sell-category-card-copy small,
        body.dark-mode .sell-subcategory-copy small,
        body.dark-mode .sell-category-empty {
            color: #aab4d0;
        }
        body.dark-mode .sell-subcategory-row,
        body.dark-mode .sell-media-shell,
        body.dark-mode .photo-tip-card {
            border-color: rgba(120, 144, 255, 0.18);
            background: rgba(19, 26, 38, 0.92);
        }
        body.dark-mode .sell-media-head strong,
        body.dark-mode .photo-tip-card h3 {
            color: #f6f7fb;
        }
        body.dark-mode .sell-media-ai-assist {
            border-color: rgba(52, 211, 153, 0.24);
            background: linear-gradient(135deg, rgba(6, 95, 70, 0.28), rgba(30, 64, 175, 0.2));
            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
        }
        body.dark-mode .sell-media-ai-assist-copy strong {
            color: #ccfbf1;
        }
        body.dark-mode .sell-media-ai-assist-copy p {
            color: #d1fae5;
        }
        body.dark-mode .sell-media-reminder {
            border-color: rgba(120, 144, 255, 0.26);
            background: linear-gradient(135deg, rgba(30, 64, 175, 0.24), rgba(8, 47, 73, 0.3));
            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
        }
        body.dark-mode .sell-media-reminder-copy strong {
            color: #dbeafe;
        }
        body.dark-mode .sell-media-reminder-copy p {
            color: #cbd5f5;
        }
        body.dark-mode .sell-media-empty,
        body.dark-mode .photo-tips-intro,
        body.dark-mode .photo-tip-card p,
        body.dark-mode .sell-subcategory-copy .sell-subcategory-trail {
            color: #aab4d0;
        }
        body.dark-mode .sell-media-card {
            border-color: rgba(120, 144, 255, 0.18);
            background: rgba(19, 26, 38, 0.92);
        }
        body.dark-mode .sell-media-thumb {
            background: linear-gradient(180deg, rgba(51, 65, 85, 0.88), rgba(30, 41, 59, 0.96));
        }
        body.dark-mode .sell-media-cover-action {
            border-color: rgba(96, 165, 250, 0.25);
            background: rgba(37, 99, 235, 0.18);
            color: #dbeafe;
        }
        body.dark-mode .sell-media-cover-action.is-active {
            background: #3b82f6;
            color: #fff;
        }
        body.dark-mode .photo-tip-example {
            border-color: rgba(120, 144, 255, 0.18);
        }
        @media (max-width: 768px) {
            .sell-wizard-progress {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .sell-category-grid {
                grid-template-columns: 1fr;
            }
            .sell-specs-grid,
            .car-smart-grid {
                grid-template-columns: 1fr;
            }
            .sell-media-preview-grid,
            .photo-tip-examples {
                grid-template-columns: 1fr;
            }
            .sell-draft-banner,
            .sell-media-ai-assist {
                align-items: stretch;
            }
            .sell-draft-banner-actions,
            .sell-media-ai-assist-btn {
                width: 100%;
            }
            .sell-draft-banner-actions .btn {
                flex: 1 1 0;
            }
            .sell-media-reminder {
                align-items: stretch;
            }
            .sell-media-reminder-btn {
                width: 100%;
            }
            .sell-subcategory-toolbar {
                align-items: stretch;
            }
            .sell-subcategory-back {
                width: 100%;
                justify-content: center;
            }
            .sell-wizard-footer {
                flex-direction: column;
                align-items: stretch;
            }
            .sell-wizard-nav-btn {
                width: 100%;
                min-width: 0;
            }
            .sell-wizard-footer-copy {
                order: -1;
            }
        }
        .verify-card .status.ok {
            border-color: rgba(0, 200, 83, 0.35);
            background: rgba(0, 200, 83, 0.12);
            color: #0b8d43;
        }
        .verify-card .status.err {
            border-color: rgba(244, 67, 54, 0.35);
            background: rgba(244, 67, 54, 0.12);
            color: #b81d14;
        }
        .verify-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }
        .verify-upload { padding: 14px; min-height: 120px; }
        .verify-preview {
            margin-top: 10px;
            min-height: 36px;
        }
        .verify-upload-actions {
            margin-top: 8px;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .verify-upload-actions .btn {
            flex: 1 1 140px;
            min-width: 0;
        }
        #auction-verify-ocr-status {
            min-height: 18px;
        }
        #auction-verify-ocr-status.is-ok { color: #0b8d43; }
        #auction-verify-ocr-status.is-warn { color: #b57f00; }
        #auction-verify-ocr-status.is-error { color: #b81d14; }
        .verify-note {
            margin: 10px 0 12px;
            font-size: 12px;
            color: var(--gray);
        }
        .verify-consent {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin: 0 0 12px;
            font-size: 12px;
            color: var(--gray);
        }
        .verify-consent input {
            margin-top: 2px;
            flex: 0 0 auto;
        }
        #btn-auction-verify-submit { width: 100%; }
        @media (max-width: 768px) {
            .verify-grid { grid-template-columns: 1fr; }
        }
        body.dark-mode .verify-card {
            background: rgba(79, 140, 255, 0.12);
            border-color: rgba(79, 140, 255, 0.4);
        }
        body.dark-mode .verify-card .status {
            border-color: rgba(255,255,255,.18);
            background: rgba(0,0,0,.28);
            color: #d0d5df;
        }
        body.dark-mode .verify-card .status.ok {
            border-color: rgba(46, 229, 157, 0.35);
            background: rgba(46, 229, 157, 0.12);
            color: #a9f8d8;
        }
        body.dark-mode .verify-card .status.err {
            border-color: rgba(255, 94, 106, 0.35);
            background: rgba(255, 94, 106, 0.12);
            color: #ffd2d6;
        }
        body.dark-mode .verify-head p,
        body.dark-mode .verify-note,
        body.dark-mode .verify-consent { color: #d0d5df; }
        body.dark-mode #auction-verify-ocr-status.is-ok { color: #a9f8d8; }
        body.dark-mode #auction-verify-ocr-status.is-warn { color: #ffdca0; }
        body.dark-mode #auction-verify-ocr-status.is-error { color: #ffd2d6; }
        .auction-hub {
            margin: 20px 0 10px;
            padding: 18px;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(255, 152, 0, 0.14), rgba(255, 87, 34, 0.08));
            border: 1px solid rgba(255, 152, 0, 0.35);
            display: flex;
            justify-content: space-between;
            gap: 14px;
            align-items: center;
            flex-wrap: wrap;
        }
        .auction-hub-head h2 { margin: 0; font-size: 24px; font-weight: 900; color: #d84315; }
        .auction-hub-head p { margin: 6px 0 0; color: var(--gray); font-size: 13px; max-width: 780px; }
        body.dark-mode .auction-hub {
            background: linear-gradient(135deg, rgba(255, 152, 0, 0.2), rgba(255, 87, 34, 0.12));
            border-color: rgba(255, 152, 0, 0.5);
        }
        body.dark-mode .auction-hub-head h2 { color: #ffb74d; }
        body.dark-mode .auction-hub-head p { color: #d0d3dc; }
        #auction-single-filter { min-width: 170px; }
        .auction-room-shell {
            margin-top: 20px;
            background: white;
            border-radius: 18px;
            border: 1px solid rgba(255, 152, 0, 0.26);
            box-shadow: var(--shadow-sm);
            padding: 18px;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .auction-room-header h2 { margin: 8px 0 4px; font-size: 24px; color: #d84315; }
        .auction-room-header p { margin: 2px 0; color: var(--gray); }
        .auction-room-stats {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
        }
        .auction-room-stat {
            border: 1px solid rgba(255, 152, 0, 0.24);
            border-radius: 12px;
            padding: 10px;
            background: rgba(255, 152, 0, 0.06);
        }
        .auction-room-stat-label { font-size: 11px; color: var(--gray); margin-bottom: 4px; font-weight: 700; }
        .auction-room-stat-value { font-size: 15px; font-weight: 900; color: var(--dark); }
        .auction-room-body {
            display: grid;
            grid-template-columns: 1.5fr 1fr;
            gap: 12px;
        }
        .auction-room-column h3 { margin-bottom: 8px; font-size: 15px; }
        .auction-room-panel {
            min-height: 180px;
            max-height: 320px;
            overflow-y: auto;
            border: 1px solid rgba(98, 0, 234, 0.18);
            border-radius: 12px;
            padding: 8px;
            background: rgba(98, 0, 234, 0.04);
        }
        .auction-room-bid-row,
        .auction-room-user {
            padding: 8px 10px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.78);
            margin-bottom: 6px;
            font-size: 13px;
        }
        .auction-room-bid-row {
            display: grid;
            grid-template-columns: 1fr auto auto;
            gap: 8px;
            align-items: center;
        }
        .auction-room-bidder { color: var(--dark); font-weight: 700; }
        .auction-room-bid-price { color: var(--primary); font-weight: 900; }
        .auction-room-bid-time { color: var(--gray); font-size: 11px; }
        .auction-room-empty { color: var(--gray); font-size: 13px; padding: 10px 8px; }
        .auction-room-bid-box {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 10px;
            align-items: center;
        }
        .auction-room-bid-box .form-input { margin-bottom: 0; }
        .auction-room-note {
            grid-column: 1 / -1;
            margin: 0;
            font-size: 12px;
            color: var(--gray);
        }
        body.dark-mode .auction-room-shell {
            background: #1f1f28;
            border-color: rgba(255, 152, 0, 0.45);
        }
        body.dark-mode .auction-room-header h2 { color: #ffb74d; }
        body.dark-mode .auction-room-header p,
        body.dark-mode .auction-room-note,
        body.dark-mode .auction-room-stat-label { color: #c6cad8; }
        body.dark-mode .auction-room-stat {
            border-color: rgba(255, 152, 0, 0.45);
            background: rgba(255, 152, 0, 0.12);
        }
        body.dark-mode .auction-room-stat-value,
        body.dark-mode .auction-room-column h3 { color: #f3f5ff; }
        body.dark-mode .auction-room-panel {
            border-color: rgba(129, 102, 255, 0.35);
            background: rgba(129, 102, 255, 0.12);
        }
        body.dark-mode .auction-room-bid-row,
        body.dark-mode .auction-room-user { background: rgba(18, 19, 24, 0.66); color: #f3f5ff; }
        @media (max-width: 1024px) {
            .auction-room-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }
        @media (max-width: 768px) {
            .auction-room-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .auction-room-body { grid-template-columns: 1fr; }
            .auction-room-bid-box { grid-template-columns: 1fr; }
        }
        
        .filters {
            overflow-x: visible;
            white-space: normal;
            padding-bottom: 8px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            animation: sectionRise 0.55s ease-out 0.06s both;
        }
        .filters > * { scroll-snap-align: start; }
        .chip {
            padding: 8px 14px;
            background: linear-gradient(135deg, #ffffff 0%, #f4f7ff 100%);
            border-radius: 50px;
            font-size: 13px;
            font-weight: 700;
            color: #5f6881;
            border: 1px solid rgba(100, 118, 182, 0.2);
            cursor: pointer;
            transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
            flex: 0 0 auto;
            white-space: nowrap;
        }
        .chip.active { background: var(--primary); color: white; border-color: var(--primary); }
        
        .advanced-filters {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 10px;
            margin-bottom: 16px;
            padding: 12px;
            border-radius: 16px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            background: linear-gradient(135deg, rgba(245, 243, 255, 0.95) 0%, rgba(250, 250, 252, 0.98) 100%);
            animation: sectionRise 0.6s ease-out 0.12s both;
        }
        .market-command-center.filter-theme-dark .advanced-filters {
            border-color: rgba(113, 131, 187, 0.34);
            background: linear-gradient(140deg, rgba(20, 24, 36, 0.96), rgba(16, 21, 33, 0.96)) !important;
        }
        .market-command-center.filter-theme-dark .filter-field-label,
        .market-command-center.filter-theme-dark .distance-filter-value,
        .market-command-center.filter-theme-dark .price-range-head {
            color: #d6e0ff;
        }
        .market-command-center.filter-theme-dark .advanced-filters .filter-select,
        .market-command-center.filter-theme-dark .price-range-wrap,
        .market-command-center.filter-theme-dark .facet-filters-shell {
            border-color: rgba(129, 148, 205, 0.42);
            background: linear-gradient(140deg, rgba(31, 39, 60, 0.92), rgba(25, 33, 52, 0.92)) !important;
            color: #f2f6ff !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }
        .market-command-center.filter-theme-dark .advanced-filters .filter-select:focus {
            border-color: rgba(129, 98, 255, 0.66);
            box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.18);
        }
        .market-command-center.filter-theme-dark .price-range-wrap input[type="range"] {
            height: 4px;
            background: linear-gradient(90deg, rgba(122, 104, 255, 0.5), rgba(122, 104, 255, 0.98));
        }
        .market-command-center.filter-theme-dark .price-range-wrap input[type="range"]::-webkit-slider-thumb,
        .market-command-center.filter-theme-dark .price-range-wrap input[type="range"]::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border: 2px solid #101a2f;
            background: #8b78ff;
        }
        .advanced-filters > * {
            min-width: 0;
            width: 100%;
        }
        .advanced-filters.is-empty {
            display: none !important;
        }
        .advanced-filters::-webkit-scrollbar,
        .filters::-webkit-scrollbar {
            height: 8px;
        }
        .filter-field {
            display: flex;
            flex-direction: column;
            gap: 5px;
            min-width: 0;
        }
        .filter-field-label {
            font-size: 11px;
            font-weight: 800;
            color: #5d667b;
            padding-inline: 2px;
            line-height: 1.2;
        }
        .advanced-filters .filter-select {
            width: 100%;
            min-width: 0;
            height: 46px;
            padding: 0 12px;
            border-radius: 12px;
            border: 1px solid rgba(13, 20, 34, 0.12);
            outline: none;
            font-size: 13px;
            font-weight: 700;
            color: #111827;
            background: rgba(255, 255, 255, 0.95);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
            transition: border-color .2s ease, box-shadow .2s ease, transform .12s ease;
        }
        .advanced-filters .filter-select:focus {
            border-color: rgba(98, 0, 234, 0.45);
            box-shadow: 0 0 0 3px rgba(98, 0, 234, 0.12);
            transform: translateY(-1px);
        }
        .distance-filter-range {
            padding: 0 !important;
            height: auto !important;
        }
        .distance-filter-value {
            font-size: 11px;
            font-weight: 800;
            color: #5d667b;
            padding-inline: 2px;
        }
        .facet-filters-shell {
            grid-column: 1 / -1;
            display: none;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 10px;
            padding: 10px;
            border-radius: 12px;
            border: 1px dashed rgba(98, 0, 234, 0.25);
            background: rgba(255, 255, 255, 0.78);
        }
        .facet-filters-shell.is-visible {
            display: grid;
        }
        .facet-filters-head {
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-size: 12px;
            font-weight: 900;
            color: #464f65;
            padding-inline: 2px;
        }
        .facet-filter-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            color: #ffffff;
            background: linear-gradient(135deg, rgba(98, 0, 234, 0.9), rgba(66, 84, 255, 0.9));
            box-shadow: 0 8px 16px rgba(72, 35, 199, 0.25);
        }
        .facet-filter-reset {
            border: 1px solid rgba(13, 20, 34, 0.18);
            background: rgba(255, 255, 255, 0.9);
            color: #2f3952;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 800;
            padding: 6px 10px;
            cursor: pointer;
        }
        .facet-filter-reset:hover {
            border-color: rgba(98, 0, 234, 0.4);
        }
        .price-range-wrap {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
            min-width: 0;
            padding: 10px 12px;
            border: 1px solid rgba(13, 20, 34, 0.12);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.96);
            grid-column: 1 / -1;
        }
        .price-range-head {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            font-size: 12px;
            font-weight: 800;
            color: #5b6170;
        }
        .price-range-wrap input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 7px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(98, 0, 234, 0.28), rgba(98, 0, 234, 0.9));
            outline: none;
            border: 0;
        }
        .price-range-wrap input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #6200ea;
            border: 2px solid #fff;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
            cursor: pointer;
        }
        .price-range-wrap input[type="range"]::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #6200ea;
            border: 2px solid #fff;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
            cursor: pointer;
        }

        /* ================= LIQUID GLASS ANIMATION LAYER ================= */
        :is(.btn-ghost, nav a, .chip, .dash-tab, .language-btn) {
            position: relative;
            overflow: hidden;
            isolation: isolate;
            backdrop-filter: blur(8px) saturate(128%);
            -webkit-backdrop-filter: blur(8px) saturate(128%);
            box-shadow: var(--liquid-glass-shadow);
            color: #2c3455;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
        }
        :is(.btn-ghost, nav a, .chip, .dash-tab, .language-btn)::before {
            content: "";
            position: absolute;
            inset: -110% -42%;
            background:
                radial-gradient(circle at 20% 30%, var(--liquid-glass-blob-a), transparent 52%),
                radial-gradient(circle at 78% 70%, var(--liquid-glass-blob-b), transparent 58%);
            opacity: 0.35;
            animation: liquidBlobDrift 11.5s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
        }
        :is(.btn-ghost, nav a, .chip, .dash-tab, .language-btn)::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(118deg, transparent 18%, var(--liquid-glass-sheen) 44%, transparent 68%);
            transform: translateX(-140%);
            animation: liquidSheenSweep 12s ease-in-out infinite;
            opacity: 0.26;
            pointer-events: none;
            z-index: 0;
        }

        :is(nav a, .chip, .dash-tab, .language-btn, .btn-ghost) {
            border-color: var(--liquid-glass-border);
            background: var(--liquid-glass-bg);
        }
        body.dark-mode :is(.btn-ghost, nav a, .chip, .dash-tab, .language-btn) {
            color: #e9efff;
            text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
        }
        :is(.search-area, .advanced-filters, .price-range-wrap) {
            position: relative;
            overflow: hidden;
            isolation: isolate;
            backdrop-filter: blur(10px) saturate(130%);
            -webkit-backdrop-filter: blur(10px) saturate(130%);
            border-color: var(--liquid-glass-border) !important;
            background: var(--liquid-glass-bg-strong) !important;
            box-shadow: var(--liquid-glass-shadow);
        }
        :is(.search-area, .advanced-filters, .price-range-wrap)::before {
            content: "";
            position: absolute;
            inset: -90% -20%;
            background:
                radial-gradient(circle at 18% 24%, var(--liquid-glass-blob-a), transparent 50%),
                radial-gradient(circle at 84% 72%, var(--liquid-glass-blob-b), transparent 56%);
            opacity: 0.28;
            animation: liquidPanelFlow 18s ease-in-out infinite alternate;
            pointer-events: none;
            z-index: 0;
        }
        :is(.search-area, .advanced-filters, .price-range-wrap) > * {
            position: relative;
            z-index: 1;
        }

        .filter-select {
            border-color: var(--liquid-glass-border);
            background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(239, 244, 255, 0.9), rgba(255, 255, 255, 0.86));
            background-size: 220% 220%;
            animation: liquidFieldDrift 14s ease-in-out infinite;
        }
        .filter-select:focus {
            box-shadow: 0 0 0 3px rgba(108, 97, 226, 0.16), var(--liquid-glass-shadow);
        }

        @media (max-width: 1180px) {
            .advanced-filters {
                grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            }
        }
        @media (max-width: 900px) {
            .advanced-filters {
                grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
            }
            .filters {
                overflow-x: auto;
                white-space: nowrap;
                flex-wrap: nowrap;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior-x: contain;
                scroll-snap-type: x proximity;
            }
        }
        .ad-strip {
            margin: 8px 0 4px;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            animation: sectionRise 0.62s ease-out 0.16s both;
        }
        .ad-card {
            position: relative;
            border-radius: 14px;
            padding: 14px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
        }
        .ad-card h4 {
            margin: 0 0 4px;
            font-size: 17px;
            font-weight: 900;
        }
        .ad-card p {
            margin: 0;
            font-size: 12px;
            color: #444;
            font-weight: 600;
        }
        .ad-banner-image {
            width: 100%;
            height: clamp(112px, 15vw, 164px);
            border-radius: 10px;
            margin: 8px 0 10px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: #eceef5;
        }
        .ad-banner-image img,
        .ad-banner-image video {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            object-position: center;
            background: #0f172a;
        }
        .ad-banner-image.fit-contain img,
        .ad-banner-image.fit-contain video {
            object-fit: contain;
        }
        .ad-banner-image.fit-cover img,
        .ad-banner-image.fit-cover video {
            object-fit: cover;
        }
        .ad-banner-media {
            position: relative;
            width: 100%;
            height: clamp(118px, 15.5vw, 172px);
            margin: 8px 0 10px;
            border-radius: 11px;
            overflow: hidden;
            border: 1px solid rgba(0, 0, 0, 0.1);
            background: #0f172a;
        }
        .ad-banner-slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 0.38s ease;
            pointer-events: none;
        }
        .ad-banner-slide.is-active {
            opacity: 1;
            z-index: 1;
        }
        .ad-banner-slide img,
        .ad-banner-slide video {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            object-position: center;
        }
        .ad-banner-media.fit-contain .ad-banner-slide img,
        .ad-banner-media.fit-contain .ad-banner-slide video {
            object-fit: contain;
        }
        .ad-banner-media.fit-cover .ad-banner-slide img,
        .ad-banner-media.fit-cover .ad-banner-slide video {
            object-fit: cover;
        }
        .ad-banner-slide video {
            background: #0f172a;
        }
        .ad-banner-dots {
            position: absolute;
            left: 50%;
            bottom: 8px;
            transform: translateX(-50%);
            display: inline-flex;
            align-items: center;
            gap: 5px;
            z-index: 2;
        }
        .ad-banner-dot {
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.62);
            border: 1px solid rgba(0, 0, 0, 0.2);
            transition: transform 0.2s ease, background 0.2s ease;
        }
        .ad-banner-dot.is-active {
            background: #fff;
            transform: scale(1.2);
        }
        .ad-card-rice {
            background: linear-gradient(135deg, #fff7e0 0%, #ffe8b1 100%);
        }
        .ad-card-brand {
            background: linear-gradient(135deg, #ebf3ff 0%, #cce0ff 100%);
        }
        .ad-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            padding: 5px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            line-height: 1.3;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            max-width: calc(100% - 24px);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            color: #fff;
            background: #111;
            z-index: 3;
        }
        .ad-card-empty {
            border-style: dashed;
            background: linear-gradient(135deg, #f6f7ff 0%, #eef1ff 100%);
        }
        #ads-section.ad-strip {
            margin: 14px 0 18px;
            grid-template-columns: 1fr;
            gap: 14px;
        }
        #ads-section .ad-card-banner {
            display: block;
            padding: 0;
            border: 0;
            border-radius: 30px;
            background: transparent;
            box-shadow: none;
            text-decoration: none;
            color: inherit;
            overflow: visible;
        }
        #ads-section .ad-card-banner .ad-banner-image,
        #ads-section .ad-card-banner .ad-banner-media {
            margin: 0;
            width: 100%;
            height: clamp(156px, 20vw, 270px);
            min-height: 156px;
            max-height: 270px;
            aspect-ratio: auto;
            border-radius: 30px;
            border: 0;
            box-shadow: 0 22px 42px rgba(58, 44, 98, 0.14);
            background: linear-gradient(135deg, #dfe5ff 0%, #cfd9ff 100%);
        }
        #ads-section .ad-card-banner .ad-banner-slide img,
        #ads-section .ad-card-banner .ad-banner-slide video,
        #ads-section .ad-card-banner .ad-banner-image img,
        #ads-section .ad-card-banner .ad-banner-image video {
            object-position: center;
        }
        #ads-section .ad-card-banner .ad-badge {
            top: 16px;
            left: 16px;
            padding: 7px 12px;
            font-size: 11px;
            font-weight: 900;
            background: rgba(17, 24, 39, 0.78);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
        }
        #ads-section .ad-card-banner h4,
        #ads-section .ad-card-banner p {
            display: none;
        }

        #ads-section .ad-card.reveal-on-scroll:not(.is-visible) {
            opacity: 1;
            transform: none;
            pointer-events: auto;
        }

        .broadcast-feed {
            margin: 8px 0 8px;
            border: 1px solid rgba(50, 68, 124, 0.2);
            border-radius: 14px;
            background: linear-gradient(135deg, rgba(242, 247, 255, 0.9) 0%, rgba(233, 240, 255, 0.95) 100%);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
            animation: sectionRise 0.62s ease-out 0.18s both;
        }
        .broadcast-feed-head {
            padding: 12px 14px 6px;
            border-bottom: 1px solid rgba(50, 68, 124, 0.12);
        }
        .broadcast-feed-head h3 {
            margin: 0;
            font-size: 14px;
            font-weight: 900;
            color: #1f315f;
        }
        .broadcast-feed-list {
            display: grid;
            gap: 8px;
            padding: 10px;
        }
        .broadcast-card {
            border: 1px solid rgba(32, 47, 88, 0.12);
            border-radius: 11px;
            background: rgba(255, 255, 255, 0.92);
            padding: 10px 11px;
        }
        .broadcast-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 6px;
            flex-wrap: wrap;
        }
        .broadcast-card-kind {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 800;
            color: #334a8d;
        }
        .broadcast-card-priority {
            border: 1px solid rgba(43, 61, 112, 0.2);
            border-radius: 999px;
            padding: 3px 8px;
            font-size: 10px;
            font-weight: 900;
            color: #24386f;
            background: rgba(255, 255, 255, 0.88);
        }
        .broadcast-card-priority.is-critical {
            color: #fff;
            border-color: #d9465f;
            background: #d9465f;
        }
        .broadcast-card-priority.is-high {
            color: #7a3f00;
            border-color: rgba(255, 166, 0, 0.4);
            background: rgba(255, 199, 86, 0.25);
        }
        .broadcast-card-title {
            margin: 0 0 4px;
            font-size: 14px;
            font-weight: 900;
            color: #1e2f59;
            line-height: 1.35;
        }
        .broadcast-card-message {
            margin: 0;
            font-size: 12px;
            color: #334664;
            line-height: 1.45;
            white-space: pre-wrap;
        }
        .broadcast-card-meta {
            margin-top: 7px;
            font-size: 11px;
            color: #617399;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            flex-wrap: wrap;
        }
        .broadcast-card-link {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 11px;
            font-weight: 800;
            color: #2d4ab5;
            text-decoration: none;
        }
        .broadcast-card-link:hover {
            text-decoration: underline;
        }
        .broadcast-card-action-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 1px solid rgba(62, 92, 196, 0.25);
            background: rgba(77, 111, 226, 0.1);
            color: #2d4ab5;
            border-radius: 999px;
            padding: 5px 10px;
            font-size: 11px;
            font-weight: 800;
            cursor: pointer;
            transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
        }
        .broadcast-card-action-btn:hover {
            background: rgba(77, 111, 226, 0.18);
            transform: translateY(-1px);
        }
        .broadcast-card.is-sticky {
            border-color: rgba(143, 89, 0, 0.35);
            box-shadow: inset 0 0 0 1px rgba(143, 89, 0, 0.12);
        }
        .broadcast-card.is-highlight {
            animation: broadcastPulse 1.3s ease;
        }
        @keyframes broadcastPulse {
            0% { box-shadow: 0 0 0 0 rgba(84, 119, 255, 0.45); }
            100% { box-shadow: 0 0 0 16px rgba(84, 119, 255, 0); }
        }

        .banner-quick-editor {
            margin: 10px 0 6px;
            padding: 14px;
            border: 1px dashed rgba(66, 75, 114, 0.35);
            border-radius: 14px;
            background: linear-gradient(135deg, #ffffff 0%, #f6f8ff 100%);
            box-shadow: var(--shadow-sm);
        }
        .banner-quick-editor-head h3 {
            margin: 0 0 4px;
            font-size: 16px;
            font-weight: 900;
        }
        .banner-quick-editor-head p {
            margin: 0;
            font-size: 12px;
            color: var(--gray);
            font-weight: 600;
        }
        .banner-quick-editor-form {
            margin-top: 12px;
        }
        .banner-quick-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }
        .banner-quick-card {
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 12px;
            padding: 10px;
            background: #fff;
            display: grid;
            gap: 8px;
        }
        .banner-quick-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 2px;
        }
        .banner-quick-card-head strong {
            font-size: 13px;
        }
        .banner-quick-toggle {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: var(--text);
            font-weight: 700;
            cursor: pointer;
        }
        .banner-quick-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 12px;
        }
        .banner-quick-actions-toolbar {
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }
        .banner-quick-grid-stack {
            grid-template-columns: minmax(0, 1fr);
        }
        .banner-quick-card-wide {
            gap: 12px;
        }
        .banner-quick-card-actions {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .banner-quick-field-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }
        .banner-quick-field {
            display: grid;
            gap: 6px;
        }
        .banner-quick-field span {
            font-size: 12px;
            font-weight: 800;
            color: #334155;
        }
        .banner-quick-field-full {
            grid-column: 1 / -1;
        }
        .banner-quick-note {
            margin: 0;
            font-size: 12px;
            line-height: 1.5;
            color: #64748b;
        }
        .banner-quick-empty {
            padding: 18px 14px;
            border: 1px dashed rgba(148, 163, 184, 0.45);
            border-radius: 12px;
            background: rgba(248, 250, 252, 0.88);
            text-align: center;
            color: #64748b;
            font-size: 13px;
            font-weight: 700;
        }
        body.dark-mode .filter-select {
            background-image: linear-gradient(135deg, rgba(49, 51, 69, 0.95), rgba(33, 38, 58, 0.95), rgba(49, 51, 69, 0.95)) !important;
            background-size: 220% 220% !important;
            animation: liquidFieldDrift 10.5s ease-in-out infinite !important;
            border-color: rgba(132, 146, 186, 0.22) !important;
            color: #f4f6ff !important;
        }
        body.dark-mode .advanced-filters {
            border-color: rgba(150, 162, 195, 0.18) !important;
            background: linear-gradient(135deg, rgba(29, 29, 40, 0.9) 0%, rgba(20, 20, 27, 0.96) 100%) !important;
        }
        body.dark-mode .advanced-filters .filter-select {
            background-image: linear-gradient(135deg, rgba(49, 51, 69, 0.95), rgba(33, 38, 58, 0.95), rgba(49, 51, 69, 0.95)) !important;
            background-size: 220% 220% !important;
            animation: liquidFieldDrift 10.5s ease-in-out infinite !important;
            border-color: rgba(132, 146, 186, 0.22) !important;
            color: #f4f6ff !important;
        }
        body.dark-mode .advanced-filters .filter-select:focus {
            border-color: rgba(157, 113, 255, 0.55) !important;
            box-shadow: 0 0 0 3px rgba(157, 113, 255, 0.18) !important;
        }
        body.dark-mode .filter-field-label {
            color: #d6def5 !important;
        }
        body.dark-mode .distance-filter-value {
            color: #d6def5 !important;
        }
        body.dark-mode .facet-filters-shell {
            border-color: rgba(163, 141, 255, 0.4) !important;
            background: rgba(28, 31, 47, 0.86) !important;
        }
        body.dark-mode .facet-filters-head {
            color: #d6def5 !important;
        }
        body.dark-mode .facet-filter-reset {
            background: rgba(24, 31, 51, 0.9) !important;
            border-color: rgba(143, 160, 202, 0.35) !important;
            color: #d6def5 !important;
        }
        body.dark-mode .price-range-wrap {
            background: rgba(39, 40, 53, 0.92) !important;
            border-color: rgba(132, 146, 186, 0.22) !important;
        }
        body.dark-mode .price-range-head {
            color: #d9e0ff !important;
        }
        body.dark-mode .price-range-wrap input[type="range"] {
            background: linear-gradient(90deg, rgba(157, 113, 255, 0.35), rgba(157, 113, 255, 0.95)) !important;
        }
        body.dark-mode .ad-card-rice {
            background: linear-gradient(135deg, #3a3120 0%, #4a3c26 100%) !important;
            border-color: #5a4a2f !important;
        }
        body.dark-mode .ad-card-brand {
            background: linear-gradient(135deg, #1e2a3f 0%, #243553 100%) !important;
            border-color: #30466b !important;
        }
        body.dark-mode .ad-card p {
            color: #d7d7d7 !important;
        }
        body.dark-mode .ad-banner-image {
            border-color: rgba(255, 255, 255, 0.16);
        }
        body.dark-mode .ad-banner-image img,
        body.dark-mode .ad-banner-image video {
            background: #121827;
        }
        body.dark-mode .ad-banner-media {
            border-color: rgba(255, 255, 255, 0.16);
            background: #121827;
        }
        body.dark-mode .ad-banner-dot {
            border-color: rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.5);
        }
        body.dark-mode .ad-banner-dot.is-active {
            background: #fff;
        }
        body.dark-mode .ad-card-empty {
            background: linear-gradient(135deg, #1f2740 0%, #273353 100%) !important;
            border-color: #3c4e79 !important;
        }
        body.dark-mode #ads-section .ad-card-banner .ad-banner-image,
        body.dark-mode #ads-section .ad-card-banner .ad-banner-media {
            box-shadow: 0 24px 44px rgba(0, 0, 0, 0.28);
        }
        body.dark-mode #ads-section .ad-card-banner .ad-badge {
            background: rgba(15, 23, 42, 0.82);
        }
        body.dark-mode .broadcast-feed {
            border-color: rgba(126, 148, 206, 0.22);
            background: linear-gradient(135deg, rgba(23, 29, 45, 0.95) 0%, rgba(29, 38, 58, 0.95) 100%);
        }
        body.dark-mode .broadcast-feed-head {
            border-color: rgba(126, 148, 206, 0.18);
        }
        body.dark-mode .broadcast-feed-head h3 {
            color: #e4ecff;
        }
        body.dark-mode .broadcast-card {
            border-color: rgba(126, 148, 206, 0.22);
            background: rgba(18, 24, 38, 0.94);
        }
        body.dark-mode .broadcast-card-kind {
            color: #9eb7ff;
        }
        body.dark-mode .broadcast-card-priority {
            color: #dbe6ff;
            border-color: rgba(140, 162, 221, 0.32);
            background: rgba(29, 38, 58, 0.92);
        }
        body.dark-mode .broadcast-card-title {
            color: #edf2ff;
        }
        body.dark-mode .broadcast-card-message {
            color: #c4d2ee;
        }
        body.dark-mode .broadcast-card-meta {
            color: #9db2de;
        }
        body.dark-mode .broadcast-card-link {
            color: #a6bcff;
        }
        body.dark-mode .broadcast-card-action-btn {
            color: #c5d5ff;
            border-color: rgba(150, 174, 247, 0.28);
            background: rgba(84, 119, 255, 0.18);
        }
        body.dark-mode .broadcast-card-action-btn:hover {
            background: rgba(84, 119, 255, 0.28);
        }
        body.dark-mode .banner-quick-editor {
            border-color: rgba(140, 156, 196, 0.32);
            background: linear-gradient(135deg, rgba(26, 29, 45, 0.96) 0%, rgba(21, 24, 36, 0.98) 100%);
        }
        body.dark-mode .banner-quick-editor-head p {
            color: #c9d1f1;
        }
        body.dark-mode .banner-quick-card {
            background: rgba(36, 41, 61, 0.92);
            border-color: rgba(140, 156, 196, 0.24);
        }
        body.dark-mode .banner-quick-toggle {
            color: #eff3ff;
        }
        body.dark-mode .banner-quick-field span {
            color: #d6def5;
        }
        body.dark-mode .banner-quick-note {
            color: #9fb0d5;
        }
        body.dark-mode .banner-quick-empty {
            background: rgba(17, 24, 39, 0.9);
            border-color: rgba(148, 163, 184, 0.35);
            color: #d6def5;
        }

        .market-sections-shell {
            display: grid;
            gap: 28px;
            margin-top: 24px;
            animation: sectionRise 0.65s ease-out 0.15s both;
        }
        .market-section-row {
            display: grid;
            gap: 16px;
            padding-top: 2px;
        }
        .market-section-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .market-section-head h3 {
            margin: 0;
            font-size: clamp(22px, 2vw, 30px);
            font-weight: 900;
            color: #121b33;
        }
        .market-section-more {
            border: 0;
            background: transparent;
            color: var(--primary);
            font-weight: 900;
            font-size: 15px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            padding: 4px 0;
        }
        .market-section-more i {
            font-size: 15px;
        }
        .market-section-chip-row {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .market-section-chip {
            border: 1px solid rgba(104, 120, 186, 0.18);
            background: rgba(255, 255, 255, 0.88);
            color: #33415f;
            font-size: 12px;
            font-weight: 800;
            line-height: 1.2;
            white-space: nowrap;
            padding: 7px 12px;
            border-radius: 999px;
            cursor: pointer;
            box-shadow: 0 8px 16px rgba(34, 43, 78, 0.08);
        }
        .market-section-track {
            display: flex;
            gap: 14px;
            overflow-x: auto;
            overflow-y: hidden;
            padding-bottom: 6px;
            scrollbar-width: thin;
            scroll-snap-type: x proximity;
            -webkit-overflow-scrolling: touch;
        }
        .market-section-card {
            position: relative;
            flex: 0 0 clamp(220px, 21vw, 286px);
            min-width: 220px;
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid rgba(77, 94, 150, 0.14);
            background: rgba(255, 255, 255, 0.98);
            box-shadow: var(--shadow-sm);
            cursor: pointer;
            transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
            scroll-snap-align: start;
        }
        .market-section-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
            border-color: rgba(98, 0, 234, 0.2);
        }
        .market-section-media {
            position: relative;
            height: clamp(190px, 18vw, 230px);
            overflow: hidden;
            background: #e8ecf7;
        }
        .market-section-media img,
        .market-section-media video {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            background: #eef2fb;
        }
        .market-section-price {
            position: absolute;
            left: 12px;
            bottom: 12px;
            z-index: 2;
            padding: 8px 12px;
            border-radius: 14px;
            background: rgba(18, 23, 36, 0.76);
            color: #fff;
            font-size: 14px;
            font-weight: 900;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }
        .market-section-favorite {
            position: absolute;
            top: 12px;
            left: 12px;
            z-index: 2;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.35);
            background: rgba(28, 33, 49, 0.42);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }
        .market-section-favorite.is-active {
            color: #ff4f7a;
            background: rgba(255, 255, 255, 0.92);
        }
        .market-section-card-body {
            display: grid;
            gap: 8px;
            padding: 12px 2px 0;
        }
        .market-section-title {
            margin: 0;
            font-size: 14px;
            font-weight: 800;
            line-height: 1.5;
            color: #18233d;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .market-section-meta {
            margin: 0;
            color: #5d6885;
            font-size: 12px;
            font-weight: 700;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .market-section-card-copy {
            padding: 0 2px 2px;
        }
        .market-section-card.is-locked .market-section-card-copy {
            display: none;
        }
        .market-section-locked-note {
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: 12px;
            z-index: 2;
            padding: 10px 12px;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.94);
            color: #1f2a44;
            font-size: 12px;
            font-weight: 900;
            line-height: 1.6;
            text-align: center;
            box-shadow: 0 10px 18px rgba(19, 28, 52, 0.14);
        }
        .market-section-empty {
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 86px;
            padding: 18px;
            border-radius: 18px;
            border: 1px dashed rgba(99, 116, 190, 0.24);
            background: rgba(255, 255, 255, 0.78);
            color: #52607d;
            font-size: 13px;
            font-weight: 700;
        }
        .market-section-empty i {
            color: var(--primary);
            font-size: 18px;
        }
        .market-section-row-discovery {
            gap: 18px;
            padding-top: 6px;
        }
        .market-section-row-discovery .market-section-head {
            align-items: flex-end;
            gap: 18px;
        }
        .market-section-row-discovery .market-section-head h3 {
            font-size: clamp(24px, 2.15vw, 42px);
            font-weight: 900;
            letter-spacing: -0.03em;
            color: #0f172b;
        }
        .market-section-row-discovery .market-section-more {
            color: #1766ff;
            font-size: clamp(18px, 1.25vw, 28px);
            font-weight: 900;
            gap: 10px;
            padding: 0;
        }
        .market-section-row-discovery .market-section-more i {
            font-size: 0.95em;
        }
        .market-section-row-discovery .market-section-chip-row {
            display: none;
        }
        .market-section-row-discovery .market-section-track {
            gap: 18px;
            padding-bottom: 4px;
            scrollbar-width: none;
        }
        .market-section-row-discovery .market-section-track::-webkit-scrollbar {
            display: none;
        }
        .market-section-row-discovery .market-section-card {
            flex: 0 0 clamp(220px, 16vw, 278px);
            min-width: clamp(220px, 16vw, 278px);
            border: 0;
            border-radius: 0;
            overflow: visible;
            background: transparent;
            box-shadow: none;
        }
        .market-section-row-discovery .market-section-card:hover {
            transform: translateY(-4px);
            box-shadow: none;
            border-color: transparent;
        }
        .market-section-row-discovery .market-section-media {
            height: auto;
            aspect-ratio: 1.12 / 1;
            border-radius: 18px;
            background: #dfe8f7;
            box-shadow: 0 18px 38px rgba(18, 30, 58, 0.12);
        }
        .market-section-row-discovery .market-section-media::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(8, 12, 20, 0) 20%, rgba(8, 12, 20, 0.1) 54%, rgba(8, 12, 20, 0.56) 100%);
            pointer-events: none;
            z-index: 1;
        }
        .market-section-row-discovery .market-section-media img,
        .market-section-row-discovery .market-section-media video {
            border-radius: inherit;
        }
        .market-section-row-discovery .market-section-favorite {
            top: 12px;
            left: 12px;
            width: 44px;
            height: 44px;
            border: 0;
            background: rgba(86, 95, 114, 0.76);
            box-shadow: 0 14px 24px rgba(17, 24, 39, 0.16);
        }
        .market-section-row-discovery .market-section-favorite.is-active {
            background: rgba(255, 255, 255, 0.94);
        }
        .market-section-row-discovery .market-section-price {
            left: 12px;
            bottom: 12px;
            z-index: 2;
            padding: 9px 13px;
            border-radius: 13px;
            background: rgba(16, 21, 32, 0.78);
            box-shadow: 0 14px 26px rgba(10, 14, 22, 0.2);
        }
        .market-section-row-discovery .market-section-card-copy {
            padding: 12px 2px 0;
        }
        .market-section-row-discovery .market-section-card-body {
            gap: 4px;
            padding: 0;
        }
        .market-section-row-discovery .market-section-title {
            font-size: 16px;
            font-weight: 800;
            line-height: 1.4;
            color: #121826;
            -webkit-line-clamp: 1;
        }
        .market-section-row-discovery .market-section-meta {
            font-size: 14px;
            font-weight: 500;
            line-height: 1.45;
            color: #263247;
            -webkit-line-clamp: 2;
        }
        body.dark-mode .market-section-head h3 {
            color: #edf2ff;
        }
        body.dark-mode .market-section-chip {
            border-color: rgba(133, 149, 206, 0.22);
            background: rgba(24, 31, 53, 0.92);
            color: #dde7ff;
            box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
        }
        body.dark-mode .market-section-card {
            background: rgba(20, 27, 46, 0.96);
            border-color: rgba(130, 145, 196, 0.16);
        }
        body.dark-mode .market-section-media {
            background: #182036;
        }
        body.dark-mode .market-section-title {
            color: #eef3ff;
        }
        body.dark-mode .market-section-meta {
            color: #afbfdf;
        }
        body.dark-mode .market-section-locked-note {
            background: rgba(20, 27, 46, 0.94);
            color: #edf3ff;
            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.26);
        }
        body.dark-mode .market-section-empty {
            border-color: rgba(132, 146, 204, 0.24);
            background: rgba(19, 27, 46, 0.86);
            color: #cfdbf8;
        }
        body.dark-mode .market-section-row-discovery .market-section-head h3 {
            color: #f3f6ff;
        }
        body.dark-mode .market-section-row-discovery .market-section-more {
            color: #6ea6ff;
        }
        body.dark-mode .market-section-row-discovery .market-section-media {
            background: #1a2236;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }
        body.dark-mode .market-section-row-discovery .market-section-favorite {
            background: rgba(27, 34, 51, 0.78);
        }
        body.dark-mode .market-section-row-discovery .market-section-title {
            color: #edf3ff;
        }
        body.dark-mode .market-section-row-discovery .market-section-meta {
            color: #d4def5;
        }
        .products { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(12px, 1.8vw, 22px); margin-top: 20px; animation: sectionRise 0.65s ease-out 0.15s both; }
        @media (max-width: 768px) { .products { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
        @media (max-width: 480px) { .products { grid-template-columns: 1fr; } }
        @media (max-width: 768px) {
            .market-sections-shell {
                gap: 22px;
                margin-top: 18px;
            }
            .market-section-row {
                gap: 12px;
            }
            .market-section-head h3 {
                font-size: 20px;
            }
            .market-section-track {
                gap: 12px;
            }
            .market-section-card {
                flex-basis: 220px;
                min-width: 220px;
            }
            .market-section-media {
                height: 188px;
            }
            .market-section-price {
                font-size: 13px;
                padding: 7px 11px;
            }
            .market-section-row-discovery {
                gap: 14px;
            }
            .market-section-row-discovery .market-section-head {
                align-items: center;
            }
            .market-section-row-discovery .market-section-head h3 {
                font-size: 21px;
            }
            .market-section-row-discovery .market-section-more {
                font-size: 15px;
                gap: 8px;
            }
            .market-section-row-discovery .market-section-track {
                gap: 14px;
            }
            .market-section-row-discovery .market-section-card {
                flex-basis: 188px;
                min-width: 188px;
            }
            .market-section-row-discovery .market-section-media {
                border-radius: 16px;
            }
            .market-section-row-discovery .market-section-favorite {
                top: 10px;
                left: 10px;
                width: 40px;
                height: 40px;
            }
            .market-section-row-discovery .market-section-price {
                left: 10px;
                bottom: 10px;
                padding: 8px 11px;
                font-size: 12.5px;
            }
            .market-section-row-discovery .market-section-card-copy {
                padding-top: 10px;
            }
            .market-section-row-discovery .market-section-title {
                font-size: 14px;
            }
            .market-section-row-discovery .market-section-meta {
                font-size: 12px;
            }
        }
        @media (max-width: 480px) {
            .market-section-head {
                align-items: flex-start;
            }
            .market-section-head h3 {
                font-size: 18px;
            }
            .market-section-more {
                font-size: 13px;
            }
            .market-section-chip-row {
                gap: 6px;
            }
            .market-section-chip {
                padding: 6px 10px;
                font-size: 11px;
            }
            .market-section-card {
                flex-basis: 188px;
                min-width: 188px;
                border-radius: 18px;
            }
            .market-section-media {
                height: 164px;
            }
            .market-section-favorite {
                width: 38px;
                height: 38px;
            }
            .market-section-locked-note {
                left: 10px;
                right: 10px;
                bottom: 10px;
                font-size: 11px;
                padding: 8px 10px;
            }
            .market-section-row-discovery .market-section-head {
                align-items: center;
            }
            .market-section-row-discovery .market-section-head h3 {
                font-size: 19px;
            }
            .market-section-row-discovery .market-section-more {
                font-size: 14px;
            }
            .market-section-row-discovery .market-section-card {
                flex-basis: 176px;
                min-width: 176px;
            }
            .market-section-row-discovery .market-section-media {
                border-radius: 15px;
            }
        }

        .card { background: white; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--motion-medium) var(--motion-ease), box-shadow var(--motion-medium) ease, border-color var(--motion-fast) ease; position: relative; border: 1px solid rgba(0,0,0,0.05); cursor: pointer; animation: none; transform: translateZ(0); will-change: auto; }
        .card:not(.reveal-on-scroll) { animation: cardEnter 0.34s var(--motion-ease) both; }
        .card::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0;
            background: radial-gradient(circle at 22% 18%, rgba(160, 108, 255, 0.28), rgba(98, 0, 234, 0) 62%);
            transition: opacity 0.24s ease;
        }
        .card:nth-child(2n) { animation-delay: 0.03s; }
        .card:nth-child(3n) { animation-delay: 0.06s; }
        .card:nth-child(4n) { animation-delay: 0.09s; }
        .card:hover,
        .card:focus-within,
        .card.is-pressed,
        .card.tap-burst,
        .card:active { will-change: transform, box-shadow; }
        .card:hover { transform: translateY(var(--motion-lift-md)); box-shadow: var(--shadow-md); }
        .card:hover::after { opacity: 0.32; }
        .card.is-pressed,
        .card:active {
            transform: translateY(var(--motion-lift-sm)) scale(var(--motion-press-scale));
            box-shadow: var(--shadow-md);
            border-color: rgba(98, 0, 234, 0.35);
        }
        .card.is-pressed::after,
        .card.tap-burst::after,
        .card:active::after {
            opacity: 0.52;
        }
        .card.tap-burst {
            animation: cardTapPulse 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
        }
        
        .card-img { height: 180px; width: 100%; object-fit: cover; background: #eee; }
        .card-body { padding: 16px; display: grid; gap: 10px; }
        .card-title {
            font-weight: 900;
            font-size: 18px;
            line-height: 1.35;
            margin-bottom: 0;
            white-space: normal;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            min-height: calc(1.35em * 2);
        }
        .card-seller {
            display: grid;
            gap: 6px;
            margin: 0;
            color: #2a3042;
            font-size: 12px;
            font-weight: 800;
            max-width: 100%;
            cursor: pointer;
        }
        .card-seller-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            object-fit: cover;
            background: #e9ebf2;
            border: 1px solid rgba(16, 24, 40, 0.12);
            flex: 0 0 28px;
        }
        .card-inline-avatar {
            width: 24px;
            height: 24px;
            border-radius: 999px;
            overflow: hidden;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #e9ebf2;
            border: 1px solid rgba(16, 24, 40, 0.12);
            flex: 0 0 24px;
        }
        .card-inline-avatar img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }
        .card-seller-name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .card-price-stack {
            display: grid;
            gap: 4px;
        }
        .card-price {
            color: var(--primary);
            font-weight: 900;
            font-size: 22px;
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 4px 8px;
            margin: 0;
            line-height: 1.12;
        }
        .card-price.has-label {
            display: grid;
            gap: 4px;
            align-items: start;
        }
        .card-price-label {
            color: #64748b;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            line-height: 1.2;
        }
        .card-price-main {
            color: inherit;
            font-size: inherit;
            font-weight: inherit;
        }
        .card-old-price {
            color: var(--gray);
            text-decoration: line-through;
            font-size: 14px;
            font-weight: 700;
            margin-left: 0;
        }
        .sell-mode-prices { margin-top: 0; display: grid; gap: 3px; }
        .sell-mode-price-line {
            font-size: 12px;
            color: var(--gray);
            font-weight: 700;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 8px;
        }
        .sell-mode-label { color: var(--text); opacity: .85; margin-left: 4px; }
        .sell-mode-value {
            color: #334155;
            font-weight: 800;
        }
        .card-guest-locked { position: relative; }
        .card-guest-locked .card-body:not(.card-guest-preview-body),
        .card-guest-locked .badge-sold,
        .card-guest-locked .badge-discount,
        .card-guest-locked .badge-auction,
        .card-guest-locked .badge-sponsored {
            filter: blur(6px);
            user-select: none;
            pointer-events: none;
        }
        .card-guest-locked .card-img {
            filter: none;
            transform: none;
            user-select: none;
        }
        .card-guest-preview-body {
            display: grid;
            gap: 10px;
        }
        .guest-card-inline-lock {
            display: grid;
            gap: 10px;
            margin-top: 2px;
            padding: 12px;
            border-radius: 12px;
            border: 1px solid rgba(111, 129, 196, 0.18);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 248, 255, 0.98));
            text-align: center;
            box-shadow: 0 10px 22px rgba(36, 44, 82, 0.1);
        }
        .guest-card-inline-lock p {
            margin: 0;
            font-size: 12px;
            font-weight: 800;
            color: #1f1f24;
            line-height: 1.7;
        }
        .guest-card-inline-lock .btn {
            width: 100%;
        }
        .guest-card-overlay {
            position: absolute;
            inset: 0;
            z-index: 20;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 16px;
            text-align: center;
            background: rgba(255, 255, 255, 0.18);
        }
        .guest-card-overlay p {
            margin: 0;
            font-size: 12px;
            font-weight: 800;
            color: #1f1f24;
            background: rgba(255, 255, 255, 0.9);
            padding: 8px 10px;
            border-radius: 8px;
        }
        .card-placeholder-img {
            background: linear-gradient(135deg, #d7d7dd, #bcbcc7);
        }
        .card-placeholder-line {
            height: 12px;
            border-radius: 8px;
            background: linear-gradient(90deg, #dbdbe2, #cfcfd9);
            margin-bottom: 8px;
        }
        .card-placeholder-title { width: 82%; height: 14px; }
        .card-placeholder-price { width: 58%; height: 16px; }
        .card-placeholder-meta { width: 70%; margin-bottom: 0; }
        body.dark-mode .guest-card-overlay {
            background: rgba(0, 0, 0, 0.28);
        }
        body.dark-mode .guest-card-overlay p {
            color: #f1f1f6;
            background: rgba(18, 18, 18, 0.86);
        }
        body.dark-mode .guest-card-inline-lock {
            border-color: rgba(131, 146, 204, 0.28);
            background: linear-gradient(180deg, rgba(27, 33, 54, 0.94), rgba(20, 26, 44, 0.98));
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
        }
        body.dark-mode .guest-card-inline-lock p {
            color: #edf2ff;
        }
        body.dark-mode .card-placeholder-img {
            background: linear-gradient(135deg, #383846, #2c2c35);
        }
        body.dark-mode .card-placeholder-line {
            background: linear-gradient(90deg, #40404d, #33333c);
        }
        .card-meta { font-size: 12px; color: var(--gray); display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
        .rating-badge { color: #ffab00; font-weight: bold; font-size: 13px; }
        
        .badge { padding: 4px 8px; border-radius: 4px; font-size: 10px; color: white; font-weight: bold; }
        .badge-new { background: var(--accent); }
        .badge-used { background: orange; }
        .badge-sold { position: absolute; top: 10px; right: 10px; background: var(--danger); padding: 5px 10px; border-radius: 5px; color: white; font-weight: bold; transform: rotate(-5deg); z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
        .badge-discount { position: absolute; top: 10px; left: 10px; background: var(--warning); padding: 5px 10px; border-radius: 5px; color: white; font-weight: bold; transform: rotate(5deg); z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
        .badge-auction { position: absolute; top: 10px; left: 10px; background: linear-gradient(135deg, #ff9800, #ff5722); padding: 5px 10px; border-radius: 5px; color: white; font-weight: bold; z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
        .badge-sponsored {
            position: absolute;
            top: 42px;
            left: 10px;
            background: linear-gradient(135deg, #2e7d32, #1b5e20);
            padding: 5px 10px;
            border-radius: 5px;
            color: #fff;
            font-weight: 800;
            z-index: 10;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }
        .card-location {
            margin: 0;
            font-size: 14px;
            color: #334155;
            font-weight: 800;
            line-height: 1.4;
            display: flex;
            align-items: center;
            gap: 7px;
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
        }
        .card-location i {
            color: #2563eb;
            flex: 0 0 auto;
        }
        .card-car-specs {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin: 2px 0 8px;
        }
        .card-car-spec-chip {
            display: inline-flex;
            align-items: center;
            padding: 3px 8px;
            border-radius: 999px;
            border: 1px solid rgba(79, 140, 255, 0.35);
            background: rgba(79, 140, 255, 0.09);
            color: #24427a;
            font-size: 11px;
            font-weight: 700;
            line-height: 1.2;
        }
        .card-views {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: #555;
            font-size: 12px;
            font-weight: 700;
        }
        .card-quick-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-top: 4px;
        }
        .card-time {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: #5e6476;
            font-size: 11px;
            font-weight: 700;
            white-space: nowrap;
        }
        body.dark-mode .card-seller { color: #e7ebff !important; }
        body.dark-mode .card-seller-avatar {
            background: #262d41;
            border-color: rgba(187, 200, 237, 0.35);
        }
        body.dark-mode .card-inline-avatar {
            background: #262d41;
            border-color: rgba(187, 200, 237, 0.35);
        }
        body.dark-mode .card-location { color: #cbcbcb !important; }
        body.dark-mode .card-car-spec-chip {
            border-color: rgba(129, 176, 255, 0.5);
            background: rgba(79, 140, 255, 0.2);
            color: #ecf2ff !important;
        }
        body.dark-mode .card-views { color: #dedede !important; }
        body.dark-mode .card-time { color: #bec8df !important; }
        .auction-time-note { color: var(--gray); font-size: 12px; font-weight: 700; margin-top: -2px; margin-bottom: 6px; }
        .auction-live-meta { color: var(--gray); font-size: 12px; margin-bottom: 2px; }
        .auction-info-box {
            margin: 10px 0 12px;
            padding: 12px;
            border-radius: 12px;
            border: 1px solid rgba(255, 152, 0, 0.35);
            background: rgba(255, 152, 0, 0.08);
        }
        .auction-info-row { font-size: 13px; margin-bottom: 5px; }
        .auction-info-hint { font-size: 12px; color: var(--gray); margin-top: 4px; }
        .auction-bid-history {
            margin: 10px 0 12px;
            padding: 10px 12px;
            border-radius: 12px;
            border: 1px solid rgba(98, 0, 234, 0.22);
            background: rgba(98, 0, 234, 0.04);
        }
        .auction-bid-history-title { font-weight: 800; font-size: 13px; margin-bottom: 8px; color: var(--dark); }
        .auction-bid-history-list { display: flex; flex-direction: column; gap: 6px; }
        .auction-bid-history-item {
            display: grid;
            grid-template-columns: 1fr auto auto;
            gap: 8px;
            align-items: center;
            font-size: 12px;
            padding: 6px 8px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.65);
        }
        .auction-bid-history-user { color: var(--dark); font-weight: 700; }
        .auction-bid-history-amount { color: var(--primary); font-weight: 800; }
        .auction-bid-history-time { color: var(--gray); font-size: 11px; }
        .auction-bid-history-empty { color: var(--gray); font-size: 12px; }
        body.dark-mode .auction-time-note { color: #b7bcc8; }
        body.dark-mode .auction-live-meta { color: #c7ccdb; }
        body.dark-mode .auction-info-box {
            background: rgba(255, 152, 0, 0.16);
            border-color: rgba(255, 152, 0, 0.55);
        }
        body.dark-mode .auction-info-hint { color: #d5d9e3; }
        body.dark-mode .auction-bid-history {
            border-color: rgba(129, 102, 255, 0.35);
            background: rgba(129, 102, 255, 0.12);
        }
        body.dark-mode .auction-bid-history-title,
        body.dark-mode .auction-bid-history-user { color: #f3f5ff; }
        body.dark-mode .auction-bid-history-item { background: rgba(20, 21, 26, 0.65); }
        body.dark-mode .auction-bid-history-empty,
        body.dark-mode .auction-bid-history-time { color: #c2c8d7; }

        .card-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
            min-width: 0;
            align-items: stretch;
        }
        .card-actions .btn,
        .card-actions a.btn {
            min-width: 0;
            max-width: 100%;
        }
        .card-actions-listing {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }
        .card-actions-listing .btn,
        .card-actions-listing a.btn {
            width: 100%;
            min-width: 0;
        }
        .card-actions-listing .card-action-primary {
            grid-column: 1 / -1;
        }
        .card-actions-listing .card-action-icon {
            min-height: 46px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
        }
        .card-actions-listing .card-action-icon i {
            font-size: 16px;
        }
        .card-actions-listing .card-action-favorite.is-active {
            border-color: rgba(255, 23, 68, 0.24);
            background: rgba(255, 23, 68, 0.08);
        }

        /* ================= LANGUAGE SELECTOR ================= */
        .language-selector { position: relative; z-index: 2400; }
        .language-btn { background: transparent; border: 2px solid var(--primary); border-radius: 8px; padding: 6px 12px; cursor: pointer; display: flex; align-items: center; gap: 5px; font-weight: 600; }
        .language-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            left: auto;
            right: 0;
            background: white;
            color: #1d243d;
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 10px;
            box-shadow: var(--shadow-md);
            z-index: 2500;
            display: none;
            min-width: 180px;
            max-width: min(90vw, 260px);
            overflow: hidden;
        }
        .language-dropdown.mobile-floating {
            position: fixed;
            inset: auto auto auto auto;
            z-index: 7000;
            right: 10px;
            left: auto;
            top: 0;
            width: min(280px, calc(100vw - 20px));
            max-width: calc(100vw - 20px);
            max-height: min(360px, calc(100vh - 20px));
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        .language-dropdown.show { display: block; animation: fadeIn .18s ease; }
        .language-option {
            width: 100%;
            border: none;
            background: transparent;
            padding: 10px 15px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            white-space: nowrap;
            line-height: 1.35;
            font-weight: 700;
            color: inherit;
            text-align: start;
            font: inherit;
        }
        .language-option:hover { background: #f5f5f5; }
        body.dark-mode .language-btn {
            color: #e8eeff !important;
            border-color: rgba(138, 154, 196, 0.45) !important;
            background: rgba(255, 255, 255, 0.04) !important;
        }
        body.dark-mode .language-btn:hover {
            background: rgba(127, 91, 255, 0.2) !important;
        }
        body.dark-mode .language-dropdown {
            border-color: rgba(120, 128, 158, 0.35) !important;
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4) !important;
        }

        /* ================= DASHBOARD ================= */
        .dashboard { display: none; margin-top: 20px; }
        .dash-card { background: white; border-radius: var(--radius); padding: 25px; box-shadow: var(--shadow-sm); animation: sectionRise 0.55s ease-out both; }
        #seller-profile-header { animation: sectionRise 0.55s ease-out both; }
        body.seller-profile-preview-mode #main-view .search-area,
        body.seller-profile-preview-mode #main-view #category-filters,
        body.seller-profile-preview-mode #main-view #advanced-filters,
        body.seller-profile-preview-mode #main-view #market-command-center,
        body.seller-profile-preview-mode #main-view #market-sections-shell,
        body.seller-profile-preview-mode #main-view #visitor-connect-band,
        body.seller-profile-preview-mode #main-view #ads-section,
        body.seller-profile-preview-mode #main-view #global-broadcasts-section {
            display: none !important;
        }
        body.seller-profile-preview-mode #main-view #products-grid {
            margin-top: 10px;
        }
        body.seller-profile-preview-mode footer.market-footer {
            display: none !important;
        }
        .dash-header { display: flex; align-items: center; gap: 15px; padding-bottom: 20px; border-bottom: 1px solid #eee; margin-bottom: 20px; }
        .avatar { width: 70px; height: 70px; background: #eee; border-radius: 50%; object-fit: cover; }
        
        .dash-tabs { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 2px solid #eee; flex-wrap: wrap; }
        .dash-tab { padding: 10px 20px; cursor: pointer; font-weight: 600; color: var(--gray); border-bottom: 2px solid transparent; }
        .dash-tab.active { color: var(--primary); border-bottom: 2px solid var(--primary); }
        .profile-preference-card {
            margin: 10px 0 14px;
            padding: 12px;
            border: 1px solid #e8e8ef;
            border-radius: 12px;
            background: #fafafe;
        }
        .profile-preference-card-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }
        .profile-preference-row {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            font-weight: 700;
            color: #20263a;
        }
        .profile-preference-row input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: var(--primary);
            cursor: pointer;
        }
        .profile-preference-note {
            margin: 7px 0 0;
            color: #667085;
            font-size: 12px;
            line-height: 1.4;
        }
        body.dark-mode .dash-header {
            border-bottom-color: #353947 !important;
        }
        body.dark-mode .dash-tabs {
            border-bottom-color: #353947 !important;
        }
        body.dark-mode .dash-tab {
            color: #ced8ef !important;
        }
        body.dark-mode .dash-tab.active {
            color: #9ab4ff !important;
            border-bottom-color: #7f9cff !important;
        }
        body.dark-mode #tab-profile > div[style*="border-top"] {
            border-top-color: #353947 !important;
        }
        body.dark-mode .profile-preference-card {
            background: #232632 !important;
            border-color: #3a4054 !important;
        }
        body.dark-mode .profile-preference-row {
            color: #e6ecff !important;
        }
        body.dark-mode .profile-preference-note {
            color: #adb8d6 !important;
        }
        @media (max-width: 520px) {
            .profile-preference-card-head {
                flex-direction: column;
                align-items: stretch;
            }
        }

        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; min-height: 100svh; background: linear-gradient(180deg, rgba(8, 10, 18, 0.72), rgba(6, 8, 16, 0.78)); z-index: 2000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); padding: 20px; }
        .modal {
            background: white;
            width: 100%;
            max-width: min(500px, calc(100vw - 24px));
            min-width: 0;
            border-radius: 20px;
            padding: 25px;
            box-shadow: var(--shadow-md);
            position: relative;
            max-height: min(90vh, calc(100dvh - 24px));
            overflow-y: auto;
            overflow-x: hidden;
        }
        .modal h2 {
            margin-inline: 0;
            padding-left: 34px;
            overflow-wrap: anywhere;
            word-break: break-word;
            line-height: 1.25;
        }
        .close-modal { position: absolute; top: 15px; left: 15px; font-size: 24px; cursor: pointer; color: var(--gray); z-index: 50; pointer-events: auto; touch-action: manipulation; user-select: none; border: 0; background: transparent; padding: 0; font-family: inherit; -webkit-appearance: none; appearance: none; }
        html[dir="ltr"] .close-modal { left: auto; right: 15px; }
        #detail-modal .close-modal {
            width: 44px;
            height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: rgba(8, 10, 18, 0.52);
            color: #ffffff;
            z-index: 120;
            font-size: 30px;
            line-height: 1;
            top: 10px;
            left: 10px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        }
        html[dir="ltr"] #detail-modal .close-modal {
            left: auto;
            right: 10px;
        }
        html[dir="ltr"] .modal h2 { padding-left: 0; padding-right: 34px; }
        .modal-about {
            text-align: center;
            max-width: 640px;
            background: linear-gradient(145deg, rgba(22, 24, 34, 0.97), rgba(17, 19, 28, 0.98));
            border: 1px solid rgba(142, 119, 255, 0.26);
            box-shadow: 0 24px 48px rgba(2, 5, 12, 0.46);
            color: #f4f7ff;
        }
        .modal-about h2 {
            margin-top: 4px;
            margin-bottom: 10px;
            color: #f4f7ff;
        }
        .modal-about p {
            color: #d8e1ff;
        }
        .modal-subscription {
            max-width: 960px;
        }
        .subscription-grid {
            display: grid;
            grid-template-columns: minmax(250px, 340px) minmax(0, 1fr);
            gap: 12px;
            align-items: start;
        }
        .subscription-request-col,
        .subscription-history-col {
            border: 1px solid rgba(114, 135, 215, 0.25);
            border-radius: 12px;
            padding: 12px;
            background: rgba(255, 255, 255, 0.04);
        }
        .subscription-payment-info {
            margin-top: 8px;
            padding: 10px;
            border-radius: 10px;
            border: 1px dashed rgba(109, 136, 235, 0.4);
            background: rgba(89, 114, 208, 0.08);
            font-size: 13px;
            line-height: 1.55;
        }
        .subscription-history-list {
            max-height: 420px;
            overflow-y: auto;
            display: grid;
            gap: 8px;
            padding-right: 3px;
        }
        .subscription-history-item {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
            align-items: center;
            border: 1px solid rgba(125, 148, 231, 0.28);
            border-radius: 10px;
            padding: 10px;
            background: rgba(20, 26, 43, 0.5);
        }
        .subscription-history-title {
            font-weight: 700;
            margin-bottom: 3px;
        }
        .subscription-history-meta {
            font-size: 12px;
            color: var(--gray);
            line-height: 1.5;
        }
        .subscription-history-actions {
            display: grid;
            gap: 6px;
            justify-items: end;
        }
        .subscription-history-actions .badge.ok {
            background: rgba(21, 160, 89, 0.2);
            color: #7ff2be;
            border: 1px solid rgba(33, 194, 116, 0.48);
        }
        .subscription-history-actions .badge.danger {
            background: rgba(222, 74, 74, 0.2);
            color: #ffb8b8;
            border: 1px solid rgba(235, 82, 82, 0.45);
        }
        .modal-about-icon {
            color: var(--primary);
            margin-bottom: 15px;
            filter: drop-shadow(0 0 8px rgba(98, 0, 234, 0.28));
        }
        .fsd-about {
            margin-top: 16px;
            padding: 14px;
            border-radius: 12px;
            border: 1px solid rgba(150, 170, 255, 0.32);
            background: rgba(30, 35, 56, 0.6);
            text-align: left;
            color: #e8eeff;
            line-height: 1.6;
        }
        .fsd-about h3 {
            margin: 0 0 6px;
            font-size: 20px;
            color: #ffffff;
        }
        .fsd-about .fsd-lead {
            margin: 0 0 12px;
            color: #cbd8ff;
            font-size: 14px;
        }
        .fsd-about .fsd-block {
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px dashed rgba(171, 190, 255, 0.28);
        }
        .fsd-about .fsd-block:first-of-type {
            margin-top: 0;
            padding-top: 0;
            border-top: 0;
        }
        .fsd-about h4 {
            margin: 0 0 8px;
            font-size: 15px;
            color: #f2f6ff;
        }
        .fsd-about p {
            margin: 0;
            color: #d9e4ff;
            font-size: 13px;
        }
        .fsd-about ul,
        .fsd-about ol {
            margin: 8px 0 0;
            padding-left: 20px;
        }
        .fsd-about li {
            margin-bottom: 6px;
            color: #deebff;
            font-size: 13px;
        }
        #about-modal {
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        #about-modal .close-modal {
            color: #d7def7;
        }
        @media (max-width: 640px) {
            .fsd-about {
                padding: 12px;
                border-radius: 10px;
            }
            .fsd-about h3 {
                font-size: 18px;
            }
            .fsd-about h4 {
                font-size: 14px;
            }
            .fsd-about p,
            .fsd-about li {
                font-size: 12px;
            }
        }

        .form-label { display: block; margin-bottom: 8px; font-weight: 700; font-size: 14px; color: var(--dark); }
        .form-input { width: 100%; padding: 12px 15px; border: 2px solid #eee; border-radius: 12px; font-size: 15px; transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease); margin-bottom: 15px; outline: none; }
        .form-input:focus { border-color: var(--primary); }
        .field-hint {
            margin: -10px 0 12px;
            padding-inline: 4px;
            font-size: 13px;
            font-weight: 600;
            color: #7d7d7d;
            text-align: start;
        }
        .video-showcase-group {
            margin-bottom: 10px;
        }
        .video-showcase-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
        }
        .video-help-btn {
            border: 1px solid rgba(80, 110, 190, 0.35);
            background: rgba(110, 132, 228, 0.08);
            color: #2f3f82;
            border-radius: 999px;
            padding: 6px 10px;
            font-size: 12px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease;
        }
        .video-help-btn:hover {
            transform: translateY(-1px);
            background: rgba(110, 132, 228, 0.16);
        }
        .video-showcase-group .form-input {
            margin-bottom: 10px;
        }
        .video-showcase-hint {
            margin-top: -4px;
            margin-bottom: 2px;
        }
        body.dark-mode .field-hint { color: #9a9a9a !important; }
        body.dark-mode .video-help-btn {
            border-color: rgba(137, 167, 255, 0.45);
            color: #d8e4ff;
            background: rgba(89, 112, 187, 0.22);
        }
        body.dark-mode .video-help-btn:hover {
            background: rgba(99, 124, 211, 0.34);
        }
        .location-row {
            display: flex;
            gap: 10px;
        }
        .location-map-shell {
            margin-bottom: 12px;
            padding: 10px;
            border: 1px solid rgba(17, 24, 39, 0.12);
            border-radius: 12px;
            background: rgba(250, 250, 252, 0.9);
        }
        .location-map-actions {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 8px;
            flex-wrap: wrap;
        }
        .location-map-coords {
            margin: 0 !important;
            max-width: 220px;
            direction: ltr;
            text-align: left;
            font-weight: 700;
        }
        .location-map-canvas {
            width: 100%;
            height: 220px;
            border-radius: 10px;
            border: 1px solid rgba(17, 24, 39, 0.15);
            overflow: hidden;
        }
        .location-map-shell .field-hint {
            margin: 8px 0 0;
            padding-inline: 0;
        }
        body.dark-mode .location-map-shell {
            background: rgba(36, 38, 47, 0.92) !important;
            border-color: rgba(129, 137, 167, 0.4) !important;
        }
        body.dark-mode .location-map-canvas {
            border-color: rgba(129, 137, 167, 0.45) !important;
        }
        body.dark-mode .location-map-coords {
            background: rgba(29, 31, 39, 0.95) !important;
            color: #e8ecff !important;
            border-color: rgba(129, 137, 167, 0.45) !important;
        }
        #link-forgot-password, #link-toggle-auth { text-decoration: none; }
        #link-forgot-password:hover, #link-toggle-auth:hover { text-decoration: none; }
        
        .upload-area { border: 2px dashed #ccc; border-radius: 12px; padding: 30px; text-align: center; cursor: pointer; transition: transform var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; background: #fafafa; margin-bottom: 10px; }
        
        /* Star Rating */
        .star-rating { direction: ltr; font-size: 30px; display: flex; justify-content: center; margin: 15px 0; gap: 5px; }
        .star-rating input { display: none; }
        .star-rating label { color: #ddd; cursor: pointer; transition: color 0.2s; }
        .star-rating input:checked ~ label, .star-rating label:hover, .star-rating label:hover ~ label { color: #ffab00; }
        .detail-review-section {
            margin-top: 14px;
            border: 1px solid #ececec;
            border-radius: 12px;
            padding: 12px;
            background: #fafafa;
        }
        .detail-review-section h4 {
            margin: 0 0 8px;
            font-size: 15px;
        }
        .detail-review-form {
            display: grid;
            gap: 8px;
            margin-bottom: 8px;
        }
        .detail-review-list {
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-height: 250px;
            overflow-y: auto;
        }
        .detail-review-empty {
            color: #666;
            font-size: 12px;
            padding: 8px 0;
        }
        .detail-review-item {
            border: 1px solid #ececec;
            border-radius: 10px;
            padding: 10px;
            background: #fff;
        }
        .detail-review-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 6px;
            font-size: 12px;
        }
        .detail-review-user {
            font-weight: 800;
            color: #2d2d2d;
        }
        .detail-review-verified {
            display: inline-block;
            margin-left: 6px;
            padding: 2px 6px;
            border-radius: 999px;
            background: #e7f8eb;
            color: #1d6b30;
            font-size: 10px;
            font-weight: 800;
            vertical-align: middle;
        }
        .detail-review-stars {
            color: #ffab00;
            font-weight: 800;
        }
        .detail-review-comment {
            font-size: 13px;
            color: #333;
            white-space: pre-wrap;
            word-break: break-word;
        }
        .detail-review-media {
            margin-top: 8px;
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        .detail-review-media img,
        .detail-review-media video {
            width: 72px;
            height: 72px;
            border-radius: 8px;
            object-fit: cover;
            border: 1px solid #ddd;
            background: #000;
        }
        .detail-review-time {
            margin-top: 8px;
            color: #6d6d6d;
            font-size: 11px;
            font-weight: 700;
        }
        body.dark-mode .detail-review-section {
            background: #242424 !important;
            border-color: #3a3a3a !important;
        }
        body.dark-mode .detail-review-item {
            background: #1f1f1f !important;
            border-color: #333 !important;
        }
        body.dark-mode .detail-review-user,
        body.dark-mode .detail-review-comment {
            color: #f1f1f1 !important;
        }
        body.dark-mode .detail-review-empty,
        body.dark-mode .detail-review-time {
            color: #cfcfcf !important;
        }
        body.dark-mode .detail-review-verified {
            background: #1f4d2a !important;
            color: #d8ffe2 !important;
        }

        .promotion-entry-row {
            display: grid;
            gap: 10px;
            margin-bottom: 10px;
        }
        .promotion-entry-button {
            width: 100%;
            border: 1px solid rgba(26, 26, 26, 0.08);
            border-radius: 16px;
            padding: 14px 16px;
            background: linear-gradient(135deg, #191919, #343434);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            font-size: 15px;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 18px 36px rgba(19, 19, 19, 0.16);
        }
        .promotion-entry-summary {
            border: 1px solid #ece7dc;
            border-radius: 14px;
            padding: 12px 14px;
            background: #fffaf3;
            color: #5f5547;
            font-size: 13px;
            line-height: 1.5;
        }
        .modal-promotion-page {
            width: min(560px, calc(100vw - 24px));
            max-height: min(92vh, 820px);
            padding: 0;
            overflow: hidden;
            border-radius: 26px;
            background: #ffffff;
        }
        .promotion-page-shell {
            display: flex;
            flex-direction: column;
            min-height: min(88vh, 760px);
        }
        .promotion-page-header {
            padding: 26px 24px 18px;
            background:
                radial-gradient(circle at top right, rgba(255, 171, 56, 0.28), transparent 38%),
                linear-gradient(145deg, #171717 0%, #2a2a2a 100%);
            color: #fff;
        }
        .promotion-page-eyebrow {
            margin: 0 0 8px;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.72);
        }
        .promotion-page-header h2 {
            margin: 0 0 8px;
            font-size: 28px;
            line-height: 1.1;
        }
        .promotion-page-header p {
            margin: 0;
            color: rgba(255, 255, 255, 0.78);
            font-size: 14px;
            line-height: 1.6;
        }
        .promotion-page-body {
            flex: 1;
            overflow-y: auto;
            padding: 18px 20px 20px;
            background: linear-gradient(180deg, #fffdfa 0%, #f7f4ee 100%);
        }
        .promotion-balance-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            border-radius: 18px;
            padding: 14px 16px;
            margin-bottom: 14px;
            background: #ffffff;
            border: 1px solid #ece7dc;
            box-shadow: 0 10px 24px rgba(34, 32, 28, 0.06);
        }
        .promotion-balance-bar span {
            color: #6d6355;
            font-size: 13px;
        }
        .promotion-balance-bar strong {
            color: #141414;
            font-size: 18px;
        }
        .promotion-card {
            background: #fff;
            border: 1px solid #ece7dc;
            border-radius: 20px;
            padding: 16px;
            margin-bottom: 14px;
            box-shadow: 0 12px 26px rgba(34, 32, 28, 0.05);
        }
        .promotion-card-compact {
            margin-bottom: 0;
        }
        .promotion-card-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 14px;
        }
        .promotion-card-head h3 {
            margin: 0;
            font-size: 16px;
            color: #1a1a1a;
        }
        .promotion-card-head small {
            color: #7a7061;
            font-size: 12px;
            line-height: 1.4;
            text-align: right;
        }
        .promotion-choice-row {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
        }
        .promotion-choice-chip {
            min-height: 48px;
            border-radius: 14px;
            border: 1px solid #ddd4c4;
            background: #fff7eb;
            color: #3e3322;
            font-size: 14px;
            font-weight: 800;
            cursor: pointer;
            transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
        }
        .promotion-choice-chip.is-active {
            background: linear-gradient(135deg, #ff8a1f, #ffb347);
            border-color: transparent;
            color: #fff;
            transform: translateY(-1px);
        }
        .promotion-amount-field {
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid #ddd4c4;
            border-radius: 16px;
            background: #ffffff;
            padding: 0 14px;
            min-height: 58px;
        }
        .promotion-amount-field span {
            font-weight: 800;
            color: #7c6241;
            min-width: 34px;
        }
        .promotion-amount-field input {
            flex: 1;
            border: 0;
            background: transparent;
            font-size: 22px;
            font-weight: 800;
            color: #171717;
            outline: none;
            min-width: 0;
        }
        .promotion-metrics,
        .promotion-summary-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin-top: 14px;
        }
        .promotion-summary-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .promotion-metric,
        .promotion-summary-grid > div {
            border-radius: 16px;
            background: #f8f4ed;
            padding: 12px;
            min-width: 0;
        }
        .promotion-metric span,
        .promotion-summary-grid span {
            display: block;
            color: #7f7467;
            font-size: 12px;
            margin-bottom: 6px;
        }
        .promotion-metric strong,
        .promotion-summary-grid strong {
            display: block;
            color: #151515;
            font-size: 17px;
            line-height: 1.25;
            word-break: break-word;
        }
        .promotion-ads-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }
        .promotion-ads-counter {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .promotion-ads-counter strong {
            font-size: 20px;
            color: #171717;
        }
        .promotion-ads-counter span,
        .promotion-discount-note {
            color: #7f7467;
            font-size: 13px;
            line-height: 1.5;
        }
        .promotion-discount-note {
            margin: 12px 0 0;
        }
        .promotion-page-footer {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
            gap: 12px;
            padding: 18px 20px 20px;
            border-top: 1px solid #ece7dc;
            background: #fff;
        }
        .promotion-page-footer .btn {
            width: 100%;
        }
        .promotion-page-footer .btn[disabled] {
            opacity: 0.55;
            cursor: not-allowed;
        }
        body.dark-mode .promotion-entry-summary {
            background: #23211d !important;
            border-color: #3b362c !important;
            color: #eadfcd !important;
        }
        body.dark-mode .modal-promotion-page,
        body.dark-mode .promotion-card,
        body.dark-mode .promotion-balance-bar,
        body.dark-mode .promotion-page-footer {
            background: #181818 !important;
            border-color: #2f2f2f !important;
            color: #f4f4f4 !important;
        }
        body.dark-mode .promotion-page-body {
            background: linear-gradient(180deg, #141414 0%, #1c1c1c 100%) !important;
        }
        body.dark-mode .promotion-card-head h3,
        body.dark-mode .promotion-balance-bar strong,
        body.dark-mode .promotion-metric strong,
        body.dark-mode .promotion-summary-grid strong,
        body.dark-mode .promotion-ads-counter strong,
        body.dark-mode .promotion-amount-field input {
            color: #f8f8f8 !important;
        }
        body.dark-mode .promotion-balance-bar span,
        body.dark-mode .promotion-card-head small,
        body.dark-mode .promotion-metric span,
        body.dark-mode .promotion-summary-grid span,
        body.dark-mode .promotion-ads-counter span,
        body.dark-mode .promotion-discount-note,
        body.dark-mode .promotion-amount-field span {
            color: #bdb5a8 !important;
        }
        body.dark-mode .promotion-choice-chip,
        body.dark-mode .promotion-amount-field,
        body.dark-mode .promotion-metric,
        body.dark-mode .promotion-summary-grid > div {
            background: #202020 !important;
            border-color: #373737 !important;
            color: #f8f8f8 !important;
        }
        @media (max-width: 640px) {
            .modal-promotion-page {
                width: calc(100vw - 14px);
                max-height: 96vh;
                border-radius: 22px;
            }
            .promotion-page-header {
                padding: 22px 18px 16px;
            }
            .promotion-page-header h2 {
                font-size: 24px;
            }
            .promotion-page-body {
                padding: 16px;
            }
            .promotion-choice-row,
            .promotion-summary-grid,
            .promotion-page-footer {
                grid-template-columns: 1fr;
            }
            .promotion-metrics {
                grid-template-columns: 1fr 1fr;
            }
        }

        .toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: #333; color: white; padding: 12px 24px; border-radius: 50px; font-size: 14px; z-index: 3000; display: none; box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
        .toast.toast-confirm {
            border-radius: 16px;
            padding: 12px 14px;
            min-width: 280px;
            max-width: calc(100vw - 24px);
            text-align: center;
        }
        .toast-confirm-text {
            margin-bottom: 10px;
            font-weight: 700;
        }
        .toast-confirm-actions {
            display: flex;
            justify-content: center;
            gap: 8px;
        }
        .toast-confirm-actions .btn {
            min-width: 90px;
            padding: 8px 12px;
        }
        .toast-confirm-actions .btn.btn-ghost {
            color: #fff;
            border-color: rgba(255, 255, 255, 0.5);
        }
        .toast-confirm-actions .btn.btn-ghost:hover {
            background: rgba(255, 255, 255, 0.15);
        }
        .pwa-install-banner {
            position: fixed;
            left: 50%;
            bottom: calc(14px + env(safe-area-inset-bottom));
            transform: translateX(-50%);
            width: min(94vw, 520px);
            z-index: 2950;
            display: block;
            animation: sectionRise 0.25s ease;
        }
        .pwa-install-banner[hidden] {
            display: none !important;
        }
        .pwa-install-banner-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            border-radius: 14px;
            border: 1px solid rgba(98, 0, 234, 0.24);
            background: rgba(255, 255, 255, 0.97);
            box-shadow: 0 16px 30px rgba(17, 24, 39, 0.2);
            padding: 10px 12px;
        }
        .pwa-install-banner-text {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }
        .pwa-install-banner-text strong {
            font-size: 13px;
            color: #111827;
        }
        .pwa-install-banner-text span {
            font-size: 12px;
            color: #4b5563;
            line-height: 1.4;
        }
        .pwa-install-banner-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        body.dark-mode .pwa-install-banner-content {
            background: rgba(24, 28, 39, 0.96);
            border-color: rgba(124, 88, 255, 0.4);
            box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45);
        }
        body.dark-mode .pwa-install-banner-text strong {
            color: #eef1ff;
        }
        body.dark-mode .pwa-install-banner-text span {
            color: #bdc7e3;
        }
        @media (max-width: 640px) {
            .pwa-install-banner {
                width: calc(100vw - 14px);
                bottom: calc(8px + env(safe-area-inset-bottom));
            }
            .pwa-install-banner-content {
                padding: 9px 10px;
                gap: 8px;
            }
            .pwa-install-banner-text strong {
                font-size: 12px;
            }
            .pwa-install-banner-text span {
                font-size: 11px;
            }
            .pwa-install-banner-actions .btn {
                min-height: 34px;
            }
        }
        
        footer {
            background: #f3f3f7;
            color: #111;
            padding: 48px 0 24px;
            margin-top: auto;
            font-size: 14px;
            border-top: 1px solid rgba(0, 0, 0, 0.06);
        }
        .footer-content {
            display: flex;
            flex-direction: column;
            gap: 22px;
            align-items: stretch;
            text-align: start;
        }
        .market-footer-content {
            gap: 20px;
        }
        .market-footer-grid {
            display: grid;
            grid-template-columns: minmax(220px, 1.1fr) repeat(4, minmax(150px, 1fr));
            gap: 32px;
            align-items: start;
        }
        .market-footer-brand {
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-items: flex-start;
        }
        .market-footer-brand .footer-purple-image {
            max-width: 170px;
            width: 100%;
            height: auto;
        }
        .market-footer-brand #footer-text,
        .market-footer-rights,
        .market-footer-bottom p {
            margin: 0;
            color: #666;
            line-height: 1.7;
        }
        .market-footer-column {
            display: flex;
            flex-direction: column;
            gap: 14px;
            min-width: 0;
        }
        .market-footer-column h4 {
            margin: 0;
            color: #000;
            font-size: 18px;
            font-weight: 800;
        }
        .market-footer-links {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: flex-start;
        }
        .market-footer-links a,
        .footer-link-btn {
            color: #111;
            text-decoration: none;
            font-size: 15px;
            line-height: 1.6;
            background: transparent;
            border: 0;
            padding: 0;
            cursor: pointer;
            text-align: start;
            font-family: inherit;
        }
        .market-footer-links a:hover,
        .footer-link-btn:hover {
            color: var(--primary);
        }
        .market-footer-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            padding-top: 18px;
            border-top: 1px solid rgba(0, 0, 0, 0.08);
        }
        .social-links a {
            color: white;
            font-size: 20px;
            margin: 0;
            width: 38px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.08);
            text-decoration: none;
            transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
        }
        .market-footer-socials {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .market-footer-socials a:nth-child(1) { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); }
        .market-footer-socials a:nth-child(2) { background: #1877f2; }
        .market-footer-socials a:nth-child(3) { background: #000000; }
        .social-links a:hover {
            transform: translateY(-3px) scale(1.08);
            background: var(--primary);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
        }
        .social-links a:focus,
        .social-links a:visited {
            text-decoration: none;
        }
        .legal-links {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 12px;
            font-size: 13px;
        }
        .legal-links a {
            color: #d5d5d5;
            text-decoration: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.25);
            transition: color 0.2s ease, border-color 0.2s ease;
        }
        .legal-links a:hover {
            color: #ffffff;
            border-bottom-color: var(--primary);
        }

        @media (max-width: 1200px) {
            .market-footer-grid {
                grid-template-columns: repeat(3, minmax(180px, 1fr));
            }
            .market-footer-brand {
                grid-column: 1 / -1;
            }
        }

        @media (max-width: 768px) {
            footer {
                padding: 36px 0 20px;
            }
            .market-footer-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 24px 18px;
            }
            .market-footer-column h4 {
                font-size: 16px;
            }
            .market-footer-links a,
            .footer-link-btn {
                font-size: 14px;
            }
            .market-footer-bottom {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        @media (max-width: 480px) {
            .market-footer-grid {
                grid-template-columns: 1fr;
            }
        }

        body.dark-mode footer {
            background: #0f1118 !important;
            border-top-color: rgba(255, 255, 255, 0.08);
        }
        body.dark-mode .market-footer-column h4,
        body.dark-mode .market-footer-links a,
        body.dark-mode .footer-link-btn {
            color: #f3f4ff;
        }
        body.dark-mode .market-footer-brand #footer-text,
        body.dark-mode .market-footer-rights,
        body.dark-mode .market-footer-bottom p {
            color: #b8bfd4;
        }
        body.dark-mode .market-footer-bottom {
            border-top-color: rgba(255, 255, 255, 0.08);
        }

        .cart-count-badge {
            min-width: 22px;
            height: 22px;
            border-radius: 999px;
            background: var(--danger);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 6px;
            margin-inline-start: 6px;
        }
        .notification-bell-btn {
            position: relative;
        }
        .notification-count-badge {
            min-width: 20px;
            height: 20px;
            border-radius: 999px;
            background: var(--primary);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 6px;
            margin-inline-start: 6px;
        }
        .cart-modal-overlay.modal-overlay {
            padding: 18px;
        }
        .cart-modal-shell.modal {
            padding: 0;
            overflow-y: auto;
            overflow-x: hidden;
            background:
                radial-gradient(circle at top left, rgba(163, 116, 255, 0.12), transparent 34%),
                linear-gradient(180deg, #f6f1fb 0%, #f2edf9 100%);
            border-radius: 30px;
            border: 1px solid rgba(108, 51, 152, 0.12);
            box-shadow: 0 28px 62px rgba(60, 20, 92, 0.24);
        }
        .cart-modal-header {
            position: sticky;
            top: 0;
            z-index: 3;
            padding: 24px 28px 22px;
            background: linear-gradient(135deg, #6f2d96 0%, #7c34a8 100%);
            color: #fff;
        }
        .cart-modal-header h2 {
            margin: 0;
            padding: 0;
            color: inherit;
            text-align: center;
            font-size: clamp(1.25rem, 2vw, 1.7rem);
        }
        .cart-modal-subtitle {
            margin: 10px 0 0;
            text-align: center;
            color: rgba(255, 255, 255, 0.82);
            font-size: 0.92rem;
        }
        .cart-modal-close.close-modal {
            left: 18px;
            top: 18px;
            width: 44px;
            height: 44px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
            font-size: 1.05rem;
            box-shadow: none;
        }
        html[dir="ltr"] .cart-modal-close.close-modal {
            left: auto;
            right: 18px;
        }
        .cart-quick-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
            padding: 18px 18px 0;
        }
        .cart-quick-card {
            border: 1px solid #ede4f7;
            background: #fff;
            border-radius: 22px;
            padding: 18px;
            min-height: 112px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            text-align: start;
            color: #562186;
            box-shadow: 0 14px 28px rgba(88, 51, 122, 0.08);
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }
        .cart-quick-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 18px 30px rgba(88, 51, 122, 0.12);
            border-color: #d8c5ef;
        }
        .cart-quick-card:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        .cart-quick-card.is-danger {
            color: #8f2551;
        }
        .cart-quick-card-copy {
            display: flex;
            flex-direction: column;
            gap: 7px;
        }
        .cart-quick-card-copy strong {
            font-size: 1rem;
        }
        .cart-quick-card-copy small {
            color: #8b7aa6;
            font-size: 0.84rem;
            line-height: 1.55;
        }
        .cart-quick-card-icon {
            width: 46px;
            height: 46px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            background: rgba(111, 45, 150, 0.08);
            color: inherit;
            font-size: 1.08rem;
        }
        .cart-items-list.cart-items-list-upgraded {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin: 16px 0 0;
            padding: 0 18px;
            max-height: none;
            overflow: visible;
        }
        .cart-product-card {
            border-radius: 28px;
            background: #fff;
            border: 1px solid #ece3f8;
            overflow: hidden;
            box-shadow: 0 16px 32px rgba(86, 58, 120, 0.08);
        }
        .cart-product-seller {
            background: linear-gradient(135deg, #6c2893 0%, #7d35a9 100%);
            color: #fff;
            padding: 14px 18px;
            font-weight: 700;
            font-size: 1rem;
        }
        .cart-product-main {
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
            gap: 16px;
            padding: 18px;
        }
        html[dir="ltr"] .cart-product-main {
            flex-direction: row;
        }
        .cart-product-media {
            width: 118px;
            min-width: 118px;
            height: 118px;
            border-radius: 22px;
            overflow: hidden;
            background: linear-gradient(180deg, #f8f4fc, #f0e8f8);
            border: 1px solid #ece3f8;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .cart-product-media img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            background: transparent;
        }
        .cart-product-content {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .cart-item-title {
            margin: 0;
            font-size: 1.08rem;
            line-height: 1.45;
            color: #512a7c;
            font-weight: 700;
        }
        .cart-item-sub {
            color: #78688f;
            font-size: 0.88rem;
            line-height: 1.5;
        }
        .cart-card-rating {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #e0a93d;
            font-size: 0.92rem;
            flex-wrap: wrap;
        }
        .cart-card-rating-stars {
            display: inline-flex;
            gap: 4px;
        }
        .cart-card-rating-value {
            color: #7c5e9d;
            font-weight: 700;
        }
        .cart-card-mode-row {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .cart-mode-chip {
            border: 1px solid #cdb3e6;
            border-radius: 999px;
            min-height: 38px;
            padding: 8px 14px;
            background: #fff;
            color: #6c2893;
            font-weight: 700;
            font-size: 0.84rem;
        }
        .cart-mode-chip.is-active {
            background: linear-gradient(135deg, #6f2d96 0%, #8c42bb 100%);
            border-color: transparent;
            color: #fff;
            box-shadow: 0 10px 18px rgba(111, 45, 150, 0.22);
        }
        .cart-mode-chip.is-static {
            background: #f4ecfb;
            border-color: transparent;
            color: #6b4d8d;
        }
        .cart-product-price {
            color: #6f2d96;
            font-size: 1.08rem;
            font-weight: 800;
        }
        .cart-product-actions {
            padding: 0 18px 18px;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 14px;
            align-items: stretch;
        }
        .cart-favorite-action {
            border: 2px solid #c490ef;
            border-radius: 20px;
            background: #fff;
            min-height: 68px;
            padding: 12px 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            color: #6f2d96;
            font-weight: 700;
            font-size: 0.92rem;
        }
        .cart-favorite-action i {
            color: #f0445f;
            font-size: 1.3rem;
            flex-shrink: 0;
        }
        .cart-favorite-action.is-active {
            background: linear-gradient(135deg, rgba(111, 45, 150, 0.08), rgba(255, 255, 255, 0.98));
        }
        .cart-qty-control {
            min-width: 188px;
            border-radius: 22px;
            background: #f4ecfb;
            padding: 12px;
            display: grid;
            grid-template-columns: 44px minmax(42px, auto) 44px;
            align-items: center;
            justify-items: center;
            gap: 10px;
        }
        .cart-qty-btn {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            border: 0;
            background: #fff;
            color: #6f2d96;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 18px rgba(101, 59, 143, 0.12);
        }
        .cart-qty-btn.is-remove {
            color: #ef4444;
        }
        .cart-qty {
            min-width: 40px;
            text-align: center;
            font-weight: 800;
            font-size: 1.08rem;
            color: #6f2d96;
        }
        .cart-coupon-panel,
        .cart-summary-card {
            margin: 18px 18px 0;
            border-radius: 24px;
            background: #fff;
            border: 1px solid #ece3f8;
            box-shadow: 0 16px 32px rgba(86, 58, 120, 0.08);
            padding: 18px;
        }
        .cart-coupon-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 14px;
            color: #6f2d96;
        }
        .cart-coupon-head strong {
            font-size: 1rem;
        }
        .cart-coupon-head span {
            color: #8b7aa6;
            font-size: 0.82rem;
            line-height: 1.55;
            text-align: end;
        }
        .cart-coupon-form {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 12px;
            align-items: stretch;
        }
        .cart-coupon-input.form-input {
            margin-bottom: 0;
            background: #faf7fe;
            border-color: #e7daf7;
            color: #4c2e70;
        }
        .cart-coupon-btn {
            min-width: 170px;
            border-radius: 18px;
        }
        .cart-coupon-status {
            margin-top: 12px;
            color: #8b7aa6;
            font-size: 0.84rem;
            line-height: 1.55;
        }
        .cart-coupon-status.is-success {
            color: #18845f;
        }
        .cart-coupon-status.is-pending {
            color: #8a5b00;
        }
        .cart-summary-card {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .cart-summary-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            color: #694a8b;
            font-size: 0.92rem;
        }
        .cart-summary-row strong {
            color: #4d236f;
            font-size: 0.96rem;
        }
        .cart-summary-row.is-total {
            margin-top: 6px;
            padding-top: 14px;
            border-top: 1px solid #ece3f8;
            font-size: 1.03rem;
            font-weight: 800;
        }
        .cart-summary-row.is-total strong {
            color: #6f2d96;
            font-size: 1.1rem;
        }
        .cart-empty-state {
            border-radius: 28px;
            background: #fff;
            border: 1px dashed #dac8ef;
            box-shadow: 0 16px 32px rgba(86, 58, 120, 0.06);
            padding: 30px 22px;
            text-align: center;
            color: #836f99;
        }
        .cart-empty-state strong {
            display: block;
            margin-bottom: 10px;
            color: #5b2a83;
            font-size: 1.06rem;
        }
        .cart-empty-state p {
            margin: 0;
            line-height: 1.8;
        }
        .cart-empty-icon {
            width: 66px;
            height: 66px;
            border-radius: 22px;
            margin: 0 auto 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.45rem;
            color: #6f2d96;
            background: #f4ecfb;
        }
        .cart-footer.cart-footer-sticky {
            margin-top: 18px;
            position: sticky;
            bottom: 0;
            z-index: 3;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 16px;
            border-top: 1px solid #ece3f8;
            background: rgba(255, 255, 255, 0.96);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            padding: 18px;
            box-shadow: 0 -12px 26px rgba(80, 48, 112, 0.12);
        }
        .cart-footer-total-wrap {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .cart-footer-total {
            color: #6f2d96;
            font-size: clamp(1.2rem, 2vw, 1.9rem);
            line-height: 1.1;
        }
        .cart-footer-caption {
            color: #4f8df1;
            font-size: 0.84rem;
            font-weight: 600;
        }
        .cart-footer-actions {
            min-width: min(320px, 100%);
        }
        .cart-checkout-btn {
            min-width: 260px;
            min-height: 56px;
            border-radius: 18px;
            font-size: 1rem;
            box-shadow: 0 16px 26px rgba(111, 45, 150, 0.22);
        }
        .two-col-form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        .checkout-summary {
            background: #f7f4ff;
            border: 1px solid #ece6ff;
            padding: 12px;
            border-radius: 10px;
            margin-bottom: 10px;
            color: #4a3d76;
            font-size: 13px;
        }
        .checkout-total {
            margin-top: 10px;
            background: #eefaf1;
            border: 1px solid #d8f0dd;
            color: #235433;
            font-weight: 700;
            border-radius: 10px;
            padding: 10px 12px;
        }
        .orders-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-height: 520px;
            overflow-y: auto;
        }
        .order-item {
            border: 1px solid #ececec;
            border-radius: 12px;
            padding: 12px;
            background: #fafafa;
        }
        .order-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
        }
        .order-meta {
            color: var(--gray);
            font-size: 12px;
            margin-top: 6px;
        }
        .order-lines {
            margin-top: 8px;
            border-top: 1px dashed #ddd;
            padding-top: 8px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            font-size: 13px;
        }
        .status-chip {
            padding: 5px 9px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            border: 1px solid transparent;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .status-chip.pending { background: #fff3e0; color: #8f5b00; border-color: #ffd08a; }
        .status-chip.shipped { background: #e8f4ff; color: #14558e; border-color: #b8dfff; }
        .status-chip.delivered { background: #e8f9ef; color: #1d6a37; border-color: #bfe8cc; }
        .status-chip.completed { background: #edf8ff; color: #0b5672; border-color: #bde8ff; }
        .status-chip.cancelled { background: #ffeef1; color: #8b1d3b; border-color: #ffc6d1; }
        .status-chip.paid { background: #e8f9ef; color: #1d6a37; border-color: #bfe8cc; }
        .status-chip.unpaid,
        .status-chip.pending_payment { background: #fff3e0; color: #8f5b00; border-color: #ffd08a; }
        .status-chip.pending_cod { background: #fff3e0; color: #8f5b00; border-color: #ffd08a; }
        .status-chip.failed { background: #ffeef1; color: #8b1d3b; border-color: #ffc6d1; }
        .status-chip.refunded { background: #edeef3; color: #3f4a5f; border-color: #cfd4df; }

        body.dark-mode .cart-modal-shell {
            background:
                radial-gradient(circle at top left, rgba(155, 111, 255, 0.16), transparent 34%),
                linear-gradient(180deg, #221c30 0%, #1b1727 100%) !important;
            border-color: rgba(187, 161, 233, 0.18) !important;
        }
        body.dark-mode .cart-product-card,
        body.dark-mode .cart-summary-card,
        body.dark-mode .cart-coupon-panel,
        body.dark-mode .cart-empty-state,
        body.dark-mode .order-item {
            background: #242424 !important;
            border-color: #3a3a3a !important;
        }
        body.dark-mode .cart-product-seller {
            background: linear-gradient(135deg, #5f2883 0%, #73379b 100%) !important;
        }
        body.dark-mode .cart-product-media,
        body.dark-mode .cart-qty-control,
        body.dark-mode .cart-empty-icon {
            background: #2b2340 !important;
            border-color: #3b3157 !important;
        }
        body.dark-mode .cart-qty-btn,
        body.dark-mode .cart-favorite-action,
        body.dark-mode .cart-mode-chip.is-static {
            background: #2d2739 !important;
            border-color: #4a3f61 !important;
        }
        body.dark-mode .cart-footer.cart-footer-sticky {
            background: rgba(29, 24, 40, 0.94) !important;
            border-top-color: #3a3a3a !important;
        }
        body.dark-mode .cart-item-title {
            color: #fff !important;
        }
        body.dark-mode .checkout-summary {
            background: #2b2340 !important;
            border-color: #3b3157 !important;
            color: #efe6ff !important;
        }
        body.dark-mode .checkout-total {
            background: #1f3325 !important;
            border-color: #30543a !important;
            color: #b9ffd1 !important;
        }
        body.dark-mode .cart-quick-card {
            background: #242424 !important;
            border-color: #3d3453 !important;
            color: #efe6ff !important;
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
        }
        body.dark-mode .cart-quick-card-copy small,
        body.dark-mode .cart-coupon-head span,
        body.dark-mode .cart-coupon-status,
        body.dark-mode .cart-footer-caption {
            color: #bcaed3 !important;
        }
        body.dark-mode .cart-quick-card-icon {
            background: rgba(174, 129, 255, 0.12) !important;
        }
        body.dark-mode .order-meta,
        body.dark-mode .order-lines,
        body.dark-mode .cart-item-sub {
            color: #cfd5e2 !important;
        }
        body.dark-mode .cart-card-rating-value,
        body.dark-mode .cart-summary-row,
        body.dark-mode .cart-summary-row strong {
            color: #efe6ff !important;
        }
        body.dark-mode .cart-summary-row.is-total {
            border-top-color: #3a3a3a !important;
        }
        body.dark-mode .cart-product-price,
        body.dark-mode .cart-footer-total,
        body.dark-mode .cart-coupon-head strong {
            color: #d9c3ff !important;
        }
        body.dark-mode .order-lines {
            border-top-color: #3a3a3a !important;
        }
        body.dark-mode .status-chip {
            color: #eef2ff !important;
            border-color: rgba(255, 255, 255, 0.14) !important;
            text-shadow: none !important;
        }
        body.dark-mode .status-chip.pending,
        body.dark-mode .status-chip.unpaid,
        body.dark-mode .status-chip.pending_payment {
            background: #4d3a12 !important;
            color: #ffe2a6 !important;
            border-color: #8a6320 !important;
        }
        body.dark-mode .status-chip.pending_cod {
            background: #4d3a12 !important;
            color: #ffe2a6 !important;
            border-color: #8a6320 !important;
        }
        body.dark-mode .status-chip.shipped {
            background: #123e5b !important;
            color: #bfe7ff !important;
            border-color: #2b709e !important;
        }
        body.dark-mode .status-chip.delivered,
        body.dark-mode .status-chip.paid {
            background: #173f29 !important;
            color: #c7f6d8 !important;
            border-color: #2b7a4d !important;
        }
        body.dark-mode .status-chip.completed {
            background: #153c49 !important;
            color: #c8efff !important;
            border-color: #2c728c !important;
        }
        body.dark-mode .status-chip.cancelled {
            background: #4d1e2a !important;
            color: #ffc4d0 !important;
            border-color: #96445d !important;
        }
        body.dark-mode .status-chip.failed {
            background: #4d1e2a !important;
            color: #ffc4d0 !important;
            border-color: #96445d !important;
        }
        body.dark-mode .status-chip.refunded {
            background: #2c3442 !important;
            color: #dbe4f7 !important;
            border-color: #55627d !important;
        }
        @media (max-width: 768px) {
            .two-col-form { grid-template-columns: 1fr; }
            .notification-preferences-grid { grid-template-columns: 1fr; }
            .cart-modal-overlay.modal-overlay {
                padding: 0;
            }
            .cart-modal-shell.modal {
                max-width: 100% !important;
                min-height: 100dvh;
                max-height: 100dvh;
                border-radius: 0;
            }
            .cart-modal-header {
                padding: 20px 18px 18px;
            }
            .cart-modal-header h2 {
                font-size: 1.35rem;
            }
            .cart-modal-subtitle {
                font-size: 0.86rem;
            }
            .cart-quick-actions {
                gap: 12px;
                padding: 16px 14px 0;
            }
            .cart-quick-card {
                min-height: 104px;
                padding: 16px;
                border-radius: 20px;
            }
            .cart-items-list.cart-items-list-upgraded {
                padding: 0 14px;
            }
            .cart-product-card {
                border-radius: 24px;
            }
            .cart-product-main {
                align-items: flex-start;
                padding: 16px;
            }
            .cart-product-media {
                width: 94px;
                min-width: 94px;
                height: 94px;
                border-radius: 18px;
            }
            .cart-product-actions {
                grid-template-columns: 1fr;
                padding: 0 16px 16px;
            }
            .cart-favorite-action {
                min-height: 60px;
                padding: 12px 14px;
            }
            .cart-qty-control {
                width: 100%;
                min-width: 0;
            }
            .cart-coupon-panel,
            .cart-summary-card {
                margin: 14px 14px 0;
                padding: 16px;
                border-radius: 22px;
            }
            .cart-coupon-form {
                grid-template-columns: 1fr;
            }
            .cart-coupon-btn,
            .cart-checkout-btn,
            .cart-footer-actions {
                width: 100%;
                min-width: 0;
            }
            .cart-footer.cart-footer-sticky {
                grid-template-columns: 1fr;
                padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
            }
            .cart-footer-total-wrap {
                gap: 4px;
            }
            .cart-footer-total {
                font-size: 1.25rem;
            }
            .cart-modal-close.close-modal {
                top: 14px;
                left: 14px;
            }
            html[dir="ltr"] .cart-modal-close.close-modal {
                right: 14px;
            }
        }
        @media (max-width: 420px) {
            .cart-quick-actions {
                grid-template-columns: 1fr;
            }
            .cart-product-main {
                gap: 12px;
            }
            .cart-product-content {
                gap: 8px;
            }
            .cart-item-title {
                font-size: 1rem;
            }
        }

        /* ================= REQUIREMENT 6: IMAGE PREVIEW SLIDER ================= */
        .image-preview-slider { position: relative; width: 100%; height: 300px; overflow: hidden; border-radius: 12px; margin-bottom: 15px; touch-action: pan-y; }
        .image-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; display: flex; align-items: center; justify-content: center; }
        .image-slide.active { opacity: 1; }
        .image-slide img, .image-slide video { max-width: 100%; max-height: 100%; object-fit: contain; }
        .slider-nav { position: absolute; bottom: 10px; left: 0; width: 100%; display: flex; justify-content: center; gap: 8px; z-index: 10; }
        .slider-nav-btn { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; border: 0; padding: 0; touch-action: manipulation; pointer-events: auto; }
        .slider-nav-btn.active { background: white; transform: scale(1.2); }
        .prev-btn, .next-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: white; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; z-index: 25; display: flex; align-items: center; justify-content: center; font-size: 20px; touch-action: manipulation; pointer-events: auto; }
        .prev-btn { left: 10px; }
        .next-btn { right: 10px; }

        /* ================= REQUIREMENT 7: SOCIAL MEDIA LINKS ================= */
        .social-media-links { display: flex; gap: 10px; margin-top: 10px; justify-content: center; }
        .social-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; text-decoration: none; transition: transform 0.3s; }
        .social-icon:hover { transform: scale(1.1); }
        .social-fb { background: #1877f2; }
        .social-ig { background: #e4405f; }
        .social-tiktok { background: #000000; }
        .social-wa { background: #25d366; }
        .social-locked { background: #9e9e9e; border: none; cursor: pointer; }
        .social-tg { background: #0088cc; }
        
        /* ================= RESPONSIVE DESIGN ================= */
        @media (max-width: 1200px) {
            .header-content {
                grid-template-columns: 1fr;
                gap: 10px;
            }
            .logo {
                justify-content: center;
            }
            nav {
                width: 100%;
            }
            nav ul {
                width: 100%;
                justify-content: flex-start;
            }
            .user-actions {
                width: 100%;
                justify-content: center;
            }
            .search-area {
                gap: 8px;
            }
            .search-input {
                min-width: 120px;
            }
            .advanced-filters {
                padding: 10px;
            }
            #seller-profile-header > div[style*="display: flex"] {
                flex-wrap: wrap;
            }
        }

        @media (max-width: 900px) {
            .ad-strip {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .header-content {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            .logo .logo-mark { width: 122px; max-height: 122px; height: auto; object-fit: contain; }
            nav ul { justify-content: center; }
            .user-actions { justify-content: center; }
            .chat-container { width: calc(100% - 40px); right: 20px; bottom: 10px; height: 500px; }
            .modal { padding: 15px; }
            .products { grid-template-columns: repeat(2, 1fr); }
            .dash-tabs { justify-content: center; }
            .floating-notification {
                top: 80px;
                right: 10px;
                left: 10px;
                max-width: calc(100% - 20px);
            }
            .popup-ad {
                width: calc(100% - 40px);
                right: 20px;
                bottom: 20px;
            }
            .ad-strip {
                grid-template-columns: 1fr;
            }
            .ad-banner-image {
                height: 118px;
            }
            .ad-banner-media {
                height: 124px;
            }
            .broadcast-feed-head {
                padding: 10px 12px 6px;
            }
            .broadcast-feed-list {
                padding: 8px;
            }
            .broadcast-card-meta {
                flex-direction: column;
                align-items: flex-start;
            }
            .banner-quick-grid {
                grid-template-columns: 1fr;
            }
            .banner-quick-field-grid {
                grid-template-columns: 1fr;
            }
            .banner-quick-actions {
                justify-content: stretch;
            }
            .banner-quick-actions .btn {
                flex: 1 1 auto;
            }
            .container { padding: 0 14px; }
            header { padding-top: max(10px, env(safe-area-inset-top)); }
            .dash-card { padding: 16px; }
            .dash-header {
                flex-direction: column;
                align-items: flex-start;
            }
            .dash-tabs { gap: 6px; }
            .dash-tab {
                flex: 1 1 calc(50% - 6px);
                text-align: center;
                padding: 10px 12px;
            }
            .modal-overlay { padding: 10px; }
            .modal {
                max-height: calc(100vh - 20px);
                border-radius: 14px;
                padding: 14px;
            }
            #user-info > div {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                flex-wrap: wrap;
            }
            #user-info #btn-logout {
                margin-left: 0 !important;
            }
            #seller-profile-header > div[style*="display: flex"] {
                flex-wrap: wrap;
            }
        }
        
        @media (max-width: 640px) {
            .header-content {
                align-items: stretch;
            }
            nav ul,
            .user-actions {
                width: 100%;
                justify-content: center;
            }
            .user-actions > * {
                min-width: 0;
                max-width: 100%;
            }
            nav a {
                height: 36px;
                padding: 0 12px;
                font-size: 12px;
            }
            .language-selector {
                z-index: 2600;
                min-width: 0;
                width: 100%;
                max-width: 100%;
            }
            .language-btn {
                min-height: 38px;
                width: 100%;
                max-width: 100%;
                min-width: 0;
                justify-content: center;
                padding-inline: 10px;
            }
            #current-language {
                display: inline-block;
                min-width: 0;
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .language-dropdown {
                min-width: 200px;
                max-width: calc(100vw - 20px);
            }
            .notifications-head {
                align-items: stretch;
            }
            .notification-actions {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .notification-actions .btn {
                width: 100%;
                min-width: 0;
                white-space: normal;
                line-height: 1.25;
                text-align: center;
            }
            .search-area {
                flex-direction: column;
                align-items: stretch;
            }
            .search-area .btn,
            .search-area .filter-select,
            .search-area .search-input {
                width: 100%;
                min-width: 0;
            }
            .search-area .search-input-wrap {
                width: 100%;
                min-width: 0;
            }
            .chat-container {
                width: calc(100% - 16px);
                right: 8px;
                left: 8px;
                bottom: 8px;
                height: min(68vh, 520px);
            }
            .chat-messages { padding: 12px; }
            .chat-input-area { padding: 10px; }
            .message { max-width: 86%; }
            .message img,
            .message video {
                max-width: 100%;
                height: auto;
            }
            .card-actions,
            .cart-footer,
            .toast-confirm-actions {
                flex-direction: column;
                align-items: stretch;
            }
            .card-actions .btn,
            .cart-footer .btn,
            .toast-confirm-actions .btn {
                width: 100%;
            }
            .order-head,
            .notification-item-head,
            .notification-item-meta {
                align-items: flex-start;
            }
            .auction-room-bid-row,
            .auction-bid-history-item {
                grid-template-columns: 1fr;
            }
            .auction-room-bid-time,
            .auction-bid-history-time {
                text-align: start;
            }
            .auction-room-bid-box {
                grid-template-columns: 1fr;
            }
            #add-form > div[style*="display:flex"],
            #add-form > div[style*="display: flex"],
            #edit-form > div[style*="display:flex"],
            #edit-form > div[style*="display: flex"],
            #checkout-modal .modal > div[style*="display:flex"],
            #checkout-modal .modal > div[style*="display: flex"],
            #auction-bid-modal .modal > div[style*="display:flex"],
            #auction-bid-modal .modal > div[style*="display: flex"],
            #report-modal .modal > div[style*="display:flex"],
            #report-modal .modal > div[style*="display: flex"] {
                flex-direction: column !important;
                align-items: stretch !important;
            }
            #add-form > div[style*="display:flex"] > *,
            #add-form > div[style*="display: flex"] > *,
            #edit-form > div[style*="display:flex"] > *,
            #edit-form > div[style*="display: flex"] > *,
            #checkout-modal .modal > div[style*="display:flex"] > *,
            #checkout-modal .modal > div[style*="display: flex"] > *,
            #auction-bid-modal .modal > div[style*="display:flex"] > *,
            #auction-bid-modal .modal > div[style*="display: flex"] > *,
            #report-modal .modal > div[style*="display:flex"] > *,
            #report-modal .modal > div[style*="display: flex"] > * {
                width: 100% !important;
                max-width: 100% !important;
                flex: 1 1 100% !important;
            }
        }

        /* ================= RESPONSIVE HARDENING ================= */
        @media (max-width: 980px) {
            #auth-buttons,
            #user-info {
                width: 100%;
            }
            #auth-buttons .btn,
            #user-info .btn {
                max-width: 100%;
            }
            #user-info > div {
                width: 100%;
                display: flex;
                align-items: center;
                gap: 8px;
                flex-wrap: wrap;
            }
            #user-info > div > .btn {
                flex: 1 1 calc(50% - 8px);
                min-width: 0;
            }
            .search-area .search-input,
            .search-area .filter-select,
            .search-area .btn {
                min-width: 0;
            }
            .card-meta {
                flex-wrap: wrap;
                gap: 6px;
                justify-content: flex-start;
            }
        }

        @media (max-width: 768px) {
            .card-actions {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
            }
            .detail-mobile-sticky-actions {
                position: sticky;
                bottom: 0;
                z-index: 18;
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
                margin-top: 12px;
                padding: 10px;
                border-radius: 12px;
                border: 1px solid rgba(101, 120, 190, 0.3);
                background: rgba(248, 251, 255, 0.96);
                backdrop-filter: blur(6px);
                box-shadow: 0 -8px 16px rgba(22, 36, 70, 0.14);
            }
            #detail-modal .modal {
                padding-bottom: calc(92px + env(safe-area-inset-bottom));
            }
            body.dark-mode .detail-mobile-sticky-actions {
                border-color: rgba(131, 150, 218, 0.42);
                background: rgba(27, 34, 56, 0.95);
                box-shadow: 0 -8px 20px rgba(2, 5, 12, 0.45);
            }
            .video-showcase-label {
                align-items: stretch;
            }
            .video-help-btn {
                width: 100%;
                justify-content: center;
            }
            .card-actions .btn,
            .card-actions a.btn {
                width: 100%;
                min-width: 0;
            }
            .card-actions > [style*="flex:1"] {
                grid-column: 1 / -1;
            }
            input,
            textarea,
            select,
            .form-input,
            .search-input,
            .chat-input {
                font-size: 16px;
            }
            .modal-overlay {
                padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
            }
            .modal {
                max-width: calc(100vw - 16px);
                border-radius: 14px;
                padding: 14px;
                max-height: calc(100dvh - 16px);
            }
            .modal h2 {
                font-size: clamp(20px, 5.4vw, 26px);
                padding-left: 32px;
                padding-right: 6px;
            }
            .subscription-grid {
                grid-template-columns: 1fr;
            }
            .subscription-history-list {
                max-height: 300px;
            }
            .subscription-history-item {
                grid-template-columns: 1fr;
            }
            .subscription-history-actions {
                justify-items: start;
            }
            html[dir="ltr"] .modal h2 {
                padding-left: 6px;
                padding-right: 32px;
            }
            #add-form div[style*="display:flex"],
            #add-form div[style*="display: flex"],
            #edit-form div[style*="display:flex"],
            #edit-form div[style*="display: flex"] {
                flex-direction: column !important;
                align-items: stretch !important;
            }
            #add-form div[style*="display:flex"] > *,
            #add-form div[style*="display: flex"] > *,
            #edit-form div[style*="display:flex"] > *,
            #edit-form div[style*="display: flex"] > * {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                flex: 1 1 100% !important;
            }

            /* Fullscreen mobile sheet for Add/Edit to guarantee viewport fit */
            #add-modal,
            #edit-modal {
                align-items: stretch;
                justify-content: flex-start;
                padding: 0;
            }
            #add-modal .modal,
            #edit-modal .modal {
                box-sizing: border-box;
                width: 100%;
                max-width: 100% !important;
                min-height: 100vh;
                min-height: 100dvh;
                height: 100vh;
                height: 100dvh;
                max-height: 100vh;
                max-height: 100dvh;
                margin: 0;
                border-radius: 0;
                padding: max(10px, env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom));
            }
            #add-modal .close-modal,
            #edit-modal .close-modal {
                top: max(6px, env(safe-area-inset-top));
                left: auto;
                right: 8px;
                width: 34px;
                height: 34px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border-radius: 9px;
                background: rgba(0, 0, 0, 0.12);
                z-index: 20;
                pointer-events: auto;
            }
            html[dir="ltr"] #add-modal .close-modal,
            html[dir="ltr"] #edit-modal .close-modal {
                right: 8px;
            }
            #add-modal .modal h2,
            #edit-modal .modal h2 {
                position: sticky;
                top: 0;
                z-index: 4;
                margin: 0 0 10px;
                padding-top: 2px;
                padding-bottom: 8px;
                padding-left: 6px;
                padding-right: 38px;
                background: inherit;
                border-bottom: 1px solid rgba(137, 145, 170, 0.22);
            }
            html[dir="ltr"] #add-modal .modal h2,
            html[dir="ltr"] #edit-modal .modal h2 {
                padding-right: 38px;
                padding-left: 6px;
            }
            #add-modal .form-input,
            #edit-modal .form-input {
                margin-bottom: 10px;
                padding: 11px 12px;
            }
        }

        @media (max-width: 480px) {
            .filters { font-size: 12px; }
            .chip { padding: 6px 12px; }
            .advanced-filters { grid-template-columns: 1fr; }
            .advanced-filters .filter-select { min-width: 100%; width: 100%; }
            .price-range-wrap { min-width: 100%; }
            .notification-actions { grid-template-columns: 1fr; }
            .location-row { flex-direction: column; }
            .location-map-actions { flex-direction: column; align-items: stretch; }
            .location-map-coords { max-width: 100%; width: 100%; }
            .search-area { flex-direction: column; }
            .search-input { width: 100%; }
            .card-img { height: 150px; }
            .social-icon { width: 35px; height: 35px; font-size: 16px; }
            .products { grid-template-columns: repeat(1, 1fr); }
            .chat-container {
                height: min(65vh, 430px);
                bottom: max(8px, env(safe-area-inset-bottom));
            }
            .blocked-user-item {
                flex-direction: column;
                align-items: flex-start;
            }
            .blocked-user-actions {
                width: 100%;
                justify-content: flex-start;
            }
            #user-info > div > .btn {
                flex: 1 1 100%;
            }
            .card-actions {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 360px) {
            .container { padding: 0 10px; }
            .btn { padding: 8px 12px; font-size: 12px; }
            .btn-sm { padding: 6px 10px; font-size: 11px; }
            .logo .logo-mark { width: 90px; max-height: 90px; height: auto; object-fit: contain; }
            .dash-tab { font-size: 12px; }
            .modal { padding: 12px; }
            .form-input { padding: 10px 12px; font-size: 14px; }
            .search-input { font-size: 14px; }
            .card-body { padding: 12px; }
        }

        @media (max-height: 740px) {
            .chat-container {
                height: min(62vh, 470px);
            }
            .modal {
                max-height: calc(100vh - 12px);
            }
            .modal-overlay {
                align-items: flex-start;
                padding-top: max(8px, env(safe-area-inset-top));
            }
            #auth-modal.modal-overlay {
                align-items: center;
            }
        }

        @media (min-width: 1536px) {
            .container {
                max-width: 1440px;
            }
            .products {
                grid-template-columns: repeat(5, 1fr);
                gap: 24px;
            }
        }

        @media (hover: none) and (pointer: coarse) {
            .btn,
            .chip,
            .dash-tab,
            .nav a,
            nav a {
                min-height: 40px;
            }
            .card:hover {
                transform: none;
                box-shadow: var(--shadow-sm);
            }
            .close-modal,
            .popup-ad-close,
            .floating-notification-close {
                min-width: 36px;
                min-height: 36px;
            }
        }

        @media (max-width: 900px), (hover: none) and (pointer: coarse) {
            body,
            body.dark-mode {
                animation: pageFadeIn 0.35s ease-out !important;
            }

            :is(.btn-ghost, nav a, .chip, .dash-tab, .language-btn),
            :is(.search-area, .advanced-filters, .price-range-wrap) {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }

            :is(.btn-ghost, nav a, .chip, .dash-tab, .language-btn)::before,
            :is(.btn-ghost, nav a, .chip, .dash-tab, .language-btn)::after,
            :is(.search-area, .advanced-filters, .price-range-wrap)::before {
                animation: none !important;
                opacity: 0.12 !important;
            }

            .modal-overlay {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }

            .filter-select,
            body.dark-mode .filter-select,
            body.dark-mode .advanced-filters .filter-select {
                animation: none !important;
                background-position: 50% 50% !important;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            body,
            header,
            .search-area,
            .filters,
            .advanced-filters,
            .products,
            .card,
            .dash-card,
            #seller-profile-header {
                animation: none !important;
            }
            .logo,
            header::after,
            .logo::after {
                animation: none !important;
            }
            :is(.btn-ghost, nav a, .chip, .dash-tab, .language-btn)::before,
            :is(.btn-ghost, nav a, .chip, .dash-tab, .language-btn)::after,
            :is(.search-area, .advanced-filters, .price-range-wrap)::before,
            .filter-select {
                animation: none !important;
            }
            .reveal-on-scroll,
            .reveal-on-scroll:not(.is-visible),
            .reveal-on-scroll.is-visible {
                opacity: 1 !important;
                transform: none !important;
                filter: none !important;
                transition: none !important;
            }
            .card,
            .card::after {
                transition: none !important;
            }
            .modern-site-header,
            #main-view,
            .mobile-bottom-nav,
            .modern-mobile-toggle,
            .modern-mobile-toggle-icon span,
            .modern-mobile-backdrop,
            .modern-mobile-drawer,
            .modern-mobile-nav a,
            .modern-mobile-tool {
                transition: none !important;
            }
            .card.tap-burst,
            .card.is-pressed,
            .card:active {
                animation: none !important;
                transform: none !important;
            }
        }

        @media (max-width: 768px) {
            body.force-desktop-products-mobile .products {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 12px !important;
            }
            body.force-desktop-products-mobile .card {
                min-width: 0;
            }
            body.force-desktop-products-mobile .card-img {
                height: clamp(130px, 30vw, 180px) !important;
            }
            body.force-desktop-products-mobile .card-body {
                padding: 10px !important;
            }
            body.force-desktop-products-mobile .card-title {
                font-size: 14px !important;
                white-space: normal !important;
                line-height: 1.3 !important;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden !important;
            }
            body.force-desktop-products-mobile .card-price {
                font-size: 16px !important;
                line-height: 1.3;
            }
            body.force-desktop-products-mobile .card-meta {
                font-size: 11px !important;
                gap: 5px;
                flex-wrap: wrap;
                justify-content: flex-start;
            }
            body.force-desktop-products-mobile .card-views {
                font-size: 12px !important;
            }
            body.force-desktop-products-mobile .card-actions {
                display: grid !important;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 6px !important;
                align-items: stretch;
            }
            body.force-desktop-products-mobile .card-actions .btn,
            body.force-desktop-products-mobile .card-actions a.btn {
                width: 100% !important;
                min-height: 34px;
                padding: 7px 8px !important;
                font-size: 12px !important;
            }
            body.force-desktop-products-mobile .card-actions > [style*="flex:1"] {
                grid-column: 1 / -1;
            }
        }
        @media (max-width: 480px) {
            body.force-desktop-products-mobile .products {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 10px !important;
            }
            body.force-desktop-products-mobile .card-body {
                padding: 9px !important;
            }
            body.force-desktop-products-mobile .card-title {
                font-size: 13px !important;
            }
            body.force-desktop-products-mobile .card-price {
                font-size: 15px !important;
            }
        }
        @media (max-width: 380px) {
            body.force-desktop-products-mobile .products {
                grid-template-columns: 1fr !important;
            }
        }

        /* ================= COMPACT MOBILE MARKETPLACE HEADER ================= */
        @media (max-width: 768px) {
            header {
                padding: max(8px, env(safe-area-inset-top)) 0 8px;
                box-shadow: 0 6px 16px rgba(22, 30, 54, 0.14);
            }
            .header-content {
                gap: 8px;
            }
            .logo {
                justify-content: center;
            }
            .logo .logo-mark {
                width: 126px;
                max-height: 126px;
                height: auto;
                object-fit: contain;
            }

            nav {
                width: 100%;
            }
            nav ul {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 4px;
                padding: 4px;
                border-radius: 16px;
                overflow: visible;
            }
            nav li {
                min-width: 0;
            }
            nav a {
                width: 100%;
                min-width: 0;
                height: 32px;
                padding: 0 6px;
                font-size: 12px;
                font-weight: 800;
                border-radius: 11px;
            }

            .user-actions {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(5, minmax(0, 1fr));
                gap: 6px;
                align-items: center;
            }
            .language-selector {
                grid-column: 1 / span 2;
                min-width: 0;
            }
            #dark-mode-toggle,
            #btn-cart,
            #btn-notifications {
                width: 100%;
                min-width: 0;
                height: 32px;
                padding: 0;
                border-radius: 10px;
            }
            #dark-mode-toggle i,
            #btn-cart i,
            #btn-notifications i {
                font-size: 14px;
            }
            .cart-count-badge,
            .notification-count-badge {
                min-width: 16px;
                height: 16px;
                font-size: 9px;
                padding: 0 4px;
                margin-inline-start: 3px;
            }

            .language-btn {
                width: 100% !important;
                min-height: 32px;
                padding: 0 8px;
                border-radius: 10px;
                font-size: 11px;
                justify-content: center;
            }
            #current-language {
                max-width: 84px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .language-dropdown,
            .language-dropdown.mobile-floating {
                position: absolute;
                inset: auto;
                top: calc(100% + 6px);
                right: 0;
                left: auto;
                width: 210px;
                min-width: 0;
                max-width: min(92vw, 210px);
                max-height: 260px;
                overflow-y: auto;
                z-index: 7000;
            }
            html[dir="ltr"] .language-dropdown,
            html[dir="ltr"] .language-dropdown.mobile-floating {
                right: auto;
                left: 0;
            }

            #auth-buttons,
            #user-info {
                grid-column: 1 / -1;
                width: 100% !important;
            }
            #auth-buttons .btn {
                width: 100% !important;
                min-height: 32px;
                padding: 6px 10px;
                font-size: 12px;
                border-radius: 10px;
            }
            #user-info > div {
                width: 100% !important;
                display: grid !important;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 6px;
                align-items: stretch;
            }
            #user-info > div > .btn {
                width: 100% !important;
                min-width: 0 !important;
                padding: 0 8px;
                min-height: 32px;
                font-size: 12px;
                justify-content: center;
            }
            #nav-username,
            #btn-status-toggle {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        @media (max-width: 480px) {
            .logo .logo-mark {
                width: 112px;
                max-height: 112px;
                height: auto;
                object-fit: contain;
            }
            nav a {
                height: 30px;
                font-size: 11px;
                padding: 0 4px;
            }
            .user-actions {
                grid-template-columns: repeat(5, minmax(0, 1fr));
            }
            .language-selector {
                grid-column: 1 / span 2;
            }
            .language-btn {
                padding: 0 8px;
            }
            .language-btn #current-language {
                display: inline-block;
                max-width: 72px;
            }
            #user-info > div {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        /* ================= GUEST MOBILE HEADER TUNING ================= */
        @media (max-width: 768px) {
            body[data-auth-state="guest"] .user-actions {
                grid-template-columns: repeat(6, minmax(0, 1fr));
                gap: 6px;
            }
            body[data-auth-state="guest"] .language-selector {
                grid-column: 1 / span 2;
            }
            body[data-auth-state="guest"] #dark-mode-toggle {
                grid-column: 3 / span 1;
            }
            body[data-auth-state="guest"] #btn-cart {
                grid-column: 4 / span 1;
            }
            body[data-auth-state="guest"] #btn-notifications {
                display: none !important;
            }
            body[data-auth-state="guest"] #auth-buttons {
                grid-column: 5 / span 2;
                width: 100% !important;
            }
            body[data-auth-state="guest"] #auth-buttons .btn {
                min-height: 32px;
                padding: 0 8px;
                font-size: 11px;
                border-radius: 10px;
                white-space: nowrap;
            }
            body[data-auth-state="guest"] #current-language {
                max-width: 88px;
            }
        }

        @media (max-width: 480px) {
            body[data-auth-state="guest"] .user-actions {
                grid-template-columns: repeat(5, minmax(0, 1fr));
            }
            body[data-auth-state="guest"] .language-selector {
                grid-column: 1 / span 2;
            }
            body[data-auth-state="guest"] #dark-mode-toggle {
                grid-column: 3 / span 1;
            }
            body[data-auth-state="guest"] #btn-cart {
                grid-column: 4 / span 1;
            }
            body[data-auth-state="guest"] #auth-buttons {
                grid-column: 5 / span 1;
            }
            body[data-auth-state="guest"] #auth-buttons .btn {
                font-size: 10px;
                padding: 0 6px;
            }
            body[data-auth-state="guest"] #current-language {
                max-width: 70px;
            }
        }

        /* ================= MOBILE HEADER MENU ================= */
        @media (max-width: 768px) {
            .header-content {
                grid-template-columns: minmax(0, 1fr) auto auto;
                gap: 10px;
                align-items: center;
            }
            .logo {
                grid-column: 1;
                justify-content: flex-start;
            }
            .header-menu-divider {
                display: block;
                grid-column: 2;
                justify-self: center;
            }
            .header-menu-toggle {
                display: inline-flex;
                grid-column: 3;
                justify-self: end;
            }
            .header-shortcuts,
            nav,
            .user-actions {
                grid-column: 1 / -1;
            }
            .header-shortcuts {
                display: none;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 8px;
                margin-top: 2px;
            }
            nav,
            .user-actions {
                display: none;
                width: 100%;
            }
            .header-content.is-mobile-menu-open .header-shortcuts {
                display: grid;
            }
            .header-content.is-mobile-menu-open nav {
                display: flex;
            }
            .header-content.is-mobile-menu-open .user-actions {
                display: grid;
            }
            nav ul {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 6px;
                padding: 6px;
                border-radius: 18px;
                overflow: visible;
            }
            nav a {
                width: 100%;
                min-width: 0;
                height: 36px;
                padding: 0 10px;
                font-size: 12px;
                border-radius: 12px;
            }
            .user-actions {
                margin-top: 2px;
            }
        }

        @media (max-width: 480px) {
            .header-menu-divider {
                height: 40px;
            }
            .header-menu-toggle {
                width: 48px;
                height: 48px;
                border-radius: 14px;
            }
            .header-menu-toggle span {
                width: 30px;
                height: 5px;
            }
            .header-shortcuts {
                gap: 6px;
            }
            .header-shortcut {
                min-height: 54px;
                padding: 8px 5px;
                font-size: 11px;
            }
            nav ul {
                grid-template-columns: 1fr;
            }
        }

        /* ================= MOBILE RESPONSIVE HOTFIX ================= */
        @media (max-width: 768px) {
            .container {
                padding-inline: 12px !important;
            }
            .header-content,
            nav,
            .user-actions {
                width: 100%;
                min-width: 0;
            }
            nav ul {
                width: 100%;
                min-width: 0;
                overflow: hidden;
            }
            nav a {
                min-width: 0;
                font-size: 11px;
                padding-inline: 6px;
            }

            body[data-auth-state="guest"] .user-actions {
                grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
                gap: 6px;
            }
            body[data-auth-state="guest"] .language-selector,
            body[data-auth-state="guest"] #dark-mode-toggle,
            body[data-auth-state="guest"] #btn-cart,
            body[data-auth-state="guest"] #auth-buttons {
                grid-column: auto;
                min-width: 0;
            }
            body[data-auth-state="guest"] #btn-notifications {
                display: none !important;
            }
            body[data-auth-state="guest"] .language-btn {
                min-height: 32px;
                font-size: 11px;
                padding-inline: 8px;
            }
            body[data-auth-state="guest"] #auth-buttons .btn {
                min-height: 32px;
                font-size: 11px;
                white-space: nowrap;
                padding-inline: 8px;
            }

            .search-area {
                margin: 14px 0 12px;
                padding: 12px;
                gap: 8px;
                display: grid;
                grid-template-columns: 1fr;
                align-items: stretch;
                overflow: hidden;
            }
            .search-area > i {
                display: none;
            }
            .search-input {
                width: 100% !important;
                min-width: 0 !important;
                display: block;
                border-radius: 12px;
                padding: 11px 12px;
                text-align: start;
            }
            .search-area .btn {
                width: 100%;
                min-width: 0;
            }
            #category-filters {
                overflow-x: auto;
                overflow-y: hidden;
                flex-wrap: nowrap;
                gap: 8px;
                padding-bottom: 6px;
                -webkit-overflow-scrolling: touch;
            }
            #category-filters .chip {
                flex: 0 0 auto;
            }
        }

        @media (max-width: 480px) {
            nav a {
                font-size: 10px;
                padding-inline: 4px;
            }
            body[data-auth-state="guest"] .user-actions {
                grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
            }
            body[data-auth-state="guest"] #current-language {
                max-width: 64px;
            }
            body[data-auth-state="guest"] #auth-buttons .btn {
                font-size: 10px;
                padding-inline: 6px;
            }
            .search-input {
                font-size: 15px;
            }
        }

        @keyframes loaderPanelPop {
            from {
                opacity: 0;
                transform: translateY(18px) scale(0.97);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes loaderBackdropSpin {
            from { transform: rotate(0deg) scale(1); }
            to { transform: rotate(360deg) scale(1.04); }
        }

        @keyframes loaderBorderSpin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes loaderOrbFloat {
            0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
            35% { transform: translate3d(16px, -12px, 0) scale(1.06); }
            70% { transform: translate3d(-10px, 10px, 0) scale(0.96); }
        }

        @keyframes loaderLogoPulse {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-2px) scale(1.015); }
        }

        @keyframes loaderGlowBreath {
            0%, 100% { opacity: 0.34; transform: scaleX(0.94); }
            50% { opacity: 0.62; transform: scaleX(1.05); }
        }

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

        @keyframes loaderTextShimmer {
            from { background-position: 0% 50%; }
            to { background-position: 200% 50%; }
        }

        @keyframes loaderBarFlow {
            0% { transform: translateX(-82%); }
            50% { transform: translateX(82%); }
            100% { transform: translateX(-82%); }
        }

        @keyframes loaderDots {
            from { width: 0; }
            to { width: 18px; }
        }

        @keyframes liquidBlobDrift {
            0% {
                transform: translate3d(-10%, -6%, 0) rotate(0deg) scale(1);
            }
            50% {
                transform: translate3d(10%, 8%, 0) rotate(11deg) scale(1.06);
            }
            100% {
                transform: translate3d(-8%, 5%, 0) rotate(-8deg) scale(0.98);
            }
        }

        @keyframes liquidSheenSweep {
            0%, 12% {
                transform: translateX(-140%);
                opacity: 0;
            }
            30%, 54% {
                transform: translateX(130%);
                opacity: 0.5;
            }
            100% {
                transform: translateX(130%);
                opacity: 0;
            }
        }

        @keyframes liquidPanelFlow {
            0% {
                transform: translate3d(-6%, -5%, 0) scale(1);
            }
            50% {
                transform: translate3d(7%, 7%, 0) scale(1.04);
            }
            100% {
                transform: translate3d(-4%, 4%, 0) scale(0.98);
            }
        }

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

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

        @keyframes bodyLightDrift {
            0% {
                background-position: 0% 0%, 100% 0%, 50% 100%, 0% 0%;
            }
            50% {
                background-position: 32% 18%, 72% 24%, 48% 84%, 0% 0%;
            }
            100% {
                background-position: 100% 100%, 0% 100%, 54% 70%, 0% 0%;
            }
        }

        @keyframes bodyNebulaShift {
            0% {
                background-position: 0% 0%, 100% 0%, 50% 100%, 0% 0%, 0 0;
            }
            50% {
                background-position: 34% 20%, 70% 28%, 56% 78%, 0% 0%, 0 4px;
            }
            100% {
                background-position: 100% 100%, 0% 100%, 42% 62%, 0% 0%, 0 9px;
            }
        }

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

        @keyframes sectionRise {
            from {
                opacity: 0;
                transform: translateY(14px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes cardEnter {
            from {
                opacity: 0;
                transform: translateY(12px) scale(0.99);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes cardTapPulse {
            0% {
                transform: translateY(0) scale(1);
            }
            38% {
                transform: translateY(-3px) scale(0.983);
            }
            100% {
                transform: translateY(0) scale(1);
            }
        }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* ================= 2026 ROADMAP UPGRADE OVERRIDES ================= */
        .market-hero {
            position: relative;
            overflow: hidden;
            border-radius: 22px;
            padding: clamp(22px, 4vw, 38px);
            margin: 8px 0 16px;
            border: 1px solid rgba(91, 110, 184, 0.24);
            background:
                radial-gradient(circle at 14% 20%, rgba(96, 0, 220, 0.22), transparent 44%),
                radial-gradient(circle at 86% 18%, rgba(0, 210, 255, 0.18), transparent 38%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(243, 247, 255, 0.94) 100%);
            box-shadow: 0 16px 30px rgba(36, 44, 82, 0.14);
        }
        .market-hero::after {
            content: "";
            position: absolute;
            inset: auto -90px -95px auto;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(98, 0, 234, 0.2) 0%, rgba(98, 0, 234, 0) 72%);
            pointer-events: none;
        }
        .market-hero-content {
            position: relative;
            z-index: 1;
        }
        .market-hero-eyebrow {
            margin: 0 0 8px;
            color: #5b45ae;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .market-hero-title {
            margin: 0;
            font-size: clamp(22px, 4vw, 38px);
            line-height: 1.2;
            color: #1a2338;
            font-weight: 900;
            max-width: 18ch;
        }
        .market-hero-subtitle {
            margin: 10px 0 14px;
            color: #44516f;
            font-size: clamp(14px, 1.9vw, 17px);
            max-width: 56ch;
            line-height: 1.7;
        }
        .market-hero-points {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }
        .market-hero-points span {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 12px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.78);
            border: 1px solid rgba(108, 126, 198, 0.24);
            color: #2a3452;
            font-size: 12px;
            font-weight: 700;
        }
        .market-hero-points span i {
            color: #5f43cd;
            font-size: 12px;
        }
        body.dark-mode .market-hero {
            border-color: rgba(146, 167, 236, 0.28);
            background:
                radial-gradient(circle at 18% 18%, rgba(152, 100, 255, 0.28), transparent 44%),
                radial-gradient(circle at 86% 16%, rgba(59, 198, 255, 0.22), transparent 40%),
                linear-gradient(135deg, rgba(29, 37, 59, 0.9) 0%, rgba(25, 32, 52, 0.94) 100%);
            box-shadow: 0 18px 30px rgba(0, 0, 0, 0.3);
        }
        body.dark-mode .market-hero-eyebrow {
            color: #bfb0ff;
        }
        body.dark-mode .market-hero-title {
            color: #eff4ff;
        }
        body.dark-mode .market-hero-subtitle {
            color: #c7d3ef;
        }
        body.dark-mode .market-hero-points span {
            background: rgba(18, 24, 39, 0.54);
            border-color: rgba(146, 167, 236, 0.24);
            color: #dce7ff;
        }
        body.dark-mode .market-hero-points span i {
            color: #96caff;
        }

        .visitor-connect-band {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(240px, 0.92fr) minmax(0, 1fr);
            gap: 18px;
            margin: 0 0 18px;
            align-items: stretch;
        }
        .visitor-connect-card,
        .visitor-connect-metric-card {
            position: relative;
            overflow: hidden;
            border-radius: 22px;
            border: 1px solid rgba(91, 110, 184, 0.18);
            box-shadow: 0 16px 30px rgba(36, 44, 82, 0.12);
        }
        .visitor-connect-card {
            min-height: 252px;
            padding: clamp(18px, 3vw, 24px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(244, 247, 255, 0.96) 100%);
        }
        .visitor-connect-card::after,
        .visitor-connect-metric-card::after {
            content: "";
            position: absolute;
            inset: auto -70px -84px auto;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            pointer-events: none;
            opacity: 0.95;
        }
        .visitor-connect-card-sell {
            background:
                radial-gradient(circle at 18% 18%, rgba(255, 152, 0, 0.18), transparent 42%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 249, 239, 0.98) 100%);
        }
        .visitor-connect-card-sell::after {
            background: radial-gradient(circle, rgba(255, 167, 38, 0.2) 0%, rgba(255, 167, 38, 0) 72%);
        }
        .visitor-connect-card-search {
            background:
                radial-gradient(circle at 82% 16%, rgba(98, 0, 234, 0.18), transparent 40%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(242, 246, 255, 0.98) 100%);
        }
        .visitor-connect-card-search::after {
            background: radial-gradient(circle, rgba(94, 92, 230, 0.18) 0%, rgba(94, 92, 230, 0) 72%);
        }
        .visitor-connect-kicker {
            position: relative;
            z-index: 1;
            margin: 0;
            color: #27324d;
            font-size: clamp(15px, 2vw, 18px);
            font-weight: 900;
            line-height: 1.7;
            text-align: center;
        }
        .visitor-connect-visual {
            position: relative;
            z-index: 1;
            min-height: 108px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            flex-wrap: wrap;
        }
        .visitor-connect-pill {
            width: 54px;
            height: 54px;
            border-radius: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #24314d;
            background: rgba(255, 255, 255, 0.86);
            border: 1px solid rgba(108, 126, 198, 0.18);
            box-shadow: 0 12px 22px rgba(45, 58, 99, 0.12);
            font-size: 22px;
        }
        .visitor-connect-pill-main {
            width: 68px;
            height: 68px;
            border-radius: 22px;
            font-size: 26px;
        }
        .visitor-connect-metrics {
            display: grid;
            grid-template-columns: 1fr;
            gap: 18px;
        }
        .visitor-connect-metric-card {
            min-height: 117px;
            padding: 20px 18px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 248, 255, 0.96) 100%);
        }
        .visitor-connect-metric-card::after {
            background: radial-gradient(circle, rgba(98, 0, 234, 0.12) 0%, rgba(98, 0, 234, 0) 72%);
        }
        .visitor-connect-metric-card strong {
            position: relative;
            z-index: 1;
            display: block;
            margin: 0;
            color: #111a2f;
            font-size: clamp(28px, 4vw, 52px);
            line-height: 1;
            font-weight: 900;
        }
        .visitor-connect-metric-card span {
            position: relative;
            z-index: 1;
            margin-top: 10px;
            color: #52607f;
            font-size: clamp(13px, 1.8vw, 16px);
            font-weight: 700;
            line-height: 1.6;
            max-width: 22ch;
        }
        .visitor-connect-btn {
            position: relative;
            z-index: 1;
            width: 100%;
            min-height: 56px;
            font-size: clamp(18px, 2.2vw, 22px);
            font-weight: 900;
        }
        body.dark-mode .visitor-connect-card,
        body.dark-mode .visitor-connect-metric-card {
            border-color: rgba(146, 167, 236, 0.2);
            box-shadow: 0 18px 30px rgba(0, 0, 0, 0.26);
        }
        body.dark-mode .visitor-connect-card-sell {
            background:
                radial-gradient(circle at 16% 18%, rgba(255, 152, 0, 0.18), transparent 42%),
                linear-gradient(135deg, rgba(32, 38, 57, 0.97) 0%, rgba(40, 34, 27, 0.96) 100%);
        }
        body.dark-mode .visitor-connect-card-search {
            background:
                radial-gradient(circle at 82% 16%, rgba(98, 0, 234, 0.2), transparent 40%),
                linear-gradient(135deg, rgba(28, 35, 55, 0.97) 0%, rgba(24, 31, 49, 0.96) 100%);
        }
        body.dark-mode .visitor-connect-metric-card {
            background: linear-gradient(135deg, rgba(25, 33, 52, 0.96) 0%, rgba(20, 27, 44, 0.98) 100%);
        }
        body.dark-mode .visitor-connect-kicker,
        body.dark-mode .visitor-connect-metric-card strong {
            color: #f3f6ff;
        }
        body.dark-mode .visitor-connect-metric-card span {
            color: #cad4ee;
        }
        body.dark-mode .visitor-connect-pill {
            color: #eef4ff;
            background: rgba(21, 28, 44, 0.72);
            border-color: rgba(146, 167, 236, 0.2);
            box-shadow: 0 14px 22px rgba(0, 0, 0, 0.22);
        }
        @media (max-width: 980px) {
            .visitor-connect-band {
                grid-template-columns: 1fr;
            }
            .visitor-connect-metrics {
                order: -1;
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .visitor-connect-card {
                min-height: 220px;
            }
        }
        @media (max-width: 560px) {
            .visitor-connect-metrics {
                grid-template-columns: 1fr;
            }
            .visitor-connect-card,
            .visitor-connect-metric-card {
                border-radius: 20px;
            }
            .visitor-connect-card {
                min-height: 0;
            }
            .visitor-connect-visual {
                min-height: 94px;
            }
        }

        #community-view .community-section {
            position: relative;
            z-index: 0;
            overflow: hidden;
            border-radius: 24px;
            margin: 8px 0 16px;
            padding: clamp(18px, 3vw, 28px);
            border: 1px solid rgba(112, 129, 206, 0.32);
            background:
                radial-gradient(circle at 10% 12%, rgba(87, 67, 205, 0.2), transparent 42%),
                radial-gradient(circle at 92% 16%, rgba(0, 210, 255, 0.14), transparent 38%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.94));
            box-shadow: 0 18px 32px rgba(36, 48, 83, 0.16);
        }
        #community-view .community-section::before {
            content: "";
            position: absolute;
            top: -45px;
            left: -45px;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(98, 0, 234, 0.18), rgba(98, 0, 234, 0));
            pointer-events: none;
        }
        #community-view .community-section::after {
            content: "";
            position: absolute;
            bottom: -80px;
            right: -70px;
            width: 240px;
            height: 240px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(0, 212, 255, 0.16), rgba(0, 212, 255, 0));
            pointer-events: none;
        }
        #community-view .community-shell {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
            gap: 16px;
            align-items: stretch;
        }
        #community-view .community-eyebrow {
            margin: 0 0 8px;
            color: #4f3ac2;
            font-size: 12px;
            font-weight: 900;
            letter-spacing: 0.07em;
            text-transform: uppercase;
        }
        #community-view .community-title {
            margin: 0;
            color: #1d2641;
            font-size: clamp(22px, 3.2vw, 36px);
            line-height: 1.18;
            font-weight: 900;
            max-width: 20ch;
        }
        #community-view .community-subtitle {
            margin: 10px 0 14px;
            color: #364a74;
            font-size: clamp(13px, 1.8vw, 16px);
            line-height: 1.75;
            max-width: 66ch;
        }
        #community-view .community-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 12px;
        }
        #community-view .community-actions .btn {
            min-height: 42px;
        }
        #community-view .community-tags {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }
        #community-view .community-tags > span {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.74);
            border: 1px solid rgba(98, 114, 189, 0.28);
            color: #2b3a60;
            font-size: 12px;
            font-weight: 800;
        }
        #community-view .community-tags i {
            color: #5d42cb;
            font-size: 12px;
        }
        #community-view .community-metrics {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }
        #community-view .community-metric-card {
            min-height: 102px;
            border-radius: 16px;
            border: 1px solid rgba(103, 122, 198, 0.28);
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(244, 249, 255, 0.82));
            padding: 12px 14px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 4px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
        }
        #community-view .community-metric-card strong {
            color: #2f2ab5;
            font-size: 26px;
            font-weight: 900;
            line-height: 1;
        }
        #community-view .community-metric-card span {
            color: #314466;
            font-size: 13px;
            font-weight: 700;
            line-height: 1.4;
        }
        body.dark-mode #community-view .community-section {
            border-color: rgba(150, 170, 236, 0.3);
            background:
                radial-gradient(circle at 12% 10%, rgba(144, 101, 255, 0.26), transparent 44%),
                radial-gradient(circle at 90% 18%, rgba(58, 199, 255, 0.2), transparent 40%),
                linear-gradient(135deg, rgba(31, 39, 62, 0.95), rgba(25, 33, 52, 0.96));
            box-shadow: 0 20px 36px rgba(0, 0, 0, 0.33);
        }
        body.dark-mode #community-view .community-eyebrow {
            color: #bcaeff;
        }
        body.dark-mode #community-view .community-title {
            color: #ecf3ff;
        }
        body.dark-mode #community-view .community-subtitle {
            color: #c7d5f3;
        }
        body.dark-mode #community-view .community-tags > span {
            background: rgba(23, 30, 48, 0.68);
            border-color: rgba(144, 164, 232, 0.24);
            color: #dce8ff;
        }
        body.dark-mode #community-view .community-tags i {
            color: #8fc7ff;
        }
        body.dark-mode #community-view .community-metric-card {
            border-color: rgba(142, 164, 234, 0.26);
            background: linear-gradient(145deg, rgba(36, 45, 70, 0.86), rgba(29, 38, 60, 0.86));
            box-shadow: inset 0 1px 0 rgba(209, 226, 255, 0.12);
        }
        body.dark-mode #community-view .community-metric-card strong {
            color: #bbafff;
        }
        body.dark-mode #community-view .community-metric-card span {
            color: #d0def9;
        }

        .community-transition {
            position: fixed;
            inset: 0;
            z-index: 16000;
            display: none;
            align-items: center;
            justify-content: center;
            background: linear-gradient(180deg, rgba(7, 10, 18, 0.68), rgba(9, 13, 24, 0.8));
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            padding: 18px;
        }
        .community-transition-card {
            width: min(460px, 92vw);
            border-radius: 20px;
            border: 1px solid rgba(134, 153, 232, 0.3);
            background: linear-gradient(145deg, rgba(23, 31, 50, 0.95), rgba(17, 24, 40, 0.96));
            box-shadow: 0 26px 60px rgba(0, 0, 0, 0.42);
            padding: 22px;
            text-align: center;
            color: #edf3ff;
        }
        .community-transition-icon {
            font-size: 28px;
            color: #9fb6ff;
            margin-bottom: 10px;
        }
        .community-transition-card h3 {
            margin: 0 0 12px;
            font-size: 21px;
            font-weight: 900;
        }
        .community-transition-bar {
            position: relative;
            width: 100%;
            height: 8px;
            border-radius: 999px;
            overflow: hidden;
            border: 1px solid rgba(151, 170, 245, 0.32);
            background: rgba(255, 255, 255, 0.08);
        }
        .community-transition-bar span {
            display: block;
            width: 45%;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #7f63ff, #44cfff, #00e676);
            animation: loaderBarFlow 1.15s ease-in-out infinite;
        }

        #community-view .community-topic-strip,
        #community-view .community-live-section,
        #community-view .community-verified-section {
            margin: 0 0 14px;
            border-radius: 18px;
            border: 1px solid rgba(105, 126, 202, 0.24);
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.93), rgba(244, 248, 255, 0.94));
            box-shadow: 0 10px 24px rgba(36, 48, 82, 0.12);
            padding: 16px;
        }
        #community-view .community-topic-head {
            margin-bottom: 10px;
        }
        #community-view .community-topic-head h3 {
            margin: 0;
            color: #223050;
            font-size: clamp(18px, 2.5vw, 26px);
            font-weight: 900;
        }
        #community-view .community-topic-head p {
            margin: 6px 0 0;
            color: #4b5d86;
            font-size: 14px;
            line-height: 1.7;
        }
        #community-view .community-topic-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
        }
        #community-view .community-topic-card {
            border: 1px solid rgba(102, 125, 204, 0.26);
            border-radius: 14px;
            background: linear-gradient(135deg, rgba(251, 253, 255, 0.96), rgba(240, 246, 255, 0.94));
            padding: 14px 12px;
            text-align: start;
            color: #27375f;
            cursor: pointer;
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
        }
        #community-view .community-topic-card:hover {
            transform: translateY(-3px);
            border-color: rgba(92, 114, 194, 0.5);
            box-shadow: 0 12px 22px rgba(69, 86, 140, 0.16);
        }
        #community-view .community-topic-name {
            display: block;
            font-size: 13px;
            font-weight: 900;
            margin-bottom: 4px;
        }
        #community-view .community-topic-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 34px;
            padding: 3px 8px;
            border-radius: 999px;
            background: rgba(87, 67, 205, 0.12);
            color: #4f35c8;
            font-size: 12px;
            font-weight: 800;
        }
        #community-view .community-products-grid {
            margin-top: 6px;
        }
        #community-view .community-filter-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 4px 0 12px;
        }
        #community-view .community-filter-chip {
            border: 1px solid rgba(102, 125, 204, 0.28);
            border-radius: 999px;
            padding: 8px 14px;
            font-size: 12px;
            font-weight: 800;
            color: #30406b;
            background: linear-gradient(135deg, rgba(251, 253, 255, 0.96), rgba(240, 246, 255, 0.94));
            cursor: pointer;
            transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
        }
        #community-view .community-filter-chip:hover {
            transform: translateY(-1px);
            border-color: rgba(92, 114, 194, 0.5);
            box-shadow: 0 8px 16px rgba(69, 86, 140, 0.14);
        }
        #community-view .community-filter-chip.is-active {
            color: #fff;
            border-color: rgba(90, 72, 224, 0.62);
            background: linear-gradient(135deg, #6f57ff, #5038d1);
            box-shadow: 0 10px 20px rgba(83, 66, 196, 0.26);
        }
        #community-view .community-verified-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
            margin-top: 6px;
        }
        .community-store-card {
            border-radius: 14px;
            border: 1px solid rgba(111, 132, 209, 0.24);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(243, 248, 255, 0.93));
            padding: 12px;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: 10px;
            align-items: center;
        }
        .community-store-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(126, 148, 219, 0.34);
            background: #e9efff;
        }
        .community-store-meta {
            min-width: 0;
        }
        .community-store-meta h4 {
            margin: 0;
            font-size: 15px;
            color: #1f2f55;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .community-store-meta p {
            margin: 4px 0 0;
            font-size: 12px;
            color: #45567e;
        }
        .community-store-badges {
            margin-top: 5px;
            display: inline-flex;
            flex-wrap: wrap;
            gap: 4px;
        }
        .community-listing-placeholder {
            text-align: center;
            grid-column: 1 / -1;
            padding: 22px 14px;
            color: #5e6f99;
            font-size: 14px;
            font-weight: 700;
        }
        body.dark-mode #community-view .community-topic-strip,
        body.dark-mode #community-view .community-live-section,
        body.dark-mode #community-view .community-verified-section {
            border-color: rgba(145, 165, 236, 0.26);
            background: linear-gradient(145deg, rgba(30, 38, 61, 0.92), rgba(24, 32, 52, 0.92));
            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3);
        }
        body.dark-mode #community-view .community-topic-head h3 {
            color: #e8efff;
        }
        body.dark-mode #community-view .community-topic-head p {
            color: #c5d4f3;
        }
        body.dark-mode #community-view .community-topic-card {
            border-color: rgba(143, 163, 233, 0.25);
            background: linear-gradient(135deg, rgba(36, 45, 70, 0.88), rgba(29, 38, 60, 0.86));
            color: #d9e5ff;
            box-shadow: inset 0 1px 0 rgba(218, 231, 255, 0.11);
        }
        body.dark-mode #community-view .community-topic-count {
            background: rgba(144, 124, 255, 0.2);
            color: #d8ccff;
        }
        body.dark-mode #community-view .community-filter-chip {
            border-color: rgba(143, 163, 233, 0.3);
            background: linear-gradient(135deg, rgba(36, 45, 70, 0.9), rgba(29, 38, 60, 0.88));
            color: #d9e5ff;
        }
        body.dark-mode #community-view .community-filter-chip.is-active {
            border-color: rgba(159, 141, 255, 0.6);
            background: linear-gradient(135deg, #7c68ff, #5844d9);
            color: #fff;
        }
        body.dark-mode .community-store-card {
            border-color: rgba(140, 160, 231, 0.24);
            background: linear-gradient(135deg, rgba(35, 44, 68, 0.88), rgba(28, 37, 58, 0.88));
        }
        body.dark-mode .community-store-meta h4 {
            color: #e5edff;
        }
        body.dark-mode .community-store-meta p,
        body.dark-mode .community-listing-placeholder {
            color: #c4d4f4;
        }

        :root {
            --market-command-sticky-top: 84px;
        }
        #main-view .market-command-center {
            display: contents;
        }
        #main-view .search-area {
            display: grid;
            grid-template-columns: auto minmax(240px, 1fr) auto auto;
            align-items: center;
            gap: 10px;
            margin-top: 12px;
            position: sticky;
            top: var(--market-command-sticky-top);
            z-index: 985;
        }
        #main-view .search-area > i {
            padding-inline: 4px;
        }
        #main-view .search-input-wrap {
            position: relative;
            min-width: 0;
        }
        #main-view .search-input-wrap .search-input {
            width: 100%;
            min-width: 0;
        }
        .search-suggestions {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            right: 0;
            z-index: 30;
            border-radius: 12px;
            border: 1px solid rgba(118, 132, 193, 0.34);
            background: rgba(255, 255, 255, 0.98);
            box-shadow: 0 18px 32px rgba(20, 30, 57, 0.18);
            max-height: 260px;
            overflow-y: auto;
        }
        .search-suggestion-item {
            width: 100%;
            border: 0;
            border-bottom: 1px solid rgba(146, 160, 214, 0.2);
            background: transparent;
            color: #17213d;
            text-align: start;
            padding: 10px 12px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
        }
        .search-suggestion-item:last-child {
            border-bottom: 0;
        }
        .search-suggestion-item:hover,
        .search-suggestion-item.is-active {
            background: rgba(98, 0, 234, 0.1);
            color: #2a1675;
        }
        #category-filters .chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        #category-filters .chip .chip-icon {
            font-size: 12px;
            opacity: 0.92;
        }
        #main-view .btn-nearby {
            min-height: 40px;
            min-width: 128px;
            white-space: nowrap;
        }
        #main-view .btn-nearby:disabled {
            cursor: wait;
            opacity: 0.72;
        }
        #main-view .btn-nearby i {
            font-size: 12px;
        }

        #products-grid.products,
        #auctions-grid.products {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: clamp(12px, 1.4vw, 20px);
        }
        body.dark-mode .search-suggestions {
            border-color: rgba(129, 146, 204, 0.4);
            background: rgba(23, 29, 51, 0.98);
            box-shadow: 0 16px 28px rgba(0, 0, 0, 0.45);
        }
        body.dark-mode .search-suggestion-item {
            color: #dce6ff;
            border-bottom-color: rgba(126, 142, 196, 0.26);
        }
        body.dark-mode .search-suggestion-item:hover,
        body.dark-mode .search-suggestion-item.is-active {
            background: rgba(120, 102, 255, 0.28);
            color: #ffffff;
        }

        .card-seller-main {
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            width: 100%;
        }
        .card-seller-badges {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            flex-wrap: wrap;
            width: 100%;
            justify-content: flex-start;
        }
        .seller-verified-badge,
        .seller-pro-badge,
        .seller-active-badge,
        .seller-top-rated-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            font-weight: 800;
            padding: 3px 7px;
            border-radius: 999px;
            letter-spacing: 0.01em;
            line-height: 1;
            vertical-align: middle;
        }
        .seller-verified-badge {
            background: rgba(30, 132, 255, 0.14);
            border: 1px solid rgba(30, 132, 255, 0.35);
            color: #1468cf;
        }
        .seller-top-rated-badge {
            background: rgba(255, 171, 0, 0.16);
            border: 1px solid rgba(255, 171, 0, 0.4);
            color: #9b6800;
        }
        .seller-pro-badge {
            background: rgba(0, 179, 117, 0.16);
            border: 1px solid rgba(0, 179, 117, 0.42);
            color: #0b845f;
        }
        .seller-active-badge {
            background: rgba(128, 132, 148, 0.15);
            border: 1px solid rgba(104, 118, 160, 0.42);
            color: #394974;
        }
        .seller-verified-badge i,
        .seller-pro-badge i,
        .seller-active-badge i,
        .seller-top-rated-badge i {
            font-size: 10px;
        }
        .detail-seller-box .seller-verified-badge,
        .detail-seller-box .seller-pro-badge,
        .detail-seller-box .seller-active-badge,
        .detail-seller-box .seller-top-rated-badge {
            margin-inline-start: 6px;
            transform: translateY(-1px);
        }
        .seller-header-badges {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 6px;
        }
        body.dark-mode .seller-verified-badge {
            background: rgba(76, 147, 255, 0.2);
            border-color: rgba(143, 191, 255, 0.45);
            color: #d8e8ff;
        }
        body.dark-mode .seller-top-rated-badge {
            background: rgba(255, 193, 58, 0.18);
            border-color: rgba(255, 216, 130, 0.42);
            color: #ffe7a8;
        }
        body.dark-mode .seller-pro-badge {
            background: rgba(0, 201, 137, 0.2);
            border-color: rgba(118, 245, 201, 0.45);
            color: #d7ffef;
        }
        body.dark-mode .seller-active-badge {
            background: rgba(132, 145, 181, 0.2);
            border-color: rgba(166, 179, 221, 0.45);
            color: #e4ecff;
        }

        .btn-whatsapp-primary {
            background: linear-gradient(135deg, #25d366 0%, #16b955 48%, #0f9e47 100%);
            color: #fff;
            border: 1px solid rgba(9, 117, 52, 0.45);
            box-shadow: 0 12px 24px rgba(16, 138, 63, 0.34);
            font-weight: 900;
            min-height: 50px;
            font-size: 15px;
            padding: 12px 18px;
            letter-spacing: 0.01em;
        }
        .btn-whatsapp-primary.btn-sm {
            min-height: 50px;
            font-size: 14px;
            padding: 11px 16px;
            border-radius: 12px;
        }
        .btn-whatsapp-primary i {
            font-size: 17px;
        }
        .btn-whatsapp-primary:hover {
            filter: brightness(1.08);
            transform: translateY(-2px);
        }
        .card-actions .btn-whatsapp-primary {
            flex: 1 1 190px;
            min-height: 54px;
            font-size: 15px;
        }
        .detail-primary-actions .btn-call-primary,
        .detail-primary-actions .btn-whatsapp-primary {
            min-height: 50px;
            font-size: 14px;
            font-weight: 900;
            letter-spacing: 0.01em;
        }
        .detail-primary-actions .btn-call-primary {
            background: linear-gradient(135deg, #5b2eff, #3b14c5);
            color: #fff;
            box-shadow: 0 10px 18px rgba(69, 41, 196, 0.32);
        }
        .detail-primary-actions .btn-whatsapp-primary {
            box-shadow: 0 12px 20px rgba(19, 125, 64, 0.32);
        }
        .detail-action-stack {
            display: grid;
            gap: 12px;
            margin-top: 12px;
        }
        .detail-whatsapp-action,
        .detail-middleman-action {
            width: 100%;
            justify-content: center;
            text-decoration: none;
        }
        .detail-middleman-action {
            min-height: 48px;
            border-radius: 14px;
            box-shadow: 0 8px 16px rgba(13, 126, 79, 0.18);
        }
        .detail-support-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 52px;
            gap: 10px;
            align-items: stretch;
        }
        .detail-call-action {
            width: 100%;
            min-height: 48px;
            justify-content: center;
            text-decoration: none;
            background: linear-gradient(135deg, #eef3ff, #dce7ff);
            color: #23395d;
            border: 1px solid rgba(96, 126, 212, 0.2);
            box-shadow: none;
            font-weight: 800;
        }
        .detail-favorite-action {
            width: 52px;
            min-width: 52px;
            min-height: 48px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            border: 1px solid rgba(148, 163, 184, 0.28);
            background: #f8fafc;
        }
        .detail-favorite-action i {
            font-size: 18px;
        }
        .detail-share-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .detail-share-icon {
            width: 38px;
            height: 38px;
            border: 1px solid rgba(148, 163, 184, 0.28);
            border-radius: 999px;
            background: #f8fafc;
            color: #64748b;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 180ms ease, border-color 180ms ease, color 180ms ease, background-color 180ms ease;
        }
        .detail-share-icon:hover,
        .detail-share-icon:focus-visible,
        .detail-favorite-action:hover,
        .detail-favorite-action:focus-visible,
        .detail-call-action:hover,
        .detail-call-action:focus-visible {
            transform: translateY(-1px);
        }
        .detail-share-icon:hover,
        .detail-share-icon:focus-visible {
            color: #1d4ed8;
            border-color: rgba(59, 130, 246, 0.3);
            background: #eff6ff;
        }
        .detail-admin-actions {
            margin-top: 12px;
        }
        .detail-link-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 10px 18px;
            margin-top: 14px;
            padding-top: 4px;
        }
        .detail-link-action {
            padding: 0;
            border: 0;
            background: none;
            color: #94a3b8;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            text-decoration: none;
        }
        .detail-link-action:hover,
        .detail-link-action:focus-visible {
            color: #475569;
            text-decoration: underline;
        }
        .detail-mobile-sticky-actions {
            display: none;
        }
        .detail-mobile-sticky-actions .btn {
            text-decoration: none;
        }
        .btn-video-proof {
            background: linear-gradient(135deg, #1673ff, #0c56c9);
            color: #fff;
            box-shadow: 0 8px 18px rgba(28, 88, 193, 0.25);
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            text-decoration: none;
        }
        .btn-video-proof:hover {
            filter: brightness(1.06);
            transform: translateY(-1px);
        }
        .detail-video-proof-box {
            margin: 10px 0 12px;
            padding: 12px;
            border-radius: 12px;
            border: 1px solid rgba(32, 103, 210, 0.28);
            background: linear-gradient(135deg, rgba(27, 103, 221, 0.12), rgba(21, 101, 192, 0.04));
        }
        .detail-video-proof-note {
            margin: 8px 0 0;
            font-size: 12px;
            color: #4f5a76;
            font-weight: 600;
        }
        .btn-middleman {
            background: linear-gradient(135deg, #10a968, #0b8552);
            color: #fff;
            box-shadow: 0 10px 20px rgba(13, 126, 79, 0.25);
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
        }
        .btn-middleman:hover {
            filter: brightness(1.06);
            transform: translateY(-1px);
        }
        .card-actions .btn-middleman {
            flex: 1 1 220px;
        }
        .middleman-create-loader {
            position: fixed;
            inset: 0;
            z-index: 4200;
            background: rgba(9, 12, 22, 0.56);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 18px;
            backdrop-filter: blur(2px);
        }
        .middleman-create-loader-card {
            min-width: min(92vw, 320px);
            max-width: 360px;
            border-radius: 14px;
            border: 1px solid rgba(114, 138, 214, 0.45);
            background: linear-gradient(180deg, #f8faff, #eef3ff);
            padding: 18px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: #1f2f5c;
            font-weight: 800;
            box-shadow: 0 16px 34px rgba(20, 34, 74, 0.24);
        }
        .middleman-create-loader-card p {
            margin: 0;
            line-height: 1.5;
            font-size: 13px;
        }
        .middleman-create-loader-spinner {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 3px solid rgba(84, 112, 203, 0.2);
            border-top-color: #4b6edc;
            flex: 0 0 28px;
            animation: middlemanCreateSpin 0.9s linear infinite;
        }
        .modal-video-tutorial {
            max-width: 760px;
        }
        .video-tutorial-intro {
            margin: -4px 0 10px;
            color: #5d6579;
            font-size: 13px;
            font-weight: 600;
        }
        .video-tutorial-frame-wrap {
            position: relative;
            width: 100%;
            padding-top: 56.25%;
            border-radius: 12px;
            border: 1px solid #dbe2f6;
            overflow: hidden;
            background: #0f1528;
        }
        .video-tutorial-frame-wrap iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
        .modal-middleman {
            max-width: 560px;
        }
        .middleman-steps {
            margin: 2px 0 12px;
            padding-inline-start: 22px;
            line-height: 1.65;
            display: grid;
            gap: 6px;
            font-weight: 600;
        }
        .middleman-fee {
            margin: 0 0 8px;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid rgba(14, 167, 102, 0.35);
            background: rgba(17, 178, 109, 0.1);
            font-weight: 800;
            color: #0f8f5b;
        }
        .middleman-item-meta {
            margin: 0 0 12px;
            color: #4f5a76;
            font-size: 13px;
            font-weight: 700;
        }
        .btn-middleman-start {
            width: 100%;
            background: linear-gradient(135deg, #f7b500, #e99500);
            color: #151515;
            border: 0;
            box-shadow: 0 10px 18px rgba(233, 149, 0, 0.25);
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            text-decoration: none;
        }
        .btn-middleman-start:hover {
            filter: brightness(1.05);
            transform: translateY(-1px);
        }
        body.dark-mode .detail-video-proof-box {
            border-color: rgba(96, 154, 255, 0.4);
            background: linear-gradient(135deg, rgba(42, 91, 175, 0.26), rgba(19, 36, 80, 0.24));
        }
        body.dark-mode .detail-video-proof-note {
            color: #b8c7ea;
        }
        body.dark-mode .detail-primary-actions .btn-call-primary {
            box-shadow: 0 12px 20px rgba(90, 64, 255, 0.4);
        }
        body.dark-mode .detail-call-action {
            background: linear-gradient(135deg, #243046, #1d2639);
            color: #eef4ff;
            border-color: rgba(121, 142, 205, 0.28);
        }
        body.dark-mode .detail-favorite-action,
        body.dark-mode .detail-share-icon {
            background: rgba(18, 25, 39, 0.88);
            border-color: rgba(121, 142, 205, 0.28);
            color: #d5ddf0;
        }
        body.dark-mode .detail-share-icon:hover,
        body.dark-mode .detail-share-icon:focus-visible {
            background: rgba(37, 99, 235, 0.16);
            color: #cfe0ff;
            border-color: rgba(96, 165, 250, 0.34);
        }
        body.dark-mode .detail-link-action {
            color: #94a3b8;
        }
        body.dark-mode .detail-link-action:hover,
        body.dark-mode .detail-link-action:focus-visible {
            color: #e2e8f0;
        }
        body.dark-mode .video-tutorial-intro,
        body.dark-mode .middleman-item-meta {
            color: #bec9e3;
        }
        body.dark-mode .video-tutorial-frame-wrap {
            border-color: rgba(139, 151, 186, 0.4);
        }
        body.dark-mode .middleman-fee {
            border-color: rgba(70, 213, 153, 0.45);
            background: rgba(17, 136, 89, 0.25);
            color: #b8f8dc;
        }
        body.dark-mode .middleman-create-loader-card {
            border-color: rgba(120, 147, 228, 0.5);
            background: linear-gradient(180deg, rgba(30, 38, 66, 0.96), rgba(24, 30, 56, 0.97));
            color: #e6edff;
            box-shadow: 0 16px 34px rgba(5, 8, 17, 0.5);
        }
        body.dark-mode .middleman-create-loader-spinner {
            border-color: rgba(158, 178, 247, 0.22);
            border-top-color: #7f9dff;
        }

        .middleman-dashboard {
            display: grid;
            grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
            gap: 14px;
            align-items: stretch;
        }
        .middleman-ticket-pane,
        .middleman-chat-pane {
            border: 1px solid #dfe5fb;
            border-radius: 14px;
            background: linear-gradient(180deg, rgba(247, 249, 255, 0.96), rgba(243, 247, 255, 0.94));
        }
        .middleman-ticket-pane {
            padding: 10px;
            display: flex;
            flex-direction: column;
            min-height: 520px;
        }
        .middleman-pane-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(116, 131, 188, 0.2);
        }
        .middleman-pane-head h3 {
            margin: 0;
            font-size: 17px;
        }
        .middleman-ticket-list {
            display: grid;
            gap: 8px;
            overflow-y: auto;
            padding-right: 2px;
        }
        .middleman-ticket-item {
            border: 1px solid #d7def7;
            background: #fff;
            border-radius: 12px;
            padding: 10px;
            cursor: pointer;
            transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }
        .middleman-ticket-item:hover {
            border-color: rgba(89, 118, 214, 0.5);
            transform: translateY(-1px);
            box-shadow: 0 8px 20px rgba(52, 79, 169, 0.12);
        }
        .middleman-ticket-item.active {
            border-color: rgba(80, 120, 255, 0.8);
            box-shadow: 0 10px 22px rgba(64, 102, 237, 0.2);
            background: linear-gradient(180deg, #ffffff, #f3f6ff);
        }
        .middleman-ticket-item-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 6px;
        }
        .middleman-ticket-code {
            font-weight: 800;
            font-size: 13px;
            color: #374266;
        }
        .middleman-ticket-item-name {
            font-size: 13px;
            font-weight: 700;
            color: #212846;
            line-height: 1.35;
        }
        .middleman-ticket-item-meta {
            margin-top: 6px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-size: 11px;
            color: #6b7390;
        }
        .middleman-placeholder {
            margin: 0;
            text-align: center;
            color: #6b7390;
            padding: 18px 10px;
            font-size: 13px;
        }
        .middleman-chat-pane {
            min-height: 520px;
            padding: 12px;
            display: flex;
            flex-direction: column;
        }
        .middleman-empty-state {
            min-height: 480px;
            border: 1px dashed rgba(102, 120, 184, 0.35);
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
            justify-content: center;
            color: #657199;
            text-align: center;
            padding: 16px;
        }
        .middleman-empty-state i {
            font-size: 28px;
            color: #4f69d7;
        }
        .middleman-room-header {
            border: 1px solid #d8e1fb;
            border-radius: 12px;
            padding: 10px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            background: rgba(255, 255, 255, 0.9);
        }
        .middleman-room-ticket-id {
            font-weight: 900;
            font-size: 16px;
            color: #202b4f;
        }
        .middleman-room-item {
            margin-top: 3px;
            color: #54618b;
            font-size: 13px;
            font-weight: 700;
        }
        .middleman-ticket-summary {
            margin-top: 12px;
            display: grid;
            gap: 12px;
        }
        .middleman-overview-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
            gap: 12px;
        }
        .middleman-overview-card,
        .middleman-ticket-actions-card,
        .middleman-participant-card,
        .middleman-activity-shell {
            border: 1px solid #d8e1fb;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.92);
            box-shadow: 0 12px 24px rgba(57, 79, 153, 0.08);
        }
        .middleman-overview-card,
        .middleman-ticket-actions-card {
            padding: 14px;
        }
        .middleman-overview-label {
            display: block;
            font-size: 12px;
            font-weight: 800;
            color: #617096;
            margin-bottom: 8px;
        }
        .middleman-overview-value {
            display: block;
            font-size: 18px;
            line-height: 1.55;
            color: #1c274a;
            margin-bottom: 8px;
        }
        .middleman-overview-note {
            margin: 0;
            color: #617096;
            font-size: 12px;
            line-height: 1.7;
        }
        .middleman-ticket-call-btn {
            width: 100%;
            min-height: 48px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-weight: 800;
            border-radius: 12px;
        }
        .middleman-ticket-call-btn[disabled] {
            opacity: 0.72;
            cursor: not-allowed;
        }
        .middleman-participants-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
        }
        .middleman-participant-card {
            padding: 12px 14px;
        }
        .middleman-participant-role {
            display: block;
            font-size: 11px;
            font-weight: 800;
            color: #617096;
            margin-bottom: 6px;
        }
        .middleman-participant-name {
            display: block;
            font-size: 15px;
            color: #1b2442;
            line-height: 1.5;
        }
        .middleman-status-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            border: 1px solid transparent;
            padding: 6px 12px;
            font-size: 11px;
            font-weight: 800;
            white-space: nowrap;
        }
        .middleman-status-badge.pending {
            background: rgba(255, 194, 77, 0.17);
            border-color: rgba(219, 158, 29, 0.45);
            color: #8a5800;
        }
        .middleman-status-badge.in-progress {
            background: rgba(53, 129, 255, 0.16);
            border-color: rgba(47, 112, 255, 0.45);
            color: #0f4cc7;
        }
        .middleman-status-badge.completed {
            background: rgba(25, 174, 102, 0.16);
            border-color: rgba(20, 148, 86, 0.45);
            color: #0f7e4d;
        }
        .middleman-status-badge.failed {
            background: rgba(238, 64, 91, 0.14);
            border-color: rgba(209, 43, 68, 0.45);
            color: #aa1d36;
        }
        .middleman-admin-toolbox {
            margin-top: 10px;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            border: 1px dashed rgba(130, 143, 188, 0.45);
            border-radius: 12px;
            padding: 8px;
            background: rgba(255, 255, 255, 0.72);
        }
        .middleman-admin-toolbox .btn {
            flex: 1 1 180px;
        }
        .middleman-activity-shell {
            margin-top: 12px;
            padding: 12px;
        }
        .middleman-activity-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 10px;
        }
        .middleman-activity-head h4 {
            margin: 0;
            font-size: 15px;
            color: #223057;
        }
        .middleman-message-list {
            border: 1px solid #d8e1fa;
            border-radius: 12px;
            background: linear-gradient(180deg, #ffffff, #f7f9ff);
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            overflow-y: auto;
            min-height: 240px;
            max-height: 48vh;
        }
        .middleman-file-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #24459c;
            font-weight: 700;
            text-decoration: underline;
        }
        .middleman-activity-item {
            display: grid;
            grid-template-columns: 40px minmax(0, 1fr);
            gap: 12px;
            align-items: flex-start;
            border: 1px solid rgba(121, 138, 194, 0.22);
            border-radius: 14px;
            background: #fff;
            padding: 12px;
        }
        .middleman-activity-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #eef3ff;
            color: #3257c6;
            font-size: 15px;
        }
        .middleman-activity-item.admin .middleman-activity-icon {
            background: #fff3d6;
            color: #9b6500;
        }
        .middleman-activity-item.seller .middleman-activity-icon {
            background: #eff7f1;
            color: #167344;
        }
        .middleman-activity-item.buyer .middleman-activity-icon {
            background: #edf4ff;
            color: #225fd4;
        }
        .middleman-activity-body {
            min-width: 0;
        }
        .middleman-activity-title {
            font-size: 14px;
            font-weight: 800;
            color: #1f294b;
            margin-bottom: 4px;
        }
        .middleman-activity-text,
        .middleman-activity-attachment {
            color: #54618b;
            font-size: 13px;
            line-height: 1.7;
            word-break: break-word;
        }
        .middleman-activity-meta {
            margin-top: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            color: #6d7899;
            font-size: 11px;
        }
        .middleman-activity-role {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 24px;
            padding: 0 10px;
            border-radius: 999px;
            background: #eef3ff;
            color: #3155be;
            font-weight: 800;
        }
        .middleman-modal-lead {
            margin: 10px 0 16px;
            color: #5a6488;
            line-height: 1.8;
        }
        body.dark-mode .middleman-ticket-pane,
        body.dark-mode .middleman-chat-pane {
            border-color: #37456d;
            background: linear-gradient(180deg, rgba(21, 27, 48, 0.95), rgba(18, 24, 45, 0.95));
        }
        body.dark-mode .middleman-pane-head {
            border-bottom-color: rgba(123, 141, 202, 0.25);
        }
        body.dark-mode .middleman-ticket-item {
            background: #1f2742;
            border-color: #3c4a73;
        }
        body.dark-mode .middleman-ticket-item.active {
            background: linear-gradient(180deg, #22305a, #1d2848);
            border-color: #5373d8;
            box-shadow: 0 12px 24px rgba(14, 24, 54, 0.55);
        }
        body.dark-mode .middleman-ticket-code {
            color: #c7d3ff;
        }
        body.dark-mode .middleman-ticket-item-name {
            color: #e7ebff;
        }
        body.dark-mode .middleman-ticket-item-meta,
        body.dark-mode .middleman-placeholder,
        body.dark-mode .middleman-empty-state {
            color: #aeb9df;
        }
        body.dark-mode .middleman-empty-state {
            border-color: rgba(112, 136, 208, 0.4);
        }
        body.dark-mode .middleman-empty-state i {
            color: #88a2ff;
        }
        body.dark-mode .middleman-overview-card,
        body.dark-mode .middleman-ticket-actions-card,
        body.dark-mode .middleman-participant-card,
        body.dark-mode .middleman-activity-shell {
            border-color: #3b4872;
            background: rgba(24, 31, 57, 0.9);
            box-shadow: none;
        }
        body.dark-mode .middleman-room-header,
        body.dark-mode .middleman-admin-toolbox,
        body.dark-mode .middleman-message-list {
            border-color: #3b4872;
            background: rgba(24, 31, 57, 0.9);
        }
        body.dark-mode .middleman-room-ticket-id {
            color: #e9eeff;
        }
        body.dark-mode .middleman-room-item {
            color: #b7c4ec;
        }
        body.dark-mode .middleman-overview-label,
        body.dark-mode .middleman-overview-note,
        body.dark-mode .middleman-participant-role,
        body.dark-mode .middleman-activity-meta,
        body.dark-mode .middleman-modal-lead {
            color: #aeb9df;
        }
        body.dark-mode .middleman-overview-value,
        body.dark-mode .middleman-participant-name,
        body.dark-mode .middleman-activity-title,
        body.dark-mode .middleman-activity-head h4 {
            color: #edf2ff;
        }
        body.dark-mode .middleman-activity-item {
            background: #1f2742;
            border-color: #3c4a73;
        }
        body.dark-mode .middleman-activity-text,
        body.dark-mode .middleman-activity-attachment {
            color: #bcc6e6;
        }
        body.dark-mode .middleman-file-link {
            color: #a8bfff;
        }
        body.dark-mode .middleman-activity-role {
            background: #2c3a63;
            color: #dbe4ff;
        }

        @media (max-width: 980px) {
            .middleman-dashboard {
                grid-template-columns: 1fr;
            }
            .middleman-ticket-pane,
            .middleman-chat-pane {
                min-height: auto;
            }
            .middleman-ticket-list {
                max-height: 280px;
            }
            .middleman-overview-grid {
                grid-template-columns: 1fr;
            }
            .middleman-participants-grid {
                grid-template-columns: 1fr;
            }
            .middleman-message-list {
                max-height: 48vh;
            }
        }
        @media (max-width: 640px) {
            .middleman-room-header {
                flex-direction: column;
                align-items: flex-start;
            }
            .middleman-status-badge {
                align-self: flex-start;
            }
            .middleman-admin-toolbox .btn {
                flex: 1 1 100%;
            }
            .middleman-activity-item {
                grid-template-columns: 1fr;
            }
            .middleman-activity-icon {
                width: 36px;
                height: 36px;
            }
            .middleman-activity-meta {
                flex-direction: column;
                align-items: flex-start;
            }
        }

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

        .anti-bot-block {
            margin-top: 10px;
            padding: 10px;
            border-radius: 12px;
            border: 1px solid rgba(96, 114, 182, 0.24);
            background: linear-gradient(135deg, rgba(244, 247, 255, 0.95), rgba(237, 243, 255, 0.92));
        }
        .anti-bot-title {
            font-size: 12px;
            font-weight: 800;
            color: #3d4b6c;
            margin-bottom: 8px;
        }
        .anti-bot-inline {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 8px;
        }
        .anti-bot-question {
            min-width: 82px;
            text-align: center;
            font-weight: 800;
            font-size: 13px;
            color: #1f2b47;
            padding: 9px 8px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.85);
            border: 1px dashed rgba(78, 99, 174, 0.34);
        }
        .anti-bot-answer {
            margin: 0 !important;
            min-height: 40px;
        }
        .anti-bot-refresh {
            min-height: 40px;
            min-width: 42px;
            padding-inline: 0;
        }
        .anti-bot-recaptcha {
            display: none !important;
            margin-top: 8px;
            overflow-x: auto;
            min-height: 0;
        }
        .grecaptcha-badge,
        .grecaptcha-badge iframe,
        iframe[src*="recaptcha"][title*="reCAPTCHA"],
        iframe[src*="recaptcha/api2/anchor"],
        iframe[src*="recaptcha/enterprise/anchor"] {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }
        #auth-anti-bot-hint,
        #add-anti-bot-hint,
        #auth-anti-bot-hint *,
        #add-anti-bot-hint * {
            display: none !important;
            text-decoration: none !important;
            border-bottom: none !important;
            box-shadow: none !important;
            background-image: none !important;
        }
        body.dark-mode .anti-bot-block {
            border-color: rgba(132, 158, 234, 0.26);
            background: linear-gradient(135deg, rgba(30, 38, 59, 0.92), rgba(25, 32, 50, 0.94));
        }
        body.dark-mode .anti-bot-title {
            color: #d6e2ff;
        }
        body.dark-mode .anti-bot-question {
            color: #f0f5ff;
            background: rgba(16, 22, 36, 0.72);
            border-color: rgba(145, 173, 246, 0.4);
        }
        @media (max-width: 520px) {
            .anti-bot-inline {
                grid-template-columns: 1fr;
            }
            .anti-bot-question {
                min-width: 0;
            }
            .anti-bot-refresh {
                width: 100%;
            }
            .anti-bot-recaptcha {
                zoom: 0.92;
            }
        }

        @media (max-width: 1200px) {
            #products-grid.products,
            #auctions-grid.products {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }
        @media (max-width: 768px) {
            .market-hero {
                padding: 18px 16px;
                border-radius: 18px;
            }
            #community-view .community-section {
                margin-top: 6px;
                margin-bottom: 12px;
                padding: 12px;
            }
            #community-view .community-shell {
                grid-template-columns: 1fr;
            }
            #community-view .community-title {
                max-width: none;
            }
            #community-view .community-metrics {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
            #community-view .community-metric-card {
                min-height: 90px;
            }
            #community-view .community-metric-card strong {
                font-size: 22px;
            }
            #community-view .community-topic-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            #community-view .community-filter-strip {
                gap: 6px;
            }
            #community-view .community-filter-chip {
                padding: 7px 12px;
            }
            #community-view .community-verified-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .market-hero-title {
                max-width: none;
                font-size: clamp(20px, 7vw, 28px);
            }
            #main-view .search-area {
                grid-template-columns: 1fr 1fr;
            }
            #main-view .search-area > i {
                display: none;
            }
            #main-view .search-input-wrap {
                grid-column: 1 / -1;
                min-width: 0 !important;
            }
            #main-view .search-input-wrap .search-input {
                min-width: 0 !important;
            }
            #main-view .btn-nearby,
            #main-view #btn-search {
                width: 100%;
            }
            #products-grid.products,
            #auctions-grid.products {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 12px;
            }
        }
        @media (max-width: 520px) {
            #community-view .community-actions {
                flex-direction: column;
            }
            #community-view .community-actions .btn {
                width: 100%;
            }
            #community-view .community-metrics {
                grid-template-columns: 1fr;
            }
            #community-view .community-topic-grid,
            #community-view .community-verified-grid {
                grid-template-columns: 1fr;
            }
        }
        @media (max-width: 360px) {
            #products-grid.products,
            #auctions-grid.products {
                grid-template-columns: 1fr;
            }
        }

        /* STEP 10 COMMAND: enforce 2-card mobile grid with no exceptions */
        @media (max-width: 768px) {
            .products,
            #products-grid.products,
            #auctions-grid.products,
            #community-products-grid.products,
            #my-products-grid.products {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 12px !important;
            }
            .card-actions .btn-whatsapp-primary,
            .detail-primary-actions .btn-whatsapp-primary,
            .detail-mobile-sticky-actions .btn-whatsapp-primary {
                min-height: 56px;
                font-size: 15px;
                padding: 12px 14px;
                box-shadow: 0 14px 24px rgba(16, 138, 63, 0.34);
            }
        }
        @media (max-width: 480px) {
            .products,
            #products-grid.products,
            #auctions-grid.products,
            #community-products-grid.products,
            #my-products-grid.products {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 10px !important;
            }
        }
        @media (max-width: 380px) {
            body.force-desktop-products-mobile .products {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }
        }
        @media (max-width: 360px) {
            .products,
            #products-grid.products,
            #auctions-grid.products,
            #community-products-grid.products,
            #my-products-grid.products,
            body.force-desktop-products-mobile .products {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 8px !important;
            }
        }

        /* ========= FROSHYAR STEP 8/10 FINAL UI OVERRIDES ========= */
        #main-view .search-area {
            grid-template-columns: auto minmax(220px, 1fr) auto auto auto auto;
        }
        #main-view .search-area .btn-advanced-toggle {
            min-width: 108px;
            white-space: nowrap;
        }
        .advanced-filters {
            transition: opacity 0.2s ease, transform 0.2s ease, max-height 0.25s ease, margin-bottom 0.2s ease, padding 0.2s ease, border-width 0.2s ease;
            transform-origin: top center;
        }
        #main-view .advanced-filters[hidden] {
            display: none !important;
        }
        .advanced-filters.is-collapsed {
            opacity: 0;
            transform: translateY(-6px);
            pointer-events: none;
            max-height: 0;
            overflow: hidden;
            margin-bottom: 0;
            padding-top: 0;
            padding-bottom: 0;
            border-width: 0;
        }
        .price-range-wrap input[type="range"] {
            height: 4px;
            background: linear-gradient(90deg, rgba(79, 70, 229, 0.35), rgba(79, 70, 229, 0.95));
        }
        .price-range-wrap input[type="range"]::-webkit-slider-thumb {
            width: 14px;
            height: 14px;
            background: #4f46e5;
        }
        .price-range-wrap input[type="range"]::-moz-range-thumb {
            width: 14px;
            height: 14px;
            background: #4f46e5;
        }
        body.dark-mode .price-range-wrap input[type="range"] {
            background: linear-gradient(90deg, rgba(129, 140, 248, 0.35), rgba(129, 140, 248, 0.92));
        }

        .card {
            border-radius: 20px;
        }
        .card-img {
            border-radius: 20px 20px 0 0;
        }
        @media (hover: hover) and (pointer: fine) and (min-width: 769px) {
            .card .card-car-specs {
                max-height: 0;
                opacity: 0;
                overflow: hidden;
                margin: 0;
                transform: translateY(-5px);
                transition: max-height 0.24s ease, opacity 0.18s ease, transform 0.2s ease, margin 0.2s ease;
            }
            .card:hover .card-car-specs,
            .card:focus-within .card-car-specs {
                max-height: 80px;
                opacity: 1;
                margin: 2px 0 8px;
                transform: translateY(0);
            }
        }

        #products-grid.products,
        #auctions-grid.products,
        #community-products-grid.products,
        #my-products-grid.products {
            grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
            gap: clamp(10px, 1.1vw, 18px) !important;
        }
        @media (max-width: 768px) {
            #main-view .search-area {
                grid-template-columns: 1fr 1fr;
            }
            #main-view .search-area .btn-advanced-toggle,
            #main-view #btn-save-search-alert,
            #main-view #btn-search,
            #main-view .btn-nearby {
                width: 100%;
            }
            #main-view .search-input-wrap {
                grid-column: 1 / -1;
            }
            #products-grid.products,
            #auctions-grid.products,
            #community-products-grid.products,
            #my-products-grid.products,
            .products {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 10px !important;
            }
        }

        .subscription-modal-subtitle {
            margin: 6px 0 14px;
            color: #556083;
            font-weight: 700;
        }
        .subscription-pricing-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
            margin-bottom: 14px;
        }
        .subscription-plan-card {
            border-radius: 24px;
            border: 1px solid rgba(116, 133, 182, 0.28);
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(247, 250, 255, 0.42));
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 14px 26px rgba(15, 20, 34, 0.12);
            padding: 16px;
            position: relative;
            overflow: hidden;
            transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
        }
        .subscription-plan-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 18px 34px rgba(18, 27, 46, 0.18);
        }
        .subscription-plan-card::before {
            content: "";
            position: absolute;
            inset: -35% -25% auto auto;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
            pointer-events: none;
        }
        .subscription-plan-card.is-active {
            border-color: rgba(79, 70, 229, 0.56);
            box-shadow: 0 16px 30px rgba(79, 70, 229, 0.22);
        }
        .subscription-plan-card.is-bronze {
            background: linear-gradient(145deg, rgba(232, 238, 246, 0.72), rgba(214, 226, 243, 0.56));
        }
        .subscription-plan-card.is-silver {
            background: linear-gradient(145deg, rgba(246, 248, 254, 0.74), rgba(220, 225, 240, 0.6));
        }
        .subscription-plan-card.is-gold {
            border-color: rgba(221, 167, 58, 0.7);
            background: linear-gradient(145deg, rgba(255, 236, 180, 0.82), rgba(238, 180, 55, 0.38));
            box-shadow: 0 20px 34px rgba(206, 145, 30, 0.3);
            animation: subscriptionGoldShine 4.2s ease-in-out infinite;
        }
        .subscription-plan-best-value {
            position: absolute;
            top: 12px;
            inset-inline-end: 12px;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 900;
            background: linear-gradient(145deg, #f5b126, #e08d06);
            color: #fff;
            box-shadow: 0 7px 15px rgba(208, 125, 16, 0.35);
        }
        .subscription-plan-kicker {
            font-size: 12px;
            font-weight: 800;
            color: #5c6788;
            letter-spacing: 0.02em;
            margin-bottom: 6px;
        }
        .subscription-plan-card h3 {
            margin: 0;
            font-size: 25px;
        }
        .subscription-plan-price {
            margin: 6px 0 10px;
            font-size: 28px;
            font-weight: 900;
            color: #1b2238;
        }
        .subscription-plan-price small {
            font-size: 13px;
            font-weight: 700;
            color: #556083;
        }
        .subscription-plan-features {
            margin: 0 0 14px;
            padding-left: 16px;
            display: grid;
            gap: 6px;
            font-size: 13px;
            color: #374263;
            font-weight: 700;
        }
        .subscription-plan-features li {
            margin: 0;
        }
        .subscription-plan-action {
            width: 100%;
            border-radius: 14px;
            border: 1px solid transparent;
            min-height: 46px;
            font-weight: 900;
            font-size: 14px;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .subscription-plan-action:hover {
            transform: translateY(-1px);
        }
        .subscription-plan-card.is-current-plan {
            border-color: rgba(16, 185, 129, 0.5);
            box-shadow: 0 16px 32px rgba(16, 185, 129, 0.22);
        }
        .subscription-plan-action.is-current {
            background: linear-gradient(145deg, #18b67d, #109264);
            border-color: rgba(12, 117, 79, 0.56);
            color: #ecfff7;
            box-shadow: 0 12px 22px rgba(16, 146, 100, 0.28);
            cursor: not-allowed;
        }
        .subscription-plan-action.is-current:hover {
            transform: none;
        }
        .subscription-plan-action:disabled {
            opacity: 0.96;
            pointer-events: none;
        }
        .subscription-plan-action.is-outline {
            border-color: rgba(99, 115, 163, 0.44);
            background: transparent;
            color: #364472;
        }
        .subscription-plan-action.is-silver {
            background: linear-gradient(145deg, #b9c1d6, #a9b5d2);
            color: #1f294b;
            border-color: rgba(128, 140, 173, 0.5);
        }
        .subscription-plan-action.is-gold {
            background: linear-gradient(145deg, #f4c94d, #f4a100);
            color: #2f1a00;
            border-color: rgba(222, 150, 14, 0.64);
            box-shadow: 0 12px 22px rgba(243, 157, 17, 0.3);
            animation: subscriptionGoldPulse 2.2s ease-in-out infinite;
        }
        .subscription-checkout-shell {
            border-radius: 24px;
            border: 1px solid rgba(99, 117, 178, 0.26);
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.33), rgba(247, 250, 255, 0.22));
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 12px;
        }
        .subscription-plan-timeline {
            margin-top: 10px;
            margin-bottom: 8px;
            border-radius: 14px;
            border: 1px solid rgba(126, 146, 207, 0.35);
            background: rgba(241, 246, 255, 0.82);
            padding: 10px;
            display: grid;
            gap: 8px;
        }
        .subscription-plan-timeline-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .subscription-plan-timeline-plan {
            font-size: 13px;
            font-weight: 900;
            color: #233155;
        }
        .subscription-plan-timeline-status {
            border-radius: 999px;
            border: 1px solid rgba(95, 112, 169, 0.4);
            background: rgba(95, 112, 169, 0.14);
            color: #31426f;
            font-size: 11px;
            font-weight: 900;
            padding: 3px 9px;
            white-space: nowrap;
        }
        .subscription-plan-timeline-status.is-active {
            border-color: rgba(18, 148, 95, 0.46);
            background: rgba(16, 185, 129, 0.15);
            color: #0b6b48;
        }
        .subscription-plan-timeline-status.is-pending {
            border-color: rgba(209, 137, 30, 0.5);
            background: rgba(245, 158, 11, 0.16);
            color: #8f4d00;
        }
        .subscription-plan-timeline-status.is-expired,
        .subscription-plan-timeline-status.is-inactive {
            border-color: rgba(178, 52, 52, 0.45);
            background: rgba(220, 38, 38, 0.12);
            color: #8f1d1d;
        }
        .subscription-plan-timeline-grid {
            display: grid;
            gap: 6px;
        }
        .subscription-plan-timeline-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            border-top: 1px dashed rgba(124, 144, 206, 0.34);
            padding-top: 6px;
            font-size: 12px;
        }
        .subscription-plan-timeline-item:first-child {
            border-top: 0;
            padding-top: 0;
        }
        .subscription-plan-timeline-item span {
            color: #4f5f8f;
            font-weight: 800;
        }
        .subscription-plan-timeline-item strong {
            color: #1f2b4f;
            font-size: 12px;
        }
        .subscription-grid {
            grid-template-columns: 1fr;
        }
        .subscription-security-warning {
            border-radius: 16px;
            border: 1px solid rgba(228, 67, 67, 0.42);
            background: linear-gradient(145deg, rgba(255, 74, 74, 0.16), rgba(198, 24, 24, 0.22));
            color: #8c1212;
            padding: 10px 12px;
            font-size: 13px;
            line-height: 1.45;
            font-weight: 900;
            margin-top: 12px;
            margin-bottom: 0;
        }
        .subscription-payment-free-note {
            margin-bottom: 10px;
            border-radius: 12px;
            border: 1px solid rgba(78, 98, 170, 0.35);
            background: rgba(86, 109, 184, 0.12);
            color: #33406a;
            padding: 8px 10px;
            font-size: 12px;
            font-weight: 700;
        }
        .subscription-payment-info {
            margin-top: 10px;
            padding: 0;
            border: 0;
            background: transparent;
            font-size: inherit;
            line-height: inherit;
        }
        .subscription-payment-methods {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }
        .subscription-payment-method-card {
            border-radius: 16px;
            border: 1px solid rgba(126, 146, 207, 0.3);
            background: rgba(255, 255, 255, 0.72);
            padding: 10px;
            cursor: pointer;
        }
        .subscription-payment-method-card.is-selected {
            border-color: rgba(79, 70, 229, 0.55);
            box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.16);
        }
        .subscription-payment-method-card:focus-visible {
            outline: 2px solid rgba(79, 70, 229, 0.45);
            outline-offset: 2px;
        }
        .subscription-payment-method-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 6px;
        }
        .subscription-payment-method-head h4 {
            margin: 0;
            font-size: 15px;
            font-weight: 900;
            color: #243052;
        }
        .subscription-payment-selected-pill {
            border-radius: 999px;
            padding: 3px 8px;
            font-size: 10px;
            font-weight: 900;
            color: #fff;
            background: linear-gradient(135deg, #5f53f8, #3d35ca);
        }
        .subscription-payment-name-row {
            display: flex;
            flex-direction: column;
            gap: 3px;
            margin-bottom: 8px;
        }
        .subscription-payment-name-row span {
            font-size: 11px;
            font-weight: 800;
            color: #5a6587;
        }
        .subscription-payment-name-row strong {
            font-size: 13px;
            color: #1f2a4d;
        }
        .subscription-payment-number-list {
            display: grid;
            gap: 6px;
            margin-bottom: 8px;
        }
        .subscription-payment-number-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
            align-items: center;
            background: rgba(241, 245, 255, 0.92);
            border: 1px solid rgba(137, 157, 216, 0.34);
            border-radius: 10px;
            padding: 6px 8px;
        }
        .subscription-payment-number-row code {
            font-family: "Consolas", "Courier New", monospace;
            font-size: 12px;
            font-weight: 800;
            color: #1d2849;
            direction: ltr;
            unicode-bidi: isolate;
            text-align: left;
            white-space: nowrap;
            word-break: normal;
            overflow-wrap: normal;
            display: inline-block;
        }
        .subscription-copy-btn {
            border-radius: 9px;
            border: 1px solid rgba(94, 110, 162, 0.45);
            background: rgba(255, 255, 255, 0.95);
            color: #334371;
            min-height: 30px;
            min-width: 52px;
            font-size: 11px;
            font-weight: 900;
            cursor: pointer;
        }
        .subscription-qr-thumb {
            width: 100%;
            border: 1px dashed rgba(111, 129, 189, 0.45);
            border-radius: 14px;
            min-height: 114px;
            background: rgba(246, 249, 255, 0.92);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            overflow: hidden;
            padding: 6px;
        }
        .subscription-qr-thumb img {
            width: 100%;
            max-height: 180px;
            object-fit: contain;
            border-radius: 10px;
        }
        .subscription-qr-placeholder {
            width: 100%;
            min-height: 98px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #4a5b87;
            font-size: 12px;
            font-weight: 800;
            text-align: center;
            padding: 12px;
            background: linear-gradient(145deg, rgba(235, 241, 255, 0.95), rgba(221, 230, 251, 0.95));
        }
        .modal-subscription-qr-preview {
            max-width: 520px;
        }
        .subscription-qr-preview-body {
            display: flex;
            justify-content: center;
        }
        .subscription-qr-preview-figure {
            margin: 0;
            width: min(100%, 380px);
            display: grid;
            gap: 8px;
            justify-items: center;
        }
        .subscription-qr-preview-figure img {
            width: 100%;
            border-radius: 16px;
            border: 1px solid rgba(129, 148, 205, 0.36);
            background: rgba(247, 250, 255, 0.98);
            padding: 10px;
        }
        .subscription-qr-fallback-large {
            width: 100%;
            min-height: 240px;
            border-radius: 16px;
            border: 1px dashed rgba(129, 148, 205, 0.45);
            background: rgba(241, 246, 255, 0.95);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 14px;
            font-weight: 800;
            color: #3a4b78;
        }
        .subscription-qr-preview-figure figcaption {
            font-size: 12px;
            font-weight: 800;
            color: #4f5f8a;
        }
        @media (min-width: 992px) {
            .subscription-pricing-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                align-items: stretch;
            }
            .subscription-plan-card.is-gold {
                transform: scale(1.035);
            }
            .subscription-plan-card.is-gold:hover {
                transform: translateY(-6px) scale(1.045);
            }
            .subscription-grid {
                grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
            }
        }
        @media (max-width: 600px) {
            .subscription-plan-card {
                padding: 14px;
            }
            .subscription-plan-price {
                font-size: 24px;
            }
            .subscription-payment-methods {
                grid-template-columns: 1fr;
            }
        }
        body.dark-mode .subscription-modal-subtitle {
            color: #b8c7ef;
        }
        body.dark-mode .subscription-plan-card {
            border-color: rgba(133, 153, 212, 0.35);
            background: linear-gradient(145deg, rgba(36, 44, 69, 0.86), rgba(26, 34, 56, 0.88));
            color: #edf2ff;
            box-shadow: 0 16px 28px rgba(0, 0, 0, 0.34);
        }
        body.dark-mode .subscription-plan-card.is-bronze {
            background: linear-gradient(145deg, rgba(61, 67, 86, 0.88), rgba(44, 52, 72, 0.9));
        }
        body.dark-mode .subscription-plan-card.is-silver {
            background: linear-gradient(145deg, rgba(66, 76, 102, 0.88), rgba(48, 58, 84, 0.9));
        }
        body.dark-mode .subscription-plan-card.is-gold {
            border-color: rgba(232, 193, 93, 0.56);
            background: linear-gradient(145deg, rgba(103, 80, 38, 0.86), rgba(78, 60, 28, 0.9));
        }
        body.dark-mode .subscription-plan-card.is-current-plan {
            border-color: rgba(52, 211, 153, 0.58);
            box-shadow: 0 16px 30px rgba(16, 185, 129, 0.26);
        }
        body.dark-mode .subscription-plan-kicker,
        body.dark-mode .subscription-plan-price small,
        body.dark-mode .subscription-plan-features {
            color: #d4e0ff;
        }
        body.dark-mode .subscription-plan-price {
            color: #f5f8ff;
        }
        body.dark-mode .subscription-plan-action.is-outline {
            border-color: rgba(158, 173, 219, 0.45);
            color: #e6eeff;
            background: rgba(255, 255, 255, 0.06);
        }
        body.dark-mode .subscription-plan-action.is-silver {
            background: linear-gradient(145deg, #9eaaca, #7f8ab1);
            color: #1f253e;
            border-color: rgba(170, 184, 226, 0.48);
        }
        body.dark-mode .subscription-plan-action.is-current {
            background: linear-gradient(145deg, #1fba84, #158f68);
            border-color: rgba(85, 225, 175, 0.54);
            color: #effff9;
        }
        body.dark-mode .subscription-checkout-shell {
            border-color: rgba(134, 154, 214, 0.34);
            background: linear-gradient(145deg, rgba(31, 40, 64, 0.74), rgba(24, 32, 54, 0.74));
        }
        body.dark-mode .subscription-plan-timeline {
            border-color: rgba(150, 169, 224, 0.4);
            background: rgba(35, 45, 72, 0.86);
        }
        body.dark-mode .subscription-plan-timeline-plan {
            color: #e7eeff;
        }
        body.dark-mode .subscription-plan-timeline-status {
            border-color: rgba(157, 177, 234, 0.46);
            background: rgba(102, 124, 196, 0.2);
            color: #e5ecff;
        }
        body.dark-mode .subscription-plan-timeline-status.is-active {
            border-color: rgba(52, 211, 153, 0.52);
            background: rgba(16, 185, 129, 0.24);
            color: #ccffeb;
        }
        body.dark-mode .subscription-plan-timeline-status.is-pending {
            border-color: rgba(245, 158, 11, 0.55);
            background: rgba(245, 158, 11, 0.24);
            color: #ffe7bf;
        }
        body.dark-mode .subscription-plan-timeline-status.is-expired,
        body.dark-mode .subscription-plan-timeline-status.is-inactive {
            border-color: rgba(248, 113, 113, 0.5);
            background: rgba(220, 38, 38, 0.22);
            color: #ffd6d6;
        }
        body.dark-mode .subscription-plan-timeline-item {
            border-top-color: rgba(153, 173, 228, 0.34);
        }
        body.dark-mode .subscription-plan-timeline-item span {
            color: #b9c8f3;
        }
        body.dark-mode .subscription-plan-timeline-item strong {
            color: #edf3ff;
        }
        body.dark-mode .subscription-security-warning {
            border-color: rgba(255, 117, 117, 0.55);
            background: linear-gradient(145deg, rgba(126, 29, 29, 0.56), rgba(104, 21, 21, 0.64));
            color: #ffdada;
        }
        body.dark-mode .subscription-payment-free-note {
            border-color: rgba(133, 153, 214, 0.45);
            background: rgba(95, 117, 195, 0.22);
            color: #d7e5ff;
        }
        body.dark-mode .subscription-payment-method-card {
            border-color: rgba(140, 160, 222, 0.34);
            background: rgba(30, 38, 62, 0.86);
        }
        body.dark-mode .subscription-payment-method-head h4,
        body.dark-mode .subscription-payment-name-row strong {
            color: #edf2ff;
        }
        body.dark-mode .subscription-payment-name-row span,
        body.dark-mode .subscription-qr-preview-figure figcaption {
            color: #b6c8f5;
        }
        body.dark-mode .subscription-payment-number-row {
            background: rgba(39, 49, 78, 0.92);
            border-color: rgba(154, 173, 230, 0.36);
        }
        body.dark-mode .subscription-payment-number-row code {
            color: #edf3ff;
        }
        body.dark-mode .subscription-copy-btn {
            border-color: rgba(158, 176, 227, 0.45);
            background: rgba(224, 233, 255, 0.08);
            color: #e3edff;
        }
        body.dark-mode .subscription-qr-thumb {
            border-color: rgba(156, 175, 228, 0.45);
            background: rgba(37, 48, 78, 0.92);
        }
        body.dark-mode .subscription-qr-placeholder,
        body.dark-mode .subscription-qr-fallback-large {
            background: linear-gradient(145deg, rgba(47, 58, 88, 0.92), rgba(37, 46, 72, 0.92));
            color: #d6e5ff;
            border-color: rgba(156, 175, 228, 0.45);
        }
        body.dark-mode .subscription-qr-preview-figure img {
            border-color: rgba(156, 175, 228, 0.45);
            background: rgba(39, 49, 76, 0.92);
        }

        @keyframes subscriptionGoldShine {
            0%, 100% { box-shadow: 0 20px 34px rgba(206, 145, 30, 0.3); }
            50% { box-shadow: 0 24px 40px rgba(245, 177, 38, 0.4); }
        }
        @keyframes subscriptionGoldPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.03); }
        }

        .mobile-bottom-nav {
            display: none;
        }
        @media (max-width: 768px) {
            body {
                padding-bottom: calc(76px + env(safe-area-inset-bottom));
            }
            .mobile-bottom-nav {
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 1800;
                display: grid;
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 6px;
                padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
                background: rgba(15, 20, 34, 0.92);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                border-top: 1px solid rgba(170, 184, 226, 0.24);
            }
            .mobile-bottom-nav-item {
                border: 1px solid rgba(152, 173, 233, 0.28);
                border-radius: 12px;
                background: rgba(255, 255, 255, 0.08);
                color: #dce6ff;
                min-height: 52px;
                display: inline-flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2px;
                font-size: 11px;
                font-weight: 800;
                padding: 6px 4px;
            }
            .mobile-bottom-nav-item i {
                font-size: 15px;
            }
            .mobile-bottom-nav-item.is-active {
                border-color: rgba(79, 70, 229, 0.72);
                background: rgba(79, 70, 229, 0.24);
                color: #ffffff;
            }
            .mobile-bottom-nav-item-primary {
                background: linear-gradient(140deg, #4f46e5, #4338ca);
                border-color: rgba(129, 140, 248, 0.65);
                color: #fff;
            }
        }
        @media (min-width: 769px) {
            .mobile-bottom-nav {
                display: none !important;
            }
        }

        /* ================= MOBILE RESPONSIVE HARDENING ================= */
        :root {
            --mobile-header-offset: 84px;
            --mobile-bottom-nav-height: 88px;
            --mobile-bottom-nav-offset: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom));
        }

        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        img,
        svg,
        video,
        canvas,
        iframe {
            max-width: 100%;
            height: auto;
        }

        .page-content,
        .market-command-center,
        .search-area,
        .filters,
        .advanced-filters,
        .products,
        .card,
        .panel,
        .box,
        .widget {
            width: 100%;
            max-width: 100%;
        }

        @media (max-width: 768px) {
            body {
                padding-bottom: var(--mobile-bottom-nav-offset);
            }

            header {
                padding: max(8px, env(safe-area-inset-top)) 0 10px;
            }

            .page-content {
                width: 100%;
                min-width: 0;
                padding-bottom: 12px;
            }

            .container,
            section,
            .section,
            .wrapper,
            .hero,
            .market-hero,
            .card,
            .panel {
                max-width: 100%;
            }

            .logo {
                justify-content: center;
            }

            .logo .logo-mark {
                width: clamp(88px, 24vw, 108px);
                max-height: clamp(88px, 24vw, 108px);
            }

            .header-content {
                grid-template-columns: 1fr;
                gap: 10px;
                align-items: stretch;
            }

            nav,
            nav ul,
            .user-actions {
                width: 100%;
                min-width: 0;
            }

            nav ul,
            .user-actions,
            .filters,
            .dash-tabs,
            #community-view .community-filter-strip {
                display: flex;
                flex-wrap: nowrap;
                gap: 8px;
                overflow-x: auto;
                overflow-y: hidden;
                white-space: nowrap;
                padding-bottom: 4px;
                justify-content: flex-start;
                scroll-behavior: smooth;
                overscroll-behavior-x: contain;
                -webkit-overflow-scrolling: touch;
            }

            nav ul > *,
            .user-actions > *,
            .filters > *,
            .dash-tabs > *,
            #community-view .community-filter-strip > * {
                flex: 0 0 auto;
            }

            nav a,
            .chip,
            .dash-tab {
                white-space: nowrap;
            }

            .user-actions {
                align-items: stretch;
            }

            .user-actions .btn,
            .user-actions .language-selector,
            #auth-buttons,
            #user-info {
                flex: 0 0 auto;
                max-width: 100%;
            }

            .language-selector {
                width: auto;
            }

            .language-btn {
                min-height: 40px;
                min-width: 0;
                justify-content: center;
            }

            .language-dropdown,
            .language-dropdown.mobile-floating {
                max-width: calc(100vw - 24px);
            }

            #main-view .search-area {
                position: static;
                top: auto;
                grid-template-columns: minmax(0, 1fr);
                gap: 10px;
                margin: 12px 0;
                padding: 10px;
            }

            #main-view .search-area > i {
                display: none;
            }

            #main-view .search-input-wrap,
            #main-view .search-area .btn,
            #main-view .search-area .filter-select {
                width: 100%;
                min-width: 0;
            }

            input,
            select,
            textarea,
            .form-input,
            .search-input,
            .chat-input,
            .advanced-filters .filter-select {
                width: 100%;
                min-width: 0;
                min-height: 44px;
            }

            .advanced-filters {
                grid-template-columns: 1fr !important;
                gap: 10px;
                padding: 12px;
            }

            .facet-filters-shell,
            .price-range-wrap {
                width: 100%;
                max-width: 100%;
                min-width: 0;
            }

            .market-hero {
                margin: 6px 0 14px;
                padding: 16px 14px;
            }

            .market-hero-title {
                font-size: clamp(24px, 6vw, 32px);
                line-height: 1.25;
            }

            .market-hero-subtitle,
            p,
            input,
            select,
            textarea {
                font-size: 14px;
            }

            .market-hero-subtitle {
                line-height: 1.6;
            }

            .market-hero-points {
                gap: 6px;
            }

            #seller-profile-header {
                padding: 16px 14px !important;
            }

            .seller-profile-header-actions {
                display: grid !important;
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .seller-profile-header-actions .btn {
                width: 100%;
                min-height: 44px;
            }

            .auction-hub,
            .auction-room-shell,
            #community-view .community-section,
            .dash-card,
            .verify-card {
                padding: 14px;
            }

            .products,
            #products-grid.products,
            #auctions-grid.products,
            #community-products-grid.products,
            #my-products-grid.products {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 10px !important;
            }

            .card,
            .panel,
            .box,
            .widget {
                width: 100%;
                max-width: 100%;
            }

            .card-body {
                padding: 12px;
            }

            .card-actions,
            .card-actions-listing,
            .banner-quick-actions,
            .cart-footer,
            .toast-confirm-actions {
                display: grid;
                grid-template-columns: 1fr;
                gap: 8px;
            }

            .card-actions .btn,
            .card-actions a.btn,
            .card-actions-listing .btn,
            .card-actions-listing a.btn,
            .banner-quick-actions .btn,
            .cart-footer .btn,
            .toast-confirm-actions .btn {
                width: 100%;
                min-width: 0;
                min-height: 44px;
            }

            .floating-notification {
                top: calc(var(--mobile-header-offset) + 10px);
                right: 10px;
                left: 10px;
                max-width: calc(100vw - 20px);
            }

            .chat-container {
                left: 8px;
                right: 8px;
                bottom: calc(var(--mobile-bottom-nav-offset) + 8px);
                width: auto;
                height: min(62vh, 520px);
                max-height: calc(100dvh - var(--mobile-header-offset) - var(--mobile-bottom-nav-offset) - 20px);
            }

            .popup-ad {
                left: 8px;
                right: 8px;
                bottom: calc(var(--mobile-bottom-nav-offset) + 8px);
                width: auto;
                max-width: none;
            }

            .pwa-install-banner {
                left: 8px;
                right: 8px;
                bottom: calc(var(--mobile-bottom-nav-offset) + 8px);
                width: auto;
                transform: none;
            }
        }

        @media (max-width: 520px) {
            .container {
                padding: 0 12px;
            }

            .pwa-install-banner-content {
                flex-direction: column;
                align-items: stretch;
            }

            .pwa-install-banner-actions {
                width: 100%;
                justify-content: stretch;
            }
            .pwa-install-banner-actions .btn {
                flex: 1 1 140px;
            }
            .pwa-install-banner-actions #pwa-install-dismiss {
                flex: 0 0 auto;
            }
        }

        @media (max-width: 430px) {
            .products,
            #products-grid.products,
            #auctions-grid.products,
            #community-products-grid.products,
            #my-products-grid.products {
                grid-template-columns: 1fr !important;
                gap: 12px !important;
            }
        }

        @media (max-width: 380px) {
            .mobile-bottom-nav {
                gap: 4px;
                padding-inline: 8px;
            }

            .mobile-bottom-nav-item {
                min-height: 50px;
                font-size: 10px;
            }
        }
/* ================= MOBILE FIX ================= */
@media (max-width: 768px) {

  /* container */
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* HEADER FIX */
  header .header-content {
    flex-wrap: wrap;
    gap: 8px;
  }

  header nav ul {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding: 6px;
    white-space: nowrap;
  }

  header nav ul li {
    flex: 0 0 auto;
  }

  header nav a {
    padding: 8px 12px;
    font-size: 13px;
  }

  .user-actions {
    width: 100%;
    display: flex;
    gap: 6px;
    overflow-x: auto;
  }

  .user-actions button,
  .language-btn {
    flex: 0 0 auto;
    padding: 8px 10px;
  }

  /* HERO FIX */
  .market-hero {
    padding: 16px;
  }

  .market-hero-title {
    font-size: 24px;
    line-height: 1.3;
  }

  .market-hero-subtitle {
    font-size: 14px;
  }

  .market-hero-points {
    display: flex;
    overflow-x: auto;
    gap: 8px;
  }

  .market-hero-points span {
    flex: 0 0 auto;
    font-size: 13px;
  }

  /* SEARCH AREA */
  .search-area {
    flex-wrap: wrap;
    gap: 8px;
  }

  .search-input-wrap {
    width: 100%;
  }

  /* FILTERS */
  .market-command-center {
    padding: 10px;
  }

  .filters,
  .advanced-filters {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  /* BUTTONS FULL WIDTH */
  button,
  .btn,
  input,
  select {
    width: 100%;
    min-height: 44px;
  }

  /* CARDS */
  .card,
  .dash-card,
  .box {
    width: 100%;
    padding: 12px;
  }

  /* FIX OVERFLOW */
  body {
    overflow-x: hidden;
  }

  /* BOTTOM NAV SPACE */
  .page-content {
    padding-bottom: 90px;
  }
}
@media (max-width: 768px) {

  /* ===== FIX WIDTH (گرنگترین شت) ===== */
  .container {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ===== HEADER CLEAN ===== */
  header .header-content {
    flex-direction: column;
    align-items: stretch;
  }

  header nav ul {
    width: 100%;
    overflow-x: auto;
    display: flex;
    gap: 10px;
    padding: 8px;
  }

  header nav a {
    padding: 10px 14px;
    font-size: 14px;
    white-space: nowrap;
  }

  /* ===== USER ACTIONS ===== */
  .user-actions {
    width: 100%;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    justify-content: flex-start;
  }

  .user-actions button,
  .language-btn {
    flex: 0 0 auto;
  }

  /* ===== HERO SPACE FIX ===== */
  .market-hero {
    margin-top: 10px;
    padding: 18px 14px;
  }

  /* ===== HERO TEXT ===== */
  .market-hero-title {
    font-size: 22px;
  }

  .market-hero-subtitle {
    font-size: 13px;
  }

  /* ===== HERO TAGS ===== */
  .market-hero-points {
    display: flex;
    gap: 8px;
    overflow-x: auto;
  }

  .market-hero-points span {
    flex: 0 0 auto;
  }

  /* ===== SEARCH BOX ===== */
  .search-area {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .search-input {
    font-size: 14px;
  }

  /* ===== FILTER BUTTONS ===== */
  .filters,
  .advanced-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .filters button,
  .advanced-filters button {
    width: 100%;
  }

  /* ===== BIG BUTTON FIX ===== */
  .btn-primary {
    width: 100%;
  }

  /* ===== REMOVE SQUEEZE ===== */
  .market-command-center {
    margin-top: 10px;
    padding: 12px;
  }

  /* ===== BOTTOM NAV SPACE ===== */
  .page-content {
    padding-bottom: 100px;
  }

}

/* ================= FINAL MOBILE RESPONSIVE OVERRIDES ================= */
@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    margin: 0 !important;
    padding: 0 !important;
  }

  .container,
  .page-content,
  .market-command-center,
  .market-hero,
  .market-hero-content,
  .search-area,
  .filters,
  .advanced-filters,
  .products,
  .seller-profile-header-actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .page-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 96px !important;
  }

  header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  header .container {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  header .header-content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .logo {
    display: flex !important;
    justify-content: center !important;
  }

  .logo-mark {
    max-height: 44px !important;
    width: auto !important;
  }

  nav {
    min-width: 0 !important;
  }

  header nav ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  header nav ul::-webkit-scrollbar,
  .user-actions::-webkit-scrollbar,
  .market-hero-points::-webkit-scrollbar {
    display: none;
  }

  header nav ul li,
  header nav ul a {
    flex: 0 0 auto !important;
  }

  header nav a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  .user-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 2px !important;
    -webkit-overflow-scrolling: touch;
  }

  .user-actions > *,
  .user-actions button,
  .language-selector,
  .language-btn,
  #auth-buttons,
  #user-info {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .user-actions .btn,
  .language-btn,
  #nav-username,
  #btn-upgrade-plan-header,
  #btn-status-toggle {
    min-height: 42px !important;
    padding: 9px 12px !important;
    white-space: nowrap !important;
  }

  .language-btn span {
    display: inline-block !important;
    max-width: 130px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #user-info > div {
    display: flex !important;
    gap: 8px !important;
  }

  .market-hero {
    margin: 12px 0 10px !important;
    padding: 18px 14px !important;
    border-radius: 22px !important;
  }

  .market-hero-title {
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
  }

  .market-hero-subtitle {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  .market-hero-points {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch;
  }

  .market-hero-points span {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .market-command-center {
    margin-top: 10px !important;
    padding: 12px !important;
    border-radius: 22px !important;
  }

  .search-area {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .search-area > i {
    display: none !important;
  }

  .search-input-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 / -1;
  }

  .search-input {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }

  .filters,
  .advanced-filters {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .filters > *,
  .advanced-filters > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .filter-select,
  .form-input,
  select,
  input,
  textarea,
  button,
  .btn {
    min-height: 44px !important;
  }

  .filters .btn,
  .advanced-filters .btn,
  .filters button,
  .advanced-filters button {
    width: 100% !important;
  }

  .card,
  .dash-card,
  .ad-card,
  .broadcast-card,
  .popup-ad,
  .message-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .seller-profile-header-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .seller-profile-header-actions .btn {
    width: 100% !important;
  }

  .chat-container {
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    max-width: none !important;
  }

  body.live-chat-open .chat-container {
    top: max(8px, calc(env(safe-area-inset-top) + 8px)) !important;
    bottom: max(8px, calc(env(safe-area-inset-bottom) + 8px)) !important;
    height: auto !important;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px) !important;
    border-radius: 24px !important;
  }

  body.live-chat-open .chat-input-area {
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }

  body.live-chat-open .mobile-bottom-nav {
    transform: translateY(calc(100% + 24px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  footer,
  .bottom-nav,
  .mobile-bottom-nav,
  nav.bottom-nav {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
}

@media (max-width: 420px) {
  .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  header nav ul {
    gap: 8px !important;
    padding: 8px !important;
  }

  header nav a {
    font-size: 13px !important;
    padding: 9px 12px !important;
  }

  .market-hero {
    padding: 16px 12px !important;
  }

  .market-hero-title {
    font-size: clamp(20px, 6.5vw, 26px) !important;
  }

  .market-command-center {
    padding: 10px !important;
  }
}

@media (min-width: 769px) {
  header #site-header-content > .header-menu-divider,
  header #site-header-content > .header-menu-toggle,
  header #site-header-content > .header-shortcuts {
    display: none !important;
  }
}

@media (max-width: 768px) {
  header #site-header-content {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 10px !important;
    align-items: center !important;
  }

  header #site-header-content > .logo {
    grid-column: 1 !important;
    justify-content: flex-start !important;
  }

  header #site-header-content > .header-menu-divider {
    display: block !important;
    grid-column: 2 !important;
    justify-self: center !important;
    width: 1px !important;
    height: 46px !important;
  }

  header #site-header-content > .header-menu-toggle {
    display: inline-flex !important;
    grid-column: 3 !important;
    justify-self: end !important;
  }

  header #site-header-content > .header-shortcuts,
  header #site-header-content > nav,
  header #site-header-content > .user-actions {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  header #site-header-content > .header-shortcuts {
    display: none !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 2px !important;
  }

  header #site-header-content > nav,
  header #site-header-content > .user-actions {
    display: none !important;
  }

  header #site-header-content.is-mobile-menu-open > .header-shortcuts {
    display: grid !important;
  }

  header #site-header-content.is-mobile-menu-open > nav {
    display: flex !important;
  }

  header #site-header-content.is-mobile-menu-open > .user-actions {
    display: grid !important;
    margin-top: 2px !important;
  }

  header #site-header-content > nav ul {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }

  header #site-header-content > nav a {
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 480px) {
  header #site-header-content > .header-menu-divider {
    height: 40px !important;
  }

  header #site-header-content > .header-menu-toggle {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
  }

  header #site-header-content > .header-menu-toggle span {
    width: 30px !important;
    height: 5px !important;
  }

  header #site-header-content > .header-shortcuts {
    gap: 6px !important;
  }

  header #site-header-content .header-shortcut {
    min-height: 54px !important;
    padding: 8px 5px !important;
    font-size: 11px !important;
  }

  header #site-header-content > nav ul {
    grid-template-columns: 1fr !important;
  }
}

/* ================= MOBILE APP SHELL - 2026-03-28 ================= */
@media (max-width: 768px) {
  :root {
    --mobile-header-offset: 92px;
    --mobile-bottom-nav-height: 96px;
    --mobile-bottom-nav-offset: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom));
  }

  body {
    padding-bottom: calc(var(--mobile-bottom-nav-height) + 14px + env(safe-area-inset-bottom)) !important;
  }

  .container {
    padding-inline: clamp(10px, 3.6vw, 16px) !important;
  }

  #main-view {
    padding-top: 8px !important;
    padding-bottom: 12px !important;
    background: linear-gradient(180deg, #363a5b 0%, #2c304c 34%, #1f2338 100%) !important;
  }

  header {
    padding: 0 !important;
    background: linear-gradient(180deg, rgba(14, 17, 25, 0.98), rgba(17, 20, 30, 0.95)) !important;
    border-bottom: 1px solid rgba(112, 128, 193, 0.24) !important;
    box-shadow: 0 14px 30px rgba(6, 8, 15, 0.42) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  header .container {
    padding-top: max(10px, env(safe-area-inset-top)) !important;
    padding-bottom: 12px !important;
  }

  header #site-header-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 10px !important;
    align-items: center !important;
  }

  header #site-header-content > .logo .logo-mark {
    width: clamp(84px, 22vw, 110px) !important;
    max-height: clamp(84px, 22vw, 110px) !important;
    filter: drop-shadow(0 0 6px rgba(122, 205, 255, 0.2));
  }

  header #site-header-content > .header-menu-divider {
    width: 1px !important;
    height: 42px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(148, 165, 230, 0.56), rgba(255, 255, 255, 0.04)) !important;
  }

  header #site-header-content > .header-menu-toggle {
    width: 54px !important;
    height: 54px !important;
    border: 1px solid rgba(126, 142, 206, 0.36) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(42, 46, 64, 0.96), rgba(25, 29, 43, 0.96)) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 26px rgba(0, 0, 0, 0.28) !important;
  }

  header #site-header-content > .header-menu-toggle span {
    width: 28px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: currentColor !important;
  }

  header #site-header-content > .header-shortcuts {
    margin-top: 10px !important;
    gap: 10px !important;
  }

  header #site-header-content .header-shortcut,
  header #site-header-content > nav ul,
  header #site-header-content > .user-actions {
    border: 1px solid rgba(122, 138, 200, 0.26) !important;
    background: linear-gradient(180deg, rgba(25, 30, 45, 0.94), rgba(18, 22, 34, 0.97)) !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24) !important;
  }

  header #site-header-content .header-shortcut {
    min-height: 58px !important;
    color: #eef3ff !important;
  }

  header #site-header-content .header-shortcut i {
    color: #8cd6ff !important;
  }

  header #site-header-content > nav ul {
    padding: 8px !important;
    border-radius: 20px !important;
  }

  header #site-header-content > nav a {
    min-height: 42px !important;
    background: rgba(58, 65, 94, 0.34) !important;
    border: 1px solid rgba(129, 145, 209, 0.26) !important;
    color: #eef3ff !important;
  }

  header #site-header-content > nav a.is-active {
    background: linear-gradient(135deg, #6453ff, #4338ca) !important;
    border-color: rgba(165, 150, 255, 0.66) !important;
    color: #ffffff !important;
  }

  header #site-header-content > .user-actions {
    margin-top: 10px !important;
    padding: 10px !important;
    border-radius: 20px !important;
    gap: 8px !important;
  }

  header #site-header-content > .user-actions .btn,
  header #site-header-content > .user-actions .language-btn,
  header #site-header-content > .user-actions #nav-username,
  header #site-header-content > .user-actions #btn-upgrade-plan-header,
  header #site-header-content > .user-actions #btn-status-toggle {
    min-height: 42px !important;
    background: rgba(59, 66, 95, 0.48) !important;
    border: 1px solid rgba(135, 150, 211, 0.26) !important;
    color: #eef3ff !important;
  }

  .market-hero {
    margin: 10px 0 14px !important;
    padding: 24px 18px 20px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(124, 139, 210, 0.28) !important;
    background:
      radial-gradient(circle at 8% 20%, rgba(140, 82, 255, 0.42), transparent 34%),
      radial-gradient(circle at 82% 16%, rgba(56, 178, 255, 0.22), transparent 32%),
      linear-gradient(135deg, #40366f 0%, #203657 58%, #1d2037 100%) !important;
    box-shadow: 0 24px 40px rgba(11, 14, 22, 0.36) !important;
  }

  .market-hero-content {
    display: grid;
    gap: 12px;
  }

  .market-hero-eyebrow {
    margin-bottom: 0 !important;
    color: #d8dffd !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
  }

  .market-hero-title {
    max-width: none !important;
    font-size: clamp(28px, 7.3vw, 40px) !important;
    line-height: 1.32 !important;
    color: #ffffff !important;
  }

  .market-hero-subtitle {
    margin: 0 !important;
    color: rgba(239, 244, 255, 0.9) !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
  }

  .market-hero-points {
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  .market-hero-points span {
    min-height: 46px;
    padding: 10px 16px !important;
    background: rgba(23, 29, 45, 0.32) !important;
    border: 1px solid rgba(157, 176, 236, 0.28) !important;
    color: #f3f7ff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .market-hero-points span i {
    color: #93cfff !important;
  }

  #main-view .market-command-center {
    display: block !important;
    margin-top: 0 !important;
    padding: 14px !important;
    border-radius: 26px !important;
    background: linear-gradient(180deg, rgba(25, 28, 40, 0.96), rgba(18, 21, 31, 0.99)) !important;
    border: 1px solid rgba(117, 131, 191, 0.24) !important;
    box-shadow: 0 24px 38px rgba(7, 9, 16, 0.32) !important;
  }

  #main-view .search-area {
    position: static !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
    padding: 14px !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, rgba(14, 17, 28, 0.78), rgba(11, 14, 24, 0.88)) !important;
    border: 1px solid rgba(123, 138, 201, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  }

  #main-view .search-area > i {
    display: none !important;
  }

  #main-view .search-input-wrap {
    grid-column: 1 / -1 !important;
    position: relative;
  }

  #main-view .search-input-wrap .search-input,
  .search-input {
    width: 100% !important;
    min-height: 56px !important;
    padding-inline: 16px !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(51, 56, 75, 0.94), rgba(37, 41, 56, 0.96)) !important;
    border: 1px solid rgba(116, 131, 193, 0.24) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  }

  .search-input::placeholder {
    color: rgba(222, 228, 255, 0.62) !important;
  }

  #main-view .search-area .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 0 14px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  #btn-near-me,
  #btn-save-search-alert,
  #btn-advanced-filters-toggle {
    background: linear-gradient(180deg, rgba(54, 61, 86, 0.95), rgba(44, 50, 72, 0.95)) !important;
    border: 1px solid rgba(124, 139, 205, 0.34) !important;
    color: #eef2ff !important;
  }

  #btn-save-search-alert {
    display: none !important;
  }

  #filter-field-city,
  #filter-field-area {
    display: none !important;
  }

  #btn-search {
    background: linear-gradient(135deg, #5b14ff 0%, #7d22ff 100%) !important;
    border: 1px solid rgba(164, 130, 255, 0.6) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 26px rgba(91, 20, 255, 0.35) !important;
  }

  #category-filters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #category-filters .chip {
    min-height: 54px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(60, 66, 94, 0.9), rgba(46, 52, 72, 0.9)) !important;
    border: 1px solid rgba(128, 142, 205, 0.36) !important;
    color: #f0f4ff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  }

  #category-filters .chip.active {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #6614ff 0%, #8b1bff 100%) !important;
    border-color: rgba(176, 144, 255, 0.72) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 30px rgba(97, 18, 255, 0.34) !important;
  }

  .advanced-filters {
    margin-top: 12px !important;
    padding: 14px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(122, 137, 200, 0.22) !important;
    background: linear-gradient(180deg, rgba(20, 24, 36, 0.96), rgba(17, 20, 31, 0.99)) !important;
  }

  .filter-field-label,
  .distance-filter-value,
  .price-range-head,
  .facet-filters-head {
    color: #dce6ff !important;
  }

  .advanced-filters .filter-select,
  .price-range-wrap,
  .facet-filters-shell {
    background: linear-gradient(180deg, rgba(49, 55, 77, 0.94), rgba(38, 43, 61, 0.96)) !important;
    border: 1px solid rgba(124, 139, 205, 0.34) !important;
    color: #ffffff !important;
  }

  .products,
  #products-grid.products,
  #auctions-grid.products,
  #community-products-grid.products,
  #my-products-grid.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .card {
    border-radius: 22px !important;
    overflow: hidden;
  }

  .mobile-bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px clamp(10px, 3vw, 14px) calc(12px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, rgba(11, 13, 20, 0), rgba(10, 12, 19, 0.88) 26%, rgba(10, 12, 19, 0.98) 100%) !important;
    border-top: 0 !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .mobile-bottom-nav-item {
    min-height: 62px !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(31, 36, 54, 0.92), rgba(24, 28, 42, 0.96)) !important;
    border: 1px solid rgba(121, 136, 201, 0.35) !important;
    color: #f2f6ff !important;
    gap: 4px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    box-shadow: 0 12px 24px rgba(7, 9, 16, 0.22) !important;
  }

  .mobile-bottom-nav-item i {
    font-size: 17px !important;
  }

  .mobile-bottom-nav-item.is-active {
    background: linear-gradient(135deg, rgba(65, 76, 128, 0.92), rgba(33, 42, 79, 0.98)) !important;
    border-color: rgba(143, 156, 224, 0.6) !important;
    color: #ffffff !important;
  }

  .mobile-bottom-nav-item-primary {
    background: linear-gradient(135deg, #5648ff 0%, #5f19ff 60%, #7b1cff 100%) !important;
    border-color: rgba(173, 143, 255, 0.72) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 30px rgba(91, 26, 255, 0.36) !important;
  }
}

@media (max-width: 430px) {
  .container {
    padding-inline: 10px !important;
  }

  .market-hero {
    padding: 20px 15px 18px !important;
    border-radius: 24px !important;
  }

  .market-hero-title {
    font-size: clamp(25px, 8.8vw, 34px) !important;
  }

  .market-hero-subtitle {
    font-size: 14px !important;
  }

  .market-hero-points span,
  #main-view .search-area .btn,
  #category-filters .chip {
    min-height: 50px !important;
    font-size: 13px !important;
  }

  #main-view .market-command-center,
  #main-view .search-area,
  .advanced-filters {
    border-radius: 22px !important;
  }

  .mobile-bottom-nav-item {
    min-height: 58px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 360px) {
  .container {
    padding-inline: 8px !important;
  }

  #main-view .search-area {
    gap: 8px !important;
    padding: 12px !important;
  }

  #category-filters {
    gap: 8px !important;
  }

  .mobile-bottom-nav {
    gap: 6px !important;
    padding-inline: 8px !important;
  }
}

/* ===== MODERN HEADER REBUILD ===== */
.modern-site-header {
    position: sticky;
    top: 0;
    z-index: 1400;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.modern-header-shell {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    min-height: 86px;
}

.modern-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
}

.modern-brand-logo {
    width: 152px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.modern-desktop-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
}

.modern-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(117,129,192,0.18);
    font-weight: 700;
    white-space: nowrap;
}

.modern-nav-link.is-active {
    background: linear-gradient(135deg, #7a5cff 0%, #5b35ff 100%);
    color: #fff !important;
    border-color: transparent;
}

.modern-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-self: end;
}

.modern-icon-btn,
.modern-language-btn,
.modern-pill-btn,
.modern-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid rgba(117,129,192,0.18);
    background: rgba(255,255,255,0.04);
    color: inherit;
    font-weight: 700;
}

.modern-icon-btn {
    width: 46px;
    padding: 0;
    position: relative;
}

.modern-pill-highlight {
    background: linear-gradient(135deg, rgba(255,154,47,0.2), rgba(255,118,0,0.18));
}

.modern-user-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modern-language-wrap {
    position: relative;
}

.modern-auth-wrap {
    display: flex;
}

.modern-mobile-toggle,
.modern-mobile-backdrop,
.modern-mobile-drawer {
    display: none;
}

@media (max-width: 1024px) {
    .modern-header-shell {
        grid-template-columns: auto 1fr auto;
        gap: 12px;
    }
    .modern-desktop-nav {
        gap: 8px;
    }
    .modern-nav-link {
        min-height: 42px;
        padding: 0 14px;
    }
}

@media (max-width: 768px) {
    .modern-header-shell {
        grid-template-columns: 1fr auto;
        min-height: 76px;
        gap: 12px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .modern-desktop-nav,
    .modern-header-actions {
        display: none !important;
    }

    .modern-brand-logo {
        width: 118px;
    }

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

    .modern-site-header {
        transition:
            transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 540ms cubic-bezier(0.22, 1, 0.36, 1),
            visibility 540ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform, opacity;
    }

    body.mobile-drawer-open .modern-site-header {
        transform: translateY(-115%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    #main-view,
    .mobile-bottom-nav {
        transition:
            transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 560ms cubic-bezier(0.22, 1, 0.36, 1),
            filter 620ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform, opacity, filter;
    }

    body.mobile-drawer-open #main-view {
        transform: translate3d(-88px, 0, 0);
        opacity: 0.14;
        filter: blur(2px);
        pointer-events: none;
    }

    body.mobile-drawer-open .mobile-bottom-nav {
        transform: translate3d(-42px, 0, 0);
        opacity: 0.08;
        filter: blur(2px);
        pointer-events: none;
    }

    .modern-mobile-toggle {
        display: inline-grid !important;
        place-items: center;
        position: fixed;
        top: max(12px, calc(env(safe-area-inset-top) + 2px));
        right: 12px;
        z-index: 1920;
        width: 52px;
        height: 52px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #6750a4;
        color: #ffffff;
        box-shadow: 0 12px 28px rgba(103, 80, 164, 0.34);
        cursor: pointer;
        transition:
            transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
            background-color 320ms ease,
            box-shadow 320ms ease;
        will-change: transform;
    }

    .modern-mobile-toggle:hover {
        transform: scale(1.04);
    }

    .modern-mobile-toggle:active {
        transform: scale(0.96);
    }

    body.mobile-drawer-open .modern-mobile-toggle {
        background: #4f378b;
        box-shadow: 0 14px 32px rgba(79, 55, 139, 0.42);
    }

    .modern-mobile-toggle-icon {
        position: relative;
        width: 24px;
        height: 24px;
        display: block;
    }

    .modern-mobile-toggle-icon span {
        position: absolute;
        left: 2px;
        width: 20px;
        height: 2.5px;
        border-radius: 999px;
        background: currentColor;
        transition:
            transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
            top 520ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 320ms ease;
        transform-origin: center;
        will-change: transform, top, opacity;
    }

    .modern-mobile-toggle-icon span:nth-child(1) {
        top: 6px;
    }

    .modern-mobile-toggle-icon span:nth-child(2) {
        top: 11px;
    }

    .modern-mobile-toggle-icon span:nth-child(3) {
        top: 16px;
    }

    body.mobile-drawer-open .modern-mobile-toggle-icon span:nth-child(1) {
        top: 11px;
        transform: rotate(45deg);
    }

    body.mobile-drawer-open .modern-mobile-toggle-icon span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0.2);
    }

    body.mobile-drawer-open .modern-mobile-toggle-icon span:nth-child(3) {
        top: 11px;
        transform: rotate(-45deg);
    }

    .modern-mobile-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(9, 12, 24, 0.32);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
            visibility 620ms cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 1900;
    }

    .modern-mobile-backdrop.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .modern-mobile-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        width: min(86vw, 340px);
        height: 100vh;
        overflow-y: auto;
        padding: 0 0 24px;
        background: #fff;
        color: #171b2d;
        border-top-left-radius: 32px;
        border-bottom-left-radius: 32px;
        box-shadow: -24px 0 60px rgba(31, 27, 36, 0.24);
        transform: translate3d(100%, 0, 0);
        transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
        z-index: 1910;
    }

    body.dark-mode .modern-mobile-drawer {
        background: #111521;
        color: #fff;
        box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
    }

    .modern-mobile-drawer.is-open {
        transform: translate3d(0, 0, 0);
    }

    .modern-mobile-drawer-head {
        display: grid;
        gap: 10px;
        padding: 88px 20px 18px;
        margin-bottom: 0;
        background: linear-gradient(135deg, #4f378b 0%, #6750a4 55%, #7d63c1 100%);
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    body.dark-mode .modern-mobile-drawer-head {
        background: linear-gradient(135deg, #2c234d 0%, #3f2f6e 56%, #513a8b 100%);
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .modern-mobile-drawer-head .modern-brand-logo {
        width: 132px;
    }

    .modern-mobile-drawer-copy {
        margin: 0;
        color: rgba(255, 255, 255, 0.74);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.14em;
    }

    .modern-mobile-nav {
        padding: 14px 12px 0;
        display: grid;
        gap: 6px;
        margin-bottom: 18px;
    }

    .modern-mobile-nav a {
        display: flex;
        align-items: center;
        min-height: 52px;
        padding: 0 16px;
        text-decoration: none;
        color: inherit !important;
        border-radius: 16px;
        background: rgba(103, 80, 164, 0.08);
        border: 1px solid rgba(103, 80, 164, 0.1);
        font-weight: 800;
        transition:
            background-color 220ms ease,
            color 220ms ease,
            transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
            border-color 220ms ease;
    }

    body.dark-mode .modern-mobile-nav a {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .modern-mobile-nav a:hover,
    .modern-mobile-nav a:focus-visible {
        background: rgba(103, 80, 164, 0.12);
        color: #4f378b !important;
        transform: translateX(-4px);
    }

    body.dark-mode .modern-mobile-nav a:hover,
    body.dark-mode .modern-mobile-nav a:focus-visible {
        color: #ffffff !important;
        background: rgba(132, 110, 201, 0.18);
    }

    .modern-mobile-tools {
        padding: 0 12px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 18px;
    }

    .modern-mobile-tool {
        min-height: 78px;
        border-radius: 18px;
        border: 1px solid rgba(103, 80, 164, 0.12);
        background: rgba(103, 80, 164, 0.08);
        color: inherit;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-weight: 700;
        transition:
            transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
            background-color 220ms ease,
            border-color 220ms ease;
    }

    body.dark-mode .modern-mobile-tool {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .modern-mobile-tool:hover,
    .modern-mobile-tool:focus-visible {
        transform: translateY(-2px);
        background: rgba(103, 80, 164, 0.12);
        border-color: rgba(103, 80, 164, 0.18);
    }

    body.dark-mode .modern-mobile-tool:hover,
    body.dark-mode .modern-mobile-tool:focus-visible {
        background: rgba(132, 110, 201, 0.16);
    }

    .modern-mobile-footer {
        padding: 0 12px;
    }

    .modern-mobile-footer .modern-login-btn {
        width: 100%;
        min-height: 54px;
        background: #6750a4;
        border-color: transparent;
        color: #ffffff;
        box-shadow: 0 16px 28px rgba(103, 80, 164, 0.28);
        transition:
            transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .modern-mobile-footer .modern-login-btn:hover,
    .modern-mobile-footer .modern-login-btn:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 18px 30px rgba(103, 80, 164, 0.34);
    }
}

@media (max-width: 640px) {
    body.mobile-drawer-open #main-view {
        transform: translate3d(-42px, 0, 0);
        opacity: 0.16;
    }

    body.mobile-drawer-open .mobile-bottom-nav {
        transform: translate3d(-20px, 0, 0);
        opacity: 0.1;
    }

    .modern-mobile-drawer {
        width: min(320px, 90vw);
        border-top-left-radius: 24px;
        border-bottom-left-radius: 24px;
    }

    .modern-mobile-drawer-head {
        padding: 84px 20px 18px;
    }
}

@media (min-width: 769px) {
    .modern-mobile-toggle,
    .modern-mobile-backdrop,
    .modern-mobile-drawer {
        display: none !important;
    }
}

body.seller-profile-preview-mode #main-view #category-browser {
    display: none !important;
}

#category-browser {
    margin: 20px 0 24px !important;
    padding: clamp(20px, 3vw, 30px) !important;
    border-radius: 30px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%) !important;
    border: 1px solid rgba(123, 138, 201, 0.18) !important;
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.08) !important;
    animation: sectionRise 0.55s ease-out 0.08s both;
}

#category-browser .category-browser-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

#category-browser .category-browser-copy {
    min-width: 0;
}

#category-browser .category-browser-title {
    margin: 0;
    color: #101828;
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 900;
    letter-spacing: -0.03em;
}

#category-browser .category-browser-subtitle {
    margin: 8px 0 0;
    color: #52607a;
    font-size: 14px;
    line-height: 1.7;
    max-width: 640px;
}

#category-browser .category-browser-view-all {
    flex: 0 0 auto;
    min-height: 54px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, 0.16);
    background: rgba(37, 99, 235, 0.06);
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

#category-browser .category-browser-view-all:hover {
    transform: translateY(-2px);
    background: rgba(37, 99, 235, 0.1);
    box-shadow: 0 14px 26px rgba(37, 99, 235, 0.12);
}

#category-browser .category-browser-view-all i {
    font-size: 14px;
}

#category-filters {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 16px !important;
    overflow: visible !important;
    white-space: normal !important;
    padding-bottom: 0 !important;
    scroll-snap-type: none !important;
}

#category-filters .chip {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 18px !important;
    min-height: 176px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 18px 16px 14px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(126, 139, 180, 0.16) !important;
    background: linear-gradient(180deg, #f5f7fb 0%, #eff2f8 100%) !important;
    color: #101828 !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: none !important;
    text-align: start !important;
    white-space: normal !important;
    cursor: pointer;
    overflow: hidden !important;
    font: inherit;
}

#category-filters .chip::before,
#category-filters .chip::after {
    content: none !important;
    display: none !important;
}

#category-filters .chip:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, 0.2) !important;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08) !important;
}

#category-filters .chip.active {
    grid-column: auto !important;
    border-color: var(--category-accent, #2563eb) !important;
    background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%) !important;
    box-shadow: 0 20px 36px rgba(37, 99, 235, 0.14) !important;
    color: #0f172a !important;
}

#category-filters .category-card-label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2.7em;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.35;
    color: inherit;
    position: relative;
    z-index: 1;
}

#category-filters .category-card-visual {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

#category-filters .category-card-icon-wrap {
    width: 88px;
    height: 88px;
    border-radius: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.95), transparent 52%),
        linear-gradient(135deg, var(--category-accent-soft, rgba(37, 99, 235, 0.14)) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 14px 26px rgba(15, 23, 42, 0.08);
}

#category-filters .chip .chip-icon {
    font-size: 40px !important;
    color: var(--category-accent, #2563eb) !important;
    opacity: 1 !important;
}

body.dark-mode #category-browser {
    background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%) !important;
    border-color: rgba(123, 138, 201, 0.18) !important;
}

body.dark-mode #category-browser .category-browser-title {
    color: #101828 !important;
}

body.dark-mode #category-browser .category-browser-subtitle {
    color: #52607a !important;
}

@media (max-width: 900px) {
    #category-browser {
        border-radius: 24px !important;
        padding: 18px !important;
    }

    #category-browser .category-browser-head {
        flex-direction: column;
        align-items: stretch;
    }

    #category-browser .category-browser-view-all {
        width: 100%;
    }

    #category-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    #category-filters .chip {
        min-height: 156px !important;
        padding: 16px 14px 12px !important;
    }

    #category-filters .category-card-icon-wrap {
        width: 74px;
        height: 74px;
        border-radius: 24px;
    }

    #category-filters .chip .chip-icon {
        font-size: 34px !important;
    }
}

@media (max-width: 480px) {
    #category-browser .category-browser-title {
        font-size: 24px;
    }

    #category-browser .category-browser-subtitle {
        font-size: 13px;
    }

    #category-filters .chip {
        min-height: 142px !important;
        gap: 14px !important;
    }

    #category-filters .category-card-label {
        font-size: 14px;
    }
}

/* Mobile bottom nav refresh */
:root {
    --mobile-bottom-nav-height: 92px;
    --mobile-bottom-nav-offset: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom));
}

.category-page-banner {
    display: none;
    margin: 10px 0 18px;
    position: relative;
    z-index: 1100;
}

.category-page-banner[hidden] {
    display: none !important;
}

.category-page-banner-shell {
    display: grid;
    gap: 14px;
    padding: 18px 20px;
    position: relative;
    z-index: 1;
    border-radius: 24px;
    border: 1px solid rgba(37, 99, 235, 0.16);
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.16), transparent 42%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 255, 0.94));
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}

.category-page-back {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #1e293b;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.category-page-back:hover,
.category-page-back:focus-visible {
    border-color: rgba(37, 99, 235, 0.35);
    color: #1d4ed8;
}

.category-page-kicker {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2563eb;
}

.category-page-title {
    margin: 0;
    font-size: clamp(26px, 4vw, 38px);
    line-height: 1.1;
    color: #0f172a;
}

.category-page-subtitle {
    margin: 10px 0 0;
    max-width: 720px;
    font-size: 14px;
    line-height: 1.7;
    color: #475569;
}

body.category-page-mode #main-view .market-hero,
body.category-page-mode #main-view #market-assurance,
body.category-page-mode #main-view #category-browser,
body.category-page-mode #main-view #category-sponsor-banner,
body.category-page-mode #main-view #market-sections-shell,
body.category-page-mode #main-view #global-broadcasts-section,
body.category-page-mode #main-view #ads-section {
    display: none !important;
}

body.category-page-mode #main-view #category-page-banner {
    display: block !important;
}

body.category-browser-only-mode #main-view > * {
    display: none !important;
}

body.category-browser-only-mode #main-view > #category-browser {
    display: block !important;
    margin-top: 8px !important;
}

body.category-browser-only-mode #category-browser .category-browser-view-all,
body.category-browser-only-mode #category-browser .category-browser-nav,
body.category-browser-only-mode #category-browser .category-browser-carousel-shell::before,
body.category-browser-only-mode #category-browser .category-browser-carousel-shell::after {
    display: none !important;
}

body.category-browser-only-mode #category-browser .category-browser-carousel {
    overflow: visible !important;
}

body.category-browser-only-mode #category-filters {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px !important;
    overflow: visible !important;
    padding: 0 !important;
    scroll-padding-inline: 0 !important;
}

body.category-browser-only-mode #category-filters .category-browser-row {
    display: contents;
}

body.category-browser-only-mode #category-filters .chip {
    width: 100% !important;
    min-width: 0 !important;
}

@media (min-width: 640px) {
    body.category-browser-only-mode #category-filters {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

body.dark-mode .category-page-banner-shell {
    border-color: rgba(96, 165, 250, 0.2);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 42%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.92));
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.34);
}

body.dark-mode .category-page-back {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.72);
    color: #e2e8f0;
}

body.dark-mode .category-page-back:hover,
body.dark-mode .category-page-back:focus-visible {
    border-color: rgba(96, 165, 250, 0.34);
    color: #93c5fd;
}

body.dark-mode .category-page-kicker {
    color: #93c5fd;
}

body.dark-mode .category-page-title {
    color: #f8fafc;
}

body.dark-mode .category-page-subtitle {
    color: #cbd5e1;
}

@media (max-width: 768px) {
    .category-page-banner-shell {
        padding: 16px;
        border-radius: 20px;
    }

    .category-page-title {
        font-size: 24px;
    }

    .category-page-subtitle {
        font-size: 13px;
    }
}

@keyframes mobileNavBadgePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 10px 18px rgba(239, 68, 68, 0.28);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 14px 24px rgba(249, 115, 22, 0.34);
    }
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        position: fixed !important;
        left: max(10px, env(safe-area-inset-left)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        z-index: 1800 !important;
        overflow: hidden !important;
        isolation: isolate !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 10px !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(241, 245, 255, 0.98)) !important;
        border: 1px solid rgba(201, 208, 228, 0.92) !important;
        border-radius: 30px !important;
        box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(18px) saturate(1.08) !important;
        -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
        transform: translate3d(0, var(--mobile-bottom-nav-scroll-offset, 0px), 0);
        transition:
            transform 0.52s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 560ms cubic-bezier(0.22, 1, 0.36, 1),
            filter 620ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
        backface-visibility: hidden;
    }

    .mobile-bottom-nav::before {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: 28px;
        background:
            radial-gradient(circle at 50% -10%, rgba(129, 140, 248, 0.2), transparent 42%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0));
        pointer-events: none;
        opacity: 0.95;
    }

    .mobile-bottom-nav-item {
        position: relative;
        min-height: 72px !important;
        border: 0 !important;
        border-radius: 22px !important;
        background: transparent !important;
        color: #818aa3 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 8px 4px 6px !important;
        box-shadow: none !important;
        overflow: hidden !important;
        isolation: isolate !important;
        transition:
            transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
            color 180ms ease,
            filter 180ms ease !important;
    }

    .mobile-bottom-nav-item::before {
        content: "";
        position: absolute;
        inset: 4px;
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 255, 0.92));
        border: 1px solid rgba(219, 225, 238, 0.94);
        box-shadow: 0 12px 22px rgba(148, 163, 184, 0.12);
        opacity: 0;
        transform: translateY(10px) scale(0.9);
        transition:
            opacity 220ms ease,
            transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 220ms ease,
            background 220ms ease !important;
        z-index: 0;
    }

    .mobile-bottom-nav-item > * {
        position: relative;
        z-index: 1;
    }

    .mobile-bottom-nav-icon {
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 15px;
        display: grid;
        place-items: center;
        background: linear-gradient(180deg, rgba(248, 250, 255, 0.98), rgba(233, 239, 251, 0.96));
        color: #8b95ac;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 8px 16px rgba(148, 163, 184, 0.16);
        transition:
            transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
            background 240ms ease,
            color 200ms ease,
            box-shadow 240ms ease !important;
    }

    .mobile-bottom-nav-icon i {
        font-size: 18px !important;
        line-height: 1 !important;
        transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    .mobile-bottom-nav-label {
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        white-space: nowrap;
        letter-spacing: 0.01em;
        transition:
            transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
            color 180ms ease !important;
    }

    .mobile-bottom-nav-item:active {
        transform: scale(0.98) !important;
    }

    .mobile-bottom-nav-item.is-active {
        color: #5b3bd6 !important;
        transform: translateY(-4px) !important;
    }

    .mobile-bottom-nav-item.is-active::before {
        opacity: 1;
        transform: translateY(0) scale(1);
        background: linear-gradient(180deg, rgba(126, 90, 255, 0.22), rgba(255, 255, 255, 0.98));
        box-shadow: 0 16px 26px rgba(123, 63, 160, 0.18);
    }

    .mobile-bottom-nav-item.is-active .mobile-bottom-nav-icon {
        background: linear-gradient(135deg, #7c3aed 0%, #6366f1 58%, #38bdf8 100%);
        color: #ffffff;
        box-shadow: 0 16px 24px rgba(99, 102, 241, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.24);
        transform: translateY(-2px) scale(1.05);
    }

    .mobile-bottom-nav-item.is-active .mobile-bottom-nav-icon i {
        transform: scale(1.05);
    }

    .mobile-bottom-nav-item.is-active .mobile-bottom-nav-label {
        color: #5b3bd6 !important;
        transform: translateY(1px);
    }

    .mobile-bottom-nav-badge {
        position: absolute;
        top: -5px;
        inset-inline-end: -5px;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
        color: #ffffff !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        border: 2px solid rgba(255, 255, 255, 0.94);
        box-shadow: 0 10px 18px rgba(239, 68, 68, 0.28);
        animation: mobileNavBadgePulse 2.8s ease-in-out infinite;
    }

    .mobile-bottom-nav-badge[hidden] {
        display: none !important;
    }

    body.dark-mode .mobile-bottom-nav {
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(17, 24, 39, 0.97)) !important;
        border-color: rgba(95, 110, 150, 0.52) !important;
        box-shadow: 0 18px 40px rgba(2, 6, 23, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    }

    body.dark-mode .mobile-bottom-nav::before {
        background:
            radial-gradient(circle at 50% -10%, rgba(99, 102, 241, 0.26), transparent 44%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
    }

    body.dark-mode .mobile-bottom-nav-item {
        color: #97a4c1 !important;
    }

    body.dark-mode .mobile-bottom-nav-item::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(18, 25, 39, 0.92));
        border-color: rgba(89, 103, 145, 0.48);
        box-shadow: none;
    }

    body.dark-mode .mobile-bottom-nav-icon {
        background: linear-gradient(180deg, rgba(44, 54, 82, 0.94), rgba(24, 33, 52, 0.96));
        color: #c9d5f6;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 18px rgba(2, 6, 23, 0.26);
    }

    body.dark-mode .mobile-bottom-nav-item.is-active {
        color: #eef2ff !important;
    }

    body.dark-mode .mobile-bottom-nav-item.is-active::before {
        background: linear-gradient(180deg, rgba(124, 58, 237, 0.36), rgba(25, 33, 52, 0.96));
        border-color: rgba(148, 163, 255, 0.46);
        box-shadow: 0 16px 28px rgba(76, 29, 149, 0.34);
    }

    body.dark-mode .mobile-bottom-nav-item.is-active .mobile-bottom-nav-label {
        color: #f3f4ff !important;
    }

    body.dark-mode .mobile-bottom-nav-badge {
        border-color: rgba(15, 23, 42, 0.96);
    }
}

@media (max-width: 420px) {
    .mobile-bottom-nav {
        left: max(8px, env(safe-area-inset-left)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        gap: 6px !important;
        padding: 8px !important;
    }

    .mobile-bottom-nav-item {
        min-height: 68px !important;
        gap: 5px !important;
    }

    .mobile-bottom-nav-icon {
        width: 38px;
        height: 38px;
        border-radius: 14px;
    }

    .mobile-bottom-nav-label {
        font-size: 10px !important;
    }
}

@media (min-width: 769px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* Profile dashboard refresh */
.profile-dashboard-shell {
    padding: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #eef2f7;
}

.profile-dashboard-hidden-avatar {
    display: none;
}

.profile-dashboard-overview {
    padding: 0 0 18px;
    background: #ffffff;
}

.profile-dashboard-hero {
    background: #ffffff;
    color: #111827;
    padding: 18px 16px 18px;
    border-bottom: 1px solid #eef2f7;
}

.profile-dashboard-hero-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    direction: ltr;
}

.profile-dashboard-hero-copy {
    min-width: 0;
    flex: 1 1 auto;
    direction: rtl;
    text-align: right;
}

.profile-dashboard-header-icon {
    width: 54px;
    height: 54px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.profile-dashboard-hero #dash-name {
    margin: 0;
    font-size: 2rem;
    line-height: 1.1;
    color: #111827;
}

.profile-dashboard-hero-subtitle {
    margin: 10px 0 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: #6b7280;
}

.profile-dashboard-email {
    display: none;
}

.profile-dashboard-plan-spotlight {
    margin: 16px 14px 0;
    padding: 14px;
    border: 1px solid #eef2f7;
    border-radius: 28px;
    background: linear-gradient(135deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
    display: grid;
    gap: 12px;
}

.profile-dashboard-plan-main {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 14px;
    direction: rtl;
    text-align: right;
}

.profile-dashboard-plan-visual {
    display: grid;
    justify-items: end;
    gap: 10px;
}

.profile-dashboard-plan-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    color: #111827;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.profile-dashboard-plan-icon,
.profile-dashboard-plan-arrow {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    border: 1px solid #eef2f7;
    background: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    font-size: 24px;
}

.profile-dashboard-plan-copy {
    min-width: 0;
    display: grid;
    gap: 6px;
    align-content: start;
}

.profile-dashboard-plan-copy small {
    font-size: 12px;
    font-weight: 800;
    color: #6b7280;
}

.profile-dashboard-plan-copy strong {
    font-size: 1.55rem;
    line-height: 1.1;
    color: #111827;
}

.profile-dashboard-plan-copy span {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    color: #4b5563;
}

.profile-dashboard-plan-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.profile-dashboard-plan-action {
    min-height: 54px;
    border: 1px solid #eef2f7;
    border-radius: 20px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    color: #111827;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.profile-dashboard-plan-action.is-secondary {
    background: #f8fafc;
}

.profile-dashboard-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 10px 14px 0;
}

.profile-dashboard-stat-card {
    min-height: 144px;
    border: 0;
    border-radius: 24px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 10px;
    text-align: center;
    border: 1px solid #eef2f7;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.profile-dashboard-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    border: 1px solid #eef2f7;
    background: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #111827;
}

.profile-dashboard-stat-icon.is-rewards {
    color: #111827;
}

.profile-dashboard-stat-icon.is-orders {
    color: #111827;
}

.profile-dashboard-stat-icon.is-favorites {
    color: #111827;
}

.profile-dashboard-stat-label {
    font-size: 14px;
    font-weight: 700;
    color: #4b5563;
}

.profile-dashboard-stat-value {
    font-size: 18px;
    font-weight: 900;
    color: #111827;
}

.profile-dashboard-quick-prefs {
    display: grid;
    gap: 18px;
    padding: 16px 14px 0;
}

.profile-dashboard-pref-group {
    display: grid;
    gap: 8px;
}

.profile-dashboard-pref-row {
    width: 100%;
    min-height: 70px;
    border: 1px solid #eef2f7;
    border-radius: 20px;
    background: #ffffff;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    direction: ltr;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.profile-dashboard-pref-chevron,
.profile-dashboard-pref-icon {
    flex: 0 0 auto;
    color: #111827;
    font-size: 25px;
}

.profile-dashboard-pref-copy {
    flex: 1 1 auto;
    min-width: 0;
    direction: rtl;
    text-align: right;
    color: #111827;
}

.profile-dashboard-pref-copy strong {
    display: block;
    font-size: 15px;
}

.profile-dashboard-pref-copy small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
}

.profile-dashboard-pref-panel {
    background: #ffffff;
    border-radius: 18px;
    padding: 10px;
    border: 1px solid #eef2f7;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.profile-dashboard-pref-option {
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #111827;
    font-weight: 800;
    text-align: right;
    padding: 10px 12px;
}

.profile-dashboard-pref-option:hover {
    background: #f8fafc;
}

.profile-dashboard-menu-card {
    margin: 18px 14px 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

.profile-dashboard-menu-row {
    width: 100%;
    min-height: 114px;
    border: 1px solid #eef2f7;
    border-radius: 24px;
    background: #ffffff;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    direction: rtl;
    padding: 18px;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.profile-dashboard-menu-card > :last-child {
    border-bottom: 1px solid #eef2f7;
}

.profile-dashboard-menu-label {
    flex: 1 1 auto;
    width: 100%;
    direction: rtl;
    text-align: right;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: #111827;
}

.profile-dashboard-menu-icon {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 18px;
    border: 1px solid #eef2f7;
    background: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    font-size: 22px;
}

.profile-dashboard-shell .dash-tabs {
    margin: 18px 14px 0;
    padding: 0 4px 6px;
}

.profile-dashboard-shell .dash-tab {
    color: #6b7280;
}

.profile-dashboard-shell .dash-tab.active {
    color: #111827;
    border-bottom-color: #111827;
}

.profile-dashboard-shell #tab-products,
.profile-dashboard-shell #tab-orders-content,
.profile-dashboard-shell #tab-profile,
.profile-dashboard-shell #tab-messages-content,
.profile-dashboard-shell #tab-middleman-content,
.profile-dashboard-shell #tab-notifications-content {
    margin: 18px 14px 0;
    border-radius: 24px;
    background: #ffffff;
    padding: 16px;
    border: 1px solid #eef2f7;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.profile-dashboard-shell #dashboard-insights {
    margin-bottom: 14px;
}

body.dark-mode .profile-dashboard-shell {
    background: #ffffff;
    border-color: #eef2f7;
}

body.dark-mode .profile-dashboard-overview {
    background: #ffffff;
}

body.dark-mode .profile-dashboard-hero {
    background: #ffffff;
    color: #111827;
}

body.dark-mode .profile-dashboard-header-icon,
body.dark-mode .profile-dashboard-stat-card,
body.dark-mode .profile-dashboard-pref-row,
body.dark-mode .profile-dashboard-pref-panel,
body.dark-mode .profile-dashboard-shell #tab-products,
body.dark-mode .profile-dashboard-shell #tab-orders-content,
body.dark-mode .profile-dashboard-shell #tab-profile,
body.dark-mode .profile-dashboard-shell #tab-messages-content,
body.dark-mode .profile-dashboard-shell #tab-middleman-content,
body.dark-mode .profile-dashboard-shell #tab-notifications-content {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #eef2f7 !important;
}

body.dark-mode .profile-dashboard-plan-spotlight,
body.dark-mode .profile-dashboard-plan-action {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #eef2f7 !important;
}

body.dark-mode .profile-dashboard-plan-icon,
body.dark-mode .profile-dashboard-plan-arrow,
body.dark-mode .profile-dashboard-plan-badge,
body.dark-mode .profile-dashboard-plan-action.is-secondary,
body.dark-mode .profile-dashboard-menu-icon {
    background: #f8fafc !important;
    border-color: #eef2f7 !important;
}

body.dark-mode .profile-dashboard-pref-copy,
body.dark-mode .profile-dashboard-menu-label,
body.dark-mode .profile-dashboard-stat-label {
    color: #111827 !important;
}

body.dark-mode .profile-dashboard-pref-copy small,
body.dark-mode .profile-dashboard-plan-copy small,
body.dark-mode .profile-dashboard-email {
    color: #6b7280 !important;
}

body.dark-mode .profile-dashboard-menu-row {
    background: #ffffff !important;
    border-color: #eef2f7 !important;
}

body.dark-mode .profile-dashboard-menu-card {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

body.dark-mode .profile-dashboard-hero #dash-name,
body.dark-mode .profile-dashboard-hero-subtitle,
body.dark-mode .profile-dashboard-plan-copy,
body.dark-mode .profile-dashboard-plan-copy strong,
body.dark-mode .profile-dashboard-plan-copy span,
body.dark-mode .profile-dashboard-pref-chevron,
body.dark-mode .profile-dashboard-pref-icon,
body.dark-mode .profile-dashboard-menu-icon,
body.dark-mode .profile-dashboard-stat-icon,
body.dark-mode .profile-dashboard-shell .dash-tab.active {
    color: #111827 !important;
}

body.dark-mode .profile-dashboard-shell .dash-tab {
    color: #6b7280 !important;
}

body.dark-mode .profile-dashboard-shell .dash-tab.active {
    border-bottom-color: #111827 !important;
}

body.dark-mode .profile-dashboard-stat-icon {
    background: #f8fafc !important;
    border-color: #eef2f7 !important;
}

@media (max-width: 768px) {
    .profile-dashboard-shell {
        margin-top: 0;
        border-radius: 28px;
    }

    .profile-dashboard-shell .dash-tabs {
        display: none;
    }

    .profile-dashboard-hero-main {
        align-items: center;
    }
}

@media (max-width: 560px) {
    .profile-dashboard-plan-spotlight {
        margin-inline: 10px;
        padding: 12px;
        border-radius: 24px;
    }

    .profile-dashboard-plan-main {
        gap: 10px;
    }

    .profile-dashboard-plan-badge,
    .profile-dashboard-plan-icon,
    .profile-dashboard-plan-arrow {
        width: 48px;
        height: 48px;
    }

    .profile-dashboard-plan-copy strong {
        font-size: 1.28rem;
    }

    .profile-dashboard-plan-actions {
        gap: 8px;
    }

    .profile-dashboard-plan-action {
        min-height: 50px;
        padding: 10px 12px;
        font-size: 13px;
    }

    .profile-dashboard-hero {
        padding-inline: 14px;
    }

    .profile-dashboard-hero-main {
        gap: 12px;
    }

    .profile-dashboard-stat-grid {
        gap: 10px;
        padding-inline: 10px;
    }

    .profile-dashboard-stat-card {
        min-height: 132px;
        border-radius: 22px;
        padding-inline: 8px;
    }

    .profile-dashboard-stat-label {
        font-size: 13px;
    }

    .profile-dashboard-quick-prefs,
    .profile-dashboard-menu-card {
        margin-inline: 10px;
        padding-inline: 0;
    }

    .profile-dashboard-menu-card {
        gap: 10px;
    }

    .profile-dashboard-menu-row {
        min-height: 104px;
        border-radius: 22px;
        padding: 14px;
    }

    .profile-dashboard-shell #tab-products,
    .profile-dashboard-shell #tab-orders-content,
    .profile-dashboard-shell #tab-profile,
    .profile-dashboard-shell #tab-messages-content,
    .profile-dashboard-shell #tab-middleman-content,
    .profile-dashboard-shell #tab-notifications-content {
        margin-inline: 10px;
        padding: 14px;
        border-radius: 22px;
    }
}

@media (min-width: 769px) {
    .profile-dashboard-shell {
        padding: 0 0 24px;
    }

    .profile-dashboard-overview {
        padding-bottom: 24px;
    }

    .profile-dashboard-hero {
        padding: 22px 24px;
    }

    .profile-dashboard-hero-main {
        align-items: center;
    }

    .profile-dashboard-stat-grid {
        padding-inline: 24px;
        gap: 16px;
    }

    .profile-dashboard-quick-prefs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-inline: 24px;
    }

    .profile-dashboard-menu-card {
        margin-inline: 24px;
    }

    .profile-dashboard-shell .dash-tabs,
    .profile-dashboard-shell #tab-products,
    .profile-dashboard-shell #tab-orders-content,
    .profile-dashboard-shell #tab-profile,
    .profile-dashboard-shell #tab-messages-content,
    .profile-dashboard-shell #tab-middleman-content,
    .profile-dashboard-shell #tab-notifications-content {
        margin-inline: 24px;
    }
}

body.profile-page-mode .modern-site-header,
body.profile-page-mode .market-footer {
    display: none !important;
}

body.profile-page-mode .page-content {
    padding-top: 0 !important;
    padding-bottom: 12px !important;
}

body.profile-page-mode .page-content > *:not(#dashboard-view) {
    display: none !important;
}

body.profile-page-mode #dashboard-view {
    display: block !important;
    margin-top: 0 !important;
}

body.profile-page-mode .profile-dashboard-shell .dash-tabs {
    display: none !important;
}

/* Homepage refresh: 2026-03-31 */
.modern-site-header {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid rgba(109, 80, 163, 0.12);
    box-shadow: 0 10px 26px rgba(46, 29, 82, 0.08);
}

body.dark-mode .modern-site-header {
    background: rgba(16, 20, 33, 0.82);
    border-bottom-color: rgba(171, 188, 255, 0.12);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.market-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 4vw, 42px);
    border-radius: 36px;
    border: 1px solid rgba(117, 88, 175, 0.14);
    background:
        radial-gradient(circle at 10% 18%, rgba(119, 76, 207, 0.18), transparent 30%),
        radial-gradient(circle at 88% 14%, rgba(76, 177, 255, 0.18), transparent 24%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 240, 255, 0.95));
    box-shadow: 0 28px 62px rgba(50, 33, 88, 0.14);
}

.market-hero::before {
    content: "";
    position: absolute;
    inset: auto -12% -38% auto;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(122, 80, 206, 0.2), transparent 68%);
    pointer-events: none;
}

.market-hero::after {
    display: none;
}

.market-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.88fr);
    gap: clamp(22px, 3vw, 34px);
    align-items: stretch;
}

.market-hero-content {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.market-hero-eyebrow {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(111, 45, 150, 0.08);
    color: #6c2893;
    font-size: 0.84rem;
    letter-spacing: 0.14em;
}

.market-hero-title {
    margin: 0;
    font-size: clamp(2.05rem, 4.7vw, 4.4rem);
    line-height: 1.02;
    color: #1f1537;
}

.market-hero-subtitle {
    margin: 0;
    max-width: 680px;
    font-size: clamp(1rem, 1.8vw, 1.18rem);
    line-height: 1.9;
    color: #54476d;
}

.market-hero-points {
    margin-top: 2px;
    gap: 12px;
}

.market-hero-points span {
    min-height: 48px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(129, 101, 186, 0.12);
    box-shadow: 0 10px 20px rgba(56, 39, 92, 0.08);
}

.market-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.market-hero-actions .btn {
    min-height: 54px;
    padding-inline: 22px;
    border-radius: 18px;
    font-size: 0.98rem;
    box-shadow: 0 14px 28px rgba(53, 37, 90, 0.12);
}

.market-hero-actions .btn-ghost {
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(111, 45, 150, 0.12);
    color: #4f2a79;
}

.market-hero-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.market-hero-proof-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 82px;
    padding: 16px 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(116, 91, 170, 0.12);
    box-shadow: 0 16px 28px rgba(53, 38, 87, 0.08);
    color: #36234f;
    line-height: 1.65;
}

.market-hero-proof-item i {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(111, 45, 150, 0.1);
    color: #6f2d96;
}

.market-hero-panel {
    display: flex;
}

.market-hero-panel-shell {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: clamp(22px, 3vw, 30px);
    border-radius: 32px;
    background:
        radial-gradient(circle at top right, rgba(115, 199, 255, 0.2), transparent 26%),
        linear-gradient(155deg, #170f2a 0%, #241540 52%, #342058 100%);
    color: #fff;
    box-shadow: 0 28px 56px rgba(19, 12, 34, 0.34);
}

.market-hero-panel-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.market-hero-panel-kicker {
    margin: 0;
    color: rgba(197, 220, 255, 0.84);
    font-size: 0.84rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.market-hero-panel-title {
    margin: 0;
    font-size: clamp(1.35rem, 2.3vw, 1.85rem);
    line-height: 1.4;
    color: #fff;
}

.market-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.market-hero-stat-card {
    padding: 16px 14px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(190, 205, 255, 0.12);
    text-align: center;
}

.market-hero-stat-card strong {
    display: block;
    font-size: clamp(1.35rem, 2.6vw, 1.8rem);
    line-height: 1;
    margin-bottom: 8px;
    color: #fff;
}

.market-hero-stat-card span {
    display: block;
    color: rgba(226, 235, 255, 0.8);
    font-size: 0.86rem;
    line-height: 1.6;
}

.market-hero-highlight-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.market-hero-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(190, 205, 255, 0.1);
}

.market-hero-highlight-item strong {
    display: block;
    margin-bottom: 4px;
    font-size: 1rem;
    color: #fff;
}

.market-hero-highlight-item p {
    margin: 0;
    color: rgba(221, 230, 255, 0.8);
    line-height: 1.7;
    font-size: 0.9rem;
}

.market-hero-highlight-icon {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(109, 210, 255, 0.24), rgba(151, 119, 255, 0.18));
    color: #fff;
}

#main-view .market-command-center {
    position: relative;
    z-index: 2;
    margin-top: -34px;
    padding: 18px;
    border-radius: 30px;
    border: 1px solid rgba(114, 86, 173, 0.14);
    background: linear-gradient(160deg, rgba(20, 17, 36, 0.94), rgba(25, 21, 44, 0.92));
    box-shadow: 0 26px 52px rgba(23, 15, 40, 0.26);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
}

.market-assurance,
.market-journey {
    margin-top: 28px;
}

.market-assurance {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.market-assurance-head,
.market-journey-head {
    max-width: 760px;
}

.market-assurance-eyebrow,
.market-journey-eyebrow {
    margin: 0 0 10px;
    color: #6f2d96;
    font-size: 0.86rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.market-assurance-title,
.market-journey-title {
    margin: 0;
    color: #1f1537;
    font-size: clamp(1.55rem, 3.1vw, 2.4rem);
    line-height: 1.2;
}

.market-assurance-subtitle,
.market-journey-subtitle {
    margin: 12px 0 0;
    color: #65587b;
    line-height: 1.9;
    font-size: 1rem;
}

.market-assurance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.market-assurance-card,
.market-journey-card {
    position: relative;
    padding: 24px;
    border-radius: 28px;
    border: 1px solid rgba(114, 86, 173, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 242, 255, 0.94));
    box-shadow: 0 18px 34px rgba(47, 31, 82, 0.08);
}

.market-assurance-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    background: linear-gradient(135deg, rgba(111, 45, 150, 0.14), rgba(65, 193, 255, 0.12));
    color: #6d2b96;
    font-size: 1.1rem;
}

.market-assurance-card h3,
.market-journey-card h3 {
    margin: 0 0 10px;
    color: #24173b;
    font-size: 1.08rem;
}

.market-assurance-card p,
.market-journey-card p {
    margin: 0;
    color: #67587f;
    line-height: 1.9;
    font-size: 0.95rem;
}

.market-journey {
    padding: clamp(24px, 3vw, 32px);
    border-radius: 34px;
    border: 1px solid rgba(114, 86, 173, 0.12);
    background:
        radial-gradient(circle at top left, rgba(137, 94, 215, 0.14), transparent 22%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 238, 251, 0.95));
    box-shadow: 0 22px 44px rgba(48, 33, 84, 0.09);
}

.market-journey-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.market-journey-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 34px;
    margin-bottom: 18px;
    padding-inline: 16px;
    border-radius: 999px;
    background: #27183f;
    color: #fff;
    font-size: 0.82rem;
    letter-spacing: 0.16em;
}

.category-browser,
.broadcast-feed,
.ad-strip,
.visitor-connect-band {
    margin-top: 28px;
}

.products .card,
#products-grid.products .card,
#community-products-grid.products .card,
#my-products-grid.products .card,
#auctions-grid.products .card {
    border-radius: 26px;
    border: 1px solid rgba(116, 87, 175, 0.12);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 34px rgba(45, 29, 80, 0.08);
    overflow: hidden;
    transition:
        transform var(--motion-medium) var(--motion-ease),
        box-shadow var(--motion-medium) var(--motion-ease),
        border-color var(--motion-medium) var(--motion-ease);
}

.products .card:hover,
#products-grid.products .card:hover,
#community-products-grid.products .card:hover,
#my-products-grid.products .card:hover,
#auctions-grid.products .card:hover {
    transform: translateY(-6px);
    border-color: rgba(111, 45, 150, 0.18);
    box-shadow: 0 24px 42px rgba(45, 29, 80, 0.14);
}

footer.market-footer {
    margin-top: 42px;
}

footer.market-footer .market-footer-content {
    border-radius: 34px 34px 0 0;
    background:
        radial-gradient(circle at top right, rgba(94, 208, 255, 0.16), transparent 20%),
        linear-gradient(135deg, #130d22 0%, #241540 54%, #332054 100%);
    box-shadow: 0 -10px 34px rgba(19, 12, 34, 0.22);
}

footer.market-footer .market-footer-column h4,
footer.market-footer .market-footer-links a,
footer.market-footer .footer-link-btn,
footer.market-footer .market-footer-brand #footer-text,
footer.market-footer .market-footer-rights,
footer.market-footer .market-footer-bottom p {
    color: rgba(255, 255, 255, 0.88);
}

footer.market-footer .market-footer-links a:hover,
footer.market-footer .footer-link-btn:hover {
    color: #fff;
}

footer.market-footer .market-footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .market-hero {
    border-color: rgba(172, 190, 255, 0.14);
    background:
        radial-gradient(circle at 12% 18%, rgba(158, 123, 255, 0.16), transparent 28%),
        radial-gradient(circle at 88% 14%, rgba(71, 177, 255, 0.16), transparent 24%),
        linear-gradient(145deg, rgba(29, 34, 54, 0.96), rgba(21, 24, 40, 0.96));
    box-shadow: 0 30px 64px rgba(0, 0, 0, 0.24);
}

body.dark-mode .market-hero-eyebrow,
body.dark-mode .market-assurance-eyebrow,
body.dark-mode .market-journey-eyebrow {
    background: rgba(168, 184, 255, 0.08);
    color: #c6d4ff;
}

body.dark-mode .market-hero-title,
body.dark-mode .market-assurance-title,
body.dark-mode .market-journey-title {
    color: #f4f6ff;
}

body.dark-mode .market-hero-subtitle,
body.dark-mode .market-assurance-subtitle,
body.dark-mode .market-journey-subtitle,
body.dark-mode .market-assurance-card p,
body.dark-mode .market-journey-card p {
    color: rgba(226, 232, 255, 0.76);
}

body.dark-mode .market-hero-points span,
body.dark-mode .market-hero-proof-item,
body.dark-mode .market-assurance-card,
body.dark-mode .market-journey-card,
body.dark-mode .market-journey,
body.dark-mode .products .card,
body.dark-mode #products-grid.products .card,
body.dark-mode #community-products-grid.products .card,
body.dark-mode #my-products-grid.products .card,
body.dark-mode #auctions-grid.products .card {
    background: linear-gradient(180deg, rgba(33, 39, 61, 0.96), rgba(24, 29, 46, 0.96));
    border-color: rgba(168, 184, 255, 0.1);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
}

body.dark-mode .market-hero-proof-item,
body.dark-mode .market-assurance-card h3,
body.dark-mode .market-journey-card h3 {
    color: #f5f7ff;
}

body.dark-mode .market-hero-proof-item i,
body.dark-mode .market-assurance-icon {
    background: rgba(195, 208, 255, 0.1);
    color: #c8d5ff;
}

body.dark-mode #main-view .market-command-center {
    border-color: rgba(164, 182, 255, 0.12);
    background: linear-gradient(160deg, rgba(18, 22, 34, 0.94), rgba(23, 27, 41, 0.92));
    box-shadow: 0 26px 56px rgba(0, 0, 0, 0.28);
}

@media (max-width: 1080px) {
    .market-hero-grid,
    .market-assurance-grid,
    .market-journey-grid {
        grid-template-columns: 1fr;
    }

    .market-hero-proof {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .market-hero {
        padding: 22px 18px;
        border-radius: 28px;
    }

    .market-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .market-hero-actions .btn {
        width: 100%;
    }

    .market-hero-panel-shell,
    .market-assurance-card,
    .market-journey-card {
        border-radius: 24px;
    }

    .market-hero-stats {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    #main-view .market-command-center {
        margin-top: 18px;
        border-radius: 24px;
    }
}

@media (max-width: 560px) {
    .market-hero-title {
        font-size: clamp(1.75rem, 9vw, 2.3rem);
    }

    .market-hero-subtitle {
        font-size: 0.96rem;
    }

    .market-hero-proof-item,
    .market-assurance-card,
    .market-journey-card {
        padding: 18px;
    }

    footer.market-footer .market-footer-content {
        border-radius: 26px 26px 0 0;
    }
}

/* Homepage trims requested by user */
#modern-mobile-toggle,
#main-view .market-hero,
#main-view #market-assurance {
    display: none !important;
}

.modern-mobile-sell-cta {
    display: none !important;
}

@media (max-width: 768px) {
    #ads-section.ad-strip {
        margin: 12px 0 16px;
    }

    #ads-section .ad-card-banner {
        border-radius: 26px;
    }

    #ads-section .ad-card-banner .ad-banner-image,
    #ads-section .ad-card-banner .ad-banner-media {
        height: clamp(112px, 38vw, 168px);
        min-height: 112px;
        max-height: 168px;
        aspect-ratio: auto;
        border-radius: 26px;
        box-shadow: 0 18px 34px rgba(58, 44, 98, 0.12);
    }

        #ads-section .ad-card-banner .ad-badge {
            top: 14px;
            left: 14px;
            padding: 6px 10px;
            font-size: 10px;
        }

    .modern-mobile-sell-cta {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 42px;
        padding: 0 16px;
        border: 0;
        border-radius: 14px;
        background: linear-gradient(135deg, #19b36b 0%, #0f8b71 100%);
        color: #ffffff;
        font-size: 0.95rem;
        font-weight: 800;
        white-space: nowrap;
        box-shadow: 0 12px 24px rgba(15, 139, 113, 0.24);
        cursor: pointer;
        transition:
            transform var(--motion-fast) var(--motion-ease),
            box-shadow var(--motion-fast) var(--motion-ease),
            filter var(--motion-fast) var(--motion-ease);
    }

@media (max-width: 480px) {
    #ads-section.ad-strip {
        margin: 10px 0 14px;
        gap: 10px;
    }

    #ads-section .ad-card-banner {
        border-radius: 22px;
    }

    #ads-section .ad-card-banner .ad-banner-image,
    #ads-section .ad-card-banner .ad-banner-media {
        height: clamp(98px, 42vw, 144px);
        min-height: 98px;
        max-height: 144px;
        border-radius: 22px;
        box-shadow: 0 14px 24px rgba(58, 44, 98, 0.1);
    }

    #ads-section .ad-card-banner .ad-badge {
        top: 10px;
        left: 10px;
        padding: 5px 9px;
        font-size: 9px;
    }
}

    .modern-mobile-sell-cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 16px 28px rgba(15, 139, 113, 0.28);
        filter: brightness(1.02);
    }

    .modern-mobile-sell-cta:active {
        transform: translateY(0);
        box-shadow: 0 10px 18px rgba(15, 139, 113, 0.22);
    }

    .modern-mobile-sell-cta i {
        font-size: 0.92rem;
    }
}

/* Remove sponsor banners */
.detail-hero-banner-shell,
.detail-sponsor-strip {
    display: none !important;
}

body.legacy-marketplace-cards-disabled .page-content {
    padding-bottom: 0 !important;
}

body.legacy-marketplace-cards-disabled #main-view {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
}

body.legacy-marketplace-cards-disabled #community-products-grid,
body.legacy-marketplace-cards-disabled #community-verified-grid,
body.legacy-marketplace-cards-disabled #my-products-grid,
body.legacy-marketplace-cards-disabled #auctions-grid {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

body.legacy-marketplace-cards-disabled footer.market-footer {
    margin-top: 0 !important;
}

/* Header refinement */
.modern-site-header {
    padding: 0 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 252, 0.98)) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.34) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
    color: #1e293b !important;
}

.modern-site-header .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.dark-mode .modern-site-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 252, 0.98)) !important;
    border-bottom-color: rgba(148, 163, 184, 0.34) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
    color: #1e293b !important;
}

.modern-header-shell {
    min-height: 68px;
    gap: 14px;
}

.modern-brand-logo {
    width: 128px;
}

.modern-nav-link,
.modern-icon-btn,
.modern-language-btn,
.modern-pill-btn,
.modern-login-btn {
    min-height: 40px;
    border-radius: 14px;
}

.modern-nav-link {
    padding: 0 15px;
}

.modern-icon-btn {
    width: 40px;
}

.modern-language-btn,
.modern-pill-btn,
.modern-login-btn {
    padding: 0 14px;
}

.modern-site-header .modern-nav-link,
.modern-site-header .modern-icon-btn,
.modern-site-header .modern-language-btn,
.modern-site-header .modern-pill-btn,
.modern-site-header .modern-login-btn {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(148, 163, 184, 0.42);
    color: #1e293b;
}

@media (max-width: 768px) {
    .modern-site-header .container {
        padding-top: max(4px, env(safe-area-inset-top)) !important;
        padding-bottom: 4px !important;
    }

    .modern-header-shell {
        min-height: 60px;
        gap: 10px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .modern-brand-logo {
        width: 102px;
    }
}

/* Dashboard accent themes */
body {
    --dashboard-shell-bg: #ffffff;
    --dashboard-overview-bg: #ffffff;
    --dashboard-hero-bg: #ffffff;
    --accent-strong: #00c853;
    --dashboard-card-bg: #ffffff;
    --dashboard-card-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    --dashboard-copy: #111827;
    --dashboard-copy-soft: #6b7280;
    --dashboard-strong: #111827;
    --dashboard-divider: #eef2f7;
    --dashboard-icon: #111827;
    --dashboard-surface: #f8fafc;
    --dashboard-outline: rgba(17, 24, 39, 0.08);
}

body.dark-mode {
    --dashboard-shell-bg: #ffffff;
    --dashboard-overview-bg: #ffffff;
    --dashboard-hero-bg: #ffffff;
    --dashboard-card-bg: #ffffff;
    --dashboard-card-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    --dashboard-copy: #111827;
    --dashboard-copy-soft: #6b7280;
    --dashboard-strong: #111827;
    --dashboard-divider: #eef2f7;
    --dashboard-icon: #111827;
    --dashboard-surface: #f8fafc;
    --dashboard-outline: rgba(17, 24, 39, 0.08);
}

body[data-accent-theme="ocean"] {
    --primary: #2563eb;
    --secondary: #1d4ed8;
    --accent: #06b6d4;
    --accent-strong: #0284c7;
    --dashboard-shell-bg: #edf5ff;
    --dashboard-overview-bg: linear-gradient(180deg, #f2f8ff 0%, #e4efff 100%);
    --dashboard-hero-bg: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
    --dashboard-copy: #1d4f91;
    --dashboard-copy-soft: #6b8dbc;
    --dashboard-strong: #1e40af;
    --dashboard-divider: #dbe7f5;
    --dashboard-icon: #2563eb;
    --dashboard-surface: #eaf4ff;
    --dashboard-outline: rgba(37, 99, 235, 0.2);
}

body.dark-mode[data-accent-theme="ocean"] {
    --dashboard-shell-bg: linear-gradient(180deg, #111827 0%, #172033 100%);
    --dashboard-overview-bg: linear-gradient(180deg, #10213c 0%, #162235 100%);
    --dashboard-hero-bg: linear-gradient(135deg, #1d4ed8 0%, #0369a1 100%);
    --dashboard-card-bg: #1a2538;
    --dashboard-copy: #d9eafe;
    --dashboard-copy-soft: #9db7d9;
    --dashboard-strong: #93c5fd;
    --dashboard-divider: rgba(125, 171, 246, 0.18);
    --dashboard-icon: #60a5fa;
    --dashboard-surface: #14253c;
    --dashboard-outline: rgba(96, 165, 250, 0.24);
}

body[data-accent-theme="emerald"] {
    --primary: #059669;
    --secondary: #047857;
    --accent: #22c55e;
    --accent-strong: #16a34a;
    --dashboard-shell-bg: #eefbf4;
    --dashboard-overview-bg: linear-gradient(180deg, #f3fdf7 0%, #e5f8ec 100%);
    --dashboard-hero-bg: linear-gradient(135deg, #059669 0%, #10b981 100%);
    --dashboard-copy: #0f6a4f;
    --dashboard-copy-soft: #689483;
    --dashboard-strong: #047857;
    --dashboard-divider: #dcefe5;
    --dashboard-icon: #059669;
    --dashboard-surface: #ecfdf5;
    --dashboard-outline: rgba(5, 150, 105, 0.18);
}

body.dark-mode[data-accent-theme="emerald"] {
    --dashboard-shell-bg: linear-gradient(180deg, #111f1a 0%, #162922 100%);
    --dashboard-overview-bg: linear-gradient(180deg, #10271f 0%, #163126 100%);
    --dashboard-hero-bg: linear-gradient(135deg, #047857 0%, #059669 100%);
    --dashboard-card-bg: #193028;
    --dashboard-copy: #d7f8e8;
    --dashboard-copy-soft: #9ccdb5;
    --dashboard-strong: #86efac;
    --dashboard-divider: rgba(134, 239, 172, 0.14);
    --dashboard-icon: #34d399;
    --dashboard-surface: #15362b;
    --dashboard-outline: rgba(52, 211, 153, 0.24);
}

body[data-accent-theme="rose"] {
    --primary: #e11d48;
    --secondary: #be123c;
    --accent: #fb7185;
    --accent-strong: #e11d48;
    --dashboard-shell-bg: #fff1f5;
    --dashboard-overview-bg: linear-gradient(180deg, #fff4f7 0%, #ffe7ee 100%);
    --dashboard-hero-bg: linear-gradient(135deg, #e11d48 0%, #fb7185 100%);
    --dashboard-copy: #a61d48;
    --dashboard-copy-soft: #bf6f8d;
    --dashboard-strong: #be123c;
    --dashboard-divider: #f3dce4;
    --dashboard-icon: #e11d48;
    --dashboard-surface: #fff0f4;
    --dashboard-outline: rgba(225, 29, 72, 0.18);
}

body.dark-mode[data-accent-theme="rose"] {
    --dashboard-shell-bg: linear-gradient(180deg, #22121a 0%, #2b1721 100%);
    --dashboard-overview-bg: linear-gradient(180deg, #341827 0%, #281722 100%);
    --dashboard-hero-bg: linear-gradient(135deg, #be123c 0%, #e11d48 100%);
    --dashboard-card-bg: #321b27;
    --dashboard-copy: #ffd9e2;
    --dashboard-copy-soft: #e2a4b6;
    --dashboard-strong: #fda4af;
    --dashboard-divider: rgba(253, 164, 175, 0.16);
    --dashboard-icon: #fb7185;
    --dashboard-surface: #3b1f2d;
    --dashboard-outline: rgba(251, 113, 133, 0.24);
}

.profile-dashboard-shell {
    background: var(--dashboard-shell-bg) !important;
}

.profile-dashboard-overview {
    background: var(--dashboard-overview-bg) !important;
}

.profile-dashboard-hero {
    background: var(--dashboard-hero-bg) !important;
}

.profile-dashboard-header-icon {
    background: #ffffff !important;
    color: #111827 !important;
}

body.dark-mode .profile-dashboard-header-icon {
    background: #ffffff !important;
    color: #111827 !important;
}

.profile-dashboard-stat-card,
.profile-dashboard-pref-row,
.profile-dashboard-pref-panel,
.profile-dashboard-shell #tab-products,
.profile-dashboard-shell #tab-orders-content,
.profile-dashboard-shell #tab-profile,
.profile-dashboard-shell #tab-messages-content,
.profile-dashboard-shell #tab-middleman-content,
.profile-dashboard-shell #tab-notifications-content {
    background: var(--dashboard-card-bg) !important;
    box-shadow: var(--dashboard-card-shadow) !important;
}

.profile-dashboard-pref-copy,
.profile-dashboard-menu-label,
.profile-dashboard-stat-label,
.profile-dashboard-pref-option {
    color: var(--dashboard-copy) !important;
}

.profile-dashboard-pref-copy small,
.profile-dashboard-email {
    color: var(--dashboard-copy-soft) !important;
}

.profile-dashboard-stat-value {
    color: var(--dashboard-strong) !important;
}

.profile-dashboard-pref-chevron,
.profile-dashboard-pref-icon,
.profile-dashboard-menu-icon,
.profile-dashboard-stat-icon.is-rewards {
    color: var(--dashboard-icon) !important;
}

.profile-dashboard-menu-row {
    border-bottom-color: var(--dashboard-divider) !important;
}

.profile-dashboard-pref-option:hover {
    background: var(--dashboard-surface) !important;
}

.btn-accent {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.16);
}

.dashboard-theme-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.dashboard-theme-swatch {
    width: 100%;
    min-height: 56px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--dashboard-copy);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    font: inherit;
    font-weight: 800;
    text-align: right;
    cursor: pointer;
    justify-content: flex-start;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

body.dark-mode .dashboard-theme-swatch {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: none;
}

.dashboard-theme-swatch.is-active {
    border-color: var(--dashboard-outline);
    background: var(--dashboard-surface);
    transform: translateY(-1px);
}

.dashboard-theme-swatch-preview {
    width: 44px;
    height: 32px;
    padding: 4px;
    border-radius: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    flex: 0 0 auto;
}

.dashboard-theme-swatch-preview span {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
}

.dashboard-theme-swatch-preview.is-violet {
    background: linear-gradient(135deg, #6e2b8b 0%, #9b59d0 100%);
}

.dashboard-theme-swatch-preview.is-ocean {
    background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
}

.dashboard-theme-swatch-preview.is-emerald {
    background: linear-gradient(135deg, #059669 0%, #22c55e 100%);
}

.dashboard-theme-swatch-preview.is-rose {
    background: linear-gradient(135deg, #e11d48 0%, #fb7185 100%);
}

@media (max-width: 560px) {
    .dashboard-theme-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-theme-swatch {
        min-height: 52px;
        padding: 10px;
        gap: 10px;
        font-size: 13px;
    }

    .dashboard-theme-swatch-preview {
        width: 40px;
        height: 30px;
    }
}

/* Footer cleanup */
footer.market-footer {
    margin-top: 24px;
    padding: 18px 0 calc(10px + env(safe-area-inset-bottom));
    background: transparent;
    border-top: 0;
}

footer.market-footer .market-footer-content {
    padding: 24px 20px 14px;
    border-radius: 28px 28px 0 0;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
        radial-gradient(circle at top right, rgba(125, 211, 252, 0.12), transparent 18%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(235, 241, 248, 0.96));
    box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.08);
}

footer.market-footer .market-footer-grid {
    gap: 20px;
}

footer.market-footer .market-footer-brand,
footer.market-footer .market-footer-column {
    gap: 10px;
}

footer.market-footer .market-footer-links {
    gap: 6px;
}

footer.market-footer .market-footer-column h4,
footer.market-footer .market-footer-links a,
footer.market-footer .footer-link-btn {
    color: #1e293b;
}

footer.market-footer .footer-link-btn {
    width: auto !important;
    min-height: 0 !important;
    align-self: flex-start;
}

footer.market-footer .market-footer-brand #footer-text,
footer.market-footer .market-footer-rights,
footer.market-footer .market-footer-bottom p {
    color: #64748b;
}

footer.market-footer .market-footer-bottom {
    padding-top: 12px;
    border-top-color: rgba(148, 163, 184, 0.18);
}

body.dark-mode footer.market-footer .market-footer-content {
    border-color: rgba(96, 165, 250, 0.14);
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 20%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(17, 24, 39, 0.96));
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.22);
}

body.dark-mode footer.market-footer .market-footer-column h4,
body.dark-mode footer.market-footer .market-footer-links a,
body.dark-mode footer.market-footer .footer-link-btn {
    color: #f8fafc;
}

body.dark-mode footer.market-footer .market-footer-brand #footer-text,
body.dark-mode footer.market-footer .market-footer-rights,
body.dark-mode footer.market-footer .market-footer-bottom p {
    color: #94a3b8;
}

body.dark-mode footer.market-footer .market-footer-bottom {
    border-top-color: rgba(148, 163, 184, 0.16);
}

@media (max-width: 768px) {
    footer.market-footer {
        padding: 14px 0 calc(8px + env(safe-area-inset-bottom));
    }

    footer.market-footer .market-footer-content {
        padding: 18px 14px 10px;
        border-radius: 24px 24px 0 0;
    }

    footer.market-footer .market-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px;
    }

    footer.market-footer .market-footer-brand {
        grid-column: 1 / -1;
    }

    footer.market-footer .market-footer-column h4 {
        font-size: 15px;
    }

    footer.market-footer .market-footer-links a,
    footer.market-footer .footer-link-btn {
        font-size: 13px;
        line-height: 1.5;
    }

    footer.market-footer .market-footer-bottom {
        gap: 8px;
        padding-top: 10px;
    }
}

@media (max-width: 640px) {
    footer.market-footer .market-footer-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile product cards refresh for 2-column layout */
@media (max-width: 768px) {
    .products > .card {
        min-width: 0;
        border-radius: 20px;
    }

    .products > .card .card-img {
        height: clamp(132px, 31vw, 178px);
    }

    .products > .card .card-body {
        display: grid;
        gap: 8px;
        padding: 12px 11px;
    }

    .products > .card .card-body > * {
        min-width: 0;
        margin-bottom: 0;
    }

    .products > .card .card-title {
        font-size: 15px;
        line-height: 1.35;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: calc(1.35em * 2);
    }

    .products > .card .card-seller {
        gap: 6px;
        margin: 0;
    }

    .products > .card .card-seller-main {
        width: 100%;
    }

    .products > .card .card-seller-name {
        font-size: 11px;
    }

    .products > .card .card-seller-badges {
        width: 100%;
        gap: 4px;
    }

    .products > .card .seller-verified-badge,
    .products > .card .seller-pro-badge,
    .products > .card .seller-active-badge,
    .products > .card .seller-top-rated-badge {
        font-size: 9px;
        padding: 3px 6px;
    }

    .products > .card .card-price {
        font-size: 18px;
        line-height: 1.2;
    }

    .products > .card .card-price-label {
        font-size: 10px;
    }

    .products > .card .card-old-price {
        font-size: 11px;
    }

    .products > .card .sell-mode-prices {
        gap: 3px;
    }

    .products > .card .sell-mode-price-line,
    .products > .card .auction-time-note,
    .products > .card .auction-live-meta {
        font-size: 10px;
        line-height: 1.35;
    }

    .products > .card .card-location {
        margin: 0;
        font-size: 13px;
        line-height: 1.35;
    }

    .products > .card .card-car-specs {
        gap: 4px;
        margin: 0;
    }

    .products > .card .card-car-spec-chip {
        font-size: 10px;
        padding: 3px 7px;
    }

    .products > .card .card-meta {
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        margin: 0;
    }

    .products > .card .badge {
        font-size: 9px;
        padding: 4px 6px;
    }

    .products > .card .rating-badge {
        font-size: 12px;
        margin-inline-start: auto;
    }

    .products > .card .card-quick-info {
        flex-wrap: wrap;
        gap: 6px;
        margin: 0;
    }

    .products > .card .card-views,
    .products > .card .card-time {
        font-size: 10px;
    }

    .products > .card .card-actions {
        margin-top: 0;
        gap: 6px;
    }

    .products > .card .card-actions .btn,
    .products > .card .card-actions a.btn {
        min-height: 42px;
        padding: 8px 10px;
        font-size: 12px;
        border-radius: 12px;
    }

    .products > .card .card-actions .btn-whatsapp-primary {
        min-height: 46px;
        padding: 10px 12px;
        font-size: 13px;
        box-shadow: 0 10px 20px rgba(16, 138, 63, 0.26);
    }

    .products > .card .card-actions .btn-whatsapp-primary i {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .products > .card {
        border-radius: 18px;
    }

    .products > .card .card-body {
        padding: 10px;
        gap: 7px;
    }

    .products > .card .card-title {
        font-size: 14px;
    }

    .products > .card .card-price {
        font-size: 17px;
    }

    .products > .card .card-location,
    .products > .card .card-views,
    .products > .card .card-time,
    .products > .card .sell-mode-price-line,
    .products > .card .auction-time-note,
    .products > .card .auction-live-meta {
        font-size: 11px;
    }

    .products > .card .card-actions {
        gap: 5px;
    }

    .products > .card .card-actions .btn,
    .products > .card .card-actions a.btn {
        min-height: 40px;
        padding: 7px 8px;
        font-size: 11px;
    }

    .products > .card .card-actions .btn-whatsapp-primary {
        min-height: 42px;
        padding: 8px 9px;
        font-size: 11px;
    }
}

@media (max-width: 768px) {
    .products > .card .card-actions-listing {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .products > .card .card-actions-listing .card-action-primary {
        grid-column: 1 / -1;
    }

    .detail-primary-actions .btn-call-primary,
    .detail-primary-actions .btn-whatsapp-primary {
        display: none;
    }
}

/* Marketplace search shell alignment */
@media (max-width: 768px) {
    body.legacy-marketplace-cards-disabled #main-view {
        padding-top: 4px !important;
    }

    #main-view .market-command-center {
        display: block !important;
        margin-top: 4px !important;
        padding-top: 0 !important;
    }

    #main-view .search-area {
        margin-top: 0 !important;
    }
}

/* Marketplace quick city picker */
#main-view .market-command-center {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#main-view .market-search-shell {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    margin: 6px 0 0 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(214, 218, 229, 0.95) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

#main-view .market-search-shell > i {
    display: none !important;
}

#main-view .market-location-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 0;
    min-height: 42px;
    border: 0;
    background: transparent;
    color: #9b7a53;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

#main-view .market-location-trigger i {
    color: #9aa9c0;
    font-size: 18px;
}

#main-view .market-search-divider {
    width: 1px;
    height: 28px;
    flex: 0 0 1px;
    background: rgba(224, 228, 237, 0.98);
}

#main-view .market-search-input-wrap {
    position: relative !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
}

#main-view .market-search-input-wrap .search-input {
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 0 0 38px !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 38px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #2a2f3c !important;
    font-size: 14px !important;
}

#main-view .market-search-input-wrap .search-input::placeholder {
    color: #b8bcc6 !important;
}

#main-view .market-search-shell #btn-search.market-search-submit {
    position: absolute !important;
    inset-inline-end: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #c0c3ca !important;
    font-size: 0 !important;
}

#main-view .market-search-shell #btn-search.market-search-submit::before {
    content: "\f002";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 17px;
    line-height: 1;
}

#main-view .market-search-shell #btn-search.market-search-submit:hover,
#main-view .market-search-shell #btn-search.market-search-submit:focus-visible {
    color: #7f889a !important;
    outline: none;
}

#main-view .market-search-utility {
    display: flex !important;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

#main-view .market-search-utility .btn {
    width: auto !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(220, 224, 233, 0.98) !important;
    background: #ffffff !important;
    color: #5f6778 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

#main-view .market-search-utility .btn i {
    color: #9aa9c0;
}

#main-view .advanced-filters {
    margin-top: 12px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(226, 230, 238, 0.98) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

#main-view .advanced-filters .filter-field-label,
#main-view .advanced-filters .distance-filter-value,
#main-view .advanced-filters .price-range-head,
#main-view .advanced-filters .facet-filters-head {
    color: #697386 !important;
}

#main-view .advanced-filters .filter-select,
#main-view .advanced-filters .price-range-wrap,
#main-view .advanced-filters .facet-filters-shell {
    background: #ffffff !important;
    border: 1px solid rgba(223, 227, 235, 0.98) !important;
    color: #2d3442 !important;
    box-shadow: none !important;
}

#main-view .advanced-filters .filter-select:focus {
    border-color: rgba(142, 152, 173, 0.9) !important;
    box-shadow: 0 0 0 3px rgba(216, 221, 232, 0.65) !important;
}

#market-location-modal.market-location-modal-overlay {
    align-items: flex-start;
    padding: max(14px, env(safe-area-inset-top)) 14px 14px;
}

#market-location-modal .market-location-modal {
    width: min(100%, 520px);
    max-width: 520px;
    min-height: min(82dvh, 640px);
    padding: 30px 20px 24px;
    border-radius: 34px;
    background: #ffffff;
    box-shadow: 0 28px 60px rgba(24, 28, 42, 0.18);
}

#market-location-modal .close-modal {
    top: 18px;
    left: 18px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #f4f6fb;
    color: #6e7687;
    font-size: 28px;
    line-height: 1;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

html[dir="ltr"] #market-location-modal .close-modal {
    left: auto;
    right: 18px;
}

#market-location-modal .close-modal:hover {
    background: #e9edf6;
    color: #2c3342;
    transform: scale(1.03);
}

#market-location-modal .close-modal:focus-visible {
    outline: 2px solid rgba(87, 100, 150, 0.34);
    outline-offset: 2px;
}

#market-location-modal #market-location-modal-title {
    margin: 0 0 22px;
    padding: 0 52px;
    text-align: center;
    color: #1d212d;
    font-size: 18px;
    font-weight: 900;
}

#market-location-modal .market-location-modal-search {
    position: relative;
    margin-bottom: 20px;
}

#market-location-modal .market-location-modal-search .form-input {
    width: 100%;
    min-height: 74px;
    margin-bottom: 0;
    padding-inline: 18px 52px;
    border-radius: 22px;
    border: 1px solid rgba(225, 230, 239, 0.98);
    background: #ffffff;
    box-shadow: none;
    color: #2a2f3c;
    font-size: 17px;
}

#market-location-modal .market-location-modal-search .form-input::placeholder {
    color: #c4c8d1;
}

#market-location-modal .market-location-modal-search i {
    position: absolute;
    inset-inline-end: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #c0c7d6;
    font-size: 20px;
}

#market-location-modal .market-location-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: min(54dvh, 440px);
    overflow-y: auto;
    padding-bottom: 4px;
}

#market-location-modal .market-location-section-label {
    margin: 10px 0 2px;
    padding: 8px 10px 4px;
    text-align: center;
    color: #a9b0bd;
    font-size: 13px;
    font-weight: 800;
}

#market-location-modal .market-location-option {
    width: 100%;
    min-height: 58px;
    padding: 10px 14px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: #b4b8c3;
    font: inherit;
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

#market-location-modal .market-location-option:hover,
#market-location-modal .market-location-option.is-active {
    background: #f6f8fb;
    color: #2b3140;
}

#market-location-modal .market-location-option.is-back {
    min-height: 50px;
    color: #7f8899;
    font-size: 15px;
    font-weight: 900;
}

#market-location-modal .market-location-empty {
    margin: 8px 0 0;
    padding: 16px 10px;
    text-align: center;
    color: #aeb4c0;
    font-size: 15px;
    font-weight: 700;
}

@media (max-width: 768px) {
    #main-view .market-command-center {
        display: block !important;
        margin-top: 4px !important;
    }

    #main-view .market-search-shell {
        gap: 8px !important;
        padding: 4px 12px !important;
        border-radius: 18px !important;
    }

    #main-view .market-location-trigger {
        min-height: 38px;
        font-size: 13px;
    }

    #main-view .market-location-trigger i {
        font-size: 16px;
    }

    #main-view .market-search-divider {
        height: 24px;
    }

    #main-view .market-search-input-wrap {
        width: auto !important;
    }

    #main-view .market-search-input-wrap .search-input {
        min-height: 38px !important;
        padding-inline-end: 34px !important;
        font-size: 13px !important;
    }

    #main-view .market-search-shell #btn-search.market-search-submit {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
    }

    #main-view .market-search-shell #btn-search.market-search-submit::before {
        font-size: 16px;
    }

    #main-view .market-search-utility {
        gap: 8px;
        margin-top: 10px;
    }

    #main-view .market-search-utility .btn {
        min-height: 40px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
    }

    #market-location-modal .market-location-modal {
        min-height: min(78dvh, 610px);
        padding: 28px 16px 22px;
        border-radius: 30px;
    }

    #market-location-modal .close-modal {
        top: 16px;
        left: 16px;
        width: 40px;
        height: 40px;
    }

    html[dir="ltr"] #market-location-modal .close-modal {
        left: auto;
        right: 16px;
    }

    #market-location-modal #market-location-modal-title {
        padding: 0 48px;
    }

    #market-location-modal .market-location-modal-search .form-input {
        min-height: 72px;
        border-radius: 20px;
    }
}

@media (max-width: 480px) {
    #main-view .market-search-shell {
        gap: 7px !important;
        padding: 4px 10px !important;
        border-radius: 16px !important;
    }

    #main-view .market-location-trigger {
        gap: 6px;
        min-height: 36px;
        font-size: 12px;
    }

    #main-view .market-search-input-wrap .search-input {
        min-height: 36px !important;
        font-size: 12px !important;
    }

    #main-view .market-search-utility {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 2px;
    }

    #main-view .market-search-utility .btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    #market-location-modal .market-location-modal {
        min-height: min(76dvh, 590px);
    }

    #market-location-modal #market-location-modal-title {
        padding: 0 44px;
    }

    #market-location-modal .market-location-option {
        min-height: 54px;
        font-size: 17px;
    }
}

@media (max-width: 768px) {
    #main-view .search-area.market-search-shell {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        align-content: center !important;
    }

    #main-view .search-area.market-search-shell .market-location-trigger {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: max-content !important;
    }

    #main-view .search-area.market-search-shell .search-input-wrap.market-search-input-wrap {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        grid-column: auto !important;
    }

    #main-view .search-area.market-search-shell .search-input-wrap.market-search-input-wrap .search-input {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 768px) {
    #main-view {
        padding-top: 6px !important;
        padding-bottom: 12px !important;
        background:
            radial-gradient(circle at 14% 8%, rgba(173, 188, 255, 0.34), transparent 24%),
            radial-gradient(circle at 86% 6%, rgba(235, 240, 255, 0.92), transparent 20%),
            linear-gradient(180deg, #eef2ff 0%, #e8edff 32%, #f7f9ff 100%) !important;
    }

    #main-view .market-command-center {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    #main-view .market-search-utility {
        justify-content: flex-start !important;
    }

    #main-view .market-search-utility .btn {
        background: #ffffff !important;
        border: 1px solid rgba(219, 224, 235, 0.98) !important;
        color: #667085 !important;
        box-shadow: 0 10px 18px rgba(85, 96, 126, 0.08) !important;
    }

    #main-view .market-search-utility .btn i {
        color: #96a4c0 !important;
    }
}

/* Mobile white surface cleanup */
@media (max-width: 768px) {
    body:not(.dark-mode) {
        background: #ffffff !important;
        background-image: none !important;
        background-size: auto !important;
        animation: pageFadeIn 0.55s ease-out !important;
    }

    body:not(.dark-mode) .page-content,
    body:not(.dark-mode) #main-view {
        background: #ffffff !important;
    }

    body:not(.dark-mode) .modern-site-header {
        background: #ffffff !important;
        border-bottom: 1px solid rgba(223, 228, 237, 0.96) !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
    }

    body:not(.dark-mode) .modern-nav-link.is-active {
        background: #ffffff !important;
        color: #1e293b !important;
        border-color: rgba(203, 213, 225, 0.98) !important;
        box-shadow: 0 8px 16px rgba(15, 23, 42, 0.05) !important;
    }

    body:not(.dark-mode) footer.market-footer .market-footer-content {
        background: #ffffff !important;
        background-image: none !important;
        border-color: rgba(220, 224, 233, 0.98) !important;
        box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.05) !important;
    }

    body:not(.dark-mode) .mobile-bottom-nav {
        background: #ffffff !important;
        background-image: none !important;
        border-color: rgba(220, 224, 233, 0.98) !important;
        box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body:not(.dark-mode) .mobile-bottom-nav::before {
        background: rgba(255, 255, 255, 0.98) !important;
    }

    body:not(.dark-mode) .mobile-bottom-nav-item {
        color: #8b95a7 !important;
    }

    body:not(.dark-mode) .mobile-bottom-nav-item::before {
        background: #ffffff !important;
        border-color: rgba(226, 230, 238, 0.98) !important;
        box-shadow: 0 10px 20px rgba(148, 163, 184, 0.08) !important;
    }

    body:not(.dark-mode) .mobile-bottom-nav-icon {
        background: #ffffff !important;
        color: #7b8496 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 6px 14px rgba(148, 163, 184, 0.1) !important;
    }

    body:not(.dark-mode) .mobile-bottom-nav-item.is-active {
        color: #1f2937 !important;
    }

    body:not(.dark-mode) .mobile-bottom-nav-item.is-active::before {
        background: #ffffff !important;
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08) !important;
    }

    body:not(.dark-mode) .mobile-bottom-nav-item.is-active .mobile-bottom-nav-icon {
        background: #ffffff !important;
        color: #1f2937 !important;
        box-shadow: 0 12px 20px rgba(15, 23, 42, 0.08) !important;
        transform: translateY(-2px) scale(1.05);
    }

    body:not(.dark-mode) .mobile-bottom-nav-item.is-active .mobile-bottom-nav-label {
        color: #1f2937 !important;
    }

    body:not(.dark-mode) #main-view .market-search-utility .btn {
        box-shadow: 0 8px 16px rgba(15, 23, 42, 0.05) !important;
    }
}

/* PNGWing category browser */
#main-view #category-browser {
    display: block !important;
}

#category-browser {
    margin: 18px 0 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    animation: none !important;
}

#category-browser .category-browser-head {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#category-browser .category-browser-carousel-shell {
    position: relative;
}

#category-browser .category-browser-carousel {
    overflow: hidden;
}

#category-browser .category-browser-carousel-shell::before,
#category-browser .category-browser-carousel-shell::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 56px;
    z-index: 2;
    pointer-events: none;
}

#category-browser .category-browser-carousel-shell::before {
    left: 0;
    background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

#category-browser .category-browser-carousel-shell::after {
    right: 0;
    background: linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

#category-browser .category-browser-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(229, 231, 235, 0.98);
    border-radius: 999px;
    background: #ffffff;
    color: #5c6b83;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(-50%);
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, color 0.18s ease;
}

#category-browser .category-browser-nav.is-prev {
    left: 8px;
}

#category-browser .category-browser-nav.is-next {
    right: 8px;
}

#category-browser .category-browser-nav:hover {
    transform: translateY(-50%) scale(1.03);
    box-shadow: 0 20px 34px rgba(15, 23, 42, 0.16);
    color: #111827;
}

#category-browser .category-browser-nav.is-disabled,
#category-browser .category-browser-nav.is-hidden {
    opacity: 0;
    pointer-events: none;
}

#category-filters {
    direction: ltr !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: normal !important;
    padding: 10px 18px 10px !important;
    margin: 0 !important;
    scroll-snap-type: x proximity !important;
    scroll-padding-inline: 18px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#category-filters::-webkit-scrollbar {
    display: none;
}

#category-filters .category-browser-row {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    min-width: max-content;
}

#category-filters .chip {
    position: relative !important;
    width: 138px !important;
    min-width: 138px !important;
    min-height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    overflow: visible !important;
    text-align: center !important;
    color: #111827 !important;
    transform: none !important;
    scroll-snap-align: start;
    cursor: pointer;
}

#category-filters .chip::before,
#category-filters .chip::after {
    content: none !important;
    display: none !important;
}

#category-filters .chip:hover,
#category-filters .chip.active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    grid-column: auto !important;
}

#category-filters .category-card-visual {
    width: 122px;
    height: 122px;
    flex: 0 0 122px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

#category-filters .category-card-image-wrap {
    width: 100%;
    height: 100%;
    padding: 10px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.98) 28%, rgba(244, 246, 248, 0.98) 72%, rgba(239, 241, 244, 0.98) 100%);
    border: 1px solid rgba(231, 234, 238, 0.98);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 10px 22px rgba(15, 23, 42, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

#category-filters .category-card-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: scale(var(--category-image-scale, 1.08));
    transform-origin: center;
    filter: drop-shadow(0 10px 14px rgba(15, 23, 42, 0.08));
}

#category-filters .chip .chip-icon {
    font-size: 36px !important;
    color: #98a2b3 !important;
}

#category-filters .chip.has-image .chip-icon,
#category-filters .chip .chip-icon[hidden] {
    display: none !important;
}

#category-filters .chip.has-fallback-icon .chip-icon {
    width: 100%;
    height: 100%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 38px !important;
    color: #9aa6b8 !important;
}

#category-filters .category-card-label {
    width: 100%;
    min-height: 2.65em;
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    text-overflow: clip;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #111827;
}

#category-filters .chip:hover .category-card-image-wrap,
#category-filters .chip:focus-visible .category-card-image-wrap,
#category-filters .chip.active .category-card-image-wrap {
    transform: translateY(-2px);
    border-color: rgba(220, 223, 229, 0.98);
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 26%, rgba(244, 247, 249, 1) 72%, rgba(236, 239, 243, 1) 100%);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.08);
}

#category-filters .chip:focus-visible {
    outline: none;
}

#category-filters .chip:focus-visible .category-card-image-wrap {
    box-shadow: 0 0 0 3px rgba(209, 213, 219, 0.8), 0 16px 28px rgba(15, 23, 42, 0.08);
}

#category-filters .chip.active .category-card-label {
    color: #111827 !important;
}

#category-filters .chip[data-browser-key="shops"] {
    --category-image-scale: 1.24;
}

#category-filters .chip[data-browser-key="autos"] {
    --category-image-scale: 1.14;
}

#category-filters .chip[data-browser-key="motorcycles"] {
    --category-image-scale: 1.2;
}

#category-filters .chip[data-browser-key="property-sale"] {
    --category-image-scale: 1.18;
}

#category-filters .chip[data-browser-key="property-rent"] {
    --category-image-scale: 1.18;
}

#category-filters .chip[data-browser-key="services"] {
    --category-image-scale: 1.16;
}

#category-filters .chip[data-browser-key="businesses-equipment"] {
    --category-image-scale: 1.18;
}

#category-filters .chip[data-browser-key="phones-tablets"] {
    --category-image-scale: 1.16;
}

#category-filters .chip[data-browser-key="sports-fitness"] {
    --category-image-scale: 1.18;
}

#category-filters .chip[data-browser-key="jobs"] {
    --category-image-scale: 1.14;
}

#category-filters .chip[data-browser-key="job-seekers"] {
    --category-image-scale: 1.14;
}

#category-filters .chip[data-browser-key="education-training"] {
    --category-image-scale: 1.15;
}

@media (max-width: 1200px) {
    #category-filters {
        gap: 22px !important;
    }

    #category-filters .category-browser-row {
        gap: 16px;
    }

    #category-filters .chip {
        width: 126px !important;
        min-width: 126px !important;
    }

    #category-filters .category-card-visual {
        width: 112px;
        height: 112px;
        flex-basis: 112px;
    }
}

@media (max-width: 900px) {
    #category-browser .category-browser-carousel-shell::before,
    #category-browser .category-browser-carousel-shell::after,
    #category-browser .category-browser-nav {
        display: none !important;
    }

    #category-filters {
        gap: 18px !important;
        padding: 4px 6px 8px !important;
        scroll-padding-inline: 6px !important;
    }

    #category-filters .category-browser-row {
        gap: 14px;
    }

    #category-filters .chip {
        width: 106px !important;
        min-width: 106px !important;
        gap: 10px !important;
    }

    #category-filters .category-card-visual {
        width: 94px;
        height: 94px;
        flex-basis: 94px;
    }

    #category-filters .category-card-image-wrap {
        padding: 8px;
    }

    #category-filters .category-card-label {
        min-height: 2.5em;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    #category-browser {
        margin-top: 14px !important;
    }

    #category-filters {
        gap: 16px !important;
        padding-inline: 0 !important;
    }

    #category-filters .category-browser-row {
        gap: 12px;
    }

    #category-filters .chip {
        width: 96px !important;
        min-width: 96px !important;
        gap: 9px !important;
    }

    #category-filters .category-card-visual {
        width: 84px;
        height: 84px;
        flex-basis: 84px;
    }

    #category-filters .category-card-image-wrap {
        padding: 7px;
    }

    #category-filters .category-card-label {
        min-height: 2.45em;
        font-size: 12px;
    }
}

body.seller-profile-preview-mode #main-view #category-sponsor-banner {
    display: none !important;
}

#category-sponsor-banner {
    margin: 6px 0 28px !important;
}

#category-sponsor-banner .category-sponsor-banner-shell {
    display: grid;
    gap: 14px;
}

#category-sponsor-banner .category-sponsor-card {
    position: relative;
    min-height: 188px;
    padding: 18px;
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(188, 214, 233, 0.88);
    background:
        linear-gradient(112deg, rgba(183, 224, 255, 0.24) 0%, rgba(17, 56, 87, 0.16) 38%, rgba(7, 19, 34, 0.95) 100%),
        radial-gradient(circle at 18% 28%, rgba(193, 236, 255, 0.95) 0%, rgba(193, 236, 255, 0.16) 26%, rgba(193, 236, 255, 0) 54%),
        linear-gradient(118deg, #8dc1e4 0%, #2d5b82 44%, #0c2337 78%, #08131f 100%);
    box-shadow: 0 22px 38px rgba(15, 23, 42, 0.12);
    display: grid;
    grid-template-columns: minmax(164px, 38%) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
    direction: ltr;
}

#category-sponsor-banner .category-sponsor-card.is-empty {
    min-height: auto;
    display: block;
    padding: 24px 28px;
    direction: inherit;
    background:
        linear-gradient(135deg, rgba(219, 234, 254, 0.9) 0%, rgba(239, 246, 255, 0.98) 100%);
    border-color: rgba(191, 219, 254, 0.98);
}

#category-sponsor-banner .category-sponsor-card.is-empty .category-sponsor-content {
    width: min(100%, 760px);
    color: #0f172a;
}

#category-sponsor-banner .category-sponsor-card.is-empty .category-sponsor-eyebrow {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.18);
    color: #1d4ed8;
}

#category-sponsor-banner .category-sponsor-card.is-empty .category-sponsor-title {
    color: #0f172a;
}

#category-sponsor-banner .category-sponsor-card.is-empty .category-sponsor-text {
    color: #475569;
}

#category-sponsor-banner .category-sponsor-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 82px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0 2px, transparent 2px 70px);
    opacity: 0.22;
    transform: perspective(500px) rotateX(72deg) translateY(-48%);
    transform-origin: top center;
    pointer-events: none;
}

#category-sponsor-banner .category-sponsor-media {
    position: relative;
    min-height: 152px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 18px 28px rgba(7, 19, 34, 0.14);
}

#category-sponsor-banner .category-sponsor-scene {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

#category-sponsor-banner .category-sponsor-glow,
#category-sponsor-banner .category-sponsor-frost,
#category-sponsor-banner .category-sponsor-floor {
    position: absolute;
    display: block;
}

#category-sponsor-banner .category-sponsor-glow {
    border-radius: 999px;
    filter: blur(4px);
}

#category-sponsor-banner .category-sponsor-glow.is-one {
    left: 12px;
    bottom: 12px;
    width: 72%;
    height: 42%;
    background: radial-gradient(circle, rgba(222, 244, 255, 0.92) 0%, rgba(222, 244, 255, 0.4) 34%, rgba(222, 244, 255, 0) 76%);
}

#category-sponsor-banner .category-sponsor-glow.is-two {
    left: 46%;
    top: 12px;
    width: 46%;
    height: 52%;
    background: radial-gradient(circle, rgba(148, 216, 255, 0.46) 0%, rgba(148, 216, 255, 0.16) 44%, rgba(148, 216, 255, 0) 74%);
}

#category-sponsor-banner .category-sponsor-frost {
    left: 0;
    right: 0;
    bottom: 0;
    height: 52%;
    background:
        radial-gradient(circle at 22% 40%, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.22) 34%, rgba(255, 255, 255, 0) 78%),
        linear-gradient(180deg, rgba(201, 232, 255, 0) 0%, rgba(201, 232, 255, 0.5) 72%, rgba(243, 250, 255, 0.88) 100%);
    opacity: 0.96;
}

#category-sponsor-banner .category-sponsor-floor {
    left: 0;
    right: 0;
    bottom: -8px;
    height: 34%;
    background: linear-gradient(180deg, rgba(208, 233, 250, 0) 0%, rgba(208, 233, 250, 0.18) 45%, rgba(223, 240, 250, 0.42) 100%);
}

#category-sponsor-banner .category-sponsor-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 12px 10px 0;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 18px 28px rgba(10, 30, 48, 0.28));
}

#category-sponsor-banner .category-sponsor-media.is-placeholder {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%),
        radial-gradient(circle at 18% 18%, var(--category-sponsor-accent-soft, rgba(140, 224, 255, 0.18)) 0%, rgba(255, 255, 255, 0) 72%);
}

#category-sponsor-banner .category-sponsor-image-placeholder {
    position: absolute;
    inset: 14px;
    display: block;
    border-radius: 22px;
    overflow: hidden;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 58%, rgba(255, 255, 255, 0.08)),
        linear-gradient(135deg, var(--category-sponsor-surface, rgba(141, 193, 228, 0.12)), var(--category-sponsor-surface-strong, rgba(8, 19, 31, 0.72)));
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 16px 30px rgba(7, 19, 34, 0.18);
}

#category-sponsor-banner .category-sponsor-placeholder-panel,
#category-sponsor-banner .category-sponsor-placeholder-sheen,
#category-sponsor-banner .category-sponsor-placeholder-orb {
    position: absolute;
    display: block;
    pointer-events: none;
}

#category-sponsor-banner .category-sponsor-placeholder-panel {
    inset: 12px;
    border-radius: 18px;
    border: 1px solid var(--category-sponsor-accent-faint, rgba(140, 224, 255, 0.18));
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 52%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 48px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 42px);
    opacity: 0.95;
}

#category-sponsor-banner .category-sponsor-placeholder-sheen {
    inset: -14% auto auto 42%;
    width: 68%;
    height: 70%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
    transform: rotate(18deg);
    opacity: 0.82;
}

#category-sponsor-banner .category-sponsor-placeholder-orb {
    border-radius: 999px;
    filter: blur(5px);
}

#category-sponsor-banner .category-sponsor-placeholder-orb.is-one {
    left: 10px;
    top: 10px;
    width: 62px;
    height: 62px;
    background: radial-gradient(circle, var(--category-sponsor-accent-soft, rgba(140, 224, 255, 0.26)) 0%, rgba(255, 255, 255, 0.06) 62%, rgba(255, 255, 255, 0) 100%);
}

#category-sponsor-banner .category-sponsor-placeholder-orb.is-two {
    right: 12px;
    bottom: 10px;
    width: 82px;
    height: 50px;
    background: radial-gradient(circle, var(--category-sponsor-accent-faint, rgba(140, 224, 255, 0.16)) 0%, rgba(255, 255, 255, 0) 78%);
}

#category-sponsor-banner .category-sponsor-placeholder-copy {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: calc(100% - 24px);
    padding: 8px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(8, 19, 31, 0.16), rgba(8, 19, 31, 0.48));
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 24px rgba(7, 19, 34, 0.18);
}

#category-sponsor-banner .category-sponsor-placeholder-copy i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--category-sponsor-accent-soft, rgba(140, 224, 255, 0.18));
    border: 1px solid var(--category-sponsor-accent-faint, rgba(140, 224, 255, 0.16));
    font-size: 12px;
}

#category-sponsor-banner .category-sponsor-placeholder-copy span {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#category-sponsor-banner .category-sponsor-content {
    position: relative;
    z-index: 1;
    width: auto;
    min-width: 0;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
    color: #ffffff;
}

#category-sponsor-banner .category-sponsor-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(141, 223, 255, 0.18);
    border: 1px solid rgba(141, 223, 255, 0.28);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #d8f6ff;
}

#category-sponsor-banner .category-sponsor-title {
    margin: 0;
    font-size: 35px;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: #8ce0ff;
}

#category-sponsor-banner .category-sponsor-text {
    margin: 8px 0 16px;
    font-size: 20px;
    line-height: 1.3;
    color: rgba(241, 248, 255, 0.92);
}

#category-sponsor-banner .category-sponsor-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    background: #64ddff;
    color: #0b2842;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 14px 26px rgba(100, 221, 255, 0.22);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

#category-sponsor-banner .category-sponsor-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.07);
    box-shadow: var(--category-sponsor-cta-shadow-hover, 0 18px 30px rgba(100, 221, 255, 0.28));
}

#category-sponsor-banner .category-sponsor-cta:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

#category-sponsor-banner .category-sponsor-cta:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.95);
    outline-offset: 3px;
}

@media (max-width: 900px) {
    #category-sponsor-banner {
        margin: 4px 0 24px !important;
    }

    #category-sponsor-banner .category-sponsor-card {
        min-height: 172px;
        grid-template-columns: minmax(144px, 36%) minmax(0, 1fr);
        gap: 16px;
        padding: 16px;
        border-radius: 24px;
    }

    #category-sponsor-banner .category-sponsor-media {
        min-height: 136px;
        border-radius: 22px;
    }

    #category-sponsor-banner .category-sponsor-image {
        padding: 10px 8px 0;
    }

    #category-sponsor-banner .category-sponsor-image-placeholder {
        inset: 12px;
        border-radius: 20px;
    }

    #category-sponsor-banner .category-sponsor-placeholder-panel {
        inset: 10px;
        border-radius: 16px;
    }

    #category-sponsor-banner .category-sponsor-placeholder-copy {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 7px 11px;
    }

    #category-sponsor-banner .category-sponsor-placeholder-copy span {
        font-size: 10px;
    }

    #category-sponsor-banner .category-sponsor-content {
        width: auto;
    }

    #category-sponsor-banner .category-sponsor-title {
        font-size: 26px;
    }

    #category-sponsor-banner .category-sponsor-text {
        margin-bottom: 14px;
        font-size: 15px;
    }
}

@media (max-width: 640px) {
    #category-sponsor-banner .category-sponsor-card {
        min-height: 158px;
        grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);
        gap: 14px;
        padding: 14px;
        border-radius: 22px;
    }

    #category-sponsor-banner .category-sponsor-card::before {
        opacity: 0.14;
    }

    #category-sponsor-banner .category-sponsor-glow.is-one {
        left: 8px;
        bottom: 8px;
        width: 74%;
        height: 38%;
    }

    #category-sponsor-banner .category-sponsor-glow.is-two {
        left: 42%;
        top: 8px;
        width: 50%;
        height: 48%;
    }

    #category-sponsor-banner .category-sponsor-media {
        min-height: 128px;
        border-radius: 18px;
    }

    #category-sponsor-banner .category-sponsor-image {
        padding: 8px 6px 0;
    }

    #category-sponsor-banner .category-sponsor-image-placeholder {
        inset: 10px;
        border-radius: 16px;
    }

    #category-sponsor-banner .category-sponsor-placeholder-panel {
        inset: 8px;
        border-radius: 13px;
    }

    #category-sponsor-banner .category-sponsor-placeholder-orb.is-one {
        width: 48px;
        height: 48px;
    }

    #category-sponsor-banner .category-sponsor-placeholder-orb.is-two {
        width: 62px;
        height: 40px;
    }

    #category-sponsor-banner .category-sponsor-placeholder-copy {
        left: 8px;
        right: 8px;
        bottom: 8px;
        gap: 6px;
        padding: 6px 9px;
    }

    #category-sponsor-banner .category-sponsor-placeholder-copy i {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }

    #category-sponsor-banner .category-sponsor-placeholder-copy span {
        font-size: 9px;
    }

    #category-sponsor-banner .category-sponsor-content {
        width: auto;
    }

    #category-sponsor-banner .category-sponsor-eyebrow {
        margin-bottom: 8px;
        padding: 5px 9px;
        font-size: 9px;
    }

    #category-sponsor-banner .category-sponsor-title {
        font-size: 17px;
    }

    #category-sponsor-banner .category-sponsor-text {
        margin: 6px 0 12px;
        font-size: 12px;
    }

    #category-sponsor-banner .category-sponsor-cta {
        gap: 6px;
        padding: 7px 12px;
        font-size: 11px;
    }
}

.market-empty-state {
    grid-column: 1 / -1;
    padding: 40px 18px;
    text-align: center;
    color: gray;
}

.market-empty-state p {
    margin: 0;
    font-weight: 700;
}

.market-empty-hint {
    margin-top: 8px;
    font-size: 12px;
}

body.category-page-mode .category-page-banner {
    margin: 6px 0 12px;
}

body.category-page-mode .category-page-banner-shell {
    gap: 10px;
    padding: 14px 16px;
}

body.category-page-mode #main-view .market-command-center {
    margin-top: 8px !important;
}

body.category-page-mode #main-view .search-area {
    margin-bottom: 0 !important;
}

body.category-page-mode #main-view .advanced-filters {
    margin-top: 8px !important;
}

body.category-page-mode #products-grid.products {
    gap: 10px !important;
    align-items: start;
}

body.category-page-mode #products-grid.products .card {
    border-radius: 20px;
    box-shadow: 0 12px 22px rgba(31, 41, 55, 0.1);
}

body.category-page-mode #products-grid.products .card-img {
    height: clamp(120px, 21vw, 150px);
}

body.category-page-mode #products-grid.products .card-body {
    display: grid;
    gap: 6px;
    padding: 10px 11px;
}

body.category-page-mode #products-grid.products .card-title {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.35;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.35em * 2);
}

body.category-page-mode #products-grid.products .card-seller {
    gap: 6px;
    margin: 0;
    align-items: center;
}

body.category-page-mode #products-grid.products .card-seller-avatar {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
}

body.category-page-mode #products-grid.products .card-seller-name {
    font-size: 11px;
}

body.category-page-mode #products-grid.products .card-seller-badges {
    display: inline-flex;
    width: 100%;
    gap: 4px;
}

body.category-page-mode #products-grid.products .card-price {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
}

body.category-page-mode #products-grid.products .card-price-label {
    font-size: 10px;
}

body.category-page-mode #products-grid.products .card-old-price {
    font-size: 11px;
}

body.category-page-mode #products-grid.products .sell-mode-prices {
    gap: 2px;
}

body.category-page-mode #products-grid.products .sell-mode-price-line,
body.category-page-mode #products-grid.products .auction-time-note,
body.category-page-mode #products-grid.products .auction-live-meta,
body.category-page-mode #products-grid.products .card-location {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
}

body.category-page-mode #products-grid.products .card-car-specs {
    gap: 4px;
    margin: 0;
}

body.category-page-mode #products-grid.products .card-car-spec-chip {
    padding: 3px 6px;
    font-size: 10px;
}

body.category-page-mode #products-grid.products .card-meta,
body.category-page-mode #products-grid.products .card-quick-info {
    display: none;
}

body.category-page-mode #products-grid.products .card-actions,
body.category-page-mode #products-grid.products .card-actions-listing {
    gap: 5px;
    margin-top: 2px;
}

body.category-page-mode #products-grid.products .card-actions .btn,
body.category-page-mode #products-grid.products .card-actions a.btn {
    min-height: 36px;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 11px;
}

body.category-page-mode #products-grid.products .card-actions .btn-whatsapp-primary {
    min-height: 38px;
    padding: 7px 9px;
    box-shadow: 0 8px 16px rgba(16, 138, 63, 0.2);
}

body.category-page-mode .market-empty-state {
    padding: 20px 12px 28px;
}

@media (max-width: 768px) {
    body.category-page-mode .category-page-banner-shell {
        padding: 12px 14px;
    }

    body.category-page-mode .category-page-title {
        font-size: 22px;
    }

    body.category-page-mode .category-page-subtitle {
        display: none;
    }

    body.category-page-mode #main-view .market-search-shell {
        gap: 6px !important;
        padding: 2px 10px !important;
    }

    body.category-page-mode #products-grid.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.category-page-mode #products-grid.products .card {
        border-radius: 18px;
    }

    body.category-page-mode #products-grid.products .card-img {
        height: clamp(114px, 33vw, 142px);
    }

    body.category-page-mode #products-grid.products .card-body {
        gap: 5px;
        padding: 9px 9px 10px;
    }

    body.category-page-mode #products-grid.products .card-location {
        display: flex;
    }
}

/* Product cards list-view override */
.products,
#products-grid.products,
#auctions-grid.products,
#community-products-grid.products,
#my-products-grid.products {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
}

.products .card,
#products-grid.products .card,
#community-products-grid.products .card,
#my-products-grid.products .card,
#auctions-grid.products .card,
body.category-page-mode #products-grid.products .card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-height: 124px;
    padding: 12px;
    direction: rtl;
    border-radius: 22px;
}

.products .card-img,
#products-grid.products .card-img,
#community-products-grid.products .card-img,
#my-products-grid.products .card-img,
#auctions-grid.products .card-img,
body.category-page-mode #products-grid.products .card-img {
    width: 100px;
    height: 100px;
    flex: 0 0 100px;
    border-radius: 18px;
    margin: 0;
    object-fit: cover;
}

.products .card-media-shell,
#products-grid.products .card-media-shell,
#community-products-grid.products .card-media-shell,
#my-products-grid.products .card-media-shell,
#auctions-grid.products .card-media-shell,
body.category-page-mode #products-grid.products .card-media-shell {
    flex: 0 0 100px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.products .card-body,
#products-grid.products .card-body,
#community-products-grid.products .card-body,
#my-products-grid.products .card-body,
#auctions-grid.products .card-body,
body.category-page-mode #products-grid.products .card-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    text-align: right;
}

.products .card-title,
#products-grid.products .card-title,
#community-products-grid.products .card-title,
#my-products-grid.products .card-title,
#auctions-grid.products .card-title,
body.category-page-mode #products-grid.products .card-title {
    min-height: 0;
    width: 100%;
    font-size: 18px;
    line-height: 1.4;
    text-align: right;
}

.products .card-location-time,
#products-grid.products .card-location-time,
#community-products-grid.products .card-location-time,
#my-products-grid.products .card-location-time,
#auctions-grid.products .card-location-time,
body.category-page-mode #products-grid.products .card-location-time {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 12px;
}

.products .card-location,
.products .card-time,
#products-grid.products .card-location,
#products-grid.products .card-time,
#community-products-grid.products .card-location,
#community-products-grid.products .card-time,
#my-products-grid.products .card-location,
#my-products-grid.products .card-time,
#auctions-grid.products .card-location,
#auctions-grid.products .card-time,
body.category-page-mode #products-grid.products .card-location,
body.category-page-mode #products-grid.products .card-time {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    white-space: nowrap;
}

.products .card-location,
#products-grid.products .card-location,
#community-products-grid.products .card-location,
#my-products-grid.products .card-location,
#auctions-grid.products .card-location,
body.category-page-mode #products-grid.products .card-location {
    font-size: 15px;
    max-width: 100%;
    min-width: 0;
}

.products .card-location span,
#products-grid.products .card-location span,
#community-products-grid.products .card-location span,
#my-products-grid.products .card-location span,
#auctions-grid.products .card-location span,
body.category-page-mode #products-grid.products .card-location span {
    min-width: 0;
    white-space: normal;
}

.products .card-time span,
#products-grid.products .card-time span,
#community-products-grid.products .card-time span,
#my-products-grid.products .card-time span,
#auctions-grid.products .card-time span,
body.category-page-mode #products-grid.products .card-time span {
    white-space: nowrap;
}

.products .card-price-stack,
#products-grid.products .card-price-stack,
#community-products-grid.products .card-price-stack,
#my-products-grid.products .card-price-stack,
#auctions-grid.products .card-price-stack,
body.category-page-mode #products-grid.products .card-price-stack {
    width: 100%;
    gap: 4px;
    align-items: flex-end;
}

.products .card-price,
.products .sell-mode-prices,
#products-grid.products .card-price,
#products-grid.products .sell-mode-prices,
#community-products-grid.products .card-price,
#community-products-grid.products .sell-mode-prices,
#my-products-grid.products .card-price,
#my-products-grid.products .sell-mode-prices,
#auctions-grid.products .card-price,
#auctions-grid.products .sell-mode-prices,
body.category-page-mode #products-grid.products .card-price,
body.category-page-mode #products-grid.products .sell-mode-prices {
    width: 100%;
    justify-content: flex-end;
    text-align: right;
}

.products .card-price,
#products-grid.products .card-price,
#community-products-grid.products .card-price,
#my-products-grid.products .card-price,
#auctions-grid.products .card-price,
body.category-page-mode #products-grid.products .card-price {
    font-size: 20px;
}

.products .card-price.has-label,
#products-grid.products .card-price.has-label,
#community-products-grid.products .card-price.has-label,
#my-products-grid.products .card-price.has-label,
#auctions-grid.products .card-price.has-label,
body.category-page-mode #products-grid.products .card-price.has-label {
    justify-items: end;
}

.products .sell-mode-price-line,
#products-grid.products .sell-mode-price-line,
#community-products-grid.products .sell-mode-price-line,
#my-products-grid.products .sell-mode-price-line,
#auctions-grid.products .sell-mode-price-line,
body.category-page-mode #products-grid.products .sell-mode-price-line {
    justify-content: flex-end;
    gap: 6px;
}

.products .market-empty-hint,
#products-grid.products .market-empty-hint,
#community-products-grid.products .market-empty-hint,
#my-products-grid.products .market-empty-hint,
#auctions-grid.products .market-empty-hint,
body.category-page-mode #products-grid.products .market-empty-hint {
    width: 100%;
    margin: 0 !important;
    text-align: right;
}

@media (max-width: 768px) {
    .products,
    #products-grid.products,
    #auctions-grid.products,
    #community-products-grid.products,
    #my-products-grid.products,
    body.category-page-mode #products-grid.products {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    .products .card,
    #products-grid.products .card,
    #community-products-grid.products .card,
    #my-products-grid.products .card,
    #auctions-grid.products .card,
    body.category-page-mode #products-grid.products .card {
        gap: 12px;
        min-height: 116px;
        padding: 10px;
        border-radius: 20px;
    }

    .products .card-img,
    #products-grid.products .card-img,
    #community-products-grid.products .card-img,
    #my-products-grid.products .card-img,
    #auctions-grid.products .card-img,
    body.category-page-mode #products-grid.products .card-img {
        width: 92px;
        height: 92px;
        flex-basis: 92px;
        border-radius: 16px;
    }

    .products .card-media-shell,
    #products-grid.products .card-media-shell,
    #community-products-grid.products .card-media-shell,
    #my-products-grid.products .card-media-shell,
    #auctions-grid.products .card-media-shell,
    body.category-page-mode #products-grid.products .card-media-shell {
        width: 92px;
        flex-basis: 92px;
    }

    .products .card-title,
    #products-grid.products .card-title,
    #community-products-grid.products .card-title,
    #my-products-grid.products .card-title,
    #auctions-grid.products .card-title,
    body.category-page-mode #products-grid.products .card-title {
        font-size: 16px;
        min-height: 0;
    }

    .products .card-location,
    #products-grid.products .card-location,
    #community-products-grid.products .card-location,
    #my-products-grid.products .card-location,
    #auctions-grid.products .card-location,
    body.category-page-mode #products-grid.products .card-location {
        font-size: 14px;
    }

    .products .card-time,
    #products-grid.products .card-time,
    #community-products-grid.products .card-time,
    #my-products-grid.products .card-time,
    #auctions-grid.products .card-time,
    body.category-page-mode #products-grid.products .card-time {
        font-size: 12px;
    }

    .products .card-price,
    #products-grid.products .card-price,
    #community-products-grid.products .card-price,
    #my-products-grid.products .card-price,
    #auctions-grid.products .card-price,
    body.category-page-mode #products-grid.products .card-price {
        font-size: 18px;
    }
}