:root {
  --acc: #2EE59D;
  --bg: #121212;
  --bg2: #0B0B0B;
  --card: #2A2A2A;
  --card2: #1F1F1F;
  --text: #FFFFFF;
  --muted: #B3B3B3;
  --dim: #9A9A9A;
  --tint: #2A2A2A;
  --safe-b: max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px));
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overscroll-behavior: none; }
body { font-family: 'Manrope', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
input { font: inherit; }
img { display: block; }
.hidden { display: none !important; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
#main { flex: 1 1 auto; min-height: 0; }
.page { padding: 20px 16px 24px; display: flex; flex-direction: column; gap: 26px; }
h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.4px; }
h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.3px; }
.t1 { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t2 { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.lbl { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #D0D0D0; }
.muted { color: var(--muted); }
.row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
svg { display: block; }

/* обложки: цветная плитка с буквой, поверх — картинка, если загрузилась */
.cov { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; flex: none; }
.cov > span { pointer-events: none; }
.cov > img, .mosaic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.mosaic > img { position: static; }

/* главная */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); background: var(--card2); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.dot { width: 6px; height: 6px; border-radius: 3px; background: var(--acc); }
.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.q { display: flex; align-items: center; gap: 10px; height: 56px; border-radius: 6px; background: var(--card); overflow: hidden; padding-right: 8px; }
.q .cov { width: 56px; height: 56px; font-size: 20px; }
.q .qt { font-size: 13px; font-weight: 700; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hs { display: flex; gap: 14px; overflow-x: auto; margin: 14px -16px 0; padding: 0 16px; scrollbar-width: none; }
.hs::-webkit-scrollbar { display: none; }
.tile { width: 136px; flex: 0 0 136px; }
.tile .cov { width: 136px; height: 136px; border-radius: 6px; font-size: 40px; }
.tile .t1 { margin-top: 8px; }
.note { background: var(--card2); border-radius: 8px; padding: 14px; font-size: 14px; line-height: 1.45; color: #DADADA; }

.chip-sm { margin-top: 8px; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,0.14); font-size: 12px; font-weight: 700; color: #fff; }
.t2.two { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mix-tile .cov { border-radius: 8px; }

/* ---------- анимации (только при body.anim) ---------- */
.anim .icon-btn, .anim .btn, .anim .playbtn, .anim .pp, .anim .q, .anim .tile, .anim .chip, .anim .pl-row,
.anim .src-btn, .anim .genre, .anim .artist, .anim .wave-card, .anim .tab, .anim .chip-sm, .anim .mini-open {
  transition: transform 0.16s cubic-bezier(.3,1.6,.5,1), background-color 0.2s, opacity 0.2s;
}
.anim .icon-btn:active, .anim .chip:active, .anim .chip-sm:active, .anim .tab:active { transform: scale(0.86); }
.anim .btn:active, .anim .q:active, .anim .tile:active, .anim .pl-row:active, .anim .src-btn:active,
.anim .genre:active, .anim .artist:active, .anim .mini-open:active { transform: scale(0.96); }
.anim .playbtn:active, .anim .pp:active { transform: scale(0.9); }
.anim .wave-card:active { transform: scale(0.98); }
@media (hover: hover) { .anim .playbtn:hover, .anim .pp:hover { transform: scale(1.06); } .anim .tile:hover .cov { filter: brightness(1.08); } }
.anim .bump { animation: bump 0.42s cubic-bezier(.3,1.8,.5,1); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.32); } 70% { transform: scale(0.92); } 100% { transform: scale(1); } }
.anim .swap svg { animation: swap 0.32s ease-out; }
@keyframes swap { from { transform: scale(0.4) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
.anim .tab.bump svg { animation: tabhop 0.42s cubic-bezier(.3,1.8,.5,1); }
.anim .tab.bump { animation: none; }
@keyframes tabhop { 40% { transform: translateY(-4px) scale(1.12); } 100% { transform: none; } }
.anim .mini:not(.hidden) { animation: rise 0.36s cubic-bezier(.2,.9,.3,1.1); }
@keyframes rise { from { transform: translateY(110%); opacity: 0; } to { transform: none; opacity: 1; } }
.anim .full-cover-wrap .cov { transition: transform 0.45s cubic-bezier(.2,.9,.3,1.1), box-shadow 0.45s; }
.anim .full:not(.playing) .full-cover-wrap .cov { transform: scale(0.88); box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.anim .genre.on, .anim .artist.on .ph img { transition: box-shadow 0.2s; }
.anim .check { animation: bump 0.36s cubic-bezier(.3,1.8,.5,1); }

/* «Моя волна» */
.wave-card { position: relative; overflow: hidden; }
.wave-card > :not(.wave-bg) { position: relative; z-index: 1; }
.wave-bg { position: absolute; left: 0; bottom: 0; width: 2400px; height: 70%; pointer-events: none; opacity: 0.55; }
.wave-bg path { fill: rgba(46,229,157,0.10); }
.wave-bg .w2 { fill: rgba(46,229,157,0.08); }
.wave-bg .w3 { fill: rgba(46,229,157,0.06); }
.anim .wave-bg .w1 { animation: flow 9s linear infinite; }
.anim .wave-bg .w2 { animation: flow 13s linear infinite reverse; }
.anim .wave-bg .w3 { animation: flow 17s linear infinite; }
@keyframes flow { from { transform: translateX(0); } to { transform: translateX(-200px); } }
.anim .wave-card.playing .wave-bg { opacity: 1; }
.anim .wave-card.playing .wave-bg .w1 { animation-duration: 3.2s; }
.anim .wave-card.playing .wave-bg .w2 { animation-duration: 4.6s; }
.anim .wave-card.playing .wave-bg .w3 { animation-duration: 6s; }
.anim .wave-card:not(.playing) .wave-bars i { animation: breathe 2.4s ease-in-out infinite; }
.anim .wave-card:not(.playing) .wave-bars i:nth-child(2) { animation-delay: -0.4s; }
.anim .wave-card:not(.playing) .wave-bars i:nth-child(3) { animation-delay: -0.8s; }
.anim .wave-card:not(.playing) .wave-bars i:nth-child(4) { animation-delay: -1.2s; }
.anim .wave-card:not(.playing) .wave-bars i:nth-child(5) { animation-delay: -1.6s; }
@keyframes breathe { 0%, 100% { transform: scaleY(0.7); opacity: 0.75; } 50% { transform: scaleY(1.15); opacity: 1; } }
.anim .wave-card.playing .wave-bars { animation: glow 1.8s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 6px rgba(46,229,157,0.10); } }

/* в такт музыке (body.beat — есть «карта громкости» и музыка играет): переменные --lvl, --bass,
   --h0…--h4 обновляет app.js каждый кадр */
/* в такт: волна подпрыгивает на ударах, карточка вспыхивает изнутри */
.anim.beat .wave-card.playing .wave-bg { transform: scaleY(calc(0.45 + var(--lvl, 0.4) * 0.35 + var(--pulse, 0) * 0.9)); transform-origin: bottom; opacity: 1; }
.anim.beat .wave-card.playing .wave-bg .w1 { fill: rgba(46,229,157,calc(0.12 + var(--pulse, 0) * 0.22)); }
.anim.beat .wave-card.playing .wave-bg .w2 { fill: rgba(46,229,157,calc(0.09 + var(--pulse, 0) * 0.12)); }
.wave-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit;
  background: radial-gradient(90% 120% at 8% 50%, rgba(46,229,157,0.28), transparent 70%); }
.anim.beat .wave-card.playing::after { opacity: calc(var(--pulse, 0) * 0.9); }
.anim.beat .wave-card.playing .wave-bars i { animation: none; transition: height 0.06s linear; }
.anim.beat .wave-card.playing .wave-bars i:nth-child(1) { height: var(--h0); }
.anim.beat .wave-card.playing .wave-bars i:nth-child(2) { height: var(--h1); }
.anim.beat .wave-card.playing .wave-bars i:nth-child(3) { height: var(--h2); }
.anim.beat .wave-card.playing .wave-bars i:nth-child(4) { height: var(--h3); }
.anim.beat .wave-card.playing .wave-bars i:nth-child(5) { height: var(--h4); }
.anim.beat .wave-card.playing .wave-bars { animation: none; box-shadow: 0 0 0 calc(var(--pulse, 0) * 12px) rgba(46,229,157,0.16); }
.anim.beat .full.playing .full-cover-wrap .cov { transform: scale(calc(1 + var(--pulse, 0) * 0.04)); transition: transform 0.06s linear; }
.wave-card { display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 16px; border-radius: 12px; background: radial-gradient(120% 140% at 0% 0%, #1E4D3B 0%, #15231D 55%, #141414 100%); }
.wave-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wave-title { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; }
.wave-bars { width: 52px; height: 52px; flex: none; display: flex; align-items: center; justify-content: center; gap: 4px; border-radius: 26px; background: rgba(46,229,157,0.12); }
.wave-bars i { width: 4px; height: 10px; border-radius: 2px; background: var(--acc); }
.wave-bars i:nth-child(2) { height: 18px; } .wave-bars i:nth-child(3) { height: 26px; } .wave-bars i:nth-child(4) { height: 16px; }
.anim .wave-card.playing .wave-bars i { animation: eq 0.9s ease-in-out infinite alternate; }
.anim .wave-card.playing .wave-bars i:nth-child(2) { animation-delay: -0.3s; } .anim .wave-card.playing .wave-bars i:nth-child(3) { animation-delay: -0.6s; }
.anim .wave-card.playing .wave-bars i:nth-child(4) { animation-delay: -0.15s; } .anim .wave-card.playing .wave-bars i:nth-child(5) { animation-delay: -0.45s; }
@keyframes eq { from { height: 6px; } to { height: 28px; } }


/* списки треков */
.list { display: flex; flex-direction: column; }
.tr { display: flex; align-items: center; gap: 12px; padding: 6px 0; width: 100%; content-visibility: auto; contain-intrinsic-size: auto 60px; }
.tr .cov { width: 48px; height: 48px; border-radius: 4px; font-size: 18px; }
.tr .m { flex: 1; min-width: 0; }
.tr .a { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr.cur .a { color: var(--acc); }
.tr .b { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-top: 3px; min-width: 0; }
.tr .b span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr .d { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.src { flex: none; padding: 1px 5px; border-radius: 3px; background: #3A3A3A; color: #DADADA; font-size: 10px; font-weight: 800; letter-spacing: 0.4px; }
.ready { flex: none; }
.icon-btn { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 22px; position: relative; }
.icon-btn:active { background: rgba(255,255,255,0.08); }
.section-lbl { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; margin: 4px 0 4px; }
.more { padding: 16px 0; text-align: center; color: var(--muted); font-size: 14px; }

/* поиск */
.searchbox { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: 8px; background: #fff; color: #121212; }
.searchbox input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-weight: 600; font-size: 16px; color: #121212; }
.searchbox input::placeholder { color: #777; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 7px 14px; border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 600; }
.chip.on { background: var(--acc); color: #0B0B0B; font-weight: 700; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #333; border-top-color: var(--acc); animation: spin 0.8s linear infinite; margin: 28px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.import-card { display: flex; flex-direction: column; gap: 12px; background: var(--card2); border-radius: 10px; padding: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border-radius: 22px; background: var(--acc); color: #0B0B0B; font-weight: 800; font-size: 15px; }
.btn.ghost { background: var(--card); color: #fff; }

/* медиатека */
.pl-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; width: 100%; }
.pl-row .cov { width: 64px; height: 64px; border-radius: 4px; font-size: 24px; }
.pl-row .a { display: block; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* плейлист */
.pl-head { padding: 8px 16px 20px; display: flex; flex-direction: column; gap: 16px; background: linear-gradient(var(--tint), var(--bg)); }
.pl-head .cov { align-self: center; width: 200px; height: 200px; border-radius: 4px; font-size: 72px; box-shadow: 0 12px 40px rgba(0,0,0,0.45); }
.pl-head h1 { font-size: 24px; }
.pl-head .cov.round { border-radius: 50%; overflow: hidden; }
.pl-head .cov.round img { width: 100%; height: 100%; object-fit: cover; }
.ar-link { color: inherit; font: inherit; padding: 0; text-align: left; }
.ar-link:active { opacity: 0.6; }
@media (hover: hover) { .ar-link:hover { text-decoration: underline; color: #fff; } }
.related { margin-top: 28px; }
.related .artist { flex: none; width: 112px; animation: none; }
.pl-actions { display: flex; align-items: center; justify-content: space-between; }
.playbtn { width: 56px; height: 56px; border-radius: 28px; background: var(--acc); display: flex; align-items: center; justify-content: center; }
.pl-body { padding: 0 16px 24px; }
.on-acc svg { stroke: var(--acc) !important; }

/* мини-плеер */
.mini { flex: none; position: relative; margin: 0 8px 6px; border-radius: 8px; background: var(--tint); padding: 8px 4px 10px 8px; transition: background 0.4s; }
#miniPlay.loading svg { opacity: 0.25; }
#miniPlay.loading::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: spin 0.8s linear infinite; }
.mini.is-loading .mini-txt .t2::after { content: " · загружаю…"; color: #fff; }
.mini-row { display: flex; align-items: center; gap: 2px; }
.mini-left { flex: 1; min-width: 0; display: flex; align-items: center; }
.mini-center, .mini-right { display: flex; align-items: center; flex: none; }
.mini-right { display: none; } /* громкость в мини-плеере — только на компьютере; на телефоне — кнопки телефона */
.mini-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.icon-btn.sm { width: 34px; height: 40px; }
input[type=range].mini-vol { display: none; width: 96px; }
.mini.vol-open .mini-vol { display: block; position: absolute; left: 12px; right: 12px; bottom: calc(100% + 6px); width: auto; height: 36px; padding: 0 12px; border-radius: 18px; background: #2A2A2A; box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
/* перемотка: тонкая полоса по нижнему краю карточки (обрезана её скруглением), без кружка;
   при наведении/перемотке — толще и с кружком, чтобы было видно, что её можно тянуть */
.mini-seek-wrap { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; border-radius: 0 0 8px 8px; overflow: hidden; }
/* поле на 14 px, его середина — ровно на нижнем крае карточки: линия 2 px лежит по краю */
input[type=range].mini-seek { position: absolute; left: 0; right: 0; bottom: -6px; width: 100%; height: 14px; margin: 0; touch-action: none; cursor: pointer; }
input[type=range].mini-seek::-webkit-slider-runnable-track { height: 2px; border-radius: 0; transition: height 0.12s; }
input[type=range].mini-seek::-webkit-slider-thumb { width: 0; height: 0; margin-top: 1px; border-radius: 50%; background: #fff; box-shadow: none; }
input[type=range].mini-seek::-moz-range-track { height: 2px; border-radius: 0; }
input[type=range].mini-seek::-moz-range-progress { height: 2px; border-radius: 0; }
input[type=range].mini-seek::-moz-range-thumb { width: 0; height: 0; border: 0; background: #fff; }
.mini-seek-wrap:hover input[type=range].mini-seek::-webkit-slider-runnable-track,
.mini-seek-wrap.dragging input[type=range].mini-seek::-webkit-slider-runnable-track { height: 4px; }
.mini-seek-wrap:hover input[type=range].mini-seek::-webkit-slider-thumb,
.mini-seek-wrap.dragging input[type=range].mini-seek::-webkit-slider-thumb { width: 10px; height: 10px; margin-top: -3px; }
.mini-seek-wrap:hover input[type=range].mini-seek::-moz-range-track,
.mini-seek-wrap.dragging input[type=range].mini-seek::-moz-range-track,
.mini-seek-wrap:hover input[type=range].mini-seek::-moz-range-progress,
.mini-seek-wrap.dragging input[type=range].mini-seek::-moz-range-progress { height: 4px; }
.mini-seek-wrap:hover input[type=range].mini-seek::-moz-range-thumb,
.mini-seek-wrap.dragging input[type=range].mini-seek::-moz-range-thumb { width: 10px; height: 10px; }
/* при перемотке полоса поднимается внутрь карточки, а кружку можно выйти за скругление */
.mini-seek-wrap.dragging, .mini-seek-wrap:hover { overflow: visible; }
.mini-seek-wrap.dragging input[type=range].mini-seek, .mini-seek-wrap:hover input[type=range].mini-seek { bottom: -3px; }
.mini .cov { width: 40px; height: 40px; border-radius: 4px; font-size: 16px; }
.mini-txt { min-width: 0; }
.mini .t2 { color: #D0D0D0; }

/* таббар */
.tabs { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 6px 0 calc(8px + var(--safe-b)); background: var(--bg2); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 52px; font-size: 11px; font-weight: 700; color: var(--dim); text-align: center; }
.tab.on { color: #fff; }
.tab svg { stroke: currentColor; }

/* полноэкранный плеер */
.full { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; gap: 18px; padding: 10px 24px calc(20px + var(--safe-b)); background: linear-gradient(var(--tint) 0%, #121212 120%); transform: translateY(100%); transition: transform 0.32s cubic-bezier(.2,.8,.2,1); }
.full.open { transform: none; }
.full-top { display: flex; align-items: center; justify-content: space-between; margin: 0 -10px; }
.full-from { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.full-from span:last-child { font-size: 13px; font-weight: 700; margin-top: 2px; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.full-cover-wrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; container-type: size; }
.full-cover-wrap .cov { width: min(86vw, 44vh); height: min(86vw, 44vh); width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); border-radius: 8px; font-size: 120px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.full-meta { display: flex; align-items: center; gap: 12px; }
.full-names { flex: 1; min-width: 0; }
.full-title { font-size: 22px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.full-artist { font-size: 15px; color: #D0D0D0; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.full-meta .icon-btn { margin-right: -10px; }
/* на телефоне — полоса для пальца повыше, сама линия та же */
@media (pointer: coarse) {
  .seek input[type=range], .vol input[type=range] { height: 36px; margin: -8px 0; touch-action: none; }
  .mini-seek-wrap { height: 16px; }
  input[type=range].mini-seek { height: 24px; bottom: -10px; }
  .mini-seek-wrap.dragging input[type=range].mini-seek { bottom: -7px; }
}
.times { display: flex; justify-content: space-between; font-size: 12px; color: #D0D0D0; font-variant-numeric: tabular-nums; margin-top: 2px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: transparent; margin: 0; --p: 0%; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #fff var(--p), rgba(255,255,255,0.3) var(--p)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 6px; background: #fff; }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.3); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: #fff; }
input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 6px; background: #fff; }
.ctrls { display: flex; align-items: center; justify-content: space-between; margin: 0 -10px; }
.icon-btn.big { width: 52px; height: 52px; border-radius: 26px; }
.pp { width: 68px; height: 68px; border-radius: 34px; background: #fff; display: flex; align-items: center; justify-content: center; }
.pp.loading svg { opacity: 0.25; }
.pp.loading::after { content: ""; position: absolute; width: 30px; height: 30px; border-radius: 50%; border: 3px solid #bbb; border-top-color: #0B0B0B; animation: spin 0.8s linear infinite; }
.pp { position: relative; }
#repeat .rep1 { display: none; position: absolute; top: 7px; right: 7px; font-style: normal; font-size: 9px; font-weight: 800; color: #0B0B0B; background: var(--acc); border-radius: 6px; width: 12px; height: 12px; line-height: 12px; text-align: center; }
#repeat.one .rep1 { display: block; }
.vol { display: flex; align-items: center; gap: 12px; color: #D0D0D0; }
.xf { display: flex; align-items: center; gap: 12px; margin-top: -6px; }
.xf .lbl { flex: none; width: 72px; }
.xf-val { flex: none; width: 36px; text-align: right; font-size: 13px; font-weight: 700; color: #D0D0D0; font-variant-numeric: tabular-nums; }
.next-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 8px; background: rgba(0,0,0,0.28); width: 100%; }
.next-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/* очередь */
.sheet { position: absolute; inset: 0; z-index: 20; background: var(--bg); display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.28s cubic-bezier(.2,.8,.2,1); }
.sheet.open { transform: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 10px 6px 16px; }
.sheet-body { flex: 1; padding: 0 16px calc(16px + var(--safe-b)); }

.set-block { background: var(--card2); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.set-row { display: flex; align-items: center; justify-content: space-between; }
.set-title { font-size: 16px; font-weight: 700; }
.set-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.set-tabs { margin: 4px 0 6px; }
.imp { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; }
.imp-src { background: var(--card2); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 12px; }
.imp-src.focus { box-shadow: 0 0 0 2px var(--acc); }
.imp-head { display: flex; align-items: center; gap: 10px; }
.imp-logo { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex: none; }
.imp-name { display: block; font-size: 16px; font-weight: 800; }
.imp-head > span:last-child { flex: 1; min-width: 0; }
.imp-head .t2 { white-space: normal; }
.imp-row { display: flex; gap: 8px; }
.inp { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid #333; background: #121212; color: #fff; font-size: 15px; outline: none; }
.inp:focus { border-color: var(--acc); }
textarea.inp { height: 96px; padding: 10px 12px; resize: vertical; font-size: 14px; line-height: 1.4; }
.btn.sm { height: 44px; padding: 0 16px; font-size: 14px; flex: none; }
.btn[disabled] { opacity: 0.5; }
.imp-pl { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.hero { background: radial-gradient(120% 140% at 0% 0%, #1E4D3B 0%, #15231D 55%, #141414 100%); border-radius: 14px; padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.hero p { margin: 0; color: #D6D6D6; font-size: 14px; line-height: 1.45; }
.src-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.src-btn { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 12px; border-radius: 10px; background: rgba(255,255,255,0.08); font-weight: 700; font-size: 14px; }
.btn.wide { width: 100%; height: 50px; font-size: 16px; }
/* знакомство */
.taste { padding: 12px 16px 0; display: flex; flex-direction: column; gap: 14px; min-height: 100%; }
.taste h1 { font-size: 24px; }
.genre-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.genre { position: relative; height: 84px; border-radius: 10px; padding: 12px; display: flex; align-items: flex-end; font-weight: 800; font-size: 16px; overflow: hidden; text-align: left; }
.genre.on { box-shadow: inset 0 0 0 3px var(--acc); }
.check { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 12px; background: var(--acc); display: none; align-items: center; justify-content: center; }
.on > .check, .on .check { display: flex; }
.artist-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
.artist { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; animation: pop 0.25s ease-out; }
@keyframes pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
.artist .ph { position: relative; width: 96px; height: 96px; border-radius: 50%; background: #2A2A2A; overflow: visible; }
.artist .ph img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.artist.on .ph img { box-shadow: 0 0 0 3px var(--acc); }
.artist .ph .check { top: 0; right: 0; }
.artist .nm { font-size: 13px; font-weight: 700; line-height: 1.25; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sticky-go { position: sticky; bottom: 0; padding: 14px 0 16px; background: linear-gradient(transparent, var(--bg) 35%); margin-top: auto; }
/* переключается только сам флажок и заголовок — случайный клик по пояснению ничего не меняет */
.set-check { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.set-check label.set-title, .set-check input { cursor: pointer; }
.set-check input { width: 22px; height: 22px; accent-color: var(--acc); flex: none; }

/* Telegram в полноэкранном режиме: под системные кнопки сверху */
#app { padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); }

/* мышь: видимые полосы прокрутки, ленты можно таскать */
@media (hover: hover) and (pointer: fine) {
  .scroll, .hs { scrollbar-width: thin; scrollbar-color: #4A4A4A transparent; }
  .scroll::-webkit-scrollbar, .hs::-webkit-scrollbar { display: block; width: 10px; height: 10px; }
  .scroll::-webkit-scrollbar-thumb, .hs::-webkit-scrollbar-thumb { background: #4A4A4A; border-radius: 6px; border: 2px solid var(--bg); }
  .scroll::-webkit-scrollbar-thumb:hover, .hs::-webkit-scrollbar-thumb:hover { background: #6A6A6A; }
  .scroll::-webkit-scrollbar-track, .hs::-webkit-scrollbar-track { background: transparent; }
  .hs { padding-bottom: 8px; cursor: grab; }
  .hs.dragging { cursor: grabbing; user-select: none; }
  .hs.dragging * { pointer-events: none; }
  .icon-btn:hover { background: rgba(255,255,255,0.08); }
}

/* широкий экран (Telegram Desktop на весь экран) */
@media (min-width: 900px) {
  .page, .taste { max-width: 1120px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
  .pl-head > *, .pl-body { max-width: 1120px; width: 100%; margin-left: auto; margin-right: auto; }
  .pl-head { padding-left: 32px; padding-right: 32px; }
  .quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .genre-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .artist-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .src-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile, .tile .cov { width: 168px; flex-basis: 168px; } .tile .cov { height: 168px; }
  .hs { margin: 14px 0 0; padding-left: 0; padding-right: 0; }
  .mini { margin: 0; border-radius: 0; padding: 10px 24px 14px; }
  .mini-seek-wrap { border-radius: 0; }
  .mini-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; }
  .mini-center { gap: 8px; }
  .mini-right { display: flex; justify-content: flex-end; }
  #miniVolBtn { pointer-events: none; }
  input[type=range].mini-vol { display: block; width: 96px; }

  .tabs { justify-content: center; grid-template-columns: repeat(3, 160px); }
  .full { align-items: center; }
  .full > * { width: 100%; max-width: 520px; }
  .full-cover-wrap { max-width: 520px; }
  .sheet { left: 50%; right: auto; width: min(720px, 100%); transform: translate(-50%, 100%); }
  .sheet.open { transform: translate(-50%, 0); }
  .toast { left: 50%; right: auto; width: 420px; margin-left: -210px; }
}
.toast { position: absolute; left: 16px; right: 16px; bottom: calc(140px + var(--safe-b)); z-index: 30; background: #F2F2F2; color: #121212; font-size: 14px; font-weight: 600; padding: 12px 14px; border-radius: 8px; opacity: 0; transform: translateY(8px); transition: 0.2s; pointer-events: none; }
.toast.show { opacity: 1; transform: none; }
.center { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; color: var(--muted); }