/** * Theme preferences for Hapai.by website (desktop + mobile). * Dark palette mirrors the Flutter app: * flutter apps/lib/presentation/theme/app_colors.dart / app_theme.dart * * Mode is stored on (resolved from the * system preference when the user selects "system"). */ /* ─── Dark palette (from Flutter AppColors dark values) ─── */ html[data-theme='dark'] { color-scheme: dark; --app-bg: #1a1d24; --app-surface: #252830; --app-input: #20232b; --app-elevated: #2e333d; --app-text: #e8eaef; --app-text-secondary: #9ca3af; --app-border: #373d49; --app-border-strong: #43474f; --app-primary: #4f46e5; --app-primary-focus: #818cf8; --app-primary-container: #312e81; --app-on-primary-container: #e0e0ff; --app-error: #ef4444; } /* Base surface */ html[data-theme='dark'] body { background-color: var(--app-bg); color: var(--app-text); } /* VIN block on advertisement details. Keep the light-theme gradient and * spacing untouched; these rules only replace its light surfaces in dark mode. */ html[data-theme='dark'] .vin-section { background: var(--app-surface) !important; border-color: var(--app-border) !important; } html[data-theme='dark'] .vin-section h2, html[data-theme='dark'] .vin-section h3 { color: var(--app-text) !important; } html[data-theme='dark'] .vin-container { background: var(--app-input) !important; border-color: var(--app-border-strong) !important; } html[data-theme='dark'] .vin-number { color: var(--app-text) !important; } html[data-theme='dark'] .btn-copy-vin { background: var(--app-elevated) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .vin-help { color: var(--app-text-secondary) !important; } @media (max-width: 1023px) { html[data-theme='dark'] .vin-number:hover { background-color: var(--app-elevated) !important; } html[data-theme='dark'] .vin-number:active { background-color: var(--app-border) !important; } } /* Empty catalog state: keep the outline readable on dark category, * subsection and auction catalog pages, including the mobile layout. */ html[data-theme='dark'] .no-listings-message, html[data-theme='dark'] .home-page .listings-grid > .no-listings-message { border-color: var(--app-border) !important; } html[data-theme='dark'] .empty-state { border-color: var(--app-border) !important; } html[data-theme='dark'] { color-scheme: dark; } html[data-theme='dark'] input, html[data-theme='dark'] textarea, html[data-theme='dark'] select { color-scheme: dark; } /* Header */ html[data-theme='dark'] .header { background: var(--app-surface); border-bottom-color: var(--app-border); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } html[data-theme='dark'] .header-action-btn { background: var(--app-input) !important; color: var(--app-text); border-color: var(--app-border) !important; box-shadow: none !important; } html[data-theme='dark'] .header-action-btn:hover, html[data-theme='dark'] .header-action-btn:focus-visible, html[data-theme='dark'] .header-notifications-btn:hover, html[data-theme='dark'] .header-notifications-btn:focus-visible { background: var(--app-primary) !important; color: #ffffff !important; border-color: var(--app-primary) !important; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4) !important; outline: none !important; } html[data-theme='dark'] .header-action-btn:active { background: var(--app-elevated) !important; border-color: var(--app-border-strong) !important; box-shadow: none !important; } /* Create-ad button highlight: a crisp, unblurred stripe works in both themes. */ html[data-theme='dark'] .btn--create-ad::before { background: rgba(255, 255, 255, 0.22); } html[data-theme='light'] .btn--create-ad::before { background: rgba(255, 255, 255, 0.28); } @media (max-width: 1023px) { html[data-theme='dark'] .mobile-header-btn { background: #2563eb !important; border-color: #1d4ed8 !important; } html[data-theme='dark'] .mobile-header-btn::before { background: rgba(255, 255, 255, 0.22); } html[data-theme='light'] .mobile-header-btn { background: #2563eb !important; border-color: #1d4ed8 !important; } html[data-theme='light'] .mobile-header-btn::before { background: rgba(255, 255, 255, 0.28); } } /* The selected web theme, not the OS preference, controls the brand asset. */ .logo--dark { display: none; } html[data-theme='dark'] .logo--light { display: none; } html[data-theme='dark'] .logo--dark { display: inline-block; } /* Footer: keep dark, align with the app background */ html[data-theme='dark'] .footer { background: var(--app-input); color: var(--app-text-secondary); } /* Dropdown menus */ html[data-theme='dark'] .region-dropdown { background: var(--app-surface); border-color: var(--app-border) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } html[data-theme='dark'] .region-dropdown__header { border-bottom-color: var(--app-border) !important; } html[data-theme='dark'] .region-dropdown__actions { border-top-color: var(--app-border) !important; } html[data-theme='dark'] .region-select { border-color: var(--app-border) !important; background-color: var(--app-input); } html[data-theme='dark'] .region-select:focus { border-color: var(--app-primary-focus) !important; box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.16); } html[data-theme='dark'] .region-select:disabled { border-color: var(--app-border) !important; } html[data-theme='dark'] .user-menu__dropdown { background: var(--app-surface); border-color: var(--app-border) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } html[data-theme='dark'] .user-menu__item { color: var(--app-text); } html[data-theme='dark'] .user-menu__item:hover { background: var(--app-elevated); } html[data-theme='dark'] .user-menu__divider { border-top-color: var(--app-border) !important; background: transparent !important; } /* Cards & sections */ html[data-theme='dark'] .settings-section, html[data-theme='dark'] .auth-card { background: var(--app-surface); border-color: var(--app-border); color: var(--app-text); } /* Modals: style.css forces a white background with !important here */ html[data-theme='dark'] .modal-content { background: var(--app-surface) !important; color: var(--app-text); } html[data-theme='dark'] .modal-content .modal-title-line, html[data-theme='dark'] .modal-content .modal-header h3 { color: var(--app-text); } html[data-theme='dark'] .modal-content .auth-subtitle, html[data-theme='dark'] .modal-content .form-label, html[data-theme='dark'] .modal-content .checkbox-label, html[data-theme='dark'] .modal-content .auth-link, html[data-theme='dark'] .modal-content .auth-card__footer p { color: var(--app-text-secondary); } html[data-theme='dark'] .modal-content .alert--error { background: rgba(239, 68, 68, 0.12); color: var(--app-error); } /* Shared dark modal surfaces: remove light borders and separators from all * dialogs, including price, exchange and auction actions. */ html[data-theme='dark'] .modal-content, html[data-theme='dark'] .modal-overlay .modal-content { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .modal-content .modal-header, html[data-theme='dark'] .modal-overlay .modal-header, html[data-theme='dark'] .modal-content .modal-footer, html[data-theme='dark'] .modal-overlay .modal-footer { border-color: var(--app-border) !important; } html[data-theme='dark'] .modal-content .modal-close, html[data-theme='dark'] .modal-overlay .modal-close { border-color: transparent !important; color: var(--app-text-secondary) !important; } html[data-theme='dark'] .modal-content .modal-close:hover, html[data-theme='dark'] .modal-overlay .modal-close:hover { background: var(--app-elevated) !important; color: var(--app-text) !important; } /* Forms */ html[data-theme='dark'] .form-input, html[data-theme='dark'] .form-textarea, html[data-theme='dark'] .form-select { background-color: var(--app-input); border-color: var(--app-border); color: var(--app-text); } html[data-theme='dark'] .form-input::placeholder, html[data-theme='dark'] .form-textarea::placeholder, html[data-theme='dark'] .form-select::placeholder { color: var(--app-text-secondary); } html[data-theme='dark'] .form-input:focus, html[data-theme='dark'] .form-textarea:focus, html[data-theme='dark'] .form-select:focus { border-color: var(--app-primary-focus); } /* All text controls: normalize browser autofill and keep the selected web * theme independent from the operating-system color preference. */ html[data-theme='light'] input:not([type='checkbox']):not([type='radio']):not([type='file']), html[data-theme='light'] textarea, html[data-theme='light'] select, html[data-theme='light'] input:not([type='checkbox']):not([type='radio']):not([type='file']):-webkit-autofill, html[data-theme='light'] input:not([type='checkbox']):not([type='radio']):not([type='file']):-webkit-autofill:hover, html[data-theme='light'] input:not([type='checkbox']):not([type='radio']):not([type='file']):-webkit-autofill:focus { background-color: #ffffff !important; color: #111827 !important; -webkit-text-fill-color: #111827 !important; -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important; box-shadow: 0 0 0 1000px #ffffff inset !important; } html[data-theme='light'] input:not([type='checkbox']):not([type='radio']):not([type='file']), html[data-theme='light'] textarea, html[data-theme='light'] select { border-color: #d1d5db !important; } html[data-theme='dark'] input:not([type='checkbox']):not([type='radio']):not([type='file']), html[data-theme='dark'] textarea, html[data-theme='dark'] select, html[data-theme='dark'] input:not([type='checkbox']):not([type='radio']):not([type='file']):-webkit-autofill, html[data-theme='dark'] input:not([type='checkbox']):not([type='radio']):not([type='file']):-webkit-autofill:hover, html[data-theme='dark'] input:not([type='checkbox']):not([type='radio']):not([type='file']):-webkit-autofill:focus { background-color: var(--app-input) !important; color: var(--app-text) !important; -webkit-text-fill-color: var(--app-text) !important; -webkit-box-shadow: 0 0 0 1000px var(--app-input) inset !important; box-shadow: 0 0 0 1000px var(--app-input) inset !important; border-color: var(--app-border) !important; } html[data-theme='dark'] input:not([type='checkbox']):not([type='radio']):not([type='file']):focus, html[data-theme='dark'] textarea:focus, html[data-theme='dark'] select:focus { border-color: var(--app-primary-focus) !important; } /* The normalization above paints an opaque inset surface over every control, which covers the chevron the sort selects draw with background-image (their native arrow is already removed by `appearance: none`). The overlay only exists to mask autofill on text fields, so selects can drop it safely — their own background-color already matches that surface. */ html[data-theme='light'] .sort-select, html[data-theme='dark'] .sort-select { box-shadow: none !important; -webkit-box-shadow: none !important; } /* The default chevron is #666, which is too dim on the dark surface. */ html[data-theme='dark'] .sort-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important; } @media (max-width: 1023px) { /* Preserve the existing light mobile input surface; only dark mode gets * the Flutter input token. */ html[data-theme='light'] input:not([type='checkbox']):not([type='radio']):not([type='file']), html[data-theme='light'] textarea, html[data-theme='light'] select { background-color: #ece6f0 !important; color: var(--m3-on-surface) !important; -webkit-text-fill-color: var(--m3-on-surface) !important; color-scheme: light !important; } html[data-theme='dark'] input:not([type='checkbox']):not([type='radio']):not([type='file']), html[data-theme='dark'] textarea, html[data-theme='dark'] select { color-scheme: dark !important; } } html[data-theme='dark'] .mobile-location-picker__select, html[data-theme='dark'] .mobile-nav, html[data-theme='dark'] .mobile-search-history-dropdown, html[data-theme='dark'] .search-dropdown, html[data-theme='dark'] .filter-sheet, html[data-theme='dark'] .sort-sheet { background-color: var(--app-surface); color: var(--app-text); border-color: var(--app-border); } /* Mobile search: keep the field surfaces in sync with the desktop dark theme. */ @media (max-width: 1023px) { html[data-theme='dark'] .mobile-search__input-group { background-color: var(--app-elevated) !important; border-color: var(--app-border) !important; } html[data-theme='dark'] .mobile-search__input { background-color: var(--app-input) !important; color: var(--app-text) !important; -webkit-text-fill-color: var(--app-text) !important; } html[data-theme='dark'] .mobile-search__input::placeholder { color: var(--app-text-secondary) !important; opacity: 1; } html[data-theme='dark'] .mobile-search__voice-btn { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .mobile-search__voice-btn:hover, html[data-theme='dark'] .mobile-search__voice-btn:focus-visible { background-color: var(--app-surface) !important; color: var(--app-text) !important; } /* Mobile menu tabs: use dark segmented-control surfaces. */ html[data-theme='dark'] .mobile-nav__tabs { background-color: var(--app-input) !important; border-color: var(--app-border) !important; } html[data-theme='dark'] .mobile-nav__tab { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .mobile-nav__tab:hover, html[data-theme='dark'] .mobile-nav__tab:focus-visible { background-color: var(--app-elevated) !important; color: var(--app-text) !important; } html[data-theme='dark'] .mobile-nav__tab.mobile-nav__tab--active { background-color: var(--app-elevated) !important; color: var(--app-text) !important; } } html[data-theme='dark'] .form-label, html[data-theme='dark'] .form-help { color: var(--app-text); } /* Smooth switch (kept lightweight to avoid repaint cost on low-end devices) */ body, .header, .settings-section, .auth-card { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* ─── Theme switcher (shared by the login page and profile settings) ─── */ .theme-switch { display: inline-flex; align-items: center; gap: 4px; padding: 4px; background: #f3f4f6; border-radius: 12px; } .theme-switch__option { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: none; border-radius: 9px; background: transparent; color: #49454f; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } .theme-switch__option:hover { color: #1c1b1f; } .theme-switch__option.is-active { background: #ffffff; color: #1c1b1f; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } .theme-switch__option .material-icons { font-size: 18px; } /* The login card is narrow on mobile: let all three options share its width. */ .theme-switch--auth { display: flex; width: 100%; box-sizing: border-box; } .theme-switch--auth .theme-switch__option { flex: 1 1 0; min-width: 0; justify-content: center; padding-right: 4px; padding-left: 4px; gap: 4px; } @media (max-width: 480px) { .theme-switch--auth .theme-switch__option { font-size: 13px; gap: 3px; } .theme-switch--auth .theme-switch__option .material-icons { flex: 0 0 auto; font-size: 16px; } } /* Dark theme switcher colors */ html[data-theme='dark'] .theme-switch { background: var(--app-input); } html[data-theme='dark'] .theme-switch__option { color: var(--app-text-secondary); } html[data-theme='dark'] .theme-switch__option:hover { color: var(--app-text); } html[data-theme='dark'] .theme-switch__option.is-active { background: var(--app-elevated); color: var(--app-text); } html[data-theme='dark'] .theme-switch { color-scheme: dark; } /* Compact theme switcher in the desktop profile dropdown. */ .user-menu__theme-switch { padding: 10px 12px 8px; border-bottom: 1px solid #e5e7eb; } .user-menu__theme-label { display: block; margin: 0 4px 6px; color: #6b7280; font-size: 12px; font-weight: 600; } .user-menu__theme-switch .theme-switch--compact { display: flex; width: 100%; padding: 3px; gap: 2px; border-radius: 10px; } .user-menu__theme-switch .theme-switch__option { flex: 1 1 0; justify-content: center; gap: 3px; min-width: 0; padding: 6px 3px; border-radius: 7px; font-size: 11px; line-height: 1.1; } .user-menu__theme-switch .theme-switch__option .material-icons { font-size: 15px; } html[data-theme='dark'] .user-menu__theme-switch { border-bottom-color: var(--app-border); } html[data-theme='dark'] .user-menu__theme-label { color: var(--app-text-secondary); } /* Registration and login forms. Keep the auth surfaces consistent with the * selected website theme, including the user type cards. */ html[data-theme='dark'] .auth-page { background: var(--app-bg) !important; color: var(--app-text) !important; } html[data-theme='dark'] .auth-page .auth-card { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28) !important; } html[data-theme='dark'] .auth-page .auth-title, html[data-theme='dark'] .auth-page .form-label, html[data-theme='dark'] .auth-page .checkbox-label, html[data-theme='dark'] .auth-page .auth-card__footer { color: var(--app-text) !important; } html[data-theme='dark'] .auth-page .form-help, html[data-theme='dark'] .auth-page .auth-subtitle, html[data-theme='dark'] .auth-page .auth-card__footer p { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .auth-page .form-input, html[data-theme='dark'] .auth-page input:not([type='checkbox']):not([type='radio']), html[data-theme='dark'] .auth-page textarea, html[data-theme='dark'] .auth-page select { background: var(--app-input) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; -webkit-text-fill-color: var(--app-text) !important; } html[data-theme='dark'] .auth-page .form-input::placeholder, html[data-theme='dark'] .auth-page input::placeholder, html[data-theme='dark'] .auth-page textarea::placeholder { color: var(--app-text-secondary) !important; opacity: 1; } html[data-theme='dark'] .auth-page .form-input:focus, html[data-theme='dark'] .auth-page input:not([type='checkbox']):not([type='radio']):focus, html[data-theme='dark'] .auth-page textarea:focus, html[data-theme='dark'] .auth-page select:focus { border-color: var(--app-primary-focus) !important; box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.16) !important; } html[data-theme='dark'] .auth-page .input-icon, html[data-theme='dark'] .auth-page .password-toggle { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .auth-page .password-toggle:hover { color: var(--app-text) !important; } html[data-theme='dark'] .auth-page .user-type-option { background: var(--app-surface) !important; border-color: var(--app-border-strong) !important; color: var(--app-text) !important; } html[data-theme='dark'] .auth-page .user-type-option:hover { background: var(--app-elevated) !important; border-color: var(--app-primary-focus) !important; } html[data-theme='dark'] .auth-page .user-type-option:has(input[type='radio']:checked) { background: var(--app-primary-container) !important; border-color: var(--app-primary-focus) !important; } html[data-theme='dark'] .auth-page .user-type-option__title { color: var(--app-text) !important; } html[data-theme='dark'] .auth-page .user-type-option__description, html[data-theme='dark'] .auth-page .user-type-option__content .material-icons { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .auth-page .user-type-option:has(input[type='radio']:checked) .user-type-option__title, html[data-theme='dark'] .auth-page .user-type-option:has(input[type='radio']:checked) .user-type-option__content .material-icons { color: var(--app-primary-focus) !important; } html[data-theme='dark'] .auth-page .benefit-item { background: var(--app-input) !important; border-color: var(--app-border) !important; } html[data-theme='dark'] .auth-page .benefit-item:hover { background: var(--app-elevated) !important; border-color: var(--app-primary-focus) !important; } html[data-theme='dark'] .auth-page .benefit-text { color: var(--app-text) !important; } html[data-theme='dark'] .auth-page .checkbox-custom { background: var(--app-input) !important; border-color: var(--app-border-strong) !important; } html[data-theme='dark'] .auth-page .auth-link { color: var(--app-primary-focus) !important; } html[data-theme='dark'] .auth-page .auth-link:hover { color: var(--app-text) !important; } html[data-theme='dark'] .auth-page .auth-card__footer { border-top-color: var(--app-border) !important; } html[data-theme='dark'] .auth-page .btn--google, html[data-theme='dark'] .modal-content .btn--google { background: transparent !important; border: 0 !important; border-radius: 0; padding: 0; box-sizing: border-box; min-height: 44px; } html[data-theme='dark'] .auth-page .auth-card__footer, html[data-theme='dark'] .modal-content .auth-card__footer { border-top-color: var(--app-border) !important; } /* Notifications dropdown */ html[data-theme='dark'] .notifications-dropdown, html[data-theme='dark'] .notifications-dropdown__header, html[data-theme='dark'] .notifications-dropdown__content { background: var(--app-surface); color: var(--app-text); border-color: var(--app-border); } /* Mega menu */ html[data-theme='dark'] .categories-mega-menu { background: var(--app-surface); border-color: var(--app-border); color: var(--app-text); } /* Desktop mega-menu: all four surfaces belong to the same dark palette. */ html[data-theme='dark'] .categories-dropdown__menu, html[data-theme='dark'] .categories-mega-menu__left, html[data-theme='dark'] .categories-mega-menu__right, html[data-theme='dark'] .categories-mega-menu .subcategories-grid, html[data-theme='dark'] .categories-mega-menu .subcategory-group, html[data-theme='dark'] .categories-mega-menu .sections-list { background: var(--app-surface) !important; color: var(--app-text) !important; border-color: var(--app-border) !important; } html[data-theme='dark'] .categories-mega-menu .category-item, html[data-theme='dark'] .categories-mega-menu .category-link, html[data-theme='dark'] .categories-mega-menu .subcategory-group__title-link, html[data-theme='dark'] .categories-mega-menu .section-link, html[data-theme='dark'] .categories-mega-menu .subcategory-link { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .categories-mega-menu .category-item.is-active, html[data-theme='dark'] .categories-mega-menu .category-item:hover, html[data-theme='dark'] .categories-mega-menu .category-link:hover, html[data-theme='dark'] .categories-mega-menu .section-link:hover, html[data-theme='dark'] .categories-mega-menu .subcategory-link:hover { background: var(--app-elevated) !important; color: var(--app-text) !important; } html[data-theme='dark'] .categories-mega-menu .subcategory-group__title, html[data-theme='dark'] .categories-mega-menu .subcategory-group__title-link { color: var(--app-text) !important; } /* Late-loaded page components: keep their complete surfaces in the Flutter * dark palette, including unread notification states and home sidebar cards. */ html[data-theme='dark'] .notifications-dropdown, html[data-theme='dark'] .notifications-dropdown__header, html[data-theme='dark'] .notifications-dropdown__content, html[data-theme='dark'] .notifications-dropdown__footer, html[data-theme='dark'] .notification-item, html[data-theme='dark'] .notifications-empty { background: var(--app-surface) !important; color: var(--app-text) !important; border-color: var(--app-border) !important; } html[data-theme='dark'] .notification-item--unread, html[data-theme='dark'] .notification-item--unread:hover { background: var(--app-elevated) !important; border-left-color: var(--app-primary-focus) !important; } html[data-theme='dark'] .notification-item:hover, html[data-theme='dark'] .notifications-dropdown__close:hover { background: var(--app-elevated) !important; } html[data-theme='dark'] .notification-item__title, html[data-theme='dark'] .notifications-empty h4, html[data-theme='dark'] .notifications-dropdown__header h3, html[data-theme='dark'] .notifications-dropdown__header .notifications-dropdown__headline { color: var(--app-text) !important; } html[data-theme='dark'] .notification-item__description, html[data-theme='dark'] .notification-item__date, html[data-theme='dark'] .notifications-loading, html[data-theme='dark'] .notifications-empty, html[data-theme='dark'] .notifications-dropdown__close { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .notification-item__type--news { background: #1e3a8a !important; color: #bfdbfe !important; } html[data-theme='dark'] .notification-item__type--update { background: #4c1d95 !important; color: #ddd6fe !important; } html[data-theme='dark'] .notification-item__type--maintenance { background: #7f1d1d !important; color: #fca5a5 !important; } html[data-theme='dark'] .notification-item__type--feature { background: #14532d !important; color: #bbf7d0 !important; } html[data-theme='dark'] .categories-hero .homepage-statistics, html[data-theme='dark'] .categories-hero__banner, html[data-theme='dark'] .site-feedback-card, html[data-theme='dark'] .auth-card, html[data-theme='dark'] .auth-benefits-card { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .homepage-statistics__line, html[data-theme='dark'] .homepage-statistics__line strong, html[data-theme='dark'] .categories-hero__banner-title, html[data-theme='dark'] .site-feedback-card__title, html[data-theme='dark'] .site-feedback-card__stats, html[data-theme='dark'] .site-feedback-card__avg, html[data-theme='dark'] .auth-card h1, html[data-theme='dark'] .auth-card h2, html[data-theme='dark'] .auth-card h3 { color: var(--app-text) !important; } html[data-theme='dark'] .homepage-statistics__line-icon, html[data-theme='dark'] .categories-hero__banner-text, html[data-theme='dark'] .site-feedback-card__text, html[data-theme='dark'] .auth-card p, html[data-theme='dark'] .auth-card label { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .categories-hero__banner-eyebrow { color: var(--app-primary-focus) !important; } /* Homepage hero banner slider dots: keep them visible on the dark surface. */ html[data-theme='dark'] .categories-hero__banner-dot::after { background: rgba(199, 210, 254, 0.35) !important; } html[data-theme='dark'] .categories-hero__banner-dot:hover::after { background: rgba(199, 210, 254, 0.6) !important; } html[data-theme='dark'] .categories-hero__banner-dot.is-active::after { background: #a5b4fc !important; } html[data-theme='dark'] .categories-hero__banner-dot__ring-track { stroke: rgba(199, 210, 254, 0.25) !important; } html[data-theme='dark'] .categories-hero__banner-dot__ring-progress { stroke: #a5b4fc !important; } /* Homepage auctions «Все» link next to the section title. */ html[data-theme='dark'] .home-auctions__all-link { color: var(--app-primary-focus) !important; } html[data-theme='dark'] .home-auctions__all-link:hover, html[data-theme='dark'] .home-auctions__all-link:focus-visible { color: #ffffff !important; } html[data-theme='dark'] .categories-hero .latest-publication { background: var(--app-surface) !important; color: var(--app-text) !important; } /* Messages: replace the light-theme separators and composer surfaces. */ html[data-theme='dark'] .messages-layout, html[data-theme='dark'] .conversations-sidebar, html[data-theme='dark'] .messages-content, html[data-theme='dark'] .conversations-header, html[data-theme='dark'] .chat-header, html[data-theme='dark'] .chat-input-container, html[data-theme='dark'] .chat-input-form { border-color: var(--app-border) !important; background-color: var(--app-surface) !important; } html[data-theme='dark'] .messages-layout { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important; } html[data-theme='dark'] .conversations-header, html[data-theme='dark'] .chat-header { border-bottom-color: var(--app-border) !important; } html[data-theme='dark'] .conversations-sidebar { border-right-color: var(--app-border) !important; } html[data-theme='dark'] .conversation-item { border-bottom-color: var(--app-border) !important; } html[data-theme='dark'] .conversation-item:hover, html[data-theme='dark'] .conversation-item.active { background-color: var(--app-elevated) !important; } html[data-theme='dark'] .conversations-list { color-scheme: dark; scrollbar-width: thin !important; scrollbar-color: var(--app-border-strong) var(--app-input) !important; } html[data-theme='dark'] .conversations-list::-webkit-scrollbar-track, html[data-theme='dark'] .chat-messages::-webkit-scrollbar-track { background: var(--app-input) !important; } html[data-theme='dark'] .conversations-list::-webkit-scrollbar-thumb, html[data-theme='dark'] .chat-messages::-webkit-scrollbar-thumb { background-color: var(--app-border-strong) !important; border: 0 !important; } html[data-theme='dark'] .conversations-list::-webkit-scrollbar-thumb:hover, html[data-theme='dark'] .chat-messages::-webkit-scrollbar-thumb:hover { background-color: var(--app-primary-focus) !important; } html[data-theme='dark'] .chat-messages { color-scheme: dark; scrollbar-width: thin !important; scrollbar-color: var(--app-border-strong) var(--app-input) !important; } html[data-theme='dark'] .conversations-list::-webkit-scrollbar, html[data-theme='dark'] .chat-messages::-webkit-scrollbar { width: 8px !important; background: var(--app-input) !important; } html[data-theme='dark'] .chat-actions-dropdown { border-color: var(--app-border) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important; } html[data-theme='dark'] .chat-action-divider { border-top-color: var(--app-border) !important; } html[data-theme='dark'] .chat-ad-badge { border-color: var(--app-border) !important; background-color: var(--app-elevated) !important; } html[data-theme='dark'] .message-bubble { border-color: var(--app-border-strong) !important; } html[data-theme='dark'] .message-image, html[data-theme='dark'] .chat-image-preview { border-color: var(--app-border-strong) !important; } html[data-theme='dark'] .message-image--error { border-color: var(--app-error) !important; background-color: rgba(239, 68, 68, 0.12) !important; } html[data-theme='dark'] .chat-input-form { border-top-color: var(--app-border) !important; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.35), 0 -2px 6px rgba(0, 0, 0, 0.2) !important; } html[data-theme='dark'] .chat-input-container { border: 0 !important; background: transparent !important; } html[data-theme='dark'] .chat-input-wrapper { border-color: var(--app-border-strong) !important; background-color: var(--app-input) !important; } html[data-theme='dark'] .chat-input-wrapper:focus-within { border-color: var(--app-primary-focus) !important; background-color: var(--app-surface) !important; } html[data-theme='dark'] .chat-input::placeholder { color: var(--app-text-secondary) !important; } @media (max-width: 1023px) { html[data-theme='dark'] .chat-input-form { border-top: 0 !important; background: transparent !important; box-shadow: none !important; } } html[data-theme='dark'] .categories-hero .latest-publication:hover, html[data-theme='dark'] .categories-hero .latest-publication:focus-visible { background: var(--app-elevated) !important; } html[data-theme='dark'] .categories-hero .latest-publication__text, html[data-theme='dark'] .categories-hero .latest-publication__label { color: var(--app-text) !important; } html[data-theme='dark'] .benefit-item { background: var(--app-input) !important; border-color: var(--app-border) !important; } /* Page background versus component surface: scrolling areas must not create * a lighter rectangle behind category chips or listing cards. */ html[data-theme='dark'] .categories-hero, html[data-theme='dark'] .categories-hero .categories-cloud, html[data-theme='dark'] .categories-hero .categories-cloud--static, html[data-theme='dark'] .categories-hero .categories-cloud__items, html[data-theme='dark'] .categories-hero .categories-slider, html[data-theme='dark'] .listings-grid, html[data-theme='dark'] .items-scroll, html[data-theme='dark'] .items-scroll .items-scroll__track { background: var(--app-bg) !important; } html[data-theme='dark'] .categories-hero .category-tag, html[data-theme='dark'] .categories-hero .category-tag:hover, html[data-theme='dark'] .home-page .subcategory-card, html[data-theme='dark'] .category-page .subcategory-card { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .categories-hero .category-tag:hover, html[data-theme='dark'] .home-page .subcategory-card:hover, html[data-theme='dark'] .category-page .subcategory-card:hover { background: var(--app-elevated) !important; border-color: var(--app-border-strong) !important; } html[data-theme='dark'] .categories-hero .category-tag__name, html[data-theme='dark'] .categories-hero .homepage-statistics__line, html[data-theme='dark'] .categories-hero .homepage-statistics__line strong { color: var(--app-text) !important; } html[data-theme='dark'] .categories-hero .homepage-statistics { background: var(--app-surface) !important; border: 1px solid var(--app-border) !important; color: var(--app-text) !important; box-shadow: none !important; } html[data-theme='dark'] .item-card, html[data-theme='dark'] .item-card__content, html[data-theme='dark'] .item-card__link { background: var(--app-bg) !important; border-color: var(--app-border) !important; } html[data-theme='dark'] .item-card__title, html[data-theme='dark'] .item-card__price, html[data-theme='dark'] .item-card__title:hover, html[data-theme='dark'] .item-card:hover .item-card__title, html[data-theme='dark'] .item-card:hover .item-card__price { color: var(--app-text) !important; } html[data-theme='dark'] .item-card__meta, html[data-theme='dark'] .item-card__location, html[data-theme='dark'] .item-card__time, html[data-theme='dark'] .item-card__meta .material-icons { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .item-card__image, html[data-theme='dark'] .item-card__image .item-card__preview-image { background-color: var(--app-bg) !important; } html[data-theme='dark'] .no-image, html[data-theme='dark'] .item-card__image--single > img, html[data-theme='dark'] .item-card__image--single > picture > img { background: var(--app-elevated) !important; } html[data-theme='dark'] .item-card__image > .no-image { border-radius: 0 0 18px 18px; } html[data-theme='dark'] .recently-viewed .slider-nav { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; box-shadow: none !important; } html[data-theme='dark'] .recently-viewed .slider-nav:hover:not(:disabled) { background: var(--app-elevated) !important; border-color: var(--app-primary-focus) !important; color: var(--app-primary-focus) !important; } html[data-theme='dark'] .recently-viewed .slider-nav:focus-visible { outline: 2px solid var(--app-primary-focus) !important; outline-offset: 2px; } html[data-theme='dark'] .recently-viewed .slider-nav:disabled, html[data-theme='dark'] .recently-viewed .slider-nav:disabled:hover { background: var(--app-input) !important; border-color: var(--app-border) !important; color: var(--app-text-secondary) !important; opacity: 0.45; box-shadow: none !important; } /* Remove legacy light-only dark-mode rules from mobile.css by overriding their * important declarations with the explicit application theme. */ html[data-theme='dark'] .user-reviews-popup .modal-content, html[data-theme='dark'] .user-reviews-popup .user-review-item { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .user-reviews-popup .user-review-item__head strong, html[data-theme='dark'] .user-reviews-popup .user-review-item__rating, html[data-theme='dark'] .user-reviews-popup .user-reviews-summary { color: var(--app-text) !important; } html[data-theme='dark'] .user-reviews-popup .user-review-item__head span, html[data-theme='dark'] .user-reviews-popup .user-review-item__comment { color: var(--app-text-secondary) !important; } /* Feedback and buyer/seller review dialogs: override legacy light !important * declarations from mobile.css without changing other modal types. */ html[data-theme='dark'] .site-feedback-popup .modal-content, html[data-theme='dark'] .review-compose-popup .modal-content, html[data-theme='dark'] .deactivate-review-popup .modal-content { background: var(--app-surface) !important; color: var(--app-text) !important; } html[data-theme='dark'] .site-feedback-popup .modal-header, html[data-theme='dark'] .review-compose-popup .modal-header, html[data-theme='dark'] .deactivate-review-popup .modal-header, html[data-theme='dark'] .review-compose-popup .modal-footer, html[data-theme='dark'] .deactivate-review-popup .modal-footer { border-color: var(--app-border) !important; } html[data-theme='dark'] .site-feedback-popup .modal-title-line, html[data-theme='dark'] .review-compose-popup .modal-title-line, html[data-theme='dark'] .deactivate-review-popup .modal-header h3, html[data-theme='dark'] .site-feedback-popup .modal-body p, html[data-theme='dark'] .review-compose-popup .modal-body p, html[data-theme='dark'] .deactivate-review-popup .modal-body p, html[data-theme='dark'] .review-compose-popup .form-label, html[data-theme='dark'] .deactivate-review-popup .form-label, html[data-theme='dark'] .site-feedback-popup .site-feedback-modal__label { color: var(--app-text) !important; } html[data-theme='dark'] .site-feedback-popup .site-feedback-modal__subtitle, html[data-theme='dark'] .site-feedback-popup .site-feedback-rating-labels, html[data-theme='dark'] .site-feedback-popup .site-feedback-modal__counter, html[data-theme='dark'] .review-compose-popup .deactivate-rating-labels, html[data-theme='dark'] .deactivate-review-popup .deactivate-rating-labels { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .site-feedback-popup .site-feedback-rating__btn, html[data-theme='dark'] .review-compose-popup .deactivate-rating__btn, html[data-theme='dark'] .deactivate-review-popup .deactivate-rating__btn { background: var(--app-input) !important; border-color: var(--app-border-strong) !important; color: var(--app-text) !important; } html[data-theme='dark'] .site-feedback-popup .site-feedback-rating__btn:hover, html[data-theme='dark'] .review-compose-popup .deactivate-rating__btn:hover, html[data-theme='dark'] .deactivate-review-popup .deactivate-rating__btn:hover { background: var(--app-elevated) !important; border-color: var(--app-primary-focus) !important; } html[data-theme='dark'] .site-feedback-popup .site-feedback-rating__btn.active, html[data-theme='dark'] .review-compose-popup .deactivate-rating__btn.active, html[data-theme='dark'] .deactivate-review-popup .deactivate-rating__btn.active { background: var(--app-primary-container) !important; border-color: var(--app-primary-focus) !important; color: var(--app-on-primary-container) !important; } html[data-theme='dark'] .site-feedback-popup .site-feedback-modal__textarea, html[data-theme='dark'] .review-compose-popup .form-textarea, html[data-theme='dark'] .deactivate-review-popup .form-textarea, html[data-theme='dark'] .deactivate-review-popup .form-select { background: var(--app-input) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; -webkit-text-fill-color: var(--app-text) !important; } html[data-theme='dark'] .site-feedback-popup .site-feedback-modal__textarea::placeholder, html[data-theme='dark'] .review-compose-popup .form-textarea::placeholder, html[data-theme='dark'] .deactivate-review-popup .form-textarea::placeholder { color: var(--app-text-secondary) !important; opacity: 1; } html[data-theme='dark'] .site-feedback-popup .modal-close, html[data-theme='dark'] .review-compose-popup .modal-close, html[data-theme='dark'] .deactivate-review-popup .modal-close { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .site-feedback-popup .modal-close:hover, html[data-theme='dark'] .review-compose-popup .modal-close:hover, html[data-theme='dark'] .deactivate-review-popup .modal-close:hover { background: var(--app-elevated) !important; color: var(--app-text) !important; } /* Create/edit ad forms: keep every form surface, outline and choice control * aligned with the dark application palette. */ html[data-theme='dark'] .create-item-page { background: var(--app-bg) !important; color: var(--app-text) !important; } html[data-theme='dark'] .create-item-page .form-section, html[data-theme='dark'] .create-item-page .ad-form-progress, html[data-theme='dark'] .create-item-page .company-info-section, html[data-theme='dark'] .create-item-page .company-document-preview { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; box-shadow: none !important; } html[data-theme='dark'] .create-item-page .form-section__title { color: var(--app-text) !important; border-bottom-color: var(--app-border) !important; } html[data-theme='dark'] .create-item-page .form-section__title .material-icons, html[data-theme='dark'] .create-item-page .file-count, html[data-theme='dark'] .create-item-page .category-limit-info__upgrade { color: var(--app-primary-focus) !important; } html[data-theme='dark'] .create-item-page .form-label, html[data-theme='dark'] .create-item-page .form-group--category .form-label, html[data-theme='dark'] .create-item-page .company-info-section__title, html[data-theme='dark'] .create-item-page .existing-images h4, html[data-theme='dark'] .create-item-page .ad-form-progress__title { color: var(--app-text) !important; } html[data-theme='dark'] .create-item-page .form-help, html[data-theme='dark'] .create-item-page .form-locked-indicator, html[data-theme='dark'] .create-item-page .ad-form-progress__item, html[data-theme='dark'] .create-item-page .ad-form-progress__item[data-state='empty'] .ad-form-progress__text, html[data-theme='dark'] .create-item-page .ad-form-progress__item[data-state='na'] .ad-form-progress__text { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .create-item-page .form-input, html[data-theme='dark'] .create-item-page .form-select, html[data-theme='dark'] .create-item-page .form-textarea, html[data-theme='dark'] .create-item-page input:not([type='checkbox']):not([type='radio']):not([type='file']), html[data-theme='dark'] .create-item-page textarea, html[data-theme='dark'] .create-item-page select { background-color: var(--app-input) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; -webkit-text-fill-color: var(--app-text) !important; } html[data-theme='dark'] .create-item-page .form-input::placeholder, html[data-theme='dark'] .create-item-page .form-textarea::placeholder, html[data-theme='dark'] .create-item-page input::placeholder, html[data-theme='dark'] .create-item-page textarea::placeholder { color: var(--app-text-secondary) !important; opacity: 1; } html[data-theme='dark'] .create-item-page .form-input:focus, html[data-theme='dark'] .create-item-page .form-select:focus, html[data-theme='dark'] .create-item-page .form-textarea:focus, html[data-theme='dark'] .create-item-page input:not([type='checkbox']):not([type='radio']):not([type='file']):focus, html[data-theme='dark'] .create-item-page textarea:focus, html[data-theme='dark'] .create-item-page select:focus { border-color: var(--app-primary-focus) !important; box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.16) !important; } html[data-theme='dark'] .create-item-page .form-input--locked, html[data-theme='dark'] .create-item-page .form-select--disabled, html[data-theme='dark'] .create-item-page .form-group--category .form-select:disabled, html[data-theme='dark'] .create-item-page select:disabled { background-color: var(--app-elevated) !important; border-color: var(--app-border) !important; color: var(--app-text-secondary) !important; -webkit-text-fill-color: var(--app-text-secondary) !important; } html[data-theme='dark'] .create-item-page .user-type-option, html[data-theme='dark'] .create-item-page .contact-method-option { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .create-item-page .user-type-option:hover, html[data-theme='dark'] .create-item-page .contact-method-option:hover { background: var(--app-elevated) !important; border-color: var(--app-primary-focus) !important; } html[data-theme='dark'] .create-item-page .user-type-option:has(input[type='radio']:checked), html[data-theme='dark'] .create-item-page .user-type-option--active, html[data-theme='dark'] .create-item-page .contact-method-option:has(input[type='radio']:checked) { background: var(--app-primary-container) !important; border-color: var(--app-primary-focus) !important; } html[data-theme='dark'] .create-item-page .user-type-option__title, html[data-theme='dark'] .create-item-page .contact-method-option__title { color: var(--app-text) !important; } html[data-theme='dark'] .create-item-page .user-type-option__description, html[data-theme='dark'] .create-item-page .contact-method-option__description, html[data-theme='dark'] .create-item-page .user-type-option__content .material-icons, html[data-theme='dark'] .create-item-page .contact-method-option__content .material-icons { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .create-item-page .user-type-option:has(input[type='radio']:checked) .user-type-option__title, html[data-theme='dark'] .create-item-page .user-type-option--active .user-type-option__title, html[data-theme='dark'] .create-item-page .user-type-option:has(input[type='radio']:checked) .material-icons, html[data-theme='dark'] .create-item-page .contact-method-option:has(input[type='radio']:checked) .contact-method-option__title, html[data-theme='dark'] .create-item-page .contact-method-option:has(input[type='radio']:checked) .material-icons { color: var(--app-primary-focus) !important; } html[data-theme='dark'] .create-item-page .user-type-option--locked:hover { background: var(--app-surface) !important; border-color: var(--app-border) !important; } html[data-theme='dark'] .create-item-page .listing-type-option__badge { background: #14532d !important; color: #bbf7d0 !important; } html[data-theme='dark'] .create-item-page .ad-form-progress__track { background: var(--app-border) !important; } html[data-theme='dark'] .create-item-page .ad-form-progress__item:hover { background: var(--app-elevated) !important; color: var(--app-text) !important; } html[data-theme='dark'] .create-item-page .ad-form-progress__icon, html[data-theme='dark'] .create-item-page .ad-form-progress__item[data-state='empty'] .ad-form-progress__icon { background: var(--app-surface) !important; border-color: var(--app-border) !important; } html[data-theme='dark'] .create-item-page .ad-form-progress__item[data-state='na'] .ad-form-progress__icon { background: var(--app-elevated) !important; border-color: var(--app-border) !important; } html[data-theme='dark'] .create-item-page .ad-form-progress__item[data-state='partial'] .ad-form-progress__icon { background: rgba(239, 68, 68, 0.12) !important; border-color: #ef4444 !important; } html[data-theme='dark'] .create-item-page .ad-form-progress__item[data-state='partial'] .ad-form-progress__icon::after { background: #ef4444 !important; } html[data-theme='dark'] .create-item-page .image-item, html[data-theme='dark'] .create-item-page .preview-item, html[data-theme='dark'] .create-item-page #yandex-map { border-color: var(--app-border) !important; } html[data-theme='dark'] .create-item-page .file-count { background: var(--app-elevated) !important; border-left-color: var(--app-primary-focus) !important; } html[data-theme='dark'] .create-item-page #map-loading { background: var(--app-elevated) !important; color: var(--app-text-secondary) !important; } html[data-theme='dark'] .create-item-page .contact-warning { background: var(--app-surface) !important; border-color: #f97316 !important; color: var(--app-text) !important; } html[data-theme='dark'] .create-item-page .contact-warning__icon .material-icons { color: #fb923c !important; } html[data-theme='dark'] .create-item-page .contact-warning__title { color: #fdba74 !important; } html[data-theme='dark'] .create-item-page .contact-warning__text { color: var(--app-text-secondary) !important; } /* News type badges: use dark surfaces with readable accent text. */ html[data-theme='dark'] .news-card__badge--blue { background: #1e3a8a !important; color: #bfdbfe !important; } html[data-theme='dark'] .news-card__badge--purple { background: #4c1d95 !important; color: #ddd6fe !important; } html[data-theme='dark'] .news-card__badge--orange { background: #7f1d1d !important; color: #fca5a5 !important; } html[data-theme='dark'] .news-card__badge--green { background: #14532d !important; color: #bbf7d0 !important; } html[data-theme='dark'] .contact-btn--edit { background: #ef4444 !important; border-color: #ef4444 !important; } html[data-theme='dark'] .contact-btn--edit:hover, html[data-theme='dark'] .contact-btn--edit:focus-visible { background: #dc2626 !important; border-color: #dc2626 !important; } html[data-theme='dark'] .create-item-page .form-file { background: var(--app-input) !important; border-color: var(--app-border-strong) !important; color: var(--app-text) !important; } html[data-theme='dark'] .create-item-page .form-file:hover, html[data-theme='dark'] .create-item-page .form-file:focus-within { background: var(--app-elevated) !important; border-color: var(--app-primary-focus) !important; } html[data-theme='dark'] .create-item-page .form-file__text { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .create-item-page .form-file input[type='file']::file-selector-button { margin-right: 8px; padding: 6px 10px; border: 1px solid var(--app-border-strong); border-radius: 6px; background: var(--app-elevated); color: var(--app-text); cursor: pointer; } html[data-theme='dark'] .create-item-page .form-file input[type='file']::file-selector-button:hover { border-color: var(--app-primary-focus); background: var(--app-surface); } html[data-theme='dark'] .create-item-page .checkbox-label--free { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .create-item-page .checkbox-label--free:hover, html[data-theme='dark'] .create-item-page .checkbox-label--free:active { background: var(--app-elevated) !important; border-color: var(--app-primary-focus) !important; } html[data-theme='dark'] .create-item-page .checkbox-label--free .checkbox-text { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .create-item-page .checkbox-label--free .checkbox-text .material-icons { color: #34d399 !important; } html[data-theme='dark'] .create-item-page .checkbox-label--free .checkbox-custom { background: var(--app-input) !important; border-color: var(--app-border-strong) !important; } html[data-theme='dark'] .create-item-page .checkbox-label--free .checkbox-input:checked ~ .checkbox-text { color: #34d399 !important; } html[data-theme='dark'] .create-item-page .checkbox-label--free .checkbox-input:checked + .checkbox-custom { background: #059669 !important; border-color: #34d399 !important; } /* Yandex Maps: darken only the tile layer so markers and controls remain * readable and interactive. Applies to create/edit and ad detail maps. */ html[data-theme='dark'] #yandex-map, html[data-theme='dark'] #property-map { background: var(--app-bg) !important; border-color: var(--app-border) !important; } html[data-theme='dark'] #yandex-map [class*='-ground-pane'], html[data-theme='dark'] #property-map [class*='-ground-pane'] { filter: grayscale(1) invert(0.9) brightness(0.82) contrast(1.08); } html[data-theme='dark'] #yandex-map [class*='-zoom-control__button'], html[data-theme='dark'] #property-map [class*='-zoom-control__button'] { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] #yandex-map [class*='-balloon__layout'], html[data-theme='dark'] #property-map [class*='-balloon__layout'], html[data-theme='dark'] #yandex-map [class*='-balloon__content'], html[data-theme='dark'] #property-map [class*='-balloon__content'] { background: var(--app-surface) !important; color: var(--app-text) !important; } html[data-theme='dark'] #yandex-map [class*='-balloon__layout'], html[data-theme='dark'] #property-map [class*='-balloon__layout'] { border: 1px solid var(--app-border-strong) !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important; } html[data-theme='dark'] #yandex-map [class*='-balloon__content'], html[data-theme='dark'] #property-map [class*='-balloon__content'] { padding: 12px 14px !important; } html[data-theme='dark'] #yandex-map [class*='-balloon__content'] *, html[data-theme='dark'] #property-map [class*='-balloon__content'] * { color: var(--app-text) !important; } html[data-theme='dark'] #yandex-map [class*='-balloon__close'], html[data-theme='dark'] #property-map [class*='-balloon__close'] { opacity: 1 !important; background-color: transparent !important; color: var(--app-text-secondary) !important; } html[data-theme='dark'] #yandex-map [class*='-balloon__close']:hover, html[data-theme='dark'] #property-map [class*='-balloon__close']:hover { background-color: var(--app-elevated) !important; color: var(--app-text) !important; } /* Yandex renders the close icon as a light background image. Replace it with * a theme-safe CSS cross so it cannot keep the red/white native asset. */ html[data-theme='dark'] #yandex-map [class*='-balloon__close'], html[data-theme='dark'] #property-map [class*='-balloon__close'] { background-image: none !important; font-size: 0 !important; position: relative !important; } html[data-theme='dark'] #yandex-map [class*='-balloon__close']::before, html[data-theme='dark'] #yandex-map [class*='-balloon__close']::after, html[data-theme='dark'] #property-map [class*='-balloon__close']::before, html[data-theme='dark'] #property-map [class*='-balloon__close']::after { content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 16px !important; height: 2px !important; margin: -1px 0 0 -8px !important; border-radius: 2px !important; background: var(--app-text-secondary) !important; } html[data-theme='dark'] #yandex-map [class*='-balloon__close']::before, html[data-theme='dark'] #property-map [class*='-balloon__close']::before { transform: rotate(45deg) !important; } html[data-theme='dark'] #yandex-map [class*='-balloon__close']::after, html[data-theme='dark'] #property-map [class*='-balloon__close']::after { transform: rotate(-45deg) !important; } html[data-theme='dark'] #yandex-map [class*='-balloon__tail'], html[data-theme='dark'] #property-map [class*='-balloon__tail'] { background: var(--app-surface) !important; background-image: none !important; border: 1px solid var(--app-border-strong) !important; box-shadow: none !important; } html[data-theme='dark'] #yandex-map [class*='-balloon__tail']::before, html[data-theme='dark'] #yandex-map [class*='-balloon__tail']::after, html[data-theme='dark'] #property-map [class*='-balloon__tail']::before, html[data-theme='dark'] #property-map [class*='-balloon__tail']::after { background: var(--app-surface) !important; border-color: var(--app-border-strong) !important; box-shadow: none !important; } html[data-theme='dark'] #yandex-map .map-error-container, html[data-theme='dark'] #property-map .map-error-container { background: var(--app-elevated) !important; color: var(--app-text-secondary) !important; } html[data-theme='dark'] .item-detail-page .map-info { background: var(--app-input) !important; border: 1px solid var(--app-border-strong) !important; border-top-color: var(--app-border-strong) !important; box-shadow: none !important; } html[data-theme='dark'] .item-detail-page .map-coordinates { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .item-detail-page .map-coordinates a { color: var(--app-primary-focus) !important; } html[data-theme='dark'] .item-detail-page .map-coordinates a:hover { color: var(--app-text) !important; } html[data-theme='dark'] .item-detail-page .map-section { background: var(--app-surface) !important; border-color: var(--app-border) !important; } html[data-theme='dark'] .item-detail-page .map-container { border: 1px solid var(--app-border) !important; box-shadow: none !important; } /* Listing and auction detail pages. Keep all detail surfaces inside the dark * palette; every rule is scoped to the selected dark theme. */ html[data-theme='dark'] .item-detail-page { background: var(--app-bg) !important; color: var(--app-text) !important; } html[data-theme='dark'] .item-detail-page .breadcrumbs .breadcrumb-link, html[data-theme='dark'] .item-detail-page .breadcrumbs .breadcrumb-current { background: var(--app-elevated) !important; color: var(--app-text-secondary) !important; } html[data-theme='dark'] .item-detail-page .breadcrumbs .breadcrumb-link:hover { color: var(--app-primary-focus) !important; } html[data-theme='dark'] .item-detail-page .item-detail-main, html[data-theme='dark'] .item-detail-page .item-description, html[data-theme='dark'] .item-detail-page .item-details, html[data-theme='dark'] .item-detail-page .product-info-card, html[data-theme='dark'] .item-detail-page .contact-card, html[data-theme='dark'] .item-detail-page .safety-tips, html[data-theme='dark'] .item-detail-page .related-ads, html[data-theme='dark'] .item-detail-page .auction-product-info-card, html[data-theme='dark'] .item-detail-page .auction-seller-card { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; box-shadow: none !important; } html[data-theme='dark'] .item-detail-page .related-ads .item-card, html[data-theme='dark'] .item-detail-page .related-ads .item-card__content, html[data-theme='dark'] .item-detail-page .related-ads .item-card__link { background: var(--app-surface) !important; background-color: var(--app-surface) !important; } html[data-theme='dark'] .item-detail-page .related-ads .item-card__image, html[data-theme='dark'] .item-detail-page .related-ads .item-card__image .item-card__preview-image, html[data-theme='dark'] .item-detail-page .related-ads .item-card__image--single > img, html[data-theme='dark'] .item-detail-page .related-ads .item-card__image--single > picture > img { background: var(--app-surface) !important; background-color: var(--app-surface) !important; } html[data-theme='dark'] .favorite-btn { background: var(--app-surface) !important; border: 1px solid var(--app-border) !important; color: var(--app-text) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important; } html[data-theme='dark'] .favorite-btn .material-icons { color: var(--app-text) !important; } html[data-theme='dark'] .favorite-btn:hover { background: var(--app-elevated) !important; border-color: var(--app-primary-focus) !important; color: var(--app-primary-focus) !important; } html[data-theme='dark'] .favorite-btn:hover .material-icons { color: var(--app-primary-focus) !important; } html[data-theme='dark'] .favorite-btn.active, html[data-theme='dark'] .favorite-btn.active:hover { background: var(--app-error) !important; border-color: var(--app-error) !important; color: #ffffff !important; } html[data-theme='dark'] .favorite-btn.active .material-icons, html[data-theme='dark'] .favorite-btn.active:hover .material-icons { color: #ffffff !important; } html[data-theme='dark'] .favorite-btn:focus-visible { outline: 2px solid var(--app-primary-focus) !important; outline-offset: 2px; } html[data-theme='dark'] .profile-page--public-seller .favorite-btn { background: var(--app-surface) !important; border: 1px solid var(--app-border) !important; color: var(--app-text) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important; } html[data-theme='dark'] .profile-page--public-seller .favorite-btn .material-icons { color: var(--app-text) !important; } html[data-theme='dark'] .profile-page--public-seller .favorite-btn:hover { background: var(--app-elevated) !important; border-color: var(--app-primary-focus) !important; color: var(--app-primary-focus) !important; } html[data-theme='dark'] .profile-page--public-seller .favorite-btn:hover .material-icons { color: var(--app-primary-focus) !important; } html[data-theme='dark'] .profile-page--public-seller .favorite-btn.active, html[data-theme='dark'] .profile-page--public-seller .favorite-btn.active:hover { background: var(--app-error) !important; border-color: var(--app-error) !important; color: #ffffff !important; } html[data-theme='dark'] .profile-page--public-seller .favorite-btn.active .material-icons, html[data-theme='dark'] .profile-page--public-seller .favorite-btn.active:hover .material-icons { color: #ffffff !important; } /* Listing type tabs: home page and category/section listings. */ html[data-theme='dark'] .home-listing-tabs, html[data-theme='dark'] .listing-type-toggle { background: transparent !important; border-bottom-color: var(--app-border) !important; } html[data-theme='dark'] .home-listing-tab, html[data-theme='dark'] .listing-type-toggle__item { background: transparent !important; color: var(--app-text-secondary) !important; } html[data-theme='dark'] .home-listing-tab:hover, html[data-theme='dark'] .home-listing-tab.is-active, html[data-theme='dark'] .listing-type-toggle__item:hover, html[data-theme='dark'] .listing-type-toggle__item.is-active { color: var(--app-primary) !important; } html[data-theme='dark'] .home-listing-tab.is-active::after, html[data-theme='dark'] .listing-type-toggle__item.is-active::after { background-color: var(--app-primary) !important; } html[data-theme='dark'] .home-listing-tab:focus-visible, html[data-theme='dark'] .listing-type-toggle__item:focus-visible { outline: 2px solid var(--app-primary-focus) !important; outline-offset: -2px; } html[data-theme='dark'] .item-detail-page .item-title, html[data-theme='dark'] .item-detail-page .product-title, html[data-theme='dark'] .item-detail-page .item-description h2, html[data-theme='dark'] .item-detail-page .item-description h3, html[data-theme='dark'] .item-detail-page .item-details h2, html[data-theme='dark'] .item-detail-page .item-details h3, html[data-theme='dark'] .item-detail-page .related-ads .section-title, html[data-theme='dark'] .item-detail-page .seller-name, html[data-theme='dark'] .item-detail-page .auction-winner-contact h3 { color: var(--app-text) !important; } html[data-theme='dark'] .item-detail-page .item-meta, html[data-theme='dark'] .item-detail-page .item-meta__item, html[data-theme='dark'] .item-detail-page .product-meta__item, html[data-theme='dark'] .item-detail-page .seller-status, html[data-theme='dark'] .item-detail-page .seller-last-seen, html[data-theme='dark'] .item-detail-page .auction-detail__seller-note, html[data-theme='dark'] .item-detail-page .auction-locked-contact, html[data-theme='dark'] .item-detail-page .safety-tips li { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .item-detail-page .item-meta, html[data-theme='dark'] .item-detail-page .item-description h3, html[data-theme='dark'] .item-detail-page .item-details h3 { border-bottom-color: var(--app-border) !important; } html[data-theme='dark'] .item-detail-page .price-amount, html[data-theme='dark'] .item-detail-page .product-price .price-amount, html[data-theme='dark'] .item-detail-page .product-price .price-main { color: var(--app-primary-focus) !important; } html[data-theme='dark'] .item-detail-page .price-history { border-top-color: var(--app-border) !important; } html[data-theme='dark'] .item-detail-page .price-history__chart { border-bottom-color: var(--app-border) !important; } html[data-theme='dark'] .item-detail-page .price-history__title, html[data-theme='dark'] .item-detail-page .price-history__point-group text { color: var(--app-text) !important; } html[data-theme='dark'] .item-detail-page .price-history__date, html[data-theme='dark'] .item-detail-page .price-history__point-group .price-history__date, html[data-theme='dark'] .item-detail-page .price-history__empty { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .item-detail-page .price-history__point-group circle { fill: var(--app-surface) !important; stroke: var(--app-primary-focus) !important; } html[data-theme='dark'] .item-detail-page .price-history__line { stroke: var(--app-primary-focus) !important; } html[data-theme='dark'] .item-detail-page .price-history__link { color: var(--app-primary-focus) !important; } html[data-theme='dark'] .item-detail-page .price-history__link:hover { color: var(--app-text) !important; } html[data-theme='dark'] .item-detail-page .price-negotiable, html[data-theme='dark'] .item-detail-page .product-price .price-negotiable, html[data-theme='dark'] .item-detail-page .product-price .price-free { color: var(--app-text) !important; } html[data-theme='dark'] .item-detail-page .description-content, html[data-theme='dark'] .item-detail-page .details-grid { background: var(--app-input) !important; color: var(--app-text) !important; } html[data-theme='dark'] .item-detail-page .description-hashtag { border-color: var(--app-border-strong) !important; color: var(--app-text-secondary) !important; } html[data-theme='dark'] .item-detail-page .detail-item, html[data-theme='dark'] .item-detail-page .auction-detail__stats > span + span, html[data-theme='dark'] .item-detail-page .auction-card__timer-cell + .auction-card__timer-cell { border-color: var(--app-border) !important; } html[data-theme='dark'] .item-detail-page .detail-label, html[data-theme='dark'] .item-detail-page .auction-detail__stats small, html[data-theme='dark'] .item-detail-page .auction-detail__seller-note { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .item-detail-page .detail-value, html[data-theme='dark'] .item-detail-page .auction-detail__stats b, html[data-theme='dark'] .item-detail-page .auction-detail__timer > b { color: var(--app-text) !important; } html[data-theme='dark'] .item-detail-page .item-images__main, html[data-theme='dark'] .item-detail-page .thumbnail, html[data-theme='dark'] .item-detail-page .no-image-large { background: var(--app-input) !important; border-color: var(--app-border) !important; } html[data-theme='dark'] .item-detail-page .item-images__thumbnails { scrollbar-color: var(--app-border-strong) var(--app-input); } html[data-theme='dark'] .item-detail-page .item-images__thumbnails::-webkit-scrollbar-track { background: var(--app-input); } html[data-theme='dark'] .item-detail-page .item-images__thumbnails::-webkit-scrollbar-thumb { background: var(--app-border-strong); } html[data-theme='dark'] .item-detail-page .item-images__nav { background: var(--app-elevated) !important; color: var(--app-primary-focus) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important; } html[data-theme='dark'] .item-detail-page .item-images__nav:hover { background: var(--app-surface) !important; } html[data-theme='dark'] .item-detail-page .item-images__nav .material-icons, html[data-theme='dark'] .item-detail-page .product-meta__item .material-icons { color: var(--app-primary-focus) !important; } html[data-theme='dark'] .item-detail-page .seller-avatar { background: var(--app-elevated) !important; } html[data-theme='dark'] .item-detail-page .safety-tips h3, html[data-theme='dark'] .item-detail-page .safety-tips h4, html[data-theme='dark'] .item-detail-page .map-section h4 { color: var(--app-text) !important; } html[data-theme='dark'] .item-detail-page .auction-detail__stats, html[data-theme='dark'] .item-detail-page .auction-detail__timer { background: var(--app-input) !important; border-color: var(--app-border) !important; } html[data-theme='dark'] .item-detail-page .auction-detail__timer .auction-card__timer-grid { background: var(--app-surface) !important; border-color: var(--app-border-strong) !important; } html[data-theme='dark'] .item-detail-page .auction-detail__timer .auction-card__timer-grid b { color: #ef4444 !important; } html[data-theme='dark'] .item-detail-page .auction-detail__timer .auction-card__timer-grid small { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .item-detail-page .auction-winner-contact { background: rgba(16, 185, 129, 0.12) !important; border-color: #34d399 !important; } html[data-theme='dark'] .item-detail-page .auction-winner-contact h3 { color: #6ee7b7 !important; } html[data-theme='dark'] .item-detail-page .auction-contact-value { border-top-color: rgba(52, 211, 153, 0.28) !important; } html[data-theme='dark'] .item-detail-page .profile-nav-btn, html[data-theme='dark'] .item-detail-page .modal-offer-btn, html[data-theme='dark'] .item-detail-page .modal-offer-price-btn, html[data-theme='dark'] .item-detail-page .modal-offer-exchange-btn { background: var(--app-input) !important; border-color: var(--app-border-strong) !important; color: var(--app-text) !important; } html[data-theme='dark'] .item-detail-page .profile-nav-btn:hover, html[data-theme='dark'] .item-detail-page .modal-offer-btn:hover, html[data-theme='dark'] .item-detail-page .modal-offer-price-btn:hover, html[data-theme='dark'] .item-detail-page .modal-offer-exchange-btn:hover { background: var(--app-elevated) !important; border-color: var(--app-primary-focus) !important; color: var(--app-primary-focus) !important; } html[data-theme='dark'] .item-detail-page .auction-action-button--disabled { background: var(--app-elevated) !important; border-color: var(--app-border) !important; color: var(--app-text-secondary) !important; } html[data-theme='dark'] .item-detail-page .price-history-modal__card, html[data-theme='dark'] body > .price-history-modal .price-history-modal__card, html[data-theme='dark'] .item-detail-page .auction-bid-modal__content, html[data-theme='dark'] body > .auction-bid-modal .auction-bid-modal__content { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .item-detail-page .auction-bid-modal .modal-header, html[data-theme='dark'] body > .auction-bid-modal .modal-header { border-bottom-color: var(--app-border) !important; } html[data-theme='dark'] .item-detail-page .auction-bid-modal .modal-close, html[data-theme='dark'] body > .auction-bid-modal .modal-close { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .item-detail-page .auction-bid-modal .modal-close:hover, html[data-theme='dark'] body > .auction-bid-modal .modal-close:hover { background: var(--app-elevated) !important; color: var(--app-text) !important; } html[data-theme='dark'] .item-detail-page .auction-bid-modal__stat, html[data-theme='dark'] body > .auction-bid-modal .auction-bid-modal__stat { border-bottom-color: var(--app-border) !important; } html[data-theme='dark'] .item-detail-page .auction-bid-modal__stat dt, html[data-theme='dark'] body > .auction-bid-modal .auction-bid-modal__stat dt { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .item-detail-page .auction-bid-modal__stat dd, html[data-theme='dark'] body > .auction-bid-modal .auction-bid-modal__stat dd { color: var(--app-text) !important; } /* Image gallery modal: override the light cards used by the shared desktop * and mobile gallery layout. */ html[data-theme='dark'] .image-modal .product-info-card, html[data-theme='dark'] .image-modal .contact-card { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; box-shadow: none !important; } html[data-theme='dark'] .image-modal .product-title, html[data-theme='dark'] .image-modal .seller-name, html[data-theme='dark'] .image-modal .product-price .price-negotiable, html[data-theme='dark'] .image-modal .product-price .price-free { color: var(--app-text) !important; } html[data-theme='dark'] .image-modal .product-meta__item, html[data-theme='dark'] .image-modal .seller-status, html[data-theme='dark'] .image-modal .seller-last-seen, html[data-theme='dark'] .image-modal .price-references { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .image-modal .product-meta__item .material-icons { color: var(--app-primary-focus) !important; } html[data-theme='dark'] .image-modal .seller-avatar { background: var(--app-elevated) !important; } html[data-theme='dark'] .image-modal .profile-nav-btn, html[data-theme='dark'] .image-modal .offer-actions .profile-nav-btn { background: var(--app-input) !important; border-color: var(--app-border-strong) !important; color: var(--app-text) !important; } html[data-theme='dark'] .image-modal .profile-nav-btn:hover, html[data-theme='dark'] .image-modal .offer-actions .profile-nav-btn:hover { background: var(--app-elevated) !important; border-color: var(--app-primary-focus) !important; color: var(--app-primary-focus) !important; } /* ─── Mobile (max-width: 1023px) ─── */ @media (max-width: 1023px) { /* Recolor the Material 3 token set used across mobile.css */ html[data-theme='dark'] { --m3-surface: #252830; --m3-surface-variant: #2e333d; --m3-background: #1a1d24; --m3-on-surface: #e8eaef; --m3-on-surface-variant: #9ca3af; --m3-outline: #43474f; --m3-outline-variant: #373d49; --m3-primary-container: #312e81; --m3-on-primary-container: #e0e0ff; --m3-secondary-container: #312e81; --m3-on-secondary-container: #e0e0ff; --m3-error: #ef4444; --m3-state-layer-hover: rgba(129, 140, 248, 0.12); --m3-state-layer-press: rgba(129, 140, 248, 0.18); } /* Re-enable dark native controls after the mobile base layer. */ html[data-theme='dark'] * { color-scheme: dark !important; } /* mobile.css hard-codes the M3 filled-input color with !important */ html[data-theme='dark'] body input, html[data-theme='dark'] body textarea, html[data-theme='dark'] body select, html[data-theme='dark'] body .form-input { background-color: var(--app-input) !important; color: var(--app-text) !important; -webkit-text-fill-color: var(--app-text) !important; } html[data-theme='dark'] .mobile-location-picker__select { background-color: var(--app-input); border-color: var(--app-border); color: var(--app-text); } /* Full-width switcher on small screens */ .theme-switch { display: flex; width: 100%; } .theme-switch__option { flex: 1; justify-content: center; padding: 10px 8px; } } /* ─── Dark category surfaces and navigation ─── * Keep category labels readable and replace legacy light separators. The * category browser is intentionally denser than a card surface: separators * are only slightly lighter than the background, never white. */ html[data-theme='dark'] .categories-dropdown__menu, html[data-theme='dark'] .categories-mega-menu, html[data-theme='dark'] .categories-mega-menu__right, html[data-theme='dark'] .categories-grid { background: var(--app-surface) !important; border-color: var(--app-border) !important; } html[data-theme='dark'] .categories-mega-menu__left { background: var(--app-input) !important; border-right-color: var(--app-border) !important; scrollbar-color: var(--app-border-strong) var(--app-input); } html[data-theme='dark'] .categories-mega-menu__left::-webkit-scrollbar-track, html[data-theme='dark'] .categories-mega-menu__right::-webkit-scrollbar-track { background: var(--app-input); } html[data-theme='dark'] .categories-mega-menu__left::-webkit-scrollbar-thumb, html[data-theme='dark'] .categories-mega-menu__right::-webkit-scrollbar-thumb { background: var(--app-border-strong); } html[data-theme='dark'] .category-item, html[data-theme='dark'] .category-group { border-color: var(--app-border) !important; } html[data-theme='dark'] .category-item.active { background: var(--app-primary) !important; box-shadow: none !important; } html[data-theme='dark'] .category-item.active .category-link, html[data-theme='dark'] .category-item.active .category-link .material-icons { color: #ffffff !important; } html[data-theme='dark'] .category-item:hover:not(.active), html[data-theme='dark'] .category-group:hover { background: var(--app-elevated) !important; } html[data-theme='dark'] .category-link, html[data-theme='dark'] .category-name, html[data-theme='dark'] .subcategory-group__title { color: var(--app-text) !important; } html[data-theme='dark'] .category-link { border-bottom-color: var(--app-border) !important; } html[data-theme='dark'] .section-link, html[data-theme='dark'] .subcategory-link { color: #b8bec9 !important; } html[data-theme='dark'] .section-link:hover, html[data-theme='dark'] .subcategory-link:hover, html[data-theme='dark'] .subcategory-link.more, html[data-theme='dark'] .category-link:hover { color: var(--app-primary-focus) !important; } /* Mobile drawer and its category tree. */ @media (max-width: 1023px) { html[data-theme='dark'] .mobile-nav, html[data-theme='dark'] .mobile-nav__content, html[data-theme='dark'] .mobile-nav__categories { background: var(--app-bg) !important; color: var(--app-text) !important; } html[data-theme='dark'] .mobile-nav__header, html[data-theme='dark'] .mobile-nav__title { border-bottom-color: var(--app-border) !important; } html[data-theme='dark'] .mobile-nav__category, html[data-theme='dark'] .mobile-nav .mobile-nav__tree-node--nested > .mobile-nav__category, html[data-theme='dark'] .mobile-nav .mobile-nav__tree-node--leaf > .mobile-nav__category { background: var(--app-surface) !important; border: 1px solid var(--app-border) !important; color: var(--app-text) !important; box-shadow: none !important; } html[data-theme='dark'] .mobile-nav__category:hover, html[data-theme='dark'] .mobile-nav__category:active { background: var(--app-elevated) !important; border-color: var(--app-border-strong) !important; } html[data-theme='dark'] .mobile-nav__category-name, html[data-theme='dark'] .mobile-nav__category-link, html[data-theme='dark'] .mobile-nav__category-arrow, html[data-theme='dark'] .mobile-nav__category-empty { color: var(--app-text) !important; } html[data-theme='dark'] .mobile-nav__tree-children { border-left-color: var(--app-border) !important; } html[data-theme='dark'] .mobile-nav__tree-toggle { border-color: var(--app-border) !important; background: var(--app-primary-container) !important; color: var(--app-on-primary-container) !important; } html[data-theme='dark'] .mobile-filters { background: var(--app-bg) !important; border-bottom-color: var(--app-border) !important; } html[data-theme='dark'] .mobile-filters__toggle { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .home-mobile-filters-form__actions { background: var(--app-surface) !important; border-top-color: var(--app-border) !important; } } /* Catalog category card and filter panel: never leave a light surface behind. */ html[data-theme='dark'] .categories-hero, html[data-theme='dark'] .categories-hero .categories-cloud, html[data-theme='dark'] .categories-hero .categories-cloud__items, html[data-theme='dark'] .category-sidebar, html[data-theme='dark'] .filters-sidebar, html[data-theme='dark'] .filter-panel { background-color: var(--app-surface) !important; color: var(--app-text) !important; border-color: var(--app-border) !important; } html[data-theme='dark'] .filters-title, html[data-theme='dark'] .filter-group__title, html[data-theme='dark'] .filter-label, html[data-theme='dark'] .category-sidebar h1, html[data-theme='dark'] .category-sidebar h2, html[data-theme='dark'] .category-sidebar h3 { color: var(--app-text) !important; } html[data-theme='dark'] .category-filter-item { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .category-filter-item:hover { background: var(--app-elevated) !important; border-color: var(--app-primary-focus) !important; color: var(--app-text) !important; } html[data-theme='dark'] .category-filter-item .material-icons { color: var(--app-primary-focus) !important; } html[data-theme='dark'] .filter-input, html[data-theme='dark'] .filter-select { background-color: var(--app-input) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .filter-input:focus, html[data-theme='dark'] .filter-select:focus, html[data-theme='dark'] .filter-select:hover { border-color: var(--app-primary-focus) !important; } /* All tag/chip variants use the same quiet outline as the dark search field. */ html[data-theme='dark'] .category-seo-tag, html[data-theme='dark'] .search-tag, html[data-theme='dark'] .description-hashtag, html[data-theme='dark'] .category-mobile-sort-chip { background: var(--app-input) !important; border: 1px solid var(--app-border) !important; color: var(--app-text-secondary) !important; box-shadow: none !important; } html[data-theme='dark'] .category-seo-tag:hover, html[data-theme='dark'] .category-seo-tag:focus-visible, html[data-theme='dark'] .search-tag:hover, html[data-theme='dark'] .description-hashtag:hover, html[data-theme='dark'] .category-mobile-sort-chip:hover, html[data-theme='dark'] .category-mobile-sort-chip.is-active { background: var(--app-elevated) !important; border-color: var(--app-primary-focus) !important; color: var(--app-text) !important; } html[data-theme='dark'] .category-seo-block__tags--keywords { border-top-color: var(--app-border) !important; } html[data-theme='dark'] .category-seo-block { border-top-color: var(--app-border) !important; } /* Category, section and search sidebars: replace legacy light surfaces. */ html[data-theme='dark'] .category-sidebar, html[data-theme='dark'] .section-sidebar, html[data-theme='dark'] .search-sidebar { background: var(--app-bg) !important; background-color: var(--app-bg) !important; color: var(--app-text) !important; } html[data-theme='dark'] .filters-card, html[data-theme='dark'] .desktop-category-navigation { background: var(--app-surface) !important; background-color: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .filters-title, html[data-theme='dark'] .filter-title, html[data-theme='dark'] .checkbox-group .checkbox-label, html[data-theme='dark'] .filter-checkbox, html[data-theme='dark'] .desktop-category-navigation__title, html[data-theme='dark'] .desktop-category-navigation__item { color: var(--app-text) !important; } html[data-theme='dark'] .filters-title { border-color: var(--app-border) !important; border-bottom-color: var(--app-border) !important; } html[data-theme='dark'] .filter-actions { border-top-color: var(--app-border) !important; } html[data-theme='dark'] .filters-title .material-icons, html[data-theme='dark'] .desktop-category-navigation__icon { color: var(--app-primary) !important; } html[data-theme='dark'] .desktop-category-navigation__item:hover, html[data-theme='dark'] .desktop-category-navigation__item:focus-visible { background: var(--app-elevated) !important; color: var(--app-text) !important; } html[data-theme='dark'] .desktop-category-navigation__item.is-active { background: var(--app-primary-container) !important; color: var(--app-text) !important; } html[data-theme='dark'] .desktop-category-navigation__item.is-active .desktop-category-navigation__icon, html[data-theme='dark'] .desktop-category-navigation__item.is-active .desktop-category-navigation__count, html[data-theme='dark'] .desktop-category-navigation__item:hover .desktop-category-navigation__icon, html[data-theme='dark'] .desktop-category-navigation__item:focus-visible .desktop-category-navigation__icon { color: var(--app-primary-focus) !important; } html[data-theme='dark'] .desktop-category-navigation__count, html[data-theme='dark'] .price-inputs span { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .desktop-category-navigation__more.subcategory-card { background: var(--app-elevated) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .desktop-category-navigation__more.subcategory-card:hover { background: var(--app-primary) !important; border-color: var(--app-primary) !important; color: #ffffff !important; } html[data-theme='dark'] .price-inputs input, html[data-theme='dark'] .filters-card .form-input, html[data-theme='dark'] .filters-card .form-select, html[data-theme='dark'] .filters-card .filter-select { background: var(--app-input) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .price-inputs input::placeholder, html[data-theme='dark'] .filters-card .form-input::placeholder { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .price-inputs input:focus, html[data-theme='dark'] .filters-card .form-input:focus, html[data-theme='dark'] .filters-card .form-select:focus, html[data-theme='dark'] .filters-card .filter-select:focus { border-color: var(--app-primary) !important; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18) !important; } /* -------------------------------------------------------------------------- Horizontal catalog filter bar (category, section and search pages). The global text-control normalization above is deliberately generic: it forces input/select surfaces with !important and paints an inset box-shadow over the whole field. The compact bar restates its own surfaces with matching specificity so that (a) the range pills read as one field instead of boxed-in snippets and (b) the applied-filter highlight stays visible in both themes. -------------------------------------------------------------------------- */ html[data-theme='light'] .filter-bar .filter-bar__control--range { background-color: #f3f4f6 !important; border-color: #e5e7eb !important; color: #111827 !important; } html[data-theme='light'] .filter-bar .filter-bar__select { background-color: #ffffff !important; border-color: #d1d5db !important; color: #111827 !important; box-shadow: none !important; -webkit-box-shadow: none !important; } html[data-theme='dark'] .filter-bar .filter-bar__control--range { background-color: var(--app-bg) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .filter-bar .filter-bar__select { background-color: var(--app-input) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; box-shadow: none !important; -webkit-box-shadow: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important; } /* Inner range fields belong to the pill: no own surface, border or autofill overlay, so the pill's fill shows through in both themes. The selector must out-specify the global `input:not(...)` normalization above (0,4,2). */ html[data-theme='light'] .filter-bar .filter-bar__control--range input.filter-bar__input:not([type='checkbox']):not([type='radio']), html[data-theme='dark'] .filter-bar .filter-bar__control--range input.filter-bar__input:not([type='checkbox']):not([type='radio']) { background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: currentcolor !important; padding: 0 !important; } html[data-theme='light'] .filter-bar__control--range .filter-bar__input { color: #111827 !important; } html[data-theme='light'] .filter-bar__input::placeholder { color: #9ca3af !important; -webkit-text-fill-color: #9ca3af !important; } html[data-theme='dark'] .filter-bar__control--range .filter-bar__input { color: var(--app-text) !important; } html[data-theme='dark'] .filter-bar__input::placeholder { color: var(--app-text-secondary) !important; -webkit-text-fill-color: var(--app-text-secondary) !important; } html[data-theme='light'] .filter-bar__label, html[data-theme='light'] .filter-bar__dash { color: #6b7280 !important; } html[data-theme='dark'] .filter-bar__label, html[data-theme='dark'] .filter-bar__dash { color: var(--app-text-secondary) !important; } html[data-theme='light'] .filter-bar .filter-bar__control--range:focus-within, html[data-theme='light'] .filter-bar .filter-bar__select:focus, html[data-theme='light'] .filter-bar .filter-bar__select:hover { border-color: #6057f5 !important; } html[data-theme='dark'] .filter-bar .filter-bar__control--range:focus-within, html[data-theme='dark'] .filter-bar .filter-bar__select:focus, html[data-theme='dark'] .filter-bar .filter-bar__select:hover { border-color: var(--app-primary) !important; } /* Applied filters: tinted surface + primary border + bold value/label. */ html[data-theme='light'] .filter-bar .filter-bar__select.is-active, html[data-theme='light'] .filter-bar .filter-bar__control--range.is-active { background-color: #eef2ff !important; border-color: #4f46e5 !important; color: #3730a3 !important; } /* The global normalization also forces -webkit-text-fill-color, which would paint an applied select value back to the default text color. */ html[data-theme='light'] .filter-bar .filter-bar__select.is-active { -webkit-text-fill-color: #3730a3 !important; } html[data-theme='dark'] .filter-bar .filter-bar__select.is-active { -webkit-text-fill-color: var(--app-text) !important; } html[data-theme='light'] .filter-bar .filter-bar__control--range.is-active .filter-bar__label, html[data-theme='light'] .filter-bar .filter-bar__control--range.is-active .filter-bar__dash { color: #4f46e5 !important; } html[data-theme='light'] .filter-bar .filter-bar__control--range.is-active .filter-bar__input { color: #3730a3 !important; } html[data-theme='dark'] .filter-bar .filter-bar__select.is-active, html[data-theme='dark'] .filter-bar .filter-bar__control--range.is-active { background-color: rgba(129, 140, 248, 0.22) !important; border-color: var(--app-primary-focus) !important; color: var(--app-text) !important; } html[data-theme='dark'] .filter-bar .filter-bar__control--range.is-active .filter-bar__label, html[data-theme='dark'] .filter-bar .filter-bar__control--range.is-active .filter-bar__dash, html[data-theme='dark'] .filter-bar .filter-bar__control--range.is-active .filter-bar__input { color: var(--app-text) !important; } html[data-theme='dark'] .checkbox-group .checkbox-custom, html[data-theme='dark'] .filters-card .checkbox-custom, html[data-theme='dark'] .filter-checkbox .checkmark { background: transparent !important; border-color: var(--app-text-secondary) !important; } html[data-theme='dark'] .checkbox-group input[type='radio']:checked + .checkbox-custom, html[data-theme='dark'] .filter-checkbox input[type='radio']:checked + .checkmark { background: var(--app-primary) !important; border-color: var(--app-primary) !important; } html[data-theme='dark'] .checkbox-group input[type='radio']:checked + .checkbox-custom::after, html[data-theme='dark'] .filter-checkbox input[type='radio']:checked + .checkmark::after { background-color: #ffffff !important; } /* Homepage category hero must sit directly on the shared page background. */ html[data-theme='dark'] .categories-hero__inner, html[data-theme='dark'] .categories-hero__categories, html[data-theme='dark'] .categories-hero .categories-cloud, html[data-theme='dark'] .categories-hero .categories-cloud--static, html[data-theme='dark'] .categories-hero .categories-cloud__items, html[data-theme='dark'] .categories-hero .categories-slider { background: var(--app-bg) !important; background-image: none !important; } html[data-theme='dark'] .categories-hero::before { background: var(--app-bg) !important; background-image: none !important; } html[data-theme='dark'] .categories-hero .category-tag { background: var(--app-bg) !important; border: 0 !important; color: var(--app-text) !important; box-shadow: none !important; } html[data-theme='dark'] .categories-hero .category-tag:hover, html[data-theme='dark'] .categories-hero .category-tag:focus-visible { background: var(--app-bg) !important; border: 0 !important; color: #ef4444 !important; outline: none !important; } html[data-theme='dark'] .categories-hero .category-tag__name, html[data-theme='dark'] .categories-hero .category-tag:hover .category-tag__name { color: var(--app-text) !important; } html[data-theme='dark'] .categories-hero .category-tag:hover .category-tag__name, html[data-theme='dark'] .categories-hero .category-tag:focus-visible .category-tag__name { color: #ef4444 !important; } /* Homepage statistics card: the base CSS uses a white surface outside the * categories hero variant, so style the component itself for dark mode. */ html[data-theme='dark'] .homepage-statistics { background: var(--app-surface) !important; border: 1px solid var(--app-border) !important; color: var(--app-text) !important; box-shadow: none !important; } html[data-theme='dark'] .homepage-statistics__line { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .homepage-statistics__line strong { color: var(--app-text) !important; } html[data-theme='dark'] .homepage-statistics__line-icon { color: var(--app-primary-focus) !important; } html[data-theme='dark'] .homepage-statistics__line .stat-value { color: #ff6b6b !important; } /* Search field: clip the controls to one rounded dark container. */ html[data-theme='dark'] .search-input-group { background: var(--app-input) !important; border: 1px solid var(--app-border) !important; border-radius: 50px !important; overflow: visible !important; box-shadow: none !important; } html[data-theme='dark'] .search-input-group:focus-within { border-color: var(--app-primary-focus) !important; box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.16) !important; } html[data-theme='dark'] .search-input { background: transparent !important; border: 0 !important; border-radius: 50px 0 0 50px !important; color: var(--app-text) !important; -webkit-text-fill-color: var(--app-text) !important; position: relative; z-index: 1; } html[data-theme='dark'] .search-input::placeholder { color: var(--app-text-secondary) !important; opacity: 1 !important; } html[data-theme='dark'] .search-page .popular-searches { border-color: var(--app-border) !important; } html[data-theme='dark'] .search-btn, html[data-theme='dark'] .voice-search-btn { background: transparent !important; border: 0 !important; color: var(--app-text-secondary) !important; z-index: 1; } html[data-theme='dark'] .voice-search-btn { position: absolute; right: 48px; top: 0; height: 100%; width: 40px; } html[data-theme='dark'] .search-btn { border-radius: 0 50px 50px 0 !important; } html[data-theme='dark'] .search-btn:hover, html[data-theme='dark'] .voice-search-btn:hover { color: var(--app-primary-focus) !important; background: rgba(129, 140, 248, 0.12) !important; } /* Keep the light search field rounded while allowing the autocomplete dropdown * to extend below the field instead of being clipped by its parent. */ html[data-theme='light'] .search-input-group { background: #ffffff !important; border: 1px solid #d1d5db !important; border-radius: 50px !important; overflow: visible !important; box-shadow: none !important; } html[data-theme='light'] .search-input-group:focus-within { border-color: #4f46e5 !important; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important; } html[data-theme='light'] .search-input { background: transparent !important; border: 0 !important; border-radius: 50px 0 0 50px !important; color: #111827 !important; -webkit-text-fill-color: #111827 !important; position: relative; z-index: 1; } html[data-theme='light'] .search-input::placeholder { color: #9ca3af !important; opacity: 1 !important; } html[data-theme='light'] .search-btn, html[data-theme='light'] .voice-search-btn { background: transparent !important; border: 0 !important; color: #6b7280 !important; z-index: 1; } html[data-theme='light'] .voice-search-btn { position: absolute; right: 48px; top: 0; height: 100%; width: 40px; } html[data-theme='light'] .search-btn { border-radius: 0 50px 50px 0 !important; } html[data-theme='light'] .search-btn:hover, html[data-theme='light'] .voice-search-btn:hover { color: #4f46e5 !important; background: rgba(79, 70, 229, 0.08) !important; } /* ─── Shared page background ─── * Home and inner pages must use the same Flutter background. Component cards * and panels keep their elevated surface colors below this page-level layer. */ html[data-theme='dark'] .main, html[data-theme='dark'] .home-page, html[data-theme='dark'] .search-page, html[data-theme='dark'] .category-page, html[data-theme='dark'] .item-detail-page, html[data-theme='dark'] .create-item-page, html[data-theme='dark'] .messages-page, html[data-theme='dark'] .legal-page, html[data-theme='dark'] .blog-page, html[data-theme='dark'] .profile-page { background-color: var(--app-bg) !important; color: var(--app-text); } /* Legacy inner-page sidebars and wrappers had hard-coded white surfaces. */ html[data-theme='dark'] .leftside, html[data-theme='dark'] .rightside, html[data-theme='dark'] .main-content, html[data-theme='dark'] .page-content, html[data-theme='dark'] .content-wrapper, html[data-theme='dark'] .item-detail-main, html[data-theme='dark'] .category-page__content, html[data-theme='dark'] .search-page__content { background-color: var(--app-bg) !important; color: var(--app-text); } /* Profile pages: keep cards, outlines and typography on the shared dark * palette. The base profile styles use light surfaces and borders. */ html[data-theme='dark'] .profile-page { background: var(--app-bg) !important; background-color: var(--app-bg) !important; color: var(--app-text) !important; } html[data-theme='dark'] .profile-page .profile-header .page-title, html[data-theme='dark'] .profile-page .profile-management__title, html[data-theme='dark'] .profile-page .section-title, html[data-theme='dark'] .profile-page .tab-header h3, html[data-theme='dark'] .profile-page .settings-section h4, html[data-theme='dark'] .profile-page .profile-name { color: var(--app-text) !important; } html[data-theme='dark'] .profile-page .profile-header .page-subtitle, html[data-theme='dark'] .profile-page .profile-email, html[data-theme='dark'] .profile-page .profile-phone, html[data-theme='dark'] .profile-page .profile-joined, html[data-theme='dark'] .profile-page .stat-label, html[data-theme='dark'] .profile-page .profile-legend__item, html[data-theme='dark'] .profile-page .profile-listings .item-card__meta, html[data-theme='dark'] .profile-page .profile-listings .item-card__stats .stat { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .profile-page .profile-card, html[data-theme='dark'] .profile-page .item-detail-main, html[data-theme='dark'] .profile-page .profile-tabs, html[data-theme='dark'] .profile-page .profile-management, html[data-theme='dark'] .profile-page .settings-section, html[data-theme='dark'] .profile-page .profile-listings .item-card, html[data-theme='dark'] .profile-page .profile-favorites-main { background: var(--app-surface) !important; background-color: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; box-shadow: none !important; } html[data-theme='dark'] .profile-page .profile-navigation, html[data-theme='dark'] .profile-page .tab-nav, html[data-theme='dark'] .profile-page .tab-header, html[data-theme='dark'] .profile-page .settings-form .form-actions, html[data-theme='dark'] .profile-page .profile-listings .item-card__rejection-reason--footer { border-color: var(--app-border) !important; } html[data-theme='dark'] .profile-page .profile-navigation { border-top-color: var(--app-border) !important; } html[data-theme='dark'] .profile-page .profile-nav-btn { background: var(--app-input) !important; border-color: var(--app-border) !important; color: var(--app-text-secondary) !important; } html[data-theme='dark'] .profile-page .profile-nav-btn:hover, html[data-theme='dark'] .profile-page .profile-nav-btn:focus-visible { background: var(--app-elevated) !important; border-color: var(--app-primary-focus) !important; color: var(--app-text) !important; } html[data-theme='dark'] .profile-page .profile-nav-btn.active { background: var(--app-primary) !important; border-color: var(--app-primary) !important; color: #ffffff !important; } html[data-theme='dark'] .profile-page .profile-nav-btn .material-icons, html[data-theme='dark'] .profile-page .nav-count { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .profile-page .profile-nav-btn.active .material-icons, html[data-theme='dark'] .profile-page .profile-nav-btn.active .nav-count { color: #ffffff !important; } /* Public seller actions menu: override the light dropdown palette in dark mode. */ html[data-theme='dark'] .profile-page--public-seller .public-profile-actions__button { background: transparent !important; color: var(--app-text) !important; } html[data-theme='dark'] .profile-page--public-seller .public-profile-actions__button:hover, html[data-theme='dark'] .profile-page--public-seller .public-profile-actions__button:focus-visible { background: var(--app-border-strong) !important; color: var(--app-text) !important; } html[data-theme='dark'] .profile-page--public-seller .public-profile-actions__menu { background: var(--app-surface) !important; border-color: var(--app-border) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .48) !important; } html[data-theme='dark'] .profile-page--public-seller .public-profile-actions__item { color: var(--app-text) !important; } html[data-theme='dark'] .profile-page--public-seller .public-profile-actions__item:hover, html[data-theme='dark'] .profile-page--public-seller .public-profile-actions__item:focus-visible { background: var(--app-elevated) !important; color: var(--app-text) !important; } html[data-theme='dark'] .profile-page--public-seller .public-profile-actions__item--danger { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .profile-page--public-seller .user-report-modal__content textarea { background: var(--app-input) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .profile-page--public-seller .user-report-modal__content textarea::placeholder { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .profile-page--public-seller .user-report-modal__content p, html[data-theme='dark'] .profile-page--public-seller .user-report-modal__content label { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .profile-page--public-seller ~ #publicSellerReportModal { background: rgba(0, 0, 0, .68) !important; } html[data-theme='dark'] .profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .45), 0 10px 10px -5px rgba(0, 0, 0, .3) !important; } html[data-theme='dark'] .profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content h2 { border-bottom-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content > p, html[data-theme='dark'] .profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content label { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content textarea { background: var(--app-input) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content textarea:focus { border-color: var(--app-primary-focus) !important; box-shadow: 0 0 0 3px rgba(129, 140, 248, .16) !important; } html[data-theme='dark'] .profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content .modal-footer { border-top-color: var(--app-border) !important; } html[data-theme='dark'] .profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content .chat-image-modal__close { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content .chat-image-modal__close:hover, html[data-theme='dark'] .profile-page--public-seller ~ #publicSellerReportModal .user-report-modal__content .chat-image-modal__close:focus-visible { background: var(--app-elevated) !important; color: var(--app-text) !important; } /* The same report dialog is used by the chat page. */ html[data-theme='dark'] .user-report-modal { background: rgba(0, 0, 0, .68) !important; } html[data-theme='dark'] .user-report-modal .user-report-modal__content { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .45), 0 10px 10px -5px rgba(0, 0, 0, .3) !important; } html[data-theme='dark'] .user-report-modal .user-report-modal__content h2 { border-bottom-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .user-report-modal .user-report-modal__content > p, html[data-theme='dark'] .user-report-modal .user-report-modal__content label { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .user-report-modal .user-report-modal__content textarea { background: var(--app-input) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .user-report-modal .user-report-modal__content textarea:focus { border-color: var(--app-primary-focus) !important; box-shadow: 0 0 0 3px rgba(129, 140, 248, .16) !important; } html[data-theme='dark'] .user-report-modal .user-report-modal__content .modal-footer { border-top-color: var(--app-border) !important; } html[data-theme='dark'] .user-report-modal .user-report-modal__content .chat-image-modal__close { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .user-report-modal .user-report-modal__content .chat-image-modal__close:hover, html[data-theme='dark'] .user-report-modal .user-report-modal__content .chat-image-modal__close:focus-visible { background: var(--app-elevated) !important; color: var(--app-text) !important; } html[data-theme='dark'] .profile-page .nav-count { background: var(--app-elevated) !important; } html[data-theme='dark'] .profile-page .profile-nav-btn.active .nav-count { background: rgba(255, 255, 255, 0.18) !important; } /* Unified chat blocked state: neutral site surfaces in both themes. */ html:not([data-theme='dark']) .chat-blocked-warning { background: #f8fafc !important; border: 1px solid #d1d5db !important; color: #1f2937 !important; } html:not([data-theme='dark']) .chat-blocked-warning--danger { background: #fff7f7 !important; border-color: #f1b5b5 !important; } html:not([data-theme='dark']) .chat-blocked-icon { background: #ffffff !important; border: 1px solid #e5e7eb !important; } html:not([data-theme='dark']) .chat-blocked-warning .chat-blocked-icon .material-icons { color: #6b7280 !important; } html:not([data-theme='dark']) .chat-blocked-warning--danger .chat-blocked-icon .material-icons { color: #dc2626 !important; } html:not([data-theme='dark']) .chat-blocked-title { color: #374151 !important; } html:not([data-theme='dark']) .chat-blocked-warning--danger .chat-blocked-title { color: #991b1b !important; } html:not([data-theme='dark']) .chat-blocked-text { color: #6b7280 !important; } html:not([data-theme='dark']) .chat-blocked-warning--danger .chat-blocked-text { color: #b91c1c !important; } html:not([data-theme='dark']) .chat-input-blocked { background: #f8fafc !important; border-color: #e5e7eb !important; color: #6b7280 !important; } html[data-theme='dark'] .chat-blocked-warning { background: var(--app-surface) !important; border: 1px solid var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .chat-blocked-warning--danger { background: rgba(127, 29, 29, .16) !important; border-color: rgba(248, 113, 113, .42) !important; } html[data-theme='dark'] .chat-blocked-icon { background: var(--app-elevated) !important; border: 1px solid var(--app-border) !important; } html[data-theme='dark'] .chat-blocked-warning .chat-blocked-icon .material-icons { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .chat-blocked-warning--danger .chat-blocked-icon .material-icons { color: #fca5a5 !important; } html[data-theme='dark'] .chat-blocked-title, html[data-theme='dark'] .chat-blocked-text { color: var(--app-text) !important; } html[data-theme='dark'] .chat-blocked-warning--danger .chat-blocked-title, html[data-theme='dark'] .chat-blocked-warning--danger .chat-blocked-text { color: #fecaca !important; } html[data-theme='dark'] .chat-input-blocked { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text-secondary) !important; } html[data-theme='dark'] .profile-page .desktop-category-navigation-public { background: var(--app-surface) !important; border-color: var(--app-border) !important; } html[data-theme='dark'] .profile-page .desktop-category-navigation-public .desktop-category-navigation__title, html[data-theme='dark'] .profile-page .desktop-category-navigation-public .desktop-category-navigation__item { color: var(--app-text) !important; } html[data-theme='dark'] .profile-page .desktop-category-navigation-public .desktop-category-navigation__item:hover, html[data-theme='dark'] .profile-page .desktop-category-navigation-public .desktop-category-navigation__item:focus-visible { background: var(--app-elevated) !important; color: var(--app-text) !important; } html[data-theme='dark'] .profile-page .desktop-category-navigation-public .desktop-category-navigation__item.is-active { background: var(--app-primary-container) !important; color: var(--app-text) !important; } html[data-theme='dark'] .profile-page .desktop-category-navigation-public .desktop-category-navigation__count, html[data-theme='dark'] .profile-page .desktop-category-navigation-public .desktop-category-navigation__item.is-empty { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .profile-page .sort-select, html[data-theme='dark'] .profile-page .settings-form .form-input, html[data-theme='dark'] .profile-page .settings-form select, html[data-theme='dark'] .profile-page .settings-form textarea { background-color: var(--app-input) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; -webkit-text-fill-color: var(--app-text) !important; } html[data-theme='dark'] .profile-page .sort-select:focus, html[data-theme='dark'] .profile-page .settings-form .form-input:focus, html[data-theme='dark'] .profile-page .settings-form select:focus, html[data-theme='dark'] .profile-page .settings-form textarea:focus { border-color: var(--app-primary-focus) !important; box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.16) !important; } html[data-theme='dark'] .profile-page .tab-nav { background: var(--app-input) !important; } html[data-theme='dark'] .profile-page .tab-btn { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .profile-page .tab-btn:hover, html[data-theme='dark'] .profile-page .tab-btn.active { background: var(--app-surface) !important; color: var(--app-text) !important; } html[data-theme='dark'] .profile-page .tab-btn.active { border-bottom-color: var(--app-primary-focus) !important; } html[data-theme='dark'] .profile-page .settings-form .form-label, html[data-theme='dark'] .profile-page .settings-section h4, html[data-theme='dark'] .profile-page .avatar-upload-info h5, html[data-theme='dark'] .profile-page .profile-listings .item-card__title, html[data-theme='dark'] .profile-page .profile-listings .item-card__price { color: var(--app-text) !important; } html[data-theme='dark'] .profile-page .settings-form .form-help, html[data-theme='dark'] .profile-page .avatar-upload-info p, html[data-theme='dark'] .profile-page .profile-legend__item .material-icons { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .profile-page .profile-legend, html[data-theme='dark'] .profile-page .account-info, html[data-theme='dark'] .profile-page .avatar-preview, html[data-theme='dark'] .profile-page .profile-listings .item-card--draft-strip .item-card__image .no-image { background: var(--app-elevated) !important; border-color: var(--app-border) !important; color: var(--app-text-secondary) !important; } html[data-theme='dark'] .profile-page .avatar-preview { border-color: var(--app-border) !important; } /* Profile listing cards: the shared listing component keeps a separate light * content layer under the image. Match the related-ads dark surface pattern. */ html[data-theme='dark'] .profile-page .profile-listings .item-card, html[data-theme='dark'] .profile-page .profile-listings .item-card__link, html[data-theme='dark'] .profile-page .profile-listings .item-card__content, html[data-theme='dark'] .profile-page .profile-listings .item-card__actions-strip, html[data-theme='dark'] .profile-page .profile-listings .item-card__actions-bottom { background: var(--app-surface) !important; background-color: var(--app-surface) !important; } html[data-theme='dark'] .profile-page .profile-listings .item-card__image, html[data-theme='dark'] .profile-page .profile-listings .item-card__image .no-image { background: var(--app-surface) !important; background-color: var(--app-surface) !important; } /* Favorites use the same listing card partial but live in a dedicated * favorites section/container. Keep every row on the dark surface too. */ html[data-theme='dark'] .profile-page .profile-favorites-main .item-card, html[data-theme='dark'] .profile-page .profile-favorites-main .item-card__link, html[data-theme='dark'] .profile-page .profile-favorites-main .item-card__content, html[data-theme='dark'] .profile-page .profile-favorites-main .item-card__actions, html[data-theme='dark'] .profile-page .profile-favorites-main .item-card__actions-strip, html[data-theme='dark'] .profile-page .profile-favorites-main .item-card__actions-bottom { background: var(--app-surface) !important; background-color: var(--app-surface) !important; } html[data-theme='dark'] .profile-page .profile-favorites-main .item-card__image, html[data-theme='dark'] .profile-page .profile-favorites-main .item-card__image .no-image { background: var(--app-surface) !important; background-color: var(--app-surface) !important; } /* Public seller profiles render listings in the shared listings-grid rather * than .profile-listings; keep the same dark content surface there. */ html[data-theme='dark'] .profile-page--public-seller .listings-grid .item-card, html[data-theme='dark'] .profile-page--public-seller .listings-grid .item-card__link, html[data-theme='dark'] .profile-page--public-seller .listings-grid .item-card__content, html[data-theme='dark'] .profile-page--public-seller .listings-grid .item-card__actions, html[data-theme='dark'] .profile-page--public-seller .listings-grid .item-card__actions-bottom { background: var(--app-surface) !important; background-color: var(--app-surface) !important; } html[data-theme='dark'] .profile-page--public-seller .listings-grid .item-card__image, html[data-theme='dark'] .profile-page--public-seller .listings-grid .item-card__image .no-image { background: var(--app-surface) !important; background-color: var(--app-surface) !important; } html[data-theme='dark'] .profile-page--public-seller .listings-grid, html[data-theme='dark'] .profile-page--public-seller #publicSellerAdsSection { background: var(--app-surface) !important; background-color: var(--app-surface) !important; } /* Listing lifecycle and its action area need a distinct dark surface; the * base styles use nearly transparent black on a dark card. */ html[data-theme='dark'] .profile-page .profile-listings .item-card__lifecycle { background: var(--app-elevated) !important; background-color: var(--app-elevated) !important; border-color: var(--app-border-strong) !important; color: var(--app-text) !important; } html[data-theme='dark'] .profile-page .profile-listings .item-card__lifecycle-bar { background: var(--app-input) !important; } html[data-theme='dark'] .profile-page .profile-listings .item-card__lifecycle-label { color: var(--app-text) !important; } html[data-theme='dark'] .profile-page .profile-listings .item-card__lifecycle--green .item-card__lifecycle-label { color: #6ee7b7 !important; } html[data-theme='dark'] .profile-page .profile-listings .item-card__lifecycle--yellow .item-card__lifecycle-label { color: #fcd34d !important; } html[data-theme='dark'] .profile-page .profile-listings .item-card__lifecycle--red .item-card__lifecycle-label { color: #fca5a5 !important; } html[data-theme='dark'] .profile-page .profile-listings .item-card__lifecycle-meta { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .profile-page .profile-listings .item-card__actions-bottom { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; } /* Available bump action should have the same primary emphasis as activation; * disabled and deletion-countdown states remain styled separately below. */ html[data-theme='dark'] .profile-page .profile-listings .item-card__actions-bottom .btn--bump { background: var(--app-primary) !important; border-color: var(--app-primary) !important; color: #ffffff !important; opacity: 1 !important; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.28) !important; } html[data-theme='dark'] .profile-page .profile-listings .item-card__actions-bottom .btn--bump:hover, html[data-theme='dark'] .profile-page .profile-listings .item-card__actions-bottom .btn--bump:focus-visible { background: #6057f5 !important; border-color: #6057f5 !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4) !important; } /* Bump confirmation dialog: scoped to the informational block used only by * the bump modal, without changing light theme or other modal messages. */ html[data-theme='dark'] .modal-overlay .modal-info { background: var(--app-primary-container) !important; border: 1px solid var(--app-primary) !important; color: var(--app-on-primary-container) !important; } html[data-theme='dark'] .modal-overlay .modal-body > p:first-child { color: var(--app-text) !important; } html[data-theme='dark'] .modal-overlay .modal-footer .modal-cancel { background: transparent !important; border-color: var(--app-primary-focus) !important; color: var(--app-primary-focus) !important; } html[data-theme='dark'] .modal-overlay .modal-footer .modal-cancel:hover, html[data-theme='dark'] .modal-overlay .modal-footer .modal-cancel:focus-visible { background: rgba(129, 140, 248, 0.12) !important; color: #ffffff !important; } html[data-theme='dark'] .modal-overlay .modal-footer .modal-confirm { background: var(--app-primary) !important; border-color: var(--app-primary) !important; color: #ffffff !important; } html[data-theme='dark'] .profile-page .profile-listings .item-card__actions-bottom .btn--bump-purge { background: rgba(127, 29, 29, 0.34) !important; border: 1px solid rgba(248, 113, 113, 0.28) !important; color: #fca5a5 !important; box-shadow: none !important; opacity: 1 !important; } html[data-theme='dark'] .profile-page .profile-listings .item-card__actions-bottom .btn--bump-purge:hover, html[data-theme='dark'] .profile-page .profile-listings .item-card__actions-bottom .btn--bump-purge:focus-visible { background: rgba(127, 29, 29, 0.48) !important; border-color: rgba(248, 113, 113, 0.48) !important; color: #fecaca !important; box-shadow: none !important; transform: none !important; } html[data-theme='dark'] .profile-page .profile-listings .item-card__actions-bottom .btn--bump-purge .material-icons { color: #f87171 !important; } html[data-theme='dark'] .profile-page .profile-listings .action-icon-btn--edit { background: var(--app-surface) !important; border-color: var(--app-primary) !important; color: var(--app-primary) !important; box-shadow: none !important; } html[data-theme='dark'] .profile-page .profile-listings .action-icon-btn--edit:hover, html[data-theme='dark'] .profile-page .profile-listings .action-icon-btn--edit:focus-visible { background: var(--app-primary) !important; border-color: var(--app-primary) !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4) !important; } html[data-theme='dark'] .profile-page .profile-listings .action-icon-btn--delete:hover, html[data-theme='dark'] .profile-page .profile-listings .action-icon-btn--delete:focus-visible { background: var(--app-primary) !important; border-color: var(--app-primary) !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4) !important; } html[data-theme='dark'] .profile-page .profile-listings .action-icon-btn--edit .material-icons { color: currentColor !important; } /* Empty listing images need a visible elevated surface instead of blending * into the surrounding card. */ html[data-theme='dark'] .profile-page .profile-listings .item-card__image .no-image, html[data-theme='dark'] .profile-page .profile-favorites-main .item-card__image .no-image, html[data-theme='dark'] .profile-page--public-seller .listings-grid .item-card__image .no-image { background: var(--app-elevated) !important; background-color: var(--app-elevated) !important; } /* Profile settings: user type selection. */ html[data-theme='dark'] .profile-page .user-type-option { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .profile-page .user-type-option:hover { background: var(--app-elevated) !important; border-color: var(--app-primary-focus) !important; } /* ─── Weekly charges / mega-charge (profile «Управление», ?tab=ads) ─── */ html[data-theme='dark'] .profile-charges { background: var(--app-elevated); border-color: var(--app-border); color: var(--app-text); } html[data-theme='dark'] .profile-charges__level strong { color: #c4b5fd; } html[data-theme='dark'] .profile-charges__refill, html[data-theme='dark'] .profile-charges__hint, html[data-theme='dark'] .mega-charge__timer, html[data-theme='dark'] .bump-selection { color: var(--app-text-secondary); } html[data-theme='dark'] .mega-charge__label, html[data-theme='dark'] .charge-hint, html[data-theme='dark'] .bump-selection.is-ready { color: #c4b5fd; } html[data-theme='dark'] .mega-charge__timer.is-ready { color: #4ade80; } html[data-theme='dark'] .profile-drafts-empty { background: var(--app-elevated); border-color: var(--app-border); color: var(--app-text-secondary); } html[data-theme='dark'] .profile-drafts-empty__title { color: var(--app-text); } html[data-theme='dark'] .profile-drafts-empty__icon { color: var(--app-text-secondary); } /* ─── Gamified resource gauges (profile «Управление», ?tab=ads) ─── */ html[data-theme='dark'] .resource-card { --gauge-accent: #a5b4fc; background: var(--app-elevated); border-color: var(--app-border); color: var(--app-text); } html[data-theme='dark'] .resource-card__desc, html[data-theme='dark'] .resource-card__status { color: var(--app-text-secondary); } html[data-theme='dark'] .resource-card__status.is-ready { color: #4ade80; } html[data-theme='dark'] .battery__body, html[data-theme='dark'] .accumulator { background: var(--app-surface); } html[data-theme='dark'] .battery__cell:not(.is-filled), html[data-theme='dark'] .accumulator__cell:not(.is-filled) { background: #3f3f46; } html[data-theme='dark'] .item-card .mega-select__box { background: var(--app-surface); border-color: var(--app-border); } html[data-theme='dark'] .profile-page .user-type-option:has(input[type="radio"]:checked), html[data-theme='dark'] .profile-page .user-type-option--active { background: var(--app-primary-container) !important; border-color: var(--app-primary) !important; } html[data-theme='dark'] .profile-page .user-type-option__content .material-icons { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .profile-page .user-type-option:has(input[type="radio"]:checked) .user-type-option__content .material-icons, html[data-theme='dark'] .profile-page .user-type-option--active .user-type-option__content .material-icons, html[data-theme='dark'] .profile-page .user-type-option:has(input[type="radio"]:checked) .user-type-option__title, html[data-theme='dark'] .profile-page .user-type-option--active .user-type-option__title { color: var(--app-primary-focus) !important; } html[data-theme='dark'] .profile-page .user-type-option__title { color: var(--app-text) !important; } html[data-theme='dark'] .profile-page .user-type-option__description { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .profile-page .user-type-option--locked:hover { background: var(--app-surface) !important; border-color: var(--app-border) !important; } html[data-theme='dark'] .profile-page .user-type-locked__notification { background: rgba(245, 158, 11, 0.14) !important; border-color: rgba(245, 158, 11, 0.55) !important; } html[data-theme='dark'] .profile-page .user-type-locked__notification .material-icons, html[data-theme='dark'] .profile-page .user-type-locked__title { color: #fcd34d !important; } html[data-theme='dark'] .profile-page .user-type-locked__description { color: #fbbf24 !important; } html[data-theme='dark'] .profile-page .user-type-upgrade-info { background: rgba(14, 165, 233, 0.16) !important; border-color: rgba(56, 189, 248, 0.65) !important; } html[data-theme='dark'] .profile-page .user-type-upgrade-info .material-icons { color: #7dd3fc !important; } html[data-theme='dark'] .profile-page .user-type-upgrade-info small { color: #bae6fd !important; } /* Profile settings: phone country selector. */ html[data-theme='dark'] .profile-page .phone-input__country-toggle, html[data-theme='dark'] .profile-page .phone-input__national { background: var(--app-input) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .profile-page .phone-input__country-toggle:hover, html[data-theme='dark'] .profile-page .phone-input__country-toggle:focus-visible, html[data-theme='dark'] .profile-page .phone-input__national:focus { border-color: var(--app-primary-focus) !important; box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.16) !important; outline: none !important; } html[data-theme='dark'] .profile-page .phone-input__country-caret, html[data-theme='dark'] .profile-page .phone-input__hint { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .profile-page .phone-input__dropdown { background: var(--app-surface) !important; border-color: var(--app-border) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42) !important; } html[data-theme='dark'] .profile-page .phone-input__country-option { color: var(--app-text) !important; } html[data-theme='dark'] .profile-page .phone-input__country-option:hover, html[data-theme='dark'] .profile-page .phone-input__country-option.is-selected { background: var(--app-primary-container) !important; } html[data-theme='dark'] .profile-page .phone-input__country-option-dial { color: var(--app-text-secondary) !important; } /* Profile settings: cookie preferences. */ html[data-theme='dark'] .profile-page .cookie-settings-panel .cookie-consent-categories { border-color: var(--app-border) !important; } html[data-theme='dark'] .profile-page .cookie-settings-panel .cookie-consent-category { background: var(--app-surface) !important; border-bottom-color: var(--app-border) !important; } html[data-theme='dark'] .profile-page .cookie-settings-panel .cookie-consent-category__name { color: var(--app-text) !important; } html[data-theme='dark'] .profile-page .cookie-settings-panel .cookie-consent-category__desc, html[data-theme='dark'] .profile-page .cookie-settings-panel .cookie-consent-modal__note { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .profile-page .cookie-settings-panel .cookie-consent-switch__track { background: var(--app-border-strong) !important; } html[data-theme='dark'] .profile-page .cookie-settings-panel .cookie-consent-switch input:checked + .cookie-consent-switch__track, html[data-theme='dark'] .profile-page .cookie-settings-panel .cookie-consent-switch--locked .cookie-consent-switch__track { background: var(--app-primary) !important; } html[data-theme='dark'] .profile-page .cookie-settings-panel .cookie-consent-switch__track::after { background: var(--app-text) !important; } html[data-theme='dark'] .profile-page .cookie-settings-panel .cookie-consent-link { color: var(--app-primary-focus) !important; } /* Profile settings: account deletion area and confirmation dialog. */ html[data-theme='dark'] .profile-page .account-danger-zone { background: rgba(127, 29, 29, 0.28) !important; border-color: rgba(248, 113, 113, 0.55) !important; } html[data-theme='dark'] .profile-page .account-danger-zone strong { color: #fecaca !important; } html[data-theme='dark'] .profile-page .account-danger-zone p { color: #fca5a5 !important; } html[data-theme='dark'] .profile-page .account-danger-zone .btn--danger { background: #b3261e !important; border-color: #b3261e !important; color: #ffffff !important; } html[data-theme='dark'] .profile-page .account-danger-zone .btn--danger:hover, html[data-theme='dark'] .profile-page .account-danger-zone .btn--danger:focus-visible { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; } html[data-theme='dark'] .account-deletion-modal { background: rgba(0, 0, 0, 0.68) !important; } html[data-theme='dark'] .account-deletion-modal__card { background: var(--app-surface) !important; border: 1px solid var(--app-border) !important; color: var(--app-text) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55) !important; } html[data-theme='dark'] .account-deletion-modal__card h3 { color: var(--app-text) !important; } html[data-theme='dark'] .account-deletion-modal__card p { color: var(--app-text-secondary) !important; } /* Profile settings: password strength indicator. */ html[data-theme='dark'] .profile-page .password-strength { height: 6px !important; margin-top: 12px !important; background: var(--app-border) !important; border-radius: 999px !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important; } html[data-theme='dark'] .profile-page .password-strength-bar { min-width: 0; border-radius: 999px !important; transition: width 0.3s ease, background-color 0.3s ease !important; } html[data-theme='dark'] .profile-page .password-strength-bar.weak { background: #f87171 !important; } html[data-theme='dark'] .profile-page .password-strength-bar.fair { background: #fb923c !important; } html[data-theme='dark'] .profile-page .password-strength-bar.good { background: var(--app-primary-focus) !important; } html[data-theme='dark'] .profile-page .password-strength-bar.strong { background: #2dd4bf !important; } html[data-theme='dark'] .profile-page .password-strength-text { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .profile-page .password-strength-text.weak { color: #fca5a5 !important; } html[data-theme='dark'] .profile-page .password-strength-text.fair { color: #fdba74 !important; } html[data-theme='dark'] .profile-page .password-strength-text.good { color: var(--app-primary-focus) !important; } html[data-theme='dark'] .profile-page .password-strength-text.strong { color: #5eead4 !important; } html[data-theme='dark'] .profile-page .account-info .info-item { border-bottom-color: var(--app-border) !important; } /* Cookie consent UI: shared dark theme for banners and modals on every page. */ html[data-theme='dark'] .cookie-consent-banner { background: var(--app-surface) !important; border-top-color: var(--app-border) !important; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45) !important; color: var(--app-text) !important; } html[data-theme='dark'] .cookie-consent-banner__title, html[data-theme='dark'] .cookie-consent-banner__body, html[data-theme='dark'] .cookie-consent-banner__body p { color: var(--app-text) !important; } html[data-theme='dark'] .cookie-consent-link, html[data-theme='dark'] a.cookie-consent-link { color: var(--app-primary-focus) !important; } html[data-theme='dark'] .cookie-consent-link:hover, html[data-theme='dark'] a.cookie-consent-link:hover { color: #c4b5fd !important; } html[data-theme='dark'] .cookie-consent-modal__backdrop { background: rgba(0, 0, 0, 0.7) !important; } html[data-theme='dark'] .cookie-consent-modal__panel { background: var(--app-surface) !important; border: 1px solid var(--app-border) !important; color: var(--app-text) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.58) !important; } html[data-theme='dark'] .cookie-consent-modal__side-title, html[data-theme='dark'] .cookie-consent-modal__title, html[data-theme='dark'] .cookie-consent-modal__text, html[data-theme='dark'] .cookie-consent-modal__note { color: var(--app-text) !important; } html[data-theme='dark'] .cookie-consent-modal__note { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .cookie-consent-modal__policy-link { color: var(--app-primary-focus) !important; } html[data-theme='dark'] .cookie-consent-modal__policy-link--in-content { background: var(--app-primary-container) !important; border-color: var(--app-border) !important; } html[data-theme='dark'] .cookie-consent-categories { border-top-color: var(--app-border) !important; } html[data-theme='dark'] .cookie-consent-category { border-bottom-color: var(--app-border) !important; } html[data-theme='dark'] .cookie-consent-category__name { color: var(--app-text) !important; } html[data-theme='dark'] .cookie-consent-category__desc { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .cookie-consent-switch__track { background: var(--app-border-strong) !important; } html[data-theme='dark'] .cookie-consent-switch input:checked + .cookie-consent-switch__track, html[data-theme='dark'] .cookie-consent-switch--locked .cookie-consent-switch__track { background: var(--app-primary) !important; } html[data-theme='dark'] .cookie-consent-switch__track::after { background: var(--app-text) !important; } html[data-theme='dark'] .cookie-consent-btn--outline { background: var(--app-surface) !important; border-color: var(--app-border-strong) !important; color: var(--app-text) !important; } html[data-theme='dark'] .cookie-consent-btn--outline:hover, html[data-theme='dark'] .cookie-consent-btn--outline:focus-visible { background: var(--app-elevated) !important; border-color: var(--app-primary-focus) !important; color: var(--app-text) !important; outline: none !important; } html[data-theme='dark'] .cookie-consent-btn--primary { background: var(--app-primary) !important; border-color: var(--app-primary) !important; color: #ffffff !important; } html[data-theme='dark'] .cookie-consent-btn--primary:hover, html[data-theme='dark'] .cookie-consent-btn--primary:focus-visible { background: var(--app-primary-focus) !important; border-color: var(--app-primary-focus) !important; color: #ffffff !important; outline: none !important; } html[data-theme='dark'] .cookie-map-placeholder { background: var(--app-elevated) !important; border-color: var(--app-border-strong) !important; color: var(--app-text-secondary) !important; } html[data-theme='dark'] .cookie-map-placeholder__text { color: var(--app-text-secondary) !important; } /* Legal documents: shared dark theme for current and future /legal/* pages. */ html[data-theme='dark'] .legal-page { color: var(--app-text) !important; } html[data-theme='dark'] .legal-page__title, html[data-theme='dark'] .legal-page__h2, html[data-theme='dark'] .legal-page__article--html h2, html[data-theme='dark'] .legal-page__article--html h3 { color: var(--app-text) !important; } html[data-theme='dark'] .legal-page__lead, html[data-theme='dark'] .legal-page__p, html[data-theme='dark'] .legal-page__article--html p, html[data-theme='dark'] .legal-page__article--html li, html[data-theme='dark'] .legal-page__footnote { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .legal-nav__card, html[data-theme='dark'] .legal-page__vendor { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; box-shadow: none !important; } html[data-theme='dark'] .legal-nav__title, html[data-theme='dark'] .legal-nav__empty { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .legal-nav__link { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .legal-nav__link:hover, html[data-theme='dark'] .legal-nav__link:focus-visible { background: var(--app-elevated) !important; color: var(--app-text) !important; outline: none !important; } html[data-theme='dark'] .legal-nav__link--active, html[data-theme='dark'] .legal-nav__link--active .legal-nav__icon, html[data-theme='dark'] .legal-page__link, html[data-theme='dark'] .legal-page__article--html a { color: var(--app-primary-focus) !important; } html[data-theme='dark'] .legal-page__link:hover, html[data-theme='dark'] .legal-page__article--html a:hover { color: #c4b5fd !important; } html[data-theme='dark'] .legal-nav__icon { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .legal-page__vendor-name, html[data-theme='dark'] .legal-page__bullet-text { color: var(--app-text) !important; } html[data-theme='dark'] .legal-page__bullet--note .legal-page__bullet-text { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .legal-page__bullet::before { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .legal-page__article--html blockquote { color: var(--app-text-secondary) !important; border-left-color: var(--app-primary-focus) !important; } html[data-theme='dark'] .legal-page__article--html hr { border-color: var(--app-border) !important; } html[data-theme='dark'] .legal-page__article--html code, html[data-theme='dark'] .legal-page__article--html pre { background: var(--app-elevated) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .legal-page__article--html table, html[data-theme='dark'] .legal-page__article--html th, html[data-theme='dark'] .legal-page__article--html td { border-color: var(--app-border) !important; color: var(--app-text-secondary) !important; } html[data-theme='dark'] .legal-page__article--html th { background: var(--app-elevated) !important; color: var(--app-text) !important; } /* Seller blog management: dark theme for current and future manage blocks. */ html[data-theme='dark'] .seller-blog-page--manage { color: var(--app-text) !important; } html[data-theme='dark'] .seller-blog-page--manage .seller-blog-manage__panel, html[data-theme='dark'] .seller-blog-page--manage .profile-card { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; box-shadow: none !important; } html[data-theme='dark'] .seller-blog-page--manage .seller-blog-manage__head { border-bottom-color: var(--app-border) !important; } html[data-theme='dark'] .seller-blog-page--manage .seller-blog-manage__title, html[data-theme='dark'] .seller-blog-page--manage .profile-name { color: var(--app-text) !important; } html[data-theme='dark'] .seller-blog-page--manage .seller-blog-manage__head .material-icons { color: var(--app-primary-focus) !important; } html[data-theme='dark'] .seller-blog-page--manage .seller-blog-page__hint, html[data-theme='dark'] .seller-blog-page--manage .seller-blog-manage__lead, html[data-theme='dark'] .seller-blog-page--manage .form-help, html[data-theme='dark'] .seller-blog-page--manage .profile-email { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .seller-blog-page--manage .seller-blog-page__breadcrumbs .breadcrumb-link { background: var(--app-elevated) !important; color: var(--app-text-secondary) !important; } html[data-theme='dark'] .seller-blog-page--manage .seller-blog-page__breadcrumbs .breadcrumb-current { background: var(--app-primary-container) !important; color: var(--app-text) !important; } html[data-theme='dark'] .seller-blog-page--manage .seller-blog-page__bc-icon { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .seller-blog-page--manage .form-label, html[data-theme='dark'] .seller-blog-page--manage .seller-blog-page__select, html[data-theme='dark'] .seller-blog-page--manage .seller-blog-page__textarea, html[data-theme='dark'] .seller-blog-page--manage .form-input { color: var(--app-text) !important; } html[data-theme='dark'] .seller-blog-page--manage .seller-blog-page__select, html[data-theme='dark'] .seller-blog-page--manage .seller-blog-page__textarea, html[data-theme='dark'] .seller-blog-page--manage .form-input { background-color: var(--app-input) !important; border-color: var(--app-border) !important; -webkit-text-fill-color: var(--app-text) !important; } html[data-theme='dark'] .seller-blog-page--manage .seller-blog-page__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23c4b5fd' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important; } html[data-theme='dark'] .seller-blog-page--manage .seller-blog-page__select:focus, html[data-theme='dark'] .seller-blog-page--manage .seller-blog-page__textarea:focus, html[data-theme='dark'] .seller-blog-page--manage .form-input:focus { border-color: var(--app-primary-focus) !important; box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.16) !important; outline: none !important; } html[data-theme='dark'] .seller-blog-page--manage .seller-blog-manage__fieldset:disabled .form-input, html[data-theme='dark'] .seller-blog-page--manage .seller-blog-manage__fieldset:disabled .seller-blog-page__select, html[data-theme='dark'] .seller-blog-page--manage .seller-blog-manage__fieldset:disabled .seller-blog-page__textarea { background: var(--app-elevated) !important; border-color: var(--app-border) !important; color: var(--app-text-secondary) !important; -webkit-text-fill-color: var(--app-text-secondary) !important; } html[data-theme='dark'] .seller-blog-page--manage .seller-blog-page__topic-list-item { border-bottom-color: var(--app-border) !important; } html[data-theme='dark'] .seller-blog-page--manage .seller-blog-page__topic-list-title { color: var(--app-text) !important; } html[data-theme='dark'] .seller-blog-page--manage .seller-blog-page__topic-list-meta { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .seller-blog-page--manage .seller-blog-page__btn--danger { background: transparent !important; border-color: rgba(248, 113, 113, 0.55) !important; color: #fca5a5 !important; } html[data-theme='dark'] .seller-blog-page--manage .seller-blog-page__btn--danger:hover, html[data-theme='dark'] .seller-blog-page--manage .seller-blog-page__btn--danger:focus-visible { background: rgba(127, 29, 29, 0.42) !important; border-color: #f87171 !important; color: #fecaca !important; } html[data-theme='dark'] .seller-blog-page--manage .btn--outline { background: var(--app-surface) !important; border-color: var(--app-border-strong) !important; color: var(--app-text) !important; } html[data-theme='dark'] .seller-blog-page--manage .btn--outline:hover, html[data-theme='dark'] .seller-blog-page--manage .btn--outline:focus-visible { background: var(--app-elevated) !important; border-color: var(--app-primary-focus) !important; color: var(--app-text) !important; } html[data-theme='dark'] .seller-blog-page--manage .notification--success { background: rgba(5, 150, 105, 0.18) !important; border-color: rgba(52, 211, 153, 0.5) !important; color: #a7f3d0 !important; } html[data-theme='dark'] .seller-blog-page--manage .notification--error { background: rgba(127, 29, 29, 0.28) !important; border-color: rgba(248, 113, 113, 0.55) !important; color: #fecaca !important; } /* Blog topic body: use a regular multiline field shape instead of the shared * rounded input treatment used by compact controls. */ html[data-theme='dark'] .seller-blog-page--manage #th_body { min-height: 140px !important; padding: 12px 14px !important; border-radius: 12px !important; background: var(--app-input) !important; border: 1px solid var(--app-border) !important; color: var(--app-text) !important; -webkit-text-fill-color: var(--app-text) !important; line-height: 1.55 !important; resize: vertical !important; } html[data-theme='dark'] .seller-blog-page--manage #th_body::placeholder { color: var(--app-text-secondary) !important; opacity: 1 !important; } html[data-theme='dark'] .seller-blog-page--manage #th_body:hover { border-color: var(--app-border-strong) !important; } html[data-theme='dark'] .seller-blog-page--manage #th_body:focus { border-color: var(--app-primary-focus) !important; box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.16) !important; outline: none !important; } /* Blog topic body: keep the same regular multiline shape in light theme. */ html[data-theme='light'] .seller-blog-page--manage #th_body { min-height: 140px !important; padding: 12px 14px !important; border-radius: 12px !important; background: #ffffff !important; border: 1px solid #d1d5db !important; color: #111827 !important; -webkit-text-fill-color: #111827 !important; line-height: 1.55 !important; resize: vertical !important; } html[data-theme='light'] .seller-blog-page--manage #th_body::placeholder { color: #6b7280 !important; opacity: 1 !important; } html[data-theme='light'] .seller-blog-page--manage #th_body:hover { border-color: #9ca3af !important; } html[data-theme='light'] .seller-blog-page--manage #th_body:focus { border-color: #4f46e5 !important; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12) !important; outline: none !important; } /* ============================================ HOME (mobile) — category tiles are transparent in dark mode too. The legacy dark rules above paint `.home-page .subcategory-card` with a surface fill and a border, which no longer matches the two-column app-like grid. ============================================ */ @media (max-width: 1023px) { html[data-theme='dark'] .home-page .subcategories-section .subcategory-card, html[data-theme='dark'] .home-page .subcategories-section .subcategory-card:hover, html[data-theme='dark'] .home-page .subcategories-section .subcategory-card:active { background: transparent !important; background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; color: var(--app-text) !important; } html[data-theme='dark'] .home-page .subcategories-section .subcategory-card__title { color: var(--app-text) !important; } } /* ============================================ PROFILE CABINET quick actions (mobile) — dark palette for the graphite tiles. The tiles keep one and the same fill in every state; the active tab is shown by the ring drawn outside the tile (see mobile.css), only its colour flips to a light tone so it stays visible on the dark surface. ============================================ */ @media (max-width: 1023px) { html[data-theme='dark'] .profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation { border-top-color: var(--app-border) !important; } /* Same elevated grey as the other dark blocks — no bright fill. */ html[data-theme='dark'] .profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-btn, html[data-theme='dark'] .profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-btn.active, html[data-theme='dark'] .profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-btn:focus-visible { background: var(--app-elevated) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html[data-theme='dark'] .profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-btn:hover { background: #38404d !important; border-color: #454c5a !important; color: var(--app-text) !important; } /* External ring — mid grey, not a bright white outline. */ html[data-theme='dark'] .profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-btn.active::after { border-color: #9ca3af !important; } html[data-theme='dark'] .profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-btn .material-icons, html[data-theme='dark'] .profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-btn.active .material-icons { color: var(--app-text-secondary) !important; } html[data-theme='dark'] .profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-btn .nav-label { color: var(--app-text) !important; } html[data-theme='dark'] .profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-btn .nav-count, html[data-theme='dark'] .profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-btn.active .nav-count { background: var(--app-input) !important; color: var(--app-text-secondary) !important; } /* Personal blog entry on mobile — the big tonal button (same palette as the app); only the wrapper card around it is gone. */ html[data-theme='dark'] .profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-form .profile-nav-btn, html[data-theme='dark'] .profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-form .profile-nav-btn:hover, html[data-theme='dark'] .profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-form .profile-nav-btn:focus-visible { background: var(--m3-secondary-container) !important; border-color: transparent !important; color: var(--m3-on-secondary-container) !important; } html[data-theme='dark'] .profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-form .profile-nav-btn:hover, html[data-theme='dark'] .profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-form .profile-nav-btn:focus-visible { box-shadow: inset 0 0 0 100px var(--m3-state-layer-hover) !important; } html[data-theme='dark'] .profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-form .profile-nav-btn .material-icons, html[data-theme='dark'] .profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-form .profile-nav-btn .nav-label { color: var(--m3-on-secondary-container) !important; } html[data-theme='dark'] .profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-form .profile-nav-btn .nav-count { background: rgba(224, 224, 255, 0.16) !important; color: var(--m3-on-secondary-container) !important; } /* Avatar picker block in the settings tab: the mobile base layer paints it near-white, and the legacy dark rule for it lives inside a media query that can never match. Give it the same dark surfaces as the other blocks. */ html[data-theme='dark'] .profile-page .avatar-upload { background: var(--app-elevated) !important; } html[data-theme='dark'] .profile-page .avatar-preview { background: var(--app-input) !important; } } /* ============================================ CATEGORY / HOME (mobile, dark) — breadcrumbs and filter controls. The mobile layer hardcodes light-theme fills for them (`#f1f3f5`, `rgba(224,224,255,…)`), and the legacy dark crumbs rule for `.category-page` sits inside a media query that can never match (`min-width: 1024px` + `max-width: 1023px`). ============================================ */ @media (max-width: 1023px) { html[data-theme='dark'] .category-page .breadcrumbs .breadcrumb-link, html[data-theme='dark'] .category-page .breadcrumbs .breadcrumb-current { background: var(--app-elevated) !important; color: var(--app-text-secondary) !important; } html[data-theme='dark'] .category-page .breadcrumbs .breadcrumb-link:hover, html[data-theme='dark'] .category-page .breadcrumbs .breadcrumb-link:focus-visible { color: var(--app-primary-focus) !important; } html[data-theme='dark'] .category-page .breadcrumbs .material-icons { color: var(--app-text-secondary) !important; } /* «Фильтры» toggle + active chips: the light layer tints them with the light M3 primary container; use a primary tint that reads on a dark surface. */ html[data-theme='dark'] .category-mobile-filter-btn, html[data-theme='dark'] .home-mobile-filter-btn { background: rgba(129, 140, 248, 0.16) !important; border-color: var(--app-primary-focus) !important; color: var(--app-primary-focus) !important; } html[data-theme='dark'] .category-mobile-filter-btn .material-icons, html[data-theme='dark'] .home-mobile-filter-btn .material-icons { color: inherit !important; } html[data-theme='dark'] .home-mobile-sort-chip.is-active, html[data-theme='dark'] .category-mobile-filters-form__chip.is-active, html[data-theme='dark'] .home-mobile-filters-form__chip.is-active { background: rgba(129, 140, 248, 0.22) !important; border-color: var(--app-primary-focus) !important; color: var(--app-primary-focus) !important; } }