.framework-picker { position: relative; width: 100%; }
.framework-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; clip: rect(0,0,0,0); overflow: hidden; opacity: 0; }
.framework-trigger { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 12px; border: 1px solid #ccc; border-radius: 4px; background: #fff; color: #333; text-align: left; }
.framework-trigger:focus-visible { outline: 2px solid #1676a2; outline-offset: 2px; }
.framework-current { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.framework-picker img { flex: 0 0 28px; width: 28px; height: 28px; object-fit: contain; }
.framework-options { position: absolute; z-index: 1010; top: 100%; left: 0; right: 0; margin: 3px 0 0; padding: 4px; list-style: none; max-height: min(340px, 55dvh); overflow-y: auto; border: 1px solid #bbc3c8; border-radius: 4px; background: #fff; box-shadow: 0 5px 12px #0002; }
.framework-options[hidden] { display: none; }
.framework-option { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 8px; border-radius: 3px; cursor: pointer; overflow-wrap: anywhere; }
.framework-option.is-active { background: #e7f2f7; }
.framework-option[aria-selected="true"] { font-weight: 600; }

.framework-option[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
.framework-options.opens-up { top:auto; bottom:100%; margin:0 0 3px; }