html[data-theme="dark"] {
  --paper: #12171e;
  --ink: #e7e2d6;
  --white: #1b2230;
  --navy: #d5e4f2;
  --muted: #9aa8b6;
  --line: #2a3340;
  --ok: #6fbf93;
  --warn: #e0b84a;
  --err: #e07a7d;
  color-scheme: dark;
}
html[data-theme="dark"] header,
html[data-theme="dark"] form.composer,
html[data-theme="dark"] .desk-top,
html[data-theme="dark"] .desk-nav,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .login-box {
  background: color-mix(in srgb, var(--white) 94%, transparent);
}
html[data-theme="dark"] .out,
html[data-theme="dark"] .quote-card,
html[data-theme="dark"] .bubble tr {
  background: var(--white);
}
html[data-theme="dark"] .in {
  background: #2c4058;
  color: #f4efe6;
}
html[data-theme="dark"] .action-btn {
  background: #243044;
  border-color: #3a4a5c;
  color: var(--navy);
}
html[data-theme="dark"] .action-btn.primary {
  background: #c4a35a;
  border-color: #c4a35a;
  color: #12171e;
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #12171e;
  color: var(--ink);
  border-color: #3a4a5c;
}
html[data-theme="dark"] .bubble blockquote,
html[data-theme="dark"] .bubble th,
html[data-theme="dark"] .quote-compare th {
  background: #243044;
  color: var(--navy);
}
html[data-theme="dark"] .bubble td,
html[data-theme="dark"] .quote-compare td {
  border-color: #3a4a5c;
}
.theme-toggle {
  margin-left: auto;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  min-height: 36px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 650;
  font-family: var(--sans);
  cursor: pointer;
}
.theme-toggle:focus-visible {
  outline: 3px solid rgba(196, 163, 90, 0.55);
  outline-offset: 2px;
}