/* Compatibility overrides for model pricing on light and dark system themes. */
.text-gray-900 {
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-gray-700 {
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-600 {
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-500 {
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-400 {
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

html.dark .pricing-page-shell {
  background: var(--semi-color-bg-0);
}

html.dark .pricing-search-header {
  background: linear-gradient(
    180deg,
    var(--semi-color-bg-0) 0%,
    var(--semi-color-bg-0) 72%,
    transparent 100%
  );
}

html.dark .pricing-sidebar-panel,
html.dark .pricing-market-topbar-card,
html.dark .pricing-model-card {
  background: var(--semi-color-bg-1) !important;
  border-color: var(--semi-color-border) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
}

html.dark .pricing-sidebar-kicker,
html.dark .pricing-sidebar-summary,
html.dark .pricing-market-topbar-count {
  color: var(--semi-color-text-1);
}

html.dark .pricing-sidebar-groups .semi-divider {
  color: var(--semi-color-text-0);
}

html.dark .pricing-sidebar-groups .semi-divider-line {
  border-color: var(--semi-color-border) !important;
}

html.dark .pricing-market-hot-label,
html.dark .pricing-model-price-label,
html.dark .pricing-model-footer-vendor {
  color: var(--semi-color-text-2);
}

html.dark .pricing-market-hot-tag {
  background: var(--semi-color-bg-2);
  border-color: var(--semi-color-border);
  color: var(--semi-color-text-1);
}

html.dark .pricing-market-hot-tag:hover,
html.dark .pricing-market-hot-tag-active {
  background: var(--semi-color-primary-light-default);
  border-color: var(--semi-color-primary);
  color: var(--semi-color-primary);
}

html.dark .pricing-search-input .semi-input-wrapper {
  background: var(--semi-color-bg-2);
  border-color: var(--semi-color-border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

html.dark .pricing-search-input .semi-input-wrapper:hover,
html.dark .pricing-search-input .semi-input-wrapper-focus,
html.dark .pricing-search-input .semi-input-wrapper:focus-within {
  border-color: var(--semi-color-primary) !important;
}

html.dark .pricing-search-input .semi-input {
  color: var(--semi-color-text-0);
}

html.dark .pricing-search-input .semi-input::placeholder {
  color: var(--semi-color-text-2);
}

html.dark .pricing-model-card .text-gray-900,
html.dark .pricing-model-card .text-gray-700,
html.dark .pricing-model-card .text-gray-600 {
  color: var(--semi-color-text-0) !important;
}

html.dark .pricing-model-card .text-gray-500 {
  color: var(--semi-color-text-1) !important;
}

html.dark .pricing-model-card .text-gray-400 {
  color: var(--semi-color-text-2) !important;
}

html.dark .pricing-model-card:hover {
  border-color: var(--semi-color-primary) !important;
}

html.dark .pricing-model-price-box {
  background: var(--semi-color-primary-light-default);
  border-color: var(--semi-color-primary);
}

html.dark .pricing-model-ratio-box {
  background: var(--semi-color-bg-2);
  border-color: var(--semi-color-border);
}