:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #09111f;
  --surface: #111b2c;
  --surface-soft: #18263c;
  --ink: #edf4ff;
  --muted: #9fb0ca;
  --line: #263653;
  --accent: #5b9cff;
  --accent-dark: #2f7cff;
  --warn: #f6b45b;
  --danger: #ff6b6b;
  --ok: #3bd68f;
  --shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] .store-body,
:root[data-theme="dark"] .all-products-body,
:root[data-theme="dark"] .orders-body,
:root[data-theme="dark"] .guide-body,
:root[data-theme="dark"] .faq-body,
:root[data-theme="dark"] .contact-body {
  background:
    radial-gradient(circle at 18% 0%, rgba(47, 124, 255, 0.2), transparent 32%),
    radial-gradient(circle at 86% 0%, rgba(40, 189, 173, 0.12), transparent 34%),
    linear-gradient(180deg, #08101d 0%, #0b1424 52%, #09111f 100%);
  color: var(--ink);
}

:root[data-theme="dark"] .store-header,
:root[data-theme="dark"] .products-header,
:root[data-theme="dark"] .orders-header,
:root[data-theme="dark"] .guide-header,
:root[data-theme="dark"] .faq-header,
:root[data-theme="dark"] .contact-header,
:root[data-theme="dark"] .site-header {
  border-color: rgba(68, 91, 128, 0.55);
  background: rgba(14, 24, 39, 0.86);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.26);
}

:root[data-theme="dark"] .store-logo {
  box-shadow: 0 10px 22px rgba(47, 124, 255, 0.38);
}

:root[data-theme="dark"] .brand-title,
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] .store-nav,
:root[data-theme="dark"] .products-nav,
:root[data-theme="dark"] .orders-nav,
:root[data-theme="dark"] .guide-nav,
:root[data-theme="dark"] .faq-nav,
:root[data-theme="dark"] .contact-nav {
  color: var(--ink);
}

:root[data-theme="dark"] .brand-subtitle,
:root[data-theme="dark"] p,
:root[data-theme="dark"] small,
:root[data-theme="dark"] .link-button,
:root[data-theme="dark"] .notice-card li,
:root[data-theme="dark"] .catalog-sales,
:root[data-theme="dark"] .order-time,
:root[data-theme="dark"] .help-card dd {
  color: var(--muted);
}

:root[data-theme="dark"] .theme-button {
  color: #dce9ff;
  background: rgba(255, 255, 255, 0.04);
}

:root[data-theme="dark"] .ghost-login,
:root[data-theme="dark"] .secondary-button,
:root[data-theme="dark"] .export-button,
:root[data-theme="dark"] .pagination button,
:root[data-theme="dark"] .orders-pagination button,
:root[data-theme="dark"] .hot-card a,
:root[data-theme="dark"] .contact-cards button,
:root[data-theme="dark"] .solution-band a,
:root[data-theme="dark"] .help-actions button {
  border-color: #304363;
  background: #162237;
  color: #dce9ff;
}

:root[data-theme="dark"] .mf-hero,
:root[data-theme="dark"] .products-hero,
:root[data-theme="dark"] .orders-hero,
:root[data-theme="dark"] .guide-hero,
:root[data-theme="dark"] .faq-hero,
:root[data-theme="dark"] .contact-hero,
:root[data-theme="dark"] .hero-panel,
:root[data-theme="dark"] .store-card,
:root[data-theme="dark"] .product-card,
:root[data-theme="dark"] .admin-panel,
:root[data-theme="dark"] .empty-state,
:root[data-theme="dark"] .filter-card,
:root[data-theme="dark"] .query-card,
:root[data-theme="dark"] .orders-table-card,
:root[data-theme="dark"] .guide-panel,
:root[data-theme="dark"] .side-card,
:root[data-theme="dark"] .guide-help-band,
:root[data-theme="dark"] .guide-footer,
:root[data-theme="dark"] .faq-side-card,
:root[data-theme="dark"] .faq-main-card,
:root[data-theme="dark"] .faq-help-band,
:root[data-theme="dark"] .faq-footer,
:root[data-theme="dark"] .side-panel,
:root[data-theme="dark"] .service-time,
:root[data-theme="dark"] .warm-tip,
:root[data-theme="dark"] .chat-panel,
:root[data-theme="dark"] .contact-cards article,
:root[data-theme="dark"] .solution-band,
:root[data-theme="dark"] .contact-footer {
  border-color: rgba(68, 91, 128, 0.62);
  background: rgba(15, 25, 42, 0.92);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.26);
}

:root[data-theme="dark"] .mf-hero::before,
:root[data-theme="dark"] .products-hero::before,
:root[data-theme="dark"] .orders-hero::before,
:root[data-theme="dark"] .guide-hero::before,
:root[data-theme="dark"] .faq-hero::before,
:root[data-theme="dark"] .contact-hero::before {
  opacity: 0.52;
}

:root[data-theme="dark"] .hero-panel,
:root[data-theme="dark"] .hero-badges,
:root[data-theme="dark"] .order-badges,
:root[data-theme="dark"] .hot-card,
:root[data-theme="dark"] .safe-card,
:root[data-theme="dark"] .auto-card,
:root[data-theme="dark"] .support-card,
:root[data-theme="dark"] .message-card {
  background: rgba(20, 33, 54, 0.9);
}

:root[data-theme="dark"] .category-tabs button,
:root[data-theme="dark"] .sort-row button,
:root[data-theme="dark"] .category-item,
:root[data-theme="dark"] .nav-card a,
:root[data-theme="dark"] .category-link,
:root[data-theme="dark"] .tab-button,
:root[data-theme="dark"] .faq-tabs button,
:root[data-theme="dark"] .reset-button {
  background: transparent;
  color: #a9bad4;
}

:root[data-theme="dark"] .category-tabs button.active,
:root[data-theme="dark"] .sort-row button.active,
:root[data-theme="dark"] .category-item.active,
:root[data-theme="dark"] .nav-card a.active,
:root[data-theme="dark"] .category-link.active,
:root[data-theme="dark"] .tab-button.active,
:root[data-theme="dark"] .faq-tabs button.active {
  background: rgba(47, 124, 255, 0.22);
  color: #7db0ff;
}

:root[data-theme="dark"] .shop-product-row,
:root[data-theme="dark"] .catalog-card,
:root[data-theme="dark"] .admin-item,
:root[data-theme="dark"] .code-preview-grid article,
:root[data-theme="dark"] .mini-order-card,
:root[data-theme="dark"] .success-card,
:root[data-theme="dark"] .support-option,
:root[data-theme="dark"] .chat-box,
:root[data-theme="dark"] .hot-faq,
:root[data-theme="dark"] .contact-methods button {
  border-color: #2a3b59;
  background: rgba(18, 30, 49, 0.95);
}

:root[data-theme="dark"] .contact-methods button.active {
  border-color: #5b9cff;
}

:root[data-theme="dark"] .product-title-line h3,
:root[data-theme="dark"] .shop-product-info h3,
:root[data-theme="dark"] .catalog-info h3,
:root[data-theme="dark"] .product-mini strong,
:root[data-theme="dark"] .order-code strong,
:root[data-theme="dark"] .faq-question,
:root[data-theme="dark"] .contact-methods strong,
:root[data-theme="dark"] .help-metric strong,
:root[data-theme="dark"] .service-metrics strong,
:root[data-theme="dark"] .contact-cards h3,
:root[data-theme="dark"] .contact-cards strong {
  color: var(--ink);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .date-field div,
:root[data-theme="dark"] .chat-input,
:root[data-theme="dark"] dialog {
  border-color: #2a3b59;
  background: #101b2d;
  color: var(--ink);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: #7183a0;
}

:root[data-theme="dark"] .orders-table th {
  background: rgba(22, 34, 55, 0.95);
  color: #a9bad4;
}

:root[data-theme="dark"] .orders-table td,
:root[data-theme="dark"] th,
:root[data-theme="dark"] td,
:root[data-theme="dark"] .orders-tabs,
:root[data-theme="dark"] .faq-tabs,
:root[data-theme="dark"] .faq-group,
:root[data-theme="dark"] .faq-question,
:root[data-theme="dark"] .online-service {
  border-color: #263653;
}

:root[data-theme="dark"] .message-bubble {
  background: #18263c;
  color: var(--ink);
}

:root[data-theme="dark"] .tip-box,
:root[data-theme="dark"] .service-time,
:root[data-theme="dark"] .solution-band {
  background: linear-gradient(135deg, rgba(24, 38, 60, 0.95), rgba(15, 25, 42, 0.95));
}

:root[data-theme="dark"] .notice-orange,
:root[data-theme="dark"] .notice-blue,
:root[data-theme="dark"] .notice-green,
:root[data-theme="dark"] .notice-purple {
  background: rgba(24, 38, 60, 0.95);
}

:root[data-theme="dark"] code {
  background: #1c2c46;
  color: #cfe0ff;
}

:root[data-theme="dark"] dialog::backdrop {
  background: rgba(0, 0, 0, 0.66);
}