:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --text: #111318;
  --text-muted: #5b6472;
  --border: #e5e8ee;
  --divider: #d7dbe3;
  --primary: #111318;
  --primary-hover: #2a2f3a;
  --primary-contrast: #ffffff;
  --accent: #f59e0b;
  --accent-hover: #d97706;
  --accent-contrast: #111318;
  --link: #111318;
  --link-hover: #f59e0b;
  --danger: #ef4444;
  --success: #16a34a;
  --warning: #f59e0b;
  --info: #2563eb;
  --shadow: 0 8px 24px rgba(15, 23, 42, 0.08);

  /* Existing palette mappings */
  --deep-blue: var(--bg);
  --deep-purple: var(--surface-2);
  --cyan: var(--accent);
  --neon-blue: var(--accent-hover);
  --purple: #fbbf24;
  --pink: #f59e0b;
  --neon-pink: #f5b84a;
  --red-light: #ef4444;
  --white: var(--text);
  --light-gray: var(--text-muted);
  --dark-gray: var(--text);
  --glass-bg: rgba(255, 255, 255, 0.92);
  --glass-border: var(--border);
  --glass-shadow: rgba(17, 19, 24, 0.08);
  --light-slate: var(--text-muted);
  --lightest-slate: #8b94a5;

  /* Inline variables referenced in templates */
  --bg-soft: var(--bg);
  --text-strong: var(--text);
  --mint-600: var(--accent);
  --primary-color: var(--accent);
}

body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

#particles-js,
.particles-js-canvas-el,
#canvas,
canvas {
  display: none !important;
}

a {
  color: var(--link);
}

a:hover,
a:focus {
  color: var(--link-hover);
}

::selection {
  background: rgba(245, 158, 11, 0.18);
  color: var(--text);
}

/* Surfaces */
.glass-card,
.product-card,
.article-card,
.faq-item,
.glass-tutorial-container,
.platform-showcase,
.filter-bar,
.latest-news-row,
.selector-container,
.mobile-popup-container {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text);
}

.glass-footer,
.footer,
footer {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text);
}

.glass-nav,
.glass-nav.scrolled {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* Header / nav */
.logo,
.logo .highlight {
  color: var(--primary) !important;
}

.nav-links a,
.nav-links_m a,
.nav-links_m .label,
.language-currency-container .text {
  color: var(--text) !important;
}

.nav-links a:hover,
.nav-links a:focus,
.nav-links a.active,
.nav-links_m a:hover,
.nav-links_m a:focus,
.nav-links_m a.active {
  color: var(--accent) !important;
}

.dropdown-menu,
.selector-container {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

.dropdown-menu a {
  color: var(--text) !important;
}

.dropdown-menu a:hover {
  color: var(--accent) !important;
  background: var(--surface-2) !important;
}

.menu-toggle {
  color: var(--primary) !important;
}

@media (max-width: 768px) {
  .nav-links,
  .nav-links_m {
    background: var(--surface) !important;
    border-left: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
  }
}

/* Typography blocks */
.section-header h2,
.page-header h1,
.about-content h3,
.faq-question h3,
.article-title h2,
.product-name,
.product-info h3,
.latest-news-subtitle {
  color: var(--text) !important;
}

.section-header p,
.page-header p,
.about-content p,
.faq-answer p,
.article-excerpt,
.product-views,
.product-views span,
.latest-news-desc,
.latest-news-row-date {
  color: var(--text-muted) !important;
}

/* Hero */
.hero::before {
  background: radial-gradient(circle at 50% 30%, rgba(245, 158, 11, 0.12) 0%, transparent 70%) !important;
}

.hero .subheading,
.hero .subheading::before,
.hero .subheading::after {
  color: var(--accent) !important;
  background: var(--accent) !important;
}

.hero h1,
.hero h1 .highlight {
  color: var(--primary) !important;
  background: none !important;
  -webkit-text-fill-color: var(--primary) !important;
}

.hero h1 .highlight::after {
  background: var(--accent) !important;
}

.hero h2 span,
.hero p {
  color: var(--text-muted) !important;
}

/* Buttons */
.glow-button,
.login-button,
.login-item a,
.buy-btn,
.add-to-cart-btn,
.tutorial-btn.primary-btn,
.tutorial-btn.primary-btn:hover {
  background: var(--primary) !important;
  color: var(--primary-contrast) !important;
  border: 1px solid var(--primary) !important;
  box-shadow: var(--shadow) !important;
}

.glow-button:hover,
.login-button:hover,
.login-item a:hover,
.buy-btn:hover,
.add-to-cart-btn:hover,
.tutorial-btn.primary-btn:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: var(--primary-contrast) !important;
  box-shadow: 0 10px 26px rgba(17, 19, 24, 0.18) !important;
}

.outline-button,
.view-all-btn,
.read-more,
.tutorial-btn.secondary-btn,
.filter-btn,
.sort-btn,
.search-tag,
.platform-item {
  background: var(--surface) !important;
  color: var(--primary) !important;
  border: 1px solid var(--border) !important;
}

.outline-button:hover,
.view-all-btn:hover,
.read-more:hover,
.tutorial-btn.secondary-btn:hover,
.filter-btn:hover,
.filter-btn.active,
.sort-btn:hover,
.sort-btn.active,
.search-tag:hover,
.platform-item:hover {
  background: var(--surface-2) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: var(--shadow) !important;
}

.search-btn,
.carousel-arrow {
  background: var(--primary) !important;
  color: var(--primary-contrast) !important;
  border: 1px solid var(--primary) !important;
  box-shadow: var(--shadow) !important;
}

.search-btn i,
.carousel-arrow i {
  color: var(--primary-contrast) !important;
}

.search-btn:hover,
.carousel-arrow:not(.disabled):hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

/* Forms */
input,
select,
textarea,
.search-bar input {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
}

input:focus,
select:focus,
textarea:focus,
.search-bar input:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25) !important;
}

/* Tabs / badges / chips */
.badge,
.product-badge,
.article-category,
.section-tag,
.latest-news-badge,
.product-views,
.platform-page .page-header h1 {
  background: rgba(245, 158, 11, 0.12) !important;
  color: var(--accent) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

.product-badge.sale {
  background: rgba(239, 68, 68, 0.16) !important;
  color: var(--danger) !important;
}

.product-badge.new {
  background: rgba(37, 99, 235, 0.16) !important;
  color: var(--info) !important;
}

.carousel-dot {
  background: rgba(17, 19, 24, 0.15) !important;
}

.carousel-dot.active {
  background: var(--accent) !important;
}

/* Pagination */
.pagination a,
.pagination span {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.pagination a:hover,
.pagination span.active,
.pagination a.active,
.pagination span.current,
.pagination a.current {
  background: var(--surface-2) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Toast / modal */
.toast,
.modal,
.modal-content,
.dialog,
.popup,
.alert {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

.alert-success {
  border-color: var(--success) !important;
  color: var(--success) !important;
}

.alert-danger,
.alert-error {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}

.alert-warning {
  border-color: var(--warning) !important;
  color: var(--warning) !important;
}

.alert-info {
  border-color: var(--info) !important;
  color: var(--info) !important;
}

/* Misc */
.product-price,
.stat-number,
.hero .subheading,
.section-tag,
.article-meta i,
.product-views i,
.faq-icon {
  color: var(--accent) !important;
}

.product-card:hover,
.article-card:hover {
  box-shadow: 0 12px 28px rgba(17, 19, 24, 0.12) !important;
}

.product-image,
.product-image img {
  background: var(--surface-2) !important;
}

.footer-content,
.copyright-text,
.copyright-text a {
  color: var(--text-muted) !important;
}

.copyright-text a:hover {
  color: var(--accent) !important;
}

/* Detail / article pages */
.breadcrumb,
.product-gallery,
.product-info,
.product-info-section,
.qc-photos,
.product-list,
.article-detail,
.article-meta-detail span,
.nav-article,
.latest-news-row {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.breadcrumb a {
  color: var(--text-muted) !important;
}

.breadcrumb a:hover,
.breadcrumb span {
  color: var(--accent) !important;
  background: rgba(245, 158, 11, 0.12) !important;
}

.product-description,
.article-content-detail,
.article-excerpt {
  color: var(--text-muted) !important;
}

.product-card .product-info,
.product-card .product-views,
.product-card .product-image,
.thumbnail,
.main-image,
.qc-photo,
.product-card::before {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

.product-card .product-name,
.product-title,
.article-title-detail,
.section-title {
  color: var(--text) !important;
}

.product-card .buy-btn,
.buy-now-btn,
.weidian-btn,
.how-to-buy-btn,
.favorite-btn,
.copy-link-btn,
.diyclick {
  background: var(--surface) !important;
  color: var(--primary) !important;
  border: 1px solid var(--border) !important;
}

.product-card .buy-btn:hover,
.buy-now-btn:hover,
.weidian-btn:hover,
.how-to-buy-btn:hover,
.favorite-btn:hover,
.copy-link-btn:hover,
.diyclick:hover {
  background: var(--surface-2) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.product-views,
.product-views i,
.product-price,
.stat-number {
  color: var(--accent) !important;
}

.thumbnail.active,
.thumbnail:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25) !important;
}

.slider-arrow,
.close-modal,
.close-share {
  background: var(--surface) !important;
  color: var(--primary) !important;
  border: 1px solid var(--border) !important;
}

.slider-arrow:hover,
.close-modal:hover,
.close-share:hover {
  background: var(--surface-2) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.platform-modal,
.social-share-dropdown {
  background: rgba(17, 19, 24, 0.55) !important;
}

.platform-modal-content,
.social-share-content {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

.platform-modal h3,
.social-share-title {
  color: var(--text) !important;
  text-shadow: none !important;
}

.modal-note,
.social-share-note {
  color: var(--text-muted) !important;
}

.platform-option,
.social-share-item {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.platform-option:hover,
.social-share-item:hover {
  background: var(--surface-2) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.platform-option span,
.social-share-item span {
  color: var(--text) !important;
}

.social-share-item:hover span {
  color: var(--accent) !important;
}

.copy-success,
.favorite-notification {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

.favorite-notification i {
  color: var(--success) !important;
}

.favorite-notification[data-type="error"] i {
  color: var(--danger) !important;
}

.favorite-btn.on::before {
  color: var(--danger) !important;
}

/* System pay page overrides */
.ey-container,
.el-main,
.pay-item,
.pay-item-select,
.el-form-item,
.el-form-item__content {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.pay-item-select {
  border-color: var(--accent) !important;
}

.pay-item.pay-item-select span {
  border-bottom-color: var(--accent) !important;
}

.layui-btn,
button.layui-btn,
.button-wrapper .layui-btn {
  background: var(--primary) !important;
  color: var(--primary-contrast) !important;
  border: 1px solid var(--primary) !important;
}

.layui-btn:hover,
button.layui-btn:hover,
.button-wrapper .layui-btn:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}