.rep-catalog{position:relative;isolation:isolate;padding:44px 0 24px;color:var(--tx,#f2eee6);font:inherit}
.rep-catalog::before,.rep-catalog::after{content:"";position:absolute;pointer-events:none;z-index:-1;top:-30px;width:50%;height:420px;opacity:.55;background:radial-gradient(ellipse at top left,rgba(217,164,65,.3),transparent 65%);filter:blur(6px)}
.rep-catalog::before{left:-16px}.rep-catalog::after{right:-16px;transform:scaleX(-1)}
.rep-intro{text-align:center;margin-bottom:32px}.rep-intro h1{font-family:var(--hf,inherit);font-size:clamp(28px,4.5vw,52px);line-height:1.2;margin:0 0 16px}.rep-intro p{color:var(--mu,#b4aea3);font-size:18px}
.rep-search{display:block;color:var(--mu,#b4aea3)}.rep-search input{display:block;box-sizing:border-box;width:100%;margin:8px 0 24px;padding:16px 20px;border:1px solid var(--ac,#d9a441);border-radius:14px;background:var(--card,#1a191f);color:var(--tx,#f2eee6);font:inherit;min-height:50px}
.rep-catalog :focus-visible{outline:2px solid var(--ac,#d9a441);outline-offset:4px}#rep-count{color:var(--mu,#b4aea3);font-size:14px}.rep-list{padding:0;list-style:none;margin:0}.rep-cta{margin:36px 0 16px;padding:24px;border:1px solid var(--ac,#d9a441);border-radius:18px;display:flex;gap:24px;align-items:center;justify-content:space-between}.rep-cta h2{font-family:var(--hf,inherit);font-size:clamp(18px,2.4vw,25px);margin:0 0 8px}.rep-cta p{margin:0;color:var(--mu,#b4aea3)}
@media(max-width:900px){.rep-cta{flex-direction:column;align-items:stretch}}
@media(max-width:600px){.rep-catalog{padding-top:30px}.rep-intro p{font-size:16px}.rep-cta{padding:20px}.rep-cta .n-btn{text-align:center}}
.rep-catalog::before,.rep-catalog::after{background:radial-gradient(ellipse 24px 14px at 8% 3%,rgba(255,239,194,.95),transparent 80%),conic-gradient(from 145deg at 8% 3%,transparent 0deg,rgba(217,164,65,.17) 13deg,rgba(255,228,169,.12) 24deg,transparent 36deg),radial-gradient(ellipse at top left,rgba(217,164,65,.22),transparent 65%)}

.rep-player[hidden]{display:none}.rep-player{position:fixed;bottom:0;left:0;right:0;z-index:1100;background:rgba(17,16,20,.98);border-top:1px solid var(--ac,#d9a441);padding:14px max(16px,calc((100vw - 1200px)/2)) calc(12px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:minmax(140px,1fr) 44px minmax(240px,2fr) 44px 44px;align-items:center;gap:12px;box-sizing:border-box;color:var(--tx,#f2eee6)}
.rep-player-info{min-width:0}.rep-player-info strong,.rep-player-info span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rep-player-info span{font-size:13px;color:var(--mu,#b4aea3)}.rep-player audio{width:100%;height:40px;color-scheme:dark}.rep-player button{width:44px;height:44px;border:1px solid var(--line2,#3a3744);border-radius:50%;background:var(--card,#1a191f);color:var(--ac,#d9a441);font-size:20px;cursor:pointer}.rep-player button:disabled{opacity:.35;cursor:default}#rep-player-status{grid-column:1/-1;font-size:13px;margin:0}#rep-player-status:empty{display:none}body.rep-player-open{padding-bottom:190px!important}body.rep-player-open .n-bar{display:none}body.rep-player-open .n-totop{bottom:200px!important}.rep-play{min-height:44px}
@media(max-width:700px){.rep-player{grid-template-columns:44px minmax(0,1fr) 44px 44px;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))}.rep-player-info{grid-column:1/4;grid-row:1}#rep-close{grid-column:4;grid-row:1}.rep-player audio{grid-column:2/4;grid-row:2}#rep-prev{grid-column:1;grid-row:2}#rep-next{grid-column:4;grid-row:2}}


/* Filters wrap naturally on tablets and phones. */
.rep-filter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
  align-items: start;
  gap: 20px;
  margin: 0 0 24px;
}
.rep-filter-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.rep-filter-group legend { margin-bottom: 12px; font-weight: 700; }
.rep-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.rep-pills button {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--line2, #3a3744);
  border-radius: 999px;
  color: var(--tx, #f2eee6);
  background: transparent;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.rep-pills button[aria-pressed="true"] {
  color: #17130b;
  border-color: var(--ac, #d9a441);
  background: var(--ac, #d9a441);
  font-weight: 700;
}

@media (max-width: 900px) {
  .rep-filter-grid { grid-template-columns: 1fr; gap: 18px; }
}

.rep-player audio { min-width: 0; }
body.rep-player-open { padding-bottom: calc(190px + env(safe-area-inset-bottom, 0px)) !important; }
body.rep-player-open #cookie { position: static !important; }

.rep-list-tools { margin-bottom: 20px; }
#rep-reset, #rep-more { min-height: 44px; }
#rep-more[hidden], .rep-song[hidden] { display: none; }
.rep-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.rep-song {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  gap: 4px 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line2, #3a3744);
  border-radius: 12px;
  background: var(--card, #1a191f);
  scroll-margin-top: 96px;
}
.rep-song-name { min-width: 0; grid-area: 1 / 1 / 2 / -1; align-self: start; }
.rep-title, .rep-artist, .rep-song-category { overflow-wrap: anywhere; }
.rep-title { font-size: 17px; }
.rep-artist { display: block; margin-top: 2px; color: var(--mu, #b4aea3); font-size: 14px; }
.rep-artist:empty { display: none; }
.rep-song-category {
  grid-area: 2 / 1;
  color: var(--ac, #d9a441);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}
.rep-song:has(.rep-play) .rep-song-category { text-align: right; }
.rep-play { grid-area: 2 / 2; justify-self: end; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; }
.rep-play[aria-pressed="true"] { border-color: var(--ac, #d9a441); color: var(--ac, #d9a441); }
.rep-more { text-align: center; margin-top: 16px; }
.rep-more:has(button[hidden]) { display: none; }
@media (max-width: 960px) {
  .rep-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .rep-catalog::before { left: 0; }
  .rep-catalog::after { right: 0; }
  .rep-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 420px) {
  .rep-play { width: 44px; padding: 0; }
  .rep-play-label { display: none; }
}