.settings-toggle {
  position: fixed; top: 18px; right: 20px; z-index: 110;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--ink-faint, #6b6557);
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.settings-toggle:hover {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.settings-toggle[aria-expanded="true"] {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.settings-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.settings-toggle svg {
  width: 18px; height: 18px;
  transition: transform 600ms cubic-bezier(.3,1.4,.5,1);
}
.settings-toggle:hover svg { transform: rotate(60deg); }
.settings-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }

.settings-popover {
  position: fixed; top: 64px; right: 16px; z-index: 109;
  min-width: 268px;
  background: var(--panel, #fbf7eb);
  border: 1px solid var(--rule, rgba(22,20,15,0.10));
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 18px 50px rgba(22,20,15,0.18), 0 2px 6px rgba(22,20,15,0.06);
  color: var(--ink, #16140f);
  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
  animation: settings-pop 160ms ease-out;
}
.settings-popover[hidden] { display: none; }
@keyframes settings-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.settings-eyebrow {
  padding: 12px 12px 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint, #9a9485);
}
.settings-eyebrow:first-child { padding-top: 8px; }

.settings-theme-rows { display: flex; flex-direction: column; }
.settings-row {
  padding: 9px 10px;
  border-radius: 9px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%; text-align: left;
  color: inherit; font: inherit;
  transition: background 120ms ease;
}
.settings-row:hover { background: var(--panel-alt, #ede7d6); }
.settings-row[data-active="true"] { background: var(--accent-soft); }
.settings-row-chip {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--rule, rgba(22,20,15,0.10));
  flex-shrink: 0;
}
.settings-row-chip[data-theme-swatch="paper"]  { background: #f7f6fe; }
.settings-row-chip[data-theme-swatch="night"]  { background: #15131c; }
.settings-row-chip[data-theme-swatch="system"] { background: linear-gradient(135deg, #f7f6fe 50%, #15131c 50%); }
.settings-row-text { flex: 1; min-width: 0; }
.settings-row-label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.settings-row-hint {
  display: block;
  font-size: 12px;
  color: var(--ink-muted, #6b6557);
}

.settings-accent-grid {
  padding: 4px 8px 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.settings-swatch {
  position: relative;
  display: grid; place-items: center; gap: 4px;
  padding: 8px 4px 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  background: transparent;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.settings-swatch:hover {
  background: var(--panel-alt, #ede7d6);
  transform: translateY(-1px);
}
.settings-swatch:focus-visible {
  outline: 2px solid var(--ink-faint);
  outline-offset: 2px;
}
.settings-swatch[data-active="true"] {
  background: var(--panel-alt, #ede7d6);
  border-color: color-mix(in srgb, var(--ink) 14%, transparent);
}
.settings-swatch-dot {
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--swatch-color, var(--accent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent),
              0 1px 2px rgba(0,0,0,0.10);
  position: relative;
}
.settings-swatch[data-active="true"] .settings-swatch-dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 2px solid var(--bg, #f2ede0);
  box-shadow: 0 0 0 2px var(--swatch-color, var(--accent));
}
.settings-swatch-label {
  font-size: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  color: var(--ink-muted, #6b6557);
}
.settings-swatch[data-active="true"] .settings-swatch-label { color: var(--ink); }

html[data-theme="paper"][data-accent="forest"], html[data-theme="light"][data-accent="forest"] { --accent: #2f7152; --accent-deep: #1f4f37; --accent-soft: rgba(47,113,82,0.12); }
html[data-theme="night"][data-accent="forest"], html[data-theme="dark"][data-accent="forest"]  { --accent: #5cba88; --accent-deep: #3d9067; --accent-soft: rgba(92,186,136,0.16); }

html[data-theme="paper"][data-accent="ocean"],  html[data-theme="light"][data-accent="ocean"]  { --accent: #1f6f87; --accent-deep: #145366; --accent-soft: rgba(31,111,135,0.12); }
html[data-theme="night"][data-accent="ocean"],  html[data-theme="dark"][data-accent="ocean"]   { --accent: #5cc3d8; --accent-deep: #3aa0b8; --accent-soft: rgba(92,195,216,0.16); }

html[data-theme="paper"][data-accent="indigo"], html[data-theme="light"][data-accent="indigo"] { --accent: #4a55a8; --accent-deep: #353f80; --accent-soft: rgba(74,85,168,0.12); }
html[data-theme="night"][data-accent="indigo"], html[data-theme="dark"][data-accent="indigo"]  { --accent: #8590dc; --accent-deep: #5d6abc; --accent-soft: rgba(133,144,220,0.16); }

html[data-theme="paper"][data-accent="plum"],   html[data-theme="light"][data-accent="plum"]   { --accent: #7d3a6b; --accent-deep: #5a2750; --accent-soft: rgba(125,58,107,0.12); }
html[data-theme="night"][data-accent="plum"],   html[data-theme="dark"][data-accent="plum"]    { --accent: #bf80b0; --accent-deep: #95588a; --accent-soft: rgba(191,128,176,0.16); }

html[data-theme="paper"][data-accent="amber"],  html[data-theme="light"][data-accent="amber"]  { --accent: #b8801c; --accent-deep: #8a5e10; --accent-soft: rgba(184,128,28,0.12); }
html[data-theme="night"][data-accent="amber"],  html[data-theme="dark"][data-accent="amber"]   { --accent: #e0b056; --accent-deep: #b88330; --accent-soft: rgba(224,176,86,0.16); }

html[data-theme="paper"][data-accent="rose"],   html[data-theme="light"][data-accent="rose"]   { --accent: #c4577b; --accent-deep: #9a3f5e; --accent-soft: rgba(196,87,123,0.12); }
html[data-theme="night"][data-accent="rose"],   html[data-theme="dark"][data-accent="rose"]    { --accent: #ec8ea8; --accent-deep: #c46582; --accent-soft: rgba(236,142,168,0.16); }