.multi-dashboard, .plans-page {
  --select-surface: #fffef8;
  --select-ink: #252820;
  --select-line: #d5d6ca;
  --select-hover: #f1eee5;
  --select-active: #ede8f9;
  --select-accent: #6753a3;
  --select-shadow: 0 12px 32px #20231e24, 0 2px 6px #20231e0a;
}
.plans-page {
  --select-surface: #11161e;
  --select-ink: #f3f4f6;
  --select-line: #47515e;
  --select-hover: #1b222c;
  --select-active: #35271e;
  --select-accent: #ff9a5f;
  --select-shadow: 0 16px 40px #0008, 0 2px 6px #0004;
}
.select-menu { position: relative; display: inline-block; max-width: 100%; min-width: 0; vertical-align: middle; }
/* The original control still owns validation and submission, with a native fallback before JS loads. */
select.select-menu-native {
  position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important;
  clip-path: inset(50%) !important; overflow: hidden !important; pointer-events: none;
}
body .select-menu > button.select-menu-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 100%; min-width: 0; min-height: 42px; margin: 0; padding: 10px 13px;
  border: 1px solid var(--select-line); border-radius: 7px; background: var(--select-surface);
  color: var(--select-ink); box-shadow: none; font: inherit; line-height: 1.5; text-align: left;
  cursor: pointer; transition: border-color 120ms, background-color 120ms;
}
body .select-menu > .select-menu-trigger:hover:not(:disabled) { border-color: var(--select-accent); }
body .select-menu > .select-menu-trigger:focus-visible { outline: 2px solid var(--select-accent); outline-offset: 3px; }
body .select-menu > .select-menu-trigger[aria-expanded="true"] { border-color: var(--select-accent); }
body .select-menu > .select-menu-trigger:disabled { opacity: .5; cursor: default; }
body .select-menu > .select-menu-trigger[aria-invalid="true"] { border-color: #d96257; }
.select-menu-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-menu-chevron { flex: none; width: 7px; height: 7px; margin: -4px 3px 0 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .7; }
[aria-expanded="true"] > .select-menu-chevron { transform: translateY(3px) rotate(225deg); }
.select-menu-list {
  position: fixed; inset: auto; z-index: 10000; display: block; box-sizing: border-box;
  margin: 0; padding: 5px; border: 1px solid var(--select-line); border-radius: 9px;
  background: var(--select-surface); color: var(--select-ink); box-shadow: var(--select-shadow);
  font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.5;
  overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; color-scheme: light;
}
.select-menu-list[hidden] { display: none !important; }
.select-menu-list::backdrop { background: transparent; }
.select-menu-option { position: relative; display: block; padding: 10px 36px 10px 12px; border-radius: 5px; overflow-wrap: anywhere; cursor: pointer; }
.select-menu-option[hidden] { display: none; }
.select-menu-option:hover:not([aria-disabled="true"]) { background: var(--select-hover); }
.select-menu-option.is-active { outline: 1px solid var(--select-accent); outline-offset: -1px; background: var(--select-active); }
.select-menu-option.is-selected { color: var(--select-accent); font-weight: 550; }
.select-menu-option.is-selected::after { content: ""; position: absolute; right: 15px; top: 16px; width: 5px; height: 9px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.select-menu-option[aria-disabled="true"] { opacity: .4; cursor: default; }
.field > .select-menu, .demo-form .select-menu { display: block; width: 100%; }
.demo-form .select-menu { margin-top: 8px; font-size: 1rem; }
body.plans-page .select-menu > .select-menu-trigger { min-height: 50px; }
body .setup-card .select-menu > .select-menu-trigger { min-height: 44px; }
.plans-page .select-menu-list { font-size: 1rem; color-scheme: dark; }
.project-picker .select-menu { max-width: 220px; }
body .project-picker .select-menu > .select-menu-trigger { min-height: 32px; padding: 5px 8px; border-color: transparent; background: transparent; font-size: 12px; }
#dev-persona .select-menu { margin-left: 12px; }
@media (max-width: 640px) { .project-picker .select-menu { max-width: 180px; } }
@media (prefers-reduced-motion: reduce) { body .select-menu > .select-menu-trigger { transition: none; } }
@media (forced-colors: active) {
  .select-menu-option.is-active { outline: 2px solid Highlight; }
  .select-menu-option.is-selected { color: Highlight; }
}
