.topbar-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.theme-toggle {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--mint);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4ede2;
  --card: #fffaf1;
  --line: #d8c7ad;
  --text: #30271f;
  --muted: #715f4d;
  --mint: #8a5a2b;
  --cyan: #b2763f;
  --danger: #a13f4d;
}

html[data-theme="light"] body {
  background: radial-gradient(circle at top left, #fffaf0 0, var(--bg) 46%);
}

html[data-theme="light"] .topbar {
  border-bottom-color: var(--line);
  background: rgba(250, 243, 232, .94);
  box-shadow: 0 1px 12px rgba(79, 59, 37, .08);
}

html[data-theme="light"] .stack input,
html[data-theme="light"] .payment-form input {
  background: #fffdf8;
  color: var(--text);
}

html[data-theme="light"] .success {
  border-color: #b98952;
  background: #f7e7d2;
  color: #74471e;
}

html[data-theme="light"] .status-chip,
html[data-theme="light"] .profile-card-action,
html[data-theme="light"] .tariff-pending {
  border-color: #ad7b4e;
}

html[data-theme="light"] .profile-card-action:hover,
html[data-theme="light"] .profile-card-action:focus-visible {
  border-color: var(--mint);
  background: #f2dfca;
}

html[data-theme="light"] .alert {
  border-color: #c77c86;
  background: #fae8e9;
  color: #8f3040;
}

html[data-theme="light"] .notice,
html[data-theme="light"] .account-warning {
  border-color: #c9a453;
  background: #fff3cc;
  color: #684f12;
}

html[data-theme="light"] .notice code,
html[data-theme="light"] .payment-alternative h2,
html[data-theme="light"] .tariff-option-body strong {
  color: var(--text);
}

html[data-theme="light"] .tariff-option input:checked + .tariff-option-body {
  background: #f3e1cc;
}

html[data-theme="light"] .dedicated-ipv4-terms {
  border-color: var(--line);
  background: #fffdf8;
}

html[data-theme="light"] .dedicated-ipv4-warning {
  border-left-color: #bd8b24;
  background: #fff1c7;
  color: #684f12;
}

html[data-theme="light"] .request-state {
  border-color: #d2b58f;
  background: #f7ead9;
}

html[data-theme="light"] .danger-button {
  background: #ae4857;
  border-color: #923846;
  color: #fff;
}

@media (max-width: 760px) {
  .topbar-tools {
    align-items: flex-end;
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 520px) {
  .topbar-tools {
    align-items: flex-start;
    width: 100%;
  }
}