/* =================================================================== редизайн для телефона (v2) */
.mini, .sheet, .menu-backdrop { display: none; }
.th img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.th { overflow: hidden; position: relative; }
.th .eq { display: none !important; }
.menu:not(.as-sheet) .menu-head { display: none; }
* { -webkit-tap-highlight-color: transparent; }
.lfilter { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; margin: 0 0 14px; max-width: 420px; border-radius: 12px; background: var(--card); color: var(--mute); }
.lfilter svg { width: 18px; height: 18px; }
.lfilter input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font: inherit; font-size: 15px; }

@media (max-width: 700px) {
  :root { --tabbar: 56px; --mini: 62px; }
  body { --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); }
  body, .main { user-select: none; -webkit-user-select: none; }
  input { user-select: text; -webkit-user-select: text; }

  /* каркас */
  .player { display: none !important; }
  .main { top: 0; bottom: calc(var(--tabbar) + var(--sb)); padding-top: 0; }
  .view { padding: calc(var(--st) + 10px) 16px calc(var(--mini) + 28px); }
  body.has-back .view, body[data-route="search"] .view { padding-top: 6px; }
  .bg { background: radial-gradient(500px 360px at 80% -10%, rgba(var(--acc-rgb), .28), transparent 70%); }

  /* шапка: только «назад» или поиск */
  .top { padding: calc(var(--st) + 6px) 12px 8px; gap: 8px; background: linear-gradient(var(--bg) 70%, transparent); }
  body:not(.has-back):not([data-route="search"]) .top { display: none; }
  .nav-arrows .icon-btn:last-child { display: none; }
  body:not(.has-back) .nav-arrows { display: none; }
  body.has-back:not([data-route="search"]) .search { display: none; }
  .search { max-width: none; }
  .search input { height: 44px; border-radius: 12px; font-size: 16px; }
  .net-badge { margin-left: 0; }

  h1.h { font-size: 30px; letter-spacing: -.8px; margin: 6px 0 16px; }
  h2.h { font-size: 18px; margin: 26px 0 12px; }

  /* нижнее меню */
  .tabbar { height: calc(var(--tabbar) + var(--sb)); background: rgba(10, 9, 12, .94); }
  .tabbar a { font-size: 10.5px; gap: 2px; }
  .tabbar a svg { width: 24px; height: 24px; }

  /* мини-плеер */
  body.has-track .mini { display: flex; }
  .mini { position: fixed; left: 8px; right: 8px; bottom: calc(var(--tabbar) + var(--sb) + 8px); height: var(--mini); z-index: 12;
    align-items: center; gap: 10px; padding: 0 6px 0 8px; border-radius: 16px; overflow: hidden;
    background: linear-gradient(90deg, rgba(var(--acc-rgb), .32), rgba(var(--acc-rgb), .14)), rgba(28, 26, 33, .92);
    backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
  .mini:active { transform: scale(.99); }
  .mini-art { width: 46px; height: 46px; border-radius: 10px; background: var(--card-h) center/cover; flex: none; }
  .mini-meta { flex: 1; min-width: 0; }
  .mini-title { font-weight: 800; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mini-artist { font-size: 12.5px; color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
  .mini .icon-btn { width: 40px; height: 40px; color: #fff; }
  .mini .icon-btn svg { width: 24px; height: 24px; }
  .mini-like.on svg { fill: #fff; stroke: #fff; }
  .mini-play { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
  .mini-play svg { width: 28px; height: 28px; }
  .mini-prog { position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: rgba(255, 255, 255, .12); border-radius: 2px; }
  .mini-prog i { display: block; height: 100%; width: 0; background: #fff; border-radius: 2px; }

  /* полноэкранный плеер */
  .sheet { display: block; position: fixed; inset: 0; z-index: 40; background: #0d0c0f; transform: translateY(105%);
    transition: transform .38s cubic-bezier(.2, .8, .2, 1); will-change: transform; overflow: hidden; }
  body.sheet-open .sheet { transform: none; }
  .sheet-bg { position: absolute; inset: -25%; background: var(--img) center/cover; filter: blur(70px) saturate(1.5) brightness(.5); transform: scale(1.15); }
  .sheet-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(13, 12, 15, .1), rgba(13, 12, 15, .75) 70%, #0d0c0f); }
  .sheet-inner { position: relative; height: 100%; display: flex; flex-direction: column; gap: 18px;
    padding: calc(var(--st) + 6px) 24px calc(var(--sb) + 22px); }
  .sheet-top { display: flex; align-items: center; justify-content: space-between; }
  .sheet-top .icon-btn { color: #fff; width: 44px; height: 44px; }
  .sheet-top .icon-btn svg { width: 28px; height: 28px; }
  .sheet-src { text-align: center; min-width: 0; flex: 1; }
  .sheet-src small { display: block; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255, 255, 255, .6); font-weight: 800; }
  .sheet-src b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
  .sheet-art-wrap { flex: 1; min-height: 0; display: grid; place-items: center; }
  .sheet-art { width: min(86vw, 44vh); aspect-ratio: 1; border-radius: 16px; background: #222 center/cover; box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
    transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
  body.paused .sheet-art { transform: scale(.88); }
  .sheet-row { display: flex; align-items: center; gap: 4px; }
  .sheet-meta { flex: 1; min-width: 0; }
  .sheet-title { font-family: Unbounded; font-weight: 800; font-size: 22px; letter-spacing: -.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sheet-artist { font-size: 16px; color: rgba(255, 255, 255, .72); font-weight: 600; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sheet-row .icon-btn { color: rgba(255, 255, 255, .85); width: 46px; height: 46px; }
  .sheet-row .icon-btn svg { width: 26px; height: 26px; }
  .sheet-row .like.on svg { fill: var(--acc); stroke: var(--acc); }
  .sheet-seek .bar { height: 24px; }
  .sheet-seek .bar::before, .sheet-seek .bar .fillbar, .sheet-seek .bar .buf { height: 5px; }
  .sheet-seek .bar::before { background: rgba(255, 255, 255, .18); }
  .sheet-seek .bar .buf { background: rgba(255, 255, 255, .28); }
  .sheet-seek .bar .fillbar { background: #fff; }
  .sheet-seek .bar .knob { opacity: 1; width: 14px; height: 14px; }
  .sheet-times { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; margin-top: 2px; }
  .sheet-ctl { display: flex; align-items: center; justify-content: space-between; }
  .sheet-ctl .icon-btn { color: #fff; }
  .sheet-ctl .icon-btn svg { width: 26px; height: 26px; }
  .sheet-ctl .icon-btn.big { width: 60px; height: 60px; }
  .sheet-ctl .icon-btn.big svg { width: 36px; height: 36px; }
  .sheet-ctl .toggle { color: rgba(255, 255, 255, .6); }
  .sheet-ctl .toggle.on { color: var(--acc); }
  .sheet-play { width: 76px; height: 76px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
  .sheet-play:active { transform: scale(.94); }
  .sheet-play svg { width: 34px; height: 34px; }
  #sheetRepeat .one { display: none; position: absolute; font-style: normal; font-size: 9px; font-weight: 800; top: 13px; left: 0; right: 0; text-align: center; }
  #sheetRepeat.one .one { display: block; }
  .sheet-extra { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .sheet-extra button { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 0; border-radius: 12px; color: rgba(255, 255, 255, .75); font-size: 11.5px; font-weight: 700; }
  .sheet-extra button:active { background: rgba(255, 255, 255, .08); }
  .sheet-extra svg { width: 24px; height: 24px; }
  .sheet-extra .on, .sheet-extra .saved { color: var(--acc); }
  .sheet-extra .loading svg { animation: pulse 1s ease-in-out infinite; }

  /* панель «Очередь/Текст» поверх плеера */
  .panel { z-index: 45; top: 0; bottom: 0; width: 100%; padding-top: var(--st); padding-bottom: var(--sb); background: rgba(16, 15, 19, .98); }
  .lyrics { font-size: 24px; padding-bottom: 50vh; }

  /* строки треков */
  .tracks { margin: 0 -4px; }
  .tr { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; padding: 6px 4px; border-radius: 12px; content-visibility: auto; contain-intrinsic-size: auto 64px; }
  .tr .n, .tr .tal, .tr .d, .tr .lk { display: none !important; }
  .tr:active { background: rgba(255, 255, 255, .06); }
  .tr .th { width: 52px; height: 52px; border-radius: 9px; }
  .tr .tt { font-size: 15px; }
  .tr .ta { font-size: 13px; margin-top: 3px; }
  .tr .more, .tr .rmoff { opacity: 1 !important; width: 40px; height: 40px; color: var(--mute); }
  .tr.playing .th .eq { display: flex !important; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); align-items: center; height: auto; }
  .tracks.compact .tr { grid-template-columns: 52px minmax(0, 1fr) auto; }

  /* главная */
  .wave-hero { height: 330px; min-height: 280px; margin: 4px 0 16px; border-radius: 22px; }
  .wave-play { font-size: 34px; gap: 10px; }
  .wave-tune { top: auto; bottom: 14px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile { padding: 10px; gap: 10px; border-radius: 14px; }
  .tile-ic { width: 40px; height: 40px; border-radius: 10px; }
  .tile-ic svg { width: 20px; height: 20px; }
  .tile b { font-size: 13.5px; }
  .tile small { font-size: 11.5px; }
  .row { grid-auto-columns: 142px; gap: 12px; margin: 0 -16px; padding: 0 16px 6px; scroll-padding: 16px; }
  .card { padding: 4px; }
  .card:hover { background: none; }
  .card .art .pbtn { display: none; }
  .card .t { font-size: 13.5px; margin-top: 8px; }
  .card .s { font-size: 12px; }
  .kbd-help { display: none; }

  /* шапки альбома / исполнителя / плейлиста / «Любимых» */
  .hero { flex-direction: column; align-items: center; text-align: center; gap: 14px; margin: 4px 0 18px; }
  .hero .cover { width: 208px; height: 208px; border-radius: 14px; }
  .hero .title { font-size: 28px; letter-spacing: -.8px; margin: 6px 0 8px; }
  .hero .kind { font-size: 11px; }
  .hero .sub { font-size: 13.5px; }
  .actions { justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
  .big-play { width: 56px; height: 56px; }
  .pill { padding: 9px 14px; font-size: 13.5px; }
  .off-panel { justify-content: center; gap: 12px; }
  .lfilter { max-width: none; }
  .desc { font-size: 14px; }

  /* поиск */
  .tabs { flex-wrap: nowrap; overflow-x: auto; margin: 4px -16px 6px; padding: 0 16px; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: none; }
  .top-result { gap: 6px; }
  .top-card { padding: 16px; }
  .top-card .t { font-size: 22px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* меню «⋯» — панель снизу */
  .menu-backdrop { position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, .5); }
  .menu-backdrop.on { display: block; animation: pop .15s; }
  .menu.as-sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto; min-width: 0; z-index: 60; max-height: 78vh; overflow-y: auto;
    border-radius: 20px 20px 0 0; padding: 8px 10px calc(var(--sb) + 12px); border: 0; background: #1f1c24; animation: up .25s cubic-bezier(.2, .8, .2, 1); }
  @keyframes up { from { transform: translateY(100%); } }
  .menu.as-sheet button { padding: 13px 12px; font-size: 15.5px; }
  .menu.as-sheet button svg { width: 22px; height: 22px; }
  .menu-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px 14px; border-bottom: 1px solid #36323d; margin-bottom: 6px; }
  .menu-head b { display: block; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .menu-head small { color: var(--dim); font-size: 13px; }
  .menu-head > span:last-child { min-width: 0; }
  .menu-art { width: 46px; height: 46px; border-radius: 9px; background: var(--card-h) center/cover; flex: none; }

  .toasts { bottom: calc(var(--tabbar) + var(--sb) + var(--mini) + 18px); }
  .toast { font-size: 13.5px; text-align: center; }
  .full { display: none !important; }
}