.device-picker-content { border: 0; border-radius: 20px; }
#devicePickerModal .modal-header { padding: 28px; gap: 20px; background: radial-gradient(ellipse at top right, #a16aec66, transparent 65%), linear-gradient(120deg, #452080, #713bc4); border: 0; border-radius: 20px 20px 0 0; }
.device-picker-heading { display: flex; align-items: center; gap: 18px; min-width: 0; }
.device-picker-icon { display: grid; place-items: center; width: 58px; height: 58px; flex-shrink: 0; border: 1px solid #ffffff40; border-radius: 18px; background: #ffffff18; color: #fff; font-size: 28px; box-shadow: inset 0 1px 0 #ffffff26; }
#devicePickerModal #devicePickerTitle { color: #fff; font-weight: 700; letter-spacing: -.4px; margin-bottom: 7px; }
.device-picker-subtitle { color: #eee3ff; line-height: 1.6; }
#devicePickerModal .modal-header .btn-close { filter: invert(1); flex-shrink: 0; padding: 12px; margin: 0; opacity: .9; border: 1px solid #00000035; border-radius: 50%; background-color: #00000012; }
#devicePickerModal .modal-header .btn-close:hover { opacity: 1; transform: none; }
#devicePickerModal .modal-header .btn-close:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
#devicePickerModal .modal-body { padding: 0 24px 24px; }
.device-picker-controls { display: flex; gap: 16px; position: sticky; top: 0; background: var(--bs-body-bg, #fff); padding-block: 16px; z-index: 1; }
.device-picker-controls .form-control, .device-picker-controls .form-select { min-height: 48px; border-radius: 12px; border-color: #e1d7ef; }
.device-picker-controls .form-label { font-size: .85rem; font-weight: 600; }
.device-picker-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.device-picker-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 190px; padding: 20px 12px; border: 1px solid #e8e2f1; border-radius: 16px; text-align: center; text-decoration: none; color: #252032; background: #fff; }
.device-picker-card img { width: 100%; height: 120px; object-fit: contain; }
.device-picker-card span { font-weight: 600; overflow-wrap: anywhere; }
.device-picker-card:hover, .device-picker-card:focus-visible { border-color: #8750e6; background: #f8f4ff; color: #6f42c1; }
.device-picker-card:focus-visible { outline: 2px solid #8750e6; outline-offset: 2px; }
html[data-theme="dark"] #devicePickerModal .modal-content, html[data-theme="dark"] .device-picker-controls { background: #282333; color: #eee7fa; }
html[data-theme="dark"] .device-picker-card { background: #30293d; color: #eee7fa; border-color: #514261; }
@media (max-width: 767.98px) {
    #devicePickerModal .modal-header { padding: 20px 16px; gap: 12px; }
    .device-picker-heading { gap: 12px; }
    .device-picker-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 22px; }
    #devicePickerModal #devicePickerTitle { font-size: 1.15rem !important; }
    .device-picker-controls { flex-direction: column; gap: 10px; }
    .device-picker-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    #devicePickerModal .modal-body { padding-inline: 16px; }
    .device-picker-card { min-height: 160px; padding: 12px 8px; }
    .device-picker-card img { height: 90px; }
}