/* One shared geometry for native single-select controls; preserves native keyboard behavior. */
html body select:not([multiple]):not([size]),
html body select:not([multiple])[size="1"] {
 appearance:none!important;
 -webkit-appearance:none!important;
 padding-inline-end:48px!important;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23576a79' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
 background-repeat:no-repeat!important;
 background-size:18px 18px!important;
 background-position:right 16px center!important;
}
html body select:not([multiple]):not([size]):dir(rtl),
html body select:not([multiple])[size="1"]:dir(rtl) { background-position:left 16px center!important; }
/* Shell-based selects already have the same positioned icon: never render a second arrow. */
html body .select-shell select:not([multiple]):not([size]),
html body .select-shell select:not([multiple])[size="1"] { background-image:none!important; }
html body .select-shell>.select-arrow { inset-inline-end:16px; width:18px; height:18px; top:50%; transform:translateY(-50%); pointer-events:none; }
html body .select-shell>.select-arrow svg { width:18px; height:18px; }
@media(forced-colors:active) {
 html body select:not([multiple]):not([size]),html body select:not([multiple])[size="1"] { appearance:auto!important; -webkit-appearance:auto!important; background-image:none!important; }
 html body .select-shell:has(>select)>.select-arrow { display:none; }
}