/* Theme menu – shared by all themes (always loaded).
   Each theme sets the --menu-* variables to match its own look. */

[hidden] { display: none !important; }

.theme-picker { position: relative; display: inline-flex; }

.design-menu {
  position: absolute; right: 0; top: calc(100% + .375rem); z-index: 50;
  min-width: 13rem; padding: .375rem;
  background: var(--menu-bg, #fff); color: var(--menu-fg, #000);
  border: 1px solid var(--menu-border, rgba(0, 0, 0, .12));
  border-radius: var(--menu-radius, 0);
  box-shadow: var(--menu-shadow, 0 8px 24px rgba(0, 0, 0, .18));
  transform-origin: top right; /* grows out of the palette button */
  animation: design-menu-in .16s ease-out;
}
@keyframes design-menu-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } }

.design-menu-title {
  margin: 0; padding: .375rem .625rem .25rem;
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  opacity: .7;
}

.design-option {
  display: flex; align-items: center; gap: .75rem;
  width: 100%; min-height: 2.75rem; padding: .375rem .625rem;
  background: none; border: 0; border-radius: var(--menu-item-radius, 0);
  color: inherit; font: inherit; font-size: 1rem; line-height: 1.2; text-align: left;
  cursor: pointer;
}
.design-option:hover { background: var(--menu-hover, rgba(0, 0, 0, .06)); }
.design-option:focus-visible {
  background: var(--menu-hover, rgba(0, 0, 0, .06));
  outline: 2px solid var(--menu-accent, currentColor); outline-offset: -2px;
}
.design-option[aria-checked="true"] { font-weight: 700; }
.design-option .check {
  margin-left: auto; width: 1.125rem; height: 1.125rem; flex: none; visibility: hidden;
  fill: none; stroke: var(--menu-accent, currentColor); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.design-option[aria-checked="true"] .check { visibility: visible; }

/* Preview swatches */
.swatch { width: 1.5rem; height: 1.5rem; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.swatch-default { background: linear-gradient(135deg, #111 0 50%, #e17000 50% 100%); }
.swatch-apple   { background: linear-gradient(135deg, #f2f2f7 0 50%, #ff9f0a 50% 100%); }
.swatch-poker   { background: radial-gradient(circle, #f7f1e1 0 30%, #b8202f 32% 42%, #1f6b45 44%); }
.swatch-terminal {
  background: linear-gradient(#39ff6e, #39ff6e) 30% 62% / 40% 2px no-repeat,          /* cursor line */
              radial-gradient(circle, #0d1d10 0 60%, #050a06 100%);
  box-shadow: inset 0 0 0 1px #39ff6e;
}
.swatch-crt {
  border-radius: 6px; /* a little screen */
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px),
              radial-gradient(ellipse at 50% 45%, #ffb000 0 18%, #3a2205 55%, #120b02);
  box-shadow: 0 0 0 2px #2b2823, 0 0 6px rgba(255, 176, 0, .6);
}

@media (prefers-reduced-motion: reduce) { .design-menu { animation: none; } }