.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-top:32px}
.catalog-tools{display:flex;align-items:end;gap:18px;flex-wrap:wrap;margin-top:28px}
.catalog-search{display:grid;gap:6px;min-width:min(100%,280px);color:var(--muted);font-size:.85rem}
.catalog-search input{min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text)}
.catalog-search input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.favorites-filter{display:flex;align-items:center;gap:9px;min-height:44px;color:var(--muted);font-size:.9rem;cursor:pointer}
.favorites-filter input{accent-color:var(--gold);width:18px;height:18px}
.catalog-empty{grid-column:1/-1;padding:24px;border:1px dashed var(--line);border-radius:16px;color:var(--muted);text-align:center}
.song-card{display:flex;gap:14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.song-card.is-current{border-color:var(--gold)}
.song-card .cover{flex:none;width:64px;height:64px;border-radius:12px;display:grid;place-items:center;font-size:1.5rem;color:#17130d}
.song-card .info{min-width:0;flex:1}
.song-card .info strong,.song-card .info span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song-card .info span{color:var(--muted);font-size:.85rem}
.song-card .info .dur{font-size:.75rem}
.demo-note{margin-top:20px;color:var(--muted);font-size:.85rem}

.icon-btn{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;display:inline-grid;place-items:center;font-size:1rem;transition:transform .2s,border-color .2s}
.icon-btn:hover{border-color:var(--gold);transform:translateY(-1px)}
.icon-btn:focus-visible,.seek:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.icon-btn.primary{background:var(--gold);color:#17130d;border-color:transparent;font-weight:800}
.icon-btn.large{width:56px;height:56px;font-size:1.3rem}
.icon-btn[aria-pressed="true"]{color:var(--gold)}
.player-mode[aria-pressed="true"]{border-color:var(--gold);background:rgba(217,178,109,.12);color:var(--gold-light)}

.seek{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--gold) var(--pct,0%),rgba(255,255,255,.14) var(--pct,0%));cursor:pointer}
.seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--gold-light);border:0}
.seek::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--gold-light);border:0}

.player{position:fixed;inset:auto 0 0 0;z-index:20;background:rgba(17,21,26,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.player[hidden]{display:none}
.player-bar{width:min(1280px,calc(100% - 24px));margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.2fr) auto;align-items:center;gap:16px;padding:10px 0}
.player-now{display:flex;align-items:center;gap:12px;min-width:0;background:none;border:0;color:inherit;text-align:left;cursor:pointer;padding:0}
.player-now .cover{flex:none;width:52px;height:52px;border-radius:10px;display:grid;place-items:center;color:#17130d}
.player-now strong,.player-now span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-now span{color:var(--muted);font-size:.82rem}
.player-controls{display:flex;align-items:center;gap:8px}
.player-seek{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px;font-size:.75rem;color:var(--muted)}
.player-seek time:last-child{text-align:right}
.player-extra{display:flex;align-items:center;gap:8px}
.volume{width:90px}
.player-status{position:absolute;right:12px;bottom:100%;margin:0;padding:0;max-width:min(440px,calc(100% - 24px));border-radius:10px;background:var(--panel);color:var(--text);font-size:.82rem}
.player-status:not(:empty){padding:8px 12px;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.player-status[data-error="true"]{border-color:#d9897c;color:#ffd2c9}

.player-full{position:fixed;inset:0;z-index:30;background:rgba(11,13,16,.98);overflow-y:auto;padding:20px}
.player-full[hidden]{display:none}
.full-inner{width:min(520px,100%);margin:0 auto;display:grid;gap:18px}
.full-close{justify-self:end}
.full-cover{aspect-ratio:1;border-radius:20px;display:grid;place-items:center;font-size:5rem;color:#17130d}
.full-inner h3{margin:0;font-size:1.8rem;line-height:1.1}
.full-inner p{margin:0;color:var(--muted)}
.full-controls{display:flex;justify-content:center;align-items:center;gap:16px}
.full-modes{display:flex;justify-content:center;gap:10px}
.full-modes .icon-btn{width:auto;padding:0 14px;border-radius:999px;font-size:.85rem}
.queue{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.queue button{width:100%;display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--text);cursor:pointer;text-align:left}
.queue button[aria-current="true"]{border-color:var(--gold);color:var(--gold-light)}
.keyboard-hint{margin:0;color:var(--muted);font-size:.78rem;text-align:center}

body.has-player{padding-bottom:84px}

@media (max-width:760px){
  .player-bar{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}
  .player-seek{grid-column:1/-1;grid-row:2}
  .player-extra{display:none}
  body.has-player{padding-bottom:130px}
}
@media (max-width:420px){
  .player-bar{width:calc(100% - 18px);gap:6px 8px}
  .player-now .cover{width:44px;height:44px}
  .player-controls{gap:4px}
  .player-controls .icon-btn{width:36px;height:36px}
  .player-seek{grid-template-columns:36px 1fr 36px;gap:6px}
  .full-inner{gap:14px}
  .full-cover{max-height:42vh}
  .keyboard-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .icon-btn{transition:none}
}