/* Native controls keep their values, validation and existing event handlers. */
select:not([multiple]){
 border-radius:14px!important;border:1px solid #cbdff6!important;
 background:linear-gradient(#fff,#edf5ff)!important;color:#31577f!important;
 box-shadow:0 3px 10px #3a6ea512!important;
 transition:border-color .18s,box-shadow .18s,background .18s;
 cursor:pointer !important;
}
select:not([multiple]):focus-visible{outline:2px solid #85b4ed!important;outline-offset:2px}
select:disabled{opacity:.55;cursor:not-allowed !important}
@supports (appearance:base-select){
 select:not([multiple]):not([size]),select[size="1"]{appearance:base-select!important;padding-inline:12px!important;align-items:center;gap:10px}
 select::picker(select){
  appearance:base-select;background:#fafdff;border:1px solid #d5e5f7;
  border-radius:16px;padding:6px;margin-block:7px;box-shadow:0 12px 30px #234b7826;
  max-height:min(320px,55dvh);overflow:auto;min-width:anchor-size(width);
  opacity:0;transform:translateY(-4px);
  transition:opacity .16s ease,transform .16s ease,display .16s allow-discrete,overlay .16s allow-discrete;
  cursor:pointer;
 }
 select::picker(select):popover-open{opacity:1;transform:translateY(0)}
 @starting-style{select::picker(select):popover-open{opacity:0;transform:translateY(-4px)}}
 select::picker-icon{color:#6387b1;transition:rotate .18s}
 select:open::picker-icon{rotate:180deg}
 select option{border:0;border-radius:10px;padding:9px 12px;margin:2px 0;white-space:normal;color:#415775;background:transparent;transition:background .15s,color .15s;cursor:pointer}
 select option:hover,select option:focus{background:#e7f1ff;outline:none}
 select option:checked{background:linear-gradient(120deg,#539dff,#3479ed);color:white}
 select option:disabled{opacity:.5;background:transparent;color:#7d8ca0;cursor:not-allowed}
 select option::checkmark{margin-left:auto;order:1}
 .sel-wrap:has(select:not([multiple]):not([size]))>.sel-arrow{display:none}
}
@media(prefers-reduced-motion:reduce){select,select option,select::picker-icon,select::picker(select){transition:none!important}}

/* Keep the selected value on one line; options may wrap inside the picker. */
select:not([multiple]){min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
select::picker-icon{flex-shrink:0}