/* Shared accents; defaults also work when scripts or browser storage are unavailable. */
:root {
  --theme-accent: #96e1ff;
  --theme-strong: #4ea9e7;
  --theme-light: #caefff;
  --theme-rgb: 150 225 255;
  --theme-rgb-comma: 150, 225, 255;
  --theme-strong-rgb: 78 169 231;
  --theme-strong-rgb-comma: 78, 169, 231;
}

::selection { background: rgb(var(--theme-rgb) / .28); color: #fff; }

.theme-picker {
  position: relative;
  flex-shrink: 0;
  z-index: 30;
  text-transform: none;
}
.theme-picker:empty { display: none; }
.theme-picker .theme-trigger,
.theme-picker .theme-option {
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  cursor: default;
  font-family: var(--mono, Consolas, monospace);
}
.theme-picker .theme-trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid rgb(var(--theme-rgb) / .2);
  border-radius: 10px;
  color: var(--theme-light);
  background: rgb(8 13 21 / .85);
  font-size: .62rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: lowercase;
  transition: border-color .18s ease, background .18s ease;
}
.theme-trigger::after {
  content: '';
  width: 5px;
  height: 5px;
  margin: -3px 1px 0 3px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.theme-trigger[aria-expanded="true"]::after { transform: translateY(3px) rotate(225deg); }
.theme-picker .theme-trigger:hover,
.theme-picker .theme-trigger[aria-expanded="true"] {
  border-color: rgb(var(--theme-rgb) / .55);
  background: linear-gradient(rgb(var(--theme-rgb) / .08), rgb(var(--theme-rgb) / .08)), #080d15;
}
.theme-current,
.theme-swatch {
  display: block;
  flex-shrink: 0;
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: 50%;
}
.theme-current {
  width: 10px;
  height: 10px;
  background: var(--theme-accent);
  box-shadow: 0 0 12px rgb(var(--theme-rgb) / .4);
}
.theme-picker .theme-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  width: min(282px, calc(100vw - 32px));
  padding: 10px;
  border: 1px solid rgb(var(--theme-rgb) / .3);
  border-radius: 15px;
  background: linear-gradient(145deg, rgb(var(--theme-rgb) / .04), transparent), #0c131e;
  box-shadow: 0 18px 50px rgb(0 0 0 / .5), 0 0 30px rgb(var(--theme-rgb) / .06);
}
.theme-picker .theme-panel[hidden] { display: none; }
.theme-picker .theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  min-height: 68px;
  padding: 8px 2px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #a7b6c9;
  background: transparent;
  font-size: .54rem;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -.03em;
  text-transform: none;
  transition: background .18s ease, border-color .18s ease;
}
.theme-swatch { width: 18px; height: 18px; background: var(--swatch); }
.theme-picker .theme-option:hover { background: rgb(255 255 255 / .045); }
.theme-picker .theme-option[aria-pressed="true"] {
  border-color: rgb(var(--theme-rgb) / .45);
  background: rgb(var(--theme-rgb) / .09);
  color: var(--theme-light);
}
.theme-option[aria-pressed="true"] .theme-swatch { box-shadow: 0 0 13px rgb(var(--theme-rgb) / .3); }
.theme-picker button:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 3px; }

.site-accent-control.theme-picker { position: fixed; z-index: 40; }
.setup-topbar > .theme-picker { margin-left: auto; }
.setup-topbar > .theme-picker + .setup-back { margin-left: 0; }

@media (max-width: 600px) {
  .theme-picker .theme-trigger { padding: 8px 9px; gap: 7px; font-size: .57rem; }
  .theme-picker .theme-panel { position: fixed; top: 72px; right: 16px; }
  .platinum-page .topbar-actions { gap: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-picker *, .theme-trigger::after { transition: none !important; }
}