/* Phone layout keeps the same player, queue and audio graph as the desktop app. */
.mobile-nav,.mobile-library,.mobile-more,.mobile-sidebar-close,.mobile-scrim { display:none; }
#mobileMore { display:none; }
.remote-server [data-go="local"],.remote-server [data-sec="local"] { display:none; }
@media (max-width:700px), (max-width:1000px) and (pointer:coarse) {
  :root { --g:10px; --side-w:0px; --player-h:72px; --phone-nav:calc(64px + env(safe-area-inset-bottom)); }
  html,body { height:100%;overscroll-behavior:none; }
  input,select,textarea { font-size:16px; }
  button,a,input { -webkit-tap-highlight-color:transparent;touch-action:manipulation; }
  .app { height:100dvh; }
  .main { padding:calc(72px + env(safe-area-inset-top)) 0 calc(var(--phone-nav) + var(--player-h) + 24px); }
  .view { padding:8px 18px 24px; }
  .top,.app:has(#queuePanel:not([hidden])) .top { left:12px;right:12px;top:calc(10px + env(safe-area-inset-top));gap:6px; }
  .top .hist-btns { display:none; }
  .top .search { padding:0 14px;height:44px;min-width:0; }
  .top-me { padding:4px; }
  .mobile-library { display:grid;width:44px;height:44px;place-items:center;flex:none; }
  .mobile-nav { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:absolute;bottom:0;left:0;right:0;z-index:6;height:var(--phone-nav);padding:4px 10px calc(4px + env(safe-area-inset-bottom));background:rgba(12,12,12,.9);backdrop-filter:blur(22px);border-top:1px solid #ffffff0d; }
  .mobile-nav a { flex-direction:column;gap:3px;font-size:10px;padding:6px 2px;min-height:48px; }
  .mobile-nav svg { width:22px;height:22px; }
  .side { left:10px;top:calc(10px + env(safe-area-inset-top));bottom:calc(var(--phone-nav) + 10px);width:min(320px,calc(100vw - 40px));padding:16px;z-index:15;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-108%);transition:transform 420ms var(--motion-ease),opacity 220ms,visibility 0s 420ms;background:rgba(15,15,15,.96); }
  .mobile-library-open .side { opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s; }
  .side .nav { margin-top:40px; }
  .side .nav a { font-size:14px;justify-content:flex-start;min-height:46px; }
  .side-h span,.pls a span,.me-chip span { display:flex; }
  .side-h { justify-content:space-between; }
  .pls a,.me-chip { justify-content:flex-start; }
  .side .mobile-sidebar-close { display:grid;position:absolute;right:16px;top:12px;width:44px;height:44px;place-items:center; }
  .mobile-scrim:not([hidden]) { display:block;position:fixed;inset:0;z-index:14;background:#0008;backdrop-filter:blur(5px); }
  .player { bottom:calc(var(--phone-nav) + 8px);left:10px;right:10px;height:var(--player-h);padding:8px 10px;display:grid;grid-template-columns:minmax(0,1fr) 86px 38px;gap:4px;border-radius:22px; }
  .p-left { gap:10px;min-width:0; }
  .p-cover { width:46px;height:46px;border-radius:12px; }
  .p-meta { flex:1; }
  .p-title { font-size:13px; }
  .p-artist { font-size:11px; }
  .p-left #pLike { display:none; }
  .p-center { width:auto;gap:0; }
  .p-ctrl { gap:0; }
  .p-ctrl #prev,.p-ctrl #shuffle,.p-ctrl #repeat { display:none; }
  .p-ctrl #next { width:38px;height:44px; }
  .player .play-btn { width:44px;height:44px; }
  .p-seek { display:none; }
  .p-right { display:flex;gap:0; }
  .player .p-right > :not(.lg-layers) { display:none; }
  .p-right #mobileMore { display:grid;width:38px;height:44px;place-items:center; }
  .mobile-tools-open .p-right { position:absolute;bottom:calc(100% + 10px);right:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;max-width:calc(100vw - 20px);padding:10px;background:#171717f5;border:1px solid #ffffff18;border-radius:20px;box-shadow:0 12px 40px #0008; }
  .mobile-tools-open .player .p-right > :not(.lg-layers) { display:flex; }
  .mobile-tools-open .p-right > .vol { width:80px; }
  .player .icon-btn:not(.like) { width:40px;height:44px; }
  .home-heading h1,h1.h { font-size:28px; }
  .hero { min-height:150px;gap:16px;padding:22px;border-radius:24px; }
  .hero h3 { font-size:25px; }
  .hero p { font-size:12px; }
  .hero .fab.big { width:56px;height:56px;flex:none; }
  .cards { grid-auto-columns:140px;gap:14px; }
  h2.h { font-size:20px; }
  .chips,.tabs { flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; }
  .chip { flex:none;min-height:40px; }
  .list-head { display:none; }
  .row { grid-template-columns:46px minmax(0,1fr) 38px 38px;gap:8px;padding:0;height:64px; }
  .row .n,.row .alb,.row .src,.row .dur { display:none; }
  .row .cov { width:46px;height:46px;border-radius:10px; }
  .row .like,.row .more { opacity:1;width:38px;height:44px; }
  .row .t { font-size:14px; }
  .row .a { font-size:12px; }
  .pl-head { align-items:center;gap:18px; }
  .pl-cover { width:120px;height:120px;border-radius:18px; }
  .pl-name { font-size:29px; }
  .pl-kind,.pl-sub { font-size:11px; }
  .prof-hero { gap:18px;padding:28px 20px;flex-wrap:wrap; }
  .avatar.xl { width:108px;height:108px;font-size:45px; }
  .tile { padding:16px; }
  .tile b { font-size:26px; }
  .a-hero { height:290px; }
  .a-name { font-size:46px; }
  .a-hero-body { padding:22px; }
  .settings-card { padding:20px; }
  .cursor-settings { display:none; }
  .queue,.eq-panel { position:absolute;left:10px;right:10px;top:auto;bottom:calc(var(--phone-nav) + var(--player-h) + 20px);width:auto;max-height:calc(100dvh - var(--phone-nav) - var(--player-h) - 80px);overflow-y:auto;border-radius:24px; }
  .app:has(#queuePanel:not([hidden])) .main { padding-right:0; }
  .queue { height:min(480px,60dvh); }
  .eq-panel { z-index:12;padding:18px 12px; }
  .eq-head { padding:0 6px; }
  .eq-presets { gap:5px; }
  .menu { max-width:calc(100vw - 24px);max-height:75dvh;overflow-y:auto; }
  .menu button { min-height:44px; }
  dialog,dialog form,.prof-dlg form { max-width:calc(100vw - 28px); }
  .prof-edit { flex-direction:column; }
  .prof-fields { width:100%; }
  .auth { overflow-y:auto;padding:16px 0;place-items:safe center; }
  .auth-card { padding:28px 24px; }
  .toasts { bottom:calc(var(--phone-nav) + var(--player-h) + 22px);width:calc(100vw - 32px); }
  .toast { max-width:100%;font-size:13px; }
  body.np-open { --player-h:190px; }
  body.np-open .mobile-nav { display:none; }
  body.np-open .player { bottom:calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:center;gap:12px;padding:14px 16px; }
  body.np-open .p-left { display:none; }
  body.np-open .p-center { width:100%;gap:12px; }
  body.np-open .p-ctrl { width:100%;justify-content:space-evenly; }
  body.np-open .p-ctrl #prev,body.np-open .p-ctrl #shuffle,body.np-open .p-ctrl #repeat { display:grid;place-items:center; }
  body.np-open .play-btn { width:58px;height:58px; }
  body.np-open .p-seek { display:flex; }
  body.np-open .p-right,body.np-open.mobile-tools-open .p-right { position:static;display:flex;gap:4px;justify-content:center;padding:0;background:none;border:0;box-shadow:none; }
  body.np-open .player .p-right > :not(.lg-layers) { display:flex; }
  body.np-open .p-right :is(#mobileMore,#muteBtn,.vol,[data-act="openNp"]) { display:none; }
  .np .np-body,.np.has-lyrics .np-body,.np.has-clip.has-lyrics .np-body { bottom:calc(var(--player-h) + env(safe-area-inset-bottom) + 30px);padding:calc(84px + env(safe-area-inset-top)) 24px 0;display:flex;align-items:center;justify-content:center; }
  .np:not(.has-lyrics) .np-left,.np.ember-mode:not(.has-lyrics) .np-left,.np.has-clip:not(.has-lyrics) .np-left { display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;width:100%; }
  .np .np-cover,.np.ember-mode:not(.has-lyrics):not(.has-clip) .np-cover { width:min(72vw,calc(100dvh - var(--player-h) - 230px),340px); }
  .np.has-clip .np-cover,.np.ember-mode.has-clip:not(.has-lyrics) .np-cover { width:min(calc(100vw - 40px),calc((100dvh - var(--player-h) - 230px) * 16 / 9)); }
  .np .np-meta h1,.np.ember-mode:not(.has-lyrics) .np-meta h1 { font-size:clamp(22px,6vw,30px);margin:0 0 8px;line-height:1.2; }
  .np .np-meta h1 { display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }
  .np .np-artist { font-size:16px; }
  .np .np-album { font-size:12px; }
  .np.has-lyrics .np-left { display:none; }
  .np.has-lyrics .lyrics { height:100%;width:100%;text-align:left; }
  .ly-line { font-size:26px; }
  .np-close,.np-clip,.np-lyr,.icon-btn.np-lyr.on { top:calc(16px + env(safe-area-inset-top));width:44px;height:44px; }
  .np-close { left:18px; }.np-lyr,.icon-btn.np-lyr.on { right:18px; }.np-clip { right:18px; }
  .range::-webkit-slider-thumb { opacity:1;width:16px;height:16px;margin-top:-6px; }
  .range { min-height:30px; }
}
@media (max-width:1000px) and (pointer:coarse) and (max-height:500px) {
  :root { --phone-nav:calc(52px + env(safe-area-inset-bottom));--player-h:64px; }
  .main { padding-top:62px; }
  body.np-open { --player-h:135px; }
  .np .np-body { padding:60px 32px 0;bottom:calc(var(--player-h) + 20px); }
  .np:not(.has-lyrics) .np-left,.np.ember-mode:not(.has-lyrics) .np-left,.np.has-clip:not(.has-lyrics) .np-left { flex-direction:row;justify-content:center;gap:24px; }
  .np .np-cover,.np.ember-mode:not(.has-lyrics):not(.has-clip) .np-cover { width:min(30dvh,160px);flex:none; }
  .np.has-clip .np-cover,.np.ember-mode.has-clip:not(.has-lyrics) .np-cover { width:min(40vw,calc((100dvh - var(--player-h) - 80px) * 16 / 9)); }
  .np .np-meta { text-align:left;max-width:45vw; }
  .np .np-meta h1,.np.ember-mode:not(.has-lyrics) .np-meta h1 { font-size:22px; }
  body.np-open .player { gap:4px;padding:8px 16px; }
  body.np-open .p-center { gap:4px; }
  body.np-open .play-btn { width:44px;height:44px; }
  body.np-open .p-right .icon-btn { height:36px; }
}
@media(max-width:700px) and (prefers-reduced-motion:reduce) { .side { transition:none; } }