:root {
  --font-display: "Space Grotesk", "Roboto", Arial, sans-serif;
  --font-body: "Outfit", "Roboto", Arial, sans-serif;
  --font-accent: "Fraunces", Georgia, serif;
  --csr-radius: 8px;
  --csr-radius-lg: 18px;
  --csr-radius-xl: 28px;
  --csr-nav-height: 76px;
}

html[data-theme-preset="apple"][data-bs-theme="light"],
html[data-theme-preset="apple"] {
  --csr-bg: #f5f5f7;
  --csr-surface: #ffffff;
  --csr-surface-2: #fbfbfd;
  --csr-surface-3: #e8e8ed;
  --csr-border: rgba(29, 29, 31, 0.12);
  --csr-border-strong: rgba(29, 29, 31, 0.22);
  --csr-text: #1d1d1f;
  --csr-muted: #515154;
  --csr-subtle: #6e6e73;
  --csr-accent: #0071e3;
  --csr-accent-2: #34c759;
  --csr-accent-3: #ff9f0a;
  --csr-danger: #ff453a;
  --csr-success: #30d158;
  --csr-warning: #ff9f0a;
  --csr-accent-contrast: #ffffff;
  --csr-shadow: 0 18px 48px rgba(0, 0, 0, 0.1);
  --csr-page-gradient: linear-gradient(135deg, #f5f5f7, #ffffff 48%, #eef3ff);
  --csr-navbar-bg: rgba(255, 255, 255, 0.84);
}

html[data-theme-preset="apple-dark"][data-bs-theme="dark"],
html[data-theme-preset="apple-dark"] {
  --csr-bg: #000000;
  --csr-surface: #161617;
  --csr-surface-2: #1d1d1f;
  --csr-surface-3: #2c2c2e;
  --csr-border: rgba(255, 255, 255, 0.14);
  --csr-border-strong: rgba(255, 255, 255, 0.25);
  --csr-text: #f5f5f7;
  --csr-muted: #c7c7cc;
  --csr-subtle: #8e8e93;
  --csr-accent: #0a84ff;
  --csr-accent-2: #32d74b;
  --csr-accent-3: #ffd60a;
  --csr-danger: #ff453a;
  --csr-success: #32d74b;
  --csr-warning: #ffd60a;
  --csr-accent-contrast: #ffffff;
  --csr-shadow: 0 24px 58px rgba(0, 0, 0, 0.44);
  --csr-page-gradient: radial-gradient(circle at 16% 8%, rgba(10, 132, 255, 0.2), transparent 28%), linear-gradient(135deg, #000000, #161617 52%, #24242a);
  --csr-navbar-bg: rgba(0, 0, 0, 0.78);
}

html[data-theme-preset="github"][data-bs-theme="light"],
html[data-theme-preset="github"] {
  --csr-bg: #f6f8fa;
  --csr-surface: #ffffff;
  --csr-surface-2: #f6f8fa;
  --csr-surface-3: #eaeef2;
  --csr-border: #d0d7de;
  --csr-border-strong: #8c959f;
  --csr-text: #24292f;
  --csr-muted: #57606a;
  --csr-subtle: #6e7781;
  --csr-accent: #0969da;
  --csr-accent-2: #1a7f37;
  --csr-accent-3: #bf8700;
  --csr-danger: #cf222e;
  --csr-success: #1a7f37;
  --csr-warning: #bf8700;
  --csr-accent-contrast: #ffffff;
  --csr-shadow: 0 12px 28px rgba(27, 31, 36, 0.12);
  --csr-page-gradient: linear-gradient(135deg, #f6f8fa, #ffffff 46%, #ddf4ff);
  --csr-navbar-bg: rgba(246, 248, 250, 0.92);
}

html[data-theme-preset="github-dark"][data-bs-theme="dark"],
html[data-theme-preset="github-dark"] {
  --csr-bg: #0d1117;
  --csr-surface: #161b22;
  --csr-surface-2: #0d1117;
  --csr-surface-3: #21262d;
  --csr-border: #30363d;
  --csr-border-strong: #8b949e;
  --csr-text: #f0f6fc;
  --csr-muted: #c9d1d9;
  --csr-subtle: #8b949e;
  --csr-accent: #58a6ff;
  --csr-accent-2: #3fb950;
  --csr-accent-3: #d29922;
  --csr-danger: #f85149;
  --csr-success: #3fb950;
  --csr-warning: #d29922;
  --csr-accent-contrast: #0d1117;
  --csr-shadow: 0 20px 48px rgba(1, 4, 9, 0.42);
  --csr-page-gradient: radial-gradient(circle at 15% 0%, rgba(88, 166, 255, 0.16), transparent 30%), linear-gradient(135deg, #0d1117, #161b22 58%, #0d1117);
  --csr-navbar-bg: rgba(13, 17, 23, 0.9);
}

html[data-theme-preset="github-dimmed"][data-bs-theme="dark"],
html[data-theme-preset="github-dimmed"] {
  --csr-bg: #22272e;
  --csr-surface: #2d333b;
  --csr-surface-2: #22272e;
  --csr-surface-3: #373e47;
  --csr-border: #444c56;
  --csr-border-strong: #768390;
  --csr-text: #adbac7;
  --csr-muted: #adbac7;
  --csr-subtle: #768390;
  --csr-accent: #539bf5;
  --csr-accent-2: #57ab5a;
  --csr-accent-3: #c69026;
  --csr-danger: #e5534b;
  --csr-success: #57ab5a;
  --csr-warning: #c69026;
  --csr-accent-contrast: #0d1117;
  --csr-shadow: 0 20px 48px rgba(0, 0, 0, 0.34);
  --csr-page-gradient: linear-gradient(135deg, #22272e, #2d333b 58%, #1c2128);
  --csr-navbar-bg: rgba(34, 39, 46, 0.92);
}

html[data-theme-preset="github-contrast"][data-bs-theme="dark"],
html[data-theme-preset="github-contrast"] {
  --csr-bg: #010409;
  --csr-surface: #0d1117;
  --csr-surface-2: #010409;
  --csr-surface-3: #161b22;
  --csr-border: #7a828e;
  --csr-border-strong: #bdc4cc;
  --csr-text: #ffffff;
  --csr-muted: #f0f3f6;
  --csr-subtle: #bdc4cc;
  --csr-accent: #71b7ff;
  --csr-accent-2: #7ee787;
  --csr-accent-3: #ffd33d;
  --csr-danger: #ff7b72;
  --csr-success: #7ee787;
  --csr-warning: #ffd33d;
  --csr-accent-contrast: #010409;
  --csr-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 22px 52px rgba(0, 0, 0, 0.5);
  --csr-page-gradient: linear-gradient(135deg, #010409, #0d1117 58%, #010409);
  --csr-navbar-bg: rgba(1, 4, 9, 0.94);
}

html[data-theme-preset="opencode"][data-bs-theme="light"],
html[data-theme-preset="opencode"] {
  --csr-bg: #fbfaf7;
  --csr-surface: #ffffff;
  --csr-surface-2: #f4f2ed;
  --csr-surface-3: #ebe7df;
  --csr-border: rgba(22, 24, 29, 0.16);
  --csr-border-strong: rgba(22, 24, 29, 0.28);
  --csr-text: #16181d;
  --csr-muted: #555b66;
  --csr-subtle: #747b86;
  --csr-accent: #111827;
  --csr-accent-2: #0f766e;
  --csr-accent-3: #b45309;
  --csr-danger: #dc2626;
  --csr-success: #15803d;
  --csr-warning: #b45309;
  --csr-accent-contrast: #ffffff;
  --csr-shadow: 0 18px 42px rgba(22, 24, 29, 0.12);
  --csr-page-gradient: linear-gradient(135deg, #fbfaf7, #ffffff 46%, #edf7f3);
  --csr-navbar-bg: rgba(251, 250, 247, 0.9);
}

html[data-theme-preset="terminal"][data-bs-theme="dark"],
html[data-theme-preset="terminal"] {
  --csr-bg: #050807;
  --csr-surface: #0c1110;
  --csr-surface-2: #07100d;
  --csr-surface-3: #14201c;
  --csr-border: rgba(80, 255, 178, 0.25);
  --csr-border-strong: rgba(80, 255, 178, 0.48);
  --csr-text: #e7fff3;
  --csr-muted: #9ee8c4;
  --csr-subtle: #65b992;
  --csr-accent: #50ffb2;
  --csr-accent-2: #00d4ff;
  --csr-accent-3: #f5d76e;
  --csr-danger: #ff5c7a;
  --csr-success: #50ffb2;
  --csr-warning: #f5d76e;
  --csr-accent-contrast: #03110a;
  --csr-shadow: 0 0 0 1px rgba(80, 255, 178, 0.12), 0 22px 58px rgba(0, 0, 0, 0.52);
  --csr-page-gradient: radial-gradient(circle at 12% 10%, rgba(80, 255, 178, 0.14), transparent 30%), linear-gradient(135deg, #050807, #0c1110 56%, #07100d);
  --csr-navbar-bg: rgba(5, 8, 7, 0.92);
}

html[data-theme-preset="aurora"][data-bs-theme="dark"],
html[data-theme-preset="aurora"] {
  --csr-bg: #0d1120;
  --csr-surface: #111930;
  --csr-surface-2: #172244;
  --csr-surface-3: #22315f;
  --csr-border: rgba(128, 173, 255, 0.22);
  --csr-border-strong: rgba(128, 173, 255, 0.38);
  --csr-text: #f5f7ff;
  --csr-muted: #c5d5f2;
  --csr-subtle: #9fb4db;
  --csr-accent: #6ef3d6;
  --csr-accent-2: #7f7cff;
  --csr-accent-3: #ff7db8;
  --csr-danger: #ff6b81;
  --csr-success: #6ef3d6;
  --csr-warning: #ffd166;
  --csr-accent-contrast: #08121d;
  --csr-shadow: 0 24px 60px rgba(12, 24, 48, 0.45);
  --csr-page-gradient: radial-gradient(circle at top left, rgba(127, 124, 255, 0.2), transparent 34%), radial-gradient(circle at 85% 8%, rgba(110, 243, 214, 0.18), transparent 26%), linear-gradient(135deg, #0c1020, #11172c 42%, #151f3d 100%);
  --csr-navbar-bg: rgba(13, 17, 32, 0.9);
}

html[data-theme-preset="ember"][data-bs-theme="dark"],
html[data-theme-preset="ember"] {
  --csr-bg: #160d0a;
  --csr-surface: #241510;
  --csr-surface-2: #2d1d16;
  --csr-surface-3: #3a271c;
  --csr-border: rgba(255, 170, 92, 0.24);
  --csr-border-strong: rgba(255, 196, 120, 0.42);
  --csr-text: #fff8ed;
  --csr-muted: #ead2b8;
  --csr-subtle: #c7a98a;
  --csr-accent: #ffb15c;
  --csr-accent-2: #ff6b4a;
  --csr-accent-3: #7dd3fc;
  --csr-danger: #ff5c7a;
  --csr-success: #7dd3fc;
  --csr-warning: #ffb15c;
  --csr-accent-contrast: #1a0d08;
  --csr-shadow: 0 24px 60px rgba(36, 12, 5, 0.48);
  --csr-page-gradient: radial-gradient(circle at 14% 8%, rgba(255, 177, 92, 0.2), transparent 30%), radial-gradient(circle at 82% 12%, rgba(125, 211, 252, 0.14), transparent 24%), linear-gradient(135deg, #160d0a, #241510 46%, #301b12 100%);
  --csr-navbar-bg: rgba(22, 13, 10, 0.9);
}

html[data-theme-preset="lagoon"][data-bs-theme="dark"],
html[data-theme-preset="lagoon"] {
  --csr-bg: #06161b;
  --csr-surface: #0c2229;
  --csr-surface-2: #122f35;
  --csr-surface-3: #17424b;
  --csr-border: rgba(112, 221, 201, 0.2);
  --csr-border-strong: rgba(112, 221, 201, 0.38);
  --csr-text: #effffb;
  --csr-muted: #c2e4df;
  --csr-subtle: #9ec9c3;
  --csr-accent: #70ddc9;
  --csr-accent-2: #1ec5ff;
  --csr-accent-3: #b6ff5d;
  --csr-danger: #ff6b6b;
  --csr-success: #70ddc9;
  --csr-warning: #f4d35e;
  --csr-accent-contrast: #062127;
  --csr-shadow: 0 24px 60px rgba(5, 41, 45, 0.35);
  --csr-page-gradient: radial-gradient(circle at 12% 8%, rgba(30, 197, 255, 0.18), transparent 28%), radial-gradient(circle at 82% 12%, rgba(182, 255, 93, 0.15), transparent 24%), linear-gradient(135deg, #07161b, #0a2529 46%, #0e3439 100%);
  --csr-navbar-bg: rgba(6, 22, 27, 0.9);
}

html[data-theme-preset="legacy"][data-bs-theme="dark"],
html[data-theme-preset="legacy"] {
  --csr-bg: #121212;
  --csr-surface: #1c1c1c;
  --csr-surface-2: #121212;
  --csr-surface-3: #000000;
  --csr-border: #495057;
  --csr-border-strong: #6c757d;
  --csr-text: #eae0c8;
  --csr-muted: #d7cdb7;
  --csr-subtle: #a9a294;
  --csr-accent: #39ff14;
  --csr-accent-2: #ffc107;
  --csr-accent-3: #4cc9f0;
  --csr-danger: #ff6b6b;
  --csr-success: #39ff14;
  --csr-warning: #ffc107;
  --csr-accent-contrast: #08110a;
  --csr-shadow: 0 16px 42px rgba(0, 0, 0, 0.44);
  --csr-page-gradient: linear-gradient(135deg, #121212, #1b1b1b 52%, #0d0d0d);
  --csr-navbar-bg: rgba(0, 0, 0, 0.9);
}

html[data-theme-preset="pdo"][data-bs-theme="light"],
html[data-theme-preset="pdo"] {
  --csr-bg: #f4f7f3;
  --csr-surface: #ffffff;
  --csr-surface-2: #edf4ef;
  --csr-surface-3: #dfeadf;
  --csr-border: rgba(20, 72, 48, 0.16);
  --csr-border-strong: rgba(20, 72, 48, 0.32);
  --csr-text: #14241b;
  --csr-muted: #506457;
  --csr-subtle: #738073;
  --csr-accent: #007a3d;
  --csr-accent-2: #b31942;
  --csr-accent-3: #d99a29;
  --csr-danger: #b31942;
  --csr-success: #007a3d;
  --csr-warning: #d99a29;
  --csr-accent-contrast: #ffffff;
  --csr-shadow: 0 18px 46px rgba(20, 72, 48, 0.14);
  --csr-page-gradient: linear-gradient(135deg, #f4f7f3, #ffffff 44%, #e8f2ec);
  --csr-navbar-bg: rgba(244, 247, 243, 0.92);
}

html[data-theme-preset="desert"][data-bs-theme="light"],
html[data-theme-preset="desert"] {
  --csr-bg: #fbf5ea;
  --csr-surface: #ffffff;
  --csr-surface-2: #f7ecdc;
  --csr-surface-3: #ecd9bd;
  --csr-border: rgba(98, 73, 44, 0.18);
  --csr-border-strong: rgba(98, 73, 44, 0.32);
  --csr-text: #2f271d;
  --csr-muted: #685a48;
  --csr-subtle: #8a7760;
  --csr-accent: #b86b22;
  --csr-accent-2: #1e7f78;
  --csr-accent-3: #244f73;
  --csr-danger: #b94835;
  --csr-success: #2e7d32;
  --csr-warning: #b86b22;
  --csr-accent-contrast: #ffffff;
  --csr-shadow: 0 18px 42px rgba(83, 55, 25, 0.16);
  --csr-page-gradient: linear-gradient(135deg, #fbf5ea, #ffffff 46%, #eef7f4);
  --csr-navbar-bg: rgba(251, 245, 234, 0.92);
}

html[data-theme-preset="nightops"][data-bs-theme="dark"],
html[data-theme-preset="nightops"] {
  --csr-bg: #070d16;
  --csr-surface: #0d1726;
  --csr-surface-2: #101f35;
  --csr-surface-3: #182c49;
  --csr-border: rgba(72, 128, 181, 0.26);
  --csr-border-strong: rgba(124, 169, 211, 0.46);
  --csr-text: #f4f8fb;
  --csr-muted: #bdd1df;
  --csr-subtle: #8caabd;
  --csr-accent: #f2b84b;
  --csr-accent-2: #4cc9f0;
  --csr-accent-3: #80ed99;
  --csr-danger: #ff5c7a;
  --csr-success: #80ed99;
  --csr-warning: #f2b84b;
  --csr-accent-contrast: #07101c;
  --csr-shadow: 0 24px 60px rgba(3, 8, 18, 0.5);
  --csr-page-gradient: radial-gradient(circle at 14% 8%, rgba(76, 201, 240, 0.18), transparent 30%), linear-gradient(135deg, #070d16, #0d1726 48%, #111f33);
  --csr-navbar-bg: rgba(7, 13, 22, 0.92);
}

html[data-theme-preset="sabkha"][data-bs-theme="light"],
html[data-theme-preset="sabkha"] {
  --csr-bg: #f8fbfb;
  --csr-surface: #ffffff;
  --csr-surface-2: #eff7f7;
  --csr-surface-3: #dbeeee;
  --csr-border: rgba(39, 93, 105, 0.18);
  --csr-border-strong: rgba(39, 93, 105, 0.34);
  --csr-text: #12313a;
  --csr-muted: #4e6d73;
  --csr-subtle: #6f8b91;
  --csr-accent: #1d7f78;
  --csr-accent-2: #264f73;
  --csr-accent-3: #e49a2f;
  --csr-danger: #b94835;
  --csr-success: #1d7f78;
  --csr-warning: #e49a2f;
  --csr-accent-contrast: #ffffff;
  --csr-shadow: 0 18px 42px rgba(39, 93, 105, 0.14);
  --csr-page-gradient: linear-gradient(135deg, #f8fbfb, #ffffff 44%, #ecf4ef);
  --csr-navbar-bg: rgba(248, 251, 251, 0.92);
}

html[data-bs-theme="light"] {
  color-scheme: light;
}

html[data-bs-theme="dark"] {
  color-scheme: dark;
}

.theme-menu {
  width: min(92vw, 560px);
  max-height: min(76vh, 680px);
  padding: 0.85rem;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.theme-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0.4rem 0.75rem;
}

.theme-menu__title {
  display: grid;
  gap: 0.1rem;
}

.theme-menu__title strong {
  color: var(--csr-text);
  font-size: 0.92rem;
}

.theme-menu__title span {
  color: var(--csr-subtle);
  font-size: 0.78rem;
}

.theme-mode-button {
  border: 1px solid var(--csr-border);
  border-radius: 999px;
  background: var(--csr-surface-2);
  color: var(--csr-text);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 36px;
  padding: 0 0.8rem;
  font-weight: 800;
}

.theme-menu__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
}

.theme-choice {
  border: 1px solid var(--csr-border);
  border-radius: 8px;
  background: var(--csr-surface-2);
  color: var(--csr-text);
  display: grid;
  gap: 0.4rem;
  min-height: 64px;
  min-width: 0;
  padding: 0.65rem;
  text-align: left;
  white-space: normal;
}

.theme-choice:hover,
.theme-choice:focus,
.theme-choice.is-active {
  border-color: var(--csr-accent);
  color: var(--csr-accent);
}

.theme-choice__swatch {
  display: block;
  width: 100%;
  height: 0.55rem;
  border-radius: 999px;
}

.theme-choice__name {
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.theme-choice__swatch--apple { background: linear-gradient(90deg, #f5f5f7, #0071e3, #34c759); }
.theme-choice__swatch--apple-dark { background: linear-gradient(90deg, #000000, #0a84ff, #ffd60a); }
.theme-choice__swatch--github { background: linear-gradient(90deg, #f6f8fa, #0969da, #1a7f37); }
.theme-choice__swatch--github-dark { background: linear-gradient(90deg, #0d1117, #58a6ff, #3fb950); }
.theme-choice__swatch--github-dimmed { background: linear-gradient(90deg, #22272e, #539bf5, #c69026); }
.theme-choice__swatch--github-contrast { background: linear-gradient(90deg, #010409, #ffffff, #71b7ff); }
.theme-choice__swatch--opencode { background: linear-gradient(90deg, #fbfaf7, #111827, #0f766e); }
.theme-choice__swatch--terminal { background: linear-gradient(90deg, #050807, #50ffb2, #00d4ff); }
.theme-choice__swatch--aurora { background: linear-gradient(90deg, #6ef3d6, #7f7cff, #ff7db8); }
.theme-choice__swatch--ember { background: linear-gradient(90deg, #160d0a, #ffb15c, #7dd3fc); }
.theme-choice__swatch--lagoon { background: linear-gradient(90deg, #70ddc9, #1ec5ff, #b6ff5d); }
.theme-choice__swatch--legacy { background: linear-gradient(90deg, #000000, #39ff14, #ffc107); }
.theme-choice__swatch--pdo { background: linear-gradient(90deg, #007a3d, #b31942, #d99a29); }
.theme-choice__swatch--desert { background: linear-gradient(90deg, #b86b22, #1e7f78, #264f73); }
.theme-choice__swatch--nightops { background: linear-gradient(90deg, #070d16, #f2b84b, #4cc9f0); }
.theme-choice__swatch--sabkha { background: linear-gradient(90deg, #f8fbfb, #1d7f78, #e49a2f); }