@font-face{font-family:"Onest Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url("fonts/onest-cyrillic-ext-wght-normal.woff2") format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Onest Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url("fonts/onest-cyrillic-wght-normal.woff2") format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url("fonts/onest-latin-ext-wght-normal.woff2") format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Onest Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url("fonts/onest-latin-wght-normal.woff2") format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --page:#f5f5f2;
  --surface:#fff;
  --surface-muted:#eeeeeb;
  --ink:#171719;
  --muted:#6e6e73;
  --quiet:#68686e;
  --line:#dededb;
  --line-strong:#c9c9c5;
  --accent:#1688d4;
  --accent-dark:#0f6faa;
  --danger:#c7443e;
  --success:#1c8a5a;
  --radius:16px;
  --shadow:0 18px 60px rgba(25,25,23,.08);
  /* Quiet motion: local, dependency-free tokens inspired by open motion systems. */
  --motion-fast:140ms;
  --motion-base:220ms;
  --motion-slow:320ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-standard:cubic-bezier(.2,.72,.25,1);
  /* Height of the on-screen keyboard (visualViewport). 0 when hidden. */
  --keyboard-height:0px;
}

*{box-sizing:border-box}
/* The document scrollbar used to disappear while a track sheet was open.
   Some desktop and embedded Chromium builds round its compensation by one or
   two pixels, making the entire interface visibly jump. Keep scrolling fully
   functional, but remove the outer scrollbar from layout in every shell. */
html{touch-action:pan-x pan-y;scroll-behavior:auto;scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar{display:none;width:0;height:0}
/* No scrollbars anywhere: lists, dialogs and carousels still scroll by touch,
   horizontal trackpad gestures and keyboard. Vertical wheel stays with page. */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{display:none;width:0;height:0}
html.dialog-scroll-locked{overflow:hidden;overscroll-behavior:none}
html.dialog-scroll-locked body{overscroll-behavior:none}
body{margin:0;background:var(--page);color:var(--ink);font:14px/1.5 "Onest Variable","Segoe UI",sans-serif;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;touch-action:pan-x pan-y}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{color:inherit;user-select:none;-webkit-user-select:none}
a{color:inherit;text-decoration:none}
svg{display:block}
.ui-icon{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
button>svg,a>svg{flex:0 0 auto;align-self:center}
.play-icon{transform:translateX(.7px)}
.dialog-close,.preference-icon,.entity-more-button,.track-discovery-button,.player-toggle,.player-close,.history-play,.playlist-track-play,.playlist-add-button,.playlist-detail-menu button,.player-volume button,.now-playing-volume button,.now-playing-controls button{padding:0;line-height:0}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:100;top:12px;left:12px;padding:9px 13px;border-radius:8px;background:var(--ink);color:#fff;transform:translateY(-150%)}
.skip-link:focus{transform:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* justify-self:start keeps the link to the logo itself. As a grid item it
   otherwise stretched across its column, so a tap anywhere in the header,
   even where the avatar is expected, reloaded the page. */
.brand{display:inline-flex;align-items:center;gap:10px;letter-spacing:-.02em;justify-self:start}
.brand strong{font-size:16px}
.brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--ink);color:#fff}
.brand-mark svg{width:20px;height:20px;fill:currentColor}
.brand-mark.has-custom-logo{background-color:var(--surface);background-position:center;background-size:cover}
.brand-mark.has-custom-logo svg{visibility:hidden}
.eyebrow{margin:0;color:var(--quiet);font-size:10px;font-weight:750;letter-spacing:.14em;text-transform:uppercase}
.public-preferences{display:flex;align-items:center;gap:6px}.preference-icon,.language-toggle{height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}.preference-icon{width:34px}.language-toggle{min-width:40px;padding:0 8px;font-size:10px;font-weight:750;letter-spacing:.06em}.preference-icon:hover,.language-toggle:hover{border-color:var(--line-strong);background:var(--surface)}.preference-icon svg,.preference-glyph svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.theme-icon-sun{display:none}

.boot-screen{position:fixed;z-index:90;inset:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;align-content:center;gap:11px;background:var(--page);font-weight:700;letter-spacing:-.02em;transition:opacity var(--motion-base) var(--ease-standard)}
.boot-screen.is-leaving{opacity:0;pointer-events:none}
.boot-error{flex-basis:100%;margin:0;text-align:center;font-size:12px;font-weight:500;color:var(--muted)}
.boot-retry{padding:0;border:0;background:transparent;color:var(--accent-dark);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}

/* Telegram sign-in */
.public-header{height:76px;width:min(1180px,calc(100% - 48px));margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.auth-main{min-height:calc(100vh - 152px);width:min(1120px,calc(100% - 48px));margin:auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(400px,.8fr);gap:110px;align-items:center;padding:80px 0}
.auth-copy h1{margin:0 0 25px;font-size:clamp(52px,6vw,74px);font-weight:700;line-height:.98;letter-spacing:-.052em}
.auth-lead{max-width:620px;margin:0;color:var(--muted);font-size:19px;line-height:1.6;letter-spacing:-.015em}
.auth-panel{padding:40px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.auth-panel h2{margin:0;font-size:32px;line-height:1.16;letter-spacing:-.035em}
.telegram-login-button{min-height:52px;display:flex;align-items:center;justify-content:center;gap:9px;margin:27px 0 14px;border-radius:10px;background:var(--accent);color:#fff;font-size:14px;font-weight:700;transition:background .15s,transform .15s}
.telegram-login-button .ui-icon{width:19px;height:19px;fill:currentColor;stroke:none}
.telegram-login-button:hover{background:var(--accent-dark)}
.telegram-login-button:active{transform:translateY(1px)}
.turnstile-widget:empty{display:none}
.turnstile-widget{display:flex;justify-content:center;margin:-4px 0 14px}
.login-unavailable{margin:24px 0 12px;padding:12px;border-radius:9px;background:#f4ede3;color:#755527;font-size:11px;text-align:center}
.auth-status{min-height:34px;margin:0 0 12px;padding:9px 11px;border-radius:9px;background:var(--surface-muted);color:var(--muted);font-size:11px;line-height:1.45;text-align:center}
.auth-note{margin:18px 0 0;color:var(--quiet);font-size:11px;line-height:1.55;text-align:center}
.auth-note a{text-decoration:underline;text-underline-offset:2px}

/* Authenticated shell */
.app-header{position:sticky;z-index:40;top:0;padding-top:env(safe-area-inset-top);border-bottom:1px solid var(--line);background:rgba(245,245,242,.92)}
/* The blur lives on a pseudo-element: backdrop-filter on the header itself
   makes it the containing block for fixed descendants, which put the mobile
   bottom navigation inside the header, on top of the logo. */
.app-header::before{content:"";position:absolute;inset:0;z-index:-1;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);pointer-events:none}
.header-inner{height:72px;width:min(1180px,calc(100% - 48px));margin:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.app-nav{display:flex;align-items:center;gap:6px;padding:4px;border-radius:10px;background:#ebebe8}
.app-nav a,.app-nav button{height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:12px;font-weight:650;line-height:1;cursor:pointer}
.app-nav .active{display:flex;align-items:center;background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.app-nav button:hover{color:var(--ink)}
.account-wrap{position:relative;justify-self:end}
.account-button{display:flex;align-items:center;padding:3px 2px;border:0;border-radius:10px;background:transparent;cursor:pointer;text-align:right}.account-button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.account-chevron{position:absolute;right:-4px;bottom:-2px;box-sizing:border-box;width:16px;height:16px;padding:3px;border:1px solid var(--line-strong);border-radius:50%;background:var(--surface);fill:none;stroke:var(--quiet);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.account-button[aria-expanded="true"] .account-chevron{transform:rotate(180deg)}
.account-copy{display:none}
.account-copy strong{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.account-copy small{color:var(--quiet);font-size:10px}
.account-avatar{display:flex;flex-direction:column;align-items:center;gap:4px}.account-avatar-control{position:relative;display:grid;place-items:center}.account-avatar>small{color:var(--quiet);font-size:10px;font-weight:650;line-height:1}
.avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:750}
.account-menu{position:absolute;right:0;top:58px;width:220px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 16px 50px rgba(20,20,18,.14)}
.account-menu>div{display:flex;flex-direction:column;padding:10px 10px 13px;border-bottom:1px solid var(--line)}
.account-menu>div strong{font-size:13px}.account-menu>div span{color:var(--quiet);font-size:12px}
.account-menu a,.account-menu button{width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;border:0;border-radius:8px;background:transparent;font-size:13px;cursor:pointer}
.account-menu .ui-icon{width:15px;height:15px}
.account-menu a{margin-top:5px}.account-menu a:hover,.account-menu button:hover{background:var(--surface-muted)}
.account-menu #logout-button{color:var(--danger)}.account-preferences{padding:5px 0!important;border-bottom:1px solid var(--line)}.account-preferences button{color:var(--ink)}.account-preferences button>strong{color:var(--quiet);font-size:10px;letter-spacing:.05em}.preference-glyph{color:var(--quiet)}

.workspace{width:min(1040px,calc(100% - 48px));margin:auto;padding:84px 0 110px}
.download-section{position:relative;max-width:850px;margin:auto}
.section-heading{text-align:center}
.section-heading h1{margin:0 0 11px;font-size:clamp(40px,6vw,62px);font-weight:700;line-height:1.02;letter-spacing:-.05em}
.section-heading>p:last-child{margin:0;color:var(--muted);font-size:16px}
.download-form{height:66px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-top:38px;padding:7px 7px 7px 19px;border:1px solid var(--line-strong);border-radius:14px;background:var(--surface);box-shadow:0 12px 40px rgba(24,24,22,.06);transition:border-color .15s,box-shadow .15s}
.download-form:focus-within{border-color:#8a8a86;box-shadow:0 12px 40px rgba(24,24,22,.08)}
.download-form>svg{width:22px;height:22px;fill:none;stroke:#929297;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.download-form input{min-width:0;width:100%;height:100%;padding:0;border:0;outline:0;background:transparent;color:var(--ink);font-size:16px}
.download-form input::placeholder{color:#74747a}
.download-form button{height:50px;display:inline-flex;align-items:center;gap:8px;padding:0 18px 0 20px;border:0;border-radius:10px;background:var(--ink);color:#fff;font-size:13px;font-weight:680;cursor:pointer;transition:background .15s,transform .15s}
.download-form button .ui-icon{width:16px;height:16px}
.download-form button:hover{background:#303034}.download-form button:active{transform:translateY(1px)}
.download-form button:disabled{opacity:.55;cursor:wait}
.form-meta{min-height:38px;display:flex;align-items:center;justify-content:flex-start;gap:18px;padding:7px 4px 0;color:var(--quiet);font-size:10px}
.form-meta button{display:none;align-items:center;justify-content:center;gap:6px;padding:0;border:0;background:transparent;color:var(--muted);font-weight:650;line-height:1;white-space:nowrap}.form-meta button:hover{color:var(--ink)}
.form-meta #recognize-button{display:inline-flex}
.form-meta button:disabled{opacity:.55;cursor:wait}
.form-meta button .ui-icon{width:14px;height:14px}
.form-meta .delivery-button{display:inline-flex;margin-left:auto;color:var(--muted);cursor:pointer}.delivery-button>svg:first-child{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.delivery-button.is-telegram>svg:first-child{fill:none}.delivery-button .delivery-chevron{width:12px;height:12px;flex:0 0 12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.search-results{position:relative;z-index:3;margin-top:10px;overflow:visible;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 14px 42px rgba(20,20,18,.09)}
.search-panel-head{position:sticky;z-index:2;top:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 16px 11px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.96);backdrop-filter:blur(10px)}
.search-panel-head strong{max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.search-panel-head span{color:var(--quiet);font-size:11px}
.search-filters{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--surface)}.search-filters label{min-height:40px;display:flex;align-items:center;gap:7px;padding:0 7px 0 11px;border:1px solid var(--line);border-radius:9px;color:var(--quiet);font-size:11px}.search-filters select{height:34px;max-width:165px;border:0;background:transparent;color:var(--ink);font-size:11px;font-weight:650;outline:0}.search-filters select:disabled{color:var(--muted);opacity:1}.search-filters option:disabled{color:#a3a3a8}
.search-list{padding:6px}.search-result{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:64px;padding:8px 10px;border-radius:10px;cursor:pointer;transition:background .15s,opacity .15s}.search-result:hover{background:var(--surface-muted)}.search-result.is-selected{opacity:.5;pointer-events:none}
.track-cover{position:relative;width:48px;height:48px;display:grid;place-items:center;overflow:hidden;border-radius:9px;background:#e7e7e3;color:#57575b}.track-cover img{width:100%;height:100%;object-fit:cover}.track-cover>svg{width:19px;height:19px;fill:currentColor}.track-cover button{position:absolute;z-index:2;inset:0;display:grid;place-items:center;border:0;background:rgba(20,20,22,.62);color:#fff;cursor:pointer}.track-cover button svg{grid-area:1/1;width:18px;height:18px;fill:currentColor;stroke:none}.track-cover button .pause-icon{display:none}.track-cover button.is-playing .play-icon{display:none}.track-cover button.is-playing .pause-icon{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.search-result-copy{min-width:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.search-result-copy>strong,.search-result-copy>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-result-copy>strong{font-size:14px;font-weight:650}.search-result-copy>span{margin-top:2px;color:var(--quiet);font-size:11px}.search-result-copy mark{padding:0;background:#e5f1f9;color:inherit;border-radius:2px}.result-labels{display:flex;align-items:center;gap:6px;margin-top:6px}.result-labels small{padding:2px 7px;border-radius:10px;background:#ececea;color:#66666b;font-size:10px;font-weight:700}.result-labels small.pro{background:var(--ink);color:var(--surface)}
.search-result-actions{display:flex;align-items:center;gap:8px}.search-result-actions>span{min-width:35px;color:var(--quiet);font-size:10px;font-variant-numeric:tabular-nums;text-align:right}.result-download{height:36px;display:inline-flex;align-items:center;gap:7px;padding:0 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:11px;font-weight:680;cursor:pointer}.result-download:hover,.result-download:focus-visible{border-color:var(--line-strong);background:var(--surface-muted);color:var(--ink)}.result-download.pro-required{border-color:var(--line-strong);color:var(--muted)}.result-download svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.entity-more-button{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}.entity-more-button:hover,.entity-more-button:focus-visible{background:var(--surface-muted);color:var(--ink)}.entity-more-button svg{width:18px;height:18px;fill:currentColor;stroke:none}
.track-discovery-button{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}.track-discovery-button:hover{background:var(--surface-muted);color:var(--ink)}.track-discovery-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.search-empty{display:flex;flex-direction:column;align-items:center;padding:30px 18px;color:var(--muted);font-size:11px;text-align:center}.search-empty strong{margin-bottom:4px;color:var(--ink);font-size:12px}.search-empty span{max-width:360px}.search-filter-empty button{margin-top:10px;padding:0;border:0;background:transparent;color:var(--accent);font-size:10px;font-weight:700;cursor:pointer}.search-skeleton{padding:6px}.search-skeleton i{display:block;height:64px;margin:1px 0;border-radius:10px;background:linear-gradient(90deg,#f1f1ef 25%,#fafaf9 50%,#f1f1ef 75%);background-size:220% 100%;animation:skeleton 2.2s ease-in-out infinite}@keyframes skeleton{to{background-position:-220% 0}}.search-more{width:calc(100% - 12px);height:44px;display:flex;align-items:center;justify-content:center;gap:7px;margin:0 6px 6px;border:0;border-top:1px solid var(--line);border-radius:0 0 9px 9px;background:transparent;color:var(--ink);font-size:11px;font-weight:680;cursor:pointer}.search-more:hover{background:var(--surface-muted)}.search-more:disabled{color:var(--quiet);cursor:wait}.search-more svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.recent-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 7px}.recent-head strong{font-size:12px}.recent-head button{min-height:36px;padding:0 4px;border:0;background:transparent;color:var(--quiet);font-size:11px;cursor:pointer}.recent-searches{padding:0 6px 7px}.recent-search{width:100%;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:12px;text-align:left;cursor:pointer}.recent-search:hover{background:var(--surface-muted)}.recent-search svg{width:16px;height:16px;fill:none;stroke:var(--quiet);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.active-job{max-width:850px;margin:20px auto 0;padding:18px 20px;border:1px solid var(--line);border-radius:13px;background:var(--surface)}
.job-row{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:13px}
.job-state-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:#ededeb;color:#55555a}
.job-state-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.job-state-icon.loading svg{animation:spin 2.6s cubic-bezier(.5,.1,.5,.9) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.job-copy{min-width:0}.job-copy strong,.job-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.job-copy strong{font-size:13px}.job-copy span{color:var(--muted);font-size:11px}
.job-action{min-height:38px;display:inline-flex;align-items:center;gap:7px;padding:0 14px;border:0;border-radius:8px;background:var(--ink);color:#fff;font-size:11px;font-weight:700;cursor:pointer}
.job-action svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.job-action:hover{background:#303034}
.job-actions{display:flex;align-items:center;gap:7px}.job-action.job-download{border:1px solid var(--line-strong);background:transparent;color:var(--ink)}.job-action.job-download:hover{background:var(--surface-muted)}.job-listen .play-icon{fill:currentColor;stroke:none}.job-listen .pause-icon{display:none}.job-listen.is-playing .play-icon{display:none}.job-listen.is-playing .pause-icon{display:block;fill:none;stroke:currentColor;stroke-width:2}
.job-action.job-cancel{border:1px solid var(--line-strong);background:transparent;color:var(--muted)}
.job-action.job-cancel:hover{background:var(--surface-muted);color:var(--ink)}
.job-error .job-state-icon{background:#f6e7e5;color:var(--danger)}
.job-progress{height:2px;margin-top:15px;background:#e5e5e2;overflow:hidden}.job-progress i{display:block;height:100%;background:var(--accent)}.job-progress.is-measured i{transition:width .35s ease-out}.job-progress.is-indeterminate i{width:28%;animation:progress-scan 2.8s ease-in-out infinite}@keyframes progress-scan{0%{transform:translateX(-110%)}50%{transform:translateX(160%)}100%{transform:translateX(370%)}}

.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.85fr);gap:20px;margin-top:88px}
.history-section,.profile-section{border-top:1px solid var(--line-strong);padding-top:24px}
.block-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:19px}
.block-heading h2{margin:7px 0 0;font-size:22px;letter-spacing:-.035em}.profile-section .block-heading h2{margin-top:0}
.block-heading>button{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:transparent;cursor:pointer}
.block-heading>button:hover{background:var(--surface)}
.block-heading>button svg{width:16px;height:16px;fill:none;stroke:#707075;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.history-list{border-bottom:1px solid var(--line)}
.history-item{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;min-height:68px;border-top:1px solid var(--line)}
.history-list>.history-item:first-child{border-top:0}
.history-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;background:#e9e9e6;color:#616166}
.history-icon svg{width:17px;height:17px;fill:currentColor}
.history-copy{min-width:0;display:flex;flex-direction:column;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left}
.history-copy strong,.history-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history-copy strong{font-size:14px;font-weight:650}.history-copy span{color:var(--quiet);font-size:11px}
.history-meta{display:flex;flex-direction:column;align-items:flex-end;color:var(--quiet);font-size:11px}
.origin{display:inline-flex;align-items:center;gap:5px}.origin::before{content:"";width:5px;height:5px;border-radius:50%;background:#a5a5a7}.origin.web::before{background:var(--accent)}
.history-play{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer}.history-play:hover{background:#303034}.history-play svg{width:15px;height:15px;fill:currentColor}.history-play .pause-icon{display:none}.history-play.is-playing .play-icon{display:none}.history-play.is-playing .pause-icon{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.empty-state{padding:37px 0;border-top:1px solid var(--line);color:var(--quiet);font-size:12px;text-align:center}

.audio-player{position:fixed;z-index:70;left:0;right:0;bottom:0;padding-bottom:env(safe-area-inset-bottom);border-top:1px solid var(--line-strong);background:rgba(249,249,247,.96);box-shadow:0 -12px 50px rgba(20,20,18,.1);backdrop-filter:blur(18px)}.player-inner{width:min(1180px,calc(100% - 48px));min-height:78px;display:grid;grid-template-columns:42px 46px minmax(150px,280px) minmax(240px,1fr) 44px;align-items:center;gap:13px;margin:auto}.player-toggle{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer}.player-toggle svg{grid-area:1/1;width:17px;height:17px}.player-toggle .play-icon{fill:currentColor}.player-toggle .pause-icon{display:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.audio-player.is-playing .player-toggle .play-icon{display:none}.audio-player.is-playing .player-toggle .pause-icon{display:block}.player-cover{width:46px;height:46px;display:grid;place-items:center;overflow:hidden;border-radius:8px;background:#e7e7e3;color:#5b5b60;background-position:center;background-size:cover}.player-cover.has-cover svg{visibility:hidden}.player-cover svg{width:19px;height:19px;fill:currentColor}.player-copy{min-width:0;display:flex;flex-direction:column}.player-copy strong,.player-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-copy strong{font-size:13px}.player-copy span{color:var(--quiet);font-size:11px}.player-timeline{display:flex;min-width:0;flex-direction:column;gap:2px}.player-timeline input{--seek-progress:0%;width:100%;height:32px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;touch-action:none}.player-timeline input::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(to right,var(--ink) 0,var(--ink) var(--seek-progress),var(--line-strong) var(--seek-progress),var(--line-strong) 100%)}.player-timeline input::-webkit-slider-thumb{width:18px;height:18px;margin-top:-7px;-webkit-appearance:none;border:3px solid var(--surface);border-radius:50%;background:var(--ink);box-shadow:0 1px 5px rgba(0,0,0,.24)}.player-timeline input::-moz-range-track{height:4px;border:0;border-radius:999px;background:var(--line-strong)}.player-timeline input::-moz-range-progress{height:4px;border-radius:999px;background:var(--ink)}.player-timeline input::-moz-range-thumb{width:14px;height:14px;border:3px solid var(--surface);border-radius:50%;background:var(--ink);box-shadow:0 1px 5px rgba(0,0,0,.24)}.player-timeline input:disabled{cursor:wait;opacity:.42}.player-timeline>div{display:flex;justify-content:space-between;color:var(--quiet);font-size:10px;font-variant-numeric:tabular-nums}.player-close{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--quiet);cursor:pointer}.player-close:hover{background:#e9e9e6;color:var(--ink)}.player-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}.has-player .app-shell{padding-bottom:calc(78px + env(safe-area-inset-bottom))}.has-player .toast{bottom:calc(94px + env(safe-area-inset-bottom))}

.profile-section{padding-left:20px;border-left:1px solid var(--line)}
.plan-badge{padding:5px 8px;border-radius:6px;background:var(--ink);color:var(--surface);font-size:10px;font-weight:800;letter-spacing:.08em}.plan-badge.is-free{background:var(--surface-muted);color:var(--muted)}
.usage{margin-top:21px}.usage>div:first-child{display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:12px}.usage strong{color:var(--ink);font-size:12px;font-variant-numeric:tabular-nums}
.usage>small{display:block;margin-top:7px;color:var(--quiet);font-size:11px;line-height:1.45}
.meter{height:4px;margin-top:9px;border-radius:3px;background:#dfdfdc;overflow:hidden}.meter i{display:block;width:0;height:100%;border-radius:3px;background:var(--ink);transition:width .25s}
.plan-capabilities{margin-top:24px;padding-top:17px;border-top:1px solid var(--line)}.plan-capabilities>span{display:block;margin-bottom:8px;color:var(--muted);font-size:12px}.plan-capability{min-height:50px;display:grid;grid-template-columns:22px 1fr;align-items:center;gap:10px}.plan-capability>svg{width:20px;height:20px;padding:3px;border-radius:50%;background:var(--ink);fill:none;stroke:var(--surface);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.plan-capability>div{min-width:0;display:flex;flex-direction:column}.plan-capability strong{font-size:12px}.plan-capability small{overflow:hidden;color:var(--quiet);font-size:11px;line-height:1.45;text-overflow:ellipsis}.plan-capability.locked>svg{border-radius:5px;background:var(--surface-muted);stroke:var(--quiet);stroke-width:1.7}.plan-capability.locked strong{color:var(--muted)}
.quality-picker{margin:27px 0 0;padding:0;border:0}.quality-picker legend{margin-bottom:9px;color:var(--muted);font-size:12px}.quality-picker>div{display:grid;grid-template-columns:repeat(3,1fr);padding:3px;border-radius:9px;background:#e5e5e2}
.quality-picker button{height:40px;display:flex;align-items:center;justify-content:center;gap:4px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:11px;font-weight:700;cursor:pointer}
.quality-picker button.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.09)}
.quality-lock{display:none;width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.quality-picker button.locked .quality-lock{display:block}
.upgrade-button{width:100%;height:43px;margin-top:25px;border:1px solid var(--ink);border-radius:9px;background:var(--ink);color:#fff;font-size:11px;font-weight:700;cursor:pointer}
.upgrade-button:hover{background:#303034}.upgrade-button.is-pro{border-color:var(--line);background:transparent;color:var(--muted);cursor:default}

.app-footer{width:min(1180px,calc(100% - 48px));min-height:76px;margin:auto;padding-bottom:env(safe-area-inset-bottom);display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);color:var(--quiet);font-size:10px}
.app-footer div{display:flex;gap:20px}.app-footer a:hover,.app-footer button:hover{color:var(--ink)}
.app-footer button{padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}

.mini-nav{display:none}

body.telegram-mini-app{min-height:var(--mini-viewport-height,100dvh);overscroll-behavior-y:none}
html.telegram-mini-app-root,html.telegram-mini-app-root body{scrollbar-width:none;-ms-overflow-style:none}
html.telegram-mini-app-root::-webkit-scrollbar,html.telegram-mini-app-root *::-webkit-scrollbar{display:none;width:0;height:0}
body.telegram-mini-app .app-shell{min-height:var(--mini-viewport-height,100dvh)}
body.telegram-mini-app .public-header,body.telegram-mini-app .auth-view{display:none!important}
body.telegram-mini-app .app-header{padding-top:env(safe-area-inset-top);background:rgba(245,245,242,.96)}
body.telegram-mini-app .header-inner{width:min(100% - 28px,720px);height:58px;grid-template-columns:1fr auto}
body.telegram-mini-app .brand-mark{width:32px;height:32px;border-radius:9px}
body.telegram-mini-app .brand strong{font-size:15px}
body.telegram-mini-app .app-nav,body.telegram-mini-app .account-copy{display:none}
body.telegram-mini-app .account-menu{position:fixed;top:calc(66px + env(safe-area-inset-top));right:14px;width:min(260px,calc(100% - 28px))}
body.telegram-mini-app .workspace{width:min(100% - 28px,720px);min-height:calc(var(--mini-viewport-height,100dvh) - 126px);padding:28px 0 calc(92px + env(safe-area-inset-bottom))}
body.telegram-mini-app .dashboard-grid{display:contents}
body.telegram-mini-app [data-mini-screen]{display:none}
body.telegram-mini-app[data-mini-view="home"] [data-mini-screen="home"]:not([hidden]),
body.telegram-mini-app[data-mini-view="history"] [data-mini-screen="history"]:not([hidden]),
body.telegram-mini-app[data-mini-view="playlists"] [data-mini-screen="playlists"]:not([hidden]),
body.telegram-mini-app[data-mini-view="profile"] [data-mini-screen="profile"]:not([hidden]){display:block}
body.telegram-mini-app .section-heading{text-align:left}
body.telegram-mini-app .section-heading h1{margin-bottom:7px;font-size:32px;letter-spacing:-.045em}
body.telegram-mini-app .section-heading>p:last-child{font-size:13px}
body.telegram-mini-app .download-form{height:58px;margin-top:22px;padding-left:14px;border-radius:13px;box-shadow:none}
body.telegram-mini-app .download-form button{height:44px}
body.telegram-mini-app .form-meta{padding-top:9px}
body.telegram-mini-app .form-meta button{display:inline-flex;min-height:40px}
body.telegram-mini-app .search-results{max-height:none;margin-top:8px;box-shadow:none}
body.telegram-mini-app .search-panel-head{top:calc(58px + env(safe-area-inset-top))}
body.telegram-mini-app .active-job{margin-top:18px;padding:15px}
body.telegram-mini-app .history-section,body.telegram-mini-app .profile-section{margin:0;padding:0;border:0}
body.telegram-mini-app .block-heading{align-items:center;margin-bottom:14px}
body.telegram-mini-app .block-heading h2{margin:0;font-size:25px}
body.telegram-mini-app .history-list{border-bottom:0}
body.telegram-mini-app .history-item{min-height:64px}
body.telegram-mini-app .profile-section{max-width:520px;margin-inline:auto}
body.telegram-mini-app .profile-section .block-heading{padding-bottom:17px;border-bottom:1px solid var(--line)}
body.telegram-mini-app .plan-capabilities{margin-top:21px}
body.telegram-mini-app .plan-capabilities>span{margin-bottom:12px;font-size:12px;font-weight:650}
body.telegram-mini-app .plan-capability{min-height:58px;grid-template-columns:24px 1fr;gap:11px}
body.telegram-mini-app .plan-capability>svg{width:22px;height:22px}
body.telegram-mini-app .plan-capability strong{font-size:13px}
body.telegram-mini-app .plan-capability small{overflow:visible;font-size:11px;line-height:1.5;text-overflow:clip;white-space:normal}
body.telegram-mini-app .app-footer{display:none}
body.telegram-mini-app .mini-nav{position:fixed;z-index:90;left:0;right:0;bottom:0;height:calc(64px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,1fr);padding:5px max(10px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(10px,env(safe-area-inset-left));border-top:1px solid var(--line);background:rgba(249,249,247,.97);backdrop-filter:blur(18px)}
body.telegram-mini-app .mini-nav button{min-width:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:3px 2px 2px;border:0;border-radius:10px;background:transparent;color:var(--quiet);font-size:10px;font-weight:650;line-height:1;cursor:pointer}
body.telegram-mini-app .mini-nav button.active{color:var(--ink)}
body.telegram-mini-app .mini-nav svg{width:20px;height:20px;margin:0 auto;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
body.telegram-mini-app .mini-nav span{display:block;line-height:12px;text-align:center}
body.telegram-mini-app .toast{right:12px;left:12px;bottom:calc(76px + env(safe-area-inset-bottom));width:auto;max-width:none}
body.telegram-mini-app .audio-player{bottom:calc(64px + env(safe-area-inset-bottom));padding:7px 0;border-bottom:1px solid var(--line);box-shadow:0 -8px 28px rgba(20,20,18,.08)}
body.telegram-mini-app .player-inner{width:min(100% - 24px,696px);min-height:74px;grid-template-columns:42px 42px minmax(0,1fr) 36px;grid-template-rows:42px 24px;grid-template-areas:"toggle cover copy close" "timeline timeline timeline timeline";gap:4px 8px}
body.telegram-mini-app .player-toggle{grid-area:toggle;width:42px;height:42px}
body.telegram-mini-app .player-cover{grid-area:cover;width:42px;height:42px}
body.telegram-mini-app .player-copy{grid-area:copy}
body.telegram-mini-app .player-timeline{grid-area:timeline}
body.telegram-mini-app .player-timeline input{height:20px}
body.telegram-mini-app .player-close{grid-area:close;width:36px;height:36px}
body.telegram-mini-app.has-player .app-shell{padding-bottom:calc(154px + env(safe-area-inset-bottom))}
body.telegram-mini-app.has-player .workspace{padding-bottom:calc(174px + env(safe-area-inset-bottom))}
body.telegram-mini-app.has-player .toast{bottom:calc(154px + env(safe-area-inset-bottom))}
body.telegram-mini-app .pro-dialog{width:min(100% - 20px,620px);max-height:calc(var(--mini-viewport-height,100dvh) - 24px);overflow:auto}

html[data-theme="dark"] body.telegram-mini-app .app-header,
html[data-theme="dark"] body.telegram-mini-app .mini-nav{background:rgba(17,17,19,.97)}

/* Subscription dialog */
.pro-dialog{position:fixed;inset:0;width:min(760px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:42px;overflow:auto;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);box-shadow:0 24px 90px rgba(20,20,18,.22)}
.pro-dialog::backdrop{background:rgba(18,18,19,.48);backdrop-filter:blur(3px)}
.dialog-close{position:absolute;right:18px;top:18px;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:#efefec;color:#6b6b70;cursor:pointer}
.dialog-close .ui-icon{width:17px;height:17px}
.dialog-heading{max-width:560px}.dialog-heading h2{margin:12px 0 14px;font-size:38px;line-height:1.06;letter-spacing:-.045em}.dialog-heading>p:last-child{margin:0;color:var(--muted);font-size:13px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:30px}
.plan-option{display:flex;flex-direction:column;min-height:190px;padding:20px;border:1px solid var(--line);border-radius:12px;background:#fafaf8}
.plan-option.recommended{border-color:#a9a9a5;background:#f4f4f0}
.plan-option header{display:flex;justify-content:space-between;gap:15px}.plan-option h3{margin:0;font-size:15px}.plan-option header span{color:var(--accent-dark);font-size:9px;font-weight:750;text-transform:uppercase}
.plan-price{margin:16px 0 4px;font-size:29px;font-weight:730;letter-spacing:-.045em}.plan-price small{font-size:11px;font-weight:500;color:var(--muted)}
.plan-option>p{margin:0 0 18px;color:var(--muted);font-size:11px}
.plan-option button{height:40px;margin-top:auto;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);font-size:11px;font-weight:700;cursor:pointer}.plan-option button:hover{border-color:#999995}.plan-option button:disabled{cursor:not-allowed;opacity:.55}
.recommended button{border-color:var(--ink);background:var(--ink);color:#fff}
.payment-caption{margin:17px 0 0;color:var(--quiet);font-size:10px;text-align:center}
.faq-dialog{width:min(590px,calc(100% - 32px));padding:40px}
.faq-dialog .dialog-heading h2{margin:0;font-size:36px}
.faq-list{margin-top:28px;border-bottom:1px solid var(--line)}
.faq-list details{border-top:1px solid var(--line)}
.faq-list summary{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none;font-size:14px;font-weight:650;cursor:pointer}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s}
.faq-list details[open] summary svg{transform:rotate(180deg)}
.faq-list details p{margin:-2px 36px 20px 0;color:var(--muted);font-size:13px;line-height:1.6}

.toast{position:fixed;z-index:100;right:24px;bottom:24px;width:max-content;max-width:min(380px,calc(100% - 32px));min-height:48px;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:10px;padding:9px 13px 9px 10px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:var(--ink);color:#fff;box-shadow:0 14px 42px rgba(0,0,0,.22);font-size:12px;line-height:1.42;animation:toast-in var(--motion-base) var(--ease-out) both}
.toast-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.12);line-height:0}.toast-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.toast-message{min-width:0;overflow-wrap:anywhere}.toast.error{background:#832e2a}.toast.success .toast-icon{background:rgba(112,218,163,.18)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

html[data-theme="dark"]{
  color-scheme:dark;
  --page:#111113;
  --surface:#19191c;
  --surface-muted:#242427;
  --ink:#f3f3f0;
  --muted:#b2b2b6;
  --quiet:#96969c;
  --line:#303034;
  --line-strong:#49494e;
  --accent:#40a6e8;
  --accent-dark:#70bced;
  --danger:#e26761;
  --success:#4ab984;
  --shadow:0 18px 60px rgba(0,0,0,.26);
}
html[data-theme="dark"] .theme-icon-moon{display:none}html[data-theme="dark"] .theme-icon-sun{display:block}
html[data-theme="dark"] .app-header{background:rgba(17,17,19,.9)}
html[data-theme="dark"] .app-nav{background:#202023}
html[data-theme="dark"] .search-panel-head{background:rgba(25,25,28,.96)}
html[data-theme="dark"] .audio-player{background:rgba(20,20,22,.96)}
html[data-theme="dark"] .login-unavailable{background:#33291f;color:#e0b67c}
/* background-color only: the shorthand reset background-size, so the
   artwork set inline was drawn at full size and cropped in the dark theme. */
html[data-theme="dark"] .track-cover,html[data-theme="dark"] .player-cover{background-color:#2c2c30;color:#b4b4ba}
html[data-theme="dark"] .result-labels small{background:#2b2b2f;color:#bdbdc1}

html[data-theme="dark"] .search-result-copy mark{background:#15364b}
html[data-theme="dark"] .search-skeleton i{background:linear-gradient(90deg,#202023 25%,#2a2a2e 50%,#202023 75%);background-size:220% 100%}
html[data-theme="dark"] .job-state-icon,html[data-theme="dark"] .history-icon{background:#29292d;color:#c3c3c7}
html[data-theme="dark"] .job-error .job-state-icon{background:#3c211f}
html[data-theme="dark"] .job-progress,html[data-theme="dark"] .meter{background:#303034}
html[data-theme="dark"] .quality-picker>div{background:#242427}
html[data-theme="dark"] .dialog-close,html[data-theme="dark"] .player-close:hover{background:#29292d;color:#b6b6bb}
html[data-theme="dark"] .plan-option{background:#1d1d20}html[data-theme="dark"] .plan-option.recommended{border-color:#55555a;background:#232326}
html[data-theme="dark"] .brand-mark,html[data-theme="dark"] .avatar,html[data-theme="dark"] .plan-badge,html[data-theme="dark"] .download-form button,html[data-theme="dark"] .job-action:not(.job-download):not(.job-cancel),html[data-theme="dark"] .history-play,html[data-theme="dark"] .player-toggle,html[data-theme="dark"] .upgrade-button:not(.is-pro),html[data-theme="dark"] .recommended button,html[data-theme="dark"] .toast:not(.error),html[data-theme="dark"] .skip-link{color:#161618}
html[data-theme="dark"] .result-download:hover,html[data-theme="dark"] .result-download:focus-visible{color:var(--ink)}
html[data-theme="dark"] .plan-badge.is-free{color:var(--muted)}

@media(max-width:820px){
  .auth-main{min-height:auto;grid-template-columns:1fr;gap:50px;padding:66px 0}.auth-copy{text-align:center}.auth-lead{margin-inline:auto}
  .header-inner{grid-template-columns:1fr auto}.app-nav{display:none}.workspace{padding-top:65px}
  .dashboard-grid{grid-template-columns:1fr;gap:55px}.profile-section{padding-left:0;border-left:0}
  .audio-player{padding:10px 0 calc(10px + env(safe-area-inset-bottom))}.player-inner{width:calc(100% - 24px);min-height:108px;grid-template-columns:48px 44px minmax(0,1fr) 44px;grid-template-rows:44px 54px;grid-template-areas:"cover copy copy close" "toggle timeline timeline timeline";column-gap:10px;row-gap:8px}.player-toggle{grid-area:toggle;width:48px;height:48px}.player-cover{grid-area:cover;width:44px;height:44px}.player-copy{grid-area:copy}.player-timeline{grid-area:timeline;align-self:center}.player-close{grid-area:close}.player-timeline input{height:42px}.player-timeline input::-webkit-slider-runnable-track{height:6px}.player-timeline input::-webkit-slider-thumb{width:24px;height:24px;margin-top:-9px}.player-timeline input::-moz-range-track,.player-timeline input::-moz-range-progress{height:6px}.player-timeline input::-moz-range-thumb{width:20px;height:20px}.has-player .app-shell{padding-bottom:calc(134px + env(safe-area-inset-bottom))}.has-player .toast{bottom:calc(148px + env(safe-area-inset-bottom))}
}

@media(max-width:560px){
  .search-result{grid-template-rows:auto auto;padding-block:9px}.track-cover{grid-row:1/3}.search-result-actions{justify-content:flex-start;gap:3px}.search-result-actions>span,.result-download span{display:none}
  .public-header,.header-inner,.workspace,.app-footer{width:calc(100% - 30px)}
  .public-header,.header-inner{height:66px}.brand strong{font-size:15px}.brand-mark{width:31px;height:31px}
  .auth-main{width:calc(100% - 30px);min-height:auto;padding:54px 0 70px}.auth-copy h1{font-size:48px}.auth-lead{font-size:16px}.auth-panel{padding:28px 21px}.auth-panel h2{font-size:30px}
  .account-copy{display:none}.account-menu{top:58px}.public-preferences button,.form-meta button{min-width:44px;min-height:44px}.dialog-close{width:44px;height:44px}.search-filter-empty button{min-height:44px;padding-inline:8px}
  .workspace{padding:56px 0 80px}.section-heading h1{font-size:42px}.section-heading>p:last-child{font-size:14px}
  .download-form{height:59px;gap:8px;margin-top:30px;padding-left:14px}.download-form>svg{width:19px;height:19px}.download-form button{height:45px;padding:0 14px;font-size:11px}.download-form input{font-size:14px}.form-meta{padding-top:10px}.form-meta button{display:inline-flex}
  .search-results{margin-top:8px}.search-panel-head{padding-inline:12px}.search-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.search-filters label{min-width:0;min-height:44px;justify-content:space-between}.search-filters label>span{display:none}.search-filters label>svg{width:17px;height:17px;flex:0 0 auto}.search-filters select{min-width:0;max-width:100%}.search-result{grid-template-columns:44px minmax(0,1fr) auto;gap:9px;padding-inline:7px}.track-cover{width:44px;height:44px}.search-result-actions{grid-column:3;grid-row:1/3;align-self:center;margin-top:0}.search-result-actions>span,.result-download span{display:none}.track-discovery-button,.playlist-add-button,.result-download,.entity-more-button{width:44px;height:44px;min-width:44px;padding:0;justify-content:center}.job-row{grid-template-columns:40px 1fr}.job-state-icon{width:40px;height:40px}.job-action{min-height:44px;width:100%;justify-content:center}.job-actions{grid-column:1/-1;width:100%;margin-top:5px}.job-actions .job-action{flex:1}
  .dashboard-grid{margin-top:70px}.history-item{grid-template-columns:34px 1fr}.history-meta{display:none}
  .app-footer{flex-direction:column;align-items:flex-start;justify-content:center;gap:7px}
  .pro-dialog{padding:34px 19px 24px}.dialog-heading h2{font-size:32px}.plans{grid-template-columns:1fr}.plan-option{min-height:165px}.faq-dialog{padding:32px 20px 24px}.faq-dialog .dialog-heading h2{font-size:30px}
  .toast{right:15px;left:15px;bottom:16px;width:auto;max-width:none}
  .player-copy strong{font-size:12px}.player-copy span{font-size:10px}
}

@media(max-width:360px){
  .download-form #submit-button{width:45px;padding:0;justify-content:center}
  .download-form #submit-button span{display:none}
}

@media(prefers-reduced-motion:reduce){
  /* Everything snaps by default, including anything added later. The surfaces
     listed here keep a short fade instead (see "Reduced motion keeps the calm
     part" at the end): vanishing sheets and notices are harder to follow. */
  html{scroll-behavior:auto}
  *:not(:is(dialog,.exit-backdrop,.dialog-ghost,.toast,.account-menu,.job-pill,.audio-player,.search-results,.active-job,[data-mini-screen],#catalog-content,#discovery-content)),*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .toast{transform:none!important}
}

/* Web playlists */
.web-screen-hidden{display:none!important}
.playlists-section{max-width:1040px;margin:0 auto}
.playlists-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.playlists-heading h1{margin:0;font-size:clamp(38px,5vw,54px);letter-spacing:-.05em}
.playlists-heading p{margin:8px 0 0;color:var(--quiet);font-size:12px}
.playlists-heading>button{height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 15px;border:0;border-radius:9px;background:var(--ink);color:var(--surface);font-size:12px;font-weight:700;cursor:pointer}
.playlists-heading>button:disabled{opacity:.45;cursor:not-allowed}.playlists-heading>button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.playlists-layout{min-height:460px;display:grid;grid-template-columns:270px minmax(0,1fr);overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.playlist-sidebar{padding:10px;border-right:1px solid var(--line);background:var(--surface-muted)}
.playlist-sidebar>div{display:flex;flex-direction:column;gap:4px}.playlist-nav-item{width:100%;min-height:58px;display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 9px;border:0;border-radius:10px;background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.playlist-nav-item:hover{background:var(--surface)}.playlist-nav-item.active{background:var(--surface);box-shadow:0 1px 4px rgba(20,20,18,.07)}
.playlist-nav-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;background:#dededb;color:#5d5d62}.playlist-nav-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.playlist-nav-copy{min-width:0;display:flex;flex-direction:column}.playlist-nav-copy strong,.playlist-nav-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-nav-copy strong{font-size:14px;font-weight:650}.playlist-nav-copy span{margin-top:2px;color:var(--quiet);font-size:11px}.playlist-nav-item>svg{width:15px;height:15px;fill:none;stroke:var(--quiet);stroke-width:1.7}
.playlist-detail{min-width:0;padding:26px 28px}.playlist-empty{min-height:370px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--quiet);font-size:11px;text-align:center}.playlist-empty svg{width:28px;height:28px;margin-bottom:13px;fill:none;stroke:currentColor;stroke-width:1.5}.playlist-empty strong{margin-bottom:5px;color:var(--ink);font-size:15px}
.playlist-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}.playlist-detail-head h2{margin:0;font-size:27px;letter-spacing:-.04em}.playlist-detail-head p{margin:5px 0 0;color:var(--quiet);font-size:12px}.playlist-detail-menu{display:flex;gap:5px}.playlist-detail-menu button{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}.playlist-detail-menu button:hover{background:var(--surface-muted);color:var(--ink)}.playlist-detail-menu button.danger:hover{background:#f7e8e6;color:var(--danger)}.playlist-detail-menu svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.playlist-detail-menu .playlist-recommendations-button{width:auto;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 11px;color:var(--ink);font-size:11px;font-weight:700}.playlist-detail-menu .playlist-recommendations-button:disabled{opacity:.4;cursor:not-allowed}
.playlist-track-tools{display:grid;grid-template-columns:minmax(180px,1fr) auto auto;align-items:center;gap:10px;margin-bottom:14px}.playlist-track-search{height:42px;display:flex;align-items:center;gap:8px;margin:0;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface-muted);color:var(--quiet)}.playlist-track-search:focus-within{border-color:var(--ink);color:var(--ink)}.playlist-track-search svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}.playlist-track-search input{min-width:0;width:100%;border:0;background:transparent;color:var(--ink);font:inherit;font-size:12px;outline:0}.playlist-track-search input::placeholder{color:var(--quiet)}.playlist-search-status{color:var(--quiet);font-size:11px;white-space:nowrap}.playlist-shuffle{height:42px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--ink);font-size:11px;font-weight:700;cursor:pointer}.playlist-shuffle:hover{background:var(--surface-muted)}.playlist-shuffle:disabled{opacity:.4;cursor:not-allowed}.playlist-shuffle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.playlist-no-matches{padding:36px 0;border-top:1px solid var(--line);color:var(--quiet);font-size:12px;text-align:center}
.playlist-tracks{border-bottom:1px solid var(--line)}.playlist-track{min-height:62px;display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:11px;border-top:1px solid var(--line)}.playlist-track:first-child{border-top:0}.playlist-track-play{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--ink);color:var(--surface);cursor:pointer}.playlist-track-play.is-download{border:1px solid var(--line);background:transparent;color:var(--muted)}.playlist-track-play svg{grid-area:1/1;width:14px;height:14px;fill:currentColor}.playlist-track-play.is-download svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.playlist-track-play .pause-icon{display:none}.playlist-track-play.is-playing .play-icon{display:none}.playlist-track-play.is-playing .pause-icon{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.playlist-track-copy{min-width:0;display:flex;flex-direction:column;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.playlist-track-copy strong,.playlist-track-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-track-copy strong{font-size:14px;font-weight:650}.playlist-track-copy span{margin-top:2px;color:var(--quiet);font-size:11px}
.playlist-track-actions{display:flex;align-items:center;gap:5px}.playlist-track-actions>span{min-width:34px;color:var(--quiet);font-size:10px;text-align:right}.playlist-track-actions button,.playlist-track-actions a{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}.playlist-track-actions button:hover,.playlist-track-actions a:hover{background:var(--surface-muted);color:var(--ink)}.playlist-track-actions svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.playlist-add-button{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted);cursor:pointer}.playlist-add-button:hover{border-color:var(--ink);color:var(--ink)}.playlist-add-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.history-copy{cursor:pointer}.history-actions{display:flex;align-items:center;gap:9px}.history-actions .playlist-add-button{width:32px;height:32px}
.playlist-dialog{position:fixed;inset:0;width:min(430px,calc(100% - 28px));max-height:calc(100dvh - 30px);margin:auto;padding:32px;overflow:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);box-shadow:0 24px 90px rgba(20,20,18,.24)}.playlist-dialog::backdrop{background:rgba(18,18,19,.48);backdrop-filter:blur(3px)}.playlist-dialog .dialog-heading h2{font-size:28px}.playlist-dialog-list{display:flex;flex-direction:column;gap:6px;margin-top:22px}.playlist-dialog-list button{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 13px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--ink);text-align:left;cursor:pointer}.playlist-dialog-list button:hover{background:var(--surface-muted)}.playlist-dialog-list button:disabled{opacity:.45;cursor:not-allowed}.playlist-dialog-list button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:700}.playlist-dialog-list button small{flex:0 0 auto;color:var(--quiet);font-size:11px}.playlist-create-dialog form{display:flex;flex-direction:column;gap:8px;margin-top:22px}.playlist-create-dialog label{color:var(--muted);font-size:11px}.playlist-create-dialog input{height:46px;padding:0 12px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);color:var(--ink);font-size:13px;outline:0}.playlist-create-dialog input:focus{border-color:var(--ink)}.playlist-create-dialog form button{height:46px;margin-top:7px;border:0;border-radius:9px;background:var(--ink);color:var(--surface);font-size:12px;font-weight:700;cursor:pointer}
.action-sheet{width:min(390px,calc(100% - 28px));padding:18px}.action-sheet .dialog-close{top:14px;right:14px}.action-sheet-summary{min-height:62px;display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:12px;padding:2px 46px 15px 2px;border-bottom:1px solid var(--line)}.action-sheet-cover{width:52px;height:52px;display:grid;place-items:center;overflow:hidden;border-radius:11px;background:var(--surface-muted);color:var(--muted)}.action-sheet-cover img{width:100%;height:100%;object-fit:cover}.action-sheet-cover svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.action-sheet-summary>div{min-width:0}.action-sheet-summary p,.action-sheet-summary h2,.action-sheet-summary>div>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.action-sheet-summary p{margin:0 0 4px;color:var(--quiet);font-size:10px;font-weight:750;letter-spacing:.09em;text-transform:uppercase}.action-sheet-summary h2{margin:0;font-size:18px;letter-spacing:-.025em}.action-sheet-summary>div>span{margin-top:4px;color:var(--quiet);font-size:11px}.action-sheet-list{display:flex;flex-direction:column;padding-top:8px}.action-sheet-item{width:100%;min-height:54px;display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:11px;padding:5px 8px;border:0;border-radius:10px;background:transparent;color:var(--ink);text-align:left;text-decoration:none;cursor:pointer}.action-sheet-item:hover,.action-sheet-item:focus-visible{background:var(--surface-muted)}.action-sheet-item.danger{margin-top:7px;border-top:1px solid var(--line);border-radius:0 0 10px 10px;color:var(--danger)}.action-sheet-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:9px;background:var(--surface-muted);color:currentColor}.action-sheet-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.action-sheet-label{min-width:0;display:flex;flex-direction:column}.action-sheet-label strong{font-size:13px}.action-sheet-label small{margin-top:2px;color:var(--quiet);font-size:11px}
.search-filters label>svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.discovery-dialog{width:min(620px,calc(100% - 28px))}.discovery-content{margin-top:22px}.discovery-loading,.discovery-empty{min-height:180px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:var(--quiet);font-size:12px;text-align:center}.discovery-loading svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;animation:spin 1.6s linear infinite}.discovery-empty svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5}.lyrics-text{max-height:58vh;margin:0;padding:18px;border-radius:11px;background:var(--surface-muted);overflow:auto;color:var(--ink);font:inherit;font-size:14px;line-height:1.72;white-space:pre-wrap}.lyrics-actions{display:flex;gap:8px;margin-top:12px}.lyrics-actions button{flex:1;min-width:0;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--ink);font-size:12px;font-weight:700;cursor:pointer}.lyrics-actions button:hover{background:var(--surface-muted)}.lyrics-actions button svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.lyrics-actions button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recommendation-row{min-height:68px;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:11px;border-top:1px solid var(--line);transition:opacity .2s,transform .2s}.recommendation-row:first-child{border-top:0}.recommendation-row.is-added{opacity:0;transform:translateX(8px)}.recommendation-cover{width:44px;height:44px;display:grid;place-items:center;overflow:hidden;border-radius:9px;background:var(--surface-muted);color:var(--quiet)}.recommendation-cover img{width:100%;height:100%;object-fit:cover}.recommendation-cover svg{width:17px;height:17px;fill:currentColor}.recommendation-row>div{min-width:0;display:flex;flex-direction:column}.recommendation-row strong,.recommendation-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recommendation-row strong{font-size:13px}.recommendation-row span{margin-top:3px;color:var(--quiet);font-size:11px}.recommendation-row>div:last-child{flex-direction:row;gap:3px}.recommendation-row button{width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}.recommendation-row button:hover{background:var(--surface-muted);color:var(--ink)}.recommendation-row button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.recommendation-row .recommendation-primary{width:auto;min-width:88px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 11px;border:1px solid var(--line);color:var(--ink);font-size:11px;font-weight:700}.recommendation-row .recommendation-primary span{margin:0;color:inherit;font-size:inherit}.quality-dialog{width:min(460px,calc(100% - 28px))}.dialog-quality{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:10px;background:var(--surface-muted)}.dialog-quality button{height:44px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer}.dialog-quality button.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(20,20,18,.1)}.dialog-primary{width:100%;min-height:46px;margin-top:18px;border:0;border-radius:9px;background:var(--ink);color:var(--surface);font-size:12px;font-weight:750;cursor:pointer}.dialog-primary:disabled{opacity:.4;cursor:not-allowed}.collection-dialog{width:min(760px,calc(100% - 28px));padding-bottom:24px}.collection-controls{min-height:48px;display:flex;align-items:center;justify-content:space-between;margin-top:18px;border-bottom:1px solid var(--line);font-size:11px}.collection-select-all{display:flex;align-items:center;gap:8px;cursor:pointer}.collection-track-list{max-height:44vh;overflow:auto}.collection-track-option{min-height:60px;display:grid;grid-template-columns:20px 26px minmax(0,1fr) auto;align-items:center;gap:9px;border-bottom:1px solid var(--line);cursor:pointer}.collection-track-option input{width:18px;height:18px;accent-color:var(--ink)}.collection-track-number{color:var(--quiet);font-size:11px;text-align:right}.collection-track-option>span:nth-child(3){min-width:0;display:flex;flex-direction:column}.collection-track-option strong,.collection-track-option small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.collection-track-option strong{font-size:13px}.collection-track-option small,.collection-track-option>span:last-child{color:var(--quiet);font-size:11px}.collection-footer{position:static;margin:14px -32px -24px;padding:14px 32px 24px;border-top:1px solid var(--line);background:var(--surface)}.collection-footer .dialog-primary{margin-top:10px}.recorder-dialog{width:min(460px,calc(100% - 28px));text-align:center}.recorder-dialog .dialog-heading p:last-child{max-width:330px;margin-inline:auto}.recorder-visual{height:94px;display:flex;align-items:center;justify-content:center;gap:7px;margin:18px 0;color:var(--quiet)}.recorder-visual span{width:5px;height:18px;border-radius:5px;background:currentColor;transition:height .2s}.recorder-visual.is-recording{color:var(--danger)}.recorder-visual.is-recording span{animation:recorder-wave 1.4s ease-in-out infinite alternate}.recorder-visual.is-recording span:nth-child(2){animation-delay:-.55s}.recorder-visual.is-recording span:nth-child(3){animation-delay:-.25s}.recorder-visual.is-recording span:nth-child(4){animation-delay:-.65s}.recorder-visual.is-ready{color:var(--ink)}.recorder-time{display:block;font-size:28px;font-variant-numeric:tabular-nums}.recorder-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:20px}.recorder-actions .dialog-primary{margin:0}.recorder-button{min-height:46px;display:inline-flex;align-items:center;gap:8px;padding:0 15px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font-size:12px;font-weight:700;cursor:pointer}.recorder-button svg{width:18px;height:18px;fill:var(--danger);stroke:none}.recorder-button.stop svg{fill:var(--ink)}@keyframes recorder-wave{from{height:16px}to{height:66px}}

.dialog-option-heading{margin:18px 0 8px;color:var(--quiet);font-size:10px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.delivery-dialog{width:min(460px,calc(100% - 28px))}.delivery-options,.dialog-delivery{display:grid;gap:0;overflow:hidden;border:1px solid var(--line);border-radius:11px}.delivery-option{width:100%;min-height:60px;display:grid;grid-template-columns:30px minmax(0,1fr) 18px;align-items:center;gap:10px;padding:8px 12px;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}.delivery-option:first-child{border-top:0}.delivery-option.active{background:transparent}.delivery-option.active strong{font-weight:750}.delivery-option>span:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:2px}.delivery-option strong{font-size:13px}.delivery-option small{color:var(--quiet);font-size:11px;line-height:1.35}.delivery-option-icon{width:30px;height:30px;display:grid;place-items:center;color:var(--muted)}.delivery-option svg{width:18px;height:18px;margin:auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.delivery-option>svg:last-child{width:16px;color:var(--muted)}.dialog-delivery .delivery-option{min-height:58px}.dialog-delivery .delivery-option-icon{width:30px;height:30px}@media(hover:hover){.delivery-option:hover{background:var(--surface-muted)}}

.entity-more-button svg,.track-discovery-button svg,.playlist-add-button svg,.player-volume button svg,.player-close svg,.dialog-close svg,.mini-nav button svg{margin-block:0;margin-inline:auto}

/* Compact SVG volume control */
.player-inner{grid-template-columns:42px 46px minmax(150px,260px) minmax(220px,1fr) 44px 44px}
.player-volume{position:relative;width:44px;height:44px}.player-volume button{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}.player-volume button:hover{background:var(--surface-muted);color:var(--ink)}.player-volume button svg{grid-area:1/1;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.player-volume .volume-off{display:none}.player-volume.is-muted .volume-on{display:none}.player-volume.is-muted .volume-off{display:block}
.player-volume-popover{position:absolute;z-index:4;right:0;bottom:100%;width:210px;height:50px;display:grid;grid-template-columns:minmax(0,1fr) 35px;align-items:center;gap:8px;padding:0 11px;border:1px solid var(--line);border-radius:13px;background:var(--surface);box-shadow:var(--elev-3);opacity:0;visibility:hidden;transform:translateY(5px) scale(.98);transform-origin:bottom right;pointer-events:none;transition:opacity var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-out),visibility 0s linear var(--motion-fast)}
.player-volume:hover .player-volume-popover,.player-volume:focus-within .player-volume-popover,.player-volume.is-open .player-volume-popover{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.player-volume input{--volume-progress:85%;min-width:0;width:100%;height:32px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}.player-volume input::-webkit-slider-runnable-track{height:3px;border-radius:999px;background:linear-gradient(to right,var(--ink) 0,var(--ink) var(--volume-progress),var(--line-strong) var(--volume-progress),var(--line-strong) 100%)}.player-volume input::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5.5px;-webkit-appearance:none;border:2px solid var(--surface);border-radius:50%;background:var(--ink)}.player-volume input::-moz-range-track{height:3px;border:0;border-radius:999px;background:var(--line-strong)}.player-volume input::-moz-range-progress{height:3px;border-radius:999px;background:var(--ink)}.player-volume input::-moz-range-thumb{width:10px;height:10px;border:2px solid var(--surface);border-radius:50%;background:var(--ink)}.player-volume output{color:var(--quiet);font-size:11px;font-variant-numeric:tabular-nums;text-align:right}

html[data-theme="dark"] .playlist-nav-icon{background:#2a2a2e;color:#c3c3c7}
html[data-theme="dark"] .playlist-nav-item.active{box-shadow:0 1px 5px rgba(0,0,0,.22)}
html[data-theme="dark"] .playlist-detail-menu button.danger:hover{background:#3b2221}

@media(max-width:820px){
  body:not(.telegram-mini-app) .app-nav{position:fixed;z-index:65;left:50%;bottom:12px;display:flex;transform:translateX(-50%);box-shadow:0 10px 35px rgba(20,20,18,.18)}
  body:not(.telegram-mini-app).has-player .app-nav{bottom:138px}
  body:not(.telegram-mini-app) .app-nav>[data-open-pro]{display:none!important}
  body:not(.telegram-mini-app) .app-shell{padding-bottom:68px}
  .playlists-layout{grid-template-columns:1fr;overflow:visible;border:0;background:transparent}.playlist-sidebar{margin-bottom:14px;padding:5px;overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface-muted)}.playlist-sidebar>div{min-width:max-content;flex-direction:row}.playlist-nav-item{width:190px}.playlist-detail{padding:22px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
  .player-inner{grid-template-columns:48px 44px minmax(0,1fr) 40px 40px;grid-template-areas:"cover copy copy volume close" "toggle timeline timeline timeline timeline"}.player-volume{grid-area:volume}.player-volume input{display:none}.player-volume button{width:40px;height:40px}
}

/* Tablet playlists (561–1024px): the ≤820px rule collapses everything into
   a phone layout with a horizontal playlist strip, which wastes tablet
   width. Restore two columns with a slimmer sidebar, keep the detail head
   from overflowing, and loosen the track toolbar minimum. */
@media(min-width:561px) and (max-width:1024px){
  .playlists-layout{grid-template-columns:minmax(200px,240px) minmax(0,1fr);overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
  .playlist-sidebar{margin-bottom:0;padding:10px;overflow:visible;border:0;border-right:1px solid var(--line);border-radius:0;background:var(--surface-muted)}
  .playlist-sidebar>div{min-width:0;flex-direction:column}
  .playlist-nav-item{width:100%}
  .playlist-detail{padding:22px 20px;border:0;border-radius:0;background:transparent}
  .playlist-detail-head{flex-wrap:wrap;row-gap:12px}
  .playlist-detail-head h2{font-size:25px}
  .playlist-track-tools{grid-template-columns:minmax(140px,1fr) auto auto}
}

@media(max-width:560px){
  .playlists-heading{align-items:center;margin-bottom:20px}.playlists-heading h1{font-size:38px}.playlists-heading>button{width:44px;height:44px;padding:0;justify-content:center}.playlists-heading>button span{display:none}.playlist-detail{padding:19px 14px}.playlist-detail-head h2{font-size:23px}.playlist-detail-menu .playlist-recommendations-button span{display:none}.playlist-detail-menu .playlist-recommendations-button{width:44px;height:44px;padding:0}.playlist-detail-menu button{width:44px;height:44px}.playlist-track-tools{grid-template-columns:1fr auto}.playlist-track-search{grid-column:1/-1;min-height:44px}.playlist-search-status{padding-left:2px;font-size:11px}.playlist-shuffle span{display:none}.playlist-shuffle{width:44px;height:44px;padding:0}.playlist-track{grid-template-columns:44px minmax(0,1fr) auto}.playlist-track-play,.playlist-track-actions button,.playlist-track-actions a{width:44px;height:44px;min-width:44px}.playlist-track-actions>span{display:none}.playlist-dialog{padding:30px 20px 22px}.action-sheet{box-sizing:border-box;width:100%;max-width:none;max-height:min(78dvh,680px);margin:auto 0 0;padding:18px 14px calc(14px + env(safe-area-inset-bottom));border-right:0;border-bottom:0;border-left:0;border-radius:22px 22px 0 0}.action-sheet-summary{padding-left:2px}.action-sheet-item{min-height:56px}.collection-footer{margin-inline:-20px;padding-inline:20px}.recommendation-row{grid-template-columns:42px minmax(0,1fr) auto}.recommendation-cover{width:42px;height:42px}.recommendation-row button,.track-discovery-button,.playlist-add-button,.result-download,.history-actions .playlist-add-button{height:44px;min-width:44px}.recommendation-row .recommendation-primary{min-width:82px}.history-item{grid-template-columns:36px minmax(0,1fr) auto}.history-actions{gap:0}
}

body.telegram-mini-app[data-mini-view="playlists"] .playlists-section.web-screen-hidden{display:block!important}
/* Mini App detail is narrow at any window width (workspace caps at 720px):
   the one-line toolbar (search + status + shuffle) overflows and clips at
   the card edge, so search takes its own row and the status truncates. */
body.telegram-mini-app .playlist-track-tools{grid-template-columns:minmax(0,1fr) auto}
body.telegram-mini-app .playlist-track-search{grid-column:1/-1;min-height:44px}
body.telegram-mini-app .playlist-search-status{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.telegram-mini-app .playlists-heading h1{font-size:32px}
body.telegram-mini-app .player-inner{min-height:106px;grid-template-columns:42px 42px minmax(0,1fr) 44px 44px;grid-template-rows:44px 56px;grid-template-areas:"toggle cover copy volume close" "timeline timeline timeline timeline timeline"}
body.telegram-mini-app .player-timeline input{height:44px}
body.telegram-mini-app .player-volume{grid-area:volume}body.telegram-mini-app .player-volume button,body.telegram-mini-app .player-close{width:40px;height:40px}
body.telegram-mini-app.has-player .app-shell{padding-bottom:calc(178px + env(safe-area-inset-bottom))}
body.telegram-mini-app.has-player .workspace{padding-bottom:calc(198px + env(safe-area-inset-bottom))}
body.telegram-mini-app.has-player .toast{bottom:calc(178px + env(safe-area-inset-bottom))}

/* Focused now-playing experience */
.player-cover,.player-copy{border:0;background-color:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.player-cover{padding:0;background-color:var(--surface-muted)}.player-cover:focus-visible,.player-copy:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.player-copy{padding:4px 0;border-radius:6px}
.now-playing-dialog{box-sizing:border-box;position:fixed;inset:0;width:min(430px,calc(100% - 28px));max-height:calc(100dvh - 28px);margin:auto;padding:30px;border:1px solid var(--line);border-radius:24px;background:var(--surface);color:var(--ink);box-shadow:0 30px 100px rgba(20,20,18,.3)}.now-playing-dialog[open]{display:flex;align-items:center;flex-direction:column}.now-playing-dialog::backdrop{background:rgba(12,12,13,.58);backdrop-filter:blur(7px)}.now-playing-close{top:16px;right:16px;background:var(--surface);backdrop-filter:blur(8px)}
.now-playing-art{width:min(72vw,300px);aspect-ratio:1;display:grid;place-items:center;margin:8px auto 22px;overflow:hidden;border-radius:22px;background:var(--surface-muted);background-position:center;background-size:cover;color:var(--muted);box-shadow:0 18px 45px rgba(20,20,18,.16)}.now-playing-art svg{width:54px;height:54px;fill:currentColor}.now-playing-art.has-cover svg{visibility:hidden}.now-playing-heading{width:100%;min-width:0;text-align:center}.now-playing-heading>span{display:block;margin-bottom:7px;color:var(--quiet);font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.now-playing-heading h2,.now-playing-heading p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.now-playing-heading h2{margin:0;font-size:27px;font-weight:750;letter-spacing:-.04em}.now-playing-heading p{margin:6px 0 0;color:var(--quiet);font-size:13px}
.now-playing-timeline{width:100%;margin-top:18px}.now-playing-timeline input{--seek-progress:0%;width:100%;height:38px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;touch-action:none}.now-playing-timeline input::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--ink) 0,var(--ink) var(--seek-progress),var(--line-strong) var(--seek-progress),var(--line-strong) 100%)}.now-playing-timeline input::-webkit-slider-thumb{width:22px;height:22px;margin-top:-8px;-webkit-appearance:none;border:3px solid var(--surface);border-radius:50%;background:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.24)}.now-playing-timeline input::-moz-range-track{height:6px;border:0;border-radius:999px;background:var(--line-strong)}.now-playing-timeline input::-moz-range-progress{height:6px;border-radius:999px;background:var(--ink)}.now-playing-timeline input::-moz-range-thumb{width:18px;height:18px;border:3px solid var(--surface);border-radius:50%;background:var(--ink)}.now-playing-timeline>div{display:flex;justify-content:space-between;color:var(--quiet);font-size:11px;font-variant-numeric:tabular-nums}
.now-playing-controls{display:grid;grid-template-columns:56px 70px 56px;align-items:center;justify-content:center;gap:16px;margin-top:12px}.now-playing-controls button{width:60px;height:60px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}.now-playing-controls button:hover{background:var(--surface-muted)}.now-playing-controls button:disabled{opacity:.24;cursor:default}.now-playing-controls svg{grid-area:1/1;width:26px;height:26px;fill:currentColor;stroke:none}.now-playing-controls .now-playing-toggle{width:76px;height:76px;background:var(--ink);color:var(--surface)}.now-playing-controls .now-playing-toggle:hover{background:var(--ink)}.now-playing-controls .now-playing-mode{width:44px;height:44px;flex:0 0 auto}.now-playing-toggle .pause-icon{display:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.now-playing-dialog.is-playing .now-playing-toggle .play-icon{display:none}.now-playing-dialog.is-playing .now-playing-toggle .pause-icon{display:block}
.now-playing-tools{width:100%;margin:0;padding:0;border:0;min-height:0}
.now-playing-tool,.now-playing-volume>button{width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--quiet);cursor:pointer;line-height:0}
.now-playing-tool:hover,.now-playing-volume>button:hover{background:var(--surface-muted);color:var(--ink)}
.now-playing-tool svg,.now-playing-volume>button svg{grid-area:1/1;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.now-playing-more{justify-self:end}.now-playing-more svg{fill:currentColor;stroke:none}
/* Top-left actions: volume + "..." live in the card corner, the slider opens
   downward. The bottom row keeps only shuffle/repeat, centered. */
.now-playing-dialog .now-playing-volume{position:absolute;top:58px;left:14px;z-index:3;width:36px;height:36px;justify-self:auto}
.now-playing-dialog .now-playing-more{position:absolute;top:14px;left:14px;z-index:3;width:36px;height:36px;justify-self:auto}
.now-playing-dialog .now-playing-volume>button,.now-playing-dialog .now-playing-more{width:36px;height:36px;border-radius:50%;background:rgba(20,20,18,.06);color:var(--muted);backdrop-filter:blur(8px)}
.now-playing-dialog .now-playing-volume>button:hover,.now-playing-dialog .now-playing-more:hover{background:rgba(20,20,18,.1);color:var(--ink)}
html[data-theme="dark"] .now-playing-dialog .now-playing-volume>button,html[data-theme="dark"] .now-playing-dialog .now-playing-more{background:rgba(255,255,255,.08);color:#b6b6bb}
html[data-theme="dark"] .now-playing-dialog .now-playing-volume>button:hover,html[data-theme="dark"] .now-playing-dialog .now-playing-more:hover{background:rgba(255,255,255,.14);color:#fff}
.now-playing-volume{position:relative;justify-self:start;width:44px;height:44px}
.now-playing-volume .volume-off{display:none}.now-playing-volume.is-muted .volume-on{display:none}.now-playing-volume.is-muted .volume-off{display:block}
.now-playing-volume-popover{position:absolute;z-index:4;left:0;top:100%;width:214px;height:44px;display:grid;grid-template-columns:minmax(0,1fr) 35px;align-items:center;gap:8px;padding:0 2px;border:0;border-radius:0;background:transparent;box-shadow:none;opacity:0;visibility:hidden;transform:translateY(-4px);transform-origin:top left;pointer-events:none;transition:opacity var(--motion-fast) var(--ease-standard) .25s,transform var(--motion-fast) var(--ease-out) .25s,visibility 0s linear .45s}
.now-playing-volume:hover .now-playing-volume-popover,.now-playing-volume:focus-within .now-playing-volume-popover,.now-playing-volume.is-open .now-playing-volume-popover{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.now-playing-volume input{--volume-progress:85%;width:100%;height:42px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}.now-playing-volume input::-webkit-slider-runnable-track{height:5px;border-radius:999px;background:linear-gradient(to right,var(--ink) 0,var(--ink) var(--volume-progress),var(--line-strong) var(--volume-progress),var(--line-strong) 100%)}.now-playing-volume input::-webkit-slider-thumb{width:20px;height:20px;margin-top:-7.5px;-webkit-appearance:none;border:3px solid var(--surface);border-radius:50%;background:var(--ink)}.now-playing-volume input::-moz-range-track{height:5px;border:0;border-radius:999px;background:var(--line-strong)}.now-playing-volume input::-moz-range-progress{height:5px;border-radius:999px;background:var(--ink)}.now-playing-volume input::-moz-range-thumb{width:16px;height:16px;border:3px solid var(--surface);border-radius:50%;background:var(--ink)}.now-playing-volume output{color:var(--quiet);font-size:11px;font-variant-numeric:tabular-nums;text-align:right}
html[data-theme="dark"] .now-playing-art{box-shadow:0 18px 45px rgba(0,0,0,.34)}

/* Give the focused player room to breathe in a regular desktop browser.
   Telegram and phone layouts stay compact and thumb-friendly. */
@media(min-width:561px){
  body:not(.telegram-mini-app) .now-playing-dialog{width:min(540px,calc(100% - 36px));padding:36px 42px 34px}
  body:not(.telegram-mini-app) .now-playing-art{width:min(42vw,350px);margin:10px auto 26px;border-radius:26px}
  body:not(.telegram-mini-app) .now-playing-heading h2{font-size:29px}
  body:not(.telegram-mini-app) .now-playing-timeline{margin-top:22px}
}

@media(max-width:560px){
  .now-playing-dialog{width:100%;max-width:none;max-height:min(92dvh,720px);margin:auto 0 0;padding:24px 20px calc(20px + env(safe-area-inset-bottom));overflow:auto;border-right:0;border-bottom:0;border-left:0;border-radius:28px 28px 0 0}.now-playing-art{flex:0 0 auto;width:min(70vw,280px);margin-top:14px;margin-bottom:26px;border-radius:22px}.now-playing-heading{margin-top:4px}.now-playing-heading>span{margin-bottom:9px}.now-playing-heading h2{font-size:24px}.now-playing-heading p{margin-top:8px}.now-playing-timeline{margin-top:24px}.now-playing-controls{margin-top:10px;margin-bottom:4px}.now-playing-volume-popover{width:min(214px,calc(100vw - 46px))}
}

/* Honest player feedback: play and pause never masquerade as buffering. */
.player-toggle .buffer-icon,.now-playing-toggle .buffer-icon{display:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.audio-player.is-buffering .player-toggle .play-icon,.audio-player.is-buffering .player-toggle .pause-icon,.now-playing-dialog.is-buffering .now-playing-toggle .play-icon,.now-playing-dialog.is-buffering .now-playing-toggle .pause-icon{display:none}
.audio-player.is-buffering .player-toggle .buffer-icon,.now-playing-dialog.is-buffering .now-playing-toggle .buffer-icon{display:block;animation:player-spin .75s linear infinite}
.audio-player.is-buffering .player-toggle,.now-playing-dialog.is-buffering .now-playing-toggle{cursor:progress}
.now-playing-dialog.is-buffering .now-playing-heading>span{color:var(--ink)}
@keyframes player-spin{to{transform:rotate(360deg)}}

/* Lightweight loading feedback for the first authenticated paint. */
.history-skeleton{padding:2px 0}.history-skeleton i{display:block;height:68px;border-top:1px solid var(--line);background:linear-gradient(90deg,transparent 10%,var(--surface-muted) 38%,transparent 66%);background-size:220% 100%;animation:skeleton 2.2s ease-in-out infinite}.history-skeleton i:first-child{border-top:0}.playlist-loading{min-height:370px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;color:var(--quiet);font-size:11px}.playlist-loading svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;animation:player-spin .8s linear infinite}.playlist-loading strong{font-size:11px;font-weight:650}.playlists-heading>button[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
@media(prefers-reduced-motion:reduce){.history-skeleton i,.playlist-loading svg{animation:none}}

/* The mobile website player matches the Mini App: two rows, and the speaker
   in the top row opens the same vertical rail instead of a third slider row. */
@media(max-width:820px){
  body:not(.telegram-mini-app) .player-inner{min-height:0;grid-template-columns:48px 44px minmax(0,1fr) 44px 44px;grid-template-rows:44px 54px;grid-template-areas:"cover copy copy volume close" "toggle timeline timeline timeline timeline";row-gap:8px}
  body:not(.telegram-mini-app) .player-volume{position:relative;grid-area:volume;display:block;width:40px;height:40px}
  body:not(.telegram-mini-app) .player-volume button{width:40px;height:40px}
  body:not(.telegram-mini-app).has-player .app-shell{padding-bottom:calc(134px + env(safe-area-inset-bottom))}
  body:not(.telegram-mini-app).has-player .app-nav{bottom:138px}
}

body.telegram-mini-app .player-inner{min-height:106px;grid-template-columns:42px 42px minmax(0,1fr) 44px 44px;grid-template-rows:44px 56px;grid-template-areas:"toggle cover copy volume close" "timeline timeline timeline timeline timeline";row-gap:4px}
body.telegram-mini-app .player-volume{position:relative;grid-area:volume;display:block;width:40px;height:40px}
body.telegram-mini-app.has-player .app-shell{padding-bottom:calc(178px + env(safe-area-inset-bottom))}
body.telegram-mini-app.has-player .workspace{padding-bottom:calc(198px + env(safe-area-inset-bottom))}
body.telegram-mini-app.has-player .toast{bottom:calc(198px + env(safe-area-inset-bottom))}

/* Calmer motion on small and power-saving devices. */
.audio-player.is-buffering .player-toggle .buffer-icon,.now-playing-dialog.is-buffering .now-playing-toggle .buffer-icon{animation-duration:1.35s}
.playlist-loading svg{animation-duration:1.6s}
.player-volume input,.now-playing-volume input{touch-action:none}
@media(prefers-reduced-motion:reduce){
  .job-state-icon.loading svg,.job-progress.is-indeterminate i,.discovery-loading svg,
  .audio-player.is-buffering .player-toggle .buffer-icon,.now-playing-dialog.is-buffering .now-playing-toggle .buffer-icon,
  .recorder-visual.is-recording span,.search-skeleton i,.history-skeleton i,.playlist-loading svg{animation:none!important}
  .job-progress.is-indeterminate i{width:100%;opacity:.45;transform:none}
}

/* Quiet motion system: brief feedback, no decorative or layout animation. */
.telegram-login-button,.download-form button,.job-action,.result-download,.search-more,
.preference-icon,.language-toggle,.account-button,.account-menu a,.account-menu button,
.app-nav a,.app-nav button,.block-heading>button,.history-play,.player-toggle,.player-close,
.player-volume button,.quality-picker button,.upgrade-button,.dialog-close,.plan-option button,
.playlist-shuffle,.playlist-track-play,.playlist-track-actions button,.playlist-track-actions a,
.playlist-add-button,.entity-more-button,.track-discovery-button,.playlist-dialog-list button,
.action-sheet-item,.recommendation-row button,.dialog-quality button,.dialog-primary,
.delivery-option,.now-playing-controls button,.now-playing-volume button,.now-playing-tool,
.mini-nav button{
  transition:background-color var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-out),opacity var(--motion-fast) var(--ease-standard)
}
.search-result{
  transition:background-color var(--motion-fast) var(--ease-standard),opacity var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-out)
}
.download-form{
  transition:border-color var(--motion-fast) var(--ease-standard),box-shadow var(--motion-base) var(--ease-standard),transform var(--motion-base) var(--ease-out)
}
.search-results:not([hidden]),.active-job:not([hidden]){animation:surface-reveal var(--motion-base) var(--ease-out) both}
.account-menu:not([hidden]){transform-origin:top right;animation:menu-reveal var(--motion-base) var(--ease-out) both}
.audio-player:not([hidden]){animation:player-reveal var(--motion-slow) var(--ease-out) both}
dialog[open]{transform-origin:center bottom;animation:dialog-reveal var(--motion-slow) var(--ease-out) both}
dialog[open],.lyrics-text,.collection-track-list{overscroll-behavior:contain}
dialog[open]::backdrop{animation:backdrop-reveal var(--motion-base) var(--ease-standard) both}
.faq-list details[open] p{animation:detail-reveal var(--motion-base) var(--ease-out) both}
body.telegram-mini-app [data-mini-screen]:not([hidden]){animation:screen-reveal var(--motion-base) var(--ease-out) both}
body.telegram-mini-app .mini-nav svg{transition:transform var(--motion-base) var(--ease-out)}
body.telegram-mini-app .mini-nav button.active svg{transform:translateY(-1px) scale(1.04)}
.quality-picker button.active,.dialog-quality button.active{animation:choice-set var(--motion-base) var(--ease-out) both}

@media(hover:hover){
  .search-result:hover{transform:translateX(2px)}
  .action-sheet-item:hover,.playlist-dialog-list button:hover{transform:translateX(2px)}
  .plan-option button:hover,.job-action:hover,.result-download:hover{transform:translateY(-1px)}
  .player-toggle:hover,.history-play:hover,.playlist-track-play:hover,.now-playing-controls button:not(:disabled):hover,.now-playing-tool:hover{transform:scale(1.035)}
}

.telegram-login-button:active,.download-form button:active,.job-action:active,.result-download:active,
.preference-icon:active,.language-toggle:active,.account-button:active,.app-nav a:active,.app-nav button:active,
.history-play:active,.player-toggle:active,.player-close:active,.player-volume button:active,
.upgrade-button:active,.dialog-close:active,.playlist-shuffle:active,.playlist-track-play:active,
.playlist-add-button:active,.entity-more-button:active,.track-discovery-button:active,
.action-sheet-item:active,.recommendation-row button:active,.dialog-primary:active,.delivery-option:active,
.now-playing-controls button:not(:disabled):active,.now-playing-volume button:active,.now-playing-tool:active,
.mini-nav button:active{transform:scale(.97)}

@keyframes surface-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes menu-reveal{from{opacity:0;transform:translateY(-5px) scale(.985)}to{opacity:1;transform:none}}
@keyframes player-reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes dialog-reveal{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes backdrop-reveal{from{opacity:0}to{opacity:1}}
@keyframes detail-reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes screen-reveal{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes choice-set{from{transform:scale(.98)}to{transform:none}}

@media(max-width:560px){
  .action-sheet[open],.now-playing-dialog[open]{animation-name:sheet-reveal}
  @keyframes sheet-reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}

@media(prefers-reduced-motion:reduce){
  .quality-picker button.active,.dialog-quality button.active{animation:none!important}
  body.telegram-mini-app .mini-nav button.active svg,.search-result:hover,.action-sheet-item:hover,
  .playlist-dialog-list button:hover,.now-playing-tool:hover{transform:none!important}
}

/* ------------------------------------------------- player hybrid additions */

/* iOS ignores writes to `audio.volume`; only that platform loses the control.
   Android and desktop keep the same compact popover. */
body.no-volume-control .player-volume,
body.no-volume-control .now-playing-volume{display:none}
/* Volume and "..." are pinned to the top-left corner (absolute), the bottom
   row is gone: shuffle/repeat sit in the transport row, so there is nothing
   left to recenter when volume is hidden on iOS. */
/* Only the desktop grid needs its columns restated when the volume block
   leaves the flow. Below 821px the bar is laid out by grid-template-areas,
   and this rule outranked that media query, forcing 562px of columns into
   a 296px bar and pushing the close button off screen. */
@media (min-width:821px){
  body.no-volume-control .player-inner{grid-template-columns:42px 46px minmax(150px,280px) minmax(240px,1fr) 44px}
}

/* The first row is transport only. Persistent modes live together in the
   quieter second row, so previous/next never move when a mode changes. */
.now-playing-controls{display:flex;grid-template-columns:none;justify-content:center;align-items:center;gap:10px}
.now-playing-controls .now-playing-mode{position:relative}
.now-playing-controls .now-playing-mode svg{fill:none;stroke:currentColor}
.now-playing-mode.is-active{background:var(--surface-muted);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.now-playing-mode.is-active:hover{background:var(--surface-muted)}
.now-playing-mode .repeat-one{position:absolute;right:6px;bottom:5px;font-size:9px;font-weight:750;line-height:1;opacity:0}
.now-playing-mode.is-one .repeat-one{opacity:1}

/* Buffered range sits behind the played part of the scrubber, so a stalled
   network is visible instead of looking like a frozen player. */
#player-seek,#now-playing-seek{--buffered:0%}
#player-seek::-webkit-slider-runnable-track,
#now-playing-seek::-webkit-slider-runnable-track{
  background:linear-gradient(to right,
    var(--ink) 0,var(--ink) var(--seek-progress),
    var(--line-strong) var(--seek-progress),var(--line-strong) var(--buffered),
    var(--line) var(--buffered),var(--line) 100%)}

/* What plays next, so the queue is inspectable instead of implicit. */
.now-playing-queue{width:100%;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.now-playing-queue .queue-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.now-playing-queue .queue-head strong{color:var(--quiet);font-size:10px;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.now-playing-queue .queue-list{display:flex;flex-direction:column;max-height:216px;overflow:auto}
.now-playing-queue .queue-item{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:10px;min-height:48px;padding:4px 6px;border:0;border-radius:9px;background:transparent;color:inherit;cursor:pointer;text-align:left}
.now-playing-queue .queue-item:hover{background:var(--surface-muted)}
.now-playing-queue .queue-cover{width:34px;height:34px;border-radius:7px;background:var(--surface-muted) center/cover}
.now-playing-queue .queue-copy{min-width:0;display:flex;flex-direction:column}
.now-playing-queue .queue-copy strong,.now-playing-queue .queue-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.now-playing-queue .queue-copy strong{font-size:11px}
.now-playing-queue .queue-copy span{color:var(--quiet);font-size:10px}


@media (max-width:560px){
  .now-playing-controls{gap:8px}
  .now-playing-controls button{width:54px;height:54px}
  .now-playing-controls .now-playing-toggle{width:70px;height:70px}
  .now-playing-controls .now-playing-mode{width:44px;height:44px}
}
@media (max-width:360px){
  .now-playing-controls{gap:6px}
  .now-playing-controls button{width:50px;height:50px}
  .now-playing-controls .now-playing-toggle{width:66px;height:66px}
}

/* ==========================================================================
   Premium layer
   Depth, feedback and continuity on top of the existing system. Everything
   here animates transform or opacity only, so it stays cheap on a phone, and
   the existing prefers-reduced-motion rules already neutralise it.
   ========================================================================== */

:root{
  /* Layered elevation: a tight contact shadow reads as weight, a wide ambient
     one as distance. A single blur cannot express both, which is why flat
     surfaces look like paper cut-outs. */
  --elev-1:0 1px 2px rgba(24,24,22,.06), 0 2px 8px rgba(24,24,22,.05);
  --elev-2:0 2px 4px rgba(24,24,22,.07), 0 8px 24px rgba(24,24,22,.07);
  --elev-3:0 4px 8px rgba(24,24,22,.08), 0 18px 50px rgba(24,24,22,.10);
  --elev-4:0 8px 16px rgba(20,20,18,.12), 0 32px 80px rgba(20,20,18,.18);

  /* Artwork placeholders read as a material rather than a grey hole. */
  --art-fill:linear-gradient(145deg,#ececea 0%,#e2e2de 55%,#dcdcd7 100%);

  --ease-emphasis:cubic-bezier(.2,.9,.24,1);
  --press:.97;
}

html[data-theme="dark"]{
  --elev-1:0 1px 2px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.28);
  --elev-2:0 2px 4px rgba(0,0,0,.38), 0 8px 24px rgba(0,0,0,.34);
  --elev-3:0 4px 8px rgba(0,0,0,.42), 0 18px 50px rgba(0,0,0,.40);
  --elev-4:0 8px 16px rgba(0,0,0,.5), 0 32px 80px rgba(0,0,0,.55);
  --art-fill:linear-gradient(145deg,#2f2f34 0%,#27272b 55%,#212125 100%);
}

/* -------------------------------------------------------------- surfaces -- */
.auth-panel,.search-results,.active-job{box-shadow:var(--elev-2)}
.account-menu,.action-sheet{box-shadow:var(--elev-3)}
.pro-dialog,.now-playing-dialog,.faq-dialog{box-shadow:var(--elev-4)}
.download-form{box-shadow:var(--elev-1);transition:box-shadow var(--motion-base) var(--ease-out),border-color var(--motion-fast) var(--ease-out)}
.download-form:focus-within{box-shadow:var(--elev-2)}

/* Artwork placeholders across every surface. */
.track-cover,.player-cover,.history-icon,.now-playing-art,.queue-cover,
.playlist-track-cover,.job-state-icon{background-image:var(--art-fill)}

/* --------------------------------------------------------- interaction --- */
/* A control that moves under the finger feels connected to it. Transform only,
   so nothing around it reflows. */
.player-toggle,.now-playing-toggle,.history-play,.playlist-track-play,
.download-form button,.job-action,.upgrade-button,.result-download,
.now-playing-tool,.card-action,.telegram-login-button{
  transition:transform var(--motion-fast) var(--ease-out),
             box-shadow var(--motion-base) var(--ease-out),
             background-color var(--motion-fast) var(--ease-out);
}
.player-toggle:active,.now-playing-toggle:active,.history-play:active,
.playlist-track-play:active,.download-form button:active,.job-action:active,
.upgrade-button:active,.result-download:active,.now-playing-tool:active,
.card-action:active,.telegram-login-button:active{transform:scale(var(--press))}

.player-toggle,.now-playing-toggle{box-shadow:var(--elev-2)}
.player-toggle:hover,.now-playing-toggle:hover{box-shadow:var(--elev-3)}

/* Rows lift instead of only tinting, which separates them from the page. */
.search-result,.history-item,.playlist-card,.playlist-track,.queue-item{
  transition:background-color var(--motion-fast) var(--ease-out),
             transform var(--motion-fast) var(--ease-out);
}
.playlist-card:hover{transform:translateY(-2px);box-shadow:var(--elev-2)}

/* One focus treatment everywhere, visible on both themes. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ------------------------------------------------------------- artwork --- */
/* Cover art crossfades instead of snapping when the track changes. The
   outgoing image lives in a pseudo-element so no second node is needed. */
.player-cover,.now-playing-art{position:relative;isolation:isolate}
.player-cover::after,.now-playing-art::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--previous-art) center/cover no-repeat;
  opacity:0;pointer-events:none;
}
.player-cover.is-swapping::after,.now-playing-art.is-swapping::after{
  opacity:1;animation:art-crossfade var(--motion-slow) var(--ease-out) forwards;
}
@keyframes art-crossfade{to{opacity:0}}

/* --------------------------------------------------- now-playing signal -- */
/* Three bars beat while a row is the one playing: the cheapest way to make a
   list feel alive, and it says which row is current without colour alone. */
.now-playing-bars{
  display:inline-flex;align-items:flex-end;gap:2px;height:12px;
  vertical-align:middle;
}
.now-playing-bars i{
  width:2px;height:100%;border-radius:1px;background:currentColor;
  transform-origin:bottom;animation:equalise 1.1s var(--ease-standard) infinite;
}
.now-playing-bars i:nth-child(2){animation-delay:.18s}
.now-playing-bars i:nth-child(3){animation-delay:.36s}
@keyframes equalise{
  0%,100%{transform:scaleY(.35)}
  50%{transform:scaleY(1)}
}
@media (prefers-reduced-motion:reduce){
  .now-playing-bars i{animation:none;transform:scaleY(.7)}
}

/* ------------------------------------------------------------ entrance --- */
/* Newly rendered rows settle in rather than appearing at once. The stagger is
   capped so a long list never delays its own tail. */
@media (prefers-reduced-motion:no-preference){
  .history-item,.search-result,.queue-item,.playlist-card{
    /* backwards, not both: a finished entrance must not keep holding
       `transform`, or it overrides the inline transforms Sortable animates
       rows with, and dragged neighbours jumped instead of sliding. */
    animation:row-settle var(--motion-base) var(--ease-out) backwards;
    animation-delay:calc(var(--row-index,0) * 22ms);
  }
}
@keyframes row-settle{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

/* -------------------------------------------------------------- player --- */
/* The scrubber thumb stays out of the way until the bar is worth touching. */
.player-timeline input::-webkit-slider-thumb,
#now-playing-seek::-webkit-slider-thumb{
  transition:transform var(--motion-fast) var(--ease-out);
}
.player-timeline:hover input::-webkit-slider-thumb,
#now-playing-seek:hover::-webkit-slider-thumb{transform:scale(1.15)}

/* Progress advances smoothly between the timeupdate ticks that drive it. */
@media (prefers-reduced-motion:no-preference){
  #player-seek,#now-playing-seek{transition:--seek-progress var(--motion-fast) linear}
}

/* ------------------------------------------------------------ telegram --- */
/* Inside Telegram the app should feel like a screen stack, not a web page. */
/* Track card stays a bottom sheet with scroll as fallback: fixed height +
   overflow:hidden cut the bottom of the card. Volume and "..." are pinned
   to the top-left corner, shuffle/repeat sit in the transport row. */
body.telegram-mini-app .now-playing-dialog{
  width:100%;max-width:430px;margin:auto 0 0;max-height:calc(var(--mini-viewport-height,100dvh) - 8px);overflow:auto;
  padding-top:20px;padding-bottom:calc(12px + env(safe-area-inset-bottom));
  border:0;border-bottom:0;border-radius:24px 24px 0 0;
  animation:sheet-rise var(--motion-base) var(--ease-emphasis) both;
}
body.telegram-mini-app .now-playing-art{
  width:min(68vw,260px);margin-top:10px;margin-bottom:22px;
}
body.telegram-mini-app .now-playing-heading,
body.telegram-mini-app .now-playing-timeline,
body.telegram-mini-app .now-playing-controls{flex:0 0 auto}
body.telegram-mini-app .now-playing-heading>span{margin-bottom:8px}
body.telegram-mini-app .now-playing-heading h2{font-size:22px}
body.telegram-mini-app .now-playing-heading p{margin-top:7px}
body.telegram-mini-app .now-playing-timeline{margin-top:20px}
body.telegram-mini-app .now-playing-timeline input{height:34px}
body.telegram-mini-app .now-playing-controls{margin-top:6px;margin-bottom:4px}
body.telegram-mini-app .now-playing-controls button{width:56px;height:56px}
body.telegram-mini-app .now-playing-controls .now-playing-toggle{width:70px;height:70px}

@media(max-height:600px){
  body.telegram-mini-app .now-playing-art{width:min(64vw,200px);margin-bottom:8px}
  body.telegram-mini-app .now-playing-heading>span{margin-bottom:2px}
  body.telegram-mini-app .now-playing-timeline{margin-top:6px}
}

/* One volume control on the website and in the Mini App: a tall rail that
   opens above the player's speaker and below the card's, leaves the artwork
   untouched and still gives a generous touch target. */
.player-volume-popover,
.now-playing-volume-popover{
  width:56px;height:174px;display:block;padding:0;
}
.player-volume-popover{right:-6px;bottom:calc(100% + 7px)}
.now-playing-volume-popover{left:-10px;top:100%;bottom:auto}
/* No outlines on the rail: plain dot thumb, no focus frame. */
.now-playing-volume-popover input::-webkit-slider-thumb{border:0}
.now-playing-volume-popover input::-moz-range-thumb{border:0}
.now-playing-volume-popover input:focus-visible{outline:none}
.player-volume-popover input,
.now-playing-volume-popover input{
  position:absolute;top:72px;left:50%;display:block;width:122px;height:34px;margin:0;
  transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center;
}
.player-volume-popover output,
.now-playing-volume-popover output{
  position:absolute;right:0;bottom:11px;left:0;text-align:center;
}
@keyframes sheet-rise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}
body.telegram-mini-app .mini-nav button{
  transition:transform var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out);
}
body.telegram-mini-app .mini-nav button:active{transform:scale(.94)}

/* ------------------------------------------------- label containment ----
   A `white-space:nowrap` label inside a flex control has a min-content width
   equal to the whole string, so it refuses to shrink and pushes past its own
   button. Translations differ in length, so whichever language is longer
   spills. Letting the label shrink and ellipsise keeps every control intact
   without hard-coding widths per language. */
.job-action,.delivery-button,#recognize-button,
.card-action,.result-download,.action-sheet-item,.upgrade-button,
.plan-option button,.playlist-detail-menu button{min-width:0}

.job-action,.delivery-button,#recognize-button,.upgrade-button{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.delivery-button>span,#recognize-button>span,
.card-action>span,.result-download>span,.action-sheet-item>span,
.plan-option button>span{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Icons keep their size; only the text gives way. */
.delivery-button>svg,#recognize-button>svg,.now-playing-tool>svg,
.card-action>svg,.result-download>svg{flex:0 0 auto}

/* The caption under the avatar is the widest child of its column, so it —
   not the avatar — decided the header control's width, and a longer
   translation pushed the text past the button. `width:0` takes the caption
   out of the intrinsic width calculation while `min-width:100%` still renders
   it across whatever the avatar sets, so it truncates instead of widening. */
/* The caption names what the control opens, so it has to stay readable. The
   header has room for it; the cap only stops a pathological translation from
   stretching the bar, and the ellipsis is the safety net rather than the plan.
   (An earlier version pinned the caption to the avatar's width, which quietly
   truncated "Настройки" to "Наст…".) */
.account-avatar{min-width:0}
.account-avatar>small{
  max-width:96px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;
}
.account-button{min-width:0}

/* --------------------------------------------------- responsive labels ---
   Narrow screens get the short form of a long action. Only one variant is in
   the layout at a time, so nothing has to shrink or truncate. Both are hidden
   from assistive technology; the button's aria-label carries the full text at
   every width. */
.label-narrow{display:none}
@media (max-width:560px){
  .label-wide{display:none}
  .label-narrow{display:inline}
}

/* A lone action in the job row (the PRO prompt) is a third child of a
   two-column grid, so it wraps into the narrow first column and its label no
   longer fits. `.job-actions` already spans the row at this width; a bare
   button needs the same treatment. */
@media (max-width:560px){
  .job-row>.job-action{grid-column:1/-1;width:100%;margin-top:5px}
}

/* ------------------------------------------------- download indicator ----
   The job panel sits far below the fold, so a download started from the
   search list produced no visible change. This pill stays in view wherever
   the page is scrolled, mirrors the panel's state, and leads back to it. */
.job-pill{
  position:fixed;z-index:95;
  right:24px;bottom:24px;
  max-width:min(320px,calc(100% - 32px));
  display:grid;grid-template-columns:32px minmax(0,1fr) 16px;
  align-items:center;gap:11px;
  padding:10px 12px;
  border:1px solid var(--line);border-radius:14px;
  background:var(--surface);color:var(--ink);
  box-shadow:var(--elev-3);
  text-align:left;cursor:pointer;
  animation:pill-in var(--motion-base) var(--ease-out) both;
}
.job-pill:hover{background:var(--surface-muted)}

@keyframes pill-in{
  from{opacity:0;transform:translateY(10px) scale(.97)}
  to{opacity:1;transform:none}
}

.job-pill-copy{min-width:0;display:flex;flex-direction:column;gap:1px}
.job-pill-copy strong,.job-pill-copy span{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.job-pill-copy strong{font-size:12px}
.job-pill-copy span{color:var(--quiet);font-size:10px}

.job-pill-go{width:16px;height:16px;fill:none;stroke:var(--quiet);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* A ring rather than a bar: it reads at this size and doubles as a spinner
   while the job has no measurable progress yet. */
.job-pill-ring{
  position:relative;width:32px;height:32px;flex:0 0 auto;
  display:grid;place-items:center;border-radius:50%;
  background:conic-gradient(var(--ink) var(--progress,0%),var(--line) 0);
}
.job-pill-ring::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--surface);
}
.job-pill-ring i{
  position:relative;z-index:1;width:9px;height:9px;border-radius:2px;background:var(--ink);
}

/* Indeterminate: the ring sweeps until real progress arrives. */
.job-pill.is-running:not(.is-measured) .job-pill-ring{
  background:conic-gradient(var(--ink) 0 25%,var(--line) 25% 100%);
  animation:pill-spin 1.1s linear infinite;
}
.job-pill.is-measured .job-pill-ring{transition:background var(--motion-base) linear}
@keyframes pill-spin{to{transform:rotate(360deg)}}

.job-pill.is-ready .job-pill-ring{background:var(--success)}
.job-pill.is-ready .job-pill-ring i{background:var(--success)}
.job-pill.is-error .job-pill-ring{background:var(--danger)}
.job-pill.is-error .job-pill-ring i{background:var(--danger)}

/* Sit above the player bar when one is open, and above the toast slot. */
.has-player .job-pill{bottom:calc(102px + env(safe-area-inset-bottom))}
.has-player .toast{bottom:calc(170px + env(safe-area-inset-bottom))}
body:has(.job-pill:not([hidden])) .toast{bottom:calc(94px + env(safe-area-inset-bottom))}

@media (max-width:560px){
  .job-pill{right:12px;left:12px;bottom:16px;max-width:none}
  .has-player .job-pill{bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* In the Mini App the bottom tab bar owns the lower edge. */
body.telegram-mini-app .job-pill{bottom:calc(76px + env(safe-area-inset-bottom))}
/* Above the three-row player (its top edge sits 230px up), not on top of it. */
body.telegram-mini-app.has-player .job-pill{bottom:calc(240px + env(safe-area-inset-bottom))}

@media (prefers-reduced-motion:reduce){
  .job-pill.is-running:not(.is-measured) .job-pill-ring{animation:none}
}

/* ------------------------------------------------------- touch targets ----
   On touch screens every control gets at least a 44px target (Apple HIG,
   WCAG 2.5.5). Icon buttons keep their drawn size and grow an invisible hit
   area instead, so rows do not reflow; text controls simply get taller.
   The footer links were 15px tall, below even the 24px WCAG AA floor. */
@media (pointer:coarse){
  /* Padding widens short labels ("FAQ"); the negative margin keeps the text
     where it was, so neighbouring targets meet instead of overlapping. */
  .app-footer a,.app-footer button{display:inline-flex;align-items:center;min-height:44px;padding-inline:10px;margin-inline:-10px}
  .app-footer div{flex-wrap:wrap;column-gap:20px;row-gap:0}
  .quality-picker button,.upgrade-button,.playlist-shuffle{min-height:44px}
  .history-copy{align-self:stretch;justify-content:center}

  .block-heading>button,.app-nav a,.app-nav button,.playlist-add-button,.history-play,
  .playlist-track-play,.playlist-track-actions button,.playlist-track-actions a,
  .recommendation-row button,.playlist-detail-menu button,
  .now-playing-dialog .now-playing-volume>button{position:relative}

  .block-heading>button::after,.app-nav a::after,.app-nav button::after,.history-play::after,
  .dialog-close::after,
  .playlist-add-button::after,.playlist-track-play::after,
  .playlist-track-actions button::after,.playlist-track-actions a::after,
  .recommendation-row button::after,.playlist-detail-menu button::after,
  .now-playing-dialog .now-playing-volume>button::after,.now-playing-dialog .now-playing-more::after{
    content:"";position:absolute;top:50%;left:50%;
    width:max(100%,44px);height:max(100%,44px);
    transform:translate(-50%,-50%);
  }
}

/* --------------------------------------------------- Mini App settings ----
   In the Mini App the Settings tab is the single home for preferences. The
   header avatar stays as the identity cue and opens that tab (see app.js);
   its caption and dropdown chevron would duplicate the tab, so they go. On
   the website the header menu remains the entry point. */
.profile-preferences{display:none}
body.telegram-mini-app .account-avatar>small,
body.telegram-mini-app .account-chevron{display:none}
body.telegram-mini-app .profile-preferences{
  display:flex;flex-direction:column;margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
}
.profile-preferences h3{margin:0 0 4px;color:var(--quiet);font-size:10px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.profile-preferences button,.profile-preferences a{
  width:100%;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 2px;border:0;border-bottom:1px solid var(--line);border-radius:0;
  background:transparent;color:var(--ink);font:inherit;font-size:14px;text-align:left;text-decoration:none;cursor:pointer;
}
.profile-preferences>:last-child{border-bottom:0}
.profile-preferences button>strong{color:var(--quiet);font-size:11px;letter-spacing:.05em}
.profile-preferences .ui-icon{width:16px;height:16px;fill:none;stroke:var(--quiet);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.profile-preferences button:active,.profile-preferences a:active{background:var(--surface-muted)}
.profile-preferences [data-home-screen] .home-screen-done,
.profile-preferences [data-home-screen].is-added .home-screen-add{display:none}
.profile-preferences [data-home-screen].is-added .home-screen-done{display:block;stroke:var(--accent,currentColor)}
.profile-preferences [data-home-screen].is-added{color:var(--quiet);cursor:default}
.profile-preferences [data-home-screen].is-added:active{background:transparent}

/* ------------------------------------------------ mobile website layers ----
   Below 820px the website's tab bar floats at the lower edge (12px offset,
   42px tall) and rises to 182px when the player is open. The download pill
   and toasts used to sit on top of it, hiding the navigation. They now stack
   above it: bar, then pill, then toast. */
@media (max-width:820px){
  body:not(.telegram-mini-app) .job-pill{bottom:calc(64px + env(safe-area-inset-bottom))}
  body:not(.telegram-mini-app).has-player .job-pill{bottom:calc(234px + env(safe-area-inset-bottom))}
  body:not(.telegram-mini-app) .toast{bottom:calc(64px + env(safe-area-inset-bottom))}
  body:not(.telegram-mini-app).has-player .toast{bottom:calc(234px + env(safe-area-inset-bottom))}
  body:not(.telegram-mini-app):has(.job-pill:not([hidden])) .toast{bottom:calc(128px + env(safe-area-inset-bottom))}
  body:not(.telegram-mini-app).has-player:has(.job-pill:not([hidden])) .toast{bottom:calc(298px + env(safe-area-inset-bottom))}
}

/* ------------------------------------------------------ history covers ----
   A row with artwork shows it under the play glyph, as search results do.
   The image is an inline background (CSP-safe CSSOM), so these rules only
   size it and keep the glyph legible on light and dark artwork alike. */
.history-play.has-cover,.history-icon.has-cover{
  position:relative;border-radius:8px;color:#fff;
  background-color:var(--surface-muted);background-position:center;background-size:cover;background-repeat:no-repeat;
}
.history-play.has-cover::before{
  content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(12,12,14,.34);
  transition:background-color var(--motion-fast) var(--ease-standard);
}
.history-play.has-cover:hover::before,.history-play.has-cover.is-playing::before{background:rgba(12,12,14,.52)}
.history-play.has-cover svg{position:relative;z-index:1}
.history-icon.has-cover svg{display:none}
html[data-theme="dark"] .history-play.has-cover{color:#fff}

/* ------------------------------------------ touch players without volume ----
   Phones and the Telegram Mini App cannot set media volume from a page, so the
   volume control is hidden there (body.no-volume-control). The player grid
   still reserved its row, leaving ~43px of empty panel under the timeline.
   Collapse it, and bring down everything stacked above the player by the same
   amount. Offsets are measured from the lower edge of the viewport. */

/* Mini App: tab bar 64px + two-row player ~125px, so the player top is at
   ~189px. The timeline row is sized to its content: slider plus times. */
body.telegram-mini-app.no-volume-control .player-inner{
  min-height:0;grid-template-columns:42px 42px minmax(0,1fr) 44px;grid-template-rows:44px auto;
  grid-template-areas:"toggle cover copy close" "timeline timeline timeline timeline";
}
body.telegram-mini-app.no-volume-control.has-player .app-shell{padding-bottom:calc(190px + env(safe-area-inset-bottom))}
body.telegram-mini-app.no-volume-control.has-player .workspace{padding-bottom:calc(210px + env(safe-area-inset-bottom))}
body.telegram-mini-app.no-volume-control.has-player .job-pill,
body.telegram-mini-app.no-volume-control.has-player .toast{bottom:calc(200px + env(safe-area-inset-bottom))}

/* Mobile website: two-row player ~127px, the floating tab bar right above it. */
@media (max-width:820px){
  body.no-volume-control:not(.telegram-mini-app) .player-inner{
    min-height:0;grid-template-rows:44px 54px;row-gap:8px;
    grid-template-areas:"cover copy copy close" "toggle timeline timeline timeline";
  }
  body.no-volume-control:not(.telegram-mini-app).has-player .app-shell{padding-bottom:calc(134px + env(safe-area-inset-bottom))}
  body.no-volume-control:not(.telegram-mini-app).has-player .app-nav{bottom:138px}
  body.no-volume-control:not(.telegram-mini-app).has-player .job-pill,
  body.no-volume-control:not(.telegram-mini-app).has-player .toast{bottom:calc(190px + env(safe-area-inset-bottom))}
}

/* A toast raised while the download pill is showing goes above the pill. */
body.telegram-mini-app:has(.job-pill:not([hidden])) .toast{bottom:calc(140px + env(safe-area-inset-bottom))}
body.telegram-mini-app.has-player:has(.job-pill:not([hidden])) .toast{bottom:calc(304px + env(safe-area-inset-bottom))}
body.no-volume-control.has-player:has(.job-pill:not([hidden])) .toast{bottom:calc(254px + env(safe-area-inset-bottom))}
body.telegram-mini-app.no-volume-control.has-player:has(.job-pill:not([hidden])) .toast{bottom:calc(264px + env(safe-area-inset-bottom))}

/* --------------------------------------------------------- close buttons ----
   One quiet control for every sheet and dialog: a small tinted circle, drawn
   at 32px everywhere (touch screens still get a 44px hit area). The previous
   44px grey square read as a heavier element than the content it closes, and
   the now-playing card and the mini player each had a style of their own. */
.dialog-close{width:32px;height:32px;border-radius:50%;background:rgba(20,20,18,.06);color:var(--muted)}
.dialog-close:hover{background:rgba(20,20,18,.1);color:var(--ink)}
.dialog-close .ui-icon,.dialog-close svg{width:16px;height:16px;stroke-width:2}
.now-playing-close{background:rgba(20,20,18,.06);backdrop-filter:none}
.player-close svg{width:16px;height:16px;stroke-width:2}
html[data-theme="dark"] .dialog-close,html[data-theme="dark"] .now-playing-close{background:rgba(255,255,255,.08);color:#b6b6bb}
html[data-theme="dark"] .dialog-close:hover{background:rgba(255,255,255,.14);color:#fff}

/* A finished download opens its actions from the title, like a history row. */
button.job-copy{padding:0;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
button.job-copy:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.job-row.is-actionable .job-state-icon{cursor:pointer}

/* --------------------------------------------------- Mini App: calm home ----
   The search field is the point of the first screen. The lead line repeated
   the placeholder, and the submit button's word took a third of the width,
   so the lead goes and the button keeps only its arrow (it is labelled for
   assistive tech by aria-label). Nothing else about the layout changes. */
body.telegram-mini-app .section-heading>p:last-child{display:none}
body.telegram-mini-app .section-heading h1{margin-bottom:0}
body.telegram-mini-app .download-form #submit-button{width:44px;padding:0;justify-content:center}
body.telegram-mini-app .download-form #submit-button span{display:none}

/* -------------------------------------------------------- keyboard open ----
   Touch screens only (app.js sets .keyboard-open while a text field has
   focus): the bottom chrome steps aside so the field and its results use
   the whole height left above the on-screen keyboard. In the Mini App the
   heading goes too; it returns the moment the keyboard closes. The toast
   and the Done bar dock to the top edge of the keyboard via
   --keyboard-height (visualViewport), so the "paste a link" notice never
   hangs detached behind it. */
body.keyboard-open .mini-nav,
body.keyboard-open .audio-player,
body.keyboard-open .job-pill,
body.keyboard-open:not(.telegram-mini-app) .app-nav{display:none!important}
body.keyboard-open .app-shell,
body.keyboard-open .workspace{padding-bottom:16px!important}
body.telegram-mini-app.keyboard-open .section-heading{display:none}
.download-form{scroll-margin-top:12px;scroll-margin-bottom:calc(var(--keyboard-height,0px) + 76px)}
/* Dismissing the keyboard uses the native keys (Search/Go/Done return key,
   tap outside, Escape) — no floating bar. The toast still docks above the
   keyboard via --keyboard-height so the notice never hangs behind it. */
@media(pointer:coarse){
  /* Touch users get press feedback (scale) instead of a focus ring: dialogs
     move focus programmatically on open/close, which trips :focus-visible
     and leaves a blue outline stuck on buttons after every tap. */
  :focus-visible{outline:none!important}
  /* iOS Safari auto-zooms into any field under 16px, which also breaks
     visualViewport-based keyboard math. Touch fields stay at 16px. */
  .download-form input,.playlist-track-search input,.playlist-create-dialog input,.search-filters select{font-size:16px}
  .form-meta{flex-wrap:wrap;row-gap:8px;font-size:12px}
  .form-meta button{min-height:48px}
  .form-meta button .ui-icon{width:16px;height:16px}
  .form-meta .delivery-button .delivery-chevron{width:14px;height:14px}
  body.keyboard-open .toast{bottom:calc(var(--keyboard-height,0px) + 64px + env(safe-area-inset-bottom))}
}

/* An error explains what to do next, so it may take two lines instead of
   being cut off right before the advice ("…choose 320 kbps"). */
.active-job.job-error .job-copy span{
  white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
}

/* ==========================================================================
   Listening library: home feed, catalog pages, likes, editable queue.
   Carousels keep CSS scroll-snap and native phone momentum; desktop adds
   lightweight arrows and mouse dragging in app.js.
   ========================================================================== */

.discover-section{margin-top:88px}
.discover-section .block-heading{margin-bottom:18px}
.discover-body{display:flex;flex-direction:column;gap:30px}
.catalog-shelf{min-width:0}
.catalog-shelf-head{min-height:32px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:4px}
.catalog-shelf-head h3{min-width:0;margin:5px 0 0;font-size:15px;font-weight:720;letter-spacing:-.02em}
.carousel-controls{display:flex;align-items:center;gap:6px}
.carousel-controls[hidden]{display:none}
.carousel-arrow{width:30px;height:30px;display:grid;place-items:center;padding:0 0 2px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:500 23px/1 Onest,sans-serif;cursor:pointer;transition:background-color var(--motion-fast),border-color var(--motion-fast),opacity var(--motion-fast)}
.carousel-arrow:hover,.carousel-arrow:focus-visible{border-color:var(--line-strong);background:var(--surface-muted)}
.carousel-arrow:disabled{opacity:.28;cursor:default}
.discover-chart,.catalog-row{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.discover-chart::-webkit-scrollbar,.catalog-row::-webkit-scrollbar{display:none}
.discover-chart{display:grid;grid-auto-flow:column;grid-template-rows:repeat(4,auto);grid-auto-columns:minmax(270px,calc((100% - 24px) / 3));column-gap:12px;padding-block:8px 12px;margin-block:-8px -12px;scroll-snap-type:x mandatory}
.catalog-row{display:grid;grid-auto-flow:column;grid-auto-columns:148px;gap:14px;padding:8px 18px 14px 2px;margin-block:-8px -14px;scroll-snap-type:x proximity}
.catalog-row img,.discover-chart img,.radio-tabs img{-webkit-user-drag:none}
@media(hover:hover) and (pointer:fine){
  .catalog-row.is-scrollable,.discover-chart.is-scrollable,.radio-tabs{cursor:grab}
  .catalog-row.is-dragging,.discover-chart.is-dragging,.radio-tabs.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none;-webkit-user-select:none}
}

.catalog-track{min-width:0;min-height:60px;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px;border-radius:10px;scroll-snap-align:start}
.catalog-track.has-number{grid-template-columns:22px 44px minmax(0,1fr) auto}
@media(hover:hover){.catalog-track:hover{background:var(--surface-muted)}}
.catalog-track-number{color:var(--quiet);font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;text-align:center}
.catalog-track .catalog-track-cover{grid-row:auto;width:44px;height:44px;border-radius:8px}
@media(hover:hover){.catalog-track-cover button{opacity:0;transition:opacity var(--motion-fast) var(--ease-standard)}.catalog-track:hover .catalog-track-cover button,.catalog-track-cover button:focus-visible,.catalog-track-cover button.is-playing{opacity:1}}
.catalog-track-copy{min-width:0;display:flex;flex-direction:column;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.catalog-track-copy strong,.catalog-track-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.catalog-track-copy strong{font-size:13px;font-weight:650}
.catalog-track-copy span{margin-top:1px;color:var(--quiet);font-size:11px}
.catalog-track-meta{display:flex;align-items:center;gap:2px}
.catalog-track-meta>span:not(.now-playing-bars){min-width:32px;color:var(--quiet);font-size:10px;font-variant-numeric:tabular-nums;text-align:right}

.catalog-card{min-width:0;display:flex;flex-direction:column;gap:2px;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;scroll-snap-align:start}
.catalog-card-art{width:100%;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;margin-bottom:7px;border-radius:12px;background:var(--art-fill);color:var(--quiet);box-shadow:var(--elev-1);transition:transform var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-standard)}
.catalog-card-art img{width:100%;height:100%;object-fit:cover}
.catalog-card-art svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.catalog-card strong,.catalog-card>span{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.catalog-card strong{font-size:13px;font-weight:650}
.catalog-card>span{color:var(--quiet);font-size:11px}
.catalog-card.is-round{align-items:center;text-align:center}
.catalog-card.is-round .catalog-card-art{border-radius:50%}
@media(hover:hover){.catalog-card:hover .catalog-card-art{transform:translateY(-2px);box-shadow:var(--elev-2)}}
.catalog-card:active .catalog-card-art{transform:scale(var(--press))}

.catalog-dialog{width:min(660px,calc(100% - 28px));padding:0;background-color:var(--surface)}
.catalog-dialog.has-accent,.now-playing-dialog.has-accent{background-image:linear-gradient(180deg,rgb(var(--cover-rgb) / .32) 0,rgb(var(--cover-rgb) / .1) 260px,transparent 460px)}
.catalog-dialog [data-close-catalog]{z-index:3}
.catalog-back{position:absolute;z-index:3;left:18px;top:18px;width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:#efefec;color:#6b6b70;cursor:pointer}
.catalog-back .ui-icon{width:17px;height:17px}
.catalog-hero{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:end;gap:22px;padding:64px 32px 20px}
.catalog-cover{width:150px;height:150px;display:grid;place-items:center;overflow:hidden;border-radius:14px;background:var(--art-fill);background-position:center;background-size:cover;color:var(--quiet);box-shadow:var(--elev-3)}
.catalog-cover svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.catalog-dialog.is-artist .catalog-cover{border-radius:50%}
.catalog-heading{min-width:0}
.catalog-heading h2{margin:6px 0;font-size:32px;line-height:1.08;letter-spacing:-.04em;overflow-wrap:anywhere}
.catalog-context{color:var(--muted);font-size:12px}
.catalog-artist-link{padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.catalog-artist-link:hover{color:var(--ink)}
.catalog-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 32px 14px}
.catalog-actions:empty{display:none}
.catalog-action{height:40px;display:inline-flex;align-items:center;gap:7px;padding:0 15px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--ink);font-size:12px;font-weight:700;cursor:pointer}
.catalog-action:hover{background:var(--surface-muted)}
.catalog-action.is-primary{border-color:var(--ink);background:var(--ink);color:var(--surface)}
.catalog-action.is-primary:hover{background:var(--ink);opacity:.9}
.catalog-action svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.catalog-action svg.play-icon{fill:currentColor;stroke:none}
.catalog-action:active{transform:scale(var(--press))}
.catalog-content{display:flex;flex-direction:column;gap:26px;padding:4px 24px 30px}
.catalog-content .catalog-shelf-head{padding:0 6px}
.catalog-tracks{display:flex;flex-direction:column}

.now-playing-dialog{background-color:var(--surface)}
.now-playing-dialog .now-playing-like{position:absolute;top:58px;right:14px;z-index:3;width:36px;height:36px;border-radius:50%;background:rgba(20,20,18,.06);color:var(--muted)}
.now-playing-dialog .now-playing-like:hover{background:rgba(20,20,18,.1);color:var(--ink)}
.now-playing-like svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.now-playing-dialog .now-playing-like.is-liked{color:#e0245e}
.now-playing-like.is-liked svg{fill:currentColor}
.now-playing-heading p.is-link{cursor:pointer}
.now-playing-heading p.is-link:hover,.now-playing-heading p.is-link:focus-visible{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.queue-toggle{width:100%;display:flex;align-items:center;gap:8px;padding:4px 2px;border:0;background:transparent;color:var(--quiet);font:inherit;cursor:pointer}
.queue-toggle strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.queue-toggle small{min-width:20px;padding:1px 6px;border-radius:9px;background:var(--surface-muted);color:var(--muted);font-size:10px;font-weight:700;text-align:center}
.queue-toggle small:empty{display:none}
.queue-toggle svg{width:16px;height:16px;margin-left:auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--motion-fast) var(--ease-out)}
.queue-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.queue-toggle:disabled{cursor:default}
.queue-toggle:disabled svg{display:none}
.now-playing-queue .queue-list.is-expanded{max-height:min(46dvh,360px)}
.now-playing-queue .queue-item{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr);min-height:0;padding:0;cursor:default}
.now-playing-queue .queue-item:hover{background:transparent}
.now-playing-queue .queue-item.is-editable{grid-template-columns:24px minmax(0,1fr) 32px;align-items:center;gap:4px}
.queue-play{min-width:0;min-height:48px;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:10px;padding:4px 6px;border:0;border-radius:9px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
@media(hover:hover){.queue-play:hover{background:var(--surface-muted)}}
.queue-remove{width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:transparent;color:var(--quiet);cursor:pointer}
.queue-remove:hover{background:var(--surface-muted);color:var(--ink)}
.queue-remove svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

.drag-handle{width:24px;height:36px;display:grid;place-items:center;flex:0 0 auto;color:var(--quiet);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.drag-handle svg{width:16px;height:16px;fill:currentColor;stroke:none}
.drag-handle:active{cursor:grabbing}
.is-drag-ghost{opacity:.35}
.is-drag-fallback{z-index:1000;opacity:.95!important;border-radius:10px;background:var(--surface);box-shadow:var(--elev-3);pointer-events:none}
.is-drag-chosen{border-radius:10px;background:var(--surface-muted)}
.playlist-detail.is-filtered .drag-handle{visibility:hidden}
/* Narrow layouts hide the duration span in this row; the handle must stay. */
.playlist-track-actions>.drag-handle{display:grid;min-width:0;width:28px}
.playlist-nav-item.is-likes .playlist-nav-icon{background:#f7dfe6;color:#c2185b}
.playlist-nav-item.is-likes .playlist-nav-icon svg{fill:currentColor;stroke:none}

html[data-theme="dark"] .catalog-back{background:#29292d;color:#b6b6bb}
html[data-theme="dark"] .carousel-arrow{border-color:#343438;background:#202023;color:#e8e8e9}
html[data-theme="dark"] .carousel-arrow:hover,html[data-theme="dark"] .carousel-arrow:focus-visible{border-color:#4a4a50;background:#29292d}
html[data-theme="dark"] .now-playing-dialog .now-playing-like{background:rgba(255,255,255,.08);color:#b6b6bb}
html[data-theme="dark"] .now-playing-dialog .now-playing-like:hover{background:rgba(255,255,255,.14);color:#fff}
html[data-theme="dark"] .now-playing-dialog .now-playing-like.is-liked{color:#ff5c8a}
html[data-theme="dark"] .playlist-nav-item.is-likes .playlist-nav-icon{background:#3a2130;color:#ff7aa2}

body.telegram-mini-app .discover-section{margin-top:34px}
body.telegram-mini-app .discover-section .block-heading h2{font-size:25px}
body.telegram-mini-app .carousel-controls{display:none}

@media(min-width:821px){
  body:not(.telegram-mini-app) .discover-body :is(.catalog-row,.discover-chart).is-scrollable.is-at-start:not(.is-at-end){-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 32px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 32px),transparent 100%)}
  body:not(.telegram-mini-app) .discover-body :is(.catalog-row,.discover-chart).is-scrollable:not(.is-at-start):not(.is-at-end){-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%)}
  body:not(.telegram-mini-app) .discover-body :is(.catalog-row,.discover-chart).is-scrollable.is-at-end:not(.is-at-start){-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 100%)}
}

@media(max-width:820px){
  .discover-section{margin-top:64px}
  .discover-chart{grid-auto-columns:minmax(260px,calc((100% - 12px) / 2))}
}
@media(max-width:560px){
  .discover-chart{grid-auto-columns:88%}
  .catalog-row{grid-auto-columns:128px;gap:12px}
  .catalog-dialog{width:100%;max-width:none;max-height:min(94dvh,860px);margin:auto 0 0;border-right:0;border-bottom:0;border-left:0;border-radius:24px 24px 0 0}
  .catalog-hero{grid-template-columns:104px minmax(0,1fr);gap:16px;padding:58px 18px 16px}
  .catalog-cover{width:104px;height:104px}
  .catalog-heading h2{font-size:24px}
  .catalog-actions{padding:0 18px 12px}
  .catalog-content{padding:0 10px calc(22px + env(safe-area-inset-bottom))}
}
@media(hover:none){.carousel-controls{display:none}}
@media(prefers-reduced-motion:reduce){
  .catalog-card-art,.queue-toggle svg,.carousel-arrow{transition:none}
  .catalog-card:hover .catalog-card-art{transform:none}
}

/* ==========================================================================
   Endless listening: radio stations, autoplay switch, synced lyrics.
   ========================================================================== */

.radio-shelf{display:flex;flex-direction:column;gap:12px;min-width:0}
.radio-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.radio-tabs::-webkit-scrollbar{display:none}
.radio-tab{flex:0 0 auto;height:34px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:650;cursor:pointer}
.radio-tab[aria-selected="true"]{border-color:var(--ink);background:var(--ink);color:var(--surface)}
.radio-row{grid-auto-columns:128px}
.radio-card{--station-color:#5b5b60;min-width:0;display:flex;flex-direction:column;gap:7px;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;scroll-snap-align:start}
.radio-card-art{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgb(255 255 255 / .28),transparent 55%),var(--station-color);box-shadow:var(--elev-1);transition:transform var(--motion-fast) var(--ease-out)}
.radio-card-art img{width:62%;height:62%;object-fit:contain}
.radio-card strong{display:block;overflow:hidden;font-size:12px;font-weight:650;text-align:center;text-overflow:ellipsis;white-space:nowrap}
@media(hover:hover){.radio-card:hover .radio-card-art{transform:scale(1.03)}}
.radio-card:active .radio-card-art{transform:scale(var(--press))}

.discover-for-you{grid-template-rows:repeat(3,auto)}

.now-playing-queue .queue-head{gap:10px}
.now-playing-queue .queue-head .queue-toggle{flex:1 1 auto;min-width:0;width:auto}
.queue-autoplay{flex:0 0 auto;max-width:58%;height:30px;display:inline-flex;align-items:center;gap:8px;padding:0 4px 0 10px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:11px;font-weight:650;cursor:pointer}
.queue-autoplay span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.queue-autoplay i{position:relative;flex:0 0 auto;width:28px;height:18px;border-radius:999px;background:var(--line-strong);transition:background-color var(--motion-fast) var(--ease-standard)}
.queue-autoplay i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform var(--motion-fast) var(--ease-out)}
.queue-autoplay[aria-pressed="true"]{color:var(--ink)}
.queue-autoplay[aria-pressed="true"] i{background:var(--ink)}
.queue-autoplay[aria-pressed="true"] i::after{transform:translateX(10px)}
.queue-autoplay.is-radio{border-color:var(--ink)}
.queue-autoplay.is-radio i{width:18px;background:transparent}
.queue-autoplay.is-radio i::after{content:"×";top:0;left:0;width:18px;height:18px;display:grid;place-items:center;background:transparent;box-shadow:none;color:var(--muted);font-size:15px;line-height:18px;transform:none}
.queue-hint{margin:4px 2px 2px;color:var(--quiet);font-size:11px}

.now-playing-lyrics{width:100%;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.lyrics-toggle strong{color:var(--quiet);font-size:10px;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.lyrics-body{position:relative;max-height:min(38dvh,300px);margin-top:8px;overflow-y:auto;overscroll-behavior:contain;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 26px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 26px),transparent 100%)}
.lyrics-line{display:block;width:100%;padding:5px 4px;border:0;border-radius:8px;background:transparent;color:var(--quiet);font:inherit;font-size:16px;font-weight:650;line-height:1.35;letter-spacing:-.01em;text-align:left;cursor:pointer;transition:color var(--motion-base) var(--ease-standard),transform var(--motion-base) var(--ease-out)}
.lyrics-line:first-child{margin-top:14px}.lyrics-line:last-child{margin-bottom:22px}
.lyrics-line.is-gap{font-size:13px}
.lyrics-line.is-active{color:var(--ink);transform:translateX(2px)}
@media(hover:hover){.lyrics-line:hover{color:var(--muted)}.lyrics-line.is-active:hover{color:var(--ink)}}
.lyrics-plain{margin:10px 0 20px;color:var(--ink);font-size:14px;line-height:1.7;white-space:pre-wrap}
.lyrics-status{min-height:90px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--quiet);font-size:12px;text-align:center}
.lyrics-status svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;animation:player-spin 1.6s linear infinite}

.lyrics-head{display:flex;align-items:center;gap:6px}
.lyrics-head .queue-toggle{flex:1 1 auto;min-width:0}
.lyrics-full-button{width:32px;height:32px;display:grid;place-items:center;flex:0 0 auto;padding:0;border:0;border-radius:8px;background:transparent;color:var(--quiet);cursor:pointer}
.lyrics-full-button:hover{background:var(--surface-muted);color:var(--ink)}
.lyrics-full-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Full-screen lyrics: the whole viewport, the sung line in the middle. */
.lyrics-dialog{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;display:none;flex-direction:column;border:0;background-color:var(--page);color:var(--ink)}
.lyrics-dialog[open]{display:flex}
.lyrics-dialog.has-accent{background-image:linear-gradient(180deg,rgb(var(--cover-rgb) / .42) 0,rgb(var(--cover-rgb) / .16) 55%,rgb(var(--cover-rgb) / .08) 100%)}
.lyrics-dialog::backdrop{background:var(--page)}
.lyrics-dialog-head{display:grid;grid-template-columns:48px minmax(0,1fr) 40px;align-items:center;gap:12px;padding:calc(16px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left))}
.lyrics-dialog-cover{width:48px;height:48px;border-radius:10px;background:var(--art-fill) center/cover;box-shadow:var(--elev-2)}
.lyrics-dialog-copy{min-width:0}
.lyrics-dialog-copy h2,.lyrics-dialog-copy p{overflow:hidden;margin:0;text-overflow:ellipsis;white-space:nowrap}
.lyrics-dialog-copy h2{font-size:17px;letter-spacing:-.02em}
.lyrics-dialog-copy p{margin-top:2px;color:var(--muted);font-size:13px}
.lyrics-dialog-close{width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgb(127 127 127 / .14);color:var(--ink);cursor:pointer}
.lyrics-dialog-close .ui-icon{width:18px;height:18px}
.lyrics-dialog-body{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18vh max(24px,env(safe-area-inset-right)) 42vh max(24px,env(safe-area-inset-left));-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%)}
.lyrics-dialog-body .lyrics-line{max-width:760px;margin:0 auto;padding:9px 6px;font-size:clamp(24px,5.4vw,40px);font-weight:760;line-height:1.22;letter-spacing:-.03em;opacity:.42}
.lyrics-dialog-body .lyrics-line:first-child,.lyrics-dialog-body .lyrics-line:last-child{margin-top:0;margin-bottom:0}
.lyrics-dialog-body .lyrics-line.is-gap{font-size:clamp(18px,4vw,26px)}
.lyrics-dialog-body .lyrics-line.is-active{color:var(--ink);opacity:1;transform:none}
.lyrics-dialog-body .lyrics-plain{max-width:760px;margin:0 auto;font-size:clamp(18px,4.2vw,24px);line-height:1.6}
.lyrics-dialog-body .lyrics-status{min-height:40vh;font-size:14px}
.lyrics-dialog-controls{display:flex;justify-content:center;padding:10px 20px calc(22px + env(safe-area-inset-bottom))}
.lyrics-dialog-toggle{width:64px;height:64px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--ink);color:var(--surface);box-shadow:var(--elev-3);cursor:pointer}
.lyrics-dialog-toggle svg{grid-area:1/1;width:22px;height:22px}
.lyrics-dialog-toggle .play-icon{fill:currentColor}
.lyrics-dialog-toggle .pause-icon{display:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.lyrics-dialog.is-playing .lyrics-dialog-toggle .play-icon{display:none}
.lyrics-dialog.is-playing .lyrics-dialog-toggle .pause-icon{display:block}
.lyrics-dialog-toggle:active{transform:scale(var(--press))}
@media(prefers-reduced-motion:reduce){.lyrics-dialog-body .lyrics-line{transition:none}}

/* A station answers the tap before the first batch arrives. */
.radio-card.is-loading .radio-card-art::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgb(0 0 0 / .28)}
.radio-card.is-loading .radio-card-art::before{content:"";position:absolute;z-index:1;width:30%;height:30%;border:3px solid rgb(255 255 255 / .9);border-right-color:transparent;border-radius:50%;animation:player-spin .8s linear infinite}
@media(prefers-reduced-motion:reduce){.radio-card.is-loading .radio-card-art::before{animation-duration:2s}}

/* Floating layers: app.js sets `bottom` from the chrome actually on screen;
   the per-layout offsets above only cover the first paint. Moving with the
   player or the pill reads as one motion rather than a jump. */
.toast,.job-pill{transition:bottom var(--motion-base) var(--ease-out)}
@media(prefers-reduced-motion:reduce){.toast,.job-pill{transition:none}}

/* The mini player's volume uses the same slider as the track card: a 5px
   rail and a 20px thumb are easy to hit with a thumb. */
.player-volume input::-webkit-slider-runnable-track{height:5px}
.player-volume input::-webkit-slider-thumb{width:20px;height:20px;margin-top:-7.5px;border-width:3px}
.player-volume input::-moz-range-track,.player-volume input::-moz-range-progress{height:5px}
.player-volume input::-moz-range-thumb{width:16px;height:16px;border-width:3px}
.player-volume-popover input{height:44px}
.player-volume-popover input::-webkit-slider-thumb{border:0}
.player-volume-popover input::-moz-range-thumb{border:0}
.player-volume-popover input:focus-visible{outline:none}

/* A caret that stands out on both dark fields and light autofill backgrounds. */
input,textarea{caret-color:var(--accent)}

@media(max-width:560px){
  .radio-row{grid-auto-columns:104px}
  .lyrics-line{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .lyrics-line,.radio-card-art,.queue-autoplay i,.queue-autoplay i::after{transition:none}
  .lyrics-line.is-active{transform:none}
  .lyrics-status svg{animation:none}
}

/* ==========================================================================
   Release polish
   ========================================================================== */

/* Drag and drop that follows the finger. The floating row never animates or
   transitions on its own (Sortable moves it every frame), the page cannot
   select text or bounce while a row is held, and the grip is a full 44px
   target on touch screens. */
.is-drag-fallback{transition:none!important;animation:none!important}
body.is-sorting,body.is-sorting *{user-select:none!important;-webkit-user-select:none!important;cursor:grabbing!important}
body.is-sorting{overscroll-behavior:none}
.drag-handle{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
@media(pointer:coarse){
  .drag-handle{width:32px;height:44px}
  .playlist-track-actions>.drag-handle{width:36px}
  .now-playing-queue .queue-item.is-editable{grid-template-columns:32px minmax(0,1fr) 40px}
  .queue-remove{width:40px;height:40px}
}
.search-filters.is-single{grid-template-columns:minmax(0,1fr)}

/* Playlist rows show their artwork under the play glyph, like every other
   list in the app. */
.playlist-track-play.has-cover{position:relative;border-radius:8px;color:#fff;background-color:var(--surface-muted);background-position:center;background-size:cover;background-repeat:no-repeat}
.playlist-track-play.has-cover::before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(12,12,14,.34);transition:background-color var(--motion-fast) var(--ease-standard)}
.playlist-track-play.has-cover:hover::before,.playlist-track-play.has-cover.is-playing::before{background:rgba(12,12,14,.52)}
.playlist-track-play.has-cover svg{position:relative;z-index:1}

/* Recommendations play in place: cover with a play button, title opens it. */
.recommendation-row .recommendation-cover{grid-row:auto;width:44px;height:44px}
.recommendation-row .recommendation-copy{width:auto;height:auto;min-width:0;display:flex;flex-direction:column;align-items:stretch;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.recommendation-row .recommendation-copy:hover{background:transparent;color:inherit}
.recommendation-row .track-cover button{position:absolute;inset:0;width:auto;height:auto;border-radius:0;background:rgba(20,20,22,.62);color:#fff}
.recommendation-row .track-cover button:hover{background:rgba(20,20,22,.72);color:#fff}
.recommendation-row .track-cover button svg{fill:currentColor;stroke:none}
.recommendation-row .track-cover button.is-playing .pause-icon{fill:none;stroke:currentColor}
.recommendation-copy strong,.recommendation-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recommendation-row>div:last-child{display:flex;flex-direction:row;align-items:center;gap:3px}
.recommendation-row .now-playing-bars{margin-right:6px;color:var(--ink)}

/* The station that is playing stays marked on the shelf. */
.radio-card.is-active .radio-card-art{box-shadow:0 0 0 3px var(--page),0 0 0 5px var(--ink)}
.radio-card.is-active strong{color:var(--ink);font-weight:750}

/* Clear button inside the search field. */
.search-clear{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;padding:0;border:0;border-radius:50%;background:transparent;color:var(--quiet);cursor:pointer}
.search-clear:hover{background:var(--surface-muted);color:var(--ink)}
.search-clear svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.search-clear[hidden]{display:none}

/* New playlist entry at the top of "Add to playlist". */
.playlist-dialog-list button.playlist-dialog-new{color:var(--accent)}
/* "New playlist" row: a small plus before the label, a dashed outline so it
   reads as an action next to the existing playlists. The icon had no size of
   its own and grew to fill the whole row, squeezing the label out. */
.playlist-dialog-list button.playlist-dialog-new{justify-content:flex-start;gap:10px;border-style:dashed}
.playlist-dialog-list button.playlist-dialog-new svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.playlist-dialog-list button.playlist-dialog-new span{color:inherit}
.download-form>svg{grid-column:1;grid-row:1}
.download-form>input{grid-column:2;grid-row:1}
.download-form>#submit-button{grid-column:3;grid-row:1}
.download-form>.search-clear{grid-column:2;grid-row:1;justify-self:end;width:36px;height:36px;padding:0;border-radius:50%;background:transparent;color:var(--quiet)}
.download-form>.search-clear:hover{background:var(--surface-muted);color:var(--ink)}
.download-form>.search-clear:active{transform:scale(var(--press))}
.download-form.has-value>input{padding-right:40px}
html[data-theme="dark"] .download-form>.search-clear{color:#9a9aa0;background:transparent}

/* Playlist chips on phones size to their name ("Любимые треки" was cut to
   "Любимые тр…" by a fixed 190px), within sensible bounds. */
@media(max-width:820px){
  .playlist-nav-item{width:auto;min-width:150px;max-width:250px}
  /* The layout's min-height was shared out between its rows, so a short
     playlist left an empty band under the chips. */
  .playlists-layout{align-content:start}
}

/* The chart carousel on phones: the next column peeks with its artwork, not
   just a stray rank number at the screen edge. */
@media(max-width:560px){
  .discover-chart{grid-auto-columns:80%}
}

/* Touch targets inside the track card: the lyrics and queue headers were
   24px tall, the autoplay switch 30px and the artist line 20px, so a thumb
   often missed them or hit the neighbour. */
@media(pointer:coarse){
  .now-playing-dialog .queue-toggle{min-height:44px}
  .now-playing-dialog .lyrics-full-button{width:44px;height:44px}
  .now-playing-dialog .queue-autoplay{height:38px}
  .now-playing-heading p.is-link{display:-webkit-box;box-sizing:border-box;max-width:100%;min-height:32px;padding:6px 10px;margin-block:-6px;line-height:20px}
  .radio-tab{height:40px}
}

/* Skip and like in the bottom player on wide screens: switching a track no
   longer means opening the card. Phones and the Mini App keep the compact
   two-row bar; the card has these controls there. */
.player-skip,.player-like{display:none}
@media(min-width:821px){
  body:not(.telegram-mini-app) .player-inner{grid-template-columns:36px 44px 36px 46px minmax(150px,260px) 36px minmax(220px,1fr) 44px 44px;gap:10px}
  body.no-volume-control:not(.telegram-mini-app) .player-inner{grid-template-columns:36px 44px 36px 46px minmax(150px,280px) 36px minmax(240px,1fr) 44px}
  body:not(.telegram-mini-app) .player-skip,
  body:not(.telegram-mini-app) .player-like{width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:background-color var(--motion-fast) var(--ease-standard),opacity var(--motion-fast) var(--ease-standard)}
  body:not(.telegram-mini-app) .player-like[hidden]{display:grid;visibility:hidden}
  .player-skip svg{width:17px;height:17px;fill:currentColor;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
  .player-like svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
  .player-skip:hover:not(:disabled),.player-like:hover{background:var(--surface-muted)}
  .player-skip:disabled{opacity:.3;cursor:default}
  .player-like{color:var(--muted)}
  .player-like.is-liked{color:#e0245e}
  .player-like.is-liked svg{fill:currentColor}
  html[data-theme="dark"] .player-like.is-liked{color:#ff5c8a}
  .player-skip:active:not(:disabled),.player-like:active{transform:scale(var(--press))}
}

/* The job card's second action when the file already went to the device. */
.job-action.job-quiet{border:0;background:transparent;color:var(--muted)}
.job-action.job-quiet:hover{background:var(--surface-muted);color:var(--ink)}
.job-action:disabled{opacity:.55;cursor:default}

/* Phones and the Mini App: the same controls as the desktop bar, arranged for
   one thumb. Top row: artwork, title, like, volume, close. Bottom row:
   previous, play, next and the timeline. Column widths are shared by both
   rows (the title spans three of them, the timeline four). */
@media(max-width:820px){
  body:not(.telegram-mini-app) .player-inner{
    grid-template-columns:44px 48px 40px minmax(0,1fr) 40px 40px 40px;
    grid-template-rows:44px 52px;column-gap:8px;row-gap:6px;
    grid-template-areas:"cover copy copy copy like volume close" "prev toggle next timeline timeline timeline timeline";
  }
  body.no-volume-control:not(.telegram-mini-app) .player-inner{
    grid-template-areas:"cover copy copy copy copy like close" "prev toggle next timeline timeline timeline timeline";
  }
  body:not(.telegram-mini-app) #player-previous{grid-area:prev}
  body:not(.telegram-mini-app) #player-next{grid-area:next}
  body:not(.telegram-mini-app) .player-like{grid-area:like}
  body:not(.telegram-mini-app) .player-toggle{grid-area:toggle;width:48px;height:48px}
  body:not(.telegram-mini-app) .player-cover{grid-area:cover}
  body:not(.telegram-mini-app) .player-copy{grid-area:copy}
  body:not(.telegram-mini-app) .player-timeline{grid-area:timeline}
  body:not(.telegram-mini-app) .player-close{grid-area:close;width:40px;height:40px}
}
body.telegram-mini-app .player-inner{
  min-height:0;grid-template-columns:44px 48px 40px minmax(0,1fr) 40px 40px 40px;
  grid-template-rows:44px 52px;column-gap:8px;row-gap:4px;
  grid-template-areas:"cover copy copy copy like volume close" "prev toggle next timeline timeline timeline timeline";
}
body.telegram-mini-app.no-volume-control .player-inner{
  grid-template-columns:44px 48px 40px minmax(0,1fr) 40px 40px 40px;
  grid-template-areas:"cover copy copy copy copy like close" "prev toggle next timeline timeline timeline timeline";
}
body.telegram-mini-app #player-previous{grid-area:prev}
body.telegram-mini-app #player-next{grid-area:next}
body.telegram-mini-app .player-like{grid-area:like}
body.telegram-mini-app .player-toggle{grid-area:toggle;width:48px;height:48px}
body.telegram-mini-app .player-cover{grid-area:cover;width:44px;height:44px}

@media(max-width:820px){
  body:not(.telegram-mini-app) .player-skip,body:not(.telegram-mini-app) .player-like{display:grid}
}
body.telegram-mini-app .player-skip,body.telegram-mini-app .player-like{display:grid}
@media(max-width:820px){
  body:not(.telegram-mini-app) .player-skip,body:not(.telegram-mini-app) .player-like,
  body.telegram-mini-app .player-skip,body.telegram-mini-app .player-like{
    width:40px;height:40px;place-items:center;justify-self:center;padding:0;border:0;border-radius:50%;
    background:transparent;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
}
body.telegram-mini-app .player-skip,body.telegram-mini-app .player-like{
  width:40px;height:40px;place-items:center;justify-self:center;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;
}
body.telegram-mini-app .player-like[hidden]{display:grid;visibility:hidden}
@media(max-width:820px){body:not(.telegram-mini-app) .player-like[hidden]{display:grid;visibility:hidden}}
.player-skip svg{width:18px;height:18px;fill:currentColor;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.player-like svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.player-like{color:var(--muted)}
.player-like.is-liked{color:#e0245e}
.player-like.is-liked svg{fill:currentColor}
html[data-theme="dark"] .player-like.is-liked{color:#ff5c8a}
.player-skip:disabled{opacity:.3;cursor:default}
.player-skip:active:not(:disabled),.player-like:active{transform:scale(var(--press))}

/* A horizontal swipe over the title changes the track; the text follows the
   finger a little so the gesture reads as connected. */
.player-copy{touch-action:pan-y}
.player-copy.is-swiping{transition:none}
.player-copy.is-settling{transition:transform var(--motion-fast) var(--ease-out),opacity var(--motion-fast) var(--ease-out)}
@media(prefers-reduced-motion:reduce){.player-copy.is-settling{transition:none}}

/* Phone mini player, refined: one calm line of transport. The timeline sits
   between its two times on the same axis as the buttons (it used to float
   above them with the times on a row of their own), the play button no longer
   outweighs the artwork, and "previous" lines up under the cover. */
@media(max-width:820px){
  body:not(.telegram-mini-app) .player-inner{
    grid-template-columns:44px 40px 36px minmax(0,1fr) 40px 40px 40px;
    grid-template-rows:44px 44px;row-gap:6px;align-items:center;
  }
  body:not(.telegram-mini-app) .player-toggle{width:40px;height:40px;justify-self:center;box-shadow:none}
  body:not(.telegram-mini-app) .player-skip{width:36px;height:36px}
  body:not(.telegram-mini-app) .player-timeline{flex-direction:row;align-items:center;gap:8px;min-width:0;height:44px}
  body:not(.telegram-mini-app) .player-timeline>div{display:contents}
  body:not(.telegram-mini-app) .player-timeline input{order:2;flex:1 1 auto;min-width:0;height:32px}
  body:not(.telegram-mini-app) #player-current{order:1}
  body:not(.telegram-mini-app) #player-duration{order:3}
  body:not(.telegram-mini-app) #player-current,body:not(.telegram-mini-app) #player-duration{min-width:30px;font-size:11px;line-height:1;text-align:center}
}
body.telegram-mini-app .player-inner{
  grid-template-columns:44px 40px 36px minmax(0,1fr) 40px 40px 40px;
  grid-template-rows:44px 44px;row-gap:6px;align-items:center;
}
body.telegram-mini-app.no-volume-control .player-inner{grid-template-columns:44px 40px 36px minmax(0,1fr) 40px 40px 40px}
body.telegram-mini-app .player-toggle{width:40px;height:40px;justify-self:center;box-shadow:none}
body.telegram-mini-app .player-skip{width:36px;height:36px}
body.telegram-mini-app .player-timeline{flex-direction:row;align-items:center;gap:8px;min-width:0;height:44px}
body.telegram-mini-app .player-timeline>div{display:contents}
body.telegram-mini-app .player-timeline input{order:2;flex:1 1 auto;min-width:0;height:32px}
body.telegram-mini-app #player-current{order:1}
body.telegram-mini-app #player-duration{order:3}
body.telegram-mini-app #player-current,body.telegram-mini-app #player-duration{min-width:30px;font-size:11px;line-height:1;text-align:center}
/* A disabled skip is quieter still, so it reads as "nothing before" rather
   than a greyed-out glitch. */
body.telegram-mini-app .player-skip:disabled{opacity:.22}
@media(max-width:820px){body:not(.telegram-mini-app) .player-skip:disabled{opacity:.22}}

/* ------------------------------------------------------- interface pass --- */

/* Free downloads left today, under the search field. */
.quota-line{display:block;width:calc(100% - 8px);margin:2px 4px 0;padding:4px 0;border:0;background:transparent;color:var(--quiet);font:inherit;font-size:12px;text-align:left;cursor:pointer}
.quota-line strong{color:var(--ink);font-weight:700}
.quota-line em{font-style:normal;color:var(--accent);font-weight:650}
.quota-line.is-empty strong{color:var(--danger)}
.quota-line:hover em{text-decoration:underline;text-underline-offset:3px}

/* "Show all" under recent downloads. */
.history-more{width:100%;min-height:44px;margin-top:6px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:12px;font-weight:650;cursor:pointer}
.history-more:hover{background:var(--surface-muted)}

/* Action sheet: the four most used actions as tiles above the list. */
.action-sheet-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:14px 0 6px}
.action-sheet-quick:empty{display:none}
.action-tile{min-width:0;min-height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px 4px;border:0;border-radius:12px;background:var(--surface-muted);color:var(--ink);font:inherit;font-size:11px;font-weight:650;line-height:1.15;text-align:center;cursor:pointer}
.action-tile:hover{background:var(--line)}
.action-tile:active{transform:scale(var(--press))}
.action-tile svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.action-tile span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.action-tile.is-on{color:#e0245e}
.action-tile.is-on svg{fill:currentColor}
html[data-theme="dark"] .action-tile.is-on{color:#ff5c8a}

/* Toast with an action ("Undo"). */
.toast.has-action{grid-template-columns:28px minmax(0,1fr) auto;pointer-events:auto}
.toast-action{min-height:36px;padding:0 12px;border:0;border-radius:8px;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:12px;font-weight:750;cursor:pointer}
.toast-action:hover{background:rgba(255,255,255,.22)}
html[data-theme="dark"] .toast:not(.error) .toast-action{background:rgba(0,0,0,.1);color:#161618}

/* Welcome card for a listener with no history yet. */
.welcome-card{position:relative;display:grid;gap:12px;padding:20px 20px 18px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.welcome-card h3{margin:0;font-size:17px;letter-spacing:-.02em}
.welcome-card ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.welcome-card li{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:10px;color:var(--muted);font-size:13px;line-height:1.35}
.welcome-card li svg{width:32px;height:32px;padding:7px;border-radius:9px;background:var(--surface-muted);color:var(--ink);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.welcome-close{position:absolute;top:12px;right:12px;width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--quiet);cursor:pointer}
.welcome-close:hover{background:var(--surface-muted);color:var(--ink)}
.welcome-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* Phones: recent downloads come right after search once there are any, and
   show five rows until expanded; the plan card follows the catalog. */
@media(max-width:820px){
  body:not(.telegram-mini-app) .workspace{display:flex;flex-direction:column}
  body:not(.telegram-mini-app) .workspace>.dashboard-grid{display:contents}
  body:not(.telegram-mini-app) .download-section{order:1}
  body:not(.telegram-mini-app) .active-job{order:2}
  body:not(.telegram-mini-app) .discover-section{order:3}
  body:not(.telegram-mini-app) .history-section{order:4;margin-top:56px}
  body:not(.telegram-mini-app) .profile-section{order:5;margin-top:56px}
  body:not(.telegram-mini-app) .playlists-section{order:6}
  body:not(.telegram-mini-app).has-history .history-section{order:3;margin-top:44px}
  body:not(.telegram-mini-app).has-history .discover-section{order:4}
}

/* Phones: secondary text one step larger; 10-11px grey lines were hard to read. */
@media(max-width:560px){
  .search-result-copy>span,.catalog-track-copy span,.playlist-track-copy span,.history-copy span,
  .player-copy span,.recommendation-copy span,.catalog-card>span,.queue-hint,.playlist-search-status{font-size:12px}
  .queue-copy strong{font-size:12px}
  .queue-copy span,.catalog-track-meta>span:not(.now-playing-bars),.result-labels small,.history-meta span{font-size:11px}
  .job-copy span{font-size:12px}
  .radio-card strong,.catalog-card strong{font-size:13px}
}

/* Long titles and artists on iPhone (Safari and Telegram's iOS WebView).
   WebKit does not let a <button> shrink to its grid or flex cell the way
   Chrome does, so a long name ignored text-overflow and ran over the like
   and close buttons, or pushed a row wider. Every button that holds a
   title/artist pair is now clipped to its cell and its lines ellipsise on
   their own, whatever the engine. */
.player-copy,.search-result-copy,.catalog-track-copy,.history-copy,.playlist-track-copy,
.recommendation-copy,.queue-play,.queue-copy{
  min-width:0;max-width:100%;overflow:hidden;
}
.player-copy{width:100%;justify-self:stretch;align-items:stretch;text-align:left}
.player-copy>strong,.player-copy>span,
.search-result-copy>strong,.search-result-copy>span,
.catalog-track-copy>strong,.catalog-track-copy>span,
.history-copy>strong,.history-copy>span,
.playlist-track-copy>strong,.playlist-track-copy>span,
.recommendation-copy>strong,.recommendation-copy>span,
.queue-copy>strong,.queue-copy>span{
  display:block;width:100%;max-width:100%;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* The grid cell itself may not grow past its track either. */
.player-inner>*{min-width:0}

/* Long names in the track card. The artist line (a comma list of five
   performers is common) and the title wrap to two lines and then ellipsise,
   and nothing inside the card may grow wider than the card: a single wide
   line used to widen the whole sheet on iPhone, pushing the controls, the
   timeline and the lyrics header off the left edge. */
.now-playing-dialog{overflow-x:hidden}
.now-playing-dialog>*{min-width:0;max-width:100%}
.now-playing-heading{box-sizing:border-box;max-width:100%}
.now-playing-heading h2,.now-playing-heading p{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  white-space:normal;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;
  max-width:100%;box-sizing:border-box;
}
.now-playing-heading h2{line-height:1.15}
.now-playing-heading p{line-height:1.35}
/* Lyrics full-screen header and the queue rows follow the same rule. */
.lyrics-dialog-copy,.queue-toggle,.lyrics-head,.queue-head{min-width:0;max-width:100%}

/* A lyrics request that failed for a moment offers a retry. */
.lyrics-status{flex-direction:column}
.lyrics-retry{min-height:36px;padding:0 16px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:12px;font-weight:650;cursor:pointer}
.lyrics-retry:hover{background:var(--surface-muted)}

/* ------------------------------------------------------ sheet mini player ---
   Album, artist, playlist and recommendation sheets cover the page and with
   it the bottom player. A compact copy sticks to the bottom of those sheets
   while something is playing: what is on, play/pause, next, and a tap opens
   the track card (closing it returns to the same sheet). */
.catalog-dialog{--sheet-pad-x:0px;--sheet-pad-b:0px}
.discovery-dialog{--sheet-pad-x:32px;--sheet-pad-b:32px}
@media(max-width:560px){.discovery-dialog{--sheet-pad-x:20px;--sheet-pad-b:22px}}
.sheet-player{
  /* Sticky offsets count from inside the sheet padding: pull it to the edge. */
  position:sticky;bottom:calc(var(--sheet-pad-b) * -1);z-index:4;
  display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;align-items:center;gap:4px;
  margin:18px calc(var(--sheet-pad-x) * -1) calc(var(--sheet-pad-b) * -1);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom)) 12px;
  border-top:1px solid var(--line);background:var(--surface);
  box-shadow:0 -10px 30px rgba(20,20,18,.08);
}
html[data-theme="dark"] .sheet-player{box-shadow:0 -10px 30px rgba(0,0,0,.35)}
.sheet-player[hidden]{display:none}
.sheet-player-progress{position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--ink);transition:width .25s linear}
.sheet-player-main{min-width:0;display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:10px;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;overflow:hidden}
.sheet-player-cover{width:40px;height:40px;border-radius:8px;background:var(--art-fill) center/cover no-repeat}
.sheet-player-copy{min-width:0;display:flex;flex-direction:column;overflow:hidden}
.sheet-player-copy strong,.sheet-player-copy span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-player-copy strong{font-size:13px;font-weight:700}
.sheet-player-copy span{color:var(--quiet);font-size:12px}
.sheet-player-toggle,.sheet-player-next{width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.sheet-player-toggle{background:var(--ink);color:var(--surface);width:40px;height:40px;justify-self:center}
.sheet-player-toggle svg,.sheet-player-next svg{grid-area:1/1;width:16px;height:16px}
.sheet-player-toggle .play-icon{fill:currentColor}
.sheet-player-toggle .pause-icon{display:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.sheet-player.is-playing .sheet-player-toggle .play-icon{display:none}
.sheet-player.is-playing .sheet-player-toggle .pause-icon{display:block}
.sheet-player-next svg{fill:currentColor;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.sheet-player-next:disabled{opacity:.3;cursor:default}
.sheet-player-toggle:active,.sheet-player-next:active:not(:disabled){transform:scale(var(--press))}
@media(prefers-reduced-motion:reduce){.sheet-player-progress{transition:none}}

/* ------------------------------------------------------------ motion pass ---
   Softer, still quick. Things leave the way they came instead of vanishing;
   phone sheets slide from the edge they belong to; small state changes (play,
   like, a new track, freshly loaded content) ease in. Transform and opacity
   only; exits are shorter than entrances; reduced motion turns it all off. */
:root{
  --motion-fast:160ms;
  --ease-exit:cubic-bezier(.4,0,1,1);
  --ease-sheet:cubic-bezier(.32,.72,0,1);
  --ease-drop:cubic-bezier(.3,0,.8,.15);
}

/* Bottom sheets on phones and in the Mini App rise from the bottom edge. */
@media(max-width:560px){
  .action-sheet[open],.now-playing-dialog[open],.catalog-dialog[open]{animation:sheet-slide-in 340ms var(--ease-sheet) both}
}
body.telegram-mini-app .now-playing-dialog[open]{animation:sheet-slide-in 340ms var(--ease-sheet) both}
@keyframes sheet-slide-in{from{transform:translateY(100%)}to{transform:none}}
dialog[open]::backdrop{animation-duration:260ms}

/* A sheet taking over from one that is leaving keeps the dimming steady; a
   parent uncovered by Back is simply there. */
dialog.is-handover::backdrop,dialog.is-returning::backdrop{animation:none}
dialog.is-returning[open]{animation:none!important}

/* The leaving copy of a closed sheet. */
.exit-layer{position:fixed;inset:0;z-index:2147483000;width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:visible;pointer-events:none;color:inherit}
.exit-backdrop{position:fixed;inset:0;background:rgba(18,18,19,.48);animation:exit-fade 220ms var(--ease-exit) both}
/* !important: the copy keeps the sheet's classes, and a sheet's own entrance
   (`body.telegram-mini-app .now-playing-dialog{animation:sheet-rise}`) outranked
   the exit, so a closed track card faded back in once before disappearing. */
.dialog-ghost.is-fading{animation:dialog-exit 180ms var(--ease-exit) both!important}
/* A fresh copy would replay its contents' entrances (play icon, rows). */
.dialog-ghost *,.dialog-ghost *::before,.dialog-ghost *::after{animation:none!important;transition:none!important}
.dialog-ghost.is-sliding{animation:sheet-exit 250ms var(--ease-drop) both!important}
@keyframes dialog-exit{to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes sheet-exit{to{transform:translateY(100%)}}
@keyframes exit-fade{to{opacity:0}}

/* Notices, the account menu, the download pill and the player leave softly. */
.toast.is-leaving{animation:toast-out 180ms var(--ease-exit) both}
.account-menu.is-leaving{animation:menu-out 150ms var(--ease-exit) both}
.job-pill.is-leaving{animation:pill-out 190ms var(--ease-exit) both}
.audio-player.is-leaving{animation:player-out 210ms var(--ease-exit) both}
@keyframes toast-out{to{opacity:0;transform:translateY(6px) scale(.98)}}
@keyframes menu-out{to{opacity:0;transform:translateY(-4px) scale(.98)}}
@keyframes pill-out{to{opacity:0;transform:translateY(8px) scale(.97)}}
@keyframes player-out{to{opacity:0;transform:translateY(16px)}}

/* Play and pause swap with a small scale instead of a hard cut. */
.player-toggle :is(.play-icon,.pause-icon),.now-playing-toggle :is(.play-icon,.pause-icon),
.sheet-player-toggle :is(.play-icon,.pause-icon),button.is-playing .pause-icon{animation:icon-swap 200ms var(--ease-out) backwards}
@keyframes icon-swap{from{opacity:0;transform:scale(.6)}}

/* A like pops once. */
.is-popping svg{animation:like-pop 420ms cubic-bezier(.2,.9,.3,1.25)}
@keyframes like-pop{0%{transform:scale(1)}35%{transform:scale(1.3)}100%{transform:scale(1)}}

/* A new track's title eases in; after a swipe, from the side it came. */
.player-copy.is-entering-next{animation:title-from-right 300ms var(--ease-out) backwards}
.player-copy.is-entering-previous{animation:title-from-left 300ms var(--ease-out) backwards}
.now-playing-heading.is-entering-next,.sheet-player-main.is-entering-next{animation:title-fade 280ms var(--ease-out) backwards}
@keyframes title-from-right{from{opacity:0;transform:translateX(18px)}}
@keyframes title-from-left{from{opacity:0;transform:translateX(-18px)}}
@keyframes title-fade{from{opacity:0;transform:translateY(4px)}}

/* Loaded pages and recommendations replace their spinner with a fade. */
#catalog-content.is-arriving,#discovery-content.is-arriving{animation:content-arrive 280ms var(--ease-out) backwards}
@keyframes content-arrive{from{opacity:0;transform:translateY(6px)}}

/* Rows that were already on screen do not replay their entrance. */
.history-item.is-settled,.search-result.is-settled{animation:none}

/* Theme switch crossfade (browsers with view transitions). */
::view-transition-old(root),::view-transition-new(root){animation-duration:260ms;animation-timing-function:ease}

/* Reduced motion keeps the calm part: things fade in and out, briefly, but
   nothing slides, scales or bounces. (Turning every animation off made the
   interface snap for anyone with system animation effects disabled.) */
@media(prefers-reduced-motion:reduce){
  @keyframes surface-reveal{from{opacity:0}}
  @keyframes menu-reveal{from{opacity:0}}
  @keyframes player-reveal{from{opacity:0}}
  @keyframes dialog-reveal{from{opacity:0}}
  @keyframes detail-reveal{from{opacity:0}}
  @keyframes screen-reveal{from{opacity:0}}
  @keyframes sheet-reveal{from{opacity:0}}
  @keyframes sheet-rise{from{opacity:0}}
  @keyframes sheet-slide-in{from{opacity:0}}
  @keyframes toast-in{from{opacity:0}}
  @keyframes pill-in{from{opacity:0}}
  @keyframes dialog-exit{to{opacity:0}}
  @keyframes sheet-exit{to{opacity:0}}
  @keyframes toast-out{to{opacity:0}}
  @keyframes menu-out{to{opacity:0}}
  @keyframes pill-out{to{opacity:0}}
  @keyframes player-out{to{opacity:0}}
  @keyframes icon-swap{from{opacity:0}}
  @keyframes title-from-right{from{opacity:0}}
  @keyframes title-from-left{from{opacity:0}}
  @keyframes title-fade{from{opacity:0}}
  @keyframes content-arrive{from{opacity:0}}
  .action-sheet[open],.now-playing-dialog[open],.catalog-dialog[open],body.telegram-mini-app .now-playing-dialog[open]{animation-duration:200ms;animation-timing-function:ease-out}
  .dialog-ghost.is-sliding{animation:sheet-exit 180ms var(--ease-exit) both!important}
  .is-popping svg{animation:none}
}

/* ------------------------------------------------------------ radio mode ---
   While a station or track radio plays, the card's status line names it and
   carries a small live dot, so the mode is visible without opening the queue. */
.now-playing-dialog.is-radio-mode #now-playing-status{display:inline-flex;align-items:center;gap:7px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.now-playing-dialog.is-radio-mode #now-playing-status::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}

/* ================================================================ track card ==
   A player screen rather than a page of panels: collapse, what is happening
   and the two quick actions on top; the cover over its own blurred glow; the
   title, the scrubber and the transport; then tiles for lyrics, the file and
   the queue, each opening its own view. New class names, so none of the
   earlier card rules (kept for other surfaces) reach into it. */
.track-card{
  box-sizing:border-box;position:fixed;inset:0;z-index:0;
  width:min(440px,calc(100% - 28px));max-width:none;height:auto;max-height:calc(100dvh - 32px);
  margin:auto;padding:12px 22px calc(22px + env(safe-area-inset-bottom));
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  border:1px solid var(--line);border-radius:28px;
  background:var(--surface);color:var(--ink);box-shadow:var(--elev-4);isolation:isolate;
}
.track-card::-webkit-scrollbar{display:none}
.track-card[open]{display:flex;flex-direction:column;align-items:stretch}
.track-card::backdrop{background:rgba(12,12,14,.56)}
.track-card>*{flex:0 0 auto;min-width:0}

/* The cover's glow: a small rendition, blurred once, fading into the card. */
.track-card-glow{position:absolute;z-index:-1;top:0;left:0;right:0;height:min(92%,760px);overflow:hidden;pointer-events:none;border-radius:inherit;-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 45%,transparent 100%)}
.track-card.has-accent .track-card-glow{background:linear-gradient(180deg,rgb(var(--cover-rgb) / .34),rgb(var(--cover-rgb) / 0) 85%)}
.track-card-glow::before{content:"";position:absolute;inset:-18%;background:var(--glow,none) center/cover no-repeat;filter:blur(44px) saturate(1.3);opacity:0;transform:translateZ(0);transition:opacity .4s ease}
.track-card-glow.has-cover::before{opacity:.5}
.track-card-glow::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 25%,transparent) 0%,color-mix(in srgb,var(--surface) 55%,transparent) 100%)}
html:not([data-theme="dark"]) .track-card-glow.has-cover::before{opacity:.38}
html:not([data-theme="dark"]) .track-card-glow::after{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 40%,transparent) 0%,color-mix(in srgb,var(--surface) 70%,transparent) 100%)}

/* Top bar */
.track-card-top{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:52px}
.track-card-icon{position:relative;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-out)}
.track-card-icon:hover{background:color-mix(in srgb,var(--ink) 12%,transparent)}
.track-card-icon:active{transform:scale(var(--press))}
.track-card-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.track-card-more svg{fill:currentColor;stroke:none}
.track-card-like.is-liked{color:#e0245e}
html[data-theme="dark"] .track-card-like.is-liked{color:#ff5c8a}
.track-card-like.is-liked svg{fill:currentColor}
.track-card-top-actions{display:flex;gap:8px}
.track-card-context{min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;text-transform:uppercase;letter-spacing:.16em;line-height:1.2}
.track-card-context>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track-card-context>span:first-child{color:var(--ink);font-size:11px;font-weight:750}
.track-card-context>#now-playing-status{color:var(--muted);font-size:9.5px;font-weight:650}
.track-card.is-radio-mode #now-playing-status{display:inline-flex;align-items:center;gap:6px}
.track-card.is-radio-mode #now-playing-status::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}

/* Cover */
.track-card-art{position:relative;isolation:isolate;display:grid;place-items:center;width:min(100%,340px,40dvh);aspect-ratio:1;margin:18px auto 22px;overflow:hidden;border-radius:22px;background:var(--art-fill) center/cover no-repeat;color:var(--quiet);box-shadow:0 22px 60px rgba(0,0,0,.28),0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent)}
.track-card-art>svg{width:30%;height:30%;fill:currentColor}
.track-card-art.has-cover>svg{visibility:hidden}
.track-card-art::after{content:"";position:absolute;inset:0;z-index:1;background:var(--previous-art) center/cover no-repeat;opacity:0;pointer-events:none}
.track-card-art.is-swapping::after{opacity:1;animation:art-crossfade var(--motion-slow) var(--ease-out) forwards}

/* Title */
.track-card-heading{text-align:center}
.track-card-heading h2{margin:0;font-size:clamp(22px,6.2vw,28px);font-weight:760;letter-spacing:-.02em;line-height:1.15;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.track-card-heading p{margin:7px auto 0;max-width:100%;color:var(--muted);font-size:15px;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.track-card-heading p.is-link{cursor:pointer}
.track-card-heading p.is-link:hover{color:var(--ink)}
.track-card-heading.is-entering-next{animation:title-fade 280ms var(--ease-out) backwards}

/* Scrubber */
.track-card-timeline{margin-top:20px}
.track-card-timeline input{--seek-progress:0%;display:block;width:100%;height:30px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;touch-action:none}
.track-card-timeline input::-webkit-slider-runnable-track{height:5px;border-radius:999px}
.track-card-timeline input::-webkit-slider-thumb{width:16px;height:16px;margin-top:-5.5px;-webkit-appearance:none;border:0;border-radius:50%;background:var(--ink);box-shadow:0 1px 6px rgba(0,0,0,.25)}
.track-card-timeline input::-moz-range-track{height:5px;border:0;border-radius:999px;background:var(--line)}
.track-card-timeline input::-moz-range-progress{height:5px;border-radius:999px;background:var(--ink)}
.track-card-timeline input::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--ink)}
.track-card-timeline input:disabled{cursor:wait;opacity:.5}
.track-card-timeline>div{display:flex;justify-content:space-between;margin-top:2px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}

/* Transport */
.track-card-controls{display:flex;align-items:center;justify-content:space-between;margin:14px -4px 0}
.track-card-controls button{position:relative;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--motion-fast) var(--ease-out),background-color var(--motion-fast) var(--ease-standard),opacity var(--motion-fast) var(--ease-standard)}
.track-card-controls button:active:not(:disabled){transform:scale(.94)}
.track-card-controls button:disabled{opacity:.28;cursor:default}
.track-card-controls svg{grid-area:1/1}
.track-card-mode{width:48px;height:48px;color:var(--muted)!important}
.track-card-mode svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.track-card-mode.is-active{color:var(--accent)!important}
.track-card-mode.is-active::after{content:"";position:absolute;bottom:4px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.track-card-mode .repeat-one{position:absolute;top:9px;right:8px;font-size:9px;font-weight:800;line-height:1;opacity:0}
.track-card-mode.is-one .repeat-one{opacity:1}
.track-card-skip{width:60px;height:60px}
.track-card-skip svg{width:32px;height:32px;fill:currentColor;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.track-card-toggle{width:80px;height:80px;background:var(--ink)!important;color:var(--surface)!important;box-shadow:0 12px 30px rgba(0,0,0,.22)}
.track-card-toggle svg{width:30px;height:30px}
.track-card-toggle .play-icon{fill:currentColor;margin-left:3px}
.track-card-toggle .pause-icon{display:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.track-card-toggle .buffer-icon{display:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.track-card.is-playing .track-card-toggle .play-icon{display:none}
.track-card.is-playing .track-card-toggle .pause-icon{display:block}
.track-card.is-buffering .track-card-toggle .play-icon,.track-card.is-buffering .track-card-toggle .pause-icon{display:none}
.track-card.is-buffering .track-card-toggle .buffer-icon{display:block;animation:player-spin .75s linear infinite}
.track-card-toggle :is(.play-icon,.pause-icon){animation:icon-swap 200ms var(--ease-out) backwards}

/* Volume: a slim slider where a mouse can use it; phones use their buttons. */
.track-card-volume.now-playing-volume{display:none;position:static;width:auto;height:auto;justify-self:auto;grid-template-columns:36px minmax(0,1fr) 40px;align-items:center;gap:8px;margin-top:10px}
@media (hover:hover) and (pointer:fine){.track-card-volume.now-playing-volume{display:grid}}
body.no-volume-control .track-card-volume.now-playing-volume{display:none}
.track-card-volume>button{width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.track-card-volume>button:hover{color:var(--ink)}
.track-card-volume>button svg{grid-area:1/1;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.track-card-volume input{--volume-progress:85%;width:100%;height:24px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}
.track-card-volume input::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(to right,var(--muted) 0,var(--muted) var(--volume-progress),var(--line) var(--volume-progress))}
.track-card-volume input::-webkit-slider-thumb{width:12px;height:12px;margin-top:-4px;-webkit-appearance:none;border:0;border-radius:50%;background:var(--ink)}
.track-card-volume output{color:var(--muted);font-size:11px;text-align:right;font-variant-numeric:tabular-nums}

/* Tiles: one visual language for everything that opens from the card. */
.track-card-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
.track-tile{position:relative;min-width:0;min-height:68px;display:grid;grid-template-columns:42px minmax(0,1fr) auto auto;align-items:center;gap:11px;padding:11px 10px 11px 11px;border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);border-radius:18px;background:color-mix(in srgb,var(--ink) 4.5%,transparent);color:var(--ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-out)}
.track-tile:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.track-tile:active{transform:scale(.985)}
.track-tile-wide{grid-column:1/-1}
.track-tile[hidden]{display:none}
.track-tile-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}
.track-tile-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.track-tile-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.track-tile-copy strong,.track-tile-copy small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track-tile-copy strong{font-size:14px;font-weight:700}
.track-tile-copy small{color:var(--muted);font-size:12px}
.track-tile-wide .track-tile-copy strong{font-size:16px}
.track-tile-wide .track-tile-copy small{font-size:13px}
.track-tile-go{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.track-tile-badge{min-width:26px;height:26px;display:grid;place-items:center;padding:0 7px;border-radius:999px;background:color-mix(in srgb,var(--ink) 12%,transparent);font-size:12px;font-weight:750;font-variant-numeric:tabular-nums}
.track-tile.is-empty{cursor:default}
.track-tile.is-empty .track-tile-go{visibility:hidden}
.track-tile.is-empty:active{transform:none}
#now-playing-lyrics-line.is-line-change{animation:title-fade 260ms var(--ease-out) backwards}
.track-tile:not(.track-tile-wide){grid-template-columns:36px minmax(0,1fr) auto;gap:9px;min-height:62px;padding:10px 10px 10px 10px;border-radius:16px}
.track-tile:not(.track-tile-wide) .track-tile-icon{width:36px;height:36px;border-radius:10px}
.track-tile:not(.track-tile-wide) .track-tile-icon svg{width:19px;height:19px}
.track-tile:not(.track-tile-wide) .track-tile-go{display:none}
.track-tile:not(.track-tile-wide) .track-tile-copy strong{font-size:13.5px}
.track-tile:not(.track-tile-wide) .track-tile-copy small{font-size:11.5px}
.track-tile-badge{min-width:24px;height:24px;padding:0 6px;font-size:11.5px}
/* A single tile (no file to save) takes the whole row. */
.track-tile:not(.track-tile-wide):only-of-type,#now-playing-download[hidden]+#now-playing-queue-open{grid-column:1/-1}

/* Phones and the Mini App: the card is the screen. */
@media (max-width:560px){
  .track-card{width:100%;height:calc(100dvh - 6px);max-height:none;margin:auto 0 0;padding:8px 16px calc(18px + env(safe-area-inset-bottom));border-right:0;border-bottom:0;border-left:0;border-radius:26px 26px 0 0}
  .track-card[open]{animation:sheet-slide-in 340ms var(--ease-sheet) backwards}
  .track-card-art{margin:14px auto 20px;width:min(100%,360px,42dvh)}
  .track-card-tiles{margin-top:18px;gap:8px}
  .track-card-controls{margin-top:10px}
}
body.telegram-mini-app .track-card{width:100%;max-width:none;height:var(--mini-viewport-height,100dvh);max-height:none;margin:auto 0 0;padding-top:max(8px,env(safe-area-inset-top));border:0;border-radius:0}
body.telegram-mini-app .track-card[open]{animation:sheet-slide-in 340ms var(--ease-sheet) backwards}
@media (max-height:700px){
  .track-card-art{width:min(100%,300px,34dvh);margin:10px auto 14px}
  .track-card-timeline{margin-top:12px}
  .track-card-tiles{margin-top:14px}
  .track-tile{min-height:60px}
}
@media (prefers-reduced-motion:reduce){
  .track-card[open],body.telegram-mini-app .track-card[open]{animation-duration:200ms;animation-timing-function:ease-out}
  .track-card-glow::before{transition:none}
}

/* Queue sheet */
.queue-dialog{width:min(460px,calc(100% - 28px));padding:24px 22px 18px}
.queue-dialog [data-close-queue]{top:16px;right:16px}
.queue-dialog .now-playing-queue{margin-top:0;padding-top:0;border-top:0}
.queue-dialog .queue-head{padding-right:48px;margin-bottom:12px}
.queue-dialog .queue-title{display:flex;align-items:baseline;gap:8px;margin:0}
.queue-dialog .queue-title strong{color:var(--ink);font-size:20px;font-weight:750;letter-spacing:-.01em;text-transform:none}
.queue-dialog .queue-title small{color:var(--quiet);font-size:13px;font-weight:650}
.queue-dialog .queue-list{max-height:min(62dvh,560px)}
@media (max-width:560px){
  .queue-dialog{box-sizing:border-box;width:100%;max-width:none;max-height:min(84dvh,720px);margin:auto 0 0;padding:20px 14px calc(14px + env(safe-area-inset-bottom));border-right:0;border-bottom:0;border-left:0;border-radius:22px 22px 0 0}
  .queue-dialog[open]{animation:sheet-slide-in 340ms var(--ease-sheet) both}
  .queue-dialog .queue-list{max-height:calc(min(84dvh,720px) - 110px)}
}

/* Full-screen lyrics: copy and send either side of play. */
.lyrics-dialog-controls{align-items:center;gap:22px}
.lyrics-dialog-action{width:48px;height:48px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink);cursor:pointer}
.lyrics-dialog-action:hover{background:color-mix(in srgb,var(--ink) 13%,transparent)}
.lyrics-dialog-action:active{transform:scale(var(--press))}
.lyrics-dialog-action svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------- lyrics in the card ---
   The stage holds the cover or, on request, the lyrics on a dark panel of the
   same size, so nothing below moves when switching. */
.track-card-stage{position:relative;width:min(100%,340px,40dvh);aspect-ratio:1;margin:18px auto 22px}
.track-card-stage>.track-card-art{width:100%;height:100%;margin:0;transition:opacity .22s ease,transform .22s var(--ease-out)}
.track-card.is-lyrics .track-card-stage>.track-card-art{opacity:0;transform:scale(.97);pointer-events:none}
.track-card-lyrics{position:absolute;inset:0;overflow:hidden;border-radius:22px;background:#0c0c0e;color:#fff;box-shadow:0 22px 60px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.06);animation:content-arrive 240ms var(--ease-out) backwards}
.track-card.has-accent .track-card-lyrics{background:linear-gradient(160deg,rgb(var(--cover-rgb) / .38),rgb(var(--cover-rgb) / .08) 60%),#0c0c0e}
.track-card-lyrics[hidden]{display:none}
.track-card-lyrics-body{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:26px 20px 45%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 80%,transparent 100%)}
.track-card-lyrics-body::-webkit-scrollbar{display:none}
.track-card-lyrics-body .lyrics-line{margin:0;padding:6px 2px;color:rgba(255,255,255,.4);font-size:clamp(17px,4.8vw,21px);font-weight:760;line-height:1.28;letter-spacing:-.015em;text-align:left;transform:none;transition:color .25s ease}
.track-card-lyrics-body .lyrics-line:first-child{margin-top:24%}
.track-card-lyrics-body .lyrics-line:hover{color:rgba(255,255,255,.7)}
.track-card-lyrics-body .lyrics-line.is-active{color:#fff;transform:none}
.track-card-lyrics-body .lyrics-line.is-gap{font-size:15px}
.track-card-lyrics-body .lyrics-plain{margin:0;padding-top:4px;color:rgba(255,255,255,.88);font-size:15px;font-weight:600;line-height:1.55;white-space:pre-wrap}
.track-card-lyrics-body .lyrics-status{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:rgba(255,255,255,.7);text-align:center}
.track-card-lyrics-body .lyrics-status svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;animation:spin 1.6s linear infinite}
.track-card-lyrics-body .lyrics-retry{border-color:rgba(255,255,255,.3);color:#fff}
.track-card-lyrics-full{position:absolute;top:10px;right:10px;width:38px;height:38px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.track-card-lyrics-full:hover{background:rgba(255,255,255,.22)}
.track-card-lyrics-full:active{transform:scale(var(--press))}
.track-card-lyrics-full svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.track-tile.is-on{background:color-mix(in srgb,var(--ink) 11%,transparent);border-color:color-mix(in srgb,var(--ink) 16%,transparent)}
.track-tile.is-on .track-tile-go{transform:rotate(90deg)}
.track-tile-go{transition:transform .2s var(--ease-out)}
@media (max-width:560px){.track-card-stage{width:min(100%,360px,42dvh);margin:14px auto 20px}}
@media (max-height:700px){.track-card-stage{width:min(100%,300px,34dvh);margin:10px auto 14px}}
@media (prefers-reduced-motion:reduce){.track-card-stage>.track-card-art{transition:none;transform:none!important}}

/* ------------------------------------------------------ card, second pass ---
   Volume is the vertical rail again, under its button in the top-left corner
   beside collapse. Lyrics no longer sit in a cover-sized box: the cover steps
   aside and the text fills the free space above the title, on the card itself. */
.track-card-top{grid-template-columns:96px minmax(0,1fr) 96px}
.track-card-top-start{display:flex;gap:8px}
.track-card-context>#now-playing-status{letter-spacing:.06em}
.track-card-top-actions{justify-content:flex-end}
.track-card .now-playing-volume{position:relative;z-index:5;width:44px;height:44px}
.track-card .now-playing-volume>button{width:44px;height:44px;background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink)}
.track-card .now-playing-volume>button:hover{background:color-mix(in srgb,var(--ink) 12%,transparent)}
.track-card .now-playing-volume-popover{left:0;top:calc(100% + 8px);border-radius:28px;background:color-mix(in srgb,var(--surface) 82%,transparent);box-shadow:0 12px 34px rgba(0,0,0,.28),0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.track-card .now-playing-volume-popover output{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
body.no-volume-control .track-card .now-playing-volume{display:none}

/* Lyrics mode */
.track-card.is-lyrics .track-card-stage{width:100%;aspect-ratio:auto;height:min(54dvh,460px);margin:10px 0 16px}
.track-card.is-lyrics .track-card-stage>.track-card-art{position:absolute;top:0;left:50%;width:0;height:0;opacity:0;transform:none}
.track-card.is-lyrics .track-card-lyrics{background:none!important;box-shadow:none;border-radius:0;overflow:visible}
.track-card-lyrics-body{padding:8px 4px 40%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%)}
.track-card-lyrics-body .lyrics-line{color:color-mix(in srgb,var(--ink) 38%,transparent);font-size:clamp(20px,5.6vw,26px);line-height:1.25}
.track-card-lyrics-body .lyrics-line:first-child{margin-top:18%}
.track-card-lyrics-body .lyrics-line:hover{color:color-mix(in srgb,var(--ink) 62%,transparent)}
.track-card-lyrics-body .lyrics-line.is-active{color:var(--ink)}
.track-card-lyrics-body .lyrics-plain{color:var(--ink);font-size:16px}
.track-card-lyrics-body .lyrics-status{color:var(--muted)}
.track-card-lyrics-body .lyrics-retry{border-color:var(--line-strong);color:var(--ink)}
.track-card-lyrics-full{top:0;right:0;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
.track-card-lyrics-full:hover{background:color-mix(in srgb,var(--ink) 14%,transparent)}
/* Phones: the card has a fixed height, so the lyrics take all that is free. */
@media (max-width:560px){
  .track-card.is-lyrics .track-card-stage{flex:1 1 0;height:auto;min-height:220px}
}
body.telegram-mini-app .track-card.is-lyrics .track-card-stage{flex:1 1 0;height:auto;min-height:220px}

/* ------------------------------------------------------- card, third pass ---
   The status line ellipsises like text again (an inline-flex dot made it clip
   under the buttons), the volume rail is centred under its button, and the
   top bar and the half tiles keep their labels whole on narrow phones. */
.track-card.is-radio-mode #now-playing-status{display:block}
.track-card.is-radio-mode #now-playing-status::before{display:inline-block;margin-right:6px;vertical-align:1px}
.track-card .now-playing-volume-popover{left:-6px;background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:0 14px 36px rgba(0,0,0,.32),0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent)}
.track-tile:not(.track-tile-wide){grid-template-columns:32px minmax(0,1fr) auto;gap:8px;padding:9px}
.track-tile:not(.track-tile-wide) .track-tile-icon{width:32px;height:32px;border-radius:9px}
.track-tile:not(.track-tile-wide) .track-tile-icon svg{width:18px;height:18px}
.track-tile:not(.track-tile-wide) .track-tile-copy strong{font-size:13px}
.track-tile:not(.track-tile-wide) .track-tile-copy small{font-size:11px}
@media (max-width:430px){
  .track-card-top{grid-template-columns:86px minmax(0,1fr) 86px;gap:6px}
  .track-card-top-start,.track-card-top-actions{gap:6px}
  .track-card-icon,.track-card .now-playing-volume,.track-card .now-playing-volume>button{width:40px;height:40px}
  .track-card .now-playing-volume-popover{left:-8px}
  .track-card-context>span:first-child{font-size:10.5px;letter-spacing:.12em}
  .track-card-context>#now-playing-status{font-size:9px}
}

/* Phones and the Mini App: the cover takes whatever height is left once the
   title, controls and tiles are placed, up to 380px, so the card fits any
   screen without scrolling (a fixed size spilled the tiles off short ones). */
@media (max-width:560px){
  .track-card-stage{flex:1 1 0;width:100%;height:auto;aspect-ratio:auto;min-height:150px;margin:12px 0 16px;display:grid;place-items:center;container-type:size}
  .track-card-stage>.track-card-art{width:min(100%,300px);width:min(100cqw,100cqh,380px);height:auto;aspect-ratio:1}
}
body.telegram-mini-app .track-card-stage{flex:1 1 0;width:100%;height:auto;aspect-ratio:auto;min-height:150px;margin:12px 0 16px;display:grid;place-items:center;container-type:size}
body.telegram-mini-app .track-card-stage>.track-card-art{width:min(100%,300px);width:min(100cqw,100cqh,380px);height:auto;aspect-ratio:1}

/* Short phone screens and a Telegram window (under ~820px tall): the tiles
   share one row and the transport is a size smaller, so the cover, not the
   chrome, gets the height. Tall phones keep the two-row layout. */
@media (max-width:560px) and (max-height:820px){
  .track-card-stage{margin:6px 0 12px}
  .track-card-heading h2{font-size:clamp(20px,5.6vw,24px)}
  .track-card-heading p{margin-top:4px;font-size:14px}
  .track-card-timeline{margin-top:10px}
  .track-card-timeline input{height:26px}
  .track-card-controls{margin-top:4px}
  .track-card-toggle{width:66px;height:66px}
  .track-card-toggle svg{width:26px;height:26px}
  .track-card-skip{width:52px;height:52px}
  .track-card-skip svg{width:28px;height:28px}
  .track-card-mode{width:44px;height:44px}
  .track-card-tiles{display:flex;gap:8px;margin-top:12px}
  .track-card-tiles>.track-tile{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:10px;border-radius:16px}
  .track-card-tiles>.track-tile[hidden]{display:none}
  .track-card-tiles .track-tile .track-tile-icon{width:32px;height:32px;border-radius:9px}
  .track-card-tiles .track-tile .track-tile-icon svg{width:18px;height:18px}
  .track-card-tiles .track-tile .track-tile-copy{width:100%}
  .track-card-tiles .track-tile .track-tile-copy strong{font-size:12.5px;line-height:1.2;white-space:normal;overflow-wrap:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .track-card-tiles .track-tile .track-tile-copy small,.track-card-tiles .track-tile .track-tile-go{display:none}
  .track-card-tiles .track-tile-badge{position:absolute;top:10px;right:10px;min-width:22px;height:22px;padding:0 6px;font-size:11px}
}

/* ============================================================ mini player ===
   Phones and the Mini App: a floating plate in the card's language. Cover,
   title, heart, play and next; a hairline of progress on the bottom edge; the
   plate tinted by the cover. A tap or an upward swipe opens the card, a
   sideways swipe changes track. Scoped by id so it outranks the earlier
   per-layout player grids; the desktop bar is unchanged. */
.player-plate{--plate-bg:color-mix(in srgb,var(--surface) 92%,transparent)}
@media (max-width:820px){
  #audio-player{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));padding:0;border:1px solid color-mix(in srgb,var(--ink) 9%,transparent);border-radius:18px;background:color-mix(in srgb,var(--surface) 90%,transparent);box-shadow:0 12px 34px rgba(0,0,0,.22);overflow:hidden;-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2)}
  html[data-theme="dark"] #audio-player{background:color-mix(in srgb,var(--surface) 86%,transparent);box-shadow:0 12px 34px rgba(0,0,0,.45)}
  #audio-player.has-accent{background:linear-gradient(100deg,color-mix(in srgb,rgb(var(--cover-rgb)) 30%,var(--surface)) 0%,color-mix(in srgb,rgb(var(--cover-rgb)) 12%,var(--surface)) 70%)}
  #audio-player::before,#audio-player::after{content:"";position:absolute;left:14px;bottom:0;height:2px;border-radius:2px;pointer-events:none}
  #audio-player::before{right:14px;background:color-mix(in srgb,var(--ink) 12%,transparent)}
  #audio-player::after{width:calc((100% - 28px) * var(--player-fraction,0));background:var(--ink);transition:width .25s linear}
  #audio-player .player-inner{box-sizing:border-box;width:100%;height:64px;min-height:0;margin:0;padding:0 8px 0 10px;display:grid;grid-template-columns:44px minmax(0,1fr) 40px 44px 40px;grid-template-rows:64px;grid-template-areas:"cover copy like toggle next";column-gap:6px;row-gap:0;align-items:center}
  #audio-player .player-cover{grid-area:cover;width:44px;height:44px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
  #audio-player .player-copy{grid-area:copy;min-width:0;padding:0 4px;touch-action:none}
  #audio-player .player-copy strong{font-size:14px;font-weight:700}
  #audio-player .player-copy span{margin-top:1px;color:var(--muted);font-size:12px}
  #audio-player .player-like{grid-area:like;display:grid;width:40px;height:40px;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);visibility:visible}
  #audio-player .player-like svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
  #audio-player .player-like.is-liked{color:#e0245e}
  html[data-theme="dark"] #audio-player .player-like.is-liked{color:#ff5c8a}
  #audio-player .player-like.is-liked svg{fill:currentColor}
  #audio-player .player-toggle{grid-area:toggle;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--surface);box-shadow:none}
  #audio-player .player-toggle svg{width:18px;height:18px}
  #audio-player #player-next{grid-area:next;display:grid;width:40px;height:40px;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink)}
  #audio-player #player-next svg{width:22px;height:22px;fill:currentColor;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
  #audio-player #player-next:disabled{opacity:.3}
  #audio-player #player-previous,#audio-player .player-timeline,#audio-player .player-volume,#audio-player .player-close{display:none}
  #audio-player [hidden]{display:none!important}
  /* The page scrolls clear of the plate. */
  body.has-player .app-shell{padding-bottom:calc(88px + env(safe-area-inset-bottom))!important}
  body:not(.telegram-mini-app).has-player .app-nav{bottom:calc(84px + env(safe-area-inset-bottom))!important}
}
body.telegram-mini-app #audio-player{bottom:calc(72px + env(safe-area-inset-bottom))}
body.telegram-mini-app.has-player .app-shell{padding-bottom:calc(150px + env(safe-area-inset-bottom))!important}
body.telegram-mini-app.has-player .workspace{padding-bottom:calc(160px + env(safe-area-inset-bottom))!important}
@media (min-width:821px){
  body.telegram-mini-app #audio-player{left:max(8px,calc(50% - 360px));right:max(8px,calc(50% - 360px))}
}

/* The plate inside album and recommendation sheets. */
.sheet-player{padding:8px 8px calc(8px + env(safe-area-inset-bottom));border-top:0;background:transparent;box-shadow:none;display:block;pointer-events:none}
html[data-theme="dark"] .sheet-player{box-shadow:none}
.sheet-player-plate{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 40px 44px 40px;align-items:center;gap:4px;height:60px;padding:0 6px 0 8px;overflow:hidden;border:1px solid color-mix(in srgb,var(--ink) 9%,transparent);border-radius:16px;background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:0 10px 28px rgba(0,0,0,.2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);pointer-events:auto}
.sheet-player-plate.has-accent{background:linear-gradient(100deg,color-mix(in srgb,rgb(var(--cover-rgb)) 30%,var(--surface)) 0%,color-mix(in srgb,rgb(var(--cover-rgb)) 12%,var(--surface)) 70%)}
.sheet-player .sheet-player-progress{top:auto;bottom:0;left:12px;z-index:1;height:2px;border-radius:2px}
.sheet-player-plate::before{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;background:color-mix(in srgb,var(--ink) 12%,transparent)}
.sheet-player-main{grid-template-columns:42px minmax(0,1fr)}
.sheet-player-cover{width:42px;height:42px;border-radius:10px}
.sheet-player-like{width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.sheet-player-like svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.sheet-player-like.is-liked{color:#e0245e}
html[data-theme="dark"] .sheet-player-like.is-liked{color:#ff5c8a}
.sheet-player-like.is-liked svg{fill:currentColor}
.sheet-player-like[hidden]{display:none}
.sheet-player-toggle{width:42px;height:42px}
@media (prefers-reduced-motion:reduce){#audio-player::after{transition:none}}

/* ============================================================ one language ===
   The card's vocabulary everywhere: soft tiles (a faint ink tint, a hairline
   border, 18px corners), icons in rounded chips, lists grouped inside a tile
   with hairline separators, and one heading scale. Defined once as tokens so
   later surfaces can simply use them. */
:root{
  --tile-bg:color-mix(in srgb,var(--ink) 4%,transparent);
  --tile-bg-hover:color-mix(in srgb,var(--ink) 7.5%,transparent);
  --tile-border:color-mix(in srgb,var(--ink) 8%,transparent);
  --tile-sep:color-mix(in srgb,var(--ink) 7%,transparent);
  --tile-radius:18px;
  --chip-bg:color-mix(in srgb,var(--ink) 8%,transparent);
}

/* ---- home: search and three tiles ---- */
.download-form{border-radius:20px}
.download-form button[type="submit"]{border-radius:14px}
.form-meta,body.telegram-mini-app .form-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-height:0;padding:12px 0 0;font-size:13px}
.form-meta button,body.telegram-mini-app .form-meta button,.form-meta #recognize-button,.form-meta .delivery-button{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:10px;min-width:0;min-height:80px;margin:0;padding:12px;border:1px solid var(--tile-border);border-radius:var(--tile-radius);background:var(--tile-bg);color:var(--ink);font-size:13px;font-weight:650;line-height:1.2;text-align:left;white-space:normal;cursor:pointer;transition:background-color var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-out)}
.form-meta button:hover{background:var(--tile-bg-hover);color:var(--ink)}
.form-meta button:active{transform:scale(.97)}
.form-meta button>svg.ui-icon,.form-meta .delivery-button>svg:first-child{box-sizing:border-box;width:34px;height:34px;flex:0 0 34px;padding:8px;border-radius:10px;background:var(--chip-bg);fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.form-meta button>span,.form-meta .delivery-button>span{max-width:100%;overflow:hidden;white-space:normal;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.form-meta .delivery-button .delivery-chevron{position:absolute;top:12px;right:10px;width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2}
.quota-line{margin-top:12px}

/* ---- tiles ---- */
.welcome-card,.active-job,.playlist-card,.plan-capabilities,.usage,
body.telegram-mini-app .profile-preferences,.search-results{border:1px solid var(--tile-border);border-radius:var(--tile-radius);background-color:var(--tile-bg);box-shadow:none}
.search-results{background-color:var(--surface);box-shadow:var(--elev-2)}
.welcome-card{padding:18px}
.welcome-card li>span:first-child,.welcome-card .welcome-icon{border-radius:10px;background:var(--chip-bg)}
.usage{padding:14px 16px;margin-top:10px}
.usage+.usage{margin-top:8px}
body.telegram-mini-app .profile-preferences{display:block;margin-top:14px;padding:4px 16px}
body.telegram-mini-app .profile-preferences h3{margin:12px 0 4px}
body.telegram-mini-app .profile-preferences button,body.telegram-mini-app .profile-preferences a{border-color:var(--tile-sep)}
.upgrade-button{border-radius:16px}
.playlist-card:hover{background-color:var(--tile-bg-hover)}

/* ---- lists grouped in a tile ---- */
.history-list,body.telegram-mini-app .history-list{padding:2px 14px;border:1px solid var(--tile-border);border-radius:var(--tile-radius);background:var(--tile-bg)}
.history-list:empty{display:none}
.history-item,body.telegram-mini-app .history-item{border-top-color:var(--tile-sep)}
.history-item:first-child{border-top:0}
.history-icon,.history-play,.playlist-track-cover,.queue-cover,.track-cover{border-radius:10px}
.history-more{margin-top:10px;border-radius:14px}

/* ---- menus ---- */
.action-sheet-icon{border-radius:10px;background:var(--chip-bg)}
.action-tile{border:1px solid var(--tile-border);border-radius:16px;background:var(--tile-bg)}
.action-tile:hover{background:var(--tile-bg-hover)}
.action-tile.is-on{background:var(--chip-bg)}

/* ---- headings ---- */
.block-heading h2{font-size:clamp(22px,5.4vw,28px);font-weight:760;letter-spacing:-.02em}
.eyebrow{letter-spacing:.14em}
.plan-capabilities{padding:14px 16px}
.playlist-detail.playlist-empty{min-height:220px;border:1px solid var(--tile-border);border-radius:var(--tile-radius);background:var(--tile-bg)}
.block-heading>button,#refresh-button{border:1px solid var(--tile-border);border-radius:14px;background:var(--tile-bg)}
/* Wide screens: the same tiles laid out in a row, icon beside the label. */
@media (min-width:821px){
  body:not(.telegram-mini-app) .form-meta button,body:not(.telegram-mini-app) .form-meta #recognize-button,body:not(.telegram-mini-app) .form-meta .delivery-button{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;min-height:60px;padding:10px 14px}
  body:not(.telegram-mini-app) .form-meta .delivery-button .delivery-chevron{top:50%;right:14px;margin-top:-8px}
}
/* Tablets: the plate stays a plate, centred, rather than spanning the screen. */
@media (max-width:820px){#audio-player{left:max(8px,calc(50% - 360px));right:max(8px,calc(50% - 360px))}}
/* One line for every label ("На устройство" wrapped on phones): the label
   scales a little with its tile instead of breaking. */
.form-meta button{container-type:inline-size}
.form-meta button>span,.form-meta .delivery-button>span{display:block;white-space:nowrap;text-overflow:ellipsis;font-size:clamp(11px,13.8cqi,13px);letter-spacing:-.01em}
@media (max-width:420px){
  .form-meta button,body.telegram-mini-app .form-meta button,.form-meta #recognize-button,.form-meta .delivery-button{padding:11px 10px}
}

/* ------------------------------------------------------ card on a desktop ---
   A wide screen gets a player, not a phone-sized sheet: the cover (or the
   lyrics) on the left, everything else in a column on the right, all of it in
   view without scrolling. The Mini App keeps its full-screen phone layout. */
@media (min-width:900px){
  body:not(.telegram-mini-app) .track-card{width:min(1180px,calc(100% - 64px));height:fit-content;max-height:calc(100dvh - 48px);padding:30px 40px 32px;border-radius:32px}
  body:not(.telegram-mini-app) .track-card[open]{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,1fr);grid-template-rows:auto auto auto auto auto;grid-template-areas:"stage top" "stage heading" "stage timeline" "stage controls" "stage tiles";column-gap:44px;row-gap:0;align-content:center;align-items:center}
  body:not(.telegram-mini-app) .track-card-top{grid-area:top;align-self:end}
  body:not(.telegram-mini-app) .track-card-stage,body:not(.telegram-mini-app) .track-card.is-lyrics .track-card-stage{grid-area:stage;align-self:center;justify-self:center;width:min(100%,calc(100dvh - 112px),600px);height:auto;aspect-ratio:1;min-height:0;margin:0;flex:none;container-type:normal;display:block}
  body:not(.telegram-mini-app) .track-card-stage>.track-card-art{width:100%;height:100%;margin:0;border-radius:26px}
  body:not(.telegram-mini-app) .track-card-heading{grid-area:heading;margin-top:26px;text-align:left}
  body:not(.telegram-mini-app) .track-card-heading h2{font-size:clamp(28px,2.6vw,38px)}
  body:not(.telegram-mini-app) .track-card-heading p{margin:8px 0 0;font-size:17px}
  body:not(.telegram-mini-app) .track-card-timeline{grid-area:timeline;margin-top:24px}
  body:not(.telegram-mini-app) .track-card-controls{grid-area:controls;margin:14px -6px 0}
  body:not(.telegram-mini-app) .track-card-tiles{grid-area:tiles;margin-top:24px}
  body:not(.telegram-mini-app) .track-card-glow{height:100%}
  /* Lyrics fill the square the cover leaves. */
  body:not(.telegram-mini-app) .track-card.is-lyrics .track-card-lyrics-body .lyrics-line{font-size:clamp(22px,2.2vw,30px)}
}

/* Swipe down to collapse the card. */
.track-card.is-dragging{transition:none!important}
.track-card.is-settling{transition:transform .26s var(--ease-out)!important}