/* Horizontal controller catalogue, inspired by the supplied list reference. */
body[data-mode=midi] #midiPage[data-surface-view=gallery]{height:calc(100dvh - var(--workspace-content-top,102px) - 22px);max-height:none;overflow:hidden!important;padding:12px 16px;margin:10px 16px;max-width:none;width:calc(100% - 32px);background:#262a2f;border:1px solid #4a535d;border-radius:4px}
#midiPage[data-surface-view=gallery]>:not(#surfaceGallery){display:none!important}#midiPage[data-surface-view=settings]>#surfaceGallery{display:none}body[data-mode=midi] #patchGateNotice{display:none!important}
#surfaceGallery{height:100%;display:flex;flex-direction:column;gap:10px;min-height:0}
.surfaceHeading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex:none}.surfaceHeading span,.surfaceDetailHeader span{font-size:9px;color:#64cbd8;letter-spacing:1.5px}.surfaceHeading h2{font-size:22px;line-height:1.2;margin:4px 0 0;color:#edf3f7}.surfaceHeading p{display:none}.surfaceHeading button{font-size:12px;padding:7px 12px}
.surfaceFilters{display:flex;gap:12px;align-items:center;flex:none}.surfaceFilters label{display:flex;flex-direction:row;align-items:center;gap:8px;font-size:11px;color:#aebfcb}.surfaceFilters label:first-child{flex:1;max-width:510px}.surfaceFilters input,.surfaceFilters select{min-height:32px;padding:6px 9px;font-size:12px;background:#1e252c;border:1px solid #53616d;border-radius:3px;color:#e0edf4}.surfaceFilters input{width:100%;min-width:0}.surfaceFilters>span{margin-left:auto;color:#a4b7c2;font-size:11px}
#surfaceGrid{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:154px;align-content:start;gap:8px;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-color:#7c9ba9 #1a242c;padding-right:6px}#surfaceGrid:focus-visible{outline:2px solid #76dce8;outline-offset:2px}#surfaceGrid::-webkit-scrollbar{width:14px}#surfaceGrid::-webkit-scrollbar-track{background:#1a242c;border-radius:6px}#surfaceGrid::-webkit-scrollbar-thumb{background:#7c9ba9;border:3px solid #1a242c;border-radius:8px}#surfaceGrid::-webkit-scrollbar-thumb:hover{background:#a0c9d6}
#surfaceGallery .surfaceCard{min-height:0;min-width:0;display:grid;grid-template-columns:176px minmax(0,1fr) 192px;gap:14px;align-items:stretch;background:#33373c;border:1px solid #56606a;border-radius:2px;padding:8px;overflow:hidden;transition:border-color .15s,background-color .15s}#surfaceGallery .surfaceCard:hover{background:#383d43;border-color:#84a8b8}
.surfaceImage{margin:0;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;width:100%;min-width:0}.surfaceImage svg,.surfaceImage img{display:block;width:100%;height:100%;object-fit:contain;padding:4px}#surfaceGallery .surfaceImage{height:100%;min-height:0;border:1px solid #65717b;border-radius:0}
.surfaceCardBody{display:flex;flex-direction:column;gap:4px;justify-content:center;min-width:0;min-height:0;overflow:hidden}.surfaceCardTitle{display:flex;gap:9px;align-items:center;min-width:0;min-height:19px;flex:none}.surfaceCardTitle h3{margin:0;font-size:14px;line-height:19px;color:#b9dff1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.surfaceCardTitle>span{font-size:9px;color:#98dfe7;background:#204651;border:1px solid #46717d;border-radius:2px;padding:2px 5px;white-space:nowrap}
#surfaceGallery .surfaceCard p.surfaceCardDescription{font-size:12px;line-height:16px;margin:0;min-height:16px;max-height:32px;flex-shrink:0;color:#e0e5e9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#surfaceGallery .surfaceCard p.surfaceCardFact{font-size:11px;line-height:15px;margin:0;min-height:15px;flex-shrink:0;display:flex;gap:7px;min-width:0}.surfaceCardFact b{font-weight:500;color:#8edbc8;white-space:nowrap}.surfaceCardFact.minus b{color:#e5be8a}.surfaceCardFact span{color:#b4c5d0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#surfaceGallery .surfaceCardActions{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:8px;margin:0;min-width:0}.surfaceCardActions button{font-size:12px;padding:6px 10px;min-height:32px;background:#22292f;border:1px solid #68737c;border-radius:4px;color:#d5e8f4;white-space:nowrap}.surfaceCardActions button:first-child{border-color:#6c9ba9;color:#ace3eb;background:#21343d}.surfaceCardActions button:disabled{opacity:1;color:#9daeb7;background:#2b3036;border-color:#5a626a;cursor:not-allowed}
.surfacePager{display:flex;justify-content:center;align-items:center;gap:20px;flex:none;font-size:12px;color:#b6c9d4}.surfacePager button{padding:5px 10px;font-size:12px}#surfaceBackGallery{margin-bottom:12px;border-color:#467180;color:#9be1e7}
#surfaceDetail{width:min(1100px,calc(100vw - 40px));max-height:calc(100dvh - 40px);background:#151e27;color:#e6eff5;border:1px solid #486675;border-radius:14px;padding:22px;overflow:auto}#surfaceDetail::backdrop{background:#000b}.surfaceDetailHeader{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}.surfaceDetailHeader h2{font-size:24px;margin:5px 0 0}.surfaceDetailBody{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center}#surfaceDetailImage .surfaceImage{height:min(47vh,420px);padding:10px}.surfaceDetailText>p{font-size:15px;line-height:1.55;color:#c9d8e2}.surfaceSpecs{display:flex;flex-wrap:wrap;gap:7px}.surfaceSpecs span{font-size:11px;background:#203946;border:1px solid #3a5d6c;color:#a8e1e9;border-radius:5px;padding:5px 7px}.surfaceDetailText h3{font-size:14px;color:#73dbca;margin:18px 0 8px}.surfaceDetailText h3:nth-of-type(2){color:#efba82}.surfaceDetailText ul{padding-left:18px;font-size:13px;line-height:1.5;color:#adc2d2;margin:0}.surfaceDetailText li+li{margin-top:5px}.surfaceDetailFooter{margin-top:22px;padding-top:14px;border-top:1px solid #334654;display:flex;gap:10px;align-items:center}.surfaceDetailFooter p{margin:0 auto 0 0;color:#99b8c8;font-size:12px}.surfaceDetailFooter button{font-size:12px}.surfaceDetailFooter button:disabled{opacity:.6;cursor:not-allowed}
@media(max-width:1000px){#surfaceGallery .surfaceCard{grid-template-columns:150px minmax(0,1fr) 165px;gap:10px}.surfaceCardTitle>span{display:none}.surfaceFilters>span{display:none}}
@media(max-width:700px){body[data-mode=midi] #midiPage[data-surface-view=gallery]{padding:10px;margin:8px;width:calc(100% - 16px)}.surfaceHeading h2{font-size:19px}.surfaceHeading span{font-size:8px}.surfaceHeading button{font-size:10px;padding:6px}.surfaceFilters{gap:8px}.surfaceFilters label{font-size:0;gap:0}.surfaceFilters input,.surfaceFilters select{font-size:11px;max-width:100%}#surfaceGallery .surfaceCard{grid-template-columns:100px minmax(0,1fr) 130px;gap:8px;padding:6px}.surfaceCardTitle h3{font-size:12px}.surfaceCardActions button{font-size:10px;padding:5px}.surfaceCardFact b{display:none}.surfaceDetailBody{grid-template-columns:1fr}#surfaceDetailImage .surfaceImage{height:200px}.surfaceDetailFooter{flex-wrap:wrap}.surfaceDetailFooter p{width:100%}}
@media(max-height:700px){.surfaceHeading h2{font-size:19px}.surfaceHeading span{display:none}#surfaceGallery{gap:8px}}

.surfacePreviewLink{padding:0!important;border:0!important;background:transparent!important;width:100%;cursor:pointer}.surfacePreviewLink .surfaceImage{margin:0}.surfaceNameLink{font:inherit!important;color:inherit!important;text-align:left;background:none!important;border:0!important;padding:0!important;white-space:normal!important;text-decoration:underline;text-decoration-color:#62e1ce;text-underline-offset:5px}.surfacePreviewLink:focus-visible,.surfaceNameLink:focus-visible{outline:3px solid #62e1ce!important;outline-offset:3px}