:root {
    --m1-light-bg: #ffffff;
    --m1-light-text: #0f172a;
    --m1-light-text-soft: #475569;
    --m1-light-surface: #ffffff;
    --m1-light-surface-soft: #f8fafc;
    --m1-light-border: rgba(15, 23, 42, 0.14);
    --m1-light-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);

    --m1-dark-bg: #0f172a;
    --m1-dark-text: #f8fafc;
    --m1-dark-text-soft: #cbd5e1;
    --m1-dark-surface: #111827;
    --m1-dark-surface-soft: #1f2937;
    --m1-dark-border: rgba(255, 255, 255, 0.2);
    --m1-dark-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  }

  html[data-theme="light"] {
    color-scheme: light;
    --bg: #ffffff !important;
    --dark-bg: #ffffff !important;
    --surface: var(--m1-light-surface) !important;
    --card: var(--m1-light-surface) !important;
    --glass-bg: rgba(255, 255, 255, 0.9) !important;
    --glass-border: var(--m1-light-border) !important;
    --text-primary: var(--m1-light-text) !important;
    --text-secondary: var(--m1-light-text-soft) !important;
    --dark: var(--m1-light-text) !important;
    --dark-color: var(--m1-light-text) !important;
    --light-color: var(--m1-light-surface-soft) !important;
    --muted: var(--m1-light-text-soft) !important;
    --muted-2: #64748b !important;
    --muted2: #64748b !important;
    --text-soft: var(--m1-light-text-soft) !important;
    --text-muted: #64748b !important;
    --txt: var(--m1-light-text) !important;
    --border: var(--m1-light-border) !important;
    --shadow-glow: var(--m1-light-shadow) !important;
  }

  html[data-theme="dark"] {
    color-scheme: dark;
    --bg: var(--m1-dark-bg) !important;
    --dark-bg: var(--m1-dark-bg) !important;
    --surface: var(--m1-dark-surface) !important;
    --card: var(--m1-dark-surface) !important;
    --glass-bg: rgba(17, 24, 39, 0.86) !important;
    --glass-border: var(--m1-dark-border) !important;
    --text-primary: var(--m1-dark-text) !important;
    --text-secondary: var(--m1-dark-text-soft) !important;
    --dark: var(--m1-dark-text) !important;
    --dark-color: var(--m1-dark-text) !important;
    --light-color: var(--m1-dark-surface-soft) !important;
    --muted: var(--m1-dark-text-soft) !important;
    --muted-2: #94a3b8 !important;
    --muted2: #94a3b8 !important;
    --text-soft: var(--m1-dark-text-soft) !important;
    --text-muted: #94a3b8 !important;
    --txt: var(--m1-dark-text) !important;
    --border: var(--m1-dark-border) !important;
    --shadow-glow: var(--m1-dark-shadow) !important;
  }

  body {
    background-color: var(--m1-light-bg) !important;
    background-image: none !important;
  }

  html[data-theme="light"] body {
    color: var(--m1-light-text) !important;
  }

  html[data-theme="dark"] body {
    background-color: var(--m1-dark-bg) !important;
    background-image: none !important;
    color: var(--m1-dark-text) !important;
  }

  html[data-theme="light"] body::before,
  html[data-theme="light"] body::after {
    background: none !important;
    opacity: 0 !important;
  }

  html[data-theme="light"] .bg-animation,
  html[data-theme="light"] .snowflake-layer,
  html[data-theme="light"] #snowLayer {
    display: none !important;
  }

  /* Home page: keep hero video visible in light mode. */
  html[data-theme="light"] .home-page .hero-yt,
  html[data-theme="light"] .home-page #ytBg {
    display: block !important;
  }

  html[data-theme="light"] .home-page #snowLayer {
    display: block !important;
  }

  html[data-theme="light"] .home-page .hero-overlay {
    display: block !important;
    background: linear-gradient(180deg, rgba(10, 15, 30, 0.24) 0%, rgba(10, 15, 30, 0.64) 100%) !important;
  }

  html[data-theme="light"] .home-page .hero-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 10px 34px rgba(0, 0, 0, 0.45) !important;
  }

  html[data-theme="light"] .home-page .hero-subtitle {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: 0 6px 22px rgba(0, 0, 0, 0.42) !important;
  }

  html[data-theme="light"] .home-page .cta-ghost {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.22) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22) !important;
  }

  html[data-theme="light"] .home-page .cta-ghost:hover {
    background: #ffffff !important;
    color: #0b1220 !important;
    border-color: rgba(15, 23, 42, 0.35) !important;
  }

  html[data-theme="light"] .hero-title,
  html[data-theme="light"] .section-title,
  html[data-theme="light"] .title,
  html[data-theme="light"] .navbar-brand,
  html[data-theme="light"] .footer-title,
  html[data-theme="light"] .copyright strong {
    background: none !important;
    -webkit-text-fill-color: var(--m1-light-text) !important;
    color: var(--m1-light-text) !important;
    text-shadow: none !important;
  }

  html[data-theme="light"] .navbar,
  html[data-theme="light"] .navbar-glass,
  html[data-theme="light"] .topbar,
  html[data-theme="light"] .header,
  html[data-theme="light"] .order-head {
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--m1-light-text) !important;
    border-color: var(--m1-light-border) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
  }

  html[data-theme="light"] .sidebar {
    background: #ffffff !important;
    color: var(--m1-light-text) !important;
    border-right: 1px solid var(--m1-light-border) !important;
  }

  html[data-theme="light"] .sidebar-brand,
  html[data-theme="light"] .sidebar-link,
  html[data-theme="light"] .sidebar-link i {
    color: var(--m1-light-text-soft) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
  }

  html[data-theme="light"] .sidebar-link:hover,
  html[data-theme="light"] .sidebar-link.active {
    background: rgba(37, 99, 235, 0.08) !important;
    color: #1d4ed8 !important;
    border-left-color: #2563eb !important;
  }

  html[data-theme="light"] .glass,
  html[data-theme="light"] .glass-card,
  html[data-theme="light"] .card,
  html[data-theme="light"] .cardx,
  html[data-theme="light"] .dashboard-card,
  html[data-theme="light"] .mini-card,
  html[data-theme="light"] .hero-card,
  html[data-theme="light"] .category-card,
  html[data-theme="light"] .product-card,
  html[data-theme="light"] .filter-card,
  html[data-theme="light"] .card-glass,
  html[data-theme="light"] .gallery,
  html[data-theme="light"] .thumbs,
  html[data-theme="light"] .yt-card,
  html[data-theme="light"] .yt-wrap,
  html[data-theme="light"] .product-media,
  html[data-theme="light"] .notice-card,
  html[data-theme="light"] .message-box,
  html[data-theme="light"] .form-box,
  html[data-theme="light"] .card-box,
  html[data-theme="light"] .quick-actions,
  html[data-theme="light"] .items-box,
  html[data-theme="light"] .variant-card,
  html[data-theme="light"] .loc-list,
  html[data-theme="light"] .search-wrap,
  html[data-theme="light"] .accordion-item,
  html[data-theme="light"] .modal-content,
  html[data-theme="light"] .dropdown-menu,
  html[data-theme="light"] .table-responsive,
  html[data-theme="light"] .price-preview,
  html[data-theme="light"] .yt-preview,
  html[data-theme="light"] .yt-frame {
    background: var(--m1-light-surface) !important;
    color: var(--m1-light-text) !important;
    border: 1px solid var(--m1-light-border) !important;
    box-shadow: var(--m1-light-shadow) !important;
  }

  html[data-theme="light"] footer,
  html[data-theme="light"] .footer,
  html[data-theme="light"] .footer-dark {
    background: #f8fafc !important;
    color: var(--m1-light-text) !important;
    border-top: 1px solid var(--m1-light-border) !important;
  }

  html[data-theme="light"] .navbar .nav-link,
  html[data-theme="light"] .nav-link,
  html[data-theme="light"] .nav-social-link,
  html[data-theme="light"] .dropdown-item,
  html[data-theme="light"] .brand,
  html[data-theme="light"] .brand-text,
  html[data-theme="light"] .hero-sub,
  html[data-theme="light"] .hero-subtitle,
  html[data-theme="light"] .muted,
  html[data-theme="light"] .sub,
  html[data-theme="light"] .meta,
  html[data-theme="light"] .p-desc,
  html[data-theme="light"] .subtitle,
  html[data-theme="light"] .offer-hint,
  html[data-theme="light"] .p-old,
  html[data-theme="light"] .old-price,
  html[data-theme="light"] .no-products,
  html[data-theme="light"] .small,
  html[data-theme="light"] .text-white,
  html[data-theme="light"] .text-light,
  html[data-theme="light"] .link-light,
  html[data-theme="light"] .text-body,
  html[data-theme="light"] .text-muted,
  html[data-theme="light"] .text-secondary,
  html[data-theme="light"] .header-title p,
  html[data-theme="light"] .card-title,
  html[data-theme="light"] .copyright {
    color: var(--m1-light-text-soft) !important;
  }

  html[data-theme="light"] h1,
  html[data-theme="light"] h2,
  html[data-theme="light"] h3,
  html[data-theme="light"] h4,
  html[data-theme="light"] h5,
  html[data-theme="light"] h6,
  html[data-theme="light"] strong,
  html[data-theme="light"] .card-value,
  html[data-theme="light"] .page-title,
  html[data-theme="light"] .p-title,
  html[data-theme="light"] .normal-price,
  html[data-theme="light"] .navbar-brand,
  html[data-theme="light"] .brand-logo + * {
    color: var(--m1-light-text) !important;
  }

  html[data-theme="light"] .p-price.normal {
    background: none !important;
    -webkit-text-fill-color: var(--m1-light-text) !important;
    color: var(--m1-light-text) !important;
    text-shadow: none !important;
  }

  html[data-theme="light"] .chip,
  html[data-theme="light"] .selected-pill {
    background: #ffffff !important;
    color: var(--m1-light-text) !important;
    border-color: var(--m1-light-border) !important;
  }

  html[data-theme="light"] .form-label {
    color: var(--m1-light-text) !important;
  }

  html[data-theme="light"] .lang-btn,
  html[data-theme="light"] .cart-pill,
  html[data-theme="light"] .pill,
  html[data-theme="light"] .btn-soft,
  html[data-theme="light"] .btn-outline-soft,
  html[data-theme="light"] .btn-outline-light,
  html[data-theme="light"] .back-btn,
  html[data-theme="light"] .social-link {
    background: #ffffff !important;
    color: var(--m1-light-text) !important;
    border-color: var(--m1-light-border) !important;
  }

  html[data-theme="light"] .btn-soft:hover,
  html[data-theme="light"] .btn-outline-soft:hover,
  html[data-theme="light"] .btn-outline-light:hover,
  html[data-theme="light"] .btn-outline-dark:hover,
  html[data-theme="light"] .btn-outline-secondary:hover,
  html[data-theme="light"] .lang-btn:hover,
  html[data-theme="light"] .lang-btn.active,
  html[data-theme="light"] .cart-pill:hover,
  html[data-theme="light"] .pill:hover,
  html[data-theme="light"] .back-btn:hover,
  html[data-theme="light"] .social-link:hover,
  html[data-theme="light"] .dropdown-item:hover,
  html[data-theme="light"] .dropdown-item.active,
  html[data-theme="light"] .nav-link:hover,
  html[data-theme="light"] .nav-link.active,
  html[data-theme="light"] .loc-item:hover,
  html[data-theme="light"] .qty-btn:hover,
  html[data-theme="light"] .msg-card:hover {
    background: rgba(37, 99, 235, 0.1) !important;
    color: #1d4ed8 !important;
    border-color: rgba(37, 99, 235, 0.3) !important;
  }

  html[data-theme="light"] .navbar-toggler,
  html[data-theme="light"] .navbar-toggler i,
  html[data-theme="light"] .navbar-toggler-icon {
    color: var(--m1-light-text) !important;
    border-color: var(--m1-light-border) !important;
  }

  html[data-theme="light"] .table {
    --bs-table-color: var(--m1-light-text) !important;
    --bs-table-striped-color: var(--m1-light-text) !important;
    --bs-table-hover-color: var(--m1-light-text) !important;
  }

  html[data-theme="light"] .accordion {
    --bs-accordion-color: var(--m1-light-text) !important;
    --bs-accordion-btn-color: var(--m1-light-text) !important;
    --bs-accordion-active-color: var(--m1-light-text) !important;
    --bs-accordion-btn-bg: #ffffff !important;
    --bs-accordion-active-bg: rgba(37, 99, 235, 0.08) !important;
    --bs-accordion-bg: #ffffff !important;
    --bs-accordion-border-color: var(--m1-light-border) !important;
  }

  html[data-theme="light"] .form-control,
  html[data-theme="light"] .form-select,
  html[data-theme="light"] .input-group-text,
  html[data-theme="light"] .search,
  html[data-theme="light"] .form-check-input,
  html[data-theme="light"] textarea,
  html[data-theme="light"] input,
  html[data-theme="light"] select {
    background: #ffffff !important;
    color: var(--m1-light-text) !important;
    border-color: var(--m1-light-border) !important;
  }

  html[data-theme="light"] .form-control::placeholder,
  html[data-theme="light"] .search::placeholder,
  html[data-theme="light"] input::placeholder,
  html[data-theme="light"] textarea::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
  }

  html[data-theme="light"] .table {
    color: var(--m1-light-text) !important;
  }

  html[data-theme="light"] .table thead th,
  html[data-theme="light"] .table tbody td,
  html[data-theme="light"] .table tbody th {
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: inherit !important;
  }

  html[data-theme="light"] .effective-badge,
  html[data-theme="light"] .update-badge,
  html[data-theme="light"] .content-block,
  html[data-theme="light"] .list-item-privacy,
  html[data-theme="light"] .right-item p,
  html[data-theme="light"] .search-input,
  html[data-theme="light"] .accordion-button,
  html[data-theme="light"] .accordion-body,
  html[data-theme="light"] .msg-preview,
  html[data-theme="light"] .crumbs a,
  html[data-theme="light"] .note {
    color: var(--m1-light-text) !important;
  }

  html[data-theme="light"] [style*="rgba(10,10,10"],
  html[data-theme="light"] [style*="rgba(12,16,25"],
  html[data-theme="light"] [style*="rgba(15,15,15"],
  html[data-theme="light"] [style*="rgba(19,19,20"],
  html[data-theme="light"] [style*="rgba(20,20,20"],
  html[data-theme="light"] [style*="linear-gradient(135deg,#0b0b0b"],
  html[data-theme="light"] [style*="linear-gradient(135deg, #0b0b0b"] {
    background: #ffffff !important;
    color: var(--m1-light-text) !important;
    border-color: var(--m1-light-border) !important;
  }

  /* Catch hardcoded white text coming from page-level and inline styles. */
  html[data-theme="light"] [style*="color:#fff"],
  html[data-theme="light"] [style*="color: #fff"],
  html[data-theme="light"] [style*="color:#ffffff"],
  html[data-theme="light"] [style*="color: #ffffff"],
  html[data-theme="light"] [style*="color:white"],
  html[data-theme="light"] [style*="color: white"],
  html[data-theme="light"] [style*="color:rgba(255,255,255"],
  html[data-theme="light"] [style*="color: rgba(255,255,255"] {
    color: var(--m1-light-text) !important;
  }

  html[data-theme="light"] .text-white,
  html[data-theme="light"] .text-light,
  html[data-theme="light"] .link-light,
  html[data-theme="light"] .navbar-dark .navbar-brand,
  html[data-theme="light"] .navbar-dark .navbar-nav .nav-link,
  html[data-theme="light"] .navbar-dark .navbar-text {
    color: var(--m1-light-text) !important;
  }

  html[data-theme="dark"] .navbar,
  html[data-theme="dark"] .navbar-glass,
  html[data-theme="dark"] .topbar,
  html[data-theme="dark"] .header,
  html[data-theme="dark"] .order-head {
    background: rgba(15, 23, 42, 0.94) !important;
    color: var(--m1-dark-text) !important;
    border-color: var(--m1-dark-border) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important;
  }

  html[data-theme="dark"] .sidebar {
    background: #0b1220 !important;
    color: var(--m1-dark-text) !important;
    border-right: 1px solid var(--m1-dark-border) !important;
  }

  html[data-theme="dark"] .sidebar-brand,
  html[data-theme="dark"] .sidebar-link,
  html[data-theme="dark"] .sidebar-link i {
    color: var(--m1-dark-text-soft) !important;
  }

  html[data-theme="dark"] .sidebar-link:hover,
  html[data-theme="dark"] .sidebar-link.active {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #ffffff !important;
    border-left-color: #60a5fa !important;
  }

  html[data-theme="dark"] .glass,
  html[data-theme="dark"] .glass-card,
  html[data-theme="dark"] .card,
  html[data-theme="dark"] .cardx,
  html[data-theme="dark"] .dashboard-card,
  html[data-theme="dark"] .mini-card,
  html[data-theme="dark"] .hero-card,
  html[data-theme="dark"] .category-card,
  html[data-theme="dark"] .product-card,
  html[data-theme="dark"] .filter-card,
  html[data-theme="dark"] .card-glass,
  html[data-theme="dark"] .gallery,
  html[data-theme="dark"] .thumbs,
  html[data-theme="dark"] .yt-card,
  html[data-theme="dark"] .yt-wrap,
  html[data-theme="dark"] .product-media,
  html[data-theme="dark"] .notice-card,
  html[data-theme="dark"] .message-box,
  html[data-theme="dark"] .form-box,
  html[data-theme="dark"] .card-box,
  html[data-theme="dark"] .quick-actions,
  html[data-theme="dark"] .items-box,
  html[data-theme="dark"] .variant-card,
  html[data-theme="dark"] .loc-list,
  html[data-theme="dark"] .search-wrap,
  html[data-theme="dark"] .accordion-item,
  html[data-theme="dark"] .modal-content,
  html[data-theme="dark"] .dropdown-menu,
  html[data-theme="dark"] .table-responsive,
  html[data-theme="dark"] .price-preview,
  html[data-theme="dark"] .yt-preview,
  html[data-theme="dark"] .yt-frame,
  html[data-theme="dark"] .bg-white,
  html[data-theme="dark"] .bg-light {
    background: var(--m1-dark-surface) !important;
    color: var(--m1-dark-text) !important;
    border-color: var(--m1-dark-border) !important;
    box-shadow: var(--m1-dark-shadow) !important;
  }

  html[data-theme="dark"] .text-dark,
  html[data-theme="dark"] .text-muted,
  html[data-theme="dark"] .text-secondary,
  html[data-theme="dark"] .text-body,
  html[data-theme="dark"] .muted,
  html[data-theme="dark"] .sub,
  html[data-theme="dark"] .meta,
  html[data-theme="dark"] .small,
  html[data-theme="dark"] .header-title p {
    color: var(--m1-dark-text-soft) !important;
  }

  html[data-theme="dark"] h1,
  html[data-theme="dark"] h2,
  html[data-theme="dark"] h3,
  html[data-theme="dark"] h4,
  html[data-theme="dark"] h5,
  html[data-theme="dark"] h6,
  html[data-theme="dark"] strong,
  html[data-theme="dark"] .card-value,
  html[data-theme="dark"] .page-title,
  html[data-theme="dark"] .navbar-brand {
    color: var(--m1-dark-text) !important;
  }

  html[data-theme="dark"] .nav-link,
  html[data-theme="dark"] .dropdown-item,
  html[data-theme="dark"] .link-light,
  html[data-theme="dark"] .text-white,
  html[data-theme="dark"] .text-light {
    color: var(--m1-dark-text) !important;
  }

  html[data-theme="dark"] .lang-btn,
  html[data-theme="dark"] .cart-pill,
  html[data-theme="dark"] .pill,
  html[data-theme="dark"] .btn-soft,
  html[data-theme="dark"] .btn-outline-soft,
  html[data-theme="dark"] .btn-outline-light,
  html[data-theme="dark"] .btn-outline-dark,
  html[data-theme="dark"] .btn-outline-secondary,
  html[data-theme="dark"] .back-btn,
  html[data-theme="dark"] .social-link {
    background: rgba(17, 24, 39, 0.9) !important;
    color: var(--m1-dark-text) !important;
    border-color: var(--m1-dark-border) !important;
  }

  html[data-theme="dark"] .btn-soft:hover,
  html[data-theme="dark"] .btn-outline-soft:hover,
  html[data-theme="dark"] .btn-outline-light:hover,
  html[data-theme="dark"] .btn-outline-dark:hover,
  html[data-theme="dark"] .btn-outline-secondary:hover,
  html[data-theme="dark"] .lang-btn:hover,
  html[data-theme="dark"] .cart-pill:hover,
  html[data-theme="dark"] .pill:hover,
  html[data-theme="dark"] .back-btn:hover,
  html[data-theme="dark"] .social-link:hover,
  html[data-theme="dark"] .dropdown-item:hover,
  html[data-theme="dark"] .dropdown-item.active,
  html[data-theme="dark"] .nav-link:hover,
  html[data-theme="dark"] .loc-item:hover,
  html[data-theme="dark"] .qty-btn:hover,
  html[data-theme="dark"] .msg-card:hover {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #ffffff !important;
    border-color: rgba(96, 165, 250, 0.45) !important;
  }

  html[data-theme="dark"] .form-control,
  html[data-theme="dark"] .form-select,
  html[data-theme="dark"] .input-group-text,
  html[data-theme="dark"] .search,
  html[data-theme="dark"] .form-check-input,
  html[data-theme="dark"] textarea,
  html[data-theme="dark"] input,
  html[data-theme="dark"] select {
    background: #0b1220 !important;
    color: var(--m1-dark-text) !important;
    border-color: var(--m1-dark-border) !important;
  }

  html[data-theme="dark"] .form-control::placeholder,
  html[data-theme="dark"] .search::placeholder,
  html[data-theme="dark"] input::placeholder,
  html[data-theme="dark"] textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
  }

  html[data-theme="dark"] .table {
    color: var(--m1-dark-text) !important;
  }

  html[data-theme="dark"] .table thead th,
  html[data-theme="dark"] .table tbody td,
  html[data-theme="dark"] .table tbody th {
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: inherit !important;
    background: transparent !important;
  }

  #m1-theme-toggle {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 2147483647;
    border: 1px solid rgba(0, 0, 0, 0.16);
    background: #ffffff;
    color: #111827;
    min-width: 80px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
    padding: 0 12px;
  }

  #m1-theme-toggle:hover {
    transform: translateY(-1px);
  }

  #m1-theme-toggle:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
  }

  html[data-theme="dark"] #m1-theme-toggle {
    background: #1f2937;
    color: #f9fafb;
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  }

  @media (max-width: 768px) {
    #m1-theme-toggle {
      bottom: 80px;
    }
  }