/* DUNO 360 - core site styles.
   Extracted verbatim from public/base.html so this payload is cached
   across page views instead of being inlined into every response.
   Loaded in <head> ahead of the per-page extra_css block, preserving the exact
   cascade order it had inline. */
/* ========== MODERN DESIGN TOKENS ========== */
        :root {
            /* Brand */
            --brand-primary: #1d4ed8;
            --brand-secondary: #14245f;
            --brand-gradient: linear-gradient(135deg, #14245f 0%, #1d4ed8 100%);
            --brand-gradient-soft: linear-gradient(135deg, rgba(20,36,95,0.10) 0%, rgba(29,78,216,0.12) 100%);
            --accent: #2563eb;
            --success: #27ae60;
            --warning: #f39c12;

            /* Surfaces */
            --bg-page: #f8fafc;
            --bg-surface: #ffffff;
            --bg-elevated: #ffffff;
            --bg-overlay: rgba(15, 23, 42, 0.45);

            /* Text */
            --text-primary: #0f172a;
            --text-secondary: #475569;
            --text-tertiary: #94a3b8;
            --text-inverse: #ffffff;

            /* Borders */
            --border-subtle: rgba(0,0,0,0.04);
            --border-default: rgba(0,0,0,0.08);
            --border-strong: rgba(0,0,0,0.12);

            /* Interactive */
            --input-bg: #ffffff;
            --input-border: #e2e8f0;
            --input-focus: #1d4ed8;
            --button-hover: rgba(29,78,216,0.08);

            /* Shadows */
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
            --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
            --shadow-lg: 0 10px 40px rgba(0,0,0,0.08);

            /* Footer */
            --footer-bg: #1a1a2e;
            --footer-secondary: #16213e;
            --footer-accent: #0f3460;

            /* Legacy aliases (for backward compat with page-specific CSS) */
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --accent-color: #e74c3c;
            --success-color: #27ae60;
            --warning-color: #f39c12;
            --light-bg: #ecf0f1;
            --dark-text: #2c3e50;
            --body-bg: #f8fafc;
            --card-bg: #ffffff;
            --card-border: rgba(0,0,0,0.04);
            --input-bg: #ffffff;
            --input-border: #e0e0e0;
            --muted-text: #6c757d;
            --section-bg: #f8f9fa;

            /* Native UI */
            color-scheme: light;
        }

        /* ========== DARK MODE ========== */
        html[data-theme="dark"] {
            color-scheme: dark;

            /* Surfaces */
            --bg-page: #020617;
            --bg-surface: #0f172a;
            --bg-elevated: #1e293b;
            --bg-overlay: rgba(0, 0, 0, 0.6);

            /* Text */
            --text-primary: #f1f5f9;
            --text-secondary: #cbd5e1;
            --text-tertiary: #94a3b8;
            --text-inverse: #0f172a;

            /* Borders */
            --border-subtle: rgba(255,255,255,0.04);
            --border-default: rgba(255,255,255,0.06);
            --border-strong: rgba(255,255,255,0.1);

            /* Interactive */
            --input-bg: #1e293b;
            --input-border: #334155;
            --input-focus: #818cf8;
            --button-hover: rgba(129,140,248,0.1);

            /* Shadows */
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
            --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
            --shadow-lg: 0 10px 40px rgba(0,0,0,0.5);

            /* Footer */
            --footer-bg: #020617;
            --footer-secondary: #0f172a;
            --footer-accent: #1e293b;

            /* Legacy aliases */
            --body-bg: #020617;
            --card-bg: #1e293b;
            --card-border: rgba(255,255,255,0.06);
            --dark-text: #f1f5f9;
            --light-bg: #1e293b;
            --input-bg: #1e293b;
            --input-border: #334155;
            --muted-text: #94a3b8;
            --section-bg: #0f172a;
        }

        /* NOTE: OS dark mode preference is handled by JS on first load;
           do NOT use @media (prefers-color-scheme: dark) here because it
           would override the user's manual toggle when data-theme is removed. */

        /* Smooth transitions for ALL color changes */
        *, *::before, *::after {
            transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
        }
        /* Disable transition on page load to prevent flash */
        .no-theme-transition, .no-theme-transition * {
            transition: none !important;
        }

        /* Base body */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            background: var(--bg-page);
            color: var(--text-primary);
        }
        html[data-theme="dark"] body {
            background: var(--bg-page);
            color: var(--text-primary);
        }

        /* Global premium form effects */
        .platform-form-surface,
        form:not(.m-0):not(.d-inline):not(.d-inline-block):not(.ajax-exempt-form) {
            position: relative;
        }
        .platform-form-card,
        .content-card,
        .form-card,
        .vendor-form-card,
        .vp-card,
        .toolbar {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(29,78,216,0.10);
            box-shadow: 0 18px 48px rgba(29,78,216,0.08), 0 6px 18px rgba(15,23,42,0.05);
            backdrop-filter: blur(10px);
        }
        .platform-form-card::before,
        .content-card::before,
        .form-card::before,
        .vendor-form-card::before,
        .vp-card::before,
        .toolbar::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 38%, transparent 62%, rgba(20,36,95,0.06));
        }
        .platform-form-card::after,
        .content-card::after,
        .form-card::after,
        .vendor-form-card::after,
        .vp-card::after,
        .toolbar::after {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: inherit;
            pointer-events: none;
            border: 1px solid rgba(255,255,255,0.28);
            opacity: 0.55;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            padding: 1px;
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }
        .form-control, .form-select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="tel"], input[type="search"] {
            border-radius: 14px !important;
            border: 1.5px solid rgba(29,78,216,0.14) !important;
            background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.92)) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 1px 2px rgba(15,23,42,0.03);
            min-height: 46px;
            transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
        }
        textarea.form-control { min-height: 120px; }
        .form-control:hover, .form-select:hover, textarea:hover {
            border-color: rgba(29,78,216,0.24) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 6px 18px rgba(29,78,216,0.08);
        }
        .form-control:focus, .form-select:focus, textarea:focus {
            border-color: rgba(29,78,216,0.65) !important;
            box-shadow: 0 0 0 4px rgba(29,78,216,0.14), 0 16px 30px rgba(29,78,216,0.10) !important;
            transform: translateY(-1px);
            background: linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,0.96)) !important;
        }
        .input-group-text {
            border-radius: 14px !important;
            border: 1.5px solid rgba(29,78,216,0.14) !important;
            background: linear-gradient(135deg, rgba(29,78,216,0.10), rgba(20,36,95,0.08)) !important;
            color: var(--text-secondary);
            font-weight: 700;
        }
        .btn, button[type="submit"], input[type="submit"] {
            position: relative;
            overflow: hidden;
        }
        .btn-primary, .btn-primary-gradient, .btn-submit, .btn-primary-modern {
            box-shadow: 0 10px 25px rgba(29,78,216,0.22);
        }
        .btn-primary:hover, .btn-primary-gradient:hover, .btn-submit:hover, .btn-primary-modern:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 32px rgba(29,78,216,0.28);
        }
        .page-header-card, .mv-page-header-card, .vp-page-head, .header-card {
            position: relative;
            overflow: hidden;
        }
        .page-header-card::before, .mv-page-header-card::before, .vp-page-head::before, .header-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top left, rgba(255,255,255,0.20), transparent 32%), radial-gradient(circle at bottom right, rgba(255,255,255,0.10), transparent 28%);
            pointer-events: none;
        }
        html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] textarea {
            background: linear-gradient(180deg, rgba(30,41,59,0.92), rgba(15,23,42,0.96)) !important;
            border-color: rgba(129,140,248,0.20) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 2px rgba(0,0,0,0.18);
        }
        html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus, html[data-theme="dark"] textarea:focus {
            border-color: rgba(129,140,248,0.72) !important;
            box-shadow: 0 0 0 4px rgba(129,140,248,0.18), 0 14px 26px rgba(79,70,229,0.14) !important;
            background: linear-gradient(180deg, rgba(30,41,59,0.98), rgba(15,23,42,1)) !important;
        }
        html[data-theme="dark"] .platform-form-card,
        html[data-theme="dark"] .content-card,
        html[data-theme="dark"] .form-card,
        html[data-theme="dark"] .vendor-form-card,
        html[data-theme="dark"] .vp-card,
        html[data-theme="dark"] .toolbar {
            border-color: rgba(129,140,248,0.12);
            box-shadow: 0 20px 54px rgba(0,0,0,0.32), 0 10px 28px rgba(79,70,229,0.10);
        }

        /* Component overrides */
        html[data-theme="dark"] .card, html[data-theme="dark"] .card-modern {
            background: var(--bg-surface) !important;
            border-color: var(--border-subtle) !important;
            color: var(--text-primary);
        }
        html[data-theme="dark"] .bg-light, html[data-theme="dark"] .bg-white {
            background: var(--bg-surface) !important;
        }
        html[data-theme="dark"] .text-dark, html[data-theme="dark"] .text-muted {
            color: var(--text-secondary) !important;
        }
        html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
        html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 {
            color: var(--text-primary);
        }
        html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select {
            background: var(--input-bg);
            border-color: var(--input-border);
            color: var(--text-primary);
        }
        html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus {
            background: var(--input-bg);
            color: var(--text-primary);
            box-shadow: 0 0 0 3px rgba(29,78,216,0.15);
        }
        /* Native <option> popups aren't covered by the .form-select/.form-control
           rules above — color-scheme:dark alone isn't consistently honored by
           every browser for the dropdown's own list, so every select's options
           explicitly get the dark palette too (Chrome/Edge do respect
           background-color/color set directly on <option>). Without this the
           popup falls back to a plain white list with barely-visible text. */
        html[data-theme="dark"] select option,
        html[data-theme="dark"] .form-select option,
        html[data-theme="dark"] .form-control option,
        html[data-theme="dark"] .auth-field option {
            background-color: var(--input-bg);
            color: var(--text-primary);
        }
        html[data-theme="dark"] select option:checked,
        html[data-theme="dark"] select option:hover {
            background-color: var(--button-hover);
        }
        html[data-theme="dark"] .dropdown-menu {
            background: var(--bg-elevated);
            border-color: var(--border-default);
            box-shadow: var(--shadow-lg);
        }
        html[data-theme="dark"] .dropdown-item {
            color: var(--text-primary);
        }
        html[data-theme="dark"] .dropdown-item:hover {
            background: var(--button-hover);
        }
        .navbar .dropdown-item {
            transition: all 0.2s ease;
        }
        .navbar .dropdown-item:hover {
            background: linear-gradient(135deg, rgba(29,78,216,0.1), rgba(20,36,95,0.1));
            transform: translateX(4px);
        }
        .navbar .dropdown-menu {
            animation: dropdownFadeIn 0.2s ease;
        }
        @keyframes dropdownFadeIn {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        html[data-theme="dark"] .stats-card {
            background: var(--bg-surface);
        }
        html[data-theme="dark"] .table { color: var(--text-primary); }
        html[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>* {
            color: var(--text-primary);
            background-color: rgba(255,255,255,0.02);
        }
        html[data-theme="dark"] .modal-content {
            background: var(--bg-elevated);
            color: var(--text-primary);
            border-color: var(--border-default);
        }
        html[data-theme="dark"] .g-modal-card, html[data-theme="dark"] .wechat-modal-card {
            background: var(--bg-elevated);
        }
        html[data-theme="dark"] .g-modal-title { color: var(--text-primary); }
        html[data-theme="dark"] .g-modal-text { color: var(--text-secondary); }
        html[data-theme="dark"] .g-modal-btn-cancel { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-default); }
        html[data-theme="dark"] .search-box {
            background: var(--input-bg);
            border-color: var(--input-border);
            color: var(--text-primary);
        }
        html[data-theme="dark"] .footer {
            background: linear-gradient(135deg, var(--footer-bg) 0%, var(--footer-secondary) 50%, var(--footer-accent) 100%);
        }

        /* Modern Theme Toggle */
        .theme-toggle {
            width: 42px; height: 42px;
            background: rgba(255,255,255,0.12);
            border: 1px solid rgba(255,255,255,0.25);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 1.15rem;
            cursor: pointer;
            backdrop-filter: blur(10px);
            position: relative;
            overflow: hidden;
            transition: box-shadow 0.4s ease, transform 0.3s ease, border-color 0.4s ease;
        }
        .theme-toggle::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            opacity: 0;
            transition: opacity 0.4s ease;
            border-radius: 50%;
        }
        .theme-toggle:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 4px 20px rgba(251,191,36,0.4);
        }
        .theme-toggle:hover::before { opacity: 1; }
        .theme-toggle:active { transform: scale(0.92); }

        /* Dual icon system for smooth morph */
        .theme-toggle .theme-icon {
            position: absolute;
            z-index: 1;
            transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.4s ease;
        }
        .theme-toggle .theme-icon-sun {
            opacity: 0;
            transform: rotate(-90deg) scale(0.4);
        }
        .theme-toggle .theme-icon-moon {
            opacity: 1;
            transform: rotate(0deg) scale(1);
        }

        /* Dark mode active state: sun visible, moon hidden */
        html[data-theme="dark"] .theme-toggle .theme-icon-sun {
            opacity: 1;
            transform: rotate(0deg) scale(1);
        }
        html[data-theme="dark"] .theme-toggle .theme-icon-moon {
            opacity: 0;
            transform: rotate(90deg) scale(0.4);
        }

        /* Dark mode button styling (subtle amber glow) */
        html[data-theme="dark"] .theme-toggle {
            border-color: rgba(251,191,36,0.35);
            box-shadow: 0 0 0 3px rgba(251,191,36,0.15), 0 2px 10px rgba(0,0,0,0.2);
        }
        html[data-theme="dark"] .theme-toggle:hover {
            box-shadow: 0 0 0 4px rgba(251,191,36,0.25), 0 4px 20px rgba(251,191,36,0.35);
        }

        .navbar-brand {
            font-weight: bold;
            font-size: 1.5rem;
        }
        .duno-brand {
            display: inline-flex;
            align-items: center;
        }
        /* The full-colour logo is designed for a light surface; on the dark
           navbar/footer it sits on a clean white rounded chip so it stays crisp. */
        .duno-brand-logo {
            height: 52px;
            width: auto;
            display: block;
            background: #ffffff;
            border-radius: 12px;
            padding: 6px 14px;
            box-shadow: 0 6px 18px rgba(7,12,33,.22);
        }
        .navbar-brand.duno-brand {
            min-width: 0;
            min-height: 0;
            padding: 4px 0;
        }
        .footer-logo-image {
            height: 54px;
            width: auto;
            display: block;
            background: #ffffff;
            border-radius: 12px;
            padding: 6px 14px;
            box-shadow: 0 6px 16px rgba(0,0,0,.22);
        }
        
        .hero-section {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            padding: 80px 0;
            margin-bottom: 0;
        }
        
        .stats-card {
            background: white;
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: none;
            margin-bottom: 30px;
        }
        
        .stats-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }
        
        .stats-icon {
            font-size: 3rem;
            margin-bottom: 20px;
            background: linear-gradient(45deg, var(--secondary-color), var(--accent-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .card-modern {
            border: none;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            overflow: hidden;
        }
        
        .card-modern:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.15);
        }
        
        .btn-modern {
            border-radius: 25px;
            padding: 12px 30px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            border: none;
        }
        
        .btn-primary-modern {
            background: linear-gradient(45deg, var(--secondary-color), #5dade2);
            color: white;
        }
        
        .btn-primary-modern:hover {
            background: linear-gradient(45deg, #2980b9, var(--secondary-color));
            transform: translateY(-2px);
        }
        
        .search-section {
            background: var(--light-bg);
            padding: 40px 0;
            margin: 40px 0;
        }
        
        .search-box {
            border-radius: 25px;
            border: 2px solid #e0e0e0;
            padding: 15px 25px;
            font-size: 1.1rem;
            transition: border-color 0.3s ease;
        }
        
        .search-box:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
        }
        
        .footer {
            background: linear-gradient(135deg, var(--footer-bg) 0%, var(--footer-secondary) 50%, var(--footer-accent) 100%);
            color: #ffffff;
            padding: 60px 0 20px 0;
            margin-top: 80px;
            position: relative;
            overflow: hidden;
        }
        
        .footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--secondary-color), var(--accent-color), var(--success-color), var(--warning-color));
        }
        
        .footer-section {
            margin-bottom: 30px;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }
        
        .footer-section.animate-in {
            opacity: 1;
            transform: translateY(0);
        }
        
        .footer-logo {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .footer-description {
            color: #b8c6db;
            line-height: 1.7;
            margin-bottom: 25px;
            font-size: 0.95rem;
        }
        
        .social-links {
            display: flex;
            gap: 15px;
        }
        
        .social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            border-radius: 50%;
            text-decoration: none;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }
        
        .social-link:hover {
            background: var(--secondary-color);
            color: #ffffff;
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3);
        }
        
        .social-link i {
            font-size: 1.2rem;
        }
        
        .footer-title {
            color: #ffffff;
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 10px;
        }
        
        .footer-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 3px;
            background: linear-gradient(90deg, var(--secondary-color), var(--accent-color));
            border-radius: 2px;
        }
        
        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .footer-links li {
            margin-bottom: 12px;
        }
        
        .footer-links a {
            color: #b8c6db;
            text-decoration: none;
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
            font-size: 0.95rem;
        }
        
        .footer-links a:hover {
            color: var(--secondary-color);
            padding-left: 8px;
        }
        
        .footer-links a i {
            font-size: 0.8rem;
            margin-right: 8px;
            opacity: 0.7;
        }
        
        .contact-info {
            margin-bottom: 25px;
        }
        
        .contact-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
            padding: 12px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            transition: all 0.3s ease;
        }
        
        .contact-item:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateX(5px);
        }
        
        .contact-item i {
            font-size: 1.2rem;
            color: var(--secondary-color);
            margin-right: 15px;
            margin-top: 2px;
            min-width: 20px;
        }
        
        .contact-details strong {
            display: block;
            color: #ffffff;
            font-weight: 600;
            margin-bottom: 4px;
            font-size: 0.9rem;
        }
        
        .contact-details span {
            color: #b8c6db;
            font-size: 0.9rem;
            line-height: 1.4;
        }
        
        .footer-divider {
            border: none;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            margin: 40px 0 30px 0;
        }
        
        .footer-bottom {
            padding-top: 20px;
        }
        
        .copyright p {
            color: #8892b0;
            margin-bottom: 10px;
            font-size: 0.9rem;
        }
        
        .legal-links {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .legal-links a {
            color: #b8c6db;
            text-decoration: none;
            font-size: 0.85rem;
            transition: color 0.3s ease;
        }
        
        .legal-links a:hover {
            color: var(--secondary-color);
        }
        
        .legal-links span {
            color: #6c7b8a;
            font-size: 0.8rem;
        }
        
        .footer-tech {
            text-align: right;
        }
        
        .footer-tech p {
            color: #8892b0;
            margin-bottom: 8px;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
        }
        
        .footer-tech i {
            color: var(--warning-color);
            font-size: 1.1rem;
        }
        
        .footer-tech strong {
            color: var(--secondary-color);
        }
        
        .version-info {
            margin: 0;
        }
        
        .version-info small {
            color: #6c7b8a;
            font-size: 0.8rem;
        }
        
        .back-to-top {
            position: fixed;
            /* 96px = the .cart-fab / .mobile-floating-cart FABs sit at
               bottom:30px with a 56px height (30+56=86) — stacking this
               button above them with a clean 10px gap avoids the two
               circular buttons rendering on top of each other on any page
               that also has a floating cart button (product/supermarket
               detail, marketplace home). */
            bottom: 96px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
            color: #ffffff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 1000;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
        }

        .back-to-top.visible {
            opacity: 1;
            visibility: visible;
        }

        .back-to-top:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
        }

        .back-to-top i {
            font-size: 1.2rem;
            transition: transform 0.25s ease;
        }

        .back-to-top.dir-down i {
            transform: rotate(180deg);
        }
        
        /* ===== MOBILE PWA: Hide footer (Chinese app style) ===== */
        @media (max-width: 768px) {
            .footer, footer { display: none !important; }
        }

        /* ===== GLOBAL MOBILE: No horizontal scroll ===== */
        @media (max-width: 768px) {
            html, body { overflow-x: hidden !important; max-width: 100vw; }
            * { box-sizing: border-box; }
            img, video, iframe, table { max-width: 100%; }
        }

        /* ===== GLOBAL MOBILE: Chinese-app density ===== */
        @media (max-width: 768px) {
            body { font-size: 13px; line-height: 1.4; background: #F5F5F5; }
            h1 { font-size: 18px !important; }
            h2 { font-size: 15px !important; }
            h3 { font-size: 14px !important; }
            p, li { font-size: 12px; }
            .container { padding-left: 8px !important; padding-right: 8px !important; }
            section { margin-bottom: 8px !important; }
            .card { padding: 8px; }
            .btn, button { padding: 8px 14px; font-size: 13px; border-radius: 20px; }
            .btn-primary { background: #1d4ed8; border-color: #1d4ed8; }
            input, select, textarea { font-size: 14px !important; }
            /* product cards dense */
            .product-card img { aspect-ratio: 3/4; object-fit: cover; }
            .product-card .info { padding: 6px; }
        }

        /* Responsive Design — footer adjustments (desktop only) */
        @media (min-width: 769px) and (max-width: 992px) {
            .footer {
                padding: 40px 0 20px 0;
                margin-top: 40px;
            }
            
            .footer-logo {
                justify-content: center;
                text-align: center;
            }
            
            .footer-tech {
                text-align: center;
                margin-top: 20px;
            }
            
            .footer-tech p {
                justify-content: center;
            }
            
            .legal-links {
                justify-content: center;
            }
            
            .social-links {
                justify-content: center;
            }
            
            .back-to-top {
                /* Same stacking rationale as the desktop rule above — the
                   cart FAB isn't overridden at this breakpoint, so it's
                   still a 56px button sitting at bottom:30px. */
                bottom: 96px;
                right: 20px;
                width: 45px;
                height: 45px;
            }
            
            .contact-item {
                padding: 10px;
            }
            
            .footer-section {
                text-align: center;
            }
            
            .footer-title::after {
                left: 50%;
                transform: translateX(-50%);
            }
        }
        
        @media (max-width: 768px) {
            .footer-description { display: none !important; }
        }
        @media (max-width: 576px) {
            .footer-logo h4 {
                font-size: 1.3rem;
            }
            
            .footer-description {
                font-size: 0.9rem;
            }
            
            .contact-details {
                font-size: 0.85rem;
            }
        }
    /* Global Toast Notifications */
    .g-toast-container{position:fixed;top:90px;right:20px;z-index:99999;display:flex;flex-direction:column;gap:10px;pointer-events:none;}
    .g-toast{pointer-events:auto;min-width:320px;max-width:420px;padding:16px 22px 16px 18px;border-radius:14px;color:#fff;font-size:.92rem;font-weight:500;display:flex;align-items:center;gap:12px;box-shadow:0 10px 40px rgba(0,0,0,.18);backdrop-filter:blur(12px);animation:g-toast-in .4s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden;}
    .g-toast::before{content:'';position:absolute;bottom:0;left:0;height:3px;background:rgba(255,255,255,.4);animation:g-toast-timer var(--toast-dur,4s) linear forwards;width:100%;}
    .g-toast.g-toast-out{animation:g-toast-out .35s ease forwards;}
    .g-toast-success{background:linear-gradient(135deg,#10b981,#059669);}
    .g-toast-error{background:linear-gradient(135deg,#ef4444,#dc2626);}
    .g-toast-warning{background:linear-gradient(135deg,#f59e0b,#d97706);}
    .g-toast-info{background:linear-gradient(135deg,#1d4ed8,#14245f);}
    .g-toast i{font-size:1.2rem;flex-shrink:0;}
    .g-toast-close{position:absolute;top:8px;right:10px;background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;font-size:.85rem;padding:4px;}
    .g-toast-close:hover{color:#fff;}
    @keyframes g-toast-in{from{opacity:0;transform:translateX(80px) scale(.9);}to{opacity:1;transform:translateX(0) scale(1);}}
    @keyframes g-toast-out{to{opacity:0;transform:translateX(80px) scale(.9);}}
    @keyframes g-toast-timer{from{width:100%;}to{width:0%;}}
    /* Global Confirm Modal */
    .g-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);z-index:100000;display:none;align-items:center;justify-content:center;animation:g-modal-fade-in .25s ease;}
    .g-modal-overlay.show{display:flex;}
    .g-modal-card{background:#fff;border-radius:22px;padding:40px 36px 32px;max-width:420px;width:90%;box-shadow:0 25px 80px rgba(0,0,0,.2);animation:g-modal-pop .35s cubic-bezier(.175,.885,.32,1.275);text-align:center;}
    .g-modal-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:1.6rem;color:#fff;}
    .g-modal-icon.confirm-icon{background:linear-gradient(135deg,#f59e0b,#d97706);}
    .g-modal-icon.info-icon{background:linear-gradient(135deg,#1d4ed8,#14245f);}
    .g-modal-icon.danger-icon{background:linear-gradient(135deg,#ef4444,#dc2626);}
    .g-modal-icon.success-icon{background:linear-gradient(135deg,#10b981,#059669);}
    .g-modal-title{font-size:1.25rem;font-weight:700;color:#1a1a2e;margin-bottom:10px;}
    .g-modal-text{color:#6b7280;font-size:.95rem;line-height:1.6;margin-bottom:28px;}
    .g-modal-actions{display:flex;gap:12px;justify-content:center;}
    .g-modal-btn{padding:11px 28px;border-radius:12px;border:none;font-weight:600;font-size:.92rem;cursor:pointer;transition:all .3s;}
    .g-modal-btn:hover{transform:translateY(-2px);}
    .g-modal-btn-cancel{background:#f3f4f6;color:#6b7280;}
    .g-modal-btn-cancel:hover{background:#e5e7eb;}
    .g-modal-btn-confirm{background:linear-gradient(135deg,#1d4ed8,#14245f);color:#fff;box-shadow:0 6px 20px rgba(29,78,216,.3);}
    .g-modal-btn-confirm:hover{box-shadow:0 10px 30px rgba(29,78,216,.4);}
    .g-modal-btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 6px 20px rgba(239,68,68,.3);}
    .g-modal-btn-danger:hover{box-shadow:0 10px 30px rgba(239,68,68,.4);}
    @keyframes g-modal-fade-in{from{opacity:0;}to{opacity:1;}}
    @keyframes g-modal-pop{from{opacity:0;transform:scale(.85) translateY(20px);}to{opacity:1;transform:scale(1) translateY(0);}}
    /* WeChat Modal */
    .wechat-modal-card{background:#fff;border-radius:22px;padding:40px 36px 32px;max-width:380px;width:90%;box-shadow:0 25px 80px rgba(0,0,0,.2);animation:g-modal-pop .35s cubic-bezier(.175,.885,.32,1.275);text-align:center;}
    .wechat-brand{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#07c160,#06ad56);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:0 8px 25px rgba(7,193,96,.3);}
    .wechat-brand i{font-size:2rem;color:#fff;}
    .wechat-id-box{background:#f0fdf4;border:2px dashed #07c160;border-radius:14px;padding:16px 24px;margin:18px 0 8px;font-size:1.3rem;font-weight:700;color:#065f46;letter-spacing:1px;user-select:all;}
    .wechat-copy-btn{background:linear-gradient(135deg,#07c160,#06ad56);color:#fff;border:none;padding:10px 28px;border-radius:12px;font-weight:600;cursor:pointer;font-size:.9rem;transition:all .3s;margin-top:14px;}
    .wechat-copy-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(7,193,96,.3);}

/* =====================================================================
   Page-load progress bar
   ---------------------------------------------------------------------
   A multi-page Django site gives no feedback between a tap and the next
   page painting; on a mobile connection that gap reads as a dead tap and
   people tap again. This is the standard fix: a slim determinate-looking
   bar that starts the moment a navigation begins and completes when the
   new document is ready.

   It lives above the fixed navbar and is purely decorative, so it is
   hidden from assistive tech — a screen reader announces the new page
   itself, which is better feedback than a bar.
   ===================================================================== */
.page-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 2000;            /* navbar is 1030 */
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease .15s;
}
.page-progress.is-active { opacity: 1; transition-delay: 0s; }
.page-progress-bar {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, #1d4ed8 0%, #38bdf8 55%, #a5f3fc 100%);
    box-shadow: 0 0 10px rgba(56, 189, 248, .75);
    transform-origin: left center;
    transition: width .25s cubic-bezier(.25, .8, .35, 1);
}
/* A soft comet head, so a stalled bar still looks like it is working. */
.page-progress.is-active .page-progress-bar::after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 90px; height: 100%;
    background: linear-gradient(90deg, rgba(165,243,252,0), rgba(255,255,255,.9));
    animation: pageProgressPulse 1.1s ease-in-out infinite;
}
@keyframes pageProgressPulse {
    0%, 100% { opacity: .35; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .page-progress-bar { transition: none; }
    .page-progress.is-active .page-progress-bar::after { animation: none; opacity: .6; }
}


/* =====================================================================
   Seller / publisher card identity
   ---------------------------------------------------------------------
   Shared by the book, product and supermarket detail pages. Those cards
   use different class prefixes (bmp- / pmp-), so each rule is written for
   both rather than copied into three templates that would then drift.

   The badge is the coloured glyph itself, not a glyph inside a filled
   circle: fa-certificate is a seal shape with asymmetric side bearings,
   and centring it inside a second circle leaves it looking off even when
   its box is centred to the pixel.
   ===================================================================== */
.bmp-seller-identity,
.pmp-seller-identity { flex: 1 1 auto; min-width: 0; }
.bmp-seller-identity .bmp-seller-name,
.pmp-seller-identity .pmp-seller-name {
    display: inline-flex; align-items: center; gap: 5px;
    line-height: 1.25;
}
/* The badge is the glyph itself, not a glyph inside a filled circle.
   fa-certificate is a seal shape with asymmetric side bearings, so centring
   it inside a second circle left it looking visibly off — two nested shapes
   fighting each other. A single coloured mark is the conventional verified
   badge and has nothing to misalign. */
.bmp-seller-badge-dot,
.pmp-seller-badge-dot {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; line-height: 1; flex-shrink: 0;
    vertical-align: middle;
}
.bmp-seller-badge-dot i,
.pmp-seller-badge-dot i { display: block; line-height: 1; }
.bmp-seller-badge-dot--official,
.pmp-seller-badge-dot--official { color: #f59e0b; }
.bmp-seller-badge-dot--certified,
.pmp-seller-badge-dot--certified { color: #1d4ed8; }
.bmp-seller-badge-dot--publisher,
.pmp-seller-badge-dot--publisher { color: #10b981; }
html[data-theme="dark"] .bmp-seller-badge-dot--official,
html[data-theme="dark"] .pmp-seller-badge-dot--official { color: #fbbf24; }
html[data-theme="dark"] .bmp-seller-badge-dot--certified,
html[data-theme="dark"] .pmp-seller-badge-dot--certified { color: #60a5fa; }
html[data-theme="dark"] .bmp-seller-badge-dot--publisher,
html[data-theme="dark"] .pmp-seller-badge-dot--publisher { color: #34d399; }

.bmp-seller-follow-top,
.pmp-seller-follow-top {
    flex-shrink: 0; margin-left: auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    min-height: 34px; padding: 6px 13px;
    border-radius: 999px;
    border: 1.5px solid #1d4ed8;
    background: #fff; color: #1d4ed8;
    font-size: .72rem; font-weight: 700; white-space: nowrap;
    cursor: pointer; transition: all .22s ease;
    -webkit-tap-highlight-color: transparent;
}
.bmp-seller-follow-top i,
.pmp-seller-follow-top i { font-size: .66rem; }
.bmp-seller-follow-top:active,
.pmp-seller-follow-top:active { transform: scale(.96); }
.bmp-seller-follow-top.is-following,
.pmp-seller-follow-top.is-following {
    background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8;
}
.bmp-seller-follow-top--publisher,
.pmp-seller-follow-top--publisher { border-color: #10b981; color: #059669; }
.bmp-seller-follow-top--publisher.is-following,
.pmp-seller-follow-top--publisher.is-following { background: #ecfdf5; border-color: #a7f3d0; }

.bmp-seller-meta,
.pmp-seller-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bmp-seller-followers,
.pmp-seller-followers {
    display: inline-flex; align-items: center; gap: 4px;
    color: #64748b; font-size: 11px; white-space: nowrap;
}
.bmp-seller-followers i,
.pmp-seller-followers i { font-size: 9px; opacity: .8; }
.bmp-seller-followers-num,
.pmp-seller-followers-num { color: #1d4ed8; font-weight: 800; }
.bmp-seller-followers[data-count="0"],
.pmp-seller-followers[data-count="0"] { display: none; }

html[data-theme="dark"] .bmp-seller-followers,
html[data-theme="dark"] .pmp-seller-followers { color: #94a3b8; }
html[data-theme="dark"] .bmp-seller-followers-num,
html[data-theme="dark"] .pmp-seller-followers-num { color: #93c5fd; }
html[data-theme="dark"] .bmp-seller-section--publisher .bmp-seller-followers-num,
html[data-theme="dark"] .pmp-seller-section--publisher .pmp-seller-followers-num { color: #6ee7b7; }
html[data-theme="dark"] .bmp-seller-follow-top,
html[data-theme="dark"] .pmp-seller-follow-top { border-color: #60a5fa; color: #93c5fd; }
html[data-theme="dark"] .bmp-seller-follow-top.is-following,
html[data-theme="dark"] .pmp-seller-follow-top.is-following { background: rgba(29,78,216,.22); }
html[data-theme="dark"] .bmp-seller-follow-top--publisher,
html[data-theme="dark"] .pmp-seller-follow-top--publisher { border-color: #34d399; color: #6ee7b7; }
html[data-theme="dark"] .bmp-seller-follow-top--publisher.is-following,
html[data-theme="dark"] .pmp-seller-follow-top--publisher.is-following { background: rgba(16,185,129,.2); }


/* =====================================================================
   Sticky bottom action bar (book / product / supermarket detail, mobile)
   ---------------------------------------------------------------------
   Written for both class prefixes so the three pages share one definition.

   The sizing here is deliberate: "Ajouter au panier" and "Acheter
   maintenant" do not fit on one line beside three icon buttons at 375px.
   The icons give up width and the labels are allowed to wrap, because a
   wrapped label is readable and a clipped one is not. min-height keeps
   every control at a 44px touch target either way.
   ===================================================================== */
.bmp-action-icons,
.pmp-action-icons { display: flex; gap: 2px; margin-right: 4px; flex-shrink: 0; }

.bmp-action-icon,
.pmp-action-icon {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-width: 40px; min-height: 46px; padding: 4px 3px;
    font-size: 16px; color: #666; cursor: pointer;
    border: none; background: none; text-decoration: none; border-radius: 12px;
    transition: background .15s ease, transform .1s ease;
}
.bmp-action-icon:active,
.pmp-action-icon:active { background: rgba(0,0,0,.05); transform: scale(0.94); }
.bmp-action-icon span,
.pmp-action-icon span { font-size: 9px; color: #999; white-space: nowrap; font-weight: 600; }

.bmp-buy-btns,
.pmp-buy-btns { display: flex; flex: 1; gap: 8px; min-width: 0; }

.bmp-cart-btn, .bmp-buy-btn,
.pmp-cart-btn, .pmp-buy-btn {
    flex: 1; min-width: 0;
    padding: 8px 8px; min-height: 44px;
    font-size: 12px; font-weight: 700;
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    border-radius: 22px;
    white-space: normal; line-height: 1.15; text-align: center;
    transition: transform .1s ease;
}
.bmp-cart-btn, .pmp-cart-btn { background: #fff; color: #FF6000; border: 1.5px solid #FF6000; }
.bmp-buy-btn,  .pmp-buy-btn  { background: linear-gradient(135deg, #E4393C, #ff5a5d); color: #fff; box-shadow: 0 4px 14px rgba(228,57,60,0.28); }
.bmp-cart-btn:active, .bmp-buy-btn:active,
.pmp-cart-btn:active, .pmp-buy-btn:active { transform: scale(0.96); }

@media (max-width: 340px) {
    .bmp-cart-btn, .bmp-buy-btn,
    .pmp-cart-btn, .pmp-buy-btn { font-size: 11px; padding: 8px 5px; }
    .bmp-action-icon, .pmp-action-icon { min-width: 36px; }
}