.surus-theme-toggle {
  width: auto;
  min-width: 84px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid #b9d4ad;
  border-radius: 8px;
  background: #fff;
  color: #175d35;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  gap: 7px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.surus-theme-toggle__icon {
  font-size: 20px;
  line-height: 1;
}

.surus-theme-toggle:hover,
.surus-theme-toggle:focus-visible {
  border-color: #1f7a3f;
  background: #e7f5dc;
  box-shadow: 0 0 0 3px rgba(31, 122, 63, 0.14);
  outline: 0;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121812;
  --panel: #1c251d;
  --ink: #f1f5ee;
  --muted: #c2cdc0;
  --line: #405040;
  --green: #58b875;
  --green-dark: #9bd7ab;
  --green-soft: #243c29;
  --yellow: #e2bd45;
  --yellow-soft: #3b3318;
  --blue: #73a9cf;
  --blue-soft: #203443;
}

html[data-theme="dark"] body,
html[data-theme="dark"] main {
  background: var(--bg);
  color: var(--ink);
}

html[data-theme="dark"] header,
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .summary,
html[data-theme="dark"] .intro,
html[data-theme="dark"] .platform-explainer,
html[data-theme="dark"] .market-dashboard,
html[data-theme="dark"] .user-report,
html[data-theme="dark"] .user-reviews,
html[data-theme="dark"] .listing-highlight,
html[data-theme="dark"] .supply-listing,
html[data-theme="dark"] .supply-group-card,
html[data-theme="dark"] .selected-bids-panel,
html[data-theme="dark"] .bid-confirmation,
html[data-theme="dark"] .reset-stage {
  border-color: var(--line) !important;
  background: var(--panel) !important;
  color: var(--ink);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  border-color: var(--line);
  background: #111812;
  color: var(--ink);
}

html[data-theme="dark"] table,
html[data-theme="dark"] thead,
html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,
html[data-theme="dark"] th,
html[data-theme="dark"] td {
  border-color: var(--line) !important;
  color: var(--ink);
}

html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .market-dashboard__source,
html[data-theme="dark"] .market-dashboard__item-meta,
html[data-theme="dark"] .market-dashboard__request-facts dt {
  color: var(--muted) !important;
}

html[data-theme="dark"] .notice,
html[data-theme="dark"] .status.success,
html[data-theme="dark"] .bid-alert,
html[data-theme="dark"] .market-dashboard__request,
html[data-theme="dark"] .market-dashboard__empty,
html[data-theme="dark"] .market-dashboard__request-list {
  border-color: var(--line) !important;
  background: #2d2a18 !important;
  color: var(--ink);
}

html[data-theme="dark"] .promise,
html[data-theme="dark"] button.choice,
html[data-theme="dark"] .app-info-badge,
html[data-theme="dark"] .app-context-badge,
html[data-theme="dark"] header .nav-actions .nav-link,
html[data-theme="dark"] .app-header-actions .app-header-button,
html[data-theme="dark"] .surus-theme-toggle {
  border-color: var(--line);
  background: #243026;
  color: var(--ink);
}

html[data-theme="dark"] .promise:nth-child(2),
html[data-theme="dark"] header .nav-actions .nav-link--notification {
  background: var(--yellow-soft);
  color: #f6dc7b;
}

html[data-theme="dark"] .hero-picture,
html[data-theme="dark"] .banner-panel {
  background: #fff !important;
}

@media (max-width: 900px) {
  .surus-theme-toggle {
    min-width: 42px;
    flex: 0 0 42px !important;
  }

  .surus-theme-toggle__label {
    display: none;
  }
}
