.model-picker { box-sizing: border-box; width: min(620px,calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 28px; margin: auto; border: 1px solid #e2e8f0; border-radius: 28px; color: #0b1c30; background: #fff; overflow-y: auto; overscroll-behavior: contain; font: 400 16px/1.5 Inter,sans-serif; box-shadow: 0 24px 90px #0b1c3026; }
.model-picker::backdrop { background: #0b1c3080; backdrop-filter: blur(5px); }
.model-picker-heading { position: relative; padding-right: 48px; margin-bottom: 24px; }
.model-picker-heading p { margin: 8px 0; color: #4b5563; }
.model-picker h2 { font: 700 clamp(26px,5vw,34px)/1.2 'Space Grotesk',sans-serif; margin: 12px 0; letter-spacing: -.025em; }
.model-picker-close { position: absolute; top: 0; right: -8px; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #f5f5f7; color: #0b1c30; font-size: 30px; cursor: pointer; }
.model-picker-options { display: grid; gap: 12px; }
.model-picker-options a { display: grid; grid-template-columns: 80px 1fr 24px; align-items: center; gap: 16px; padding: 14px; border: 1px solid #d5d8de; border-radius: 18px; color: inherit; text-decoration: none; transition: background .18s,border-color .18s; }
.model-picker-options a:hover { background: #eff4ff; border-color: #004ac6; }
.model-picker-options img { width: 80px; height: 80px; object-fit: contain; border-radius: 10px; }
.model-picker-options strong { display: block; font-size: 18px; }
.model-picker-options a > span > span { display: block; font-size: 16px; color: #4b5563; }
.model-picker :is(a,button):focus-visible { outline: 3px solid #004ac6; outline-offset: 3px; }
@media(max-width:380px) { .model-picker { padding: 18px; } .model-picker-options a { grid-template-columns: 60px 1fr 16px; gap: 10px; padding: 10px; } .model-picker-options img { width: 60px; height: 60px; } }
@media(prefers-reduced-motion:reduce) { .model-picker-options a { transition: none; } }