/* Extra color themes. Each one sits on top of the dark or light base
   (data-theme) and only swaps colors. Loaded by the site and the dashboard. */
html[data-palette='midnight'] {
  --canvas: #070b14; --panel: #0d1322; --raised: #151d31; --selected: #1c2640; --line: #1d2740; --line-strong: #2e3b5c;
  --fg: #eef2ff; --body: #b6bfd6; --muted: #8790ab; --faint: #5c6580; --invert: #eef2ff; --invert-ink: #070b14;
  --accent: #4f7cff; --accent-strong: #8aa6ff; --header-bg: rgba(7, 11, 20, 0.82); --term: #060912;
  --bg: #070b14; --bg-2: #0d1322; --panel-2: #151d31; --line-2: #2e3b5c; --text: #eef2ff; --accent-2: #8aa6ff;
}
html[data-palette='amethyst'] {
  --canvas: #0b0710; --panel: #120c19; --raised: #1b1325; --selected: #241a31; --line: #251b33; --line-strong: #3a2c4f;
  --fg: #f6f0ff; --body: #c4b8d6; --muted: #9a8cae; --faint: #6a5d7d; --invert: #f6f0ff; --invert-ink: #0b0710;
  --accent: #8b5cf6; --accent-strong: #b794ff; --header-bg: rgba(11, 7, 16, 0.82); --term: #08050c;
  --bg: #0b0710; --bg-2: #120c19; --panel-2: #1b1325; --line-2: #3a2c4f; --text: #f6f0ff; --accent-2: #b794ff;
}
html[data-palette='emerald'] {
  --canvas: #04100b; --panel: #081812; --raised: #0f221a; --selected: #152c22; --line: #163025; --line-strong: #23483a;
  --fg: #ecfdf5; --body: #b3d4c6; --muted: #84a898; --faint: #5a7b6d; --invert: #ecfdf5; --invert-ink: #04100b;
  --accent: #10b981; --accent-strong: #5ee3b4; --header-bg: rgba(4, 16, 11, 0.82); --term: #030c08;
  --bg: #04100b; --bg-2: #081812; --panel-2: #0f221a; --line-2: #23483a; --text: #ecfdf5; --accent-2: #5ee3b4;
}
html[data-palette='crimson'] {
  --canvas: #0f0506; --panel: #170a0c; --raised: #221013; --selected: #2c161a; --line: #2e161a; --line-strong: #4a2329;
  --fg: #fff1f2; --body: #d9b8bc; --muted: #ae8a8f; --faint: #7d5c61; --invert: #fff1f2; --invert-ink: #0f0506;
  --accent: #ef4444; --accent-strong: #ff8a8a; --header-bg: rgba(15, 5, 6, 0.82); --term: #0b0304;
  --bg: #0f0506; --bg-2: #170a0c; --panel-2: #221013; --line-2: #4a2329; --text: #fff1f2; --accent-2: #ff8a8a;
}
html[data-palette='sunset'] {
  --canvas: #100904; --panel: #180e07; --raised: #23150b; --selected: #2d1c10; --line: #301e11; --line-strong: #4d321d;
  --fg: #fff7ed; --body: #dcc4ad; --muted: #ad927a; --faint: #7c6450; --invert: #fff7ed; --invert-ink: #100904;
  --accent: #f97316; --accent-strong: #ffa766; --header-bg: rgba(16, 9, 4, 0.82); --term: #0b0603;
  --bg: #100904; --bg-2: #180e07; --panel-2: #23150b; --line-2: #4d321d; --text: #fff7ed; --accent-2: #ffa766;
}
html[data-palette='rose'] {
  --canvas: #fff7f9; --panel: #ffffff; --raised: #fdeef2; --selected: #fae1e8; --line: #f5dbe2; --line-strong: #eabccb;
  --fg: #1f0a12; --body: #4d3640; --muted: #7a5f6a; --faint: #ad919c; --invert: #1f0a12; --invert-ink: #fff7f9;
  --accent: #e11d63; --accent-strong: #be124f; --header-bg: rgba(255, 247, 249, 0.82);
  --bg: #fff7f9; --bg-2: #ffffff; --panel-2: #fdeef2; --line-2: #eabccb; --text: #1f0a12; --accent-2: #be124f;
}
html[data-palette='sky'] {
  --canvas: #f5f9ff; --panel: #ffffff; --raised: #eaf2ff; --selected: #dce9ff; --line: #dbe6f7; --line-strong: #bcd0ee;
  --fg: #0a1426; --body: #34425c; --muted: #5d6b85; --faint: #93a0b8; --invert: #0a1426; --invert-ink: #f5f9ff;
  --accent: #0284c7; --accent-strong: #0369a1; --header-bg: rgba(245, 249, 255, 0.82);
  --bg: #f5f9ff; --bg-2: #ffffff; --panel-2: #eaf2ff; --line-2: #bcd0ee; --text: #0a1426; --accent-2: #0369a1;
}

/* Theme picker */
.theme-pop { position: fixed; z-index: 200; width: 260px; padding: 10px; border-radius: 14px; border: 1px solid var(--line-strong, var(--line-2)); background: var(--panel); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6); animation: theme-pop-in .18s cubic-bezier(0.22, 0.8, 0.24, 1); }
.theme-pop h4 { margin: 2px 6px 10px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.theme-pop .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.theme-pop button { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--fg, var(--text)); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; text-align: left; transition: background .12s, border-color .12s; }
.theme-pop button:hover { background: var(--raised, var(--panel-2)); }
.theme-pop button[aria-checked='true'] { border-color: var(--accent); background: var(--raised, var(--panel-2)); }
.theme-pop .sw { width: 22px; height: 22px; border-radius: 7px; flex: none; position: relative; border: 1px solid rgba(127, 127, 127, 0.35); background: var(--a); overflow: hidden; }
.theme-pop .sw::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 4px 0 0 0; background: var(--b); }
@keyframes theme-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }