html[data-theme] *,
html[data-theme] *::before,
html[data-theme] *::after {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.index-banner {
  background-color: var(--color-bg-dark);
}

.banner-item {
  background-color: var(--color-bg-dark);
}

.banner-overlay {
  background: var(--gradient-overlay);
}

.banner-title {
  color: var(--color-text-inverse);
  text-shadow: var(--shadow-text-lg);
}

.banner-subtitle {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: var(--shadow-text-sm);
}

.index-banner .btn-primary {
  color: var(--color-text-inverse);
  background: var(--gradient-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-primary);
}

.index-banner .btn-primary:hover {
  background: var(--gradient-primary-reverse);
  box-shadow: 0 12px 28px rgba(var(--color-primary-rgb), 0.5);
}

.swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.3);
}

.swiper-pagination-bullet-active {
  background: var(--color-text-inverse);
  box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.8);
}
.hero-title {
  color: var(--color-text-inverse);
  text-shadow: var(--shadow-text-md);
}

.hero-subtitle {
  color: rgba(255, 255, 255, 0.96);
  text-shadow: var(--shadow-text-sm);
}

.top-bar {
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  color: var(--color-text-inverse);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.top-bar::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.top-bar::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
}

.top-bar-text {
  color: rgba(255, 255, 255, 0.95);
}

.top-bar-link {
  color: rgba(255, 255, 255, 0.95);
}

.top-bar-link:hover {
  color: rgba(255, 255, 255, 1);
}

.top-bar-text i,
.top-bar-link i {
  color: rgba(255, 255, 255, 0.95);
}

.top-bar-divider {
  color: rgba(255, 255, 255, 0.3);
}

.site-header {
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-sm);
}

.site-header::before {
  background: transparent;
}

.site-header::after {
  background: linear-gradient(90deg, transparent, rgba(var(--color-primary-rgb), 0.05), transparent);
}

.site-header.scrolled {
  box-shadow: var(--shadow-md);
}

.logo-image {
  box-shadow: 0 2px 10px rgba(var(--color-primary-rgb), 0.15);
}

.logo-title {
  color: var(--color-text-primary);
}

.logo-subtitle {
  color: var(--color-text-quaternary);
}

.site-header .btn {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
}

.site-header .btn:hover {
  background: var(--gradient-primary-reverse);
  box-shadow: var(--shadow-primary);
}

.site-header .btn i {
  color: var(--color-text-inverse);
}

.nav-link {
  color: var(--color-text-secondary);
}

.nav-link::before {
  background: var(--gradient-primary-90);
}

.nav-link::after {
  background: var(--color-primary);
}

.nav-item:hover .nav-link,
.nav-item.active .nav-link {
  color: var(--color-accent-active);
}

.nav-arrow {
  color: var(--color-text-muted);
}

.nav-item:hover .nav-arrow {
  color: var(--color-primary);
}

.sub-nav {
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border);
}

.sub-nav::before {
  background: var(--color-bg-primary);
  border-color: var(--color-border);
}

.sub-nav::after {
  background: transparent;
}

.sub-nav-link {
  color: var(--color-text-tertiary);
}

.sub-nav-link::before {
  background: var(--color-primary);
}

.sub-nav-link::after {
  background: rgba(var(--color-primary-rgb), 0.05);
}

.sub-nav-link:hover {
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.05);
}

.sub-nav-link i {
  color: var(--color-text-muted);
}

.sub-nav-link:hover i {
  color: var(--color-primary);
}

.search-btn {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
  border: none;
}

.search-btn::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.search-btn::after {
  background: rgba(255, 255, 255, 0.1);
}

.search-btn i {
  color: var(--color-text-inverse);
}

.search-btn:hover {
  background: var(--gradient-primary-reverse);
  box-shadow: var(--shadow-primary);
}

.search-panel {
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-xl);
}

.search-panel::before {
  background: var(--color-bg-primary);
}

.search-input-wrapper {
  background: var(--color-bg-primary);
  border: 2px solid var(--color-border);
}

.search-input-wrapper::before {
  background: transparent;
}

.search-input-wrapper:focus-within {
  background: var(--color-bg-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.search-input {
  color: var(--color-text-primary);
  background: transparent;
}

.search-input::placeholder {
  color: var(--color-text-muted);
}

.search-submit {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
  border: none;
}

.search-submit::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.search-submit i {
  color: var(--color-text-inverse);
}

.search-submit:hover {
  background: var(--gradient-primary-reverse);
}

.search-close {
  background: var(--color-bg-tertiary);
  color: var(--color-text-quaternary);
}

.search-close::before {
  background: transparent;
}

.search-close i {
  color: inherit;
}

.search-close:hover {
  background: var(--color-danger);
  color: var(--color-text-inverse);
}

.mobile-menu-btn,
.hamburger-btn,
.menu-toggle,
.navbar-toggler {
  background: transparent;
  border-color: transparent;
}

.mobile-menu-btn::before,
.hamburger-btn::before,
.menu-toggle::before {
  background: transparent;
}

.mobile-menu-btn::after,
.hamburger-btn::after,
.menu-toggle::after {
  background: transparent;
}

.menu-line,
.hamburger-line,
.navbar-toggler-icon,
.menu-toggle span {
  background: var(--color-text-secondary);
}

.menu-line::before,
.hamburger-line::before {
  background: var(--color-text-secondary);
}

.menu-line::after,
.hamburger-line::after {
  background: var(--color-text-secondary);
}

.mobile-menu-btn:hover .menu-line,
.hamburger-btn:hover .hamburger-line,
.menu-toggle:hover span {
  background: var(--color-primary);
}

.mobile-menu-btn:hover .menu-line::before,
.mobile-menu-btn:hover .menu-line::after {
  background: var(--color-primary);
}

.mobile-menu-btn.active .menu-line,
.hamburger-btn.active .hamburger-line,
.menu-toggle.active span {
  background: var(--color-primary);
}

.mobile-menu-btn.active .menu-line::before,
.mobile-menu-btn.active .menu-line::after {
  background: var(--color-primary);
}

.mobile-nav-overlay,
.menu-overlay,
.nav-overlay {
  background: var(--color-bg-overlay);
}

.mobile-nav,
.mobile-menu,
.offcanvas-menu {
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-2xl);
}

.mobile-nav::before,
.mobile-menu::before {
  background: transparent;
}

.mobile-nav-header,
.mobile-menu-header {
  background: var(--gradient-dark);
  box-shadow: var(--shadow-base);
}

.mobile-nav-header::before,
.mobile-menu-header::before {
  background: linear-gradient(90deg, transparent, rgba(var(--color-primary-rgb), 0.3), transparent);
}

.mobile-nav-header::after,
.mobile-menu-header::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
}

.mobile-logo-text span,
.mobile-nav-logo span,
.mobile-menu-logo span {
  color: var(--color-text-inverse);
}

.mobile-nav-logo img,
.mobile-menu-logo img {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.mobile-nav-close,
.mobile-menu-close,
.offcanvas-close {
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-text-inverse);
  border-color: transparent;
}

.mobile-nav-close::before,
.mobile-menu-close::before {
  background: transparent;
}

.mobile-nav-close::after,
.mobile-menu-close::after {
  background: transparent;
}

.mobile-nav-close i,
.mobile-menu-close i {
  color: var(--color-text-inverse);
}

.mobile-nav-close:hover,
.mobile-menu-close:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

.mobile-nav-close:active,
.mobile-menu-close:active {
  background: rgba(255, 255, 255, 0.35);
}

.mobile-nav-body,
.mobile-menu-body {
  background: var(--color-bg-primary);
}

.mobile-nav-body::before,
.mobile-menu-body::before {
  background: transparent;
}

.mobile-nav-body::-webkit-scrollbar-track,
.mobile-menu-body::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
}

.mobile-nav-body::-webkit-scrollbar-thumb,
.mobile-menu-body::-webkit-scrollbar-thumb {
  background: var(--gradient-dark);
}

.mobile-nav-item,
.mobile-menu-item {
  border-bottom-color: var(--color-border-light);
}

.mobile-nav-item::before,
.mobile-menu-item::before {
  background: transparent;
}

.mobile-nav-link,
.mobile-menu-link {
  color: var(--color-text-secondary);
}

.mobile-nav-link::before,
.mobile-menu-link::before {
  background: var(--gradient-dark);
}

.mobile-nav-link::after,
.mobile-menu-link::after {
  background: transparent;
}

.mobile-nav-link i,
.mobile-menu-link i {
  color: var(--color-text-muted);
}

.mobile-nav-link:hover,
.mobile-menu-link:hover {
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.05);
}

.mobile-nav-link:hover i,
.mobile-menu-link:hover i {
  color: var(--color-primary);
}

.mobile-nav-link:hover::before,
.mobile-menu-link:hover::before {
  background: var(--gradient-primary);
}

.mobile-nav-item.active > .mobile-nav-link,
.mobile-menu-item.active > .mobile-menu-link {
  color: var(--color-text-primary);
  background: linear-gradient(90deg, rgba(var(--color-primary-rgb), 0.06) 0%, transparent 100%);
}

.mobile-nav-item.active > .mobile-nav-link::before,
.mobile-menu-item.active > .mobile-menu-link::before {
  background: var(--gradient-primary);
}

.mobile-nav-item.active > .mobile-nav-link i,
.mobile-menu-item.active > .mobile-menu-link i {
  color: var(--color-primary);
}

.mobile-nav-expand,
.mobile-menu-expand,
.mobile-nav-arrow {
  background: var(--color-bg-tertiary);
  color: var(--color-text-quaternary);
}

.mobile-nav-expand::before,
.mobile-menu-expand::before {
  background: transparent;
}

.mobile-nav-expand i,
.mobile-menu-expand i {
  color: inherit;
}

.mobile-nav-expand:hover,
.mobile-menu-expand:hover {
  background: var(--color-bg-active);
  color: var(--color-text-secondary);
}

.mobile-nav-item.expanded .mobile-nav-expand,
.mobile-menu-item.expanded .mobile-menu-expand {
  color: var(--color-text-inverse);
  background: var(--gradient-dark);
}

.mobile-nav-item.expanded .mobile-nav-expand i,
.mobile-menu-item.expanded .mobile-menu-expand i {
  color: var(--color-text-inverse);
}

.mobile-sub-nav,
.mobile-submenu {
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-border-light) 100%);
}

.mobile-sub-nav::before,
.mobile-submenu::before {
  background: transparent;
}

.mobile-sub-nav-link,
.mobile-submenu-link {
  color: var(--color-text-tertiary);
}

.mobile-sub-nav-link::before,
.mobile-submenu-link::before {
  background: var(--color-bg-dark-secondary);
}

.mobile-sub-nav-link i,
.mobile-submenu-link i {
  color: var(--color-text-muted);
}

.mobile-sub-nav-link:active,
.mobile-sub-nav-link:hover,
.mobile-submenu-link:active,
.mobile-submenu-link:hover {
  color: var(--color-text-primary);
}

.mobile-sub-nav-link:active::before,
.mobile-sub-nav-link:hover::before,
.mobile-submenu-link:active::before,
.mobile-submenu-link:hover::before {
  background: var(--color-primary);
}

.mobile-sub-nav-link:hover i,
.mobile-submenu-link:hover i {
  color: var(--color-primary);
}

.mobile-nav-footer,
.mobile-menu-footer {
  background: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-border-light) 100%);
}

.mobile-nav-footer::before,
.mobile-menu-footer::before {
  background: linear-gradient(90deg, transparent, rgba(var(--color-primary-rgb), 0.1), transparent);
}

.mobile-contact-item,
.mobile-footer-btn {
  background: var(--gradient-dark);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
}

.mobile-contact-item::before,
.mobile-footer-btn::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.mobile-contact-item i,
.mobile-footer-btn i {
  color: var(--color-text-inverse);
}

.mobile-contact-item:active,
.mobile-contact-item:hover,
.mobile-footer-btn:active,
.mobile-footer-btn:hover {
  background: linear-gradient(135deg, var(--color-bg-dark-secondary), var(--color-bg-dark));
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-lg);
}

.mobile-nav .btn-primary,
.mobile-menu .btn-primary,
.mobile-nav-footer .btn,
.mobile-menu-footer .btn {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
  border: none;
}

.mobile-nav .btn-primary::before,
.mobile-menu .btn-primary::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.mobile-nav .btn-primary i,
.mobile-menu .btn-primary i {
  color: var(--color-text-inverse);
}

.mobile-nav .btn-primary:hover,
.mobile-menu .btn-primary:hover {
  background: var(--gradient-primary-reverse);
  box-shadow: var(--shadow-primary);
}

.mobile-search,
.mobile-nav-search {
  background: var(--color-bg-secondary);
}

.mobile-search input,
.mobile-nav-search input {
  background: var(--color-bg-primary);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.mobile-search input::placeholder,
.mobile-nav-search input::placeholder {
  color: var(--color-text-muted);
}

.mobile-search input:focus,
.mobile-nav-search input:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.mobile-search button,
.mobile-nav-search button {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
}

.mobile-search button i,
.mobile-nav-search button i {
  color: var(--color-text-inverse);
}

.title-icon,
.title-icon[aria-hidden="true"],
span.title-icon,
i.title-icon {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
}

.title-icon::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.title-icon::after {
  background: rgba(255, 255, 255, 0.1);
}

.title-icon i {
  color: var(--color-text-inverse);
}

.section-title .title-icon,
.card-title .title-icon,
.block-title .title-icon {
  background: var(--gradient-accent);
}

.section-title .title-icon i,
.card-title .title-icon i,
.block-title .title-icon i {
  color: var(--color-text-inverse);
}

[aria-hidden="true"].icon,
[aria-hidden="true"].decor-icon,
.decor-icon[aria-hidden="true"] {
  color: var(--color-primary);
}

[aria-hidden="true"].icon-primary {
  color: var(--color-primary);
}

[aria-hidden="true"].icon-secondary {
  color: var(--color-secondary);
}

[aria-hidden="true"].icon-accent {
  color: var(--color-accent);
}

.icon-wrapper,
.icon-bg,
.icon-circle,
.icon-box {
  background: rgba(var(--color-primary-rgb), 0.1);
}

.icon-wrapper::before,
.icon-bg::before,
.icon-circle::before {
  background: transparent;
}

.icon-wrapper i,
.icon-bg i,
.icon-circle i,
.icon-box i {
  color: var(--color-primary);
}

.icon-wrapper-gradient,
.icon-bg-gradient {
  background: var(--gradient-primary);
}

.icon-wrapper-gradient i,
.icon-bg-gradient i {
  color: var(--color-text-inverse);
}

.list-icon,
.bullet-icon,
.check-icon {
  color: var(--color-primary);
}

.list-icon::before,
.bullet-icon::before {
  background: var(--color-primary);
}

.step-icon,
.process-icon,
.timeline-icon {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
}

.step-icon::before,
.process-icon::before,
.timeline-icon::before {
  background: rgba(var(--color-primary-rgb), 0.2);
}

.step-icon::after,
.process-icon::after,
.timeline-icon::after {
  background: var(--color-primary);
}

.step-icon i,
.process-icon i,
.timeline-icon i {
  color: var(--color-text-inverse);
}

.number-icon,
.step-number {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
}

.number-icon::before,
.step-number::before {
  background: transparent;
}

.back-to-top,
.backtotop,
.scroll-to-top,
.to-top,
#back-to-top,
#backToTop,
.btn-back-top {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-lg);
  border: none;
}

.back-to-top::before,
.backtotop::before,
.scroll-to-top::before,
#back-to-top::before {
  background: rgba(var(--color-primary-rgb), 0.3);
}

.back-to-top::after,
.backtotop::after,
.scroll-to-top::after,
#back-to-top::after {
  background: rgba(255, 255, 255, 0.2);
}

.back-to-top i,
.backtotop i,
.scroll-to-top i,
.to-top i,
#back-to-top i,
#backToTop i {
  color: var(--color-text-inverse);
}

.back-to-top:hover,
.backtotop:hover,
.scroll-to-top:hover,
.to-top:hover,
#back-to-top:hover,
#backToTop:hover {
  background: var(--gradient-primary-reverse);
  box-shadow: var(--shadow-primary-lg);
  transform: translateY(-3px);
}

.back-to-top:active,
.backtotop:active,
.scroll-to-top:active,
#back-to-top:active {
  transform: translateY(-1px);
}

.back-to-top.show,
.backtotop.show,
.scroll-to-top.visible,
#back-to-top.show {
  background: var(--gradient-primary);
  box-shadow: var(--shadow-lg);
}

.back-to-top-outline,
.backtotop-outline {
  background: var(--color-bg-primary);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.back-to-top-outline i,
.backtotop-outline i {
  color: var(--color-primary);
}

.back-to-top-outline:hover,
.backtotop-outline:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.back-to-top-outline:hover i,
.backtotop-outline:hover i {
  color: var(--color-text-inverse);
}

.card,
.info-card,
.product-card,
.comparison-card,
.advantage-card,
.company-info-card,
.qrcode-card,
.content-nav-block,
.compliance-item {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-base);
}

.card::before,
.info-card::before,
.product-card::before {
  background: linear-gradient(135deg, transparent, rgba(var(--color-primary-rgb), 0.02), transparent);
}

.card::after,
.info-card::after {
  background: transparent;
}

.card:hover,
.info-card:hover,
.product-card:hover,
.advantage-card:hover,
.content-nav-block:hover,
.compliance-item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.card-title {
  color: var(--color-text-primary);
}

.card-badge {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
}

.card-description,
.card-text {
  color: var(--color-text-secondary);
}

.card i,
.card .icon {
  color: var(--color-primary);
}

.card .icon-wrapper,
.card .icon-bg {
  background: rgba(var(--color-primary-rgb), 0.1);
}

.company-info-card .info-item {
  border-bottom-color: var(--color-border);
}

.company-info-card .info-label {
  color: var(--color-text-secondary);
}

.company-info-card .info-value {
  color: var(--color-text-primary);
}

.qrcode-card .qrcode-title {
  color: var(--color-text-primary);
}

.card .btn,
.card .btn-primary {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
}

.card .btn:hover,
.card .btn-primary:hover {
  background: var(--gradient-primary-reverse);
  box-shadow: var(--shadow-primary);
}

.form-control,
.form-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
textarea,
select {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-secondary);
  color: var(--color-text-primary);
}

.form-control::before,
input::before {
  background: transparent;
}

.form-control:focus,
.form-input:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--color-text-placeholder);
}

.form-label {
  color: var(--color-text-primary);
}

.label-required {
  color: var(--color-danger);
}

.code-img {
  border-color: var(--color-border-secondary);
}

.code-img:hover {
  border-color: var(--color-primary);
}

.form-group i,
.input-group i {
  color: var(--color-text-muted);
}

.form-group:focus-within i,
.input-group:focus-within i {
  color: var(--color-primary);
}

.badge {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
}

.badge::before {
  background: transparent;
}

.badge-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.badge-secondary {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
}

.badge-success {
  background: var(--color-success-light);
  color: var(--color-success);
}

.badge-warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.badge-danger {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.badge-info {
  background: var(--color-info-light);
  color: var(--color-info);
}

.badge i {
  color: inherit;
}

.tag {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.tag::before {
  background: var(--color-primary);
}

.tag:hover {
  background: var(--color-bg-primary);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.tag i {
  color: inherit;
}

.alert {
  background: rgba(var(--color-primary-rgb), 0.05);
  border-left: 4px solid var(--color-primary);
  color: var(--color-text-primary);
}

.alert::before {
  background: transparent;
}

.alert i {
  color: var(--color-primary);
}

.alert-success {
  background: var(--color-success-light);
  border-left-color: var(--color-success);
}

.alert-success::before {
  background: transparent;
}

.alert-success i {
  color: var(--color-success);
}

.alert-warning {
  background: var(--color-warning-light);
  border-left-color: var(--color-warning);
}

.alert-warning i {
  color: var(--color-warning);
}

.alert-danger {
  background: var(--color-danger-light);
  border-left-color: var(--color-danger);
}

.alert-danger i {
  color: var(--color-danger);
}

.alert-info {
  background: var(--color-info-light);
  border-left-color: var(--color-info);
}

.alert-info i {
  color: var(--color-info);
}

.pagination .page-link {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.pagination .page-link::before {
  background: transparent;
}

.pagination .page-link:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pagination .page-item.active .page-link {
  background: var(--gradient-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.pagination .page-item.disabled .page-link {
  background: var(--color-bg-tertiary);
  color: var(--color-text-disabled);
}

.pagination .page-link i {
  color: inherit;
}

.breadcrumb {
  background: transparent;
}

.breadcrumb-item {
  color: var(--color-text-secondary);
}

.breadcrumb-item.active {
  color: var(--color-text-primary);
}

.breadcrumb-item a {
  color: var(--color-primary);
}

.breadcrumb-item a:hover {
  color: var(--color-accent);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-text-muted);
}

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

a:hover {
  color: var(--color-accent);
}

a i {
  color: inherit;
}

.site-footer {
  background: var(--gradient-dark-vertical);
  color: var(--color-text-inverse);
}

.site-footer::before {
  background: linear-gradient(90deg, transparent, var(--color-secondary), transparent);
}

.site-footer::after {
  background: transparent;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.85);
}

.site-footer a:hover {
  color: var(--color-secondary);
}

.site-footer i {
  color: rgba(255, 255, 255, 0.7);
}

.site-footer a:hover i {
  color: var(--color-secondary);
}

.footer-section-title {
  color: var(--color-text-inverse);
  border-bottom-color: var(--color-primary);
}

.footer-section-title::before {
  background: var(--color-primary);
}

.footer-section-title::after {
  background: linear-gradient(90deg, var(--color-secondary), transparent);
}

.footer-section-title:hover {
  color: var(--color-secondary);
}

.footer-links-section .links-title::before {
  background: var(--gradient-primary);
}

.footer-links-section .link-item {
  color: rgba(255, 255, 255, 0.7);
}

.footer-links-section .link-item::before {
  background: var(--color-secondary);
}

.footer-links-section .link-item:hover {
  color: var(--color-secondary);
}

.index-page .index-comparison-preview {
  background-color: var(--color-bg-primary);
}

.index-page .index-comparison-preview .section-subtitle,
.index-page .section-subtitle {
  color: var(--color-text-tertiary);
}

.index-page .intro-icon {
  background: var(--gradient-purple);
}

.index-page .intro-icon::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.index-page .intro-icon svg,
.index-page .intro-icon i {
  color: var(--color-text-inverse);
}

.index-page .comparison-intro p {
  color: var(--color-text-quaternary);
}

.index-page .comparison-card {
  background: var(--color-bg-primary);
}

.index-page .card-image {
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-active) 100%);
}

.index-page .card-highlights li {
  border-bottom-color: var(--color-border-light);
}

.index-page .card-highlights li::before {
  background: var(--color-primary);
}

.index-page .comparison-vs span {
  background: var(--gradient-purple);
  color: var(--color-text-inverse);
  border: 4px solid var(--color-bg-primary);
}

.index-page .comparison-vs span::before {
  background: rgba(255, 255, 255, 0.2);
}

.index-page .key-differences {
  background: var(--color-bg-primary);
}

.index-page .diff-header {
  background: var(--gradient-purple);
}

.index-page .diff-header::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.index-page .diff-header .diff-cell {
  color: var(--color-text-inverse);
}

.index-page .feature-item {
  background: var(--color-bg-primary);
}

.index-page .feature-icon {
  background: var(--gradient-purple);
}

.index-page .feature-icon::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.index-page .feature-icon svg,
.index-page .feature-icon i {
  color: var(--color-text-inverse);
}

.index-page .feature-item p {
  color: var(--color-text-quaternary);
}

.index-page .index-comparison-preview .btn-primary {
  background: var(--gradient-purple);
  color: var(--color-text-inverse);
}

.index-page .index-comparison-preview .btn-primary::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.index-page .index-comparison-preview .btn-primary:hover {
  background: var(--gradient-purple-reverse);
  box-shadow: var(--shadow-purple);
}

.index-page .diff-cell:not(:first-child)::before {
  color: var(--color-text-tertiary);
}

.about-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 50%, var(--color-secondary) 100%);
}

.about-header::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
}

.about-header::after {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent);
}

.about-header h1,
.about-header h2,
.about-header h3,
.about-header p {
  color: var(--color-text-inverse);
}

.about-content-section {
  background: var(--color-bg-primary);
}

.about-content-section h2 {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-primary);
}

.about-content-section h2::before {
  background: var(--color-primary);
}

.about-content-section h2::after {
  background: var(--gradient-primary);
}

.about-content-section p {
  color: var(--color-text-secondary);
}

.about-gallery-section {
  background: var(--color-bg-secondary);
}

.gallery-item {
  box-shadow: var(--shadow-md);
}

.gallery-item::before {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.3));
}

.gallery-item:hover {
  box-shadow: var(--shadow-xl);
}

.about-advantages-section {
  background: var(--color-bg-primary);
}

.advantage-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}

.advantage-card::before {
  background: transparent;
}

.advantage-card:hover {
  background: var(--color-bg-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-primary);
}

.advantage-card .advantage-title {
  color: var(--color-text-primary);
}

.advantage-card .advantage-description {
  color: var(--color-text-secondary);
}

.advantages-grid .advantage-icon {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
}

.advantages-grid .advantage-icon::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.advantages-grid .advantage-icon i,
.advantages-grid .advantage-icon svg {
  color: var(--color-text-inverse);
}

.product-detail-page .tips-notice {
  background: rgba(var(--color-primary-rgb), 0.08);
  border: 1px solid rgba(var(--color-primary-rgb), 0.15);
  color: var(--color-text-primary);
}

.product-detail-page .tips-notice::before {
  background: transparent;
}

.product-detail-page .tips-icon svg,
.product-detail-page .tips-icon i,
.product-detail-page .tips-notice i {
  color: var(--color-primary);
}

.product-detail-page .section-divider {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
}

.product-detail-page .thumbnail-list .thumbnail {
  border: 2px solid var(--color-border);
}

.product-detail-page .thumbnail-list .thumbnail::before {
  background: transparent;
}

.product-detail-page .thumbnail-list .thumbnail.active,
.product-detail-page .thumbnail-list .thumbnail:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.3);
}

.product-detail-page .color-options .color-option {
  border: 2px solid var(--color-border);
}

.product-detail-page .color-options .color-option::before {
  background: transparent;
}

.product-detail-page .color-options .color-option.active,
.product-detail-page .color-options .color-option:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.3);
}

.product-list-page .btn-detail,
.product-card .btn-detail {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
}

.product-list-page .btn-detail::before,
.product-card .btn-detail::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.product-list-page .btn-detail:hover,
.product-card .btn-detail:hover {
  background: var(--gradient-primary-reverse);
  box-shadow: var(--shadow-primary);
}

.news-page .page-header {
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-base);
  border-left: 4px solid var(--color-primary);
}

.news-page .page-header::before {
  background: transparent;
}

.news-page .page-header h3 {
  color: var(--color-text-primary);
}

.news-page .page-header p {
  color: var(--color-text-tertiary);
}

.news-page .news-item {
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-base);
  border: 1px solid var(--color-border);
}

.news-page .news-item::before {
  background: transparent;
}

.news-page .news-thumb {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.05) 0%, rgba(var(--color-primary-rgb), 0.1) 100%);
}

.news-page .news-thumb::before {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.1));
}

.news-page .news-title {
  color: var(--color-text-primary);
}

.news-page .news-title a {
  color: inherit;
}

.news-page .news-title a:hover,
.news-page .news-title a:active {
  color: var(--color-primary);
}

.news-page .news-meta {
  color: var(--color-text-tertiary);
  border-bottom-color: var(--color-border);
}

.news-page .news-meta i {
  color: var(--color-text-muted);
}

.news-page .sidebar-block li a,
.article-page .sidebar-block li a {
  color: var(--color-text-secondary);
}

.news-page .sidebar-block li a::before,
.article-page .sidebar-block li a::before {
  background: var(--color-primary);
}

.news-page .sidebar-block li a:hover,
.article-page .sidebar-block li a:hover {
  color: var(--color-primary);
}

.article-page .article-content h1 {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-border);
}

.article-page .article-content h1::before {
  background: transparent;
}

.article-page .article-content h2 {
  color: var(--color-text-primary);
  border-left: 4px solid var(--color-primary);
}

.article-page .article-content h2::before {
  background: var(--color-primary);
}

.article-page .article-content h3,
.article-page .article-content h4,
.article-page .article-content h5 {
  color: var(--color-text-primary);
}

.article-page .article-content h6 {
  color: var(--color-text-tertiary);
}

.article-page .article-content a {
  color: var(--color-primary);
  border-bottom: 1px solid transparent;
}

.article-page .article-content a:hover {
  border-bottom-color: var(--color-primary);
}

.article-page .article-content strong,
.article-page .article-content b {
  color: var(--color-text-primary);
}

.faq-page .faq-header,
.faq-detail-page .faq-header {
  background: var(--gradient-primary);
}

.faq-page .faq-header::before,
.faq-detail-page .faq-header::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
}

.faq-page .faq-header::after,
.faq-detail-page .faq-header::after {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent);
}

.faq-page .faq-title,
.faq-detail-page .faq-title {
  color: var(--color-text-inverse);
}

.faq-nav-sidebar {
  background: var(--color-bg-secondary);
}

.faq-nav-sidebar::before {
  background: transparent;
}

.faq-nav-sidebar .faq-nav-title {
  color: var(--color-text-primary);
  border-bottom: 2px solid var(--color-primary);
}

.faq-nav-sidebar .faq-nav-title::before {
  background: var(--color-primary);
}

.faq-nav-item {
  color: var(--color-text-secondary);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
}

.faq-nav-item::before {
  background: transparent;
}

.faq-nav-item i {
  color: inherit;
}

.faq-nav-item:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.faq-nav-item.active {
  color: var(--color-text-inverse);
  background: var(--gradient-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-primary);
}

.faq-nav-item .nav-count {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
}

.faq-nav-item.active .nav-count {
  background: rgba(255, 255, 255, 0.3);
  color: var(--color-text-inverse);
}

.faq-page .faq-sidebar-link-text,
.faq-detail-page .faq-sidebar-link-text {
  color: var(--color-text-secondary);
}

.faq-page .faq-contact-btn,
.faq-detail-page .faq-contact-btn {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
}

.faq-page .faq-contact-btn::before,
.faq-detail-page .faq-contact-btn::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.faq-page .faq-contact-btn i,
.faq-detail-page .faq-contact-btn i {
  color: var(--color-text-inverse);
}

.faq-page .faq-contact-btn:hover,
.faq-detail-page .faq-contact-btn:hover {
  background: var(--gradient-primary-reverse);
  box-shadow: var(--shadow-primary);
}

.contact-page .contact-header {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%);
}

.contact-page .contact-header::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
}

.contact-page .contact-header::after {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent);
}

.contact-page .contact-title {
  color: var(--color-text-inverse);
}

.contact-page .subtitle-text {
  color: rgba(255, 255, 255, 0.9);
}

.contact-page .info-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-base);
}

.contact-page .info-card::before {
  background: transparent;
}

.contact-page .info-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-primary);
}

.contact-page .info-icon {
  color: var(--color-primary);
}

.contact-page .section-title,
.contact-page .card-title {
  color: var(--color-text-primary);
}

.contact-page .section-title .title-icon,
.contact-page .card-title .title-icon {
  background: var(--gradient-accent);
}

.contact-page .section-title .title-icon::before,
.contact-page .card-title .title-icon::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.contact-page .section-title .title-icon i,
.contact-page .card-title .title-icon i {
  color: var(--color-text-inverse);
}

.contact-page .service-btn {
  background: var(--gradient-accent);
  color: var(--color-text-inverse);
}

.contact-page .service-btn::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.contact-page .service-btn i {
  color: var(--color-text-inverse);
}

.contact-page .service-btn:hover {
  background: var(--gradient-accent-reverse);
}

.contact-page .service-btn.disabled {
  background: var(--color-border-secondary);
}

.contact-page .time-item {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.05) 0%, rgba(var(--color-primary-rgb), 0.1) 100%);
}

.contact-page .time-item::before {
  background: transparent;
}

.contact-page .time-item i {
  color: var(--color-primary);
}

.contact-page .time-value {
  color: var(--color-text-primary);
}

.contact-page .company-content {
  background: var(--color-bg-quaternary);
}

.contact-page .info-label {
  color: var(--color-text-quaternary);
}

.contact-page .info-label i {
  color: var(--color-accent);
}

.contact-page .info-value {
  color: var(--color-text-primary);
}

.contact-page .info-value a {
  color: var(--color-accent);
}

.contact-page .info-value a:hover {
  color: var(--color-accent-hover);
}

.contact-page .backup-item {
  background: var(--color-bg-quaternary);
  border: 1px solid var(--color-border);
}

.contact-page .backup-item::before {
  background: transparent;
}

.contact-page .backup-item:hover {
  border-color: var(--color-accent);
}

.contact-page .backup-icon i {
  color: var(--color-accent);
}

.contact-page .backup-label,
.contact-page .backup-value {
  color: var(--color-text-primary);
}

.contact-page .backup-value a {
  color: var(--color-accent);
}

.contact-page .backup-value a:hover {
  color: var(--color-accent-hover);
}

.contact-page .backup-note {
  color: var(--color-text-quaternary);
}

.contact-page .faq-item a {
  background: var(--color-bg-quaternary);
  color: var(--color-text-secondary);
}

.contact-page .faq-item a::before {
  background: transparent;
}

.contact-page .faq-item a:hover,
.contact-page .faq-item a:active {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.contact-page .faq-item i {
  color: var(--color-accent);
}

.contact-page .faq-more-btn {
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
  background: transparent;
}

.contact-page .faq-more-btn::before {
  background: transparent;
}

.contact-page .faq-more-btn i {
  color: var(--color-accent);
}

.contact-page .faq-more-btn:hover {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.contact-page .faq-more-btn:hover i {
  color: var(--color-text-inverse);
}

.contact-page .nav-item a {
  background: var(--color-bg-quaternary);
}

.contact-page .nav-item a::before {
  background: transparent;
}

.contact-page .nav-item a:hover,
.contact-page .nav-item a:active {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.contact-page .nav-item i {
  color: var(--color-text-placeholder);
}

.contact-page .service-cta-section {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.05) 0%, rgba(var(--color-primary-rgb), 0.1) 100%);
  border: 1px solid rgba(var(--color-primary-rgb), 0.15);
}

.contact-page .service-cta-section::before {
  background: transparent;
}

.contact-page .cta-btn {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.contact-page .cta-btn::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.contact-page .cta-btn i {
  color: var(--color-text-inverse);
}

.contact-page .cta-btn:hover {
  background: var(--color-accent-hover);
}

.contact-page .form-control {
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-secondary);
}

.contact-page .form-control:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.1);
}

.contact-page .form-control::placeholder {
  color: var(--color-text-placeholder);
}

.contact-page .submit-btn,
.contact-page .btn-submit {
  background: var(--gradient-accent);
  color: var(--color-text-inverse);
  box-shadow: 0 4px 16px rgba(var(--color-accent-rgb), 0.3);
}

.contact-page .submit-btn::before,
.contact-page .btn-submit::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.contact-page .submit-btn i,
.contact-page .btn-submit i {
  color: var(--color-text-inverse);
}

.contact-page .submit-btn:hover,
.contact-page .btn-submit:hover {
  background: var(--gradient-accent-reverse);
  box-shadow: 0 6px 20px rgba(var(--color-accent-rgb), 0.4);
}

.contact-page .message-form-wrapper {
  background: var(--color-bg-quaternary);
}

.contact-page .form-title {
  color: var(--color-text-primary);
}

.contact-page .form-title i {
  color: var(--color-accent);
}

.contact-page .form-intro {
  color: var(--color-text-quaternary);
}

.contact-page .form-label {
  color: var(--color-text-primary);
}

.contact-page .label-required {
  color: var(--color-danger);
}

.contact-page .code-img {
  border-color: var(--color-border-secondary);
}

.contact-page .code-img:hover {
  border-color: var(--color-accent);
}

.contact-page .submit-note {
  color: var(--color-text-quaternary);
}

.contact-page .records-title {
  color: var(--color-text-primary);
}

.contact-page .records-title i {
  color: var(--color-accent);
}

.contact-page .message-item {
  background: var(--color-bg-quaternary);
  border: 1px solid var(--color-border);
}

.contact-page .message-author {
  color: var(--color-text-primary);
}

.contact-page .message-badge {
  color: var(--color-text-quaternary);
  border-color: var(--color-border);
}

.contact-page .message-date {
  color: var(--color-text-placeholder);
}

.contact-page .message-reply {
  border-color: var(--color-border);
}

.contact-page .reply-author {
  color: var(--color-text-primary);
}

.contact-page .reply-date {
  color: var(--color-text-placeholder);
}

.contact-page .page-link {
  background: var(--color-bg-primary);
  color: var(--color-text-tertiary);
  border: 1px solid var(--color-border);
}

.contact-page .page-link:hover,
.contact-page .page-link:active {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--color-accent-light);
}

.contact-page .qrcode-wrapper img {
  border-color: var(--color-border);
}

.contact-page .qrcode-placeholder {
  border: 1px solid var(--color-border);
  background: var(--color-bg-quaternary);
}

.contact-page .qrcode-placeholder i {
  color: var(--color-border-secondary);
}

.contact-page .qrcode-placeholder p {
  color: var(--color-text-placeholder);
}

.contact-page .account-name {
  color: var(--color-text-primary);
}

.contact-page .intro-note {
  color: var(--color-text-placeholder);
}

.contact-page .empty-state {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
}

.contact-page .empty-text {
  color: var(--color-text-placeholder);
}

.ledger-comparison-page .jumbotron {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
}

.ledger-comparison-page .jumbotron::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
}

.ledger-comparison-page .section-title {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
}

.ledger-comparison-page .section-title::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.ledger-comparison-page .comparison-table {
  border: 1px solid var(--color-border);
}

.ledger-comparison-page .table-header-cell {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.ledger-comparison-page .sticky-header-cell:first-child {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
}

.ledger-comparison-page .advantage-cell {
  color: var(--color-primary);
}

.ledger-comparison-page .advantage-cell i {
  color: var(--color-primary);
}

.ledger-comparison-page .highlight-row {
  background: rgba(var(--color-primary-rgb), 0.05);
}

.ledger-comparison-page .btn-cta {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
}

.ledger-comparison-page .btn-cta::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.ledger-comparison-page .btn-cta i {
  color: var(--color-text-inverse);
}

.ledger-comparison-page .btn-cta:hover {
  background: var(--gradient-primary-reverse);
}

.product-detail-page .color-option {
  background: var(--color-bg-primary);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.product-detail-page .color-option:hover {
  border-color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.05);
  box-shadow: var(--shadow-primary);
}

.product-detail-page .color-option.active {
  border-color: var(--color-primary);
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-primary);
}

.product-detail-page .btn-purchase {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-primary);
}

.product-detail-page .btn-purchase:hover {
  background: var(--gradient-primary-reverse);
  box-shadow: var(--shadow-primary-lg);
}

.product-detail-page .btn-purchase:active {
  box-shadow: var(--shadow-md);
}

.faq-question h3 {
  color: var(--color-text-primary);
}

.faq-question i {
  color: var(--color-primary);
}

.faq-item.active .faq-question i {
  color: var(--color-primary);
}

.faq-answer p {
  color: var(--color-text-secondary);
}

.faq-more {
  color: var(--color-primary);
}

.faq-more:hover {
  color: var(--color-accent);
}

.faq-page .faq-question::before {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.08) 0%, rgba(var(--color-primary-rgb), 0.12) 100%);
  color: var(--color-primary);
  border-color: rgba(var(--color-primary-rgb), 0.2);
}

.faq-page .faq-question.active::before {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

.faq-page .faq-question-text {
  color: var(--color-text-primary);
}

.faq-page .faq-toggle {
  background: var(--color-bg-secondary);
}

.faq-page .faq-question.active .faq-toggle {
  background: rgba(var(--color-primary-rgb), 0.1);
}

.faq-page .faq-icon-plus,
.faq-page .faq-icon-minus {
  color: var(--color-text-tertiary);
}

.faq-page .faq-question.active .faq-icon-plus,
.faq-page .faq-question.active .faq-icon-minus {
  color: var(--color-primary);
}

.faq-page .faq-answer.active {
  background: rgba(var(--color-primary-rgb), 0.02);
}

.faq-detail-page .faq-question::before {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.08) 0%, rgba(var(--color-primary-rgb), 0.12) 100%);
  color: var(--color-primary);
  border-color: rgba(var(--color-primary-rgb), 0.2);
}

.faq-detail-page .faq-question.active::before {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

.faq-detail-page .faq-question-text {
  color: var(--color-text-primary);
}

.faq-detail-page .faq-toggle {
  background: var(--color-bg-secondary);
}

.faq-detail-page .faq-question.active .faq-toggle {
  background: rgba(var(--color-primary-rgb), 0.1);
}

.faq-detail-page .faq-icon-plus,
.faq-detail-page .faq-icon-minus {
  color: var(--color-text-tertiary);
}

.faq-detail-page .faq-question.active .faq-icon-plus,
.faq-detail-page .faq-question.active .faq-icon-minus {
  color: var(--color-primary);
}

.faq-page .category-nav-header,
.faq-detail-page .category-nav-header {
  background: var(--color-bg-secondary);
}

.faq-page .category-nav-title,
.faq-detail-page .category-nav-title {
  color: var(--color-text-primary);
}

.faq-page .category-nav-title::before,
.faq-detail-page .category-nav-title::before {
  background: var(--color-primary);
}

.faq-page .category-nav-content,
.faq-detail-page .category-nav-content {
  background: var(--color-bg-primary);
}

.faq-page .category-nav-item,
.faq-detail-page .category-nav-item {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
}

.faq-page .category-nav-item:active,
.faq-detail-page .category-nav-item:active {
  background: rgba(var(--color-primary-rgb), 0.08);
}

.faq-page .category-nav-item.active,
.faq-detail-page .category-nav-item.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.faq-page .category-nav-name,
.faq-detail-page .category-nav-name {
  color: var(--color-text-primary);
}

.faq-page .category-nav-count,
.faq-detail-page .category-nav-count {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
}

.faq-page .category-nav-item.active .category-nav-count,
.faq-detail-page .category-nav-item.active .category-nav-count {
  background: rgba(255, 255, 255, 0.25);
  color: var(--color-text-inverse);
}

.category-nav-advanced {
  background: var(--color-bg-primary);
  border-color: var(--color-border);
}

.category-nav-advanced::before {
  background: linear-gradient(90deg, transparent, rgba(var(--color-primary-rgb), 0.05), transparent);
}

.category-nav-advanced .nav-item {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
}

.category-nav-advanced .nav-item::before {
  background: var(--color-primary);
}

.category-nav-advanced .nav-item:hover {
  background: rgba(var(--color-primary-rgb), 0.05);
  border-color: var(--color-primary);
}

.category-nav-advanced .nav-item.is-active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

.category-nav-advanced .nav-item.is-active:hover {
  background: var(--color-accent);
}

.category-nav-advanced .badge-count {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
}

.category-nav-advanced .nav-item:not(.is-active) .badge-count {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
}

.category-nav-advanced .nav-item.is-active .badge-count {
  background: rgba(255, 255, 255, 0.3);
  color: var(--color-text-inverse);
}

.category-nav-advanced {
  background: var(--color-bg-secondary);
}

.category-nav-advanced::before {
  background: transparent;
}

.category-nav-advanced .nav-item {
  color: var(--color-text-secondary);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
}

.category-nav-advanced .nav-item::before {
  background: transparent;
}

.category-nav-advanced .nav-item:hover {
  color: var(--color-accent-active  );
  border-color: var(--color-accent-active);
  box-shadow: var(--shadow-sm);
}

.category-nav-advanced .nav-item.is-active {
  color: var(--color-text-inverse);
  background: var(--gradient-primary);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-primary);
}

.category-nav-advanced .badge-count {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.category-nav-advanced .nav-item:not(.is-active) .badge-count {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
}

.category-nav-advanced .nav-item.is-active .badge-count {
  background: rgba(255, 255, 255, 0.3);
  color: var(--color-text-inverse);
}

.content-navigation-section {
  background: var(--color-bg-secondary);
}

.content-nav-block {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
}

.content-nav-block::before {
  background: transparent;
}

.content-nav-block:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-primary);
}

.content-nav-block .nav-block-title {
  color: var(--color-primary);
}

.content-nav-block .nav-block-title::before {
  background: var(--color-primary);
}

.nav-block-item a {
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-light);
}

.nav-block-item a::before {
  background: var(--color-primary);
}

.nav-block-item a:hover {
  color: var(--color-primary);
}

.nav-block-more {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}

.nav-block-more::before {
  background: transparent;
}

.nav-block-more i {
  color: var(--color-primary);
}

.nav-block-more:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.nav-block-more:hover i {
  color: var(--color-text-inverse);
}

.compliance-section {
  background: var(--color-bg-primary);
}

.compliance-item {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}

.compliance-item::before {
  background: transparent;
}

.compliance-item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-primary);
}

.float-contact-pc .float-btn,
.float-phone {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-lg);
}

.float-contact-pc .float-btn::before,
.float-phone::before {
  background: rgba(var(--color-primary-rgb), 0.3);
}

.float-contact-pc .float-btn::after,
.float-phone::after {
  background: rgba(255, 255, 255, 0.2);
}

.float-contact-pc .float-btn i,
.float-phone i {
  color: var(--color-text-inverse);
}

.float-contact-pc .float-btn:hover,
.float-phone:hover {
  box-shadow: var(--shadow-primary-lg);
}

.empty-icon i {
  color: var(--color-primary);
}

.empty-button {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
}

.empty-button::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.empty-button i {
  color: var(--color-text-inverse);
}

.empty-button:hover {
  background: var(--gradient-primary-reverse);
}

.empty-state {
  border-color: var(--color-border);
}

.empty-text {
  color: var(--color-text-placeholder);
}

.contact-cta-card {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.05) 0%, rgba(var(--color-primary-rgb), 0.1) 100%);
  border: 1px solid rgba(var(--color-primary-rgb), 0.15);
}

.contact-cta-card::before {
  background: transparent;
}

.contact-cta-card h2,
.contact-cta-card h3,
.contact-cta-card h4 {
  color: var(--color-text-primary);
}

.contact-cta-card p {
  color: var(--color-text-primary);
}

.contact-cta-card i {
  color: var(--color-text-inverse);
}

.contact-cta-card .btn {
  background: rgba(var(--color-primary-rgb), 0.08);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.contact-cta-card .btn::before {
  background: transparent;
}

.contact-cta-card .btn i {
  color: var(--color-primary);
}

.contact-cta-card .btn:hover {
  background: rgba(var(--color-primary-rgb), 0.15);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.contact-cta-card .btn:hover i {
  color: var(--color-accent);
}

.highlight-domain {
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.1);
}

.highlight-code {
  color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), 0.1);
}

.statement-text {
  color: var(--color-text-secondary);
}

.statement-text i {
  color: var(--color-primary);
}

.footer-links-section {
  background: rgba(var(--color-primary-rgb), 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-links-section .links-title {
  color: rgba(255, 255, 255, 0.6);
}

.footer-links-section .links-title::before {
  background: var(--gradient-primary);
}

.footer-links-section .link-item {
  color: rgba(255, 255, 255, 0.65);
  background: transparent;
}

.footer-links-section .link-item::after {
  color: rgba(255, 255, 255, 0.15);
}

.footer-links-section .link-item:hover {
  color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), 0.08);
}

.footer-main {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.footer-section-title {
  color: var(--color-text-inverse);
  border-bottom-color: var(--color-primary);
}

.footer-section-title:hover {
  color: var(--color-accent);
}

.footer-section-title::after {
  background: linear-gradient(90deg, var(--color-accent), transparent);
}

.footer-nav-list a {
  color: rgba(255, 255, 255, 0.7);
}

.footer-nav-list a::before {
  background: var(--color-primary);
}

.footer-nav-list a:hover {
  color: var(--color-text-inverse);
}

.footer-nav-list a:hover::before {
  background: var(--color-accent);
}

.footer-widget-title {
  color: var(--color-text-inverse);
  border-bottom-color: var(--color-primary);
}

.footer-widget-title::after {
  background: linear-gradient(90deg, var(--color-accent), transparent);
}

.footer-contact i {
  background: rgba(var(--color-primary-rgb), 0.15);
  color: var(--color-primary);
}

.contact-label {
  color: rgba(255, 255, 255, 0.5);
}

.contact-text a,
.contact-text span {
  color: rgba(255, 255, 255, 0.85);
}

.contact-text a:hover {
  color: var(--color-accent);
}

.footer-wechat .wechat-trigger-btn {
  background: linear-gradient(135deg, #07c160, #00a854);
  color: var(--color-text-inverse);
}

.footer-wechat .wechat-trigger-btn:hover {
  background: linear-gradient(135deg, #00a854, #07c160);
  box-shadow: 0 5px 20px rgba(7, 193, 96, 0.3);
}

.footer-wechat .wechat-trigger-btn i {
  color: var(--color-text-inverse);
}

.footer-copyright {
  background: transparent;
}

.brand-text {
  color: rgba(255, 255, 255, 0.6);
}

.news-page .sidebar-block,
.article-page .sidebar-block {
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.news-page .sidebar-block h2,
.article-page .sidebar-block h2 {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-border);
}

.news-page .sidebar-block h2::after,
.article-page .sidebar-block h2::after {
  background: var(--color-primary);
}

.news-page .sidebar-block li,
.article-page .sidebar-block li {
  border-bottom-color: var(--color-border-light);
}

.news-page .sidebar-block li a,
.article-page .sidebar-block li a {
  color: var(--color-text-secondary);
}

.news-page .sidebar-block li a:active,
.article-page .sidebar-block li a:active {
  color: var(--color-primary);
}

.index-page .price-current {
  color: var(--color-primary);
}

.index-page .price-original {
  color: var(--color-text-muted);
}

.product-detail-page .product-pricing-box {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.03) 0%, rgba(var(--color-primary-rgb), 0.05) 100%);
  border-color: rgba(var(--color-primary-rgb), 0.15);
}

.product-detail-page .price-main .label {
  color: var(--color-text-secondary);
}

.product-detail-page .price-main .value {
  color: var(--color-danger);
}

.product-detail-page .price-original .label {
  color: var(--color-text-secondary);
}

.product-detail-page .price-original .value {
  color: var(--color-text-muted);
}

.product-detail-page .stock-status {
  border-top-color: rgba(var(--color-primary-rgb), 0.2);
  color: var(--color-text-secondary);
}

.product-detail-page .selection-title {
  color: var(--color-text-primary);
}

.contact-page .form-group {
  background: transparent;
}

.contact-page .label-required {
  color: var(--color-danger);
}

.contact-page .form-control {
  background: var(--color-bg-primary);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.contact-page .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.contact-page .form-control::placeholder {
  color: var(--color-text-placeholder);
}

.contact-page .time-item i {
  color: var(--color-primary);
}

.contact-page .time-value {
  color: var(--color-text-primary);
}

.contact-page .time-note {
  color: var(--color-text-muted);
}

.contact-page .reply-author {
  color: var(--color-text-primary);
}

.contact-page .reply-date {
  color: var(--color-text-muted);
}

.contact-page .reply-content {
  color: var(--color-text-secondary);
}

.ledger-comparison-page .loading {
  color: var(--color-primary);
}

.article-page .article-meta .meta-item {
  color: var(--color-text-muted);
}

.faq-detail-page .faq-detail-meta .meta-item {
  color: var(--color-text-muted);
}

.article-page .article-content::selection {
  background: rgba(var(--color-primary-rgb), 0.2);
  color: var(--color-text-primary);
}

.wechat-name {
  color: #07c160;
}

/* 首页按钮基础样式 */
.index-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--ip-radius-sm);
  transition: var(--ip-transition);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}

/* 首页主按钮 */
.index-page .btn-primary {
  background-color: var(--color-secondary);
  color: var(--color-text-inverse);
  border-color: var(--color-secondary);
}

.index-page .btn-primary:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* 首页小尺寸按钮 */
.index-page .btn-sm {
  padding: 8px 18px;
  font-size: 14px;
}

/* 首页轮廓按钮 */
.index-page .btn-outline-primary {
  background-color: transparent;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.index-page .btn-outline-primary:hover {
  background-color: var(--color-secondary);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
}

/* 移动导航头部 */
.mobile-nav-header,
.mobile-menu-header {
  background: var(--gradient-dark);
  box-shadow: var(--shadow-base);
}

/* 移动导航链接 */
.mobile-nav-link,
.mobile-menu-link {
  color: var(--color-text-secondary);
}

/* 移动联系项和底部按钮 */
.mobile-contact-item,
.mobile-footer-btn {
  background: var(--gradient-dark);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
}

/* CTA 按钮 */
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  text-decoration: none;
  border-radius: 24px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.25s var(--transition);
  letter-spacing: -0.01em;
  min-height: 44px;
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.2);
}

.cta-btn:active {
  transform: scale(0.96);
}

/* 导航块头部图标 */
.nav-block-header i {
  font-size: 20px;
  color: var(--color-primary);
}

/* 当前页码 */
.page-num-current {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: 600;
  cursor: default;
  pointer-events: none;
}
.pagination-link:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-text-inverse);
  box-shadow: 0 4px 12px rgba(var(--color-accent-hover-rgb), 0.3);
}

.pagination-info strong {
  color: var(--color-accent-hover);
}

.site-breadcrumb a {
  color: var(--color-accent-hover);
}

/* 分类导航徽章计数 */
.category-nav-advanced .nav-item:not(.is-active) .badge-count {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-accent-hover);
}

@media screen and (max-width: 768px) {
  
  .index-page .diff-header .diff-cell:first-child {
    background: var(--gradient-purple);
    color: var(--color-text-inverse);
    box-shadow: 0 4px 10px rgba(var(--color-purple-rgb), 0.2);
  }

  .index-page .diff-header .diff-cell:not(:first-child) {
    background: transparent;
    color: var(--color-text-secondary);
    border-bottom-color: var(--color-border-light);
  }
  
  
  .category-nav-advanced {
    background: var(--color-bg-secondary);
  }
  
  
  .mobile-nav .btn,
  .mobile-menu .btn {
    min-height: 44px;
  }
  
  
  .back-to-top,
  .backtotop,
  #back-to-top {
    background: var(--gradient-primary);
    box-shadow: var(--shadow-lg);
  }
}

@media print {
  .contact-page .contact-header {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    box-shadow: none;
  }

  .contact-page .contact-title,
  .contact-page .subtitle-text {
    color: var(--color-text-primary);
  }
  
  .btn-primary,
  .btn-purchase {
    background: var(--color-primary);
  }
  
  .back-to-top,
  .backtotop,
  #back-to-top {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

.article-content [style*="background-color"],
.news-content [style*="background-color"],
.faq-content [style*="background-color"],
.product-description [style*="background-color"],
.about-content [style*="background-color"],
.content-area [style*="background-color"],
.rich-text [style*="background-color"],
.editor-content [style*="background-color"] {
  background-color: transparent !important;
}

.article-content p[style*="background-color: rgb(255, 255, 255)"],
.article-content div[style*="background-color: rgb(255, 255, 255)"],
.article-content span[style*="background-color: rgb(255, 255, 255)"],
.article-content h1[style*="background-color: rgb(255, 255, 255)"],
.article-content h2[style*="background-color: rgb(255, 255, 255)"],
.article-content h3[style*="background-color: rgb(255, 255, 255)"],
.article-content h4[style*="background-color: rgb(255, 255, 255)"],
.article-content h5[style*="background-color: rgb(255, 255, 255)"],
.article-content h6[style*="background-color: rgb(255, 255, 255)"] {
  background-color: transparent !important;
}

.news-content p[style*="background-color: rgb(255, 255, 255)"],
.news-content div[style*="background-color: rgb(255, 255, 255)"],
.faq-content p[style*="background-color: rgb(255, 255, 255)"],
.faq-content div[style*="background-color: rgb(255, 255, 255)"] {
  background-color: transparent !important;
}