/* Dark Mode Styles */
body.dark-mode {
    --bg: #121212;
    --surface: #1e1e1e;
    --surface-2: #2a2a2a;
    --border: #333333;
    --border-strong: #444444;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-muted: #808080;
    /* Override local page-level tokens so no page uses black text */
    --text-1: #e0e0e0;
    --text-2: #b0b0b0;
    --text-3: #808080;
    /* Override amber/accent tokens — prevents #fef3c7 (light yellow) leaking
       through on any element that uses var(--accent-light) without an explicit rule */
    --accent-light:  rgba(217,119,6,.14);
    --accent-border: rgba(253,211,77,.28);
    background-color: var(--bg);
    color: var(--text-primary);
}

/* Amber/yellow buttons need dark text for adequate contrast on solid amber background */
body.dark-mode .btn-kl-amber        { background-color: #b45309; color: #fff; }
body.dark-mode .btn-kl-amber:hover  { background-color: #92400e; color: #fff; }

body.dark-mode .navbar-custom {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #333;
}

body.dark-mode .navbar-custom .nav-link,
body.dark-mode .navbar-custom .navbar-toggler-icon,
body.dark-mode .navbar-custom .navbar-brand {
    color: #e0e0e0 !important;
}

body.dark-mode .offcanvas,
body.dark-mode .offcanvas-header,
body.dark-mode .offcanvas-body {
    background-color: var(--surface) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .offcanvas-title {
    color: var(--text-primary) !important;
}

body.dark-mode #loading-overlay {
    background-color: var(--bg) !important;
}

body.dark-mode .card,
body.dark-mode .profile-sidebar-card,
body.dark-mode .tab-content-wrapper,
body.dark-mode .info-card,
body.dark-mode .dashboard-charts-wrap,
body.dark-mode .journey-card,
body.dark-mode .modal-content {
    background-color: var(--surface);
    border-color: var(--border);
}

body.dark-mode .item-card:hover {
    border-color: var(--red);
}

body.dark-mode .dropdown-menu {
    background-color: var(--surface);
    border-color: var(--border);
}

body.dark-mode .dropdown-item {
    color: var(--text-primary);
}

body.dark-mode .dropdown-item:hover {
    background-color: var(--surface-2);
}

body.dark-mode .nav-tabs .nav-link.active {
    background-color: transparent;
    color: var(--red);
    border-bottom-color: var(--red);
}

body.dark-mode .nav-tabs .nav-link:hover {
    background-color: var(--surface-2);
}

body.dark-mode .form-control {
    background-color: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

body.dark-mode .stat-chip {
    background-color: var(--surface-2);
}

body.dark-mode .journey-badges-panel {
    background-color: var(--surface);
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    background-color: var(--surface-2);
}

body.dark-mode .detail-stat-tile {
    background-color: var(--surface-2);
    border-color: var(--border);
}

body.dark-mode .detail-stat-tile.accent-tile { background-color: #1e3a8a; border-color: #1d4ed8; }
body.dark-mode .detail-stat-tile.value-tile { background-color: #451a03; border-color: #92400e; }
body.dark-mode .detail-stat-tile.notes-tile { background-color: #451a03; border-color: #92400e; }

body.dark-mode .marketplace-info-box {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
    border-color: #059669;
}

/* ── Profile page ─────────────────────────────────────────── */
body.dark-mode .profile-tabs-wrapper { background-color: var(--surface); border-color: var(--border); }
body.dark-mode #myProfileTabs        { border-color: var(--border); }
body.dark-mode .profile-sidebar-body { background-color: var(--surface); }
body.dark-mode .info-card            { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .item-card            { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .listing-card         { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .listing-card:hover   { border-color: var(--red); }
body.dark-mode .train-card           { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .train-card-header    { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .loco-row             { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .wagon-chip           { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .chart-container      { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .collector-item       { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .collector-item:hover { background-color: rgba(227,0,0,.1); border-color: var(--red); }
body.dark-mode .badge-pill.locked    { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .badge-pill.earned    { background-color: var(--surface); }
body.dark-mode .detail-stat-tile.accent-tile .dst-value { color: #93c5fd; }
body.dark-mode .detail-stat-tile.notes-tile .dst-value  { color: #fcd34d; }
body.dark-mode .btn-secondary        { background-color: var(--surface-2); color: var(--text-secondary); border-color: var(--border); }
body.dark-mode .btn-secondary:hover  { background-color: var(--border); color: var(--text-primary); }
body.dark-mode .sidebar-divider      { border-color: var(--border); }
body.dark-mode .section-header-line  { background-color: var(--border); }
body.dark-mode .alert-info           { background-color: rgba(227,0,0,.12); color: #f87171; }
body.dark-mode .alert-success        { background-color: rgba(5,150,105,.12); color: #6ee7b7; }
body.dark-mode select option         { background-color: var(--surface-2); color: var(--text-primary); }
body.dark-mode .modal-close-btn      { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .modal-close-btn:hover{ background-color: var(--border); color: var(--text-primary); }
body.dark-mode .btn-modal-nav        { background-color: var(--surface); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-modal-nav:hover:not([disabled]) { background-color: rgba(227,0,0,.1); border-color: var(--red); color: var(--red); }
body.dark-mode .wishlist-value-banner         { background-color: #2d1f00; border-color: #78350f; }
body.dark-mode .wishlist-value-banner span    { color: #fcd34d; }
body.dark-mode .wishlist-value-banner strong  { color: #fde68a; }

/* ── Welcome Hero ─────────────────────────────────────────── */
body.dark-mode .welcome-hero            { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .welcome-greeting        { color: var(--text-primary); }
body.dark-mode .welcome-meta            { color: var(--text-muted); }
body.dark-mode .welcome-meta-sep        { background: var(--border-strong); }
body.dark-mode .welcome-rank-pill       { background: rgba(227,0,0,.15); color: #f87171; border-color: rgba(227,0,0,.3); }
body.dark-mode .welcome-stat            { border-right-color: var(--border); }
body.dark-mode .welcome-stat-value      { color: var(--text-primary); }
body.dark-mode .welcome-stat-value.accent  { color: #fcd34d; }
body.dark-mode .welcome-stat-value.primary { color: #f87171; }
body.dark-mode .welcome-stat-label      { color: var(--text-muted); }
body.dark-mode .btn-edit-profile        { background: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-edit-profile:hover  { background: rgba(227,0,0,.1); border-color: rgba(227,0,0,.35); color: #f87171; }

/* ── Dashboard charts wrap ────────────────────────────────── */
body.dark-mode .dashboard-charts-wrap   { /* inherits via chart-container rule */ }
body.dark-mode .dashboard-charts-title  { color: var(--text-muted); }
body.dark-mode .btn-full-stats          { background: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-full-stats:hover    { background: rgba(227,0,0,.1); border-color: rgba(227,0,0,.35); color: #f87171; }

/* ── Collectors 2×2 grid ──────────────────────────────────── */
body.dark-mode .cug-item                { background: var(--surface-2); border-color: var(--border); }
body.dark-mode .cug-item:hover          { background: rgba(227,0,0,.1); border-color: rgba(227,0,0,.35); }
body.dark-mode .cug-avatar              { border-color: var(--rc, var(--border)); }
body.dark-mode .cug-item:hover .cug-avatar { border-color: var(--red); }
body.dark-mode .cug-name                { color: var(--text-primary); }
body.dark-mode .cug-count               { color: var(--text-muted); }
body.dark-mode .collectors-find-link    { color: var(--text-muted); border-color: var(--border); }
body.dark-mode .collectors-find-link:hover { color: #f87171; border-color: rgba(227,0,0,.35); background: rgba(227,0,0,.08); }
body.dark-mode .form-control:focus            { background-color: var(--surface); border-color: var(--red); color: var(--text-primary); }
body.dark-mode .pagination .page-link         { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .pagination .page-link:hover   { background-color: rgba(227,0,0,.12); color: var(--red); border-color: var(--red); }
body.dark-mode .pagination .page-item.active .page-link   { background-color: var(--red); border-color: var(--red); color: #fff; }
body.dark-mode .pagination .page-item.disabled .page-link { color: var(--text-muted); background-color: var(--surface-2); }

/* ── View (Rolling Stock) page ────────────────────────────── */
body.dark-mode .page-wrapper          { background-color: var(--bg); }
body.dark-mode .view-tabs-row         { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .nav-tabs              { border-color: var(--border); }
body.dark-mode .sort-select           { background-color: var(--surface-2); color: var(--text-primary); border-color: var(--border-strong); }
body.dark-mode .sort-select:focus,
body.dark-mode .sort-select:hover     { border-color: var(--red); }
body.dark-mode .sort-wrap::after      { border-top-color: var(--text-muted); }
body.dark-mode .sort-icon             { color: var(--text-muted); }
body.dark-mode h2                     { color: var(--text-primary); }
body.dark-mode .item-card             { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .item-card:hover       { border-color: var(--red); }
body.dark-mode .item-card .card-title { color: var(--text-primary); }
body.dark-mode .item-card .card-text  { color: var(--text-secondary); }
body.dark-mode .card-body             { background-color: var(--surface); }
body.dark-mode .in-collection         { border-color: rgba(227,0,0,.5); }
body.dark-mode #locomotiveModal .modal-content  { background-color: var(--surface); }
body.dark-mode #locomotiveModal .modal-body     { background-color: var(--surface); }
body.dark-mode #locomotiveModal .modal-footer   { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .dst-tile              { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .dst-tile-blue         { background-color: #0d1b3e; border-color: #1e3a6e; }
body.dark-mode .dst-tile-blue .dst-value { color: #93c5fd; }
body.dark-mode .dst-label             { color: var(--text-muted); }
body.dark-mode .dst-value             { color: var(--text-primary); }
body.dark-mode .modal-details-wrap    { border-color: var(--border); }
body.dark-mode .modal-details-text    { color: var(--text-secondary); }
body.dark-mode .modal-add-row         { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .modal-qty-group label { color: var(--text-muted); }
body.dark-mode .modal-qty-group input { background-color: var(--surface); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .btn-nav               { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-nav:hover:not([disabled]) { background-color: rgba(227,0,0,.1); border-color: var(--red); color: var(--red); }
body.dark-mode .btn-modal-close       { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-modal-close:hover { background-color: var(--border); color: var(--text-primary); }
body.dark-mode .modal-nav-counter     { color: var(--text-muted); }
body.dark-mode .own-pill              { border-color: var(--border); }
body.dark-mode .own-collection        { background-color: rgba(5,150,105,.15); color: #6ee7b7; border-color: rgba(5,150,105,.3); }
body.dark-mode .own-wishlist          { background-color: rgba(245,158,11,.15); color: #fcd34d; border-color: rgba(245,158,11,.3); }
body.dark-mode .see-more-btn          { color: var(--red); }
body.dark-mode .loading-state         { color: var(--text-muted); }
body.dark-mode .loading-spinner       { border-color: var(--border); border-top-color: var(--red); }
body.dark-mode .pagination .page-link         { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .pagination .page-link:hover   { background-color: rgba(227,0,0,.12); color: var(--red); border-color: var(--red); }
body.dark-mode .pagination .page-item.active .page-link   { background-color: var(--red); border-color: var(--red); color: #fff; }
body.dark-mode .pagination .page-item.disabled .page-link { color: var(--text-muted); background-color: var(--surface-2); }

/* ── Members page ─────────────────────────────────────────── */
body.dark-mode .stats-bar             { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .stat-label            { color: var(--text-muted); }
body.dark-mode .stat-value            { color: var(--text-primary); }
body.dark-mode .stat-divider          { background-color: var(--border); }
body.dark-mode #search-form .form-control   { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode #search-form .form-control:focus { background-color: var(--surface); border-color: var(--red); }
body.dark-mode #country-select.form-control { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode #country-select.form-control:focus { background-color: var(--surface); border-color: var(--red); }
body.dark-mode #sort-select.form-control    { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode #sort-select.form-control:focus { background-color: var(--surface); border-color: var(--red); }
body.dark-mode .nav-tabs .nav-link          { color: var(--text-muted); }
body.dark-mode .nav-tabs .nav-link:hover    { color: var(--red); background-color: rgba(227,0,0,.08); }
body.dark-mode .nav-tabs .nav-link.active   { color: var(--red) !important; border-bottom-color: var(--red) !important; }
body.dark-mode .nav-tabs .nav-link .tab-count { background-color: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .nav-tabs .nav-link.active .tab-count { background-color: rgba(227,0,0,.12); border-color: rgba(227,0,0,.3); color: var(--red); }
body.dark-mode .user-card             { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .user-card:hover       { border-color: var(--red); }
body.dark-mode .user-info .user-link  { color: var(--text-primary); }
body.dark-mode .user-card:hover .user-link { color: var(--red); }
body.dark-mode .collection-info       { color: var(--text-muted); }
body.dark-mode .collection-info i     { color: var(--text-muted); }
body.dark-mode .rank-number           { background-color: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border-strong); }
body.dark-mode .online-dot-card       { border-color: var(--surface); }
body.dark-mode .new-badge             { background-color: var(--red); }
body.dark-mode .mutual-badge          { background: rgba(37,99,235,.15); border-color: rgba(147,197,253,.25); color: #93c5fd; }
body.dark-mode .favorite-icon         { color: var(--border-strong); }
body.dark-mode .favorite-icon:hover   { color: #f7b500; background-color: rgba(247,181,0,.12); }
body.dark-mode .favorite-icon.favorited { color: #f7b500; }
body.dark-mode .custom-message-box    { background-color: var(--surface); border-color: var(--border); box-shadow: 0 20px 48px rgba(0,0,0,.5); }
body.dark-mode .custom-message-box p  { color: var(--text-secondary); }
body.dark-mode #end-of-results        { color: var(--text-muted); }
body.dark-mode select option          { background-color: var(--surface-2); color: var(--text-primary); }

/* ── View User (Profile) page ─────────────────────────── */
body.dark-mode .profile-sidebar-card   { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .profile-sidebar-body   { background-color: var(--surface); }
body.dark-mode .profile-name           { color: var(--text-primary); }
body.dark-mode .profile-username       { color: var(--text-muted); }
body.dark-mode .profile-meta           { color: var(--text-muted); }
body.dark-mode .rank-badge             { border-color: var(--border); }
body.dark-mode .rank-badge.rank        { background-color: var(--surface-2); color: var(--text-secondary); }
body.dark-mode .btn-msg                { background-color: var(--surface-2); border-color: var(--border); color: var(--text-primary); }
body.dark-mode .btn-msg:hover          { border-color: var(--red); color: var(--red); }
body.dark-mode .btn-fav                { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-fav.favorited      { background-color: rgba(247,181,0,.12); border-color: rgba(247,181,0,.4); color: #f7b500; }
body.dark-mode .btn-share              { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .collectors-widget-title{ color: var(--text-primary); }
body.dark-mode .collectors-widget-count{ color: var(--text-muted); }
body.dark-mode .collector-item         { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .collector-item:hover   { background-color: rgba(227,0,0,.1); border-color: var(--red); }
body.dark-mode .collector-name         { color: var(--text-secondary); }
body.dark-mode .sidebar-divider        { border-color: var(--border); }
body.dark-mode .stat-chips             { background-color: transparent; }
body.dark-mode .stat-chip              { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .stat-chip-label        { color: var(--text-muted); }
body.dark-mode .stat-chip-value        { color: var(--text-primary); }
body.dark-mode .profile-tabs-wrapper   { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .tab-content-wrapper    { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .nav-tabs               { border-color: var(--border); }
body.dark-mode .nav-tabs .nav-link     { color: var(--text-muted); }
body.dark-mode .nav-tabs .nav-link:hover { color: var(--red); }
body.dark-mode .nav-tabs .nav-link.active { color: var(--red) !important; border-bottom-color: var(--red) !important; }
body.dark-mode .section-header-title   { color: var(--text-primary); }
body.dark-mode .section-header-line    { background-color: var(--border); }
body.dark-mode .vu-empty               { color: var(--text-muted); }
body.dark-mode .vu-loading             { color: var(--text-muted); }
body.dark-mode .vu-spinner             { border-color: var(--border); border-top-color: var(--red); }
body.dark-mode .item-card              { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .item-card:hover        { border-color: var(--red); }
body.dark-mode .item-card .card-title  { color: var(--text-primary); }
body.dark-mode .item-card .card-text   { color: var(--text-secondary); }
body.dark-mode .card-owned-badge       { background-color: rgba(5,150,105,.15); color: #6ee7b7; }
body.dark-mode .train-card             { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .train-card-header      { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .train-card-name        { color: var(--text-primary); }
body.dark-mode .train-card-badge       { background-color: var(--surface-2); color: var(--text-muted); border-color: var(--border); }
body.dark-mode .loco-row               { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .loco-model             { color: var(--text-primary); }
body.dark-mode .loco-tag               { background-color: var(--surface); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .wagon-chip             { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .wagon-chip-model       { color: var(--text-primary); }
body.dark-mode .wagon-chip-op          { color: var(--text-muted); }
body.dark-mode .feed-list              { color: var(--text-primary); }
body.dark-mode .feed-item              { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .feed-item:hover        { border-color: var(--red); }
body.dark-mode .detail-modal-hero      { background-color: var(--surface-2); }
body.dark-mode .detail-stat-grid .dst-tile { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .dst-label              { color: var(--text-muted); }
body.dark-mode .dst-value              { color: var(--text-primary); }
body.dark-mode .dst-tile-blue          { background-color: #0d1b3e !important; border-color: #1e3a6e !important; }
body.dark-mode .dst-tile-blue .dst-value { color: #93c5fd; }
body.dark-mode .modal-action-row       { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .btn-nav                { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-nav:hover:not([disabled]) { background-color: rgba(227,0,0,.1); border-color: var(--red); color: var(--red); }
body.dark-mode .btn-modal-close        { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-modal-close:hover  { background-color: var(--border); color: var(--text-primary); }
body.dark-mode .flash-msg              { background-color: var(--surface); color: var(--text-primary); border-color: var(--border); }
body.dark-mode .desc-text              { color: var(--text-secondary); }
body.dark-mode .see-more-btn           { color: var(--red); }
body.dark-mode .pagination .page-link  { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .pagination .page-link:hover { background-color: rgba(227,0,0,.12); color: var(--red); border-color: var(--red); }
body.dark-mode .pagination .page-item.active .page-link   { background-color: var(--red); border-color: var(--red); color: #fff; }
body.dark-mode .pagination .page-item.disabled .page-link { color: var(--text-muted); background-color: var(--surface-2); }

/* ── Feed page ────────────────────────────────────────────── */
body.dark-mode .feed-card             { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .feed-card-body        { background-color: var(--surface); }
body.dark-mode .post-text-content     { color: var(--text-primary); }
body.dark-mode .post-author-name      { color: var(--text-primary); }
body.dark-mode .post-author-name:hover{ color: var(--red); }
body.dark-mode .post-timestamp        { color: var(--text-muted); }
body.dark-mode .post-stats            { border-color: var(--border); color: var(--text-muted); }
body.dark-mode .post-action-btn       { color: var(--text-secondary); }
body.dark-mode .post-action-btn:hover { background-color: var(--surface-2); color: var(--text-primary); }
body.dark-mode .post-action-btn.liked { color: var(--red); }
body.dark-mode .post-actions .btn-link       { color: var(--text-muted); }
body.dark-mode .post-actions .btn-link:hover { background-color: var(--surface-2); }
body.dark-mode .post-actions .dropdown-menu  { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .post-actions .dropdown-item  { color: var(--text-primary); }
body.dark-mode .post-actions .dropdown-item:hover { background-color: var(--surface-2); }
body.dark-mode .post-actions .dropdown-item.text-danger:hover { background-color: rgba(220,38,38,.12); }
body.dark-mode .post-edit-form         { border-color: var(--border); }
body.dark-mode .post-edit-form textarea{ background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .comment-section        { border-color: var(--border); }
body.dark-mode .comment-section-title  { color: var(--text-muted); }
body.dark-mode .comment-bubble         { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .comment-username a     { color: var(--text-primary); }
body.dark-mode .comment-username a:hover { color: var(--red); }
body.dark-mode .comment-timestamp      { color: var(--text-muted); }
body.dark-mode .comment-text           { color: var(--text-primary); }
body.dark-mode .comment-input-wrapper  { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .comment-input-wrapper:focus-within { background-color: var(--surface); border-color: var(--red); }
body.dark-mode .comment-textarea       { color: var(--text-primary); }
body.dark-mode .comment-textarea::placeholder { color: var(--text-muted); }
body.dark-mode .comment-attach-btn     { color: var(--text-muted); }
body.dark-mode .comment-like-btn       { color: var(--text-muted); }
body.dark-mode .comment-like-btn:hover,
body.dark-mode .comment-like-btn.comment-liked { color: #93c5fd; background-color: rgba(59,130,246,.12); }
body.dark-mode .composer-textarea      { background-color: var(--surface-2); border-color: var(--border); color: var(--text-primary); }
body.dark-mode .composer-textarea:focus{ background-color: var(--surface); border-color: var(--red); }
body.dark-mode .composer-textarea::placeholder { color: var(--text-muted); }
body.dark-mode .composer-label         { color: var(--text-muted); }
body.dark-mode .composer-attach-btn    { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .composer-attach-btn:hover { background-color: rgba(227,0,0,.1); border-color: var(--red); color: var(--red); }
body.dark-mode .feed-sort-tabs .sort-tab { background-color: var(--surface); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .feed-sort-tabs .sort-tab:hover,
body.dark-mode .feed-sort-tabs .sort-tab.active { background-color: rgba(227,0,0,.1); border-color: var(--red); color: var(--red); }
body.dark-mode .feed-alert.success    { background-color: rgba(5,150,105,.12); color: #6ee7b7; }
body.dark-mode .feed-alert.error      { background-color: rgba(220,38,38,.12); color: #f87171; }
body.dark-mode .top-contributors-widget { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .widget-title           { color: var(--text-muted); }
body.dark-mode .contributor-item:hover { background-color: var(--surface-2); }
body.dark-mode .contributor-name       { color: var(--text-primary); }
body.dark-mode .contributor-name:hover { color: var(--red); }
body.dark-mode .contributor-img        { border-color: var(--border); }
body.dark-mode .contributor-score      { background-color: rgba(227,0,0,.1); color: var(--red); border-color: rgba(227,0,0,.25); }
body.dark-mode .tribute-container ul   { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .tribute-container li   { color: var(--text-secondary); }
body.dark-mode .tribute-container li.highlight { background-color: rgba(227,0,0,.1); color: var(--red); }
body.dark-mode .hashtag-dropdown       { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .hashtag-dropdown li    { color: var(--text-secondary); }
body.dark-mode .hashtag-dropdown li:hover,
body.dark-mode .hashtag-dropdown li.hd-active { background-color: rgba(227,0,0,.1); color: var(--red); }
body.dark-mode #hashtagItemModal .dst-tile    { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode #hashtagItemModal .dst-tile-blue { background-color: #0d1b3e; border-color: #1e3a6e; }
body.dark-mode #hashtagItemModal .dst-tile-blue .dst-value { color: #93c5fd; }
body.dark-mode #hashtagItemModal .dst-label   { color: var(--text-muted); }
body.dark-mode #hashtagItemModal .dst-value   { color: var(--text-primary); }
body.dark-mode #hashtagItemModal .modal-details-wrap { border-color: var(--border); }
body.dark-mode #hashtagItemModal .modal-details-text { color: var(--text-secondary); }
body.dark-mode #hashtagItemModal .modal-add-row { border-color: var(--border); }
body.dark-mode #hashtagItemModal .modal-qty-group label { color: var(--text-muted); }
body.dark-mode #hashtagItemModal .modal-qty-group input { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode #hashtagItemModal .modal-footer { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode #hashtagItemModal .btn-modal-close { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode #hashtagItemModal .btn-modal-close:hover { background-color: var(--border); color: var(--text-primary); }
body.dark-mode #feed-end-message       { color: var(--text-muted); }

/* ── Community Trains page ───────────────────────────────── */
body.dark-mode .ct-toolbar            { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .ct-search             { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .ct-search::placeholder{ color: var(--text-muted); }
body.dark-mode .ct-search:focus       { background-color: var(--surface); border-color: var(--red); }
body.dark-mode .filter-btn            { background-color: var(--surface); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .filter-btn:hover      { border-color: var(--border-strong); color: var(--text-secondary); }
body.dark-mode .filter-btn.f-all.active     { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .filter-btn.f-play.active    { background-color: rgba(5,150,105,.15); border-color: rgba(110,231,183,.4); color: #6ee7b7; }
body.dark-mode .filter-btn.f-partial.active { background-color: rgba(217,119,6,.15); border-color: rgba(253,230,138,.4); color: #fcd34d; }
body.dark-mode .filter-btn.f-none.active    { background-color: rgba(227,0,0,.12); border-color: rgba(252,165,165,.4); color: var(--red); }
body.dark-mode .filter-count          { background-color: var(--surface-2); color: var(--text-muted); }
body.dark-mode .section-hdr-line      { background-color: var(--border); }
body.dark-mode .section-hdr-title     { color: var(--text-muted); }
body.dark-mode .ct-card               { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .ct-card.ct-playable   { border-color: rgba(110,231,183,.4); }
body.dark-mode .ct-card.ct-partial    { border-color: rgba(253,230,138,.4); }
body.dark-mode .ct-card-header        { border-color: var(--border); }
body.dark-mode .ct-card.ct-playable .ct-card-header { background-color: rgba(5,150,105,.1); border-bottom-color: rgba(110,231,183,.3); }
body.dark-mode .ct-card.ct-partial  .ct-card-header { background-color: rgba(217,119,6,.1); border-bottom-color: rgba(253,230,138,.3); }
body.dark-mode .ct-card.ct-none     .ct-card-header { background-color: var(--surface-2); }
body.dark-mode .ct-card-name          { color: var(--text-primary); }
body.dark-mode .match-badge           { border-color: var(--border); }
body.dark-mode .badge-100             { background-color: rgba(5,150,105,.15); color: #6ee7b7; border-color: rgba(110,231,183,.4); }
body.dark-mode .badge-partial         { background-color: rgba(217,119,6,.15); color: #fcd34d; border-color: rgba(253,230,138,.4); }
body.dark-mode .badge-none            { background-color: var(--surface-2); color: var(--text-muted); border-color: var(--border); }
body.dark-mode .ct-by                 { color: var(--text-muted); }
body.dark-mode .ct-by img             { border-color: var(--border); }
body.dark-mode .ct-by a               { color: var(--text-secondary); }
body.dark-mode .ct-by a:hover         { color: var(--red); }
body.dark-mode .tag-chip              { background-color: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .train-track-wrap      { background-color: var(--surface); }
body.dark-mode .train-track::before,
body.dark-mode .train-track::after    { background-color: var(--border-strong); }
body.dark-mode .coupler               { background-color: var(--border-strong); }
body.dark-mode .coupler::before,
body.dark-mode .coupler::after        { background-color: var(--surface-2); border-color: var(--border-strong); }
body.dark-mode .loco-body             { background-color: rgba(5,150,105,.12); border-color: rgba(110,231,183,.35); }
body.dark-mode .loco-body.loco-missing{ background-color: rgba(217,119,6,.12); border-color: rgba(253,230,138,.35); }
body.dark-mode .loco-body.loco-unknown{ background-color: rgba(227,0,0,.1); border-color: rgba(252,165,165,.35); }
body.dark-mode .loco-img-wrap         { background-color: var(--surface-2); }
body.dark-mode .loco-model-name       { color: var(--text-primary); }
body.dark-mode .loco-chip             { background-color: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .ribbon-have           { background-color: rgba(5,150,105,.15); color: #6ee7b7; border-color: rgba(110,231,183,.4); }
body.dark-mode .ribbon-miss           { background-color: rgba(217,119,6,.15); color: #fcd34d; border-color: rgba(253,230,138,.4); }
body.dark-mode .ribbon-none           { background-color: rgba(227,0,0,.12); color: #f87171; border-color: rgba(252,165,165,.35); }
body.dark-mode .wagon-body            { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .wagon-body.wagon-missing { background-color: rgba(217,119,6,.1); border-color: rgba(253,230,138,.3); }
body.dark-mode .wagon-body.wagon-unknown { background-color: rgba(227,0,0,.08); border-color: rgba(252,165,165,.3); }
body.dark-mode .wagon-img-wrap        { background-color: var(--surface-2); }
body.dark-mode .wagon-model-name      { color: var(--text-primary); }
body.dark-mode .train-end-cap         { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .ct-card-footer        { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .ct-card.ct-playable .ct-card-footer { border-top-color: rgba(110,231,183,.3); }
body.dark-mode .ct-card.ct-partial  .ct-card-footer { border-top-color: rgba(253,230,138,.3); }
body.dark-mode .missing-strip         { }
body.dark-mode .missing-badge         { background-color: rgba(217,119,6,.12); color: #fcd34d; border-color: rgba(253,230,138,.35); }
body.dark-mode .missing-badge.badge-loco { background-color: rgba(227,0,0,.12); color: #f87171; border-color: rgba(252,165,165,.35); }
body.dark-mode .btn-kl-outline        { background-color: var(--surface); color: var(--text-muted); border-color: var(--border); }
body.dark-mode .btn-kl-outline:hover  { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .btn-kl-wishlist       { background-color: rgba(217,119,6,.12); color: #fcd34d; border-color: rgba(253,230,138,.4); }
body.dark-mode .btn-kl-wishlist:hover { background-color: rgba(217,119,6,.2); }
body.dark-mode .btn-kl-wishlist-all   { background-color: rgba(227,0,0,.1); color: #f87171; border-color: rgba(252,165,165,.35); }
body.dark-mode .btn-kl-wishlist-all:hover { background-color: rgba(227,0,0,.18); }
body.dark-mode .btn-kl-saved          { background-color: var(--surface-2); color: var(--text-muted); border-color: var(--border); }
body.dark-mode .btn-kl-success        { background-color: rgba(5,150,105,.15); color: #6ee7b7; border-color: rgba(110,231,183,.4); }
body.dark-mode .tg-empty              { background-color: var(--surface); border-color: var(--border); color: var(--text-muted); }
body.dark-mode #comm-toast            { background-color: var(--surface-2); color: var(--text-primary); }
body.dark-mode #comm-toast.toast-success { background-color: rgba(5,150,105,.9); color: #fff; }
body.dark-mode #comm-toast.toast-error   { background-color: rgba(220,38,38,.9); color: #fff; }
body.dark-mode .modal-content         { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .modal-header          { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .modal-title           { color: var(--text-primary); }
body.dark-mode .modal-footer          { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .kl-label              { color: var(--text-muted); }
body.dark-mode .kl-input              { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .kl-input:focus        { background-color: var(--surface); border-color: var(--red); }

/* ── Marketplace page ─────────────────────────────────────── */
body.dark-mode .page-wrapper           { background-color: var(--bg); }
body.dark-mode .header-image-container { background-color: var(--surface-2); }
body.dark-mode .filter-bar             { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .filter-input-wrap input{ background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .filter-input-wrap input::placeholder { color: var(--text-muted); }
body.dark-mode .filter-input-wrap input:focus { border-color: var(--red); }
body.dark-mode .filter-select-wrap select  { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .filter-select-wrap select:focus { border-color: var(--red); }
body.dark-mode .filter-price-input    { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .filter-price-sym,
body.dark-mode .filter-price-sep      { color: var(--text-muted); }
body.dark-mode .wishlist-toggle       { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-secondary); }
body.dark-mode .wishlist-toggle.active{ background-color: rgba(227,0,0,.12); border-color: var(--red); color: var(--red); }
body.dark-mode .filter-divider        { background-color: var(--border); }
body.dark-mode .btn-filter            { background-color: var(--surface); border-color: var(--border-strong); color: var(--text-secondary); }
body.dark-mode .btn-filter:hover      { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .btn-filter-clear      { color: var(--text-muted); }
body.dark-mode .btn-filter-clear.has-filters { color: var(--red); }
body.dark-mode .tabs-results-row      { border-color: var(--border); }
body.dark-mode .tab-link              { color: var(--text-muted); border-color: transparent; }
body.dark-mode .tab-link:hover        { color: var(--text-primary); border-color: var(--border); }
body.dark-mode .tab-link.active       { color: var(--red); border-bottom-color: var(--red); }
body.dark-mode .sort-select           { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .results-count         { color: var(--text-muted); }
body.dark-mode .listing-card          { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .listing-card:hover    { border-color: var(--red); }
body.dark-mode .listing-card-body     { background-color: var(--surface); }
body.dark-mode .listing-card-model    { color: var(--text-primary); }
body.dark-mode .listing-card-operator { color: var(--text-muted); }
body.dark-mode .listing-card-qty      { color: var(--text-muted); }
body.dark-mode .listing-card-seller   { color: var(--text-muted); }
body.dark-mode .listing-age-text      { color: var(--text-muted); }
body.dark-mode .listing-card-photo-count { background-color: rgba(0,0,0,.6); color: #fff; }
body.dark-mode .empty-state           { color: var(--text-muted); }
body.dark-mode .empty-state i         { color: var(--border-strong); }
body.dark-mode .recently-sold-section { border-color: var(--border); }
body.dark-mode .recently-sold-header  { color: var(--text-secondary); border-color: var(--border); }
body.dark-mode .recently-sold-strip   { background-color: var(--surface); }
body.dark-mode .sold-chip             { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .sold-chip:hover       { border-color: var(--red); }
body.dark-mode .sold-chip-model       { color: var(--text-primary); }
body.dark-mode .sold-chip-meta        { color: var(--text-muted); }
body.dark-mode .sold-chip-seller      { color: var(--text-secondary); }
body.dark-mode .sold-badge            { background-color: rgba(22,163,74,.15); color: #6ee7b7; border-color: rgba(22,163,74,.3); }
body.dark-mode .pagination .page-link { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .pagination .page-link:hover { background-color: rgba(227,0,0,.12); color: var(--red); border-color: var(--red); }
body.dark-mode .pagination .page-item.active .page-link   { background-color: var(--red); border-color: var(--red); color: #fff; }
body.dark-mode .pagination .page-item.disabled .page-link { color: var(--text-muted); background-color: var(--surface-2); }
body.dark-mode .modal-content         { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .modal-header          { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .modal-header .modal-title { color: var(--text-primary); }
body.dark-mode .modal-header .close   { color: var(--text-muted); }
body.dark-mode .modal-body            { background-color: var(--surface); }
body.dark-mode .modal-footer          { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .modal-gallery         { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .modal-thumb           { border-color: var(--border); opacity: .7; }
body.dark-mode .modal-thumb.active    { border-color: var(--red); opacity: 1; }
body.dark-mode .modal-thumb:hover     { border-color: var(--border-strong); opacity: .9; }
body.dark-mode .modal-price-block     { border-color: var(--border); }
body.dark-mode .modal-price-currency  { color: var(--text-muted); }
body.dark-mode .modal-price           { color: var(--text-primary); }
body.dark-mode .modal-info-grid       { border-color: var(--border); }
body.dark-mode .info-label            { color: var(--text-muted); }
body.dark-mode .info-value            { color: var(--text-primary); }
body.dark-mode .modal-listing-desc-label { color: var(--text-muted); }
body.dark-mode .modal-listing-desc-text  { color: var(--text-secondary); background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .modal-seller-card     { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .seller-icon           { background-color: var(--surface); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .seller-name           { color: var(--text-primary); }
body.dark-mode .modal-seller-link     { color: var(--text-primary); }
body.dark-mode .modal-seller-link:hover { color: var(--red); }
body.dark-mode .seller-location       { color: var(--text-muted); }
body.dark-mode .btn-contact           { background-color: var(--red); color: #fff; }
body.dark-mode .btn-contact:hover     { background-color: var(--red-dk); }
body.dark-mode .btn-login-to-contact  { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-modal-close       { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-modal-close:hover { background-color: var(--border); color: var(--text-primary); }
body.dark-mode .btn-share             { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-share:hover,
body.dark-mode .btn-share.share-copied{ background-color: rgba(22,163,74,.15); border-color: rgba(22,163,74,.4); color: #6ee7b7; }
body.dark-mode .btn-nav               { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-nav:hover:not([disabled]) { background-color: rgba(227,0,0,.1); border-color: var(--red); color: var(--red); }
body.dark-mode .swipe-hint            { color: var(--text-muted); }
body.dark-mode .modal-qty-badge       { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .modal-condition-badge.cond-mint      { background-color: rgba(22,163,74,.15);  color: #6ee7b7; border-color: rgba(22,163,74,.3); }
body.dark-mode .modal-condition-badge.cond-excellent { background-color: rgba(59,130,246,.15); color: #93c5fd; border-color: rgba(59,130,246,.3); }
body.dark-mode .modal-condition-badge.cond-good      { background-color: rgba(217,119,6,.15);  color: #fcd34d; border-color: rgba(217,119,6,.3); }
body.dark-mode .modal-condition-badge.cond-used      { background-color: var(--surface-2);     color: var(--text-muted); border-color: var(--border); }
body.dark-mode .listing-card-cond-badge.cond-mint      { background-color: rgba(22,163,74,.8);  color: #fff; }
body.dark-mode .listing-card-cond-badge.cond-excellent { background-color: rgba(59,130,246,.8); color: #fff; }
body.dark-mode .listing-card-cond-badge.cond-good      { background-color: rgba(217,119,6,.8);  color: #fff; }
body.dark-mode .listing-card-cond-badge.cond-used      { background-color: rgba(100,116,139,.8);color: #fff; }
body.dark-mode select option          { background-color: var(--surface-2); color: var(--text-primary); }
body.dark-mode .gallery-swipe-hint    { color: var(--text-muted); }

/* ── My Listings page ─────────────────────────────────────── */
body.dark-mode .status-alert          { background-color: rgba(5,150,105,.12); color: #6ee7b7; border-color: rgba(5,150,105,.3); }
body.dark-mode .listings-toolbar      { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .stat-chip             { background-color: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .stat-chip.active      { background-color: rgba(5,150,105,.12); border-color: rgba(110,231,183,.3); color: #6ee7b7; }
body.dark-mode .stat-chip.inactive    { background-color: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .btn-new-listing       { background-color: var(--red); color: #fff; }
body.dark-mode .btn-new-listing:hover { background-color: var(--red-dk); color: #fff; }
body.dark-mode .empty-state           { background-color: var(--surface); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .empty-state-icon      { background-color: var(--surface-2); border-color: var(--border); color: var(--border-strong); }
body.dark-mode .empty-state-title     { color: var(--text-primary); }
body.dark-mode .empty-state-desc      { color: var(--text-muted); }
body.dark-mode .listing-row           { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .listing-row:hover     { border-color: var(--border-strong); }
body.dark-mode .listing-row.confirm-remove { border-color: var(--red); background-color: rgba(227,0,0,.04); }
body.dark-mode .photo-price-badge     { background-color: rgba(0,0,0,.65); color: #fff; }
body.dark-mode .listing-row-model     { color: var(--text-primary); }
body.dark-mode .listing-row-operator  { color: var(--text-muted); }
body.dark-mode .listing-row-type      { color: var(--text-muted); }
body.dark-mode .listing-row-desc      { color: var(--text-muted); }
body.dark-mode .status-pill.active    { background-color: rgba(5,150,105,.12); color: #6ee7b7; border-color: rgba(110,231,183,.3); }
body.dark-mode .status-pill.inactive  { background-color: var(--surface-2); color: var(--text-muted); border-color: var(--border); }
body.dark-mode .btn-edit-listing      { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-edit-listing:hover{ background-color: var(--border); color: var(--text-primary); }
body.dark-mode .btn-remove-listing    { background-color: rgba(220,38,38,.1); border-color: rgba(220,38,38,.3); color: #f87171; }
body.dark-mode .btn-remove-listing:hover { background-color: rgba(220,38,38,.2); border-color: rgba(220,38,38,.5); }
body.dark-mode .confirm-bar           { background-color: rgba(220,38,38,.08); border-color: rgba(220,38,38,.25); color: var(--text-secondary); }
body.dark-mode .btn-confirm-yes       { background-color: var(--red); color: #fff; border-color: var(--red); }
body.dark-mode .btn-confirm-yes:hover { background-color: var(--red-dk); }
body.dark-mode .btn-confirm-no        { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-confirm-no:hover  { background-color: var(--border); color: var(--text-primary); }

/* ── Collection page ──────────────────────────────────────── */
body.dark-mode .search-bar-wrap        { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .search-bar-wrap input  { background-color: transparent; color: var(--text-primary); }
body.dark-mode .search-bar-wrap input::placeholder { color: var(--text-muted); }
body.dark-mode .search-icon            { color: var(--text-muted); }
body.dark-mode .tabs-row               { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .nav-tabs               { border-color: var(--border); }
body.dark-mode .nav-tabs .nav-link     { color: var(--text-muted); }
body.dark-mode .nav-tabs .nav-link:hover { color: var(--red); background-color: rgba(227,0,0,.06); }
body.dark-mode .nav-tabs .nav-link.active { color: var(--red) !important; border-bottom-color: var(--red) !important; background: transparent !important; }
body.dark-mode .nav-tabs .nav-link.tab-generator { color: var(--text-muted); }
body.dark-mode .btn-tab-icon           { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-tab-icon:hover     { border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .btn-tab-icon.green     { background-color: rgba(40,167,69,.12); border-color: rgba(40,167,69,.3); color: #6ee7b7; }
body.dark-mode .btn-tab-icon.amber     { background-color: rgba(217,119,6,.12); border-color: rgba(217,119,6,.3); color: #fcd34d; }
body.dark-mode .tab-section-title      { color: var(--text-primary); }
body.dark-mode .filter-bar             { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .filter-select          { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .filter-select:focus    { border-color: var(--red); }
body.dark-mode .sort-select            { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .sort-dir-btn           { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-secondary); }
body.dark-mode .sort-dir-btn:hover     { border-color: var(--red); color: var(--red); }
body.dark-mode .view-btn               { background-color: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .view-btn.active        { background-color: rgba(227,0,0,.1); border-color: var(--red); color: var(--red); }
body.dark-mode .item-card              { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .item-card:hover        { border-color: var(--red); }
body.dark-mode .item-card .card-model  { color: var(--text-primary); }
body.dark-mode .item-card .card-operator { color: var(--text-muted); }
body.dark-mode .item-card .card-meta   { color: var(--text-muted); }
body.dark-mode .qty-badge              { background-color: var(--surface-2); color: var(--text-secondary); border-color: var(--border); }
body.dark-mode .card-value-badge       { background-color: rgba(22,163,74,.12); color: #6ee7b7; border-color: rgba(22,163,74,.3); }
body.dark-mode .list-row               { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .list-row:hover         { border-color: var(--red); }
body.dark-mode .list-model             { color: var(--text-primary); }
body.dark-mode .list-meta              { color: var(--text-muted); }
body.dark-mode .tab-loading            { color: var(--text-muted); }
body.dark-mode .tab-spinner            { border-color: var(--border); border-top-color: var(--red); }
body.dark-mode .empty-state            { color: var(--text-muted); }
body.dark-mode .modal-photo-wrap       { background-color: var(--surface-2); }
body.dark-mode .modal-inner            { background-color: var(--surface); }
body.dark-mode .modal-mgmt             { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .mgmt-section-label     { color: var(--text-muted); }
body.dark-mode .qty-number             { color: var(--text-primary); }
body.dark-mode .qty-label              { color: var(--text-muted); }
body.dark-mode .btn-pencil             { background-color: var(--surface); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .btn-pencil:hover       { border-color: var(--red); color: var(--red); }
body.dark-mode .qty-edit input         { background-color: var(--surface); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .notes-text             { color: var(--text-secondary); }
body.dark-mode .notes-text.empty       { color: var(--text-muted); }
body.dark-mode .notes-edit textarea    { background-color: var(--surface); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .notes-edit textarea::placeholder { color: var(--text-muted); }
body.dark-mode .btn-sm-confirm         { background-color: var(--red); color: #fff; border-color: var(--red); }
body.dark-mode .btn-sm-confirm:hover   { background-color: var(--red-dk); }
body.dark-mode .btn-sm-cancel          { background-color: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .btn-sm-cancel:hover    { background-color: var(--border); color: var(--text-primary); }
body.dark-mode .wishlist-notice        { background-color: rgba(59,130,246,.1); color: #93c5fd; border-color: rgba(59,130,246,.3); }
body.dark-mode .btn-sell               { background-color: rgba(22,163,74,.12); color: #6ee7b7; border-color: rgba(22,163,74,.3); }
body.dark-mode .btn-sell:hover         { background-color: rgba(22,163,74,.22); }
body.dark-mode .btn-remove             { background-color: rgba(220,38,38,.1); color: #f87171; border-color: rgba(220,38,38,.3); }
body.dark-mode .btn-remove:hover       { background-color: rgba(220,38,38,.2); }
body.dark-mode .modal-info-grid        { border-color: var(--border); }
body.dark-mode .info-label             { color: var(--text-muted); }
body.dark-mode .info-value             { color: var(--text-primary); }
body.dark-mode .value-green            { color: #6ee7b7; }
body.dark-mode .desc-section           { border-color: var(--border); }
body.dark-mode .desc-text              { color: var(--text-secondary); }
body.dark-mode .see-more-btn           { color: var(--red); }
body.dark-mode .modal-footer           { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .btn-nav                { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-nav:hover:not([disabled]) { background-color: rgba(227,0,0,.1); border-color: var(--red); color: var(--red); }
body.dark-mode .btn-modal-close        { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-modal-close:hover  { background-color: var(--border); color: var(--text-primary); }
body.dark-mode .swipe-hint             { color: var(--text-muted); }
body.dark-mode select option           { background-color: var(--surface-2); color: var(--text-primary); }

/* ── Navbar ───────────────────────────────────────────────── */
body.dark-mode .navbar-custom              { background: var(--surface); border-bottom-color: var(--border); }
body.dark-mode .navbar-collapse            { background: var(--surface); border-top-color: var(--border); }
body.dark-mode .navbar-custom .nav-link    { color: var(--text-muted) !important; }
body.dark-mode .navbar-custom .nav-link:hover,
body.dark-mode .navbar-custom .nav-link:focus { color: var(--text-primary) !important; background: var(--surface-2); }
body.dark-mode .navbar-custom .nav-link.nav-icon:hover { color: var(--red) !important; background: rgba(227,0,0,.1); }
body.dark-mode .navbar-custom .navbar-toggler      { border-color: var(--border); }
body.dark-mode .navbar-custom .navbar-toggler:hover{ background: var(--surface-2); }
body.dark-mode .navbar-custom .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(180,180,180,0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}
body.dark-mode .navbar-custom .dropdown-menu       { background: var(--surface); border-color: var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
body.dark-mode .navbar-custom .dropdown-header     { color: var(--text-muted); }
body.dark-mode .navbar-custom .dropdown-item       { color: var(--text-primary) !important; }
body.dark-mode .navbar-custom .dropdown-item i     { color: var(--text-muted); }
body.dark-mode .navbar-custom .dropdown-item:hover,
body.dark-mode .navbar-custom .dropdown-item:focus { background: var(--surface-2); }
body.dark-mode .navbar-custom .dropdown-item.dropdown-item-danger       { color: #f87171 !important; }
body.dark-mode .navbar-custom .dropdown-item.dropdown-item-danger i     { color: #f87171; }
body.dark-mode .navbar-custom .dropdown-item.dropdown-item-danger:hover { background: rgba(220,38,38,.12); }
body.dark-mode .navbar-custom .dropdown-divider    { border-color: var(--border); }
body.dark-mode .nav-badge,
body.dark-mode .badge-danger                       { border-color: var(--surface); }

/* ── Notification panel (AJAX fragment in offcanvas) ─────── */
body.dark-mode .notification-container        { color: var(--text-primary); }
body.dark-mode .notif-toolbar                 { background: var(--surface); border-bottom-color: var(--border); }
body.dark-mode #notifications-list            { background: var(--surface); }
body.dark-mode .notification-item             { border-bottom-color: var(--border); }
body.dark-mode .notification-item:hover       { background: var(--surface-2); }
body.dark-mode .notification-item.unread      { background: rgba(227,0,0,.05); border-left-color: var(--red); }
body.dark-mode .notification-item.unread:hover{ background: rgba(227,0,0,.1); }
body.dark-mode .notif-av                      { border-color: var(--border); background: var(--surface-2); }
body.dark-mode .notif-badge                   { background: var(--surface); border-color: var(--border); }
body.dark-mode .notif-msg                     { color: var(--text-primary); }
body.dark-mode .notif-time                    { color: var(--text-muted); }
body.dark-mode .notif-label                   { color: var(--text-muted); }
body.dark-mode .n-btn                         { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .n-btn:hover                   { border-color: var(--border-strong); color: var(--text-primary); background: var(--border); }
body.dark-mode .n-btn.n-danger                { color: #f87171; border-color: rgba(220,38,38,.35); background: rgba(220,38,38,.08); }
body.dark-mode .n-btn.n-danger:hover          { background: rgba(220,38,38,.18); border-color: #f87171; }
body.dark-mode .notif-empty                   { background: var(--surface); }
body.dark-mode .notif-empty i                 { color: var(--border-strong); }
body.dark-mode .notif-empty p                 { color: var(--text-muted); }
body.dark-mode .notif-empty small             { color: var(--border-strong); }
body.dark-mode .notif-error                   { background: rgba(220,38,38,.08); border-left-color: var(--red); color: #f87171; }

/* ── Feed page — supplemental rules (layout + missing selectors) ── */
body.dark-mode .feed-wrapper               { background-color: var(--bg); }
body.dark-mode .feed-main                  { background-color: transparent; }
body.dark-mode .feed-banner-title h1       { color: rgba(255,255,255,.95); }
body.dark-mode .feed-banner-meta           { color: rgba(255,255,255,.60); }
body.dark-mode .composer-header            { border-color: var(--border); }
body.dark-mode .composer-footer            { border-color: var(--border); }
body.dark-mode .composer-avatar            { border-color: var(--rc, var(--border)); }
body.dark-mode .composer-submit-btn        { background-color: var(--red); color: #fff; }
body.dark-mode .composer-submit-btn:disabled { background-color: #1e3a6e; color: #93c5fd; }
body.dark-mode .post-profile-picture       { border-color: var(--rc, var(--border)); }
body.dark-mode .post-header                { border-color: var(--border); }
body.dark-mode .post-display               { color: var(--text-primary); }
body.dark-mode .post-url-link              { color: var(--red); }
body.dark-mode .post-likes-stat            { color: var(--text-muted); }
body.dark-mode .post-video-wrapper         { background-color: #000; }
body.dark-mode .hashtag-link               { color: #6ee7b7 !important; }
body.dark-mode .hashtag-link:hover         { color: #34d399 !important; }
body.dark-mode .comment-form-row           { border-color: var(--border); }
body.dark-mode .comment-profile-picture    { border-color: var(--rc, var(--border)); }
body.dark-mode .comment-submit-btn         { color: var(--red); }
body.dark-mode .comment-display            { color: var(--text-primary); }
body.dark-mode .comment-edit-form textarea { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .comment-actions-container  { border-color: var(--border); }
body.dark-mode #hashtagItemModal .modal-content { background-color: var(--surface); }
body.dark-mode #hashtagItemModal .dst-tile-blue { background-color: #0d1b3e !important; border-color: #1e3a6e !important; }
body.dark-mode #hashtagItemModal .dst-tile-blue .dst-value { color: #93c5fd; }
body.dark-mode #hashtagItemModal .modal-footer { background-color: var(--surface-2); border-color: var(--border); }

/* ── Messages page ────────────────────────────────────────── */
body.dark-mode .msg-page               { background-color: var(--bg); }
body.dark-mode .msg-page-title         { color: var(--text-primary); }
body.dark-mode .msg-search-input       { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .msg-search-input::placeholder { color: var(--text-muted); }
body.dark-mode .msg-search-input:focus { border-color: var(--red); }
body.dark-mode .msg-search-btn         { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-secondary); }
body.dark-mode .msg-search-btn:hover   { background-color: var(--red); color: #fff; border-color: var(--red); }
body.dark-mode .conv-card              { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .conv-card-header       { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .conv-card-header-title { color: var(--text-primary); }
body.dark-mode .user-list-item         { background-color: var(--surface); border-color: var(--border); color: var(--text-primary); }
body.dark-mode .user-list-item:hover   { background-color: var(--surface-2); }
body.dark-mode .conv-name              { color: var(--text-primary); }
body.dark-mode .conv-empty             { color: var(--text-muted); background-color: var(--surface); }
body.dark-mode .delete-conversation-icon { color: var(--text-muted); }
body.dark-mode .delete-conversation-icon:hover { color: #f87171; }
body.dark-mode .modal-body-messages    { background-color: var(--surface-2); }
body.dark-mode .message-bubble.sent    { background-color: #14532d; color: #bbf7d0; border-color: #166534; }
body.dark-mode .message-bubble.sent .message-sender-link { color: #86efac; }
body.dark-mode .message-bubble.sent .timestamp { color: #6ee7b7; opacity: .7; }
body.dark-mode .message-bubble.sent .msg-like-btn { color: #86efac; opacity: .7; }
body.dark-mode .message-bubble.sent .msg-like-btn.msg-liked { color: #bbf7d0; opacity: 1; }
body.dark-mode .message-bubble.received { background-color: #1e3a5f; color: #bfdbfe; border-color: #1e40af; }
body.dark-mode .message-bubble.received .message-sender-link { color: #93c5fd; }
body.dark-mode .message-bubble.received .timestamp { color: #93c5fd; opacity: .7; }
body.dark-mode .message-bubble.received .msg-like-btn { color: #93c5fd; opacity: .7; }
body.dark-mode .message-bubble.received .msg-like-btn.msg-liked { color: #bfdbfe; opacity: 1; }
body.dark-mode .modal-body             { background-color: var(--surface); }
body.dark-mode .modal-footer           { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .chat-textarea          { background-color: var(--surface-2); border-color: var(--border); color: var(--text-primary); }
body.dark-mode .chat-textarea::placeholder { color: var(--text-muted); }
body.dark-mode .chat-textarea:focus    { border-color: var(--red); }
body.dark-mode .chat-form-extras       { border-color: var(--border); }
body.dark-mode .chat-form-note         { color: var(--text-muted); }
body.dark-mode .btn-add-photo          { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-add-photo:hover    { background-color: var(--border); color: var(--text-primary); }
body.dark-mode .btn-delete-conv        { background-color: rgba(220,38,38,.1); border-color: rgba(220,38,38,.3); color: #f87171; }
body.dark-mode .btn-delete-conv:hover  { background-color: rgba(220,38,38,.2); }
body.dark-mode .btn-chat-send          { background-color: var(--red); color: #fff; }
body.dark-mode .btn-chat-send:hover    { background-color: var(--red-dk); }
body.dark-mode .chat-header-avatar     { border-color: var(--rc, var(--border)); }
body.dark-mode .online-dot.dot-online  { background-color: #22c55e; }
body.dark-mode .online-dot.dot-offline { background-color: var(--border-strong); }
body.dark-mode .online-label           { color: var(--text-muted); }
body.dark-mode .search-result-item     { background-color: var(--surface); border-color: var(--border); color: var(--text-primary); }
body.dark-mode .search-result-item:hover { background-color: var(--surface-2); }
body.dark-mode .search-empty           { color: var(--text-muted); }
body.dark-mode #editedMessageContent   { background-color: var(--surface-2); border-color: var(--border); color: var(--text-primary); }
body.dark-mode .edit-photo-label       { color: var(--text-muted); }
body.dark-mode .edit-photo-rm          { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-edit-cancel        { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-edit-save          { background-color: var(--red); color: #fff; }
body.dark-mode .custom-message-box     { background-color: var(--surface); border-color: var(--border); color: var(--text-primary); box-shadow: 0 20px 48px rgba(0,0,0,.5); }
body.dark-mode .listing-compose-card   { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .listing-compose-label  { color: var(--text-muted); }
body.dark-mode .listing-compose-model  { color: var(--text-primary); }
body.dark-mode .listing-compose-operator { color: var(--text-muted); }
body.dark-mode .msg-listing-card       { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .msg-listing-card:hover { border-color: var(--red); }
body.dark-mode .msg-listing-label      { color: var(--text-muted); }
body.dark-mode .msg-listing-model      { color: var(--text-primary); }
body.dark-mode .msg-listing-operator   { color: var(--text-muted); }
body.dark-mode .msg-listing-arrow      { color: var(--border-strong); }
body.dark-mode .conv-avatar            { border-color: var(--rc, var(--border)); }
body.dark-mode select option           { background-color: var(--surface-2); color: var(--text-primary); }

/* ── Wishlist page ────────────────────────────────────────── */
body.dark-mode .search-bar-wrap        { background-color: var(--surface); border-color: var(--border); }
body.dark-mode #searchInput            { background-color: transparent; color: var(--text-primary); }
body.dark-mode #searchInput::placeholder { color: var(--text-muted); }
body.dark-mode .search-icon            { color: var(--text-muted); }
body.dark-mode .tabs-row               { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .nav-tabs               { border-color: var(--border); }
body.dark-mode .nav-tabs .nav-link     { color: var(--text-muted); }
body.dark-mode .nav-tabs .nav-link:hover { color: var(--red); background: rgba(227,0,0,.06); }
body.dark-mode .nav-tabs .nav-link.active { color: var(--red) !important; border-bottom-color: var(--red) !important; background: transparent !important; }
body.dark-mode .tab-suggestions        { color: var(--text-muted) !important; }
body.dark-mode .tab-suggestions:hover  { color: var(--red) !important; }
body.dark-mode .btn-tab-icon           { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-tab-icon.green     { background-color: rgba(40,167,69,.12); border-color: rgba(40,167,69,.3); color: #6ee7b7; }
body.dark-mode .btn-tab-icon.amber     { background-color: rgba(217,119,6,.12); border-color: rgba(217,119,6,.3); color: #fcd34d; }
body.dark-mode .tab-section-title      { color: var(--text-primary); }
body.dark-mode .filter-bar             { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .filter-select          { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .filter-select:focus    { border-color: var(--red); }
body.dark-mode .filter-select.is-active{ border-color: var(--red); color: var(--red); }
body.dark-mode .sort-select            { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .sort-dir-btn           { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-secondary); }
body.dark-mode .sort-dir-btn:hover     { border-color: var(--red); color: var(--red); }
body.dark-mode .view-btn               { background-color: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .view-btn.active        { background-color: rgba(227,0,0,.1); border-color: var(--red); color: var(--red); }
body.dark-mode .modern-card            { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .modern-card:hover      { border-color: var(--red); }
body.dark-mode .modern-card .card-title { color: var(--text-primary); }
body.dark-mode .modern-card .card-text  { color: var(--text-secondary); }
body.dark-mode .quantity-badge         { background-color: var(--surface-2); color: var(--text-muted); border-color: var(--border); }
body.dark-mode .market-badge           { background-color: rgba(22,163,74,.15); color: #6ee7b7; }
body.dark-mode .list-row               { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .list-row:hover         { border-color: var(--red); }
body.dark-mode .list-model             { color: var(--text-primary); }
body.dark-mode .list-meta              { color: var(--text-muted); }
body.dark-mode .list-pill              { background-color: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .list-pill.era          { background-color: rgba(59,130,246,.1); color: #93c5fd; border-color: rgba(59,130,246,.25); }
body.dark-mode .list-value             { color: #6ee7b7; }
body.dark-mode .list-sale              { background-color: rgba(22,163,74,.12); color: #6ee7b7; }
body.dark-mode .list-qty               { background-color: var(--surface-2); color: var(--text-muted); border-color: var(--border); }
body.dark-mode .tab-loading            { color: var(--text-muted); }
body.dark-mode .tab-spinner            { border-color: var(--border); border-top-color: var(--red); }
body.dark-mode .empty-state            { color: var(--text-muted); }
body.dark-mode .modal-photo-wrap       { background-color: var(--surface-2); }
body.dark-mode .modal-inner            { background-color: var(--surface); }
body.dark-mode .modal-mgmt             { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .mgmt-section-label     { color: var(--text-muted); }
body.dark-mode .qty-number             { color: var(--text-primary); }
body.dark-mode .qty-label              { color: var(--text-muted); }
body.dark-mode .btn-pencil             { background-color: var(--surface); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .btn-pencil:hover       { border-color: var(--red); color: var(--red); }
body.dark-mode .qty-edit input         { background-color: var(--surface); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .btn-add-collection     { background-color: rgba(5,150,105,.12); border-color: rgba(5,150,105,.3); color: #6ee7b7; }
body.dark-mode .btn-add-collection:hover { background-color: rgba(5,150,105,.22); }
body.dark-mode .move-confirm           { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .move-confirm-text      { color: var(--text-secondary); }
body.dark-mode .move-qty-label         { color: var(--text-muted); }
body.dark-mode .move-qty-input         { background-color: var(--surface); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .move-qty-max           { color: var(--text-muted); }
body.dark-mode .market-notice.available   { background-color: rgba(5,150,105,.1); color: #6ee7b7; border-color: rgba(5,150,105,.3); }
body.dark-mode .market-notice.unavailable { background-color: var(--surface-2); color: var(--text-muted); border-color: var(--border); }
body.dark-mode .btn-marketplace        { background-color: rgba(5,150,105,.12); border-color: rgba(5,150,105,.3); color: #6ee7b7; }
body.dark-mode .btn-remove-full        { background-color: rgba(220,38,38,.1); border-color: rgba(220,38,38,.3); color: #f87171; }
body.dark-mode .btn-remove-full:hover  { background-color: rgba(220,38,38,.2); }
body.dark-mode .modal-details          { background-color: var(--surface); }
body.dark-mode .modal-info-grid        { border-color: var(--border); }
body.dark-mode .info-label             { color: var(--text-muted); }
body.dark-mode .info-value             { color: var(--text-primary); }
body.dark-mode .value-green            { color: #6ee7b7; }
body.dark-mode .desc-section           { border-color: var(--border); }
body.dark-mode .desc-text              { color: var(--text-secondary); }
body.dark-mode .see-more-btn           { color: var(--red); }
body.dark-mode .modal-footer           { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .btn-nav                { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-nav:hover:not([disabled]) { background-color: rgba(227,0,0,.1); border-color: var(--red); color: var(--red); }
body.dark-mode .btn-modal-close        { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-modal-close:hover  { background-color: var(--border); color: var(--text-primary); }
body.dark-mode .swipe-hint             { color: var(--text-muted); }
body.dark-mode .btn-sm-confirm         { background-color: var(--red); color: #fff; border-color: var(--red); }
body.dark-mode .btn-sm-cancel          { background-color: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
body.dark-mode select option           { background-color: var(--surface-2); color: var(--text-primary); }

/* ── Train Generator page ────────────────────────────── */
body.dark-mode .tg-page               { background-color: var(--bg); }
body.dark-mode .alert-kl-error        { background-color: rgba(220,38,38,.12); color: #f87171; border-left-color: var(--red); }
body.dark-mode .alert-kl-success      { background-color: rgba(5,150,105,.12); color: #6ee7b7; border-left-color: #059669; }
body.dark-mode .panel-card            { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .tg-tabs               { background-color: var(--surface-2); border-bottom-color: var(--border); }
body.dark-mode .tg-tabs .nav-link     { color: var(--text-muted); }
body.dark-mode .tg-tabs .nav-link:hover { color: var(--red); background-color: rgba(227,0,0,.06); }
body.dark-mode .tg-tabs .nav-link.active { color: var(--red); border-bottom-color: var(--red); }
body.dark-mode .tg-tabs .nav-link#favorites-tab,
body.dark-mode .tg-tabs .nav-link#favorites-tab:hover { color: var(--accent) !important; }
body.dark-mode .tg-tabs .nav-link#favorites-tab.active { border-bottom-color: var(--accent) !important; }
body.dark-mode .tg-tabs .nav-link#community-tab        { color: #38bdf8; }
body.dark-mode .tg-tabs .nav-link#community-tab.active { color: #38bdf8; border-bottom-color: #38bdf8; }
body.dark-mode .kl-label              { color: var(--text-muted); }
body.dark-mode .kl-select             { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .kl-select:focus       { border-color: var(--red); }
body.dark-mode .kl-input              { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .kl-input:focus        { border-color: var(--red); }
body.dark-mode .btn-kl-outline        { background-color: var(--surface); color: var(--text-secondary); border-color: var(--border); }
body.dark-mode .btn-kl-outline:hover  { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .btn-kl-danger         { background-color: rgba(220,38,38,.1); color: #f87171; border-color: rgba(220,38,38,.3); }
body.dark-mode .btn-kl-danger:hover   { background-color: rgba(220,38,38,.2); }
body.dark-mode .btn-kl-info           { background-color: rgba(2,132,199,.1); color: #38bdf8; border-color: rgba(2,132,199,.3); }
body.dark-mode .btn-kl-info:hover     { background-color: rgba(2,132,199,.2); }
body.dark-mode .btn-kl-ghost          { color: var(--text-muted); }
body.dark-mode .btn-kl-ghost:hover    { color: var(--text-primary); background-color: var(--surface-2); }
body.dark-mode .section-hdr-line      { background-color: var(--border); }
body.dark-mode .section-hdr-title     { color: var(--text-muted); }
body.dark-mode .result-card           { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .result-card-header    { background-color: var(--surface-2); border-bottom-color: var(--border); }
body.dark-mode .result-card-title     { color: var(--text-primary); }
body.dark-mode .train-info-bar        { background-color: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .train-item::before    { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .train-item:first-child::before { border-color: #059669; }
body.dark-mode .loco-card             { background-color: rgba(5,150,105,.08); border-color: rgba(110,231,183,.3); }
body.dark-mode .loco-card.loco-missing{ background-color: rgba(217,119,6,.1); border-color: rgba(253,230,138,.3); }
body.dark-mode .loco-card-img         { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .loco-card-body h5     { color: var(--text-primary); }
body.dark-mode .wagon-card            { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .wagon-card.wagon-missing { background-color: rgba(217,119,6,.08); border-color: rgba(253,230,138,.3); }
body.dark-mode .wagon-card-img        { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .wagon-card-body       { color: var(--text-primary); }
body.dark-mode .wagon-card-meta       { color: var(--text-muted); }
body.dark-mode .wagon-card-qty        { background-color: rgba(227,0,0,.12); color: var(--red); border-color: rgba(227,0,0,.3); }
body.dark-mode .tag-chip              { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .fav-item              { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .fav-item:hover        { background-color: rgba(217,119,6,.1); border-color: rgba(253,230,138,.4); }
body.dark-mode .fav-item-name         { color: var(--text-primary); }
body.dark-mode .community-card        { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .community-card.playable { border-color: rgba(110,231,183,.4); }
body.dark-mode .community-card.partial  { border-color: rgba(253,230,138,.4); }
body.dark-mode .community-card-header  { background-color: var(--surface-2); border-bottom-color: var(--border); }
body.dark-mode .community-card.playable .community-card-header { background-color: rgba(5,150,105,.1); border-bottom-color: rgba(110,231,183,.3); }
body.dark-mode .community-card.partial  .community-card-header { background-color: rgba(217,119,6,.1); border-bottom-color: rgba(253,230,138,.3); }
body.dark-mode .community-card-name    { color: var(--text-primary); }
body.dark-mode .match-badge.match-100  { background-color: rgba(5,150,105,.15); color: #6ee7b7; border-color: rgba(110,231,183,.4); }
body.dark-mode .match-badge.match-partial { background-color: rgba(217,119,6,.12); color: #fcd34d; border-color: rgba(253,230,138,.4); }
body.dark-mode .community-loco-img    { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .community-by          { color: var(--text-muted); }
body.dark-mode .community-by a        { color: var(--text-secondary); }
body.dark-mode .community-by a:hover  { color: var(--red); }
body.dark-mode .community-avatar      { border-color: var(--rc, var(--border)); }
body.dark-mode .wagon-thumb           { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .missing-badge         { background-color: rgba(220,38,38,.12); color: #f87171; border-color: rgba(220,38,38,.3); }
body.dark-mode .wagon-missing-label   { background-color: rgba(217,119,6,.12); color: #fcd34d; border-color: rgba(253,230,138,.4); }
body.dark-mode .community-card-footer { background-color: var(--surface-2); border-top-color: var(--border); }
body.dark-mode .community-card.playable .community-card-footer { border-top-color: rgba(110,231,183,.3); }
body.dark-mode .community-card.partial  .community-card-footer { border-top-color: rgba(253,230,138,.3); }
body.dark-mode #community-stage-container .result-card-header { background: linear-gradient(135deg, rgba(2,132,199,.15) 0%, rgba(2,132,199,.08) 100%); border-bottom-color: rgba(2,132,199,.3); }
body.dark-mode #community-stage-container .result-card-title { color: #38bdf8; }
body.dark-mode .wagon-row             { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .wagon-row .qty-input  { background-color: var(--surface); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .tg-empty              { color: var(--text-muted); }
body.dark-mode .tg-empty i            { color: var(--border-strong); }
body.dark-mode .preview-placeholder   { background-color: var(--surface); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .preview-placeholder i { color: var(--border-strong); }
body.dark-mode .preview-placeholder h4 { color: var(--text-secondary); }
body.dark-mode #saveFavoriteModal .modal-content { background-color: var(--surface); border-color: var(--border); }
body.dark-mode #saveFavoriteModal .modal-header  { background-color: var(--surface-2); border-bottom-color: var(--border); }
body.dark-mode #communityFavoriteModal .modal-content { background-color: var(--surface); border-color: var(--border); }
body.dark-mode #communityFavoriteModal .modal-header  { background-color: var(--surface-2); border-bottom-color: var(--border); }
body.dark-mode select option          { background-color: var(--surface-2); color: var(--text-primary); }

/* ── Suggestions page ────────────────────────────────── */
body.dark-mode .page-banner            { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .page-banner h1         { color: var(--text-primary); }
body.dark-mode .page-banner .lead-text { color: var(--text-muted); }
body.dark-mode .page-banner-icon       { background-color: rgba(227,0,0,.12); color: var(--red); }
body.dark-mode .btn-banner-ghost       { background: none; border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-banner-ghost:hover { border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .rails-wrap             { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .rail-divider           { border-top-color: var(--border); }
body.dark-mode .rail-title             { color: var(--text-primary); }
body.dark-mode .rail-subtitle          { color: var(--text-muted); }
body.dark-mode .rail-shuffle           { border-color: var(--border); color: var(--text-muted); }
body.dark-mode .rail-shuffle:hover     { border-color: var(--border-strong); color: var(--text-primary); background-color: var(--surface-2); }
body.dark-mode .rail-arrow             { background-color: var(--surface); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .rail-arrow:hover       { background-color: var(--red); color: #fff; border-color: var(--red); }
body.dark-mode .item-card              { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .item-card:hover        { border-color: var(--red); }
body.dark-mode .card-img               { background-color: var(--surface-2); }
body.dark-mode .card-img .no-photo     { color: var(--border-strong); }
body.dark-mode .card-model             { color: var(--text-primary); }
body.dark-mode .card-desc              { color: var(--text-muted); }
body.dark-mode .pill-neutral           { background-color: var(--surface-2); color: var(--text-secondary); border-color: var(--border); }
body.dark-mode .pill-red               { background-color: rgba(227,0,0,.12); color: #f87171; border-color: rgba(227,0,0,.3); }
body.dark-mode .pill-amber             { background-color: rgba(217,119,6,.12); color: #fcd34d; border-color: rgba(217,119,6,.3); }
body.dark-mode .pill-green             { background-color: rgba(5,150,105,.12); color: #6ee7b7; border-color: rgba(5,150,105,.3); }
body.dark-mode .pill-blue              { background-color: rgba(37,99,235,.12); color: #93c5fd; border-color: rgba(37,99,235,.3); }
body.dark-mode .pill-purple            { background-color: rgba(124,58,237,.12); color: #c4b5fd; border-color: rgba(124,58,237,.3); }
body.dark-mode .skel-card              { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .skel-pulse             { background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%); background-size: 200% 100%; }
body.dark-mode .rail-empty             { color: var(--text-muted); }
body.dark-mode .rail-empty a           { color: var(--red); }
body.dark-mode #detailsModal .modal-content { background-color: var(--surface); border-color: var(--border); }
body.dark-mode #detailsModal .modal-header  { background-color: var(--surface-2); border-bottom-color: var(--border); }
body.dark-mode #detailsModal .modal-title   { color: var(--text-primary); }
body.dark-mode #detailsModal .close         { color: var(--text-muted); }
body.dark-mode .detail-img             { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .prop-row .pl           { color: var(--text-muted); }
body.dark-mode .prop-row .pv           { color: var(--text-primary); }
body.dark-mode .detail-desc            { color: var(--text-secondary); border-top-color: var(--border); }
body.dark-mode .btn-modal-close        { background-color: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-modal-close:hover  { background-color: var(--border); }
body.dark-mode #sugg-toast             { background-color: var(--surface); color: var(--text-primary); }

/* ── Statistics page ─────────────────────────────────────── */
body.dark-mode .kpi-card                { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .kpi-icon.red            { background-color: rgba(227,0,0,.12); color: var(--red); }
body.dark-mode .kpi-icon.green          { background-color: rgba(22,163,74,.12); color: #6ee7b7; }
body.dark-mode .kpi-icon.amber          { background-color: rgba(217,119,6,.12); color: #fcd34d; }
body.dark-mode .kpi-icon.blue           { background-color: rgba(37,99,235,.12); color: #93c5fd; }
body.dark-mode .kpi-icon.purple         { background-color: rgba(124,58,237,.12); color: #c4b5fd; }
body.dark-mode .kpi-value               { color: var(--text-primary); }
body.dark-mode .kpi-label               { color: var(--text-muted); }
body.dark-mode .section-header          { border-bottom-color: var(--border); }
body.dark-mode .section-header h2       { color: var(--text-primary); }
body.dark-mode .section-header-icon     { background-color: rgba(227,0,0,.12); color: var(--red); }
body.dark-mode .section-count           { color: var(--text-muted); }
body.dark-mode .chart-card              { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .chart-card-title        { color: var(--text-primary); }
body.dark-mode .chart-card-total        { color: var(--text-muted); background-color: var(--surface-2); border-color: var(--border); }

/* ── List Item page ───────────────────────────────────────── */
body.dark-mode .alert-klinnect.error   { background-color: rgba(220,38,38,.1); border-color: rgba(220,38,38,.3); color: #f87171; }
body.dark-mode .alert-klinnect.success { background-color: rgba(5,150,105,.1); border-color: rgba(5,150,105,.3); color: #6ee7b7; }
body.dark-mode .form-card              { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .form-card-header       { background-color: var(--surface-2); border-bottom-color: var(--border); }
body.dark-mode .card-title-text        { color: var(--text-primary); }
body.dark-mode .card-step-badge        { background-color: var(--surface-2); color: var(--text-muted); }
body.dark-mode .card-icon.red          { background-color: rgba(227,0,0,.12); color: var(--red); }
body.dark-mode .card-icon.green        { background-color: rgba(40,167,69,.12); color: #6ee7b7; }
body.dark-mode .card-icon.amber        { background-color: rgba(217,119,6,.12); color: #fcd34d; }
body.dark-mode .card-icon.muted        { background-color: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .field-label            { color: var(--text-muted); }
body.dark-mode .form-control-kl,
body.dark-mode .form-select-kl,
body.dark-mode .form-textarea-kl       { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .form-control-kl:focus,
body.dark-mode .form-select-kl:focus,
body.dark-mode .form-textarea-kl:focus { background-color: var(--surface); border-color: var(--red); }
body.dark-mode .form-control-kl::placeholder,
body.dark-mode .form-textarea-kl::placeholder { color: var(--text-muted); }
body.dark-mode .select-wrap::after     { color: var(--text-muted); }
body.dark-mode .price-symbol           { color: var(--text-muted); }
body.dark-mode .field-hint             { color: var(--text-muted); }
body.dark-mode .photo-slot-ui          { background-color: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .photo-slot:hover .photo-slot-ui { border-color: var(--red); background-color: rgba(227,0,0,.08); color: var(--red); }
body.dark-mode .photo-slot-preview     { border-color: var(--border); }
body.dark-mode .preview-empty          { color: var(--text-muted); }
body.dark-mode .preview-img-wrap       { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode .pv-label               { color: var(--text-muted); }
body.dark-mode .pv-value               { color: var(--text-primary); }
body.dark-mode .summary-price          { color: var(--text-primary); }
body.dark-mode .summary-price .s-currency { color: var(--text-muted); }
body.dark-mode .summary-price-lbl      { color: var(--text-muted); }
body.dark-mode hr.s-div                { border-top-color: var(--border); }
body.dark-mode .s-row .s-lbl           { color: var(--text-muted); }
body.dark-mode .s-row .s-val           { color: var(--text-primary); }
body.dark-mode .s-row .s-val.empty     { color: var(--border-strong); }
body.dark-mode .btn-cancel-kl          { background-color: var(--surface); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-cancel-kl:hover    { background-color: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .tip-box                { background-color: rgba(217,119,6,.1); border-color: rgba(217,119,6,.3); color: #fcd34d; }
body.dark-mode .tip-box i              { color: #fcd34d; }
body.dark-mode .empty-state            { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .empty-icon-wrap        { background-color: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .empty-state h3         { color: var(--text-primary); }
body.dark-mode .empty-state p          { color: var(--text-muted); }
body.dark-mode select option           { background-color: var(--surface-2); color: var(--text-primary); }
/* ── Navbar dark mode toggle ─────────────────────────────── */
/* Compact row: ☀ [===]   — no label text */
.dropdown-item-darkmode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: default;
    user-select: none;
    padding: 6px 10px;
    border-radius: 6px;
}

.dropdown-item-darkmode-toggle:hover { background: transparent; }

/* Icons — both always visible, opacity signals active state */
.dm-icon-sun  { color: #f59e0b; font-size: .85rem; transition: opacity .2s; }
.dm-icon-moon { color: #8b5cf6; font-size: .85rem; transition: opacity .2s; }

/* Light mode: sun bright, moon dim */
.dm-icon-sun  { opacity: 1; }
.dm-icon-moon { opacity: .35; }

/* Dark mode: moon bright, sun dim */
body.dark-mode .dm-icon-sun  { opacity: .35; }
body.dark-mode .dm-icon-moon { opacity: 1; }

/* Toggle switch */
.dm-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 36px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.dm-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.dm-thumb {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: #d1d5db;
    transition: background .2s;
}

.dm-thumb::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.dm-switch input:checked + .dm-thumb            { background: #7c3aed; }
.dm-switch input:checked + .dm-thumb::after     { transform: translateX(16px); }
body.dark-mode .dm-thumb                        { background: #4b5563; }
body.dark-mode .dm-switch input:checked + .dm-thumb { background: #7c3aed; }
/* ── Model Requests page ─────────────────────────────────── */
body.dark-mode .rq-banner              { box-shadow: 0 4px 16px rgba(0,0,0,.35); }
body.dark-mode .rq-card                { background: var(--surface); border-color: var(--border); }
body.dark-mode .rq-card-title          { color: var(--text-muted); }
body.dark-mode .kl-label               { color: var(--text-secondary); }
body.dark-mode .kl-input,
body.dark-mode .kl-select,
body.dark-mode .kl-textarea            { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .kl-input:focus,
body.dark-mode .kl-select:focus,
body.dark-mode .kl-textarea:focus      { background: var(--surface); border-color: var(--red); box-shadow: 0 0 0 3px rgba(227,0,0,.12); }
body.dark-mode .kl-input::placeholder,
body.dark-mode .kl-textarea::placeholder { color: var(--text-muted); }
body.dark-mode .qty-wrap               { border-color: var(--border-strong); }
body.dark-mode .qty-btn                { background: var(--surface-2); color: var(--text-secondary); }
body.dark-mode .qty-btn:hover          { background: rgba(227,0,0,.1); color: var(--red); }
body.dark-mode .qty-num                { background: var(--surface); border-color: var(--border); color: var(--text-primary); }
body.dark-mode .rq-note                { background: rgba(217,119,6,.1); border-color: rgba(217,119,6,.35); color: #fcd34d; }
body.dark-mode #rq-toast.toast-ok      { background: rgba(5,150,105,.12); color: #6ee7b7; border-left-color: #059669; }
body.dark-mode #rq-toast.toast-err     { background: rgba(220,38,38,.1); color: #f87171; border-left-color: var(--red); }
body.dark-mode .rq-item                { background: var(--surface-2); border-color: var(--border); }
body.dark-mode .rq-item:hover          { border-color: var(--border-strong); }
body.dark-mode .rq-model-name          { color: var(--text-primary); }
body.dark-mode .rq-meta                { color: var(--text-muted); }
body.dark-mode .rq-meta-chip           { background: var(--surface); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .rq-others              { color: #6ee7b7; }
body.dark-mode .badge-loco             { background: rgba(37,99,235,.15); color: #93c5fd; }
body.dark-mode .badge-wagon            { background: rgba(124,58,237,.15); color: #c4b5fd; }
body.dark-mode .rq-delete-btn          { color: var(--border-strong); }
body.dark-mode .rq-delete-btn:hover    { color: #f87171; background: rgba(220,38,38,.1); }
body.dark-mode .rq-empty               { color: var(--text-muted); }
body.dark-mode select option           { background: var(--surface-2); color: var(--text-primary); }

/* ── a1collection / a1wishlist (Add to Collection/Wishlist pages) ── */
body.dark-mode .ac-banner,
body.dark-mode .kl-banner             { box-shadow: 0 4px 16px rgba(0,0,0,.4); }
body.dark-mode .type-toggle,
body.dark-mode .type-wrap .type-toggle{ background: var(--surface); border-color: var(--border); }
body.dark-mode .type-btn:not(.active):hover,
body.dark-mode .tbtn:not(.on):hover   { background: var(--surface-2); color: var(--text-primary); }
body.dark-mode .cat-panel             { background: var(--surface); border-color: var(--border); }
body.dark-mode .cat-head              { background: var(--surface-2); border-bottom-color: var(--border); }
body.dark-mode .cat-search,
body.dark-mode .s-inp                 { background: var(--surface); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .cat-search:focus,
body.dark-mode .s-inp:focus           { border-color: var(--red); background: var(--surface); }
body.dark-mode .cat-search::placeholder,
body.dark-mode .s-inp::placeholder    { color: var(--text-muted); }
body.dark-mode .search-icon,
body.dark-mode .sw .si                { color: var(--text-muted); }
body.dark-mode .filter-sel,
body.dark-mode .fsel                  { background-color: var(--surface); border-color: var(--border-strong); color: var(--text-secondary); }
body.dark-mode .filter-sel:focus,
body.dark-mode .fsel:focus            { border-color: var(--red); }
body.dark-mode .filter-sel.active,
body.dark-mode .fsel.on               { background-color: rgba(227,0,0,.08); border-color: var(--red); color: var(--red); }
body.dark-mode .results-bar,
body.dark-mode .res-bar               { border-bottom-color: var(--border); }
body.dark-mode .results-count,
body.dark-mode .res-ct                { color: var(--text-muted); }
body.dark-mode .results-count strong,
body.dark-mode .res-ct strong         { color: var(--text-primary); }
body.dark-mode .reset-btn,
body.dark-mode .rst-btn               { color: var(--text-muted); }
body.dark-mode .reset-btn:hover,
body.dark-mode .rst-btn:hover         { color: var(--red); }
body.dark-mode .model-card,
body.dark-mode .mc                    { background: var(--surface); border-color: var(--border); }
body.dark-mode .model-card:hover,
body.dark-mode .mc:hover              { border-color: var(--red); }
body.dark-mode .model-card.selected   { background: rgba(227,0,0,.06); border-color: var(--red); }
body.dark-mode .mc.sel                { background: rgba(217,119,6,.08); }
body.dark-mode .mc-img,
body.dark-mode .mc-img                { background: var(--surface-2); }
body.dark-mode .mc-model,
body.dark-mode .mc-nm                 { color: var(--text-primary); }
body.dark-mode .tag-era, .dark-mode .t-era   { background: rgba(217,119,6,.12); color: #fcd34d; border-color: rgba(217,119,6,.3); }
body.dark-mode .tag-op,  .dark-mode .t-op   { background: var(--surface-2); color: var(--text-secondary); border-color: var(--border); }
body.dark-mode .tag-extra,.dark-mode .t-ex  { background: rgba(37,99,235,.12); color: #93c5fd; border-color: rgba(37,99,235,.3); }
body.dark-mode .tag-owned,.dark-mode .t-wish{ background: rgba(5,150,105,.12); color: #6ee7b7; border-color: rgba(5,150,105,.3); }
body.dark-mode .grid-empty,
body.dark-mode .g-empty               { color: var(--text-muted); }
body.dark-mode .detail-empty,
body.dark-mode #d-empty               { background: var(--surface); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .detail-empty-icon,
body.dark-mode .de-ico                { background: rgba(227,0,0,.1); color: var(--red); }
body.dark-mode .detail-card,
body.dark-mode .d-card                { background: var(--surface); border-color: var(--border); }
body.dark-mode .dp-photo-wrap,
body.dark-mode .d-photo               { background: var(--surface-2); border-bottom-color: var(--border); }
body.dark-mode .dp-title,
body.dark-mode #dp-nm                 { color: var(--text-primary); }
body.dark-mode .db-amber, .dark-mode .db-p { background: rgba(217,119,6,.12); color: #fcd34d; border-color: rgba(217,119,6,.3); }
body.dark-mode .db-neutral,.dark-mode .db-n{ background: var(--surface-2); color: var(--text-secondary); border-color: var(--border); }
body.dark-mode .db-blue,  .dark-mode .db-b { background: rgba(37,99,235,.12); color: #93c5fd; border-color: rgba(37,99,235,.3); }
body.dark-mode .db-red,   .dark-mode .db-r { background: rgba(227,0,0,.1); color: #f87171; border-color: rgba(227,0,0,.25); }
body.dark-mode .meta-label,
body.dark-mode .ml                    { color: var(--text-muted); }
body.dark-mode .meta-value,
body.dark-mode .mv                    { color: var(--text-primary); }
body.dark-mode .dp-desc,
body.dark-mode .desc-w                { color: var(--text-secondary); border-top-color: var(--border); }
body.dark-mode .desc-fade             { background: linear-gradient(transparent, var(--surface)); }
body.dark-mode .desc-fd               { background: linear-gradient(transparent, var(--surface)); }
body.dark-mode .desc-toggle,
body.dark-mode .desc-tg               { color: var(--red); }
body.dark-mode .owned-banner          { background: rgba(5,150,105,.1); border-color: rgba(110,231,183,.35); color: #6ee7b7; }
body.dark-mode .wish-banner           { background: rgba(217,119,6,.1); border-color: rgba(253,230,138,.35); color: #fcd34d; }
body.dark-mode .form-card             { background: var(--surface); border-color: var(--border); }
body.dark-mode .section-title::after,
body.dark-mode .fsec-title::after     { background: var(--border); }
body.dark-mode .kl-label,.dark-mode .klbl,.dark-mode .kl-label { color: var(--text-muted); }
body.dark-mode .kl-input,
body.dark-mode .kl-textarea           { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .kl-input:focus,
body.dark-mode .kl-textarea:focus     { border-color: var(--red); background: var(--surface); }
body.dark-mode .qty-wrap,
body.dark-mode .qty-s                 { border-color: var(--border-strong); }
body.dark-mode .qty-btn,
body.dark-mode .qty-b                 { background: var(--surface-2); color: var(--text-secondary); }
body.dark-mode .qty-btn:hover,
body.dark-mode .qty-b:hover           { background: var(--red); color: #fff; }
body.dark-mode .qty-num,
body.dark-mode .qty-i                 { background: var(--surface); border-color: var(--border); color: var(--text-primary); }
body.dark-mode .btn-sec               { background: var(--surface); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-sec:hover         { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .ac-alert-success,
body.dark-mode .alert-success         { background: rgba(5,150,105,.12); color: #6ee7b7; border-left-color: #059669; }
body.dark-mode .ac-alert-error,
body.dark-mode .alert-error           { background: rgba(220,38,38,.1); color: #f87171; border-left-color: var(--red); }
body.dark-mode select option          { background: var(--surface-2); color: var(--text-primary); }

/* ── a1collection & a1wishlist pages (catalogue picker) ─────────────────────
   These pages define short local CSS variables (--surface2, --bdr, --t1 etc.)
   that differ from the global system tokens. The cleanest fix is to override
   those LOCAL variables at body.dark-mode level so every element picks up
   the correct dark values automatically — no per-element rule needed for each.   */
body.dark-mode {
    /* Override local page-level short-name tokens */
    --surface:  #1e1e1e;
    --surface2: #2a2a2a;
    --sur:      #1e1e1e;
    --sur2:     #2a2a2a;
    --bg:       #121212;
    --bdr:      #333333;
    --bdr2:     #444444;
    --bd:       #333333;
    --bd2:      #444444;
    --t1:       #e0e0e0;
    --t2:       #b0b0b0;
    --tm:       #808080;
    /* Amber tints used in a1wishlist */
    --pri-lt:   rgba(217,119,6,.12);
    --pri-bd:   rgba(253,230,138,.3);
    /* Green / blue / amber light tints */
    --amber-lt: rgba(217,119,6,.12);
    --amber-bd: rgba(253,230,138,.3);
    --blue-lt:  rgba(37,99,235,.12);
    --blue-bd:  rgba(37,99,235,.3);
    --green-lt: rgba(5,150,105,.12);
    --green-bd: rgba(110,231,183,.35);
    --red-lt:   rgba(227,0,0,.1);
    --red-bd:   rgba(252,165,165,.3);
}

/* Elements that use hardcoded colours or need explicit dark overrides beyond the variables above */
body.dark-mode .ac-alert-success,
body.dark-mode .alert-success        { background: rgba(5,150,105,.12)  !important; color: #6ee7b7  !important; border-left-color: #059669 !important; }
body.dark-mode .ac-alert-error,
body.dark-mode .alert-error          { background: rgba(220,38,38,.1)   !important; color: #f87171  !important; border-left-color: var(--red) !important; }
body.dark-mode .type-btn.active,
body.dark-mode .tbtn.on              { box-shadow: 0 2px 8px rgba(227,0,0,.25); }
body.dark-mode .desc-fade,
body.dark-mode .desc-fd              { background: linear-gradient(transparent, var(--surface)) !important; }
body.dark-mode .owned-banner         { background: rgba(5,150,105,.1); border-color: rgba(110,231,183,.3); color: #6ee7b7; }
body.dark-mode .owned-banner a       { color: #6ee7b7; }
body.dark-mode .wish-banner          { background: rgba(217,119,6,.1); border-color: rgba(253,230,138,.3); color: #fcd34d; }
body.dark-mode .wish-banner a        { color: #fcd34d; }
body.dark-mode .qty-btn:hover,
body.dark-mode .qty-b:hover          { background: var(--red); color: #fff; }
body.dark-mode .btn-sec              { text-decoration: none; }
body.dark-mode .model-card.selected  { background: rgba(227,0,0,.08); }
body.dark-mode .mc.sel               { background: rgba(217,119,6,.1); }
body.dark-mode .de-ico               { background: rgba(227,0,0,.12); color: var(--red); }
body.dark-mode .detail-empty-icon    { background: rgba(227,0,0,.12); color: var(--red); }
body.dark-mode .mc-noimg,
body.dark-mode .mc-ni,
body.dark-mode .d-noimg,
body.dark-mode .dp-noimg-icon        { color: var(--bdr2); }
body.dark-mode .grid-empty i,
body.dark-mode .g-empty i            { color: var(--bdr2); opacity: .6; }
body.dark-mode .kl-input:focus,
body.dark-mode .kl-textarea:focus,
body.dark-mode .cat-search:focus,
body.dark-mode .s-inp:focus          { box-shadow: 0 0 0 3px rgba(227,0,0,.1); }
body.dark-mode .filter-sel.active,
body.dark-mode .fsel.on              { background-color: rgba(227,0,0,.1); border-color: var(--red); color: var(--red); }
body.dark-mode .rst-btn:hover,
body.dark-mode .reset-btn:hover      { color: var(--red); }
body.dark-mode select option         { background-color: var(--surface2); color: var(--t1); }

/* ── Barcode scan button — keep identical to light mode on all pages ── */
body.dark-mode .barcode-scan-btn {
    background: #111111 !important;
    color: #ffffff !important;
}
body.dark-mode .barcode-scan-btn:hover,
body.dark-mode .barcode-scan-btn:focus {
    background: var(--red) !important;
    color: #ffffff !important;
}
/* ── Brand logo pill on cards — black background in dark mode ── */
body.dark-mode .card-brand-logo,
body.dark-mode .dst-brand-logo {
    background: rgba(0, 0, 0, 0);
}
/* ── Lot listing — dark mode ─────────────────────────────────── */
body.dark-mode .listing-card-lot-badge { background: rgba(227,0,0,.92); color: #fff; }
body.dark-mode #modalLotStrip          { border-top-color: #333; }
body.dark-mode .lot-strip-label        { color: #808080; }
body.dark-mode .lot-strip-img          { background: #2a2a2a; border-color: #333; }
body.dark-mode .lot-strip-model        { color: #e0e0e0; }
body.dark-mode .lot-strip-op           { color: #808080; }
body.dark-mode .lot-row-badge          { background: rgba(227,0,0,.15); color: #e30000; border-color: rgba(227,0,0,.3); }

/* ── Dark mode: lot composition in edit_listing.php ─────────────── */
body.dark-mode .lot-item-tile           { background: var(--surface-2); border-color: var(--border); }
body.dark-mode .lot-item-tile img       { background: var(--surface); border-bottom-color: var(--border); }
body.dark-mode .lot-item-tile-model     { color: var(--text-primary); }
body.dark-mode .lot-item-tile-op        { color: var(--text-muted); }
body.dark-mode .lot-item-tile-val       { color: #34d399; }
body.dark-mode .lot-item-tile.removing  { border-color: var(--red); }
body.dark-mode .lot-count-chip          { background: rgba(227,0,0,.15); border-color: rgba(227,0,0,.3); color: #e30000; }
body.dark-mode .btn-lot-title-save      { background: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .btn-lot-title-save:hover{ background: var(--border); color: var(--text-primary); }
body.dark-mode .add-items-toggle        { background: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .add-items-toggle:hover  { background: var(--border); color: var(--text-primary); }
body.dark-mode .add-items-search input  { background: var(--surface-2); border-color: var(--border); color: var(--text-primary); }
body.dark-mode .add-items-list          { background: var(--surface); border-color: var(--border); }
body.dark-mode .add-item-row            { border-bottom-color: var(--border); }
body.dark-mode .add-item-row:hover      { background: var(--surface-2); }
body.dark-mode .add-item-row.selected   { background: rgba(227,0,0,.08); }
body.dark-mode .add-item-row img        { background: var(--surface-2); border-color: var(--border); }
body.dark-mode .add-item-row-model      { color: var(--text-primary); }
body.dark-mode .add-item-row-sub        { color: var(--text-muted); }
body.dark-mode .add-item-row-qty        { color: var(--text-secondary); }
body.dark-mode .add-items-empty         { color: var(--text-muted); }
/* ── Site footer (.footer-custom) ────────────────────────────── */
body.dark-mode .footer-custom {
    background-color: var(--surface) !important;  /* overrides inline white */
    color: var(--text-muted) !important;           /* overrides inline black */
    border-top: 1px solid var(--border);
}
body.dark-mode .footer-custom p      { color: var(--text-muted); }
body.dark-mode .footer-custom a      { color: var(--text-secondary); }
body.dark-mode .footer-custom a:hover{ color: var(--text-primary); }
/* keep the klinnect brand red in both modes */
body.dark-mode .footer-custom .klinnect-red { color: #e30000; }
/* ── Unit Details Panel ──────────────────────────────────────── */

/* Panel background and divider */
body.dark-mode .unit-details-panel {
    background: var(--surface);
    border-top-color: var(--border);
}

/* ── Incomplete set panel ────────────────────────────────── */
body.dark-mode .set-incomplete-panel {
    border-top-color: var(--border);
}
body.dark-mode .set-panel-header {
    color: var(--text-primary);
}
body.dark-mode .set-panel-close {
    color: var(--text-secondary);
}
body.dark-mode .set-panel-close:hover {
    color: var(--text-primary);
}
body.dark-mode .set-pieces-table th {
    color: var(--text-muted);
}
body.dark-mode .set-pieces-counter {
    color: var(--text-muted);
}
body.dark-mode .spc-used {
    color: var(--text-primary);
}
body.dark-mode .spc-remain {
    color: var(--text-muted);
}
body.dark-mode .set-status-row .btn-set-action {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-secondary);
}
body.dark-mode .set-status-row .btn-set-action:hover {
    border-color: var(--red);
    color: var(--red);
}
body.dark-mode .btn-add-piece {
    border-color: var(--border);
    color: var(--text-secondary);
}
body.dark-mode .btn-add-piece:hover {
    border-color: var(--red);
    color: var(--red);
}
body.dark-mode .set-pieces-footer .btn-save-pieces {
    background: var(--green, #059669);
}

/* All inputs / selects inside the table */
body.dark-mode .unit-input {
    background-color: var(--surface-2);   /* longhand — does NOT reset background-image/position/size */
    border-color: var(--border-strong);
    color: var(--text-primary);
}
body.dark-mode .unit-input:focus {
    background-color: var(--surface);
    border-color: var(--red);
    box-shadow: 0 0 0 2px rgba(227,0,0,.12);
}

/* Select arrows — light arrow SVG + explicit sub-properties so none get defaulted */
body.dark-mode .unit-condition,
body.dark-mode .unit-version {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23aaaaaa' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-size:     7px 4px;
}
body.dark-mode .unit-condition { background-position: right 6px center; }
body.dark-mode .unit-version   { background-position: right 5px center; }

/* Table header row */
body.dark-mode .unit-table thead th {
    background: var(--surface);
    border-bottom-color: var(--border);
    color: var(--text-muted);
}

/* Table row lines and alternating tint */
body.dark-mode .unit-table tbody td {
    border-bottom-color: var(--border);
}
body.dark-mode .unit-table tbody tr:nth-child(even) td {
    background: var(--surface-2);
}
body.dark-mode .unit-table tbody tr:nth-child(odd) td {
    background: var(--surface);
}

/* Unit number cell */
body.dark-mode .unit-num {
    color: var(--text-muted);
}

/* € symbol */
body.dark-mode .unit-euro {
    color: var(--text-muted);
}

/* Toggle button — resting state */
body.dark-mode .btn-unit-toggle {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-muted);
}
body.dark-mode .btn-unit-toggle:hover {
    background: var(--border);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

/* Toggle button — has-data indicator */
body.dark-mode .btn-unit-toggle.has-data {
    color: var(--text-secondary);
    border-color: rgba(252,165,165,.28);
}

/* Save button — keep red, just soften the hover slightly */
body.dark-mode .btn-unit-save         { background: var(--red); }
body.dark-mode .btn-unit-save:hover   { background: var(--red-dk); }
body.dark-mode .btn-unit-save:disabled { opacity: .35; }

/* ── Post Flairs ─────────────────────────────────────────── */
body.dark-mode .flair-layout      { background: rgba(29,78,216,.14);  color: #93c5fd;  border-color: rgba(29,78,216,.35); }
body.dark-mode .flair-acquisition { background: rgba(21,128,61,.14);  color: #6ee7b7;  border-color: rgba(21,128,61,.35); }
body.dark-mode .flair-question    { background: rgba(194,65,12,.14);  color: #fdba74;  border-color: rgba(194,65,12,.35); }
body.dark-mode .flair-showcase    { background: rgba(126,34,206,.14); color: #d8b4fe;  border-color: rgba(126,34,206,.35); }
body.dark-mode .flair-trade       { background: rgba(190,18,60,.14);  color: #fda4af;  border-color: rgba(190,18,60,.35); }
 
/* Flair picker inside the composer */
body.dark-mode .flair-picker-label         { color: var(--text-muted); }
body.dark-mode .flair-option               { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .flair-option:hover         { border-color: var(--border-strong); color: var(--text-secondary); }
body.dark-mode .flair-option[data-flair="layout"].selected      { background: rgba(29,78,216,.12);  color: #93c5fd;  border-color: rgba(29,78,216,.4); }
body.dark-mode .flair-option[data-flair="acquisition"].selected { background: rgba(21,128,61,.12);  color: #6ee7b7;  border-color: rgba(21,128,61,.4); }
body.dark-mode .flair-option[data-flair="question"].selected    { background: rgba(194,65,12,.12);  color: #fdba74;  border-color: rgba(194,65,12,.4); }
body.dark-mode .flair-option[data-flair="showcase"].selected    { background: rgba(126,34,206,.12); color: #d8b4fe;  border-color: rgba(126,34,206,.4); }
body.dark-mode .flair-option[data-flair="trade"].selected       { background: rgba(190,18,60,.12);  color: #fda4af;  border-color: rgba(190,18,60,.4); }
 
/* Flair filter row */
body.dark-mode .flair-filter-row .flair-filter-btn             { background: var(--surface); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .flair-filter-row .flair-filter-btn:hover       { border-color: var(--border-strong); color: var(--text-secondary); }
body.dark-mode .flair-filter-row .flair-filter-btn.active      { /* inherits flair colour from flair-option.selected above */ }
 
/* ── Bookmark button ─────────────────────────────────────── */
body.dark-mode .bookmark-btn              { color: var(--text-muted); }
body.dark-mode .bookmark-btn:hover        { color: #fcd34d; background: rgba(217,119,6,.12); }
body.dark-mode .bookmark-btn.bookmarked   { color: #fcd34d; }
 
/* ── Who Liked link & modal ──────────────────────────────── */
body.dark-mode .who-liked-link            { color: var(--text-muted); }
body.dark-mode .who-liked-link:hover      { color: var(--red); }
body.dark-mode #likersModal .modal-content{ background: var(--surface);   border-color: var(--border); }
body.dark-mode #likersModal .modal-header { background: var(--surface-2) !important; border-color: var(--border) !important; }
body.dark-mode #likersModal .modal-title  { color: var(--text-primary); }
body.dark-mode #likersModal .close        { color: var(--text-muted); }
body.dark-mode .liker-item .liker-img     { border-color: var(--border); }
body.dark-mode .liker-name               { color: var(--text-primary); }
body.dark-mode .liker-name:hover         { color: var(--red); }
 
/* ── Comment replies ─────────────────────────────────────── */
body.dark-mode .comment-replies          { border-left-color: var(--border); }
body.dark-mode .reply-item .comment-bubble { background: var(--surface);  border-color: var(--border); }
body.dark-mode .comment-reply-btn        { color: var(--text-muted); }
body.dark-mode .comment-reply-btn:hover  { color: var(--red); background: rgba(227,0,0,.08); }
body.dark-mode .reply-form-container .comment-input-wrapper { background: var(--surface-2); border-color: var(--border); }
body.dark-mode .reply-form-container .comment-textarea      { color: var(--text-primary); }
body.dark-mode .reply-form-container .comment-textarea::placeholder { color: var(--text-muted); }
 
/* ── Top comment badge ────────────────────────────────────── */
body.dark-mode .top-comment-badge        { background: rgba(217,119,6,.14); color: #fcd34d; border-color: rgba(217,119,6,.35); }

/* ── Post Flairs ─────────────────────────────────────────── */
body.dark-mode .flair-layout      { background: rgba(29,78,216,.14);  color: #93c5fd;  border-color: rgba(29,78,216,.35); }
body.dark-mode .flair-acquisition { background: rgba(21,128,61,.14);  color: #6ee7b7;  border-color: rgba(21,128,61,.35); }
body.dark-mode .flair-question    { background: rgba(194,65,12,.14);  color: #fdba74;  border-color: rgba(194,65,12,.35); }
body.dark-mode .flair-showcase    { background: rgba(126,34,206,.14); color: #d8b4fe;  border-color: rgba(126,34,206,.35); }
body.dark-mode .flair-trade       { background: rgba(190,18,60,.14);  color: #fda4af;  border-color: rgba(190,18,60,.35); }
 
/* Flair picker inside the composer */
body.dark-mode .flair-picker-label         { color: var(--text-muted); }
body.dark-mode .flair-option               { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .flair-option:hover         { border-color: var(--border-strong); color: var(--text-secondary); }
body.dark-mode .flair-option[data-flair="layout"].selected      { background: rgba(29,78,216,.12);  color: #93c5fd;  border-color: rgba(29,78,216,.4); }
body.dark-mode .flair-option[data-flair="acquisition"].selected { background: rgba(21,128,61,.12);  color: #6ee7b7;  border-color: rgba(21,128,61,.4); }
body.dark-mode .flair-option[data-flair="question"].selected    { background: rgba(194,65,12,.12);  color: #fdba74;  border-color: rgba(194,65,12,.4); }
body.dark-mode .flair-option[data-flair="showcase"].selected    { background: rgba(126,34,206,.12); color: #d8b4fe;  border-color: rgba(126,34,206,.4); }
body.dark-mode .flair-option[data-flair="trade"].selected       { background: rgba(190,18,60,.12);  color: #fda4af;  border-color: rgba(190,18,60,.4); }
 
/* Flair filter row */
body.dark-mode .flair-filter-row .flair-filter-btn             { background: var(--surface); border-color: var(--border); color: var(--text-muted); }
body.dark-mode .flair-filter-row .flair-filter-btn:hover       { border-color: var(--border-strong); color: var(--text-secondary); }
body.dark-mode .flair-filter-row .flair-filter-btn.active      { /* inherits flair colour from flair-option.selected above */ }
 
/* ── Bookmark button ─────────────────────────────────────── */
body.dark-mode .bookmark-btn              { color: var(--text-muted); }
body.dark-mode .bookmark-btn:hover        { color: #fcd34d; background: rgba(217,119,6,.12); }
body.dark-mode .bookmark-btn.bookmarked   { color: #fcd34d; }
 
/* ── Who Liked link & modal ──────────────────────────────── */
body.dark-mode .who-liked-link            { color: var(--text-muted); }
body.dark-mode .who-liked-link:hover      { color: var(--red); }
body.dark-mode #likersModal .modal-content{ background: var(--surface);   border-color: var(--border); }
body.dark-mode #likersModal .modal-header { background: var(--surface-2) !important; border-color: var(--border) !important; }
body.dark-mode #likersModal .modal-title  { color: var(--text-primary); }
body.dark-mode #likersModal .close        { color: var(--text-muted); }
body.dark-mode .liker-item .liker-img     { border-color: var(--border); }
body.dark-mode .liker-name               { color: var(--text-primary); }
body.dark-mode .liker-name:hover         { color: var(--red); }
 
/* ── Comment replies ─────────────────────────────────────── */
body.dark-mode .comment-replies          { border-left-color: var(--border); }
body.dark-mode .reply-item .comment-bubble { background: var(--surface);  border-color: var(--border); }
body.dark-mode .comment-reply-btn        { color: var(--text-muted); }
body.dark-mode .comment-reply-btn:hover  { color: var(--red); background: rgba(227,0,0,.08); }
body.dark-mode .reply-form-container .comment-input-wrapper { background: var(--surface-2); border-color: var(--border); }
body.dark-mode .reply-form-container .comment-textarea      { color: var(--text-primary); }
body.dark-mode .reply-form-container .comment-textarea::placeholder { color: var(--text-muted); }
 
/* ── Top comment badge ────────────────────────────────────── */
body.dark-mode .top-comment-badge        { background: rgba(217,119,6,.14); color: #fcd34d; border-color: rgba(217,119,6,.35); }
 
/* ── TRADE: Listing card (post-listing-card) ─────────────────────────────── */
body.dark-mode .post-listing-card              { background: var(--surface-2); border-color: var(--border); }
body.dark-mode .post-listing-card:hover        { border-color: var(--red); box-shadow: 0 2px 10px rgba(227,0,0,.15); }
body.dark-mode .plc-photo                      { background: var(--surface); border-right-color: var(--border); }
body.dark-mode .plc-model                      { color: var(--text-primary); }
body.dark-mode .plc-operator                   { color: var(--text-muted); }
body.dark-mode .plc-tag                        { background: rgba(227,0,0,.1); border-color: rgba(227,0,0,.3); }
body.dark-mode .plc-cond-mint                  { background: rgba(21,128,61,.12);  color: #6ee7b7; border-color: rgba(21,128,61,.3); }
body.dark-mode .plc-cond-excellent             { background: rgba(29,78,216,.12);  color: #93c5fd; border-color: rgba(29,78,216,.3); }
body.dark-mode .plc-cond-good                  { background: rgba(180,83,9,.12);   color: #fcd34d; border-color: rgba(180,83,9,.3); }
body.dark-mode .plc-cond-used                  { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }
body.dark-mode .plc-price                      { color: #6ee7b7; }
body.dark-mode .plc-arrow                      { color: var(--border-strong); }
 
/* Listing picker in dark mode */
body.dark-mode .listing-picker-wrap            { background: var(--surface); border-color: var(--border); }
body.dark-mode .listing-picker-header          { background: var(--surface-2); border-color: var(--border); }
body.dark-mode .listing-picker-search          { background: var(--surface); color: var(--text-primary); border-bottom-color: var(--border); }
body.dark-mode .listing-picker-search:focus    { border-bottom-color: var(--red); }
body.dark-mode .listing-picker-item            { border-bottom-color: var(--border); }
body.dark-mode .listing-picker-item:hover      { background: var(--surface-2); }
body.dark-mode .listing-picker-item.selected   { background: rgba(227,0,0,.08); }
body.dark-mode .lpi-model                      { color: var(--text-primary); }
body.dark-mode .lpi-thumb                      { background: var(--surface-2); border-color: var(--border); }
body.dark-mode .lpi-thumb-placeholder          { background: var(--surface-2); border-color: var(--border); }
body.dark-mode .lpi-check                      { color: var(--red); }
body.dark-mode .listing-picker-label           { color: var(--text-muted); }
 
/* Composer listing preview */
body.dark-mode .composer-listing-preview       { background: rgba(227,0,0,.08); border-color: rgba(227,0,0,.3); }
body.dark-mode .clp-model                      { color: #f87171; }
body.dark-mode .clp-meta                       { color: var(--text-muted); }
body.dark-mode .clp-thumb                      { background: var(--surface-2); border-color: rgba(227,0,0,.3); }

/* Checkbox accent already uses var(--red) — nothing to override */
/* ── Filter dropdown (flair + saved posts) ───────────────────────────────── */
body.dark-mode .filter-dropdown-btn              { background: var(--surface); border-color: var(--border); color: var(--text-secondary); }
body.dark-mode .filter-dropdown-btn:hover        { border-color: var(--border-strong); color: var(--text-primary); }
body.dark-mode .filter-dropdown-btn.has-filter   { background: rgba(227,0,0,.1); border-color: rgba(227,0,0,.35); color: #f87171; }
body.dark-mode .filter-dropdown-btn .fdb-caret   { color: var(--text-muted); }
body.dark-mode .filter-dropdown-menu             { background: var(--surface); border-color: var(--border); box-shadow: 0 10px 32px rgba(0,0,0,.4); }
body.dark-mode .fdm-item                         { color: var(--text-secondary); }
body.dark-mode .fdm-item:hover                   { background: var(--surface-2); color: var(--text-primary); }
body.dark-mode .fdm-item.active                  { background: rgba(227,0,0,.1); color: #f87171; }
body.dark-mode .fdm-check                        { color: #f87171; }
body.dark-mode .fdm-divider                      { background: var(--border); }
/* ── User Posts Tab — dark mode ───────────────────────────────── */

body.dark-mode .vu-post-card {
    background: var(--surface);
    border-color: var(--border);
}

body.dark-mode .vu-post-author {
    color: var(--text-primary);
}

body.dark-mode .vu-post-ts {
    color: var(--text-muted);
}

body.dark-mode .vu-post-text {
    color: var(--text-secondary);
}

body.dark-mode .vu-post-link {
    color: var(--red);
}

body.dark-mode .vu-post-stats {
    border-top-color: var(--border);
}

/* Like button dark mode */
body.dark-mode .vu-like-btn {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-muted);
}
body.dark-mode .vu-like-btn:hover,
body.dark-mode .vu-like-btn.vu-liked {
    background: rgba(66, 103, 178, .18);
    border-color: rgba(66, 103, 178, .45);
    color: #82a8f4;
}

body.dark-mode .vu-comment-count {
    color: var(--text-muted);
}

body.dark-mode .vu-feed-link {
    color: var(--text-muted);
}
body.dark-mode .vu-feed-link:hover {
    color: var(--red);
}

body.dark-mode .vu-view-post-btn {
    color: var(--text-muted);
    background: var(--surface-2);
    border-color: var(--border);
}
body.dark-mode .vu-view-post-btn:hover {
    color: var(--red);
    background: var(--border);
    border-color: var(--border-strong);
}

body.dark-mode .vu-post-media-item {
    background: var(--surface-2);
}

body.dark-mode .vu-media-more {
    background: rgba(0, 0, 0, .65);
}
/* ── Filter bar dark mode ──────────────────────────────────── */
body.dark-mode .filter-dropdown-btn {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-muted);
}
body.dark-mode .filter-dropdown-btn:hover,
body.dark-mode .filter-dropdown-btn.open {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text-secondary);
}
body.dark-mode .filter-dropdown-btn.has-active {
    background: rgba(227,0,0,.12);
    border-color: rgba(227,0,0,.35);
    color: #f87171;
}
body.dark-mode .filter-dropdown-btn.has-saved {
    background: rgba(217,119,6,.12);
    border-color: rgba(217,119,6,.35);
    color: #fcd34d;
}
body.dark-mode .filter-dropdown-menu {
    background: var(--surface);
    border-color: var(--border);
}
body.dark-mode .fdm-item { color: var(--text-secondary); }
body.dark-mode .fdm-item:hover { background: var(--surface-2); color: var(--text-primary); }
body.dark-mode .fdm-item.flair-all         .fdm-icon { background: var(--surface-2); border-color: var(--border); }
body.dark-mode .fdm-item.flair-layout      .fdm-icon { background: rgba(29,78,216,.15);  color: #93c5fd; }
body.dark-mode .fdm-item.flair-acquisition .fdm-icon { background: rgba(21,128,61,.15);  color: #6ee7b7; }
body.dark-mode .fdm-item.flair-question    .fdm-icon { background: rgba(194,65,12,.15);  color: #fdba74; }
body.dark-mode .fdm-item.flair-showcase    .fdm-icon { background: rgba(126,34,206,.15); color: #d8b4fe; }
body.dark-mode .fdm-item.flair-trade       .fdm-icon { background: rgba(190,18,60,.15);  color: #fda4af; }
body.dark-mode .fdm-item.flair-saved       .fdm-icon { background: rgba(217,119,6,.15);  color: #fcd34d; }
body.dark-mode .fdm-item.flair-all.active         { background: rgba(227,0,0,.1);    color: #f87171; }
body.dark-mode .fdm-item.flair-layout.active      { background: rgba(29,78,216,.15); color: #93c5fd; }
body.dark-mode .fdm-item.flair-acquisition.active { background: rgba(21,128,61,.15); color: #6ee7b7; }
body.dark-mode .fdm-item.flair-question.active    { background: rgba(194,65,12,.15); color: #fdba74; }
body.dark-mode .fdm-item.flair-showcase.active    { background: rgba(126,34,206,.15);color: #d8b4fe; }
body.dark-mode .fdm-item.flair-trade.active       { background: rgba(190,18,60,.15); color: #fda4af; }
body.dark-mode .fdm-item.flair-saved.active       { background: rgba(217,119,6,.15); color: #fcd34d; }
body.dark-mode .fdm-divider { background: var(--border); }
body.dark-mode .active-filter-pill {
    background: rgba(227,0,0,.1);
    color: #f87171;
    border-color: rgba(227,0,0,.3);
}
body.dark-mode .active-filter-pill.pill-saved {
    background: rgba(217,119,6,.12);
    color: #fcd34d;
    border-color: rgba(217,119,6,.3);
}
/* ── Statistics page — new elements (pulse strip & members table) ── */
body.dark-mode .pulse-strip {
    background-color: var(--surface);
    border-color: var(--border);
}
body.dark-mode .pulse-label {
    color: var(--text-muted);
}
body.dark-mode .pulse-item {
    color: var(--text-secondary);
}
body.dark-mode .pulse-number {
    color: var(--text-primary);
}
body.dark-mode .pulse-divider {
    color: var(--border-strong);
}
body.dark-mode .pulse-dot {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}
body.dark-mode .members-table th {
    color: var(--text-muted);
    border-bottom-color: var(--border);
}
body.dark-mode .members-table td {
    color: var(--text-secondary);
    border-bottom-color: var(--border);
}
body.dark-mode .members-table .rank {
    color: var(--text-muted);
}
body.dark-mode .members-table .uname {
    color: var(--text-primary);
}
body.dark-mode .members-table .badge-num {
    background-color: var(--surface-2);
    border-color: var(--border);
    color: var(--text-secondary);
}
/* ── Filter bar dark mode ──────────────────────────────────── */
body.dark-mode .filter-dropdown-btn {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-muted);
}
body.dark-mode .filter-dropdown-btn:hover,
body.dark-mode .filter-dropdown-btn.open {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text-secondary);
}
body.dark-mode .filter-dropdown-btn.has-active {
    background: rgba(227,0,0,.12);
    border-color: rgba(227,0,0,.35);
    color: #f87171;
}
body.dark-mode .filter-dropdown-btn.has-saved {
    background: rgba(217,119,6,.12);
    border-color: rgba(217,119,6,.35);
    color: #fcd34d;
}
body.dark-mode .filter-dropdown-menu {
    background: var(--surface);
    border-color: var(--border);
}
body.dark-mode .fdm-item { color: var(--text-secondary); }
body.dark-mode .fdm-item:hover { background: var(--surface-2); color: var(--text-primary); }
body.dark-mode .fdm-item.flair-all         .fdm-icon { background: var(--surface-2); border-color: var(--border); }
body.dark-mode .fdm-item.flair-layout      .fdm-icon { background: rgba(29,78,216,.15);  color: #93c5fd; }
body.dark-mode .fdm-item.flair-acquisition .fdm-icon { background: rgba(21,128,61,.15);  color: #6ee7b7; }
body.dark-mode .fdm-item.flair-question    .fdm-icon { background: rgba(194,65,12,.15);  color: #fdba74; }
body.dark-mode .fdm-item.flair-showcase    .fdm-icon { background: rgba(126,34,206,.15); color: #d8b4fe; }
body.dark-mode .fdm-item.flair-trade       .fdm-icon { background: rgba(190,18,60,.15);  color: #fda4af; }
body.dark-mode .fdm-item.flair-saved       .fdm-icon { background: rgba(217,119,6,.15);  color: #fcd34d; }
body.dark-mode .fdm-item.flair-all.active         { background: rgba(227,0,0,.1);    color: #f87171; }
body.dark-mode .fdm-item.flair-layout.active      { background: rgba(29,78,216,.15); color: #93c5fd; }
body.dark-mode .fdm-item.flair-acquisition.active { background: rgba(21,128,61,.15); color: #6ee7b7; }
body.dark-mode .fdm-item.flair-question.active    { background: rgba(194,65,12,.15); color: #fdba74; }
body.dark-mode .fdm-item.flair-showcase.active    { background: rgba(126,34,206,.15);color: #d8b4fe; }
body.dark-mode .fdm-item.flair-trade.active       { background: rgba(190,18,60,.15); color: #fda4af; }
body.dark-mode .fdm-item.flair-saved.active       { background: rgba(217,119,6,.15); color: #fcd34d; }
body.dark-mode .fdm-divider { background: var(--border); }
body.dark-mode .active-filter-pill {
    background: rgba(227,0,0,.1);
    color: #f87171;
    border-color: rgba(227,0,0,.3);
}
body.dark-mode .active-filter-pill.pill-saved {
    background: rgba(217,119,6,.12);
    color: #fcd34d;
    border-color: rgba(217,119,6,.3);
}

/* ── Poll dark mode ────────────────────────────────────────── */
body.dark-mode .poll-question-input,
body.dark-mode .poll-option-input {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-primary);
}
body.dark-mode .poll-question-input:focus,
body.dark-mode .poll-option-input:focus {
    border-color: #f87171;
}
body.dark-mode .poll-add-option-btn {
    border-color: var(--border);
    color: var(--text-muted);
}
body.dark-mode .poll-add-option-btn:hover {
    border-color: #f87171;
    color: #f87171;
    background: rgba(227,0,0,.08);
}
body.dark-mode .poll-bar-wrap {
    background: var(--surface-2);
    border-color: var(--border);
}
body.dark-mode .poll-option-btn:not(:disabled):hover .poll-bar-wrap {
    border-color: #f87171;
}
body.dark-mode .poll-bar-fill {
    background: rgba(227,0,0,.13);
}
body.dark-mode .poll-bar-fill.my-vote {
    background: rgba(227,0,0,.25);
}
body.dark-mode .poll-option-label {
    color: var(--text-primary);
}
body.dark-mode .poll-opt-pct {
    color: var(--text-muted);
}
body.dark-mode .poll-my-check {
    color: #f87171;
}
body.dark-mode .poll-total-votes {
    color: var(--text-muted);
}
body.dark-mode .poll-ended-badge {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-muted);
}
body.dark-mode .rq-note-tip            { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.35); color: #93c5fd; 
}
/* ── Collection detail modal — redesigned Details tab ─────── */
body.dark-mode .stat-cell {
    background-color: var(--surface);
    border-color: var(--border);
}
body.dark-mode .info-cell-value {
    background-color: var(--surface-2);
    border-color: var(--border);
}
body.dark-mode .modal-photo-strip { background-color: var(--surface-2); border-color: var(--border); }
body.dark-mode #detailsModal .modal-header::before { background-color: var(--border-strong); }
body.dark-mode .modal-tabs-bar        { background-color: rgba(30,30,30,.82); border-color: var(--border); }
body.dark-mode .modal-tabs            { background-color: var(--surface-2); }
body.dark-mode .modal-tab-link.active { background-color: var(--surface); color: #ff6b6b; box-shadow: 0 1px 5px rgba(0,0,0,.5); }
body.dark-mode .modal-photo-strip     { background: transparent; }
body.dark-mode .modal-photo-wrap      { background-color: transparent; }
@media (max-width: 767.98px) {
    body.dark-mode .modal-photo-strip { background: radial-gradient(120% 130% at 50% 0%, var(--surface) 0%, #171717 100%); }
}
body.dark-mode #modalPhoto            { box-shadow: 0 8px 28px rgba(0,0,0,.5); }
body.dark-mode .info-cell-value       { background: linear-gradient(135deg, rgba(22,163,74,.16) 0%, rgba(22,163,74,.05) 100%); border-color: rgba(22,163,74,.32); }
body.dark-mode #detailsModal .modal-header { background-color: var(--surface); }
body.dark-mode #detailsModal .modal-footer { background-color: rgba(30,30,30,.88); border-color: var(--border); }
body.dark-mode #detailsModal .modal-header .close { background-color: var(--surface-2); color: var(--text-secondary); }
body.dark-mode .btn-modal-close       { background-color: transparent; color: var(--text-muted); }
body.dark-mode .modal-mgmt            { background-color: var(--surface); }
body.dark-mode .stat-cell             { background-color: var(--surface-2); border: none; }
body.dark-mode .notes-text            { background-color: var(--surface-2); }
body.dark-mode .notes-edit textarea   { background-color: var(--surface-2); border-color: transparent; }
body.dark-mode .btn-sell              { background-color: var(--green); color: #fff; border: none; box-shadow: 0 3px 10px rgba(22,163,74,.35); }
body.dark-mode .btn-sell:hover        { background-color: var(--green-dk); }
body.dark-mode .btn-remove            { background-color: rgba(220,38,38,.14); color: #f87171; border: none; }
body.dark-mode .btn-remove:hover      { background-color: rgba(220,38,38,.24); }
body.dark-mode .btn-unit-toggle       { background-color: var(--surface-2); border: none; }
body.dark-mode .custom-ph,
body.dark-mode .custom-ph-sm,
body.dark-mode .brand-pill-text { background-color: var(--surface-2); color: var(--text-muted); }
body.dark-mode .btn-tab-icon.blue      { background-color: rgba(37,99,235,.12); border-color: rgba(37,99,235,.3); color: #93c5fd; }
body.dark-mode .other-table-block         { background-color: var(--surface); border-color: var(--border); }
body.dark-mode .other-table th,
body.dark-mode .other-table td            { border-color: var(--border); }
body.dark-mode .other-table tbody tr:hover td { background-color: var(--surface-2); }
body.dark-mode .other-count               { background-color: var(--surface-2); }
body.dark-mode .other-table .row-del      { color: #f87171; }
body.dark-mode .other-table .row-del:hover { background-color: rgba(220,38,38,.18); }
body.dark-mode .btn-add-other        { background-color: var(--surface); color: #93c5fd; border-color: rgba(37,99,235,.45); }
body.dark-mode .btn-add-other:hover  { background-color: rgba(37,99,235,.14); border-color: #93c5fd; color: #bfdbfe; }
body.dark-mode .other-table .row-edit       { color: var(--text-muted); }
body.dark-mode .other-table .row-edit:hover { color: var(--text-primary); background-color: var(--surface-2); }