/* The toggle is outside the external-links group so it remains visible on mobile. */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--muted);
}
.theme-toggle:hover { color: var(--text); background: var(--raised); }
.theme-toggle i { font-size: 13px; }

/* Soft charcoal with a slight blue undertone, avoiding pure-black surfaces. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #232831;
  --surface: #2b323e;
  --raised: #343d4b;
  --line: #424b59;
  --text: #e7eaf0;
  --muted: #b0b8c5;
  --cyan: #a6bcdf;
  --purple: #a6bcdf;
}
html[data-theme="dark"] ::selection { background: #46566e; }
html[data-theme="dark"] .header { background: #232831f5; }
html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .brand-mark span,
html[data-theme="dark"] .project-icon { color: #c0cbdc; }
html[data-theme="dark"] .nav-link:hover { background: #2e3744; }
html[data-theme="dark"] .nav-link.active { background: #354052; }
html[data-theme="dark"] .support-card,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .catalog-search,
html[data-theme="dark"] .login-card input { background: #2a313c; }
html[data-theme="dark"] input::placeholder { color: #a6afbe; }
html[data-theme="dark"] .script-card:hover { background: #303947; border-color: #78879d; }
html[data-theme="dark"] .script-icon { background: #363f4e; color: #becbdc; }
html[data-theme="dark"] .card-arrow { color: #a3afc0; }
html[data-theme="dark"] .script-card-footer { color: #c2cbda; }
html[data-theme="dark"] .markdown { color: #c4cbd7; }
html[data-theme="dark"] .markdown :not(pre) > code { color: #c4d4ed; background: #343e4c; }
html[data-theme="dark"] .markdown a:hover { color: #cedaf0; }
html[data-theme="dark"] .markdown pre { background: #282f39; }
html[data-theme="dark"] .markdown pre code,
html[data-theme="dark"] .markdown .hljs { color: #d3dae5; }
html[data-theme="dark"] .code-toolbar { background: #333c49; }
html[data-theme="dark"] .copy-code { border-color: #526074; }
html[data-theme="dark"] .markdown blockquote { background: #303a47; color: #c0ccdd; border-left-color: #8192aa; }
html[data-theme="dark"] .markdown .callout,
html[data-theme="dark"] .markdown .important { background: #2e3948; border-color: #485b73; border-left-color: #8ba2c1; }
html[data-theme="dark"] .markdown .warning,
html[data-theme="dark"] .markdown .caution { background: #3c3830; border-color: #645942; border-left-color: #bda16b; }
html[data-theme="dark"] .warning .callout-title,
html[data-theme="dark"] .caution .callout-title { color: #ddc290 !important; }
html[data-theme="dark"] .markdown th { background: #343e4c; color: #d6deea; }
html[data-theme="dark"] .markdown td { background: #2a323e; }
html[data-theme="dark"] .page-card { background: #2a323e; }
html[data-theme="dark"] .page-card:hover { border-color: #78879d; }
html[data-theme="dark"] .toast { background: #303a48; border-color: #57657a; box-shadow: 0 4px 16px #18202a33; }
html[data-theme="dark"] .button.primary { background: #a6bcdf; border-color: #a6bcdf; color: #263141; }
html[data-theme="dark"] .button.primary:hover { background: #bfd0eb; }
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .preview-pane { background: var(--surface); }
html[data-theme="dark"] .login-card #login-error { color: #f0b1aa; }
html[data-theme="dark"] #source { background: #282f39; color: #d1d9e5; }

/* Override the light syntax palette without fetching another stylesheet on toggle. */
html[data-theme="dark"] .hljs-comment,
html[data-theme="dark"] .hljs-quote { color: #a0adbf; }
html[data-theme="dark"] .hljs-keyword,
html[data-theme="dark"] .hljs-selector-tag,
html[data-theme="dark"] .hljs-literal { color: #dab0bc; }
html[data-theme="dark"] .hljs-string,
html[data-theme="dark"] .hljs-regexp,
html[data-theme="dark"] .hljs-doctag { color: #b2cfbc; }
html[data-theme="dark"] .hljs-number,
html[data-theme="dark"] .hljs-attr,
html[data-theme="dark"] .hljs-variable,
html[data-theme="dark"] .hljs-meta { color: #adc7e8; }
html[data-theme="dark"] .hljs-title,
html[data-theme="dark"] .hljs-section,
html[data-theme="dark"] .hljs-built_in,
html[data-theme="dark"] .hljs-type { color: #c5b9df; }
html[data-theme="dark"] .hljs-symbol,
html[data-theme="dark"] .hljs-bullet { color: #d3be9d; }
html[data-theme="dark"] .hljs-addition { color: #bed7c4; background: #354b3d; }
html[data-theme="dark"] .hljs-deletion { color: #e5b9b9; background: #513b3e; }

@media (max-width: 650px) {
  .header { gap: 8px; }
  .project-switch select { width: 120px; }
  .editor-body .header-links > a { display: none; }
}