/* Dense, cover-first picker. Only viewport thumbnails load; playback is a second step. */
.catalog-dialog{color:#e9eef5;background:#111a23;border:1px solid #354455;border-radius:14px;padding:0;width:min(1040px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));max-width:none;max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));box-shadow:0 28px 120px #000b;overflow:hidden;left:env(safe-area-inset-left);right:env(safe-area-inset-right);top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom)}
.catalog-dialog:not([open]),.catalog-dialog [hidden]{display:none!important}.catalog-dialog::backdrop{background:#050910d9;backdrop-filter:blur(5px)}
.catalog-panel{display:flex;flex-direction:column;max-height:inherit;padding:18px;gap:10px;box-sizing:border-box;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.catalog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0}.catalog-heading h2{margin:0;font-size:21px;letter-spacing:0;color:#edf4fa;font-weight:650}
.catalog-close,.catalog-button{min-height:44px;padding:8px 13px;border:1px solid #344353;border-radius:7px;background:#202c38;color:#c7d5e2;font:inherit;cursor:pointer}.catalog-close{background:transparent}.catalog-dialog button:disabled{cursor:not-allowed;opacity:.5}.catalog-dialog button:focus-visible,.catalog-dialog input:focus-visible,.catalog-dialog select:focus-visible{outline:2px solid #79ead1;outline-offset:2px}
.catalog-summary{margin:0;color:#95a8bc;font-size:11px;line-height:1.5}.catalog-filters{display:grid;grid-template-columns:minmax(180px,1fr) 86px 86px 110px;gap:9px;flex-shrink:0}.catalog-field{display:flex;flex-direction:column;gap:4px;min-width:0;color:#acbacb;font-size:11px}
.catalog-field input,.catalog-field select{box-sizing:border-box;width:100%;min-width:0;min-height:44px;border:1px solid #3b4c60;border-radius:7px;background:#0b121b;color:#edf4fa;padding:8px 10px;font:inherit;font-size:14px}.catalog-field input::placeholder{color:#73879b}.catalog-field input[aria-invalid=true]{border-color:#e59c7b}
.catalog-options{display:flex;align-items:center;flex-wrap:wrap;gap:3px 16px;flex-shrink:0}.catalog-check{display:flex;flex-direction:row-reverse;gap:6px;align-items:center;min-height:36px;font-size:11px;color:#a9bacc;cursor:pointer}.catalog-check input{width:16px;height:16px;margin:0;accent-color:#79ead1}.catalog-options .catalog-button{margin-left:auto;min-height:36px;padding:5px 10px;font-size:11px}
.catalog-validation{margin:0;padding:8px 10px;border:1px solid #966348;background:#412b22;border-radius:6px;color:#ffc7a6;font-size:12px;line-height:1.6}.catalog-count{margin:0;color:#79ead1;font-size:12px;min-height:18px;flex-shrink:0}
.catalog-results{margin:0;padding:3px 5px 5px 3px;list-style:none;min-height:100px;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#475967 #121922;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-content:start;gap:12px 10px;flex:1 1 auto}
.catalog-song{min-width:0;margin:0;padding:0;list-style:none}.catalog-tile{display:flex;flex-direction:column;gap:3px;width:100%;padding:0;border:0;border-radius:6px;background:transparent;color:#e9eef5;font:inherit;text-align:left;cursor:pointer;min-width:0}.catalog-dialog .catalog-tile:disabled{opacity:.62}.catalog-tile[aria-pressed=true] .catalog-jacket{outline:2px solid #79ead1;outline-offset:0}.catalog-tile:hover:not(:disabled) .catalog-jacket{border-color:#79ead1}.catalog-tile:focus-visible{outline-offset:3px}
.catalog-jacket{display:block;position:relative;overflow:hidden;aspect-ratio:1;width:100%;box-sizing:border-box;border:1px solid #425462;border-radius:5px;background:linear-gradient(145deg,#253542,#141e29);isolation:isolate}.catalog-cover{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#101720}.catalog-cover-placeholder{display:flex;width:100%;height:100%;align-items:center;justify-content:center;color:#879aaa;font:500 13px system-ui;letter-spacing:.5px}.catalog-tile-level{position:absolute;bottom:0;right:0;left:0;padding:4px 5px;color:#f0faf7;background:linear-gradient(transparent,#000d);text-align:right;font:600 10px ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.5;box-sizing:border-box;text-shadow:0 1px 2px #000}.catalog-tile-title{display:block;max-width:100%;width:100%;font-size:12px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.catalog-tile-meta{display:block;max-width:100%;width:100%;font-size:9px;line-height:1.4;color:#98a9bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catalog-empty{grid-column:1/-1;padding:24px 12px;line-height:1.7;text-align:center;font-size:13px;color:#a1b3c6}.catalog-empty button{display:block;margin:16px auto 0}.catalog-pagination{display:flex;align-items:center;justify-content:center;gap:20px;flex-shrink:0}.catalog-pagination span{font-size:12px;color:#b4c6d7;min-width:80px;text-align:center}
.catalog-detail{min-height:230px;padding:0 2px 12px}.catalog-back{margin-bottom:20px}.catalog-detail-body h3{font-size:24px;line-height:1.35;margin:0 0 8px;overflow-wrap:anywhere}.catalog-song-meta{margin:0;color:#98a9bd;font-size:12px;line-height:1.6;overflow-wrap:anywhere}.catalog-charts{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 16px}.catalog-chart{display:grid;grid-template-columns:auto auto;flex:1 1 150px;gap:9px 12px;text-align:left;border:1px solid #3c5265;background:#101b27;color:#cbdbe9;border-radius:8px;padding:18px 16px;min-width:0;min-height:100px;font:inherit;cursor:pointer}.catalog-chart-difficulty{align-self:center;font-size:13px;font-weight:700;letter-spacing:.7px}.catalog-chart-level{font:600 22px ui-monospace,SFMono-Regular,Consolas,monospace;text-align:right}.catalog-chart-status{grid-column:1/-1;font-size:11px;color:#99aec0;line-height:1.4}.catalog-chart[data-family=BSC] .catalog-chart-difficulty{color:#7edfc3}.catalog-chart[data-family=ADV] .catalog-chart-difficulty{color:#edc46f}.catalog-chart[data-family=EXT] .catalog-chart-difficulty{color:#ed9699}.catalog-chart[aria-pressed=true]{border-color:#79ead1;background:#19312f}.catalog-chart[aria-pressed=true] .catalog-chart-status{color:#79ead1}.catalog-dialog .catalog-chart:disabled{opacity:.65;cursor:not-allowed}
.catalog-load-progress{padding:10px 12px;border:1px solid #3e685f;border-radius:7px;background:#173029;flex-shrink:0}.catalog-load-progress p{margin:0 0 7px;color:#b5f0df;font-size:12px;line-height:1.5}.catalog-load-progress progress{display:block;width:100%;height:8px;accent-color:#79ead1}
@media(max-width:850px){.catalog-results{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:620px){.catalog-dialog{width:calc(100vw - 12px - env(safe-area-inset-left) - env(safe-area-inset-right));max-height:calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:10px}.catalog-panel{padding:11px;gap:7px}.catalog-filters{grid-template-columns:1fr 1fr 1.25fr;gap:6px}.catalog-search{grid-column:1/-1}.catalog-search>span{display:none}.catalog-heading h2{font-size:18px}.catalog-results{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 6px;padding-right:3px}.catalog-tile-title{font-size:11px}.catalog-tile-meta{font-size:8px}.catalog-options{gap:0 10px}.catalog-check{font-size:10px;min-height:32px}.catalog-options .catalog-button{font-size:10px;min-height:32px;padding:5px 7px}.catalog-pagination{gap:12px}.catalog-pagination .catalog-button{padding:8px 11px}.catalog-summary{font-size:10px;line-height:1.4}.catalog-detail-body h3{font-size:21px}.catalog-chart{flex-basis:100%;min-height:76px;padding:13px 15px}.catalog-back{margin-bottom:14px}.catalog-charts{margin:18px 0 12px}}
@media(max-height:500px) and (orientation:landscape){.catalog-panel{gap:5px;padding:8px 14px}.catalog-summary{display:none}.catalog-filters{grid-template-columns:minmax(160px,1fr) 80px 80px 110px}.catalog-search{grid-column:auto}.catalog-search>span{display:block}.catalog-field{gap:2px}.catalog-field input,.catalog-field select{min-height:34px;padding:5px}.catalog-close,.catalog-button{min-height:34px;padding:5px 10px}.catalog-heading h2{font-size:18px}.catalog-results{min-height:64px;grid-template-columns:repeat(8,minmax(0,1fr))}.catalog-options{min-height:30px}.catalog-pagination{padding:0}.catalog-chart{flex-basis:150px;min-height:85px}.catalog-detail{min-height:160px}.catalog-charts{margin:12px 0}.catalog-back{margin-bottom:8px}}
