:root {
  color-scheme: dark;
  --bg: #09090c;
  --panel: #121217;
  --panel-soft: rgba(20, 19, 26, 0.76);
  --panel-strong: rgba(25, 23, 31, 0.96);
  --line: rgba(255, 255, 255, 0.085);
  --line-bright: rgba(255, 255, 255, 0.14);
  --text: #f7f4f1;
  --muted: #918d99;
  --muted-strong: #b9b4bf;
  --coral: #ff795f;
  --rose: #f6538c;
  --violet: #9877ff;
  --lime: #c8ff65;
  --mint: #68e5c0;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
* { scrollbar-width:thin; scrollbar-color:rgba(232,97,142,.72) rgba(255,255,255,.025); }
*::-webkit-scrollbar { width:8px; height:8px; }
*::-webkit-scrollbar-track { margin:8px 0; border-radius:999px; background:rgba(255,255,255,.025); }
*::-webkit-scrollbar-thumb { min-height:48px; border:2px solid transparent; border-radius:999px; background:linear-gradient(180deg,rgba(255,137,106,.92),rgba(239,77,132,.88) 48%,rgba(145,103,255,.9)); background-clip:padding-box; box-shadow:0 0 14px rgba(239,77,132,.24); }
*::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,#ff9b70,#fa568b 48%,#a47cff); background-clip:padding-box; }
*::-webkit-scrollbar-button { width:0; height:0; display:none; }
*::-webkit-scrollbar-corner { background:transparent; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--bg); scroll-behavior: smooth; }
html.player-open, html.account-open, html.wave-open { width: 100%; height: 100%; overflow: hidden; }
body {
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-x: none;
}
body.player-open {
  position: fixed;
  inset-inline: 0;
  top: var(--player-scroll-top, 0);
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body.wave-open { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 2px solid rgba(255, 121, 95, 0.8); outline-offset: 3px; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.app-preloader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(48, 31, 58, .58), transparent 36%),
    linear-gradient(145deg, #08080b 0%, #0d0b11 52%, #08090c 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity .58s cubic-bezier(.22,.8,.22,1), visibility .58s;
}
.app-preloader.is-ready { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-stage {
  position: relative;
  z-index: 2;
  width: min(82vw, 330px);
  display: grid;
  justify-items: center;
  transform: translateY(-1.5vh);
  transition: transform .58s cubic-bezier(.22,.8,.22,1), filter .58s ease;
}
.app-preloader.is-ready .preloader-stage { transform: translateY(-1.5vh) scale(.94); filter: blur(5px); }
.preloader-aurora { position: absolute; inset: 0; pointer-events: none; }
.preloader-aurora i { position: absolute; width: 42vw; height: 42vw; max-width: 360px; max-height: 360px; border-radius: 50%; filter: blur(54px); opacity: .15; animation: preloader-drift 4.6s ease-in-out infinite alternate; }
.preloader-aurora i:nth-child(1) { left: 3%; top: 8%; background: #8d6cff; }
.preloader-aurora i:nth-child(2) { right: -4%; bottom: 10%; background: #ff596f; animation-delay: -1.7s; }
.preloader-aurora i:nth-child(3) { left: 34%; bottom: 22%; background: #64e9c1; animation-delay: -3s; opacity: .09; }
.preloader-orbits { position: relative; width: 156px; height: 156px; display: grid; place-items: center; }
.preloader-core {
  position: relative;
  z-index: 3;
  width: 72px;
  height: 72px;
  padding: 7px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 25px;
  background: rgba(18,16,23,.86);
  box-shadow: 0 20px 60px rgba(246,83,140,.22), 0 0 0 8px rgba(255,255,255,.025), inset 0 1px rgba(255,255,255,.18);
  animation: preloader-breathe 1.8s ease-in-out infinite;
}
.preloader-core img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 18px; }
.preloader-orbit { position: absolute; inset: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; animation: preloader-spin 3.4s linear infinite; }
.preloader-orbit.orbit-two { inset: 0; border-style: dashed; border-color: rgba(152,119,255,.16); animation-duration: 7s; animation-direction: reverse; }
.preloader-orbit b { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: #ff7967; box-shadow: 0 0 18px #ff7967; }
.preloader-orbit.orbit-two b { top: auto; bottom: 13px; left: 8px; width: 7px; height: 7px; background: #83e7c9; box-shadow: 0 0 18px #83e7c9; }
.preloader-wordmark { margin-top: 18px; font-size: 24px; font-weight: 900; letter-spacing: .34em; text-indent: .34em; color: #fff; text-shadow: 0 8px 28px rgba(255,255,255,.12); }
.preloader-wave { height: 34px; margin-top: 13px; display: flex; align-items: center; gap: 5px; }
.preloader-wave i { width: 3px; height: 20px; border-radius: 99px; background: linear-gradient(180deg, #ff8b62, #f35c8b 52%, #a985ff); transform-origin: center; animation: preloader-wave 1s ease-in-out infinite; box-shadow: 0 0 12px rgba(246,83,140,.22); }
.preloader-wave i:nth-child(1), .preloader-wave i:nth-child(7) { height: 9px; animation-delay: -.12s; }
.preloader-wave i:nth-child(2), .preloader-wave i:nth-child(6) { height: 15px; animation-delay: -.28s; }
.preloader-wave i:nth-child(3), .preloader-wave i:nth-child(5) { height: 25px; animation-delay: -.44s; }
.preloader-wave i:nth-child(4) { height: 32px; animation-delay: -.6s; }
.preloader-stage p { margin: 5px 0 0; color: #928d9a; font-size: 11px; font-weight: 650; letter-spacing: .04em; }
.preloader-line { width: 132px; height: 2px; margin-top: 22px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.preloader-line i { display: block; width: 52%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, transparent, #ff795f 32%, #9877ff 72%, transparent); animation: preloader-line 1.35s ease-in-out infinite; }
@keyframes preloader-spin { to { transform: rotate(360deg); } }
@keyframes preloader-breathe { 0%,100% { transform: scale(.96); } 50% { transform: scale(1.04); } }
@keyframes preloader-wave { 0%,100% { transform: scaleY(.36); opacity: .55; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes preloader-line { from { transform: translateX(-110%); } to { transform: translateX(205%); } }
@keyframes preloader-drift { from { transform: translate3d(-4%, -3%, 0) scale(.92); } to { transform: translate3d(5%, 4%, 0) scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .preloader-aurora i, .preloader-orbit, .preloader-core, .preloader-wave i, .preloader-line i { animation-duration: 3s; animation-iteration-count: 1; }
}

.page-glow { position: fixed; z-index: 0; width: 52vw; height: 52vw; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: 0.12; }
.glow-one { top: -30vw; left: -18vw; background: #7453d8; }
.glow-two { top: 8vh; right: -34vw; background: #f25b62; }
.app-shell { position: relative; z-index: 1; width: 100%; min-height: 100vh; padding: 0 24px calc(170px + var(--safe-bottom)); }

.topbar {
  position: relative;
  z-index: 100;
  width: min(100%, 1420px);
  height: 86px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 190px minmax(240px, 560px) minmax(190px, 290px);
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: inline-flex; width: max-content; align-items: center; gap: 13px; color: var(--text); text-decoration: none; }
.brand-mark {
  width: 44px; height: 44px; overflow:hidden; border-radius: 15px; display: block;
  box-shadow: 0 12px 34px rgba(255, 102, 93, 0.2), inset 0 1px rgba(255,255,255,.16);
}
.brand-mark img { width:100%; height:100%; display:block; object-fit:cover; }
.brand-name { font-size: 13px; font-weight: 800; letter-spacing: .32em; }
.top-actions { justify-self:end; min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.top-shuffle { flex:0 0 46px; }
.account-button { min-width:0; height:48px; padding:4px 12px 4px 5px; display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:17px; background:rgba(19,18,24,.78); text-align:left; transition:.2s ease; }
.account-button:hover { border-color:var(--line-bright); background:rgba(30,27,36,.94); transform:translateY(-1px); }
.account-button.is-plus { border-color:rgba(255,190,92,.25); background:linear-gradient(135deg,rgba(255,179,71,.11),rgba(151,101,255,.09)); }
.account-avatar { flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.15); border-radius:13px; background-color:#201922; background-image:linear-gradient(145deg,#ff9d72,#f6578c 58%,#9b7cff); background-position:center; background-size:cover; color:#fff; font-size:12px; font-weight:900; box-shadow:inset 0 1px rgba(255,255,255,.25),0 7px 18px rgba(0,0,0,.16); }
.account-avatar.has-photo { border-radius:50%; color:transparent; box-shadow:0 0 0 2px rgba(255,255,255,.045),0 8px 24px rgba(0,0,0,.24); }
.account-copy { min-width:0; flex:1; }
.account-copy small,.account-copy strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.account-copy small { color:#77717e; font-size:7px; font-weight:900; letter-spacing:.16em; }
.account-copy strong { max-width:110px; margin-top:3px; font-size:11px; }
.plus-crown { flex:0 0 26px; width:26px; height:26px; display:grid; place-items:center; border-radius:9px; color:#ffd276; background:rgba(255,198,91,.09); }
.plus-crown svg { width:15px; }

.search-box {
  position: relative;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(17, 16, 22, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.search-box:focus-within { background: rgba(24, 22, 30, .94); border-color: rgba(255, 121, 95, .42); box-shadow: 0 0 0 4px rgba(255,121,95,.06); }
.search-box svg { flex: 0 0 21px; width: 21px; color: #a09ba8; }
.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 14px; }
.search-box input::placeholder { color: #77727f; }
.search-box input::-webkit-search-cancel-button { display:none; -webkit-appearance:none; }
.search-box > button { flex:0 0 auto; border: 0; background: transparent; color: #898491; }
.search-clear { width:30px; height:30px; padding:0; display:none; place-items:center; border-radius:10px!important; font-size:21px; }
.search-box.has-value .search-clear { display:grid; }
.recognize-button { width:42px; height:42px; padding:0; position:relative; isolation:isolate; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.11)!important; border-radius:14px!important; background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025))!important; color:#e5dfe9!important; box-shadow:inset 0 1px rgba(255,255,255,.08),0 7px 18px rgba(0,0,0,.14); transition:color .2s,background .2s,transform .2s,box-shadow .2s; }
.recognize-button::before { content:""; position:absolute; z-index:-1; inset:4px; border-radius:10px; background:radial-gradient(circle at 35% 24%,rgba(255,143,111,.16),rgba(152,119,255,.055) 64%,transparent); }
.recognize-button:hover { color:#fff!important; background:linear-gradient(145deg,rgba(255,121,95,.15),rgba(152,119,255,.08))!important; box-shadow:inset 0 1px rgba(255,255,255,.1),0 9px 24px rgba(0,0,0,.22); }
.recognize-button.active { color:#fff!important; background:linear-gradient(145deg,var(--coral),var(--rose))!important; box-shadow:0 0 0 5px rgba(246,83,140,.09),0 10px 28px rgba(246,83,140,.2); }
.recognize-button:active { transform:scale(.92); }
.recognize-icon { width:23px!important; height:23px; flex:0 0 23px!important; overflow:visible; stroke-width:1.65; }
.search-suggestions-popover { position:absolute; z-index:82; top:calc(100% + 10px); left:0; right:0; max-height:min(470px,65vh); padding:8px; overflow-y:auto; overscroll-behavior:contain; border:1px solid rgba(255,255,255,.095); border-radius:22px; background:linear-gradient(155deg,rgba(27,24,32,.985),rgba(12,11,16,.985)); box-shadow:0 28px 80px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.055); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); transform-origin:top center; animation:search-suggestions-in .24s cubic-bezier(.16,1,.3,1); scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent; }
.search-suggestions-popover[hidden] { display:none; }
.suggestions-heading { padding:10px 11px 8px; display:flex; align-items:center; justify-content:space-between; gap:12px; color:#77717e; font-size:8px; font-weight:900; letter-spacing:.16em; }
.suggestions-heading strong { color:#d9d3dd; font-size:9px; }
.suggestion-row { width:100%; min-height:62px; padding:7px 9px; display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:11px; border:0; border-radius:16px; background:transparent; color:var(--text); text-align:left; transition:background .18s,transform .18s; }
.suggestion-row:hover,.suggestion-row.is-active { background:linear-gradient(90deg,rgba(255,121,95,.12),rgba(152,119,255,.07)); transform:translateX(2px); }
.suggestion-cover { width:46px; height:46px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:linear-gradient(145deg,rgba(255,121,95,.19),rgba(152,119,255,.18)); color:#f2c0b4; font-size:15px; font-weight:900; }
.suggestion-cover img { width:100%; height:100%; display:block; object-fit:cover; }
.suggestion-row[data-kind="artist"] .suggestion-cover { border-radius:50%; }
.suggestion-copy { min-width:0; }
.suggestion-copy strong,.suggestion-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.suggestion-copy strong { font-size:12px; }
.suggestion-copy small { margin-top:5px; color:#817b88; font-size:9px; }
.suggestion-kind { min-width:48px; padding:6px 8px; border:1px solid rgba(255,255,255,.07); border-radius:999px; color:#8b8491; font-size:7px; font-weight:900; letter-spacing:.1em; text-align:center; }
.suggestions-loading,.suggestions-empty { min-height:68px; padding:14px; display:flex; align-items:center; justify-content:center; gap:6px; color:#817b88; font-size:10px; text-align:center; }
.suggestions-loading i { width:5px; height:5px; border-radius:50%; background:linear-gradient(135deg,var(--coral),var(--violet)); animation:suggestion-dot .8s ease-in-out infinite alternate; }
.suggestions-loading i:nth-child(2){animation-delay:-.22s}.suggestions-loading i:nth-child(3){animation-delay:-.44s}
@keyframes search-suggestions-in { from { opacity:0; transform:translateY(-8px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes suggestion-dot { to { transform:translateY(-5px); opacity:.45; } }
.mobile-search { display: none; }
.artist-results { margin-top:28px; }
.artist-results-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:14px; }
.artist-results-head strong { font-size:20px; letter-spacing:-.035em; }
.artist-results-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.artist-result-card { min-width:0; min-height:104px; padding:12px; display:grid; grid-template-columns:76px minmax(0,1fr) 34px; align-items:center; gap:13px; overflow:hidden; position:relative; border:1px solid var(--line); border-radius:24px; background:linear-gradient(135deg,rgba(28,25,34,.94),rgba(15,14,20,.88)); text-align:left; transition:transform .2s,border-color .2s,background .2s; }
.artist-result-card::before { content:""; position:absolute; inset:auto -32px -54px auto; width:120px; height:120px; border-radius:50%; background:var(--artist-glow,rgba(255,121,95,.14)); filter:blur(20px); pointer-events:none; }
.artist-result-card:hover { transform:translateY(-2px); border-color:rgba(255,121,95,.28); background:linear-gradient(135deg,rgba(34,30,40,.98),rgba(18,16,23,.94)); }
.artist-result-avatar { width:76px; height:76px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:50%; background:linear-gradient(145deg,rgba(255,121,95,.26),rgba(152,119,255,.28)); color:#fff; font-size:26px; font-weight:900; box-shadow:0 12px 30px rgba(0,0,0,.28); }
.artist-result-avatar img { width:100%; height:100%; display:block; object-fit:cover; }
.artist-result-copy { min-width:0; position:relative; z-index:1; }
.artist-result-copy strong,.artist-result-copy small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.artist-result-copy strong { font-size:15px; }
.artist-result-copy small { margin-top:7px; color:#8e8895; font-size:10px; }
.artist-result-arrow { position:relative; z-index:1; width:32px; height:32px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.09); border-radius:12px; color:#d8d1dc; background:rgba(255,255,255,.045); font-size:18px; }
.recognition-card { position:fixed; z-index:52; top:82px; left:50%; transform:translate(-50%,-14px); width:min(470px,calc(100% - 28px)); min-height:82px; padding:13px 52px 13px 14px; display:grid; grid-template-columns:50px minmax(0,1fr); align-items:center; gap:13px; border:1px solid rgba(255,121,95,.2); border-radius:24px; background:rgba(20,18,25,.92); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); box-shadow:0 24px 70px rgba(0,0,0,.48); animation:recognition-in .35s cubic-bezier(.16,1,.3,1) forwards; }
.recognition-orb { width:50px; height:50px; display:flex; align-items:center; justify-content:center; gap:2px; border-radius:17px; background:linear-gradient(145deg,rgba(255,121,95,.18),rgba(152,119,255,.18)); color:#ff9c85; }
.recognition-orb i { width:2px; height:9px; border-radius:4px; background:currentColor; animation:recognition-wave .65s ease-in-out infinite alternate; }
.recognition-orb i:nth-child(2),.recognition-orb i:nth-child(4){height:18px;animation-delay:-.3s}.recognition-orb i:nth-child(3){height:27px;animation-delay:-.5s}
.recognition-copy { min-width:0; }
.recognition-copy strong,.recognition-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recognition-copy strong { font-size:13px; }
.recognition-copy small { margin-top:6px; color:#8e8995; font-size:10px; }
.recognition-card > button { position:absolute; right:13px; top:13px; width:32px; height:32px; padding:0; border:0; border-radius:11px; background:rgba(255,255,255,.04); color:#a8a2ad; font-size:20px; }
@keyframes recognition-in { to{opacity:1;transform:translate(-50%,0)} }
@keyframes recognition-wave { to{transform:scaleY(.38);opacity:.48} }
.icon-button {
  width: 46px; height: 46px; padding: 0; border: 1px solid var(--line); border-radius: 16px;
  display: grid; place-items: center; background: rgba(19,18,24,.8); color: #dad6de;
  transition: transform .18s, background .18s, border-color .18s;
}
.icon-button:hover { background: rgba(31,29,37,.95); border-color: var(--line-bright); }
.icon-button:active { transform: scale(.94); }
.icon-button svg { width: 20px; }
.pulse-icon { width: 23px; height: 23px; display: flex; align-items: center; justify-content: center; gap: 2.5px; }
.pulse-icon i { width: 2.5px; border-radius: 8px; background: currentColor; box-shadow: 0 0 12px rgba(255,121,95,.28); transition: transform .24s ease; }
.pulse-icon i:nth-child(1),.pulse-icon i:nth-child(5) { height: 7px; }
.pulse-icon i:nth-child(2),.pulse-icon i:nth-child(4) { height: 14px; }
.pulse-icon i:nth-child(3) { height: 20px; }
.icon-button:hover .pulse-icon i,.secondary-action:hover .pulse-icon i { animation: button-wave .7s ease-in-out infinite alternate; }
.icon-button:hover .pulse-icon i:nth-child(2),.secondary-action:hover .pulse-icon i:nth-child(2) { animation-delay: -.32s; }
.icon-button:hover .pulse-icon i:nth-child(3),.secondary-action:hover .pulse-icon i:nth-child(3) { animation-delay: -.15s; }
.icon-button:hover .pulse-icon i:nth-child(4),.secondary-action:hover .pulse-icon i:nth-child(4) { animation-delay: -.42s; }
@keyframes button-wave { to { transform: scaleY(.45); opacity:.58; } }

#mainContent { width: min(100%, 1420px); margin: 0 auto; }
.app-shell.search-mode .wave-hero,
.app-shell.search-mode .featured-section,
.app-shell.search-mode .discovery-bar { display:none; }
.app-shell.search-mode #mainContent { min-height:calc(100dvh - 86px); }
.app-shell.search-mode .catalog-section { margin-top:22px; }
.app-shell.search-mode .catalog-section .section-head { margin-bottom:18px; }
.wave-hero {
  min-height: 430px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 64px 70px;
  border: 1px solid var(--line);
  border-radius: 36px;
  background:
    radial-gradient(circle at 82% 36%, rgba(255, 111, 92, .17), transparent 27%),
    radial-gradient(circle at 64% 100%, rgba(139, 96, 255, .16), transparent 36%),
    linear-gradient(125deg, #17151d 0%, #131219 58%, #19131a 100%);
  box-shadow: 0 34px 100px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.025);
}
.hero-ambient { position:absolute; z-index:0; inset:-55px; opacity:0; background-position:center 36%; background-size:cover; filter:blur(58px) saturate(1.4); transform:scale(1.12); transition:opacity .65s ease,background-image .45s ease,transform 1.2s cubic-bezier(.16,1,.3,1); pointer-events:none; }
.hero-ambient.visible { opacity:.32; transform:scale(1.04); }
.wave-hero::before { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(90deg,rgba(12,11,16,.94) 0%,rgba(12,11,16,.75) 48%,rgba(12,11,16,.35) 100%),linear-gradient(180deg,rgba(15,13,18,.06),rgba(15,13,18,.5)); pointer-events:none; }
.wave-hero::after { content: ""; position: absolute; z-index:1; inset: 0; background-image: linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg,#000,transparent 72%); pointer-events: none; }
.hero-copy { position: relative; z-index: 3; width: min(62%, 780px); }
.hero-kicker, .section-label { display: inline-flex; align-items: center; gap: 9px; color: #f19a86; font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: .27em; }
.hero-kicker i { width: 27px; height: 1px; background: linear-gradient(90deg,var(--coral),transparent); }
.wave-hero h1 { max-width: 820px; margin: 18px 0 22px; overflow:visible; font-size: clamp(64px, 6.2vw, 96px); line-height: .9; letter-spacing: -.068em; }
.wave-hero h1 span,.wave-hero h1 em,.wave-hero p { transition:opacity .34s ease,transform .48s cubic-bezier(.16,1,.3,1),filter .34s ease; }
.hero-copy.is-changing h1 span { opacity:0; transform:translateY(-12px); filter:blur(5px); }
.hero-copy.is-changing h1 em { opacity:0; transform:translateY(12px); filter:blur(5px); }
.hero-copy.is-changing p { opacity:0; transform:translateY(7px); }
.wave-hero h1 em { display:inline-block; max-width:100%; padding:0 .08em .08em 0; margin:0; white-space:nowrap; font-style:normal; color:transparent; background:linear-gradient(92deg,#ff966c 0%,#ff5f8d 45%,#a88cff 100%); background-clip:text; -webkit-background-clip:text; }
.wave-hero p { max-width: 560px; margin: 0; color: #a19ba7; font-size: 16px; line-height: 1.6; }
.hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 30px; }
.primary-action, .secondary-action { height: 52px; border: 0; }
.primary-action { padding: 0 21px; display: flex; align-items: center; gap: 11px; border-radius: 18px; background: #f8f4f0; color: #181116; font-size: 13px; font-weight: 800; box-shadow: 0 13px 36px rgba(0,0,0,.25); }
.primary-action:hover { transform: translateY(-1px); }
.play-glyph { width: 0; height: 0; margin-left: 2px; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.secondary-action { width: 52px; display: grid; place-items: center; border: 1px solid var(--line-bright); border-radius: 18px; background: rgba(255,255,255,.045); color: #c8c3cd; }
.secondary-action .pulse-icon { color:#f4b1a0; }
.hero-art { position: absolute; z-index: 2; width: 440px; height: 370px; right: 6%; top: 50%; transform: translateY(-50%); }
.hero-disc { position: absolute; width: 318px; height: 318px; top: 26px; right: 12px; border-radius: 50%; background: repeating-radial-gradient(circle,#17151c 0 5px,#24202a 6px 7px); box-shadow: 0 40px 80px rgba(0,0,0,.38); animation: disc-spin 28s linear infinite; }
.hero-disc::after { content: ""; position: absolute; inset: 36%; border-radius: 50%; background: linear-gradient(145deg,var(--coral),var(--rose) 54%,var(--violet)); box-shadow: inset 0 0 0 22px rgba(16,13,19,.2); }
.hero-disc span { position: absolute; z-index: 2; width: 18px; height: 18px; left: calc(50% - 9px); top: calc(50% - 9px); border-radius: 50%; background: #111016; }
.cover-stack { position: absolute; width: 134px; height: 134px; padding: 5px; border: 1px solid rgba(255,255,255,.16); border-radius: 27px; background: rgba(23,21,28,.78); box-shadow: 0 25px 55px rgba(0,0,0,.4); backdrop-filter: blur(14px); }
.cover-stack img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 22px; background: #24212b; }
.cover-stack-a { left: 6px; top: 32px; transform: rotate(-8deg); }
.cover-stack-b { left: 35px; bottom: 16px; transform: rotate(7deg); }
.cover-stack-c { right: 14px; bottom: -5px; width: 104px; height: 104px; transform: rotate(-4deg); }
.hero-wave { position: absolute; z-index: 3; right: 31%; bottom: 42px; height: 28px; display: flex; align-items: center; gap: 4px; opacity: .7; }
.hero-wave i { width: 3px; border-radius: 5px; background: linear-gradient(var(--coral),var(--violet)); animation: wave 1.15s ease-in-out infinite alternate; }
.hero-wave i:nth-child(1),.hero-wave i:nth-child(7){height:7px}.hero-wave i:nth-child(2),.hero-wave i:nth-child(6){height:15px;animation-delay:-.4s}.hero-wave i:nth-child(3),.hero-wave i:nth-child(5){height:24px;animation-delay:-.8s}.hero-wave i:nth-child(4){height:12px;animation-delay:-.2s}
@keyframes disc-spin { to { transform: rotate(360deg); } }
@keyframes wave { to { transform: scaleY(.4); opacity:.55; } }

.wave-experience {
  position:fixed; z-index:720; inset:0; overflow:hidden; padding:clamp(24px,4vw,54px);
  display:grid; grid-template-rows:auto minmax(0,1fr) auto auto auto; place-items:center;
  color:#fff; background:#08080c; opacity:0; visibility:hidden; pointer-events:none;
  transform:scale(1.035); transition:opacity .5s cubic-bezier(.22,.8,.22,1),transform .68s cubic-bezier(.16,1,.3,1),visibility .5s;
  isolation:isolate;
}
.wave-experience.open { opacity:1; visibility:visible; pointer-events:auto; transform:scale(1); }
.wave-experience.closing { opacity:0; transform:scale(.975); }
.wave-experience-ambient { position:absolute; z-index:-4; inset:-12%; background-position:center; background-size:cover; filter:blur(70px) saturate(1.4); opacity:.27; transform:scale(1.15); transition:background-image .55s ease; }
.wave-experience::before { content:""; position:absolute; z-index:-3; inset:0; background:radial-gradient(circle at 50% 38%,rgba(8,8,12,.12),rgba(8,8,12,.8) 55%,#08080c 88%),linear-gradient(145deg,rgba(255,114,88,.14),transparent 35%,rgba(148,105,255,.12)); }
.wave-experience::after { content:""; position:absolute; z-index:-2; inset:0; opacity:.18; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:54px 54px; mask-image:radial-gradient(circle at 50% 45%,#000,transparent 75%); }
.wave-aurora { position:absolute; z-index:-1; inset:0; overflow:hidden; pointer-events:none; }
.wave-aurora i { position:absolute; width:min(62vw,760px); aspect-ratio:1; border-radius:50%; filter:blur(90px); opacity:.2; mix-blend-mode:screen; animation:wave-aurora-drift 8s ease-in-out infinite alternate; }
.wave-aurora i:nth-child(1) { left:-18%; top:-28%; background:#ff6e58; }
.wave-aurora i:nth-child(2) { right:-20%; top:8%; background:#a56cff; animation-delay:-2.8s; }
.wave-aurora i:nth-child(3) { left:26%; bottom:-45%; background:#58e5c0; animation-delay:-5.4s; opacity:.12; }
.wave-experience-header { width:min(100%,1180px); display:grid; grid-template-columns:58px 1fr 58px; align-items:center; text-align:center; }
.wave-experience-header > span { display:grid; gap:5px; }
.wave-experience-header small,.wave-personal-badge { color:#ff9b87; font-size:10px; font-weight:850; letter-spacing:.26em; }
.wave-experience-header strong { font-size:18px; letter-spacing:-.02em; }
.wave-round-button { width:54px; height:54px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.12); border-radius:19px; background:rgba(18,17,23,.58); backdrop-filter:blur(20px); color:#e7e1e9; }
.wave-round-button svg { width:23px; height:23px; }
.wave-like .heart-glyph { width:25px; height:25px; }
.wave-like.active { color:#ff5d8d; border-color:rgba(255,93,141,.38); box-shadow:0 0 34px rgba(255,93,141,.18); }
.wave-stage { position:relative; min-height:0; width:min(54vh,480px); aspect-ratio:1; display:grid; place-items:center; margin:10px 0; }
.wave-orbit { position:absolute; inset:-11%; border-radius:50%; }
.orbit-track { position:absolute; border:1px solid rgba(255,255,255,.09); border-radius:50%; animation:wave-orbit-spin 16s linear infinite; will-change:transform; }
.orbit-track i { position:absolute; left:50%; top:-6px; width:12px; height:12px; border-radius:50%; color:#ff755f; background:currentColor; box-shadow:0 0 9px currentColor,0 0 28px currentColor; transform:translateX(-50%); }
.orbit-track i::before { content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid currentColor; opacity:.32; animation:particle-halo 1.35s ease-out infinite; }
.orbit-track i::after { content:""; position:absolute; width:46px; height:4px; right:5px; top:50%; border-radius:99px; background:linear-gradient(90deg,transparent,currentColor); opacity:.68; filter:blur(1.2px); transform:translateY(-50%) scaleX(.72); transform-origin:right center; animation:particle-tail 1.1s ease-in-out infinite alternate; }
.orbit-outer { inset:0; animation-delay:-3s; }.orbit-outer i { color:#ff755f; }
.orbit-middle { inset:10%; border-style:dashed; border-color:rgba(166,125,255,.105); animation-duration:12s; animation-delay:-7s; }.orbit-middle i { width:10px; height:10px; color:#a782ff; }
.orbit-inner { inset:22%; border-color:rgba(104,229,192,.1); animation-duration:8.5s; animation-delay:-1.5s; }.orbit-inner i { width:9px; height:9px; color:#68e5c0; }
.wave-cover-shell { position:relative; width:75%; aspect-ratio:1; padding:7px; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:34%; background:rgba(21,19,27,.64); box-shadow:0 44px 110px rgba(0,0,0,.55),0 0 80px rgba(246,83,140,.15),inset 0 1px rgba(255,255,255,.16); transform:rotate(-2deg); animation:wave-cover-float 5.5s ease-in-out infinite; }
.wave-cover-shell img { width:100%; height:100%; display:block; object-fit:cover; border-radius:32%; background:#181720; }
.wave-cover-glass { position:absolute; inset:7px; border-radius:32%; background:linear-gradient(125deg,rgba(255,255,255,.16),transparent 30%,transparent 68%,rgba(255,111,147,.14)); pointer-events:none; }
.wave-spectrum { position:absolute; left:50%; bottom:24px; height:35px; padding:8px 11px; display:flex; align-items:center; gap:4px; border:1px solid rgba(255,255,255,.13); border-radius:14px; background:rgba(9,9,13,.46); backdrop-filter:blur(16px); transform:translateX(-50%); }
.wave-spectrum i { width:3px; height:18px; border-radius:10px; background:linear-gradient(#ff9275,#f65a91 52%,#a47fff); animation:wave-spectrum 1s ease-in-out infinite; }
.wave-spectrum i:nth-child(2n) { animation-delay:-.35s; }.wave-spectrum i:nth-child(3n) { animation-delay:-.7s; }
.wave-experience-copy { width:min(92vw,760px); text-align:center; }
.wave-experience-copy h2 { max-width:min(100%,760px); margin:10px auto 3px; overflow:visible; white-space:normal; overflow-wrap:anywhere; text-wrap:balance; font-size:clamp(30px,4vw,52px); line-height:.98; letter-spacing:-.045em; }
.wave-artist-link { max-width:min(100%,680px); margin:0 auto; padding:5px 10px; display:flex; align-items:center; justify-content:center; gap:5px; overflow:visible; white-space:normal; overflow-wrap:anywhere; text-align:center; border:0; border-radius:10px; background:transparent; color:#aaa4b0; font-size:15px; line-height:1.25; transition:color .2s ease,background .2s ease,transform .2s ease; }
.wave-artist-link:hover { color:#fff; background:rgba(255,255,255,.055); transform:translateY(-1px); }
.wave-artist-link svg { flex:0 0 14px; width:14px; height:14px; transition:transform .2s ease; }.wave-artist-link:hover svg { transform:translateX(2px); }
.wave-personal-badge { display:inline-flex; align-items:center; gap:8px; }
.wave-personal-badge::before { content:""; width:24px; height:1px; background:linear-gradient(90deg,transparent,#ff8b72); }
.wave-experience-controls { margin:21px 0 16px; display:flex; align-items:center; gap:34px; }
.wave-experience-controls > button { width:48px; height:48px; display:grid; place-items:center; border:0; background:transparent; color:#aaa5b0; }
.wave-experience-controls svg { width:27px; height:27px; }
.wave-experience-controls .wave-main-play { width:84px; height:84px; position:relative; isolation:isolate; overflow:visible; border:2px solid rgba(255,255,255,.13); border-radius:50%; color:#fff; background:radial-gradient(circle at 34% 25%,rgba(255,255,255,.13),transparent 30%),linear-gradient(145deg,#211c27 0%,#121016 58%,#0b0a0e 100%); box-shadow:0 24px 62px rgba(0,0,0,.46),0 12px 46px rgba(246,83,140,.18),inset 0 1px rgba(255,255,255,.15),inset 0 -10px 24px rgba(0,0,0,.32); }
.wave-main-play::before { content:""; position:absolute; z-index:-1; inset:-7px; border-radius:50%; padding:2px; background:conic-gradient(from 20deg,#ffb06f,#ff637e 30%,#d258b7 54%,#8f7eff 76%,#66dbc3,#ffb06f); filter:drop-shadow(0 0 10px rgba(246,83,140,.34)); animation:wave-ring-spin 5s linear infinite; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.wave-main-play .play-icon { display:grid; place-items:center; color:#fff; filter:drop-shadow(0 2px 8px rgba(255,255,255,.24)); }
.wave-main-play .play-icon svg { width:35px; height:35px; stroke-width:2.45; }.wave-main-play .play-icon-play svg { transform:translateX(1px); }
.wave-main-play:not(.paused) .play-icon-play,.wave-main-play.paused .play-icon-pause { opacity:1; transform:scale(1) rotate(0); animation:wave-control-pop .42s cubic-bezier(.2,1.55,.35,1); }
.wave-main-play.paused { animation:wave-playing-glow 1.9s ease-in-out infinite; }
.wave-main-play::after { content:""; position:absolute; inset:-10px; border:1px solid rgba(255,108,118,.2); border-radius:inherit; opacity:0; pointer-events:none; }
.wave-main-play.paused::after { animation:wave-play-ripple 1.9s ease-out infinite; }
.wave-experience-footer { width:min(100%,760px); display:flex; align-items:center; justify-content:center; gap:24px; }
.wave-experience-footer button { height:44px; padding:0 17px; display:flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.12); border-radius:15px; background:rgba(255,255,255,.055); color:#f0ebf2; font-size:12px; font-weight:750; }
.wave-experience-footer button svg { width:16px; height:16px; }
.wave-experience-footer .wave-dislike { width:44px; min-width:44px; padding:0; justify-content:center; border-radius:15px; color:#c6becb; background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); box-shadow:inset 0 1px rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.2); }
.wave-experience-footer .wave-dislike svg { width:20px; height:20px; stroke-width:1.75; }
.wave-dislike:hover { color:#ff8ca5; border-color:rgba(255,108,132,.3); background:linear-gradient(145deg,rgba(255,87,121,.14),rgba(143,83,126,.06))!important; transform:translateY(-2px); box-shadow:inset 0 1px rgba(255,255,255,.1),0 12px 28px rgba(255,68,112,.12); }
.wave-dislike.is-sent { animation:wave-dislike-sent .52s cubic-bezier(.2,1.4,.35,1); color:#ff7897; }
.wave-experience-footer > span { color:#817c88; font-size:11px; }.wave-experience-footer > span i { display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:#70e0bd; box-shadow:0 0 12px #70e0bd; }
@keyframes wave-aurora-drift { from { transform:translate3d(-4%,-3%,0) scale(.92); } to { transform:translate3d(6%,5%,0) scale(1.1); } }
@keyframes wave-orbit-spin { to { transform:rotate(360deg); } }
@keyframes wave-cover-float { 0%,100% { transform:translateY(5px) rotate(-2deg); } 50% { transform:translateY(-7px) rotate(1deg); } }
@keyframes wave-spectrum { 0%,100% { transform:scaleY(.35); opacity:.55; } 50% { transform:scaleY(1); opacity:1; } }
@keyframes wave-iridescent { to { background-position:250% 250%; } }
@keyframes wave-ring-spin { to { transform:rotate(360deg); } }
@keyframes particle-tail { from { opacity:.38; transform:translateY(-50%) scaleX(.56); } to { opacity:.86; transform:translateY(-50%) scaleX(1.12); } }
@keyframes particle-halo { 0% { opacity:.45; transform:scale(.55); } 100% { opacity:0; transform:scale(1.65); } }
@keyframes wave-control-pop { 0% { opacity:0; transform:scale(.35) rotate(-18deg); } 65% { opacity:1; transform:scale(1.18) rotate(3deg); } 100% { opacity:1; transform:scale(1) rotate(0); } }
@keyframes wave-playing-glow { 0%,100% { box-shadow:0 20px 55px rgba(246,83,140,.25),0 0 0 8px rgba(255,255,255,.03); } 50% { box-shadow:0 24px 68px rgba(246,83,140,.42),0 0 0 12px rgba(179,121,255,.055); } }
@keyframes wave-play-ripple { 0% { opacity:.65; transform:scale(.88); } 100% { opacity:0; transform:scale(1.28); } }
@keyframes wave-dislike-sent { 0% { transform:scale(1); } 45% { transform:scale(.88) rotate(-4deg); } 75% { transform:scale(1.08) rotate(2deg); } 100% { transform:scale(1); } }

.featured-section, .catalog-section { margin-top: 54px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.compact-head { margin-bottom: 18px; }
.section-head h2 { margin: 8px 0 0; font-size: clamp(30px, 3vw, 44px); line-height: 1; letter-spacing: -.045em; }
.featured-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.feature-card {
  min-width: 0; min-height: 178px; position: relative; overflow: hidden; padding: 20px;
  display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--line); border-radius: 26px;
  background: #17151c; text-align: left; isolation: isolate;
  transition: transform .22s, border-color .22s;
}
.feature-card:hover { transform: translateY(-3px); border-color: var(--line-bright); }
.feature-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg,rgba(8,8,11,.95),rgba(8,8,11,.06) 75%); }
.feature-card img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: transform .35s; }
.feature-card:hover img { transform: scale(1.04); }
.feature-card .feature-index { position: absolute; top: 16px; left: 16px; min-width: 27px; height: 27px; padding: 0 7px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(10,9,13,.48); color: #fff; font-size: 9px; font-weight: 800; backdrop-filter: blur(8px); }
.feature-card strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; letter-spacing: -.02em; }
.feature-card small { margin-top: 5px; color: #b4aeb8; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature-card .feature-play { position: absolute; right: 15px; bottom: 15px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 14px; background: rgba(247,244,241,.94); color: #171116; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.feature-play::after { content:""; margin-left:2px; border-left:9px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent; }

.discovery-bar { margin-top: 24px; }
.mood-row { display: flex; gap: 9px; padding: 2px 0; overflow-x: auto; scrollbar-width: none; }
.mood-row::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; min-height: 42px; padding: 0 17px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; background: rgba(15,14,19,.72); color: #aaa5b0; font-size: 12px; font-weight: 700; }
.chip:hover { border-color: var(--line-bright); color: #ded9e1; }
.chip.active { border-color: rgba(255,121,95,.35); background: rgba(255,121,95,.12); color: #ffac96; box-shadow: inset 0 0 0 1px rgba(255,121,95,.04); }
.refresh-button { min-height: 44px; padding: 0 10px; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: #898490; font-size: 12px; }
.refresh-button svg { width: 17px; }
.refresh-button:hover { color: var(--text); }

.status { min-height: 112px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--line); border-radius: 25px; color: #8f8996; background: rgba(16,15,20,.54); font-size: 13px; }
.status.error { color: #ff9e8f; }
.mini-spinner { width: 18px; height: 18px; border: 2px solid #35313b; border-top-color: var(--coral); border-radius: 50%; animation: spin .65s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.track-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.track-card { min-width: 0; min-height: 78px; display: grid; grid-template-columns: 58px minmax(0,1fr) 42px; align-items: center; gap: 12px; padding: 9px 10px; border: 1px solid transparent; border-radius: 20px; background: rgba(15,14,19,.46); cursor: pointer; transition: transform .18s, background .18s, border-color .18s; animation: track-reveal .42s cubic-bezier(.2,.75,.25,1) both; }
.track-card:nth-child(3n + 2) { animation-delay: .035s; }
.track-card:nth-child(3n) { animation-delay: .07s; }
.track-card:hover { transform: translateY(-2px); background: rgba(25,23,30,.92); border-color: var(--line); }
.track-card.playing { background: linear-gradient(100deg,rgba(255,121,95,.12),rgba(21,19,26,.92)); border-color: rgba(255,121,95,.16); }
.track-cover { width: 58px; height: 58px; position: relative; overflow: hidden; padding: 0; border: 0; border-radius: 16px; background: #26232c; }
.track-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.track-cover::after { content:""; position:absolute; inset:0; opacity:0; background:rgba(9,8,12,.46); transition:opacity .18s; }
.track-cover::before { content:""; position:absolute; z-index:2; left:24px; top:21px; opacity:0; border-left:11px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent; transition:opacity .18s; }
.track-card:hover .track-cover::after,.track-card:hover .track-cover::before,.track-card.playing .track-cover::after,.track-card.playing .track-cover::before{opacity:1}
.track-meta { min-width: 0; }
.track-meta strong, .track-meta small { display: block; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; }
.track-meta strong { font-size: 14px; letter-spacing: -.015em; }
.track-meta small { margin-top: 5px; color: #827d89; font-size: 11px; }
.like, .heart-button {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: visible;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.095);
  border-radius: 50%;
  background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  color: #8b8592;
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 8px 22px rgba(0,0,0,.15);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease, color .22s ease, background .22s ease, box-shadow .22s ease;
}
.like { width: 38px; height: 38px; }
.like:hover, .heart-button:hover { transform: translateY(-1px) scale(1.035); border-color: rgba(255,255,255,.17); color: #d2ccd6; background: linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.028)); }
.like:active, .heart-button:active { transform: scale(.93); }
.heart-glyph { width: 19px; height: 19px; overflow: visible; filter: drop-shadow(0 5px 9px rgba(0,0,0,.2)); }
.heart-glyph-fill { fill: currentColor; stroke: none; opacity: 0; transform: scale(.68); transform-origin: center; transition: opacity .22s ease, transform .32s cubic-bezier(.2,1.55,.35,1); }
.heart-glyph-line { fill: transparent; stroke: currentColor; stroke-width: 1.65; transition: opacity .18s ease; }
.heart-spark { position: absolute; z-index: -1; top: 7px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: #ffd0db; box-shadow: 0 0 0 0 rgba(255,111,145,0), -22px 5px 0 -2px #ff92ac, -10px 23px 0 -2px #b79aff; opacity: 0; transform: scale(.2); }
.like.active, .heart-button.active {
  border-color: rgba(255,104,143,.34);
  color: #ff668d;
  background: radial-gradient(circle at 35% 28%,rgba(255,132,157,.2),transparent 47%), linear-gradient(145deg,rgba(255,79,125,.12),rgba(132,82,143,.07));
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 10px 30px rgba(255,62,112,.13), 0 0 0 4px rgba(255,89,130,.035);
}
.like.active .heart-glyph-fill, .heart-button.active .heart-glyph-fill { opacity: 1; transform: scale(1); }
.like.active .heart-glyph-line, .heart-button.active .heart-glyph-line { opacity: 0; }
.like.active .heart-glyph, .heart-button.active .heart-glyph { animation: favorite-pop .46s cubic-bezier(.2,1.5,.35,1); }
.like.active .heart-spark, .heart-button.active .heart-spark { animation: favorite-spark .58s ease-out; }
@keyframes favorite-pop { 0% { transform: scale(.7) rotate(-8deg); } 55% { transform: scale(1.2) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes favorite-spark { 0% { opacity: 0; transform: scale(.2); } 36% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }
.load-more { min-height: 46px; display: block; margin: 30px auto 0; padding: 0 24px; border: 1px solid var(--line); border-radius: 999px; background: rgba(19,18,23,.9); color: #c5c0c9; font-size: 12px; font-weight: 700; }

.bottom-nav {
  position: fixed; z-index: 25; left: 50%; bottom: calc(12px + var(--safe-bottom)); transform: translateX(-50%);
  width: min(680px, calc(100% - 24px)); height: 72px; padding: 7px; display: grid; grid-template-columns: repeat(5,1fr);
  border: 1px solid var(--line); border-radius: 25px; background: rgba(12,11,15,.88);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 20px 65px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.035);
}
.nav-item { position: relative; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 18px; background: transparent; color: #6f6a77; font-size: 9px; font-weight: 700; transition: color .18s,background .18s,transform .18s; }
.nav-item svg { width: 21px; height: 21px; }
.nav-item:active { transform: scale(.94); }
.nav-item.active { color: #fff; background: rgba(255,255,255,.035); }
.nav-item.active::after { content:""; position:absolute; bottom:2px; width:18px; height:3px; border-radius:4px; background:linear-gradient(90deg,var(--coral),var(--rose)); box-shadow:0 0 12px rgba(255,96,115,.6); }
.nav-wave { isolation:isolate; color:#d4c6da; }
.nav-wave::before { content:""; position:absolute; z-index:-1; inset:5px; border-radius:15px; background:radial-gradient(circle at 35% 25%,rgba(255,129,103,.19),transparent 48%),linear-gradient(135deg,rgba(246,83,140,.11),rgba(152,119,255,.12)); opacity:.7; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 24px rgba(246,83,140,.08); animation:nav-wave-breathe 2.8s ease-in-out infinite; }
.nav-wave-core { width:27px; height:24px; display:flex!important; align-items:center; justify-content:center; gap:2px; border-radius:10px; color:#ff8c77; filter:drop-shadow(0 0 8px rgba(255,100,130,.45)); }
.nav-wave-core i { width:2px; border-radius:4px; background:linear-gradient(#ff9a78,#f6538c 55%,#a27eff); animation:nav-wave-bars .85s ease-in-out infinite alternate; }
.nav-wave-core i:nth-child(1),.nav-wave-core i:nth-child(5) { height:7px; }.nav-wave-core i:nth-child(2),.nav-wave-core i:nth-child(4) { height:14px; animation-delay:-.35s; }.nav-wave-core i:nth-child(3) { height:20px; animation-delay:-.7s; }
.nav-wave.active { color:#fff; }.nav-wave.active::before { opacity:1; box-shadow:inset 0 0 0 1px rgba(255,143,121,.22),0 0 30px rgba(246,83,140,.24),0 0 48px rgba(152,119,255,.12); }
@keyframes nav-wave-bars { to { transform:scaleY(.42); opacity:.65; } }
@keyframes nav-wave-breathe { 0%,100% { transform:scale(.96); opacity:.58; } 50% { transform:scale(1.03); opacity:1; } }

.mini-player { position: fixed; z-index: 28; left: 50%; bottom: calc(94px + var(--safe-bottom)); transform: translateX(-50%); width: min(720px,calc(100% - 24px)); height: 76px; padding: 9px; display: flex; align-items: center; border: 1px solid var(--line-bright); border-radius: 25px; background: rgba(24,22,29,.92); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); box-shadow: 0 25px 70px rgba(0,0,0,.5); animation: mini-player-in .44s cubic-bezier(.2,.9,.25,1) both; }
.mini-main { min-width:0; flex:1; padding:0; display:flex; align-items:center; gap:12px; border:0; background:transparent; text-align:left; }
.mini-cover-wrap { flex:0 0 56px; width:56px; height:56px; position:relative; overflow:hidden; border-radius:17px; background:#28252e; }
.mini-cover-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.mini-cover-wrap i { position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); border-radius:inherit; }
.mini-copy { min-width:0; }
.mini-copy strong,.mini-copy small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.mini-copy strong { font-size:14px; }
.mini-copy small { margin-top:5px; color:#88838f; font-size:11px; }
.mini-actions { display:flex; align-items:center; gap:6px; }
.mini-skip { width:42px; height:42px; padding:0; display:grid; place-items:center; border:0; background:transparent; color:#9a94a0; }
.mini-skip svg { width:21px; }
.mini-skip:hover { color:#f2edf4; transform:scale(1.06); }
.play-button { width:82px; height:82px; padding:3px; position:relative; isolation:isolate; display:grid; place-items:center; border:0; border-radius:50%; background:linear-gradient(145deg,#ffc08a 0%,#ff7865 40%,#f55391 72%,#9e7cff 100%); color:#fff; box-shadow:0 18px 50px rgba(248,81,118,.25),0 0 0 8px rgba(255,255,255,.025); transition:transform .2s ease,box-shadow .25s ease; }
.play-button::before { content:""; position:absolute; z-index:-1; inset:3px; border-radius:inherit; background:radial-gradient(circle at 34% 24%,#30212a,#17141b 68%); box-shadow:inset 0 1px 1px rgba(255,255,255,.12); }
.play-button::after { content:""; position:absolute; z-index:-2; inset:-8px; border:1px solid rgba(255,112,112,.15); border-radius:inherit; animation:play-orbit 3.6s ease-in-out infinite; }
.play-button:hover { transform:scale(1.045); box-shadow:0 22px 62px rgba(248,81,118,.34),0 0 0 9px rgba(255,255,255,.03); }
.play-button:active { transform:scale(.94); }
.play-icon { position:absolute; inset:0; display:grid; place-items:center; opacity:0; transform:scale(.65) rotate(-8deg); transition:opacity .2s ease,transform .26s cubic-bezier(.2,.9,.25,1); }
.play-icon svg { width:38px; height:38px; stroke-width:2.15; }
.play-button:not(.paused) .play-icon-play,.play-button.paused .play-icon-pause { opacity:1; transform:scale(1) rotate(0); }
.play-button:not(.paused) .play-icon-play,.play-button.paused .play-icon-pause { animation:wave-control-pop .4s cubic-bezier(.2,1.55,.35,1); }
.play-button.paused { animation:main-play-breathe 1.8s ease-in-out infinite; }
.play-button.small { width:52px; height:52px; padding:2px; box-shadow:0 10px 30px rgba(248,81,118,.2); }
.play-button.small::before { inset:2px; }
.play-button.small::after { inset:-5px; }
.play-button.small .play-icon svg { width:27px; height:27px; }
@keyframes play-orbit { 0%,100%{transform:scale(.96);opacity:.5}50%{transform:scale(1.08);opacity:1} }
@keyframes main-play-breathe { 0%,100% { box-shadow:0 18px 50px rgba(248,81,118,.25),0 0 0 8px rgba(255,255,255,.025); } 50% { box-shadow:0 22px 62px rgba(248,81,118,.42),0 0 0 11px rgba(158,124,255,.055); } }

.player-sheet { position:fixed; z-index:60; inset:0; overflow:hidden; visibility:hidden; pointer-events:none; }
.player-sheet.open { visibility:visible; pointer-events:auto; }
.player-sheet.closing { visibility:visible; pointer-events:none; }
.sheet-backdrop { position:absolute; inset:0; opacity:0; background:rgba(2,2,4,.78); backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); transition:opacity .38s cubic-bezier(.4,0,.2,1),backdrop-filter .44s cubic-bezier(.4,0,.2,1); }
.player-sheet.open .sheet-backdrop { opacity:1; }
.player-sheet.open .sheet-backdrop { backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.player-panel { position:absolute; left:50%; bottom:0; transform:translate3d(-50%,104%,0) scale(.965); width:min(620px,100%); max-height:calc(100dvh - 12px); overflow:hidden; overscroll-behavior:none; scrollbar-width:none; padding:10px 24px calc(28px + var(--safe-bottom)); border:1px solid var(--line); border-radius:34px 34px 0 0; background:rgba(14,13,18,.82); box-shadow:0 -35px 100px rgba(0,0,0,.58); opacity:.82; transition:transform .58s cubic-bezier(.16,1,.3,1),opacity .34s ease; will-change:transform,opacity; isolation:isolate; }
.player-panel::-webkit-scrollbar { display:none; }
.player-sheet.open .player-panel { transform:translate3d(-50%,0,0) scale(1); opacity:1; }
.player-sheet.closing .player-panel { transition-duration:.42s,.28s; transition-timing-function:cubic-bezier(.4,0,.2,1),ease; }
.player-ambient { position:absolute; z-index:-2; inset:0; background-position:center 24%; background-size:cover; opacity:.44; filter:blur(52px) saturate(1.3); transform:scale(1.15); transition:opacity .55s ease,transform 1.1s cubic-bezier(.16,1,.3,1); }
.player-sheet.open .player-ambient { transform:scale(1.03); }
.player-panel::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,rgba(10,9,13,.38) 0%,rgba(14,13,18,.78) 48%,#111016 88%); pointer-events:none; }
.player-header,.player-layout { transition:opacity .26s ease,transform .38s cubic-bezier(.4,0,.2,1); }
.player-sheet.closing .player-header,.player-sheet.closing .player-layout { opacity:0; transform:translateY(12px); }
.sheet-handle { width:44px; height:4px; margin:0 auto 9px; border-radius:5px; background:#48444e; }
.player-header { display:grid; grid-template-columns:46px 1fr 46px; align-items:center; text-align:center; }
.player-header span small,.player-header span strong { display:block; }
.player-header span small { color:#f38e79; font-size:8px; font-weight:800; letter-spacing:.22em; }
.player-header span strong { margin-top:5px; font-size:12px; }
.player-layout { min-width:0; }
.player-primary { min-width:0; }
.large-cover-wrap { width:min(370px,76vw); aspect-ratio:1; position:relative; overflow:hidden; margin:22px auto 20px; border-radius:30px; background:#27232c; box-shadow:0 30px 72px rgba(0,0,0,.42); }
.player-sheet.open .large-cover-wrap { animation:cover-arrive .7s .08s cubic-bezier(.16,1,.3,1) both; }
.large-cover-wrap img { width:100%; height:100%; display:block; object-fit:cover; }
.cover-shine { position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); pointer-events:none; }
.track-heading { display:flex; align-items:center; gap:14px; }
.track-heading > div { min-width:0; flex:1; }
.track-heading h2 { margin:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:clamp(26px,7vw,34px); letter-spacing:-.04em; }
#artistButton { max-width:100%; margin-top:6px; padding:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; border:0; background:transparent; color:#928c98; font-size:13px; text-align:left; }
.heart-button { flex:0 0 50px; width:50px; height:50px; }
.heart-button .heart-glyph { width:23px; height:23px; }
.progress-wrap { margin:18px 0 12px; }
.progress-wrap input { width:100%; height:4px; display:block; margin:0; accent-color:var(--coral); cursor:pointer; }
.progress-wrap div { display:flex; justify-content:space-between; margin-top:7px; color:#77727d; font-size:10px; }
.player-controls { display:grid; grid-template-columns:62px 78px 62px; align-items:center; justify-content:center; gap:28px; margin:20px 0 0; }
.skip-button { width:62px; height:62px; padding:0; display:grid; place-items:center; border:0; background:transparent; color:#aaa4af; }
.skip-button svg { width:30px; }
.wave-feedback { display:flex; justify-content:center; gap:8px; margin-top:16px; }
.wave-feedback button { min-height:36px; padding:0 14px; display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.035); color:#aaa3ae; font-size:10px; font-weight:800; transition:.2s ease; }
.wave-feedback button:hover { border-color:rgba(255,125,133,.32); color:#fff; background:rgba(255,101,126,.08); transform:translateY(-1px); }
.wave-feedback svg { width:15px; }
.player-sheet.open .track-heading { animation:content-rise .46s .14s ease both; }
.player-sheet.open .progress-wrap { animation:content-rise .46s .2s ease both; }
.player-sheet.open .player-controls { animation:content-rise .46s .26s ease both; }
.player-discovery { display:none; min-width:0; }
.player-discovery section { min-width:0; padding:20px; border:1px solid var(--line); border-radius:25px; background:rgba(13,12,17,.54); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.discovery-title span,.discovery-title strong { display:block; }
.discovery-title span { color:#f09a86; font-size:8px; line-height:1; font-weight:850; letter-spacing:.22em; }
.discovery-title strong { margin-top:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:19px; letter-spacing:-.025em; }
.player-track-list { margin-top:14px; display:grid; gap:6px; }
.player-track-item { min-width:0; min-height:62px; padding:6px; display:grid; grid-template-columns:minmax(0,1fr) 32px; align-items:center; gap:5px; border:1px solid transparent; border-radius:17px; background:rgba(255,255,255,.025); text-align:left; transition:transform .18s,background .18s,border-color .18s; }
.player-track-item:hover { transform:translateX(3px); border-color:var(--line); background:rgba(255,255,255,.055); }
.player-track-main { min-width:0; padding:0; display:grid; grid-template-columns:48px minmax(0,1fr) 29px; align-items:center; gap:10px; border:0; background:transparent; text-align:left; }
.player-track-item img { width:48px; height:48px; display:block; object-fit:cover; border-radius:13px; background:#292530; }
.player-track-item span { min-width:0; }
.player-track-item strong,.player-track-item small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.player-track-item strong { font-size:12px; }
.player-track-item small { margin-top:5px; color:#817b87; font-size:9px; }
.player-track-play { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.07); }
.player-track-play::after { content:""; margin-left:2px; border-left:7px solid #f8f4f5; border-top:5px solid transparent; border-bottom:5px solid transparent; }
.queue-next-button { width:30px; height:30px; padding:0; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.035); color:#c9c2cd; font-size:18px; }
.queue-section { border-color:rgba(255,120,118,.16)!important; background:linear-gradient(145deg,rgba(255,113,96,.07),rgba(151,113,255,.035))!important; }
.queue-heading-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.queue-toolbar { flex:0 0 auto; display:flex; gap:4px; }
.queue-toolbar button { width:31px; height:31px; padding:0; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.035); color:#9a939f; transition:.18s ease; }
.queue-toolbar button:hover { color:#fff; border-color:rgba(255,126,121,.28); background:rgba(255,111,113,.08); transform:translateY(-1px); }
.queue-toolbar svg { width:14px; }
.queue-save-form { margin-top:11px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; animation:content-rise .28s ease both; }
.queue-save-form[hidden] { display:none; }
.queue-save-form input { min-width:0; height:37px; padding:0 12px; border:1px solid var(--line); border-radius:11px; outline:0; background:rgba(5,5,8,.42); color:#fff; font:inherit; font-size:10px; }
.queue-save-form input:focus { border-color:rgba(255,133,118,.38); box-shadow:0 0 0 3px rgba(255,110,115,.06); }
.queue-save-form button { height:37px; padding:0 12px; border:0; border-radius:11px; background:linear-gradient(120deg,#ff9270,#f55b8e); color:#fff; font-size:9px; font-weight:850; }
.queue-save-form button:disabled { opacity:.55; }
.discovery-title i { min-width:22px; height:22px; margin-left:5px; display:inline-grid; place-items:center; border-radius:8px; background:rgba(255,255,255,.07); color:#f4b294; font-size:10px; font-style:normal; }
.queue-track-list { min-height:0; margin-top:12px; display:grid; gap:5px; overflow-y:auto; scrollbar-width:none; }
.queue-track-list::-webkit-scrollbar { display:none; }
.queue-track { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px; padding:5px; border-radius:15px; background:rgba(255,255,255,.025); }
.queue-track-main { min-width:0; padding:0; display:grid; grid-template-columns:40px minmax(0,1fr); align-items:center; gap:9px; border:0; background:transparent; text-align:left; }
.queue-track-main img { width:40px; height:40px; object-fit:cover; border-radius:11px; }
.queue-track-main span,.queue-track-main strong,.queue-track-main small { min-width:0; display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.queue-track-main strong { font-size:11px; }
.queue-track-main small { margin-top:4px; color:#807a85; font-size:8px; }
.queue-track-actions { display:flex; gap:2px; }
.queue-track-actions button { width:25px; height:28px; padding:0; border:0; border-radius:8px; background:transparent; color:#77717c; font-size:12px; }
.queue-track-actions button:hover { background:rgba(255,255,255,.06); color:#fff; }
.player-list-empty { min-height:62px; padding:15px; display:flex; align-items:center; border:1px dashed rgba(255,255,255,.09); border-radius:17px; color:#817b87; font-size:11px; line-height:1.45; }
.catalog-section.switching .section-head,.catalog-section.switching .track-grid { animation:section-switch .42s cubic-bezier(.2,.8,.25,1) both; }
@keyframes mini-player-in { from{opacity:0;transform:translate(-50%,18px) scale(.97)}to{opacity:1;transform:translate(-50%,0) scale(1)} }
@keyframes track-reveal { from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)} }
@keyframes cover-arrive { 0%{opacity:0;transform:translateY(34px) scale(.88) rotate(-2.5deg)}62%{opacity:1;transform:translateY(-3px) scale(1.012) rotate(.35deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)} }
@keyframes content-rise { from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes section-switch { 0%{opacity:.25;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)} }
.toast { position:fixed; z-index:100; left:50%; bottom:calc(116px + var(--safe-bottom)); transform:translate(-50%,18px); max-width:calc(100% - 28px); padding:11px 18px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; border-radius:999px; background:#f5f1ee; color:#171117; font-size:12px; font-weight:800; opacity:0; pointer-events:none; transition:.25s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.pwa-install { position:fixed; z-index:55; left:50%; bottom:calc(100px + var(--safe-bottom)); transform:translate(-50%,18px); width:min(520px,calc(100% - 24px)); min-height:86px; padding:12px 100px 12px 12px; display:grid; grid-template-columns:58px minmax(0,1fr); align-items:center; gap:12px; border:1px solid var(--line-bright); border-radius:25px; background:rgba(20,18,24,.94); backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px); box-shadow:0 28px 80px rgba(0,0,0,.55); animation:pwa-install-in .45s cubic-bezier(.16,1,.3,1) forwards; }
.pwa-install img { width:58px; height:58px; border-radius:18px; box-shadow:0 10px 28px rgba(255,90,115,.16); }
.pwa-install strong,.pwa-install small { display:block; }
.pwa-install strong { font-size:13px; }
.pwa-install small { margin-top:6px; color:#8f8995; font-size:10px; line-height:1.4; }
.pwa-install-action { position:absolute; right:13px; bottom:13px; min-width:76px; height:34px; padding:0 13px; border:0; border-radius:12px; background:linear-gradient(135deg,var(--coral),var(--rose)); color:#fff; font-size:10px; font-weight:800; }
.pwa-install-close { position:absolute; right:13px; top:8px; width:28px; height:28px; padding:0; border:0; background:transparent; color:#817b87; font-size:20px; }
@keyframes pwa-install-in { to{opacity:1;transform:translate(-50%,0)} }

.account-sheet { position:fixed; z-index:80; inset:0; visibility:hidden; pointer-events:none; }
.account-sheet.open { visibility:visible; pointer-events:auto; }
.account-backdrop { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; opacity:0; background:rgba(3,3,6,.76); backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); transition:.32s ease; }
.account-sheet.open .account-backdrop { opacity:1; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.account-panel { position:absolute; top:50%; left:50%; width:min(520px,calc(100% - 24px)); max-height:calc(100dvh - 28px); overflow:auto; padding:24px; border:1px solid var(--line-bright); border-radius:31px; background:rgba(16,14,20,.94); box-shadow:0 38px 120px rgba(0,0,0,.64); transform:translate(-50%,-46%) scale(.96); opacity:0; transition:.38s cubic-bezier(.16,1,.3,1); }
.account-sheet.open .account-panel { transform:translate(-50%,-50%) scale(1); opacity:1; }
.account-panel-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.account-panel-header h2 { margin:8px 0 0; font-size:30px; letter-spacing:-.045em; }
.account-guest { padding:30px 10px 10px; text-align:center; }
.telegram-orb { width:70px; height:70px; margin:0 auto; display:grid; place-items:center; border-radius:23px; background:linear-gradient(145deg,rgba(55,174,244,.22),rgba(152,119,255,.14)); color:#62bff2; box-shadow:inset 0 0 0 1px rgba(98,191,242,.18),0 20px 52px rgba(0,0,0,.28); }
.telegram-orb svg { width:31px; }
.account-guest h3 { margin:20px 0 8px; font-size:24px; letter-spacing:-.035em; }
.account-guest p { max-width:380px; margin:0 auto; color:#928b99; font-size:13px; line-height:1.6; }
.telegram-login-custom { width:min(330px,100%); height:54px; position:relative; overflow:hidden; margin:24px auto 0; border-radius:17px; background:linear-gradient(135deg,#35aee2,#5684ef); color:#fff; box-shadow:0 16px 42px rgba(54,154,230,.22),inset 0 1px rgba(255,255,255,.28); }
.telegram-login-custom > span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; font-size:13px; font-weight:850; pointer-events:none; }
.telegram-login-custom > span svg { width:20px; }
.telegram-login-custom iframe { position:absolute!important; z-index:2; left:50%!important; top:50%!important; width:100%!important; height:100%!important; transform:translate(-50%,-50%); opacity:.001; }
.member-head { margin-top:24px; display:grid; grid-template-columns:62px minmax(0,1fr) 48px; align-items:center; gap:14px; }
.member-avatar { width:62px; height:62px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.14); border-radius:21px; background-color:#201922; background-image:linear-gradient(145deg,#ff9e6f,#f5518d 58%,#937aff); background-position:center; background-size:cover; font-size:20px; font-weight:950; box-shadow:0 12px 30px rgba(0,0,0,.2); }
.member-avatar.has-photo { border-radius:50%; color:transparent; box-shadow:0 0 0 4px rgba(255,255,255,.035),0 14px 34px rgba(0,0,0,.26); }
.member-head small { color:#847d8b; font-size:8px; font-weight:900; letter-spacing:.16em; }
.member-head h3 { margin:5px 0 0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:22px; }
.member-crown { width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(255,201,107,.2); border-radius:16px; background:rgba(255,193,83,.08); color:#ffd477; }
.member-crown svg { width:23px; }
.plus-card { position:relative; isolation:isolate; overflow:hidden; margin-top:22px; padding:25px; border:1px solid rgba(255,255,255,.1); border-radius:25px; background:linear-gradient(145deg,rgba(255,114,87,.1),rgba(155,116,255,.08) 58%,rgba(255,255,255,.025)); }
.plus-card.active { border-color:rgba(255,208,118,.25); }
.plus-card-glow { position:absolute; z-index:-1; width:220px; height:220px; top:-130px; right:-75px; border-radius:50%; background:#ff905c; filter:blur(60px); opacity:.2; }
.plus-kicker { color:#ffc66c; font-size:9px; font-weight:950; letter-spacing:.24em; }
.plus-card h3 { margin:10px 0 8px; font-size:25px; line-height:1.08; letter-spacing:-.04em; }
.plus-card p { margin:0; color:#968f9c; font-size:12px; line-height:1.55; }
.plus-description { display:flex; flex-wrap:wrap; align-items:center; gap:7px 10px; }
.plus-description .plus-old-price { position:relative; color:#847d89; text-decoration:line-through; text-decoration-color:#ff6e83; text-decoration-thickness:2px; }
.plus-description strong { color:#ffe2a6; font-size:12px; font-weight:850; }
.plus-description .stars-price { color:#ffd56f; }
.plus-card ul { margin:20px 0; padding:0; display:grid; gap:10px; list-style:none; }
.plus-card li { display:flex; align-items:center; gap:10px; color:#cfc9d2; font-size:11px; }
.plus-card li span { flex:0 0 23px; width:23px; height:23px; display:grid; place-items:center; border-radius:8px; background:rgba(255,255,255,.06); color:#ffbd75; }
.plus-action { width:100%; height:50px; border:0; border-radius:16px; background:linear-gradient(100deg,#ff9869,#f6578d 55%,#9a7bff); color:#fff; font-size:12px; font-weight:900; box-shadow:0 16px 40px rgba(246,87,141,.2); }
.plus-action:disabled { color:#ffe5b5; background:rgba(255,200,105,.1); box-shadow:none; cursor:default; }
.logout-button { width:100%; height:46px; margin-top:12px; border:1px solid var(--line); border-radius:15px; background:transparent; color:#8f8894; font-size:11px; }

.legal-footer { width:min(100%,1420px); margin:64px auto 0; padding:24px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); color:#6f6975; font-size:10px; }
.legal-footer nav { display:flex; flex-wrap:wrap; gap:15px; }
.legal-footer a { color:#8e8793; text-decoration:none; }
.legal-footer a:hover { color:#f3eef4; }
.cookie-banner { position:fixed; z-index:75; left:50%; bottom:calc(20px + var(--safe-bottom)); transform:translate(-50%,18px); width:min(630px,calc(100% - 24px)); padding:14px 14px 14px 18px; display:flex; align-items:center; gap:16px; border:1px solid var(--line-bright); border-radius:20px; background:rgba(22,20,27,.96); box-shadow:0 25px 75px rgba(0,0,0,.54); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); opacity:0; animation:cookie-in .42s .4s forwards; }
.cookie-banner p { flex:1; margin:0; color:#a09aa5; font-size:11px; line-height:1.45; }
.cookie-banner a { color:#f1bd8d; }
.cookie-banner button { flex:0 0 auto; height:38px; padding:0 16px; border:0; border-radius:12px; background:#f4efeb; color:#171218; font-size:10px; font-weight:900; }
@keyframes cookie-in { to{opacity:1;transform:translate(-50%,0)} }

@media (min-width: 1180px) {
  .app-shell { padding-left: 112px; padding-bottom: 120px; }
  .bottom-nav { left: max(22px,calc(50% - 755px)); top: 92px; bottom:auto; transform:none; width:82px; height:475px; grid-template-columns:1fr; grid-template-rows:repeat(5,1fr); border-radius:28px; }
  .nav-item { padding:8px 4px; line-height:1.15; }
  .nav-item span { max-width:62px; text-align:center; }
  .nav-item.active::after { width:3px; height:22px; left:1px; right:auto; bottom:auto; }
  .mini-player { bottom:22px; }
}

@media (min-width: 900px) {
  .player-panel { width:min(1160px,calc(100% - 48px)); height:min(850px,calc(100dvh - 36px)); max-height:calc(100dvh - 36px); bottom:18px; padding:16px 22px 22px; border-radius:32px; }
  .player-header { height:48px; }
  .player-layout { min-height:0; height:calc(100% - 58px); display:grid; grid-template-columns:minmax(380px, .9fr) minmax(430px, 1.1fr); gap:28px; align-items:center; }
  .player-primary { align-self:stretch; display:flex; flex-direction:column; justify-content:center; padding:0 18px; }
  .large-cover-wrap { width:min(390px,42vh); margin:12px auto 20px; border-radius:32px; }
  .track-heading h2 { font-size:32px; }
  .progress-wrap { margin:16px 0 8px; }
  .player-controls { margin-top:14px; }
  .player-discovery { align-self:stretch; display:grid; grid-template-rows:1fr 1fr 1fr; gap:10px; overflow:hidden; padding:6px 0; }
  .player-discovery section { overflow:hidden; display:flex; flex-direction:column; }
  .player-track-list { min-height:0; overflow-y:auto; scrollbar-width:none; }
  .player-track-list::-webkit-scrollbar { display:none; }
  .player-sheet.open .player-discovery section:first-child { animation:content-rise .5s .18s ease both; }
  .player-sheet.open .player-discovery section:nth-child(2) { animation:content-rise .5s .24s ease both; }
  .player-sheet.open .player-discovery section:last-child { animation:content-rise .5s .3s ease both; }
}

@media (max-width: 1180px) {
  .topbar, #mainContent { width: min(100%, 980px); }
  .wave-hero { min-height:390px; padding:52px; }
  .wave-hero h1 { font-size:70px; }
  .hero-copy { width:66%; }
  .hero-art { right:-2%; transform:translateY(-50%) scale(.86); }
  .featured-rail { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .track-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .artist-results-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .page-glow { width:90vw; height:90vw; }
  .app-shell { padding:0 12px calc(174px + var(--safe-bottom)); }
  .topbar { height:72px; display:flex; justify-content:space-between; }
  .brand-mark { width:40px; height:40px; border-radius:14px; }
  .top-search { display:none; }
  .top-actions { gap:2px; padding:3px; border:1px solid rgba(255,255,255,.09); border-radius:18px; background:linear-gradient(145deg,rgba(26,23,31,.9),rgba(14,13,18,.82)); box-shadow:inset 0 1px rgba(255,255,255,.045),0 12px 30px rgba(0,0,0,.18); }
  .account-button { width:39px; height:39px; padding:2px; border:0; border-radius:14px; background:transparent; box-shadow:none; }
  .account-button.is-plus { border:0; background:transparent; }
  .account-button:hover { border-color:transparent; background:rgba(255,255,255,.045); transform:none; }
  .account-avatar { width:35px; height:35px; border-radius:12px; }
  .account-avatar.has-photo { border-radius:50%; }
  .account-copy,.account-button .plus-crown { display:none!important; }
  .top-shuffle { position:relative; width:39px; height:39px; flex-basis:39px; border:0; border-radius:14px; background:transparent; }
  .top-shuffle::before { content:""; position:absolute; left:-2px; top:9px; bottom:9px; width:1px; background:rgba(255,255,255,.075); }
  .top-shuffle:hover { border-color:transparent; background:rgba(255,255,255,.045); }
  .wave-hero { min-height:354px; padding:35px 24px; border-radius:29px; }
  .wave-hero::after { opacity:.6; }
  .hero-copy { width:100%; }
  .wave-hero h1 { max-width:100%; margin:15px 0 18px; font-size:clamp(38px,10vw,54px); line-height:.94; letter-spacing:-.06em; }
  .wave-hero p { max-width:68%; font-size:13px; line-height:1.55; }
  .hero-actions { margin-top:24px; }
  .primary-action { height:48px; border-radius:16px; }
  .secondary-action { width:48px; height:48px; border-radius:16px; }
  .hero-art { width:230px; height:260px; right:-112px; top:64%; transform:translateY(-50%) scale(.68); opacity:.58; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%); mask-image:linear-gradient(90deg,transparent 0%,#000 38%); }
  .hero-disc { width:260px; height:260px; top:0; right:-20px; }
  .cover-stack-a { left:-30px; top:32px; }
  .cover-stack-b { display:none; }
  .cover-stack-c { right:-2px; bottom:-15px; }
  .hero-wave { right:24px; bottom:32px; }
  .mobile-search { height:58px; display:flex; margin-top:15px; border-radius:20px; }
  .mobile-search:focus-within { z-index:96; }
  .mobile-search .search-suggestions-popover { position:absolute; z-index:120; top:calc(100% + 8px); left:0; right:0; max-height:min(390px,calc(100dvh - 190px - var(--safe-bottom))); border-radius:22px; }
  .mobile-search input { min-width:0; flex:1; padding:0; border:0; outline:0; background:transparent; color:var(--text); font-size:14px; }
  .mobile-search input::placeholder { color:#77727f; }
  .mobile-search > button { display:none; padding:0; border:0; background:transparent; color:#898491; font-size:24px; }
  .mobile-search .recognize-button { display:grid; font-size:inherit; }
  .mobile-search.has-value .search-clear { display:grid; }
  .recognition-card { top:calc(80px + var(--safe-top)); }
  .featured-section,.catalog-section { margin-top:38px; }
  .app-shell.search-mode .mobile-search { position:sticky; top:calc(8px + var(--safe-top)); z-index:90; margin-top:8px; background:rgba(19,17,24,.97); box-shadow:0 14px 42px rgba(0,0,0,.28),0 0 0 1px rgba(255,121,95,.06); }
  .app-shell.search-mode .catalog-section { margin-top:24px; padding-bottom:8px; }
  .app-shell.search-mode .artist-results { margin-top:20px; }
  .artist-results-head { align-items:start; flex-direction:column; gap:7px; margin-bottom:12px; }
  .artist-results-head strong { font-size:18px; }
  .artist-results-grid { display:flex; gap:10px; margin-right:-12px; padding:1px 12px 6px 0; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .artist-results-grid::-webkit-scrollbar { display:none; }
  .artist-result-card { flex:0 0 min(84%,320px); min-height:94px; grid-template-columns:66px minmax(0,1fr) 32px; border-radius:22px; scroll-snap-align:start; }
  .artist-result-avatar { width:66px; height:66px; font-size:23px; }
  .app-shell.search-mode .catalog-section .section-head { margin-bottom:14px; }
  .section-head > div { min-width:0; }
  .section-head h2 { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .section-head { align-items:center; margin-bottom:18px; }
  .section-head h2 { font-size:33px; }
  .featured-rail { display:flex; align-items:stretch; gap:10px; margin-right:-12px; padding:1px 0 6px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .featured-rail::-webkit-scrollbar { display:none; }
  .feature-card { flex:0 0 min(72%,270px); min-height:168px; scroll-snap-align:start; border-radius:24px; }
  .discovery-bar { margin-top:20px; }
  .mood-row { margin-right:-12px; }
  .chip { min-height:40px; padding:0 15px; }
  .refresh-button span { display:none; }
  .refresh-button { width:44px; height:44px; padding:0; justify-content:center; }
  .refresh-button svg { width:19px; }
  .track-grid { grid-template-columns:1fr; gap:6px; }
  .track-card { min-height:78px; padding:8px 9px; border-radius:19px; }
  .track-cover { width:60px; height:60px; }
  .track-meta strong { font-size:15px; }
  .bottom-nav { width:calc(100% - 20px); height:68px; bottom:calc(8px + var(--safe-bottom)); border-radius:23px; }
  .mini-player { width:calc(100% - 20px); height:72px; bottom:calc(84px + var(--safe-bottom)); border-radius:22px; }
  .mini-cover-wrap { flex-basis:54px; width:54px; height:54px; border-radius:16px; }
  .mini-actions { gap:1px; }
  .mini-skip { width:33px; height:42px; }
  .mini-skip svg { width:18px; }
  .play-button.small { width:50px; height:50px; }
  .player-sheet { width:100%; max-width:100%; overflow:hidden; overscroll-behavior:none; touch-action:none; }
  .player-panel { left:0; right:0; width:100%; max-width:100%; height:100dvh; max-height:100dvh; overflow:hidden; overscroll-behavior:none; touch-action:none; padding:calc(8px + var(--safe-top)) 20px calc(22px + var(--safe-bottom)); display:flex; flex-direction:column; border-radius:0; transform:translate3d(0,104%,0); }
  .player-sheet.open .player-panel { transform:translate3d(0,0,0) scale(1); }
  .player-sheet.closing .player-panel { transform:translate3d(0,104%,0) scale(.975); }
  .player-header { flex:0 0 48px; }
  .player-layout { flex:1; width:100%; max-width:100%; min-height:0; min-width:0; overflow:hidden; scrollbar-width:none; overscroll-behavior:none; }
  .player-layout::-webkit-scrollbar { display:none; }
  .player-primary { width:100%; max-width:100%; min-width:0; height:100%; overflow:hidden; display:flex; flex-direction:column; }
  .large-cover-wrap { flex:0 1 auto; width:min(350px,calc(100vw - 42px),calc(100dvh - 390px)); min-width:min(220px,calc(100vw - 42px)); min-height:min(220px,calc(100vw - 42px)); max-width:100%; margin:13px auto 18px; border-radius:28px; }
  .track-heading,.progress-wrap,.player-controls { flex:0 0 auto; width:100%; max-width:100%; min-width:0; }
  .track-heading h2 { max-width:100%; }
  .player-controls { margin-top:22px; }
  .player-discovery { display:none; }
  .player-discovery section { min-height:0; padding:17px; border-radius:22px; }
  .queue-track-list { overflow:visible; }
  .player-track-list { max-height:none; overflow:visible; }
  .discovery-title strong { font-size:17px; }
  .toast { bottom:calc(96px + var(--safe-bottom)); }
  .account-panel { top:auto; bottom:0; width:100%; max-height:calc(100dvh - 12px); padding:20px 18px calc(22px + var(--safe-bottom)); border-radius:30px 30px 0 0; transform:translate(-50%,104%); }
  .account-sheet.open .account-panel { transform:translate(-50%,0); }
  .legal-footer { margin-top:42px; padding-bottom:24px; display:block; text-align:center; }
  .legal-footer nav { justify-content:center; margin-top:12px; }
  .cookie-banner { bottom:calc(88px + var(--safe-bottom)); padding:13px; gap:10px; border-radius:18px; }
  .cookie-banner p { font-size:10px; }
}

@media (max-width:760px) {
  .wave-experience { padding:calc(14px + var(--safe-top)) 18px calc(18px + var(--safe-bottom)); grid-template-rows:56px minmax(0,1fr) auto auto auto; }
  .wave-experience-header { grid-template-columns:48px 1fr 48px; }
  .wave-round-button { width:46px; height:46px; border-radius:16px; }
  .wave-experience-header small { font-size:8px; }.wave-experience-header strong { font-size:15px; }
  .wave-stage { width:min(76vw,43dvh,390px); margin:4px 0; }
  .wave-cover-shell { width:82%; padding:5px; border-radius:29%; }
  .wave-cover-shell img,.wave-cover-glass { border-radius:28%; }.wave-cover-glass { inset:5px; }
  .wave-spectrum { bottom:17px; height:31px; }
  .wave-experience-copy h2 { font-size:clamp(27px,8vw,38px); margin-top:8px; }
  .wave-artist-link { font-size:13px; }.wave-personal-badge { font-size:8px; }
  .wave-experience-controls { margin:16px 0 13px; gap:28px; }
  .wave-experience-controls .wave-main-play { width:72px; height:72px; border-radius:50%; }
  .wave-experience-footer { grid-template-columns:auto auto; display:grid; justify-items:center; gap:9px; }
  .wave-experience-footer > span { grid-column:1 / -1; }
  .wave-experience-footer > span { font-size:9px; }
}

@media (max-height:700px) and (max-width:760px) {
  .wave-stage { width:min(62vw,37dvh,300px); }
  .wave-experience-controls { margin:10px 0; }
  .wave-experience-controls .wave-main-play { width:64px; height:64px; border-radius:50%; }
  .wave-experience-footer > span { display:none; }
}

@media (display-mode: standalone) {
  html,body { width:100%; max-width:100%; overscroll-behavior:none; }
  body { min-height:100dvh; touch-action:pan-y; -webkit-user-select:none; user-select:none; }
  input,button { -webkit-user-select:auto; user-select:auto; }
  .app-shell { min-height:100dvh; max-width:100%; overflow-x:clip; padding-top:var(--safe-top); }
  .topbar { height:68px; }
  .pwa-install { display:none!important; }
}

@media (hover:none) and (pointer:coarse) {
  * { scrollbar-width:none; }
  *::-webkit-scrollbar { display:none; width:0; height:0; }
}

@media (max-width: 390px) {
  .app-shell { padding-left:10px; padding-right:10px; }
  .brand-name { font-size:12px; }
  .wave-hero { min-height:330px; padding:30px 20px; }
  .wave-hero h1 { font-size:clamp(36px,10vw,39px); max-width:100%; }
  .wave-hero p { max-width:71%; font-size:12px; }
  .primary-action { padding:0 17px; font-size:12px; }
  .feature-card { flex-basis:78%; }
  .large-cover-wrap { width:min(330px,calc(100vw - 36px),calc(100dvh - 370px)); }
  .player-controls { gap:20px; }
}

@media (max-height: 690px) and (max-width: 760px) {
  .large-cover-wrap { min-width:180px; min-height:180px; width:min(270px,calc(100dvh - 345px)); margin:7px auto 10px; }
  .track-heading h2 { font-size:24px; }
  .progress-wrap { margin:10px 0 5px; }
  .player-controls { margin-top:8px; }
  .play-button { width:70px; height:70px; }
  .play-button .play-icon svg { width:33px; height:33px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}