/* Minimal theme switcher UI for quick testing */
.theme-switcher {
  position: fixed;
  left: 12px;   /* bottom-left on desktop to avoid nav + main content */
  bottom: 12px;
  background: rgba(0,0,0,0.78); /* less transparent for readability */
  color: #fff;
  padding: 10px;
  border-radius: 10px;
  z-index: 99999;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  box-shadow: 0 10px 26px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.12);
}
.theme-switcher .label {
  font-size: 12px;
  margin-bottom: 6px;
  display: block;
  opacity: 0.95;
}
.theme-switcher .buttons { display:flex; gap:6px; flex-wrap: wrap; max-width: 320px; row-gap: 6px; }
.theme-switcher button {
  border: none;
  background: rgba(255,255,255,0.08);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.theme-switcher button.active { background: rgba(255,255,255,0.18); font-weight:600 }
.theme-switcher button:focus { outline: 2px solid rgba(255,255,255,0.12); }

/* Small color swatch to preview each theme */
.theme-switcher button::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  background: currentColor;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25) inset;
}
.theme-switcher button[data-theme="active"] { color: #2b6cb0; }
.theme-switcher button[data-theme="teal"] { color: #14b8a6; }
.theme-switcher button[data-theme="slate"] { color: #2b4a6f; }
.theme-switcher button[data-theme="beavers"] { color: #DC4405; }
.theme-switcher button[data-theme="cougars"] { color: #981E32; }
.theme-switcher button[data-theme="blazers"] { color: #E03A3E; }
.theme-switcher button[data-theme="lutes"] { color: #FBBF16; }
.theme-switcher button[data-theme="storm"] { color: #F9A01B; }
.theme-switcher button[data-theme="seahawks"] { color: #69BE28; }
.theme-switcher button[data-theme="seahawks-gray"] { color: #A5ACAF; }
.theme-switcher button[data-theme="sounders"] { color: #73BE21; }
.theme-switcher button[data-theme="sounders-aqua"] { color: #77C7D3; }
.theme-switcher button[data-theme="mariners"] { color: #FFB81C; }
.theme-switcher button[data-theme="mariners-navy"] { color: #003278; }
@media (max-width:600px){
  .theme-switcher { left: auto; right: 8px; top: auto; bottom: 8px; padding:8px }
  .theme-switcher button { padding:5px 6px; font-size:12px }
}

/* Wider layouts: arrange buttons in a compact 3-column grid */
@media (min-width: 900px){
  .theme-switcher .buttons { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); column-gap: 6px; row-gap: 6px; }
}