/* Shared select contract: native values, forms, validation and keyboard handling.
   No JS replacement: new and dynamically inserted selects inherit this skin. */
:root {
  --select-surface:#fff; --select-ink:#30302e; --select-line:#dcdcd8;
  --select-muted:#74746f; --select-hover:#f6f6f3; --select-selected:#eeefea;
  --select-radius:10px; --select-height:40px;
}
html body select:not([multiple]):not([size]),
html body select[size="1"] {
  appearance:none; -webkit-appearance:none;
  box-sizing:border-box; max-width:100%; min-width:0;
  min-height:var(--select-height)!important;
  padding:9px 36px 9px 12px!important;
  border:1px solid var(--select-line)!important;
  border-radius:var(--select-radius)!important;
  background-color:var(--select-surface)!important;
  background-image:url('/assets/select-chevron.svg')!important;
  background-repeat:no-repeat!important; background-position:right 11px center!important;
  background-size:16px!important; color:var(--select-ink)!important;
  font-family:inherit; font-weight:400; line-height:1.4;
  text-overflow:ellipsis; cursor:pointer; box-shadow:0 1px 2px #22222204!important;
  transition:border-color .15s ease,background-color .15s ease;
}
html body select:not([multiple]):not([size]):hover:not(:disabled),
html body select[size="1"]:hover:not(:disabled){border-color:#a6a6a0!important;background-color:#fafaf8!important}
html body select:focus-visible{outline:1px solid #777770!important;outline-offset:3px!important;box-shadow:none!important}
html body select:disabled{background-color:#f3f3f0!important;color:var(--select-muted)!important;border-color:#e5e5e0!important;cursor:not-allowed;opacity:1!important;box-shadow:none!important}
html body select[aria-invalid="true"]{border-color:#aa4141!important}
html body select[multiple],html body select[size]:not([size="1"]){border:1px solid var(--select-line);border-radius:10px;background:#fff;color:var(--select-ink);padding:6px;font:inherit}
html body select option{font-weight:400}
/* Dense material tools retain their existing grid/flex placement. */
html body .video-material-library select{min-width:86px;width:86px;padding-left:8px!important;padding-right:28px!important;background-position:right 7px center!important}
/* Existing rich model menus keep their original interaction and descriptions. */
html body #model-picker-trigger{border:1px solid var(--select-line);border-radius:10px;background:#fff;color:var(--select-ink);min-height:42px;transition:border-color .15s ease}
html body #model-picker-trigger:hover{border-color:#a6a6a0}
html body #model-picker-trigger:focus-visible{outline:1px solid #777770;outline-offset:3px}
html body #model-menu{border:1px solid var(--select-line);border-radius:12px;padding:5px;background:#fff;box-shadow:0 10px 32px #24242012}
html body #model-menu button{border-radius:8px;padding:10px;text-align:left}
html body #model-menu button:hover:not(:disabled){background:var(--select-hover)}
html body #model-menu button.current{background:var(--select-selected);color:var(--select-ink)}
/* Progressive enhancement: OS picker stays intact on touch/older browsers. */
@supports (appearance:base-select) {
 @media (hover:hover) and (pointer:fine) {
  html body select:not([multiple]):not([size]),html body select[size="1"],
  html body select:not([multiple]):not([size])::picker(select),html body select[size="1"]::picker(select){appearance:base-select}
  html body select:not([multiple]):not([size]),html body select[size="1"]{background-image:none!important;display:inline-flex;align-items:center;gap:12px;padding-right:12px!important}
  html body select::picker-icon{content:"";width:7px;height:7px;border-right:1.4px solid #70706c;border-bottom:1.4px solid #70706c;rotate:45deg;margin:-4px 3px 0 auto;flex-shrink:0;transition:rotate .15s ease}
  html body select:open::picker-icon{rotate:225deg;margin-top:3px}
  html body select::picker(select){border:1px solid var(--select-line);border-radius:12px;padding:6px;margin-block:6px;background:#fff;color:var(--select-ink);box-shadow:0 12px 36px #24242018;max-height:min(340px,60dvh);max-width:calc(100vw - 24px);overflow:auto;scrollbar-width:thin;font:inherit}
  html body select option{display:flex;align-items:center;gap:12px;min-height:38px;padding:9px 12px;border-radius:7px;white-space:normal;overflow-wrap:anywhere;cursor:pointer}
  html body select option:hover,html body select option:focus{background:var(--select-hover);outline:none}
  html body select option:checked{background:var(--select-selected);font-weight:500}
  html body select option::checkmark{order:2;margin-left:auto;color:#535b49}
  html body select option:disabled{color:#91918b;cursor:not-allowed;background:transparent}
  html body select optgroup{padding:5px 0;font-size:12px;color:var(--select-muted)}
  html body select optgroup option{font-size:14px;color:var(--select-ink)}
 }
}
@media(max-width:680px),(pointer:coarse){html body select{font-size:16px!important;--select-height:44px}}
@media(prefers-reduced-motion:reduce){html body select,html body select::picker-icon,html body #model-picker-trigger{transition:none!important}}
@media(forced-colors:active){html body select{border-color:ButtonText!important;box-shadow:none!important}html body select:focus-visible{outline-color:Highlight!important}html body select option:checked{background:Highlight;color:HighlightText}}