/* Theme picker structure shared by every theme. Each theme restyles it through the --tp-* variables. */
.theme-picker {
  --tp-font: inherit;
  --tp-fg: #24242c;
  --tp-muted: #6b6b78;
  --tp-bg: #fff;
  --tp-line: rgba(20, 20, 30, .14);
  --tp-hover: rgba(20, 20, 30, .06);
  --tp-accent: #24242c;
  --tp-radius: 999px;
  --tp-menu-radius: 14px;
  --tp-toggle-bg: transparent;
  --tp-toggle-fg: var(--tp-fg);
  --tp-toggle-line: var(--tp-line);
  --tp-shadow: 0 18px 40px -18px rgba(20, 20, 30, .45);
  position: relative;
  display: inline-flex;
  font-family: var(--tp-font);
}
.theme-picker-fallback { color: inherit; }
.theme-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px 6px 9px;
  border: 1px solid var(--tp-toggle-line); border-radius: var(--tp-radius); background: var(--tp-toggle-bg); color: var(--tp-toggle-fg);
  font: inherit; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.theme-toggle:hover, .is-open > .theme-toggle { border-color: var(--tp-accent); }
.theme-toggle-label { opacity: .7; }
.theme-chevron { width: 7px; height: 7px; margin: -3px 1px 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.is-open .theme-chevron { margin-top: 3px; transform: rotate(225deg); }
.theme-swatches { display: inline-flex; flex: none; }
.theme-swatches i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--tp-swatch-ring, var(--tp-bg)); }
.theme-swatches i + i { margin-left: -4px; }
.theme-toggle .theme-swatches { --tp-swatch-ring: var(--tp-toggle-ring, var(--tp-toggle-bg)); }

.theme-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: min(320px, calc(100vw - 28px)); padding: 10px;
  border: 1px solid var(--tp-line); border-radius: var(--tp-menu-radius); background: var(--tp-bg); color: var(--tp-fg);
  box-shadow: var(--tp-shadow); text-align: left;
  animation: theme-menu-in .18s ease-out;
}
@keyframes theme-menu-in { from { opacity: 0; transform: translateY(-4px); } }
.theme-menu-title { margin: 4px 8px 8px; color: var(--tp-muted); font-size: 11px; font-weight: 700; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; }
.theme-options { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.theme-option {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 18px; align-items: center; gap: 12px;
  padding: 10px; border-radius: calc(var(--tp-menu-radius) - 4px); color: inherit; text-decoration: none;
}
.theme-option:hover, .theme-option:focus-visible { background: var(--tp-hover); }
.theme-option .theme-swatches i { width: 16px; height: 16px; }
.theme-option .theme-swatches i + i { margin-left: -6px; }
.theme-option-text { display: grid; gap: 2px; min-width: 0; }
.theme-option-text b { font-size: 15px; line-height: 1.2; }
.theme-option-text small { color: var(--tp-muted); font-size: 12.5px; line-height: 1.3; }
.theme-option-mark { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--tp-line); }
.theme-option[aria-current="page"] .theme-option-mark { background: var(--tp-accent); box-shadow: none; }
.theme-option[aria-current="page"] .theme-option-mark::after { content: ""; display: block; width: 5px; height: 9px; margin: 3px 0 0 6.5px; border-right: 2px solid var(--tp-bg); border-bottom: 2px solid var(--tp-bg); transform: rotate(45deg); }
.theme-gallery { display: block; margin: 6px 0 0; padding: 10px 10px 4px; border-top: 1px solid var(--tp-line); color: var(--tp-muted); font-size: 13px; text-decoration: none; }
.theme-gallery::after { content: " →"; }
.theme-gallery:hover { color: var(--tp-fg); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) { .theme-toggle-label { display: none; } }
@media (prefers-reduced-motion: reduce) { .theme-menu { animation: none; } .theme-toggle, .theme-chevron { transition: none; } }
@media print { .theme-picker { display: none; } }