:root {
            --primary: #0f2744;
            --primary-light: #1e4a8a;
            --accent: #f59e0b;
            --accent-light: #fbbf24;
            --green: #059669;
            --red: #dc2626;
            --bg: #f4f6fa;
            --card: #ffffff;
            --text: #0f172a;
            --text-muted: #64748b;
            --border: #e1e7ef;
            --sidebar-w: 256px;
            --nav-h: 60px;
            --shadow: 0 1px 8px rgba(15,39,68,.08), 0 4px 20px rgba(15,39,68,.06);
            --shadow-lg: 0 8px 40px rgba(15,39,68,.14);
            --radius: 14px;
            --radius-sm: 9px;
        }
        /* ══════════════════════════════════════════════════════════
           DARK MODE — Slate/navy palette (from default-car-dark.svg)
           Layer 0 (deepest): #0f172a  — page background   (slate-900)
           Layer 1:           #1e293b  — cards, sidebar    (slate-800)
           Layer 2:           #334155  — inputs, hover     (slate-700)
           Layer 3:           #475569  — borders, dividers (slate-600)
           Text primary:      #e2e8f0                      (slate-200)
           Text secondary:    #94a3b8                      (slate-400)
           Text muted:        #64748b                      (slate-500)
        ══════════════════════════════════════════════════════════ */
        [data-theme="dark"] {
            --primary:       #2d6bc4;
            --primary-light: #4d8fea;
            --accent:        #f59e0b;
            --accent-light:  #fbbf24;
            --green:         #22c55e;
            --red:           #ef4444;
            --bg:            #0f172a;
            --card:          #1e293b;
            --text:          #e2e8f0;
            --text-muted:    #94a3b8;
            --border:        #334155;
            --shadow:        0 1px 4px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.35);
            --shadow-lg:     0 8px 40px rgba(0,0,0,.55);
            --radius:        14px;
            --radius-sm:     9px;
        }

        /* ── Base ── */
        [data-theme="dark"] body {
            background: var(--bg);
            color: var(--text);
        }

        /* ── Navbar ── */
        [data-theme="dark"] .navbar-main {
            background: #1e293b;
            border-bottom: 1px solid #334155;
            box-shadow: 0 2px 8px rgba(0,0,0,.5);
        }

        /* ── Sidebar ── */
        [data-theme="dark"] .sidebar {
            background: #1e293b;
            border-right-color: #334155;
        }
        [data-theme="dark"] .sidebar-overlay { background: rgba(0,0,0,.6); }
        [data-theme="dark"] .sb-link { color: #e2e8f0; }
        [data-theme="dark"] .sb-link:hover { background: #334155; color: #e2e8f0; }
        [data-theme="dark"] .sb-link.active { background: #1e3a5f; color: white; }
        [data-theme="dark"] .sb-section { color: #94a3b8; }
        [data-theme="dark"] .sb-car-item { color: #94a3b8; }
        [data-theme="dark"] .sb-car-item:hover { background: #334155; color: #e2e8f0; }

        /* ── Cards ── */
        [data-theme="dark"] .card-custom,
        [data-theme="dark"] .stat-card:not(.blue):not(.gold):not(.green):not(.red),
        [data-theme="dark"] .car-card,
        [data-theme="dark"] .annonce-card {
            background: #1e293b;
            border-color: #334155;
            color: #e2e8f0;
        }
        [data-theme="dark"] .card-header-custom {
            background: #243447;
            border-bottom-color: #334155;
            color: #e2e8f0;
        }
        [data-theme="dark"] .card-header-custom h5 { color: #e2e8f0; }

        /* ── Annonce cards (feed page) ── */
        [data-theme="dark"] .annonce-card { background: #1e293b; border-color: #334155; }
        [data-theme="dark"] .annonce-price { color: #4d8fea; }
        [data-theme="dark"] .annonce-title { color: #e2e8f0; }
        [data-theme="dark"] .annonce-body  { color: #e2e8f0; }
        /* Card body on feed.html redesign */
        [data-theme="dark"] .card-body    { background: #1e293b; }
        [data-theme="dark"] .card-foot    { border-top-color: #334155; }
        [data-theme="dark"] .spec-chip    { background: #334155; color: #94a3b8; }
        [data-theme="dark"] .seller-lbl   { color: #94a3b8; }
        [data-theme="dark"] .card-time    { color: #64748b; }
        [data-theme="dark"] .fav-btn      { color: #64748b; }

        /* ── Inputs, selects, textareas ── */
        [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
        [data-theme="dark"] select,
        [data-theme="dark"] textarea {
            background: #334155 !important;
            color: #e2e8f0 !important;
            border-color: #475569 !important;
        }
        [data-theme="dark"] input::placeholder,
        [data-theme="dark"] textarea::placeholder { color: #64748b !important; }
        [data-theme="dark"] input:focus,
        [data-theme="dark"] select:focus,
        [data-theme="dark"] textarea:focus {
            border-color: #4d8fea !important;
            background: #334155 !important;
            box-shadow: 0 0 0 3px rgba(77,143,234,.18) !important;
        }
        /* Bootstrap form-select/form-control */
        [data-theme="dark"] .form-control,
        [data-theme="dark"] .form-select {
            background-color: #334155 !important;
            color: #e2e8f0 !important;
            border-color: #475569 !important;
        }

        /* ── Dropdowns ── */
        [data-theme="dark"] .dropdown-menu {
            background: #334155;
            border-color: #475569;
            box-shadow: 0 8px 32px rgba(0,0,0,.5);
        }
        [data-theme="dark"] .dropdown-item { color: #e2e8f0; }
        [data-theme="dark"] .dropdown-item:hover,
        [data-theme="dark"] .dropdown-item:focus { background: #475569; color: #e2e8f0; }
        [data-theme="dark"] .dropdown-header { color: #94a3b8; }
        [data-theme="dark"] .dropdown-divider { border-color: #475569; }
        [data-theme="dark"] .nav-car-dropdown {
            background: #334155;
            border-color: #475569;
        }
        [data-theme="dark"] .nav-car-option { color: #e2e8f0; }
        [data-theme="dark"] .nav-car-option:hover { background: #475569; }
        [data-theme="dark"] .nav-car-option.selected { background: #1e3a5f; color: #4d8fea; }

        /* ── Modals / sheets ── */
        [data-theme="dark"] .modal-box {
            background: #1e293b !important;
            color: #e2e8f0;
        }
        [data-theme="dark"] .modal-title  { color: #4d8fea; }
        [data-theme="dark"] .modal-sub    { color: #94a3b8; }
        [data-theme="dark"] .modal-switch { color: #94a3b8; }
        [data-theme="dark"] .modal-close  { background: #334155; color: #94a3b8; }
        [data-theme="dark"] .modal-handle { background: #475569; }
        [data-theme="dark"] .modal-box .form-control {
            background: #334155 !important;
            border-color: #475569 !important;
            color: #e2e8f0 !important;
        }
        [data-theme="dark"] .modal-box label { color: #94a3b8; }
        /* Bootstrap modals */
        [data-theme="dark"] .modal-content {
            background: #1e293b;
            border-color: #334155;
            color: #e2e8f0;
        }
        [data-theme="dark"] .modal-header,
        [data-theme="dark"] .modal-footer {
            border-color: #334155;
        }

        /* ── Action sheet ── */
        [data-theme="dark"] .action-sheet {
            background: #1e293b;
        }
        [data-theme="dark"] .action-sheet-handle { background: #475569; }
        [data-theme="dark"] .action-sheet-title  { color: #94a3b8; }
        [data-theme="dark"] .as-car-chip {
            background: #334155;
            border-color: #475569;
            color: #e2e8f0;
        }
        [data-theme="dark"] .as-car-chip.selected {
            background: #1e3a5f;
            border-color: #4d8fea;
            color: #4d8fea;
        }
        [data-theme="dark"] .as-action.fuel    { background: #2d2a1a; color: #f59e0b; }
        [data-theme="dark"] .as-action.service { background: #1e1e35; color: #818cf8; }
        [data-theme="dark"] .as-action.docs    { background: #1a2d25; color: #34d399; }
        [data-theme="dark"] .as-action.history { background: #1a2535; color: #60a5fa; }

        /* ── Filter drawer (feed page) ── */
        [data-theme="dark"] .fd-sheet { background: #1e293b; }
        [data-theme="dark"] .fd-head  { border-bottom-color: #334155; background: #1e293b; }
        [data-theme="dark"] .fd-title { color: #e2e8f0; }
        [data-theme="dark"] .fd-close { background: #334155; color: #94a3b8; }
        [data-theme="dark"] .fd-label { color: #94a3b8; }
        [data-theme="dark"] .fd-chip  { background: #334155; border-color: #475569; color: #e2e8f0; }
        [data-theme="dark"] .fd-chip.fc-on { background: #1e3a5f; border-color: #4d8fea; color: #4d8fea; }
        [data-theme="dark"] .fd-chip.fa-on { background: #3d2a00; border-color: #f59e0b; color: #f59e0b; }
        [data-theme="dark"] .fd-sel   { background: #334155; border-color: #475569; color: #e2e8f0; }
        [data-theme="dark"] .fd-check-row { background: #334155; }
        [data-theme="dark"] .fd-check-row:has(input:checked) { background: #1e3a5f; border-color: #4d8fea; }
        [data-theme="dark"] .fd-check-row span { color: #e2e8f0; }
        [data-theme="dark"] .fd-footer { background: #1e293b; border-top-color: #334155; }
        [data-theme="dark"] .fd-reset  { background: #334155; color: #94a3b8; border-color: #475569; }

        /* Mobile search bar */
        [data-theme="dark"] .mob-search-bar { background: #243447; border-color: #334155; }
        [data-theme="dark"] .mob-search-bar input { color: #e2e8f0; }
        [data-theme="dark"] .mob-pill  { background: #334155; border-color: #475569; color: #94a3b8; }
        [data-theme="dark"] .mob-pill.p-active { background: #1e3a5f; border-color: #4d8fea; color: #4d8fea; }
        [data-theme="dark"] .mob-pill.p-accent { background: #3d2a00; border-color: #f59e0b; color: #f59e0b; }
        [data-theme="dark"] .sb-section-line { background: #334155; }

        /* Desktop search panel */
        [data-theme="dark"] .search-panel { background: #1e293b; border-color: #334155; }
        [data-theme="dark"] .search-panel-body { color: #e2e8f0; }
        [data-theme="dark"] .search-quick-bar  { background: #334155; border-color: #475569; }
        [data-theme="dark"] .search-quick-bar input { color: #e2e8f0; }
        [data-theme="dark"] .filter-section-title { color: #94a3b8; }
        [data-theme="dark"] .filter-chip { background: #334155; border-color: #475569; color: #e2e8f0; }
        [data-theme="dark"] .filter-chip:hover { border-color: #4d8fea; color: #4d8fea; }
        [data-theme="dark"] .filter-chip.active { background: #1e3a5f; border-color: #4d8fea; color: white; }
        [data-theme="dark"] .filter-chip.accent.active { background: #3d2a00; border-color: #f59e0b; color: #f59e0b; }
        [data-theme="dark"] .adv-toggle { color: #4d8fea; }
        [data-theme="dark"] .sort-sel,
        [data-theme="dark"] .sort-select { background: #334155; border-color: #475569; color: #e2e8f0; }
        [data-theme="dark"] .results-count { color: #e2e8f0; }
        [data-theme="dark"] .results-count span { color: #4d8fea; }

        /* Active filter tags */
        [data-theme="dark"] .active-tag { background: #1e3a5f; color: #4d8fea; }
        [data-theme="dark"] .active-tag .rm { background: #4d8fea; }

        /* ── Tables ── */
        [data-theme="dark"] .table-custom th { background: #243447; color: #94a3b8; }
        [data-theme="dark"] .table-custom td { border-bottom-color: #334155; color: #e2e8f0; }
        [data-theme="dark"] .table-custom tbody tr:hover { background: #243447; }
        [data-theme="dark"] table { color: #e2e8f0; }
        [data-theme="dark"] .table { color: #e2e8f0; }
        [data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; }
        [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,.03); }
        [data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(255,255,255,.05); }

        /* ── Tabs ── */
        [data-theme="dark"] .tab-nav { border-bottom-color: #334155; }
        [data-theme="dark"] .tab-btn { color: #94a3b8; }
        [data-theme="dark"] .tab-btn:hover { background: #334155; color: #e2e8f0; }
        [data-theme="dark"] .tab-btn.active { color: #4d8fea; border-bottom-color: #4d8fea; }

        /* ── Alerts / Bootstrap alerts ── */
        [data-theme="dark"] .alert { border-color: #334155; }
        [data-theme="dark"] .alert-info    { background: #1a2d3d; color: #60a5fa; border-color: #1e3a5f; }
        [data-theme="dark"] .alert-success { background: #1a2d22; color: #34d399; border-color: #1e4033; }
        [data-theme="dark"] .alert-warning { background: #2d2200; color: #fbbf24; border-color: #4a3800; }
        [data-theme="dark"] .alert-danger  { background: #2d1a1a; color: #f87171; border-color: #4a2020; }

        /* ── Badges ── */
        [data-theme="dark"] .badge-fuel.fuel-essence,
        [data-theme="dark"] .badge-fuel.fuel-sp95,
        [data-theme="dark"] .badge-fuel.fuel-sp98 { background: rgba(245,158,11,.2); color: #fbbf24; }
        [data-theme="dark"] .badge-fuel.fuel-diesel,
        [data-theme="dark"] .badge-fuel.fuel-gasoil { background: rgba(59,130,246,.2); color: #60a5fa; }
        [data-theme="dark"] .badge-fuel.fuel-gpl     { background: rgba(34,197,94,.2); color: #4ade80; }
        [data-theme="dark"] .badge-fuel.fuel-hybride { background: rgba(16,185,129,.2); color: #34d399; }
        [data-theme="dark"] .badge-fuel.fuel-electrique { background: rgba(139,92,246,.2); color: #a78bfa; }
        [data-theme="dark"] .etat-excellent,.etat-tres_bon,[data-theme="dark"] .etat-neuf,[data-theme="dark"] .etat-comme_neuf { background: rgba(34,197,94,.18); color: #4ade80; }
        [data-theme="dark"] .etat-bon        { background: rgba(245,158,11,.18); color: #fbbf24; }
        [data-theme="dark"] .etat-acceptable { background: rgba(249,115,22,.18); color: #fb923c; }
        [data-theme="dark"] .etat-mauvais    { background: rgba(239,68,68,.18);  color: #f87171; }
        [data-theme="dark"] .km-badge        { background: #334155; color: #94a3b8; }

        /* ── Mobile bottom nav ── */
        [data-theme="dark"] .mobile-bottom-nav {
            background: #1a2236;
            border-top-color: #2d3f5c;
            box-shadow: 0 -4px 24px rgba(0,0,0,.5);
        }
        [data-theme="dark"] .mbn-item        { color: #94a3b8; }
        [data-theme="dark"] .mbn-item.active,
        [data-theme="dark"] .mbn-item:hover  { color: #4d8fea; }
        [data-theme="dark"] .mbn-fab-label   { color: #94a3b8; }
        [data-theme="dark"] .mbn-fab-circle  { border-color: #1a2236; }

        /* ── Share sheet dark mode (handled in main CSS block) ── */

        /* ── Footer ── */
        [data-theme="dark"] footer { border-top-color: #334155 !important; }
        [data-theme="dark"] footer a { color: #94a3b8 !important; }
        [data-theme="dark"] footer a:hover { color: #e2e8f0 !important; }

        /* ── Dividers / misc ── */
        [data-theme="dark"] .divider { background: #334155; }
        [data-theme="dark"] .empty-state { color: #94a3b8; }
        [data-theme="dark"] .page-title  { color: #e2e8f0; }
        [data-theme="dark"] hr { border-color: #334155; opacity: 1; }
        [data-theme="dark"] .border,
        [data-theme="dark"] [style*="border:1px solid"],
        [data-theme="dark"] [style*="border-top:1px solid"],
        [data-theme="dark"] [style*="border-bottom:1px solid"] { border-color: #334155 !important; }
        [data-theme="dark"] [style*="color:var(--text-muted)"],
        [data-theme="dark"] [style*="color: var(--text-muted)"] { color: #94a3b8 !important; }
        [data-theme="dark"] [style*="color:var(--text)"],
        [data-theme="dark"] [style*="color: var(--text)"] { color: #e2e8f0 !important; }
        [data-theme="dark"] [style*="background:white"],
        [data-theme="dark"] [style*="background: white"],
        [data-theme="dark"] [style*="background:#fff"],
        [data-theme="dark"] [style*="background: #fff"] { background: #1e293b !important; }
        [data-theme="dark"] [style*="background:#f8fafc"],
        [data-theme="dark"] [style*="background: #f8fafc"],
        [data-theme="dark"] [style*="background:#fafbfc"] { background: #243447 !important; }
        [data-theme="dark"] [style*="color:white"],
        [data-theme="dark"] [style*="color: white"],
        [data-theme="dark"] [style*="color:#fff"],
        [data-theme="dark"] [style*="color: #fff"] { /* keep white text on colored backgrounds */ }

        /* ── Comprehensive inline-style overrides ─────────────────────────
           Converts all hardcoded pastel / light colors to dark-safe equivalents.
           Light backgrounds → translucent dark, Dark text → bright equivalent.
        ─────────────────────────────────────────────────────────────────── */

        /* Blue tones */
        [data-theme="dark"] [style*="background:#eff6ff"],
        [data-theme="dark"] [style*="background:#dbeafe"],
        [data-theme="dark"] [style*="background:#bfdbfe"] { background: rgba(77,143,234,.14) !important; }
        [data-theme="dark"] [style*="color:#1d4ed8"],
        [data-theme="dark"] [style*="color:#1e40af"],
        [data-theme="dark"] [style*="color:#2563eb"] { color: #60a5fa !important; }

        /* Green tones */
        [data-theme="dark"] [style*="background:#f0fdf4"],
        [data-theme="dark"] [style*="background:#dcfce7"],
        [data-theme="dark"] [style*="background:#bbf7d0"] { background: rgba(34,197,94,.12) !important; }
        [data-theme="dark"] [style*="color:#166534"],
        [data-theme="dark"] [style*="color:#15803d"],
        [data-theme="dark"] [style*="color:#16a34a"] { color: #4ade80 !important; }

        /* Amber / yellow tones */
        [data-theme="dark"] [style*="background:#fffbeb"],
        [data-theme="dark"] [style*="background:#fef3c7"],
        [data-theme="dark"] [style*="background:#fef9c3"],
        [data-theme="dark"] [style*="background:#fde68a"] { background: rgba(245,158,11,.12) !important; }
        [data-theme="dark"] [style*="color:#92400e"],
        [data-theme="dark"] [style*="color:#854d0e"],
        [data-theme="dark"] [style*="color:#78350f"],
        [data-theme="dark"] [style*="color:#d97706"] { color: #fbbf24 !important; }

        /* Red / pink tones */
        [data-theme="dark"] [style*="background:#fee2e2"],
        [data-theme="dark"] [style*="background:#fff5f5"],
        [data-theme="dark"] [style*="background:#fde8e8"],
        [data-theme="dark"] [style*="background:#fecaca"] { background: rgba(239,68,68,.13) !important; }
        [data-theme="dark"] [style*="color:#991b1b"],
        [data-theme="dark"] [style*="color:#7f1d1d"],
        [data-theme="dark"] [style*="color:#b91c1c"] { color: #f87171 !important; }
        /* dc2626 used in danger buttons — keep it but lighten on dark bg */
        [data-theme="dark"] [style*="color:#dc2626"] { color: #f87171 !important; }

        /* Purple / violet tones */
        [data-theme="dark"] [style*="background:#f3e8ff"],
        [data-theme="dark"] [style*="background:#ede9fe"] { background: rgba(139,92,246,.12) !important; }
        [data-theme="dark"] [style*="color:#5b21b6"],
        [data-theme="dark"] [style*="color:#6d28d9"],
        [data-theme="dark"] [style*="color:#7c3aed"] { color: #a78bfa !important; }

        /* Orange tones */
        [data-theme="dark"] [style*="background:#ffedd5"],
        [data-theme="dark"] [style*="background:#fed7aa"] { background: rgba(234,88,12,.12) !important; }
        [data-theme="dark"] [style*="color:#ea580c"],
        [data-theme="dark"] [style*="color:#c2410c"] { color: #fb923c !important; }

        /* Sky / light-blue tones */
        [data-theme="dark"] [style*="background:#f0f9ff"],
        [data-theme="dark"] [style*="background:#e0f2fe"],
        [data-theme="dark"] [style*="background:#bae6fd"] { background: rgba(14,165,233,.12) !important; }
        [data-theme="dark"] [style*="color:#0369a1"],
        [data-theme="dark"] [style*="color:#0c4a6e"],
        [data-theme="dark"] [style*="color:#075985"],
        [data-theme="dark"] [style*="color:#2563a8"] { color: #38bdf8 !important; }

        /* Google-button text & other near-black text */
        [data-theme="dark"] [style*="color:#3c4043"],
        [data-theme="dark"] [style*="color:#202124"],
        [data-theme="dark"] [style*="color:#0f2744"] { color: #e2e8f0 !important; }

        /* Border patches for pastel borders */
        [data-theme="dark"] [style*="border-color:#bfdbfe"],
        [data-theme="dark"] [style*="border:1px solid #bfdbfe"] { border-color: rgba(77,143,234,.3) !important; }
        [data-theme="dark"] [style*="border-color:#bbf7d0"],
        [data-theme="dark"] [style*="border:1px solid #bbf7d0"] { border-color: rgba(34,197,94,.25) !important; }
        [data-theme="dark"] [style*="border-color:#fde68a"],
        [data-theme="dark"] [style*="border:1px solid #fde68a"] { border-color: rgba(245,158,11,.3) !important; }
        [data-theme="dark"] [style*="border-color:#fca5a5"],
        [data-theme="dark"] [style*="border:1px solid #fca5a5"] { border-color: rgba(239,68,68,.3) !important; }
        [data-theme="dark"] [style*="border:1px solid #fecaca"] { border-color: rgba(239,68,68,.3) !important; }
        [data-theme="dark"] [style*="border:1px solid #c4b5fd"] { border-color: rgba(139,92,246,.3) !important; }

        /* Danger zone header — special case */
        [data-theme="dark"] .danger-zone-header { background: rgba(239,68,68,.1) !important; border-bottom-color: rgba(239,68,68,.2) !important; }

        /* ── Scrollbars (webkit) ── */
        [data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; }
        [data-theme="dark"] ::-webkit-scrollbar-track { background: #0f172a; }
        [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
        [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #64748b; }

        /* ── Bootstrap overrides ── */
        [data-theme="dark"] .bg-white  { background: #1e293b !important; }
        [data-theme="dark"] .bg-light  { background: #243447 !important; }
        [data-theme="dark"] .text-dark { color: #e2e8f0 !important; }
        [data-theme="dark"] .text-muted { color: #94a3b8 !important; }
        [data-theme="dark"] .border     { border-color: #334155 !important; }
        [data-theme="dark"] .card       { background: #1e293b; border-color: #334155; color: #e2e8f0; }
        [data-theme="dark"] .card-body  { background: #1e293b; color: #e2e8f0; }
        [data-theme="dark"] .list-group-item { background: #1e293b; border-color: #334155; color: #e2e8f0; }
        [data-theme="dark"] .badge.bg-light { background: #334155 !important; color: #e2e8f0 !important; }
        [data-theme="dark"] .btn-outline-secondary { border-color: #475569; color: #94a3b8; }
        [data-theme="dark"] .btn-outline-secondary:hover { background: #334155; }
        [data-theme="dark"] .btn-light { background: #334155; border-color: #475569; color: #e2e8f0; }
        [data-theme="dark"] .btn-light:hover { background: #475569; }
        [data-theme="dark"] .progress { background: #334155; }
        [data-theme="dark"] .nav-tabs { border-bottom-color: #334155; }
        [data-theme="dark"] .nav-tabs .nav-link { color: #94a3b8; }
        [data-theme="dark"] .nav-tabs .nav-link.active { color: #4d8fea; border-color: #334155 #334155 #1e293b; background: #1e293b; }
        [data-theme="dark"] .nav-tabs .nav-link:hover { border-color: #334155; color: #e2e8f0; }

        /* ── Profile page ── */
        [data-theme="dark"] .profile-avatar { border-color: #1e293b; }
        [data-theme="dark"] .profile-bio { color: #94a3b8; }

        /* ── Back to top ── */
        #backToTop {
            position: fixed; bottom: 80px; right: 18px; z-index: 800;
            width: 40px; height: 40px; border-radius: 50%;
            background: var(--primary); color: white; border: none;
            box-shadow: var(--shadow-lg); cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            font-size: .85rem; opacity: 0; pointer-events: none;
            transition: opacity .25s, transform .25s;
            transform: translateY(10px);
        }
        #backToTop.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
        #backToTop:hover { background: var(--primary-light); }

        /* ── Skeleton loading ── */
        @keyframes shimmer {
            0% { background-position: -600px 0; }
            100% { background-position: 600px 0; }
        }
        .skeleton {
            background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
            background-size: 600px 100%;
            animation: shimmer 1.4s infinite;
            border-radius: var(--radius-sm);
        }
        .skeleton-card {
            background: var(--card); border-radius: var(--radius); border: 1px solid var(--border);
            overflow: hidden; min-height: 280px;
        }
        .skeleton-img  { height: 170px; width: 100%; }
        .skeleton-line { height: 14px; margin: 10px 14px 0; }
        .skeleton-line.short { width: 55%; }
        .skeleton-line.med   { width: 75%; }

        /* ── Lightbox ── */
        #lightbox {
            position: fixed; inset: 0; z-index: 2000;
            background: rgba(0,0,0,.92); display: none;
            align-items: center; justify-content: center;
            flex-direction: column;
        }
        #lightbox.open { display: flex; }
        #lightbox img {
            max-width: 92vw; max-height: 82vh;
            object-fit: contain; border-radius: 8px;
            box-shadow: 0 8px 40px rgba(0,0,0,.6);
            transition: opacity .2s;
        }
        #lightbox .lb-close {
            position: absolute; top: 16px; right: 20px;
            color: white; font-size: 1.8rem; cursor: pointer; line-height: 1;
            background: none; border: none; opacity: .8;
        }
        #lightbox .lb-close:hover { opacity: 1; }
        #lightbox .lb-arrow {
            position: absolute; top: 50%; transform: translateY(-50%);
            background: rgba(255,255,255,.15); color: white; border: none;
            font-size: 1.4rem; padding: 12px 16px; cursor: pointer;
            border-radius: 8px; transition: background .15s;
        }
        #lightbox .lb-arrow:hover { background: rgba(255,255,255,.28); }
        #lightbox .lb-prev { left: 12px; }
        #lightbox .lb-next { right: 12px; }
        #lightbox .lb-counter {
            color: rgba(255,255,255,.7); font-size: .82rem; margin-top: 12px; letter-spacing: .5px;
        }
        #lightbox .lb-caption {
            color: rgba(255,255,255,.55); font-size: .78rem; margin-top: 4px; max-width: 480px; text-align: center;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

        /* ===== NAVBAR ===== */
        .navbar-main {
            position: fixed; top: 0; left: 0; right: 0; z-index: 1200;
            height: var(--nav-h); background: var(--primary);
            display: flex; align-items: center; padding: 0 16px;
            box-shadow: 0 2px 24px rgba(0,0,0,.22);
            gap: 12px;
        }
        .navbar-brand-custom {
            display: flex; align-items: center; gap: 9px;
            text-decoration: none; color: white; font-size: 1.3rem; font-weight: 800;
            letter-spacing: -0.5px; white-space: nowrap; font-family: 'Space Grotesk', sans-serif;
        }
        .navbar-brand-custom .brand-icon {
            width: 34px; height: 34px; background: var(--accent);
            border-radius: 9px; display: flex; align-items: center; justify-content: center;
            font-size: 1rem; flex-shrink: 0;
        }
        .navbar-brand-custom .brand-dz { color: var(--accent); }
        @media(max-width:480px){ .navbar-brand-custom .brand-text { display: none; } }

        .nav-search {
            flex: 1; max-width: 400px; position: relative;
            display: flex; align-items: center;
            background: rgba(255,255,255,.1);
            border-radius: 999px; border: 1.5px solid rgba(255,255,255,.18);
            overflow: visible; height: 38px;
            transition: border-color .25s, background .25s, box-shadow .25s;
        }
        .nav-search:focus-within {
            background: rgba(255,255,255,.16);
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(245,158,11,.15);
        }
        .nav-search .ns-icon-wrap {
            display: flex; align-items: center; justify-content: center;
            width: 38px; height: 38px; flex-shrink: 0;
            color: rgba(255,255,255,.55); font-size: .8rem;
            transition: color .25s;
            border-radius: 999px 0 0 999px;
        }
        .nav-search:focus-within .ns-icon-wrap { color: var(--accent); }
        .nav-search input {
            flex: 1; background: transparent; border: none;
            padding: 0 6px 0 0; color: white; outline: none;
            font-size: .855rem; font-family: inherit; min-width: 0;
            height: 38px;
        }
        .nav-search input::placeholder { color: rgba(255,255,255,.42); }
        .nav-search .ns-btn {
            display: flex; align-items: center; gap: 5px;
            background: var(--accent); border: none; color: #0f2744;
            cursor: pointer; padding: 0 14px; height: 38px;
            font-size: .78rem; font-weight: 800; white-space: nowrap;
            font-family: inherit; border-radius: 0 999px 999px 0;
            transition: background .2s; letter-spacing: .02em; flex-shrink: 0;
        }
        .nav-search .ns-btn:hover { background: var(--accent-light); }
        /* Mobile fake search bar — tap to open overlay */
        .mob-search-btn {
            display: none;
            flex: 1; min-width: 0;
            align-items: center; gap: 8px;
            height: 38px; padding: 0 12px;
            background: rgba(255,255,255,.13);
            border: 1.5px solid rgba(255,255,255,.22);
            border-radius: 999px;
            cursor: pointer;
            color: rgba(255,255,255,.65);
            font-size: .84rem; font-family: inherit;
            text-align: left; white-space: nowrap;
            transition: background .15s, border-color .15s;
            -webkit-tap-highlight-color: transparent;
        }
        .mob-search-btn:active {
            background: rgba(255,255,255,.22);
            border-color: var(--accent);
        }
        .mob-search-btn .msb-icon { flex-shrink: 0; font-size: .78rem; }
        .mob-search-btn .msb-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }
        .mob-search-btn .msb-kbd {
            flex-shrink: 0; background: rgba(255,255,255,.15);
            border-radius: 6px; padding: 2px 7px; font-size: .65rem;
            font-weight: 700; letter-spacing: .02em;
        }
        .mob-profile-link { display: none; flex-shrink: 0; align-items: center; }
        .mob-profile-link .nav-user-avatar { width: 28px; height: 28px; border-width: 1.5px; }
        @media(max-width:768px){
            .nav-quick-bar  { display: none !important; }
            #navAvatarWrap  { display: none !important; }

            .nav-sell-btn   { display: none !important; }
            .mob-profile-link { display: flex; }
            .nav-search     { display: none !important; }
        }

        /* ── Live search suggestions dropdown ── */
        .ns-dropdown {
            position: absolute;
            top: calc(100% + 10px);
            left: -8px; right: -8px;
            background: var(--card, #fff);
            border: 1.5px solid var(--border, #e2e8f0);
            border-radius: 16px;
            box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
            z-index: 2000;
            overflow: hidden;
            display: none;
            animation: nsDrop .18s ease;
        }
        .ns-dropdown.open { display: block; }
        @keyframes nsDrop {
            from { opacity:0; transform:translateY(-8px); }
            to   { opacity:1; transform:translateY(0); }
        }
        .ns-result {
            display: flex; align-items: center; gap: 10px;
            padding: 9px 14px; text-decoration: none; color: var(--text);
            transition: background .12s;
            border-bottom: 1px solid var(--border, #f1f5f9);
        }
        .ns-result:last-child { border-bottom: none; }
        .ns-result:hover, .ns-result.ns-active { background: rgba(245,158,11,.1); }
        .ns-result-thumb {
            width: 42px; height: 32px; border-radius: 7px;
            object-fit: cover; flex-shrink: 0;
            background: var(--border, #e2e8f0);
        }
        .ns-result-info { flex: 1; min-width: 0; }
        .ns-result-title {
            font-size: .82rem; font-weight: 700;
            color: var(--text); white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis;
        }
        .ns-result-sub { font-size: .72rem; color: var(--text-muted); }
        .ns-result-type {
            font-size: .65rem; font-weight: 700; padding: 2px 6px;
            border-radius: 6px; flex-shrink: 0;
        }
        .ns-type-annonce { background: rgba(15,39,68,.1); color: var(--primary); }
        .ns-type-store   { background: rgba(245,158,11,.15); color: #b45309; }
        .ns-empty { padding: 18px; text-align: center; font-size: .82rem; color: var(--text-muted); }
        .ns-footer {
            padding: 8px 14px; font-size: .75rem; color: var(--text-muted);
            border-top: 1px solid var(--border); text-align: center;
        }
        .ns-footer a { color: var(--accent); font-weight: 700; text-decoration: none; }

        .nav-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
        .nav-icon-btn {
            width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,.1);
            border: none; color: white; display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: background .2s; text-decoration: none; font-size: .95rem;
        }
        .nav-icon-btn:hover { background: rgba(255,255,255,.2); color: white; }
        .nav-user-avatar {
            width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
            border: 2px solid var(--accent); cursor: pointer;
        }

        /* ===== HAMBURGER ===== */
        .hamburger-btn {
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            gap: 5px; width: 36px; height: 36px; background: rgba(255,255,255,.1);
            border: 1px solid rgba(255,255,255,.15); border-radius: 9px;
            cursor: pointer; padding: 0; flex-shrink: 0; transition: background .2s;
        }
        .hamburger-btn:hover { background: rgba(255,255,255,.2); }
        .hamburger-btn span { display: block; width: 18px; height: 2px; background: white; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; transform-origin: center; }
        .hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
        .hamburger-btn.open span:nth-child(2) { opacity: 0; }
        .hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

        /* ===== SIDEBAR ===== */
        /* Suppress only sidebar + main-content transitions on load — not all animations */
        .sidebar-no-transition,
        .sidebar-no-transition ~ * .main-content,
        body.sb-initializing .sidebar,
        body.sb-initializing .main-content {
            transition: none !important;
        }
        .sidebar {
            position: fixed; top: var(--nav-h); left: 0; bottom: 0;
            width: var(--sidebar-w); background: var(--card);
            border-right: 1px solid var(--border);
            padding: 0; z-index: 900;
            display: flex; flex-direction: column;
            transition: transform .3s cubic-bezier(.4,0,.2,1);
        }
        .sidebar.collapsed { transform: translateX(-100%); }
        /* Inner scrollable area */
        .sb-scroll {
            flex: 1; overflow-y: auto; padding: 12px 10px 6px;
            scrollbar-width: thin; scrollbar-color: var(--border) transparent;
        }
        .sb-scroll::-webkit-scrollbar { width: 4px; }
        .sb-scroll::-webkit-scrollbar-track { background: transparent; }
        .sb-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
        /* Pinned footer — always visible */
        .sb-foot {
            flex-shrink: 0; padding: 8px 10px 10px;
            border-top: 2px solid var(--border);
            background: var(--card);
        }
        [data-theme="dark"] .sb-foot { background: #1e293b; border-top-color: #334155; }

        /* Initial state from data-sb — applied before JS runs, no flash */
        html[data-sb="closed"] .sidebar { transform: translateX(-100%); }
        html[data-sb="closed"] .main-content { margin-left: 0; }
        /* Only push content when sidebar IS rendered (authenticated users) */
        html[data-sb="open"] body:has(#sidebar) .main-content { margin-left: var(--sidebar-w); }
        /* Fallback for browsers without :has() */
        html[data-sb="open"] .main-content.with-sidebar { margin-left: var(--sidebar-w); }
        /* Mobile: sidebar always hidden, content always full width */
        @media(max-width:900px) {
            html[data-sb] .main-content { margin-left: 0 !important; }
        }
        @media(max-width:768px) {
            .sidebar { width: min(80vw, 280px); bottom: 58px; }
        }
        .sidebar-overlay {
            display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45);
            z-index: 850;
        }
        .sidebar-overlay.show { display: block; }

        /* Sidebar sections */
        .sb-section {
            font-size: .6rem; font-weight: 800; text-transform: uppercase;
            letter-spacing: 1.2px; color: var(--text-muted);
            padding: 18px 11px 5px; display: flex; align-items: center; gap: 7px;
        }
        .sb-section-line {
            flex: 1; height: 1px; background: var(--border); opacity: .7;
        }
        .sb-link {
            display: flex; align-items: center; gap: 10px; padding: 9px 11px;
            border-radius: var(--radius-sm); text-decoration: none; color: var(--text);
            font-weight: 500; font-size: .88rem; transition: all .15s; margin-bottom: 1px;
        }
        .sb-link:hover { background: var(--bg); color: var(--primary-light); }
        .sb-link.active { background: var(--primary); color: white; font-weight: 700; scroll-margin-top: 16px; scroll-margin-bottom: 16px; }
        .sb-link.active .sb-ic { color: var(--accent-light); }
        .sb-ic { width: 20px; text-align: center; font-size: .9rem; flex-shrink: 0; }
        .sb-badge { margin-left: auto; background: var(--accent); color: white; border-radius: 10px; padding: 0px 7px; font-size: .65rem; font-weight: 800; }

        /* Sidebar car sub-items */
        .sb-car-item {
            display: flex; align-items: center; gap: 8px; padding: 7px 11px 7px 22px;
            border-radius: 8px; text-decoration: none; color: var(--text-muted);
            font-size: .82rem; font-weight: 500; transition: all .15s; margin-bottom: 1px;
        }
        .sb-car-item:hover { background: var(--bg); color: var(--primary); }
        .sb-car-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

        /* ===== MAIN CONTENT ===== */
        .main-content {
            margin-left: 0;  /* always 0 by default — sidebar adds margin via JS/data-sb */
            margin-top: var(--nav-h);
            padding: 22px 22px 60px; min-height: calc(100vh - var(--nav-h));
            transition: margin-left .3s cubic-bezier(.4,0,.2,1);
        }
        .main-content.sidebar-collapsed { margin-left: 0; }
        @media(max-width:768px){ .main-content { margin-left: 0 !important; padding: 14px 12px 80px !important; } }
        @media(max-width:480px){ .main-content { padding: 10px 10px 80px !important; } }

        /* ===== STORE DASHBOARD MODE ===== */
        main.sd-mode { margin-left: 0 !important; padding: 0 !important; margin-top: var(--nav-h) !important; }
        main.sd-mode .sd-wrap { min-height: calc(100vh - var(--nav-h)); }
        .sd-mode-active #sidebar, .sd-mode-active .sidebar-overlay { display: none !important; }

        /* ===== CARDS ===== */
        .card-custom { background: white; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; }
        .card-header-custom { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: #fafbfc; }
        .card-header-custom h5 { font-weight: 700; margin: 0; font-size: .95rem; }
        .card-body-custom { padding: 18px; }

        /* ===== STAT CARDS ===== */
        .stat-card { background: white; border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); border: 1px solid var(--border); position: relative; overflow: hidden; }
        .stat-card::after { content: ''; position: absolute; right: -15px; top: -15px; width: 80px; height: 80px; border-radius: 50%; opacity: .08; background: currentColor; }
        .stat-card.blue { background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: white; border: none; }
        .stat-card.gold { background: linear-gradient(135deg, #b45309, var(--accent)); color: white; border: none; }
        .stat-card.green { background: linear-gradient(135deg, #065f46, var(--green)); color: white; border: none; }
        .stat-card.red { background: linear-gradient(135deg, #991b1b, var(--red)); color: white; border: none; }
        .stat-value { font-size: 1.65rem; font-weight: 800; font-family: 'Space Grotesk', sans-serif; line-height: 1; }
        .stat-label { font-size: .75rem; opacity: .82; margin-top: 5px; font-weight: 600; }
        .stat-icon { font-size: 1.7rem; opacity: .25; position: absolute; right: 16px; top: 16px; }

        /* ===== CAR CARD ===== */
        .car-card { background: white; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
        .car-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
        .car-card-img { width: 100%; height: 185px; object-fit: cover; background: var(--bg); display: block; }
        .car-card-img-placeholder { width: 100%; height: 185px; background: linear-gradient(135deg, #e8edf5, #f1f5f9); display: flex; align-items: center; justify-content: center; font-size: 3rem; color: #94a3b8; }
        @media(max-width:768px){ .car-card-img, .car-card-img-placeholder { height: 155px; } }

        /* ===== ANNONCE CARD ===== */
        .annonce-card { background: white; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; height: 100%; }
        .annonce-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
        .annonce-img { width: 100%; height: 195px; object-fit: cover; display: block; }
        .annonce-body { padding: 12px 14px; }
        .annonce-price { font-size: 1.1rem; font-weight: 800; color: var(--primary); font-family: 'Space Grotesk', sans-serif; }
        .annonce-title { font-size: .88rem; font-weight: 600; margin-bottom: 6px; }
        @media(max-width:768px){ .annonce-img { height: 145px; } .annonce-body { padding: 8px 10px; } }
        @media(max-width:480px){ .annonce-img { height: 165px; } }

        /* ===== BADGES ===== */
        .badge-fuel { padding: 3px 9px; border-radius: 20px; font-size: .72rem; font-weight: 700; }
        .fuel-essence { background: #fef3c7; color: #92400e; }
        .fuel-gasoil  { background: #dbeafe; color: #1e40af; }
        .fuel-gpl     { background: #dcfce7; color: #166534; }
        .fuel-hybride { background: #f0fdf4; color: #15803d; }
        .fuel-electrique { background: #ede9fe; color: #6b21a8; }

        .etat-badge { padding: 3px 9px; border-radius: 20px; font-size: .72rem; font-weight: 700; }
        .etat-excellent  { background: #dcfce7; color: #166534; }
        .etat-tres_bon   { background: #dbeafe; color: #1e40af; }
        .etat-bon        { background: #fef3c7; color: #92400e; }
        .etat-acceptable { background: #ffedd5; color: #9a3412; }
        .etat-mauvais    { background: #fee2e2; color: #991b1b; }

        .km-badge { background: var(--bg); border-radius: 6px; padding: 2px 8px; font-size: .72rem; font-weight: 600; color: var(--text-muted); }

        /* ===== BUTTONS ===== */
        .btn-primary-custom { background: var(--primary); border: none; color: white; padding: 10px 20px; border-radius: 10px; font-weight: 700; transition: all .2s; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; font-family: inherit; font-size: .9rem; }
        .btn-primary-custom:hover { background: var(--primary-light); color: white; transform: translateY(-1px); box-shadow: 0 4px 15px rgba(30,74,138,.35); }
        .btn-accent-custom { background: var(--accent); border: none; color: white; padding: 10px 20px; border-radius: 10px; font-weight: 700; transition: all .2s; text-decoration: none; display: inline-flex; align-items: center; font-family: inherit; font-size: .9rem; }
        .btn-accent-custom:hover { background: var(--accent-light); color: white; transform: translateY(-1px); }

        /* ===== TABS ===== */
        .tab-nav { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
        .tab-btn { padding: 9px 16px; border: none; background: none; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all .2s; border-radius: 6px 6px 0 0; font-family: inherit; font-size: .88rem; }
        .tab-btn:hover { background: var(--bg); color: var(--primary); }
        .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

        /* ===== TABLE ===== */
        .table-custom { width: 100%; border-collapse: collapse; }
        .table-custom th { padding: 11px 14px; background: var(--bg); font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); font-weight: 700; }
        .table-custom td { padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: .88rem; }
        .table-custom tbody tr:hover { background: #f8fafc; }

        /* ===== MISC ===== */
        .divider { height: 1px; background: var(--border); margin: 14px 0; }
        .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
        .empty-state i { font-size: 3rem; margin-bottom: 12px; opacity: .25; display: block; }
        .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; }
        .page-title { font-size: 1.45rem; font-weight: 800; color: var(--text); font-family: 'Space Grotesk', sans-serif; }
        .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .fw-800 { font-weight: 800; }
        .text-primary-custom { color: var(--primary); } .text-accent { color: var(--accent); }
        .dropdown-menu { border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
        #notifDropdown { z-index: 9999 !important; }
        @media (max-width: 600px) {
          #notifDropdown {
            position: fixed !important;
            top: var(--nav-h) !important;
            left: 0 !important; right: 0 !important;
            width: 100vw !important;
            max-width: 100vw !important;
            border-radius: 0 0 20px 20px !important;
            border-left: none !important; border-right: none !important; border-top: none !important;
            transform: none !important;
            inset: auto !important;
            margin: 0 !important;
          }
          #notifDropdown #notifList {
            max-height: calc(70vh - 110px) !important;
          }
          /* Notification items bigger tap targets */
          #notifDropdown .notif-item {
            padding: 14px 16px !important;
          }
          #notifDropdown .notif-item-title {
            font-size: .9rem !important;
          }
          #notifDropdown .notif-item-time {
            font-size: .75rem !important;
          }
        }
        .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 8px; }
        .photo-grid-item { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 1; }
        .photo-grid-item img { width: 100%; height: 100%; object-fit: cover; }
        .photo-delete-btn { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.6); border: none; color: white; width: 24px; height: 24px; border-radius: 50%; font-size: .7rem; cursor: pointer; display: none; align-items: center; justify-content: center; }
        .photo-grid-item:hover .photo-delete-btn { display: flex; }
        .alert-custom { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: .88rem; }
        .feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 18px; }
        @media(max-width:768px){ .feed-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }
        @media(max-width:480px){ .feed-grid { grid-template-columns: 1fr; } }
        .profile-cover { height: 280px; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(135deg, var(--primary), var(--primary-light)); position: relative; overflow: hidden; }
        .profile-cover img { width: 100%; height: 100%; object-fit: cover; }
        .profile-avatar-wrapper { position: absolute; bottom: -50px; left: 24px; }
        .profile-avatar { width: 100px; height: 100px; border-radius: 50%; border: 4px solid white; object-fit: cover; box-shadow: var(--shadow); }
        .profile-info { padding: 60px 24px 20px; }
        .profile-name { font-size: 1.5rem; font-weight: 800; font-family: 'Space Grotesk', sans-serif; }
        .profile-bio { color: var(--text-muted); margin-top: 4px; }

        /* ===== MOBILE BOTTOM NAV ===== */
        .mobile-bottom-nav {
            display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1100;
            background: var(--card);
            border-top: 1px solid var(--border);
            box-shadow: 0 -2px 20px rgba(0,0,0,.09);
            height: calc(58px + env(safe-area-inset-bottom, 0px));
        }
        .mobile-bottom-nav-inner {
            display: grid; grid-template-columns: repeat(5, 1fr);
            height: 58px; align-items: stretch;
        }

        /* ── Regular items ── */
        .mbn-item {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 4px; text-decoration: none;
            color: var(--text-muted); font-size: .56rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: .4px;
            width: 100%; padding: 6px 2px;
            transition: color .15s; position: relative;
            -webkit-tap-highlight-color: transparent;
        }
        .mbn-item i { font-size: 1.15rem; line-height: 1; }
        .mbn-item.active { color: var(--primary); }
        .mbn-item.active::after {
            content: ''; position: absolute; bottom: 5px;
            left: 50%; transform: translateX(-50%);
            width: 4px; height: 4px; border-radius: 50%;
            background: var(--primary);
        }

        /* ── FAB center ── */
        .mbn-fab {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 4px; cursor: pointer; border: none; background: none;
            padding: 0; font-family: inherit; width: 100%;
            -webkit-tap-highlight-color: transparent;
        }
        .mbn-fab-circle {
            width: 48px; height: 48px; border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            color: white; display: flex; align-items: center; justify-content: center;
            font-size: 1.2rem;
            box-shadow: 0 4px 14px rgba(15,39,68,.35);
            transition: transform .2s, box-shadow .2s;
            margin-top: -18px;
            border: 3px solid var(--card);
        }
        .mbn-fab.open .mbn-fab-circle,
        .mbn-fab:active .mbn-fab-circle { transform: rotate(45deg) scale(1.05); box-shadow: 0 6px 20px rgba(15,39,68,.45); }
        .mbn-fab-label { font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }

        /* ── Back button (replaces Profil on detail page) ── */
        .mbn-back-btn {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 4px; width: 100%; padding: 6px 2px;
            color: var(--primary); font-size: .56rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: .4px;
            border: none; background: none; cursor: pointer;
            font-family: inherit;
            -webkit-tap-highlight-color: transparent; transition: opacity .15s;
        }
        .mbn-back-btn i { font-size: 1.15rem; line-height: 1; }
        .mbn-back-btn:active { opacity: .65; }

        /* Action sheet */
        .action-sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 2000; display: none; backdrop-filter: blur(2px); }
        .action-sheet-overlay.open { display: block; }
        .action-sheet { position: fixed; bottom: 0; left: 0; right: 0; z-index: 2001; background: white; border-radius: 20px 20px 0 0; padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 80px); box-shadow: 0 -8px 40px rgba(0,0,0,.18); transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); }
        .action-sheet.open { transform: translateY(0); }
        .action-sheet-handle { width: 36px; height: 4px; background: var(--border); border-radius: 2px; margin: 0 auto 16px; }
        .action-sheet-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); margin-bottom: 10px; }

        /* Car selector inside sheet */
        .as-car-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 14px; scrollbar-width: none; }
        .as-car-scroll::-webkit-scrollbar { display: none; }
        .as-car-chip { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 20px; border: 2px solid var(--border); background: white; font-size: .8rem; font-weight: 700; color: var(--text); cursor: pointer; font-family: inherit; transition: all .15s; white-space: nowrap; }
        .as-car-chip.selected { border-color: var(--primary-light); background: #eff6ff; color: var(--primary-light); }
        .as-car-chip i { font-size: .75rem; }

        /* Action grid */
        .as-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
        .as-action { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; text-decoration: none; font-weight: 700; font-size: .9rem; transition: transform .12s, box-shadow .12s; }
        .as-action:active { transform: scale(.97); }
        .as-action i { font-size: 1.3rem; width: 28px; text-align: center; }
        .as-action-sub { font-size: .72rem; font-weight: 500; opacity: .7; }
        .as-action.fuel    { background: #fff8ec; color: #b45309; }
        .as-action.service { background: #f0f0ff; color: #4338ca; }
        .as-action.docs    { background: #ecfdf5; color: #047857; }
        .as-action.history { background: #f0f9ff; color: #0369a1; }
        .as-action.sell    { background: linear-gradient(135deg,var(--primary),var(--primary-light)); color: white; grid-column: span 2; justify-content: center; padding: 14px; }
        .as-action.sell i  { color: var(--accent); }

        @media(max-width:768px){ .mobile-bottom-nav { display: block; } }
        /* Search button — same structure as mbn-item */
        .mbn-search-btn {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 4px; width: 100%; padding: 6px 2px;
            color: var(--text-muted); font-size: .56rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: .4px;
            border: none; background: none; cursor: pointer; font-family: inherit;
            -webkit-tap-highlight-color: transparent; transition: color .15s;
        }
        .mbn-search-btn i { font-size: 1.15rem; line-height: 1; }
        .mbn-search-btn:active { color: var(--primary); }
        /* No bottom nav padding for unauthenticated users */
        @media(max-width:768px){ body { padding-bottom: 0 !important; } }

        .spinner { display: inline-block; width: 18px; height: 18px; border: 3px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: white; animation: spin .8s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ===== NAVBAR QUICK ACTION BAR ===== */
        .nav-quick-bar {
            flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
            min-width: 0;
        }
        .nav-car-selector { position: relative; flex-shrink: 0; }
        .nav-car-btn {
            display: flex; align-items: center; gap: 7px;
            background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
            border-radius: 9px; padding: 6px 11px; color: white; cursor: pointer;
            font-family: inherit; font-size: .82rem; font-weight: 600;
            transition: all .15s; white-space: nowrap; max-width: 200px;
        }
        .nav-car-btn:hover { background: rgba(255,255,255,.2); }
        .nav-car-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .nav-car-dropdown {
            position: absolute; top: calc(100% + 8px); left: 0;
            background: white; border-radius: 12px; padding: 6px;
            box-shadow: 0 12px 40px rgba(0,0,0,.18); min-width: 200px;
            border: 1px solid var(--border); z-index: 3000;
            display: none; flex-direction: column; gap: 2px;
        }
        .nav-car-dropdown.open { display: flex; }
        .nav-car-option {
            display: flex; align-items: center; gap: 8px;
            padding: 8px 10px; border-radius: 8px; font-size: .82rem;
            font-weight: 600; color: var(--text); cursor: pointer;
            border: none; background: none; font-family: inherit;
            text-decoration: none; transition: background .12s; text-align: left;
        }
        .nav-car-option:hover { background: var(--bg); }
        .nav-car-option.selected { background: #eff6ff; color: var(--primary-light); }

        /* Action buttons */
        .nav-actions { display: flex; align-items: center; gap: 4px; }
        .nav-action-btn {
            display: flex; align-items: center; gap: 5px;
            padding: 6px 11px; border-radius: 9px; font-size: .78rem;
            font-weight: 700; text-decoration: none; transition: all .15s;
            white-space: nowrap; border: 1px solid transparent;
        }
        .nav-action-btn i { font-size: .8rem; }
        .nav-action-btn.fuel   { background: rgba(245,158,11,.2);  color: #f59e0b; border-color: rgba(245,158,11,.3); }
        .nav-action-btn.fuel:hover   { background: #f59e0b; color: white; }
        .nav-action-btn.service { background: rgba(99,102,241,.2); color: #6366f1; border-color: rgba(99,102,241,.3); }
        .nav-action-btn.service:hover { background: #6366f1; color: white; }
        .nav-action-btn.docs    { background: rgba(16,185,129,.2); color: #10b981; border-color: rgba(16,185,129,.3); }
        .nav-action-btn.docs:hover    { background: #10b981; color: white; }
        .nav-action-btn.history { background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.2); }
        .nav-action-btn.history:hover { background: rgba(255,255,255,.25); color: white; }
        .nav-action-btn span { display: inline; }

        /* Hide labels on small screens, keep icons */
        @media(max-width:1100px) { .nav-action-btn span { display: none; } .nav-action-btn { padding: 6px 9px; } }
        @media(max-width:860px)  { .nav-actions { display: none; } }
        @media(max-width:600px)  { .nav-car-btn { max-width: 130px; font-size: .75rem; padding: 5px 8px; } }

        /* ===== AUTH MODALS ===== */
        .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9000; display:none; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(3px); }
        .modal-overlay.open { display:flex; }
        .modal-box { background:white; border-radius:18px; padding:36px 32px; width:100%; max-width:420px; max-height:90vh; overflow-y:auto; position:relative; box-shadow:0 24px 64px rgba(0,0,0,.25); animation:slideUp .25s ease; }
        @keyframes slideUp { from { transform:translateY(20px); opacity:0; } to { transform:none; opacity:1; } }
        .modal-close { position:absolute; top:14px; right:16px; background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--text-muted); line-height:1; }
        .modal-title { font-size:1.3rem; font-weight:900; margin:0 0 6px; color:var(--primary); font-family:'Space Grotesk',sans-serif; }
        .modal-sub { font-size:.85rem; color:var(--text-muted); margin:0 0 22px; }
        .modal-switch { text-align:center; margin-top:18px; font-size:.85rem; color:var(--text-muted); }
        .modal-switch a { color:var(--primary-light); font-weight:700; cursor:pointer; text-decoration:none; }
        .modal-forgot-link { display:block; text-align:right; margin-top:6px; font-size:.82rem; font-weight:600; color:#2563a8 !important; text-decoration:none; }
        [data-theme="dark"] .modal-forgot-link { color:#4d8fea !important; }

        /* ===== MOBILE AUTH BUTTON (logout) ===== */

/* ===== MOBILE SEARCH OVERLAY — TikTok style ===== */

        /* Trigger button in navbar */
        .mob-search-trigger {
            display: none;
            width: 38px; height: 38px; border-radius: 10px;
            background: rgba(255,255,255,.12); border: none;
            color: white; font-size: 1rem; cursor: pointer;
            align-items: center; justify-content: center;
            flex-shrink: 0;
            -webkit-tap-highlight-color: transparent;
            transition: background .13s;
        }
        .mob-search-trigger:active { background: rgba(255,255,255,.26); transform: scale(.92); }
        @media(max-width:768px){ .mob-search-trigger { display: flex; } }

        /* Full-screen overlay */
        .mob-search-overlay {
            position: fixed; inset: 0; z-index: 3000;
            background: var(--card);
            display: none; flex-direction: column;
            transform: translateY(100%);
            transition: transform .28s cubic-bezier(.4,0,.2,1);
        }
        .mob-search-overlay.open {
            display: flex;
            transform: translateY(0);
        }

        /* Top bar */
        .msearch-topbar {
            display: flex; align-items: center; gap: 8px;
            padding: 10px 12px;
            padding-top: calc(10px + env(safe-area-inset-top, 0px));
            border-bottom: 1px solid var(--border);
            flex-shrink: 0; background: var(--card);
        }
        .msearch-back {
            width: 40px; height: 40px; border-radius: 50%;
            background: none; border: none; cursor: pointer;
            color: var(--text); font-size: 1.05rem; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            -webkit-tap-highlight-color: transparent; transition: background .13s;
        }
        .msearch-back:active { background: var(--bg); }
        .msearch-input-wrap {
            flex: 1; display: flex; align-items: center; gap: 8px;
            background: var(--bg); border: 1.5px solid var(--border);
            border-radius: 12px; padding: 0 12px; height: 44px;
            transition: border-color .15s, box-shadow .15s;
        }
        .msearch-input-wrap:focus-within {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
        }
        .msearch-input-wrap i.si { color: var(--text-muted); font-size: .88rem; flex-shrink: 0; }
        .msearch-input-wrap input {
            flex: 1; background: none; border: none; outline: none;
            font-size: 1rem; font-family: inherit; color: var(--text);
            height: 44px; caret-color: var(--primary); min-width: 0;
        }
        .msearch-input-wrap input::placeholder { color: var(--text-muted); }
        #mobSearchClear {
            background: none; border: none; color: var(--text-muted);
            font-size: .9rem; cursor: pointer; padding: 4px; flex-shrink: 0;
            display: none; -webkit-tap-highlight-color: transparent;
            border-radius: 50%; transition: background .12s;
        }
        #mobSearchClear:active { background: var(--border); }

        /* Scrollable body */
        .msearch-body {
            flex: 1; overflow-y: auto; padding: 18px 14px 80px;
            scrollbar-width: none;
        }
        .msearch-body::-webkit-scrollbar { display: none; }

        /* Section label */
        .msearch-label {
            font-size: .62rem; font-weight: 900; text-transform: uppercase;
            letter-spacing: .9px; color: var(--text-muted);
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 10px;
        }
        .msearch-label button {
            font-size: .72rem; font-weight: 700; color: var(--primary);
            background: none; border: none; cursor: pointer;
            font-family: inherit; text-transform: none; letter-spacing: 0;
            -webkit-tap-highlight-color: transparent;
        }

        /* Recent searches */
        .msearch-recent { margin-bottom: 24px; }
        .msearch-recent-item {
            display: flex; align-items: center; gap: 12px;
            padding: 10px 6px; cursor: pointer;
            border-bottom: 1px solid var(--border);
            -webkit-tap-highlight-color: transparent;
            transition: background .12s; border-radius: 4px;
        }
        .msearch-recent-item:last-child { border-bottom: none; }
        .msearch-recent-item:active { background: var(--bg); }
        .msearch-recent-icon {
            width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
            background: var(--bg); border: 1px solid var(--border);
            display: flex; align-items: center; justify-content: center;
            color: var(--text-muted); font-size: .82rem;
        }
        .msearch-recent-text { flex: 1; font-size: .92rem; font-weight: 600; color: var(--text); }
        .msearch-recent-del {
            background: none; border: none; color: var(--text-muted);
            font-size: .75rem; cursor: pointer; padding: 6px;
            border-radius: 50%; -webkit-tap-highlight-color: transparent;
            transition: background .12s, color .12s; flex-shrink: 0;
        }
        .msearch-recent-del:active { background: var(--border); color: var(--text); }

        /* Trending */
        .msearch-trending { margin-bottom: 16px; }
        .msearch-trend-item {
            display: flex; align-items: center; gap: 12px;
            padding: 11px 6px; cursor: pointer;
            border-bottom: 1px solid var(--border);
            -webkit-tap-highlight-color: transparent;
            transition: background .12s; border-radius: 4px; font-family: inherit;
            background: none; border-left: none; border-right: none; border-top: none;
            width: 100%; text-align: left;
        }
        .msearch-trend-item:last-child { border-bottom: none; }
        .msearch-trend-item:active { background: var(--bg); }
        .msearch-trend-num {
            width: 24px; font-size: .8rem; font-weight: 900;
            color: var(--primary); text-align: center; flex-shrink: 0;
        }
        .msearch-trend-num.hot { color: #ef4444; }
        .msearch-trend-text { flex: 1; font-size: .92rem; font-weight: 600; color: var(--text); }
        .msearch-trend-badge {
            font-size: .6rem; font-weight: 800; padding: 2px 7px;
            border-radius: 20px; flex-shrink: 0;
        }
        .msearch-trend-badge.up { background: #f0fdf4; color: #16a34a; }
        .msearch-trend-badge.hot { background: #fef2f2; color: #ef4444; }
        [data-theme="dark"] .msearch-trend-badge.up  { background: #052e16; color: #86efac; }
        [data-theme="dark"] .msearch-trend-badge.hot { background: #2d0000; color: #fca5a5; }

        /* Results */
        .mob-suggest-list { overflow: hidden; }
        .mob-suggest-list:empty { display: none; }
        #mobSuggestList .ns-result { padding: 11px 8px; min-height: 54px; border-bottom: 1px solid var(--border); border-radius: 0; }
        #mobSuggestList .ns-result:last-of-type { border-bottom: none; }
        #mobSuggestList .ns-result-thumb { width: 52px; height: 38px; border-radius: 8px; }
        #mobSuggestList .ns-footer {
            padding: 14px 8px; font-weight: 700; font-size: .84rem;
            color: var(--primary); display: flex; align-items: center; gap: 6px;
            border-top: 1px solid var(--border); text-decoration: none;
        }
        .msearch-count {
            font-size: .68rem; font-weight: 800; color: var(--text-muted);
            text-transform: uppercase; letter-spacing: .6px;
            padding: 0 0 10px; margin-bottom: 2px;
        }
        .ns-result-title strong { color: var(--accent); font-weight: 800; }

        /* Dark mode */
        [data-theme="dark"] .mob-search-overlay { background: #111827; }
        [data-theme="dark"] .msearch-topbar { background: #111827; border-color: #1f2d40; }
        [data-theme="dark"] .msearch-input-wrap { background: #1a2236; border-color: #2d3f5c; }

        /* sb-sticky-foot is replaced by .sb-foot (see above) */
    

/* ── */


        /* ── Share Sheet Modal ── */
        #shareSheet {
            position: fixed; inset: 0; z-index: 3000;
            background: rgba(0,0,0,.5); display: none;
            align-items: flex-end; justify-content: center;
        }
        #shareSheet.open { display: flex; }
        #shareSheetPanel {
            background: white; border-radius: 28px 28px 0 0;
            padding: 0 0 env(safe-area-inset-bottom, 20px);
            width: 100%; max-width: 520px;
            box-shadow: 0 -8px 48px rgba(0,0,0,.18);
            transform: translateY(100%);
            transition: transform .32s cubic-bezier(.4,0,.2,1);
        }
        [data-theme="dark"] #shareSheetPanel { background: #1c1e21; }
        #shareSheet.open #shareSheetPanel { transform: translateY(0); }
        .ss-handle {
            width: 36px; height: 4px; border-radius: 2px;
            background: #dde0e6; margin: 14px auto 0;
        }
        .ss-title {
            font-weight: 800; font-size: 1rem; line-height: 1.35;
            padding: 18px 22px 16px;
            color: #1a1a2e;
        }
        [data-theme="dark"] .ss-title { color: #e2e8f0; }
        /* 4 equal columns */
        .ss-actions {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            padding: 0 18px 16px;
        }
        .ss-btn {
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            gap: 9px; padding: 16px 6px 14px;
            border-radius: 18px; border: 1.5px solid #e8eaf0;
            background: #f5f7fa; cursor: pointer;
            font-size: .74rem; font-weight: 700; line-height: 1;
            color: #333; text-decoration: none;
            transition: transform .12s, box-shadow .12s;
            box-shadow: 0 1px 4px rgba(0,0,0,.06);
        }
        .ss-btn:hover  { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
        .ss-btn:active { transform: scale(.95); }
        .ss-btn i { font-size: 1.75rem; }
        /* WhatsApp — green */
        .ss-btn.ss-wa { background: #e6f9ee; border-color: #9de8bc; color: #1a7a45; }
        /* Telegram — sky blue */
        .ss-btn.ss-tg { background: #e8f4fd; border-color: #93c5fd; color: #1558b0; }
        /* Facebook — blue */
        .ss-btn.ss-fb { background: #eef2ff; border-color: #a5b4fc; color: #3b4fa8; }
        /* Copy — grey */
        .ss-btn.ss-cp { background: #f0f2f5; border-color: #d1d5db; color: #444; }
        .ss-btn.ss-cp.copied { background: #e6f9ee; border-color: #9de8bc; color: #1a7a45; }
        [data-theme="dark"] .ss-btn     { background: #2d2f33; border-color: #334155; color: #e2e8f0; }
        [data-theme="dark"] .ss-btn.ss-wa { background: #0d2b1a; border-color: #166534; color: #4ade80; }
        [data-theme="dark"] .ss-btn.ss-tg { background: #0c2240; border-color: #1d4ed8; color: #93c5fd; }
        [data-theme="dark"] .ss-btn.ss-fb { background: #161d3a; border-color: #3b4fa8; color: #a5b4fc; }
        [data-theme="dark"] .ss-btn.ss-cp.copied { background: #0d2b1a; border-color: #166534; color: #4ade80; }
        /* URL box */
        .ss-url {
            margin: 0 18px 16px;
            padding: 11px 14px;
            background: #f0f2f5;
            border: 1px solid #e0e3eb;
            border-radius: 12px;
            font-size: .73rem; color: #666;
            word-break: break-all; font-family: monospace; line-height: 1.45;
        }
        [data-theme="dark"] .ss-url { background: #2d2f33; border-color: #334155; color: #94a3b8; }
        /* QR */
        .ss-qr-wrap { padding: 0 18px 24px; text-align: center; }
        .ss-qr-wrap canvas {
            border-radius: 16px; border: 1.5px solid #e0e3eb;
            padding: 12px; background: white;
            display: block; margin: 0 auto;
            width: 180px; height: 180px;
        }
        .ss-qr-label { font-size: .73rem; color: #888; margin-top: 10px; font-weight: 600; }
    

/* ── */

@keyframes sonarSb{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6);}70%{box-shadow:0 0 0 7px rgba(34,197,94,0);}100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}}

/* ── */


@keyframes confirmPop {
  from { transform: scale(.85); opacity:0; }
  to   { transform: scale(1);   opacity:1; }
}
[data-theme="dark"] #confirmBox {
  background: #1c1e21; box-shadow: 0 24px 64px rgba(0,0,0,.6);
}
[data-theme="dark"] #confirmTitle { color: #e2e8f0; }
[data-theme="dark"] #confirmMsg   { color: #94a3b8; }
[data-theme="dark"] #confirmCancel {
  background: #2d2f33; border-color: #334155; color: #e2e8f0;
}