/* ============================================================
   WAVE MUSIC — MOBILE PATCH v5 FIXED
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --top-nav-h: 54px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bot: env(safe-area-inset-bottom, 0px);
  }
}

/* TITLEBAR — скрыть */
@media (max-width: 768px) {
  .tb { display: none !important; }
}

/* ──────────────────────────────────────────────
   SIDEBAR → ВЕРХНИЙ НАВБАР
────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(var(--top-nav-h) + var(--safe-top)) !important;
    padding-top: var(--safe-top) !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex-direction: row !important;
    align-items: stretch !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    border-left: none !important;
    border-right: none !important;
    background: rgba(8, 8, 12, 0.97) !important;
    backdrop-filter: blur(30px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    z-index: 1000 !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.4) !important;
    overflow: visible !important;
    min-height: 0 !important;
  }

  /* Скрываем ненужные элементы */
  .sb-logo,
  .sb-footer,
  .sb-label,
  .sb-badge,
  .sb-pl-add,
  .sb-item span { display: none !important; }

  /* Секция плейлистов — скрыть */
  .sb-section:nth-child(3) { display: none !important; }

  .sb-nav {
    flex: 1 !important;
    flex-direction: row !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    height: var(--top-nav-h) !important;
  }

  /* Показываем все секции в ряд */
  .sb-section {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    align-items: center !important;
    height: 100% !important;
  }

  .sb-item {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 12px !important;
    margin: 0 !important;
    min-width: 44px !important;
    height: var(--top-nav-h) !important;
    border-radius: 0 !important;
    transform: none !important;
    transition: none !important;
    position: relative !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
  }

  .sb-item i {
    font-size: 20px !important;
    margin: 0 !important;
    display: block !important;
  }

  .sb-item::before { display: none !important; }

  .sb-item.active {
    background: transparent !important;
    border-bottom-color: var(--accent) !important;
  }

  .sb-item.active i {
    color: var(--accent) !important;
    filter: drop-shadow(0 0 8px var(--accent)) !important;
  }
}

/* ──────────────────────────────────────────────
   LAYOUT
────────────────────────────────────────────── */
@media (max-width: 768px) {
  html, body {
    background: var(--bg0) !important;
    background-color: var(--bg0) !important;
  }

  .app {
    top: calc(var(--top-nav-h) + var(--safe-top)) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
  }

  .main {
    flex: 1 !important;
    border-radius: 0 !important;
    border: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .page {
    padding-bottom: calc(80px + var(--safe-bot) + 20px) !important;
  }
}

/* ──────────────────────────────────────────────
   ПЛЕЕР — ПЛАВАЮЩАЯ КАПСУЛА
────────────────────────────────────────────── */
@media (max-width: 768px) {

  .player:not(.expanded) {
    position: fixed !important;
    bottom: calc(var(--safe-bot) + 10px) !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    width: min(92vw, 460px) !important;
    max-width: calc(100vw - 20px) !important;
    height: 68px !important;
    min-height: 0 !important;
    max-height: 68px !important;
    border-radius: 999px !important;
    overflow: visible !important;
    z-index: 999 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    filter: drop-shadow(0 8px 28px rgba(0,0,0,0.7)) !important;
  }

  .player:not(.expanded) .pp {
    position: absolute !important;
    top: 0 !important;
    bottom: auto !important;
    left: 16px !important;
    right: 16px !important;
    height: 3px !important;
    width: auto !important;
    border-radius: 999px !important;
    z-index: 5 !important;
    overflow: hidden !important;
  }

  .player:not(.expanded) .pp-bg { border-radius: 999px !important; }
  .player:not(.expanded) .pp-f  { border-radius: 999px !important; }
  .player:not(.expanded) .pp-d  { display: none !important; }

  .player:not(.expanded) .pl-bar {
    position: static !important;
    height: 68px !important;
    min-height: 0 !important;
    max-height: 68px !important;
    width: 100% !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.13) !important;
    padding: 0 10px 0 8px !important;
    background: rgba(14,14,20,0.93) !important;
    backdrop-filter: blur(32px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.1) !important;
  }

  .player:not(.expanded) .pl-bar::after {
    content: '' !important;
    position: absolute !important;
    inset: -1px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.04) 100%) !important;
    z-index: -1 !important;
    pointer-events: none !important;
    display: block !important;
  }

  .player:not(.expanded) .pl-expanded { display: none !important; }

  .player:not(.expanded) .pl-body {
    padding: 0 !important;
    gap: 4px !important;
    height: 68px !important;
    align-items: center !important;
    width: 100% !important;
  }

  .player:not(.expanded) .pl-l {
    flex: 1 !important;
    min-width: 0 !important;
    gap: 9px !important;
    overflow: hidden !important;
    padding-left: 4px !important;
  }

  .player:not(.expanded) .pl-cv {
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
  }

  .player:not(.expanded) .pl-inf { flex: 1 !important; min-width: 0 !important; }

  .player:not(.expanded) .pl-t {
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .player:not(.expanded) .pl-ar {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .player:not(.expanded) #plLk {
    width: 34px !important;
    height: 34px !important;
    font-size: 15px !important;
    flex-shrink: 0 !important;
  }

  .player:not(.expanded) .pl-c {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .player:not(.expanded) .pl-ctrls {
    display: flex !important;
    align-items: center !important;
    gap: 1px !important;
  }

  .player:not(.expanded) #bSh,
  .player:not(.expanded) #bRp,
  .player:not(.expanded) .pl-time,
  .player:not(.expanded) .pl-r,
  .player:not(.expanded) .vol-wrap { display: none !important; }

  .player:not(.expanded) #bPr,
  .player:not(.expanded) #bNx {
    width: 36px !important;
    height: 36px !important;
    font-size: 17px !important;
  }

  .player:not(.expanded) .pl-play {
    width: 50px !important;
    height: 50px !important;
    font-size: 19px !important;
    border-radius: 50% !important;
    margin: 0 2px !important;
    flex-shrink: 0 !important;
  }

  /* ── EXPANDED ПЛЕЕР ── */
  .player.expanded {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    transform: none !important;
    border-radius: 0 !important;
    filter: none !important;
    overflow: hidden !important;
    z-index: 5000 !important;
  }

  .player.expanded .pl-bar { display: none !important; }

  .player.expanded .pp {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
    height: 3px !important;
  }

  .player.expanded .pl-expanded {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    opacity: 1 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Фон — полупрозрачный чтобы обои были видны */
  .pl-exp-bg { background: rgba(6,6,10,0.72) !important; }
  .pl-exp-bg-overlay { background: rgba(0,0,0,0.15) !important; }

  /* Контент: обложка вверху, кнопки внизу */
  .pl-exp-content {
    position: relative !important; z-index: 2 !important;
    flex: 1 !important; display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 56px 28px 0 !important;
    gap: 0 !important; width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
  }

  /* Верх: обложка + название */
  .pl-exp-left {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; gap: 14px !important;
    width: 100% !important; padding: 0 !important; flex-shrink: 0 !important;
  }
  .pl-exp-cover {
    width: min(220px, 56vw) !important; height: min(220px, 56vw) !important;
    border-radius: 18px !important; box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
  }
  .pl-exp-track-info { width: 100% !important; text-align: center !important; }
  .pl-exp-title  { font-size: 20px !important; font-weight: 800 !important; }
  .pl-exp-artist { font-size: 13px !important; margin-top: 4px !important; }

  /* Низ: прогресс + кнопки — прижать к самому низу */
  .pl-exp-right {
    width: 100% !important; display: flex !important;
    flex-direction: column !important; align-items: center !important;
    gap: 10px !important; flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-top: 20px !important;
    padding-bottom: calc(40px + var(--safe-bot)) !important;
  }
  .pl-exp-right-controls { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important; }
  .pl-exp-progress-under { width: 100% !important; }
  .pl-exp-prog-bar { height: 4px !important; border-radius: 4px !important; }
  .pl-exp-times { font-size: 11px !important; }

  .pl-exp-controls { gap: 8px !important; justify-content: center !important; }
  .pl-exp-btn {
    width: 44px !important; height: 44px !important; font-size: 17px !important;
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.15) !important;
  }
  /* Play кнопка — светлее */
  .pl-exp-play {
    width: 62px !important; height: 62px !important; font-size: 24px !important;
    background: rgba(255,255,255,0.9) !important;
    color: #111 !important;
    border: none !important;
  }

  /* Кнопка текста — показать */
  #expLyricsBtn { display: flex !important; }

  /* Эквалайзер — убрать */
  .pl-exp-viz-wrap, .pl-visualizer-panel,
  .pl-visualizer, .pl-viz-bar { display: none !important; }
  .pl-exp-vol { display: none !important; }

  /* ── LYRICS SHEET — выезжающая панель снизу ── */
  .mob-lyrics-sheet {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    height: 72vh !important;
    background: rgba(10,10,15,0.97) !important;
    border-radius: 20px 20px 0 0 !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    z-index: 6000 !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateY(100%) !important;
    transition: transform .35s cubic-bezier(0.32,0.72,0,1) !important;
    will-change: transform !important;
  }
  .mob-lyrics-sheet.open {
    transform: translateY(0) !important;
  }
  .mob-lyrics-drag {
    width: 100% !important; padding: 14px 0 8px !important;
    display: flex !important; justify-content: center !important;
    cursor: grab !important; flex-shrink: 0 !important;
  }
  .mob-lyrics-drag::after {
    content: '' !important;
    display: block !important;
    width: 40px !important; height: 4px !important;
    border-radius: 99px !important;
    background: rgba(255,255,255,0.25) !important;
  }
  .mob-lyrics-title {
    font-size: 13px !important; font-weight: 700 !important;
    color: rgba(255,255,255,0.5) !important;
    text-align: center !important;
    padding: 0 20px 12px !important;
    flex-shrink: 0 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
  }
  .mob-lyrics-content {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 0 24px 40px !important;
    -webkit-overflow-scrolling: touch !important;
  }

}

/* ──────────────────────────────────────────────
   КОНТЕНТ СТРАНИЦ
────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero { padding: 24px 16px 14px !important; }
  .hero h2 { font-size: 26px !important; }
  .hero p  { font-size: 13px !important; }

  .qg { grid-template-columns: 1fr !important; gap: 7px !important; padding: 0 14px 14px !important; }
  .qg-c { height: 54px !important; border-radius: 12px !important; }
  .qg-c img { width: 54px !important; height: 54px !important; }
  .qg-c span { font-size: 13px !important; }

  .sec { padding: 0 14px !important; margin-bottom: 18px !important; }
  .sec-head h3 { font-size: 17px !important; }

  .cg { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; padding: 0 14px 14px !important; }

  .card {
    height: auto !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 14px !important;
    background: var(--glass) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
  }
  .card-img { width: 100% !important; height: 120px !important; border-radius: 14px 14px 0 0 !important; }
  .card-info { padding: 8px 10px 10px !important; width: 100% !important; }
  .card-t { font-size: 12px !important; font-weight: 700 !important; }
  .card-a { font-size: 10px !important; }
  .card-n { display: none !important; }
  .card-btn { top: 88px !important; right: 8px !important; transform: none !important; width: 30px !important; height: 30px !important; font-size: 11px !important; opacity: 1 !important; background: rgba(0,0,0,0.75) !important; }

  .tl { padding: 4px 10px !important; }
  .tr { padding: 7px 10px !important; border-radius: 10px !important; gap: 10px !important; transform: none !important; }
  .tr:hover { transform: none !important; }
  .tr-n { width: 18px !important; font-size: 11px !important; }
  .tr-c { width: 40px !important; height: 40px !important; border-radius: 8px !important; flex-shrink: 0 !important; }
  .tr-t { font-size: 13px !important; font-weight: 600 !important; }
  .tr-a { font-size: 11px !important; }
  .tr-d { font-size: 10px !important; }
  .tr-x { opacity: 1 !important; gap: 4px !important; }
  .tr-x .ib { width: 28px !important; height: 28px !important; font-size: 11px !important; }

  .search-w { padding: 18px 14px !important; }
  .search-w h2 { font-size: 24px !important; margin-bottom: 12px !important; }
  .sbox { max-width: 100% !important; padding: 0 16px !important; border-radius: 16px !important; }
  .sbox input { font-size: 15px !important; padding: 12px 0 !important; }
  .chips { gap: 6px !important; margin: 10px 0 !important; flex-wrap: wrap !important; }
  .chip { padding: 6px 14px !important; font-size: 12px !important; }

  .settings-panel { flex-direction: column !important; height: 100% !important; min-height: auto !important; }
  .settings-sidebar { width: 100% !important; flex-direction: row !important; overflow-x: auto !important; padding: 8px 10px !important; border-right: none !important; border-bottom: 1px solid var(--glass-border) !important; gap: 4px !important; scrollbar-width: none !important; flex-shrink: 0 !important; height: auto !important; }
  .settings-sidebar::-webkit-scrollbar { display: none !important; }
  .settings-sidebar-head { display: none !important; }
  .settings-nav-item { flex-direction: column !important; padding: 7px 12px !important; gap: 3px !important; flex-shrink: 0 !important; font-size: 10px !important; border-radius: 10px !important; min-width: 52px !important; text-align: center !important; white-space: nowrap !important; }
  .settings-nav-item span { display: block !important; font-size: 10px !important; }
  .settings-nav-item i { width: auto !important; font-size: 15px !important; }
  .settings-nav-item::before { display: none !important; }
  .settings-content { padding: 16px 14px !important; flex: 1 !important; overflow-y: auto !important; }
  .settings-content h2 { font-size: 21px !important; }
  .set-card { margin-bottom: 10px !important; }
  .set-card-header { padding: 12px 14px !important; }
  .set-card-body { padding: 12px 14px !important; }
  .set-btn { padding: 9px 18px !important; font-size: 13px !important; }
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  .artist-hero { padding: 24px 14px 18px !important; flex-direction: column !important; gap: 12px !important; }
  .artist-avatar { width: 86px !important; height: 86px !important; }
  .artist-info h2 { font-size: 22px !important; }
  .artist-section { padding: 0 14px !important; }

  .playlist-hero { padding: 24px 14px 16px !important; flex-direction: column !important; gap: 10px !important; }
  .playlist-cover { width: 100px !important; height: 100px !important; font-size: 36px !important; }
  .playlist-info h2 { font-size: 21px !important; }

  .liked-hero { padding: 24px 14px 16px !important; }
  .liked-hero h2 { font-size: 22px !important; }
  .page-head { font-size: 21px !important; padding: 18px 14px 10px !important; }

  .mywave-card { margin: 0 14px 18px !important; padding: 20px 18px !important; border-radius: 18px !important; }
  .mywave-info h4 { font-size: 21px !important; }
  .mywave-info p { font-size: 13px !important; }
  .mywave-btn { padding: 10px 18px !important; font-size: 13px !important; white-space: nowrap !important; }
}

/* ТОСТЫ / МОДАЛКА */
@media (max-width: 768px) {
  .toasts { bottom: calc(68px + var(--safe-bot) + 18px) !important; right: 12px !important; }
  .toast { min-width: 170px !important; max-width: 72vw !important; font-size: 12px !important; padding: 9px 14px !important; }
  .modal { width: 92vw !important; padding: 20px !important; }
  .fs-player { border-radius: 0 !important; }
  .fs-cover { width: min(250px, 70vw) !important; height: min(250px, 70vw) !important; }
}

/* TOUCH ФИКСЫ */
@media (max-width: 768px) {
  * { -webkit-tap-highlight-color: transparent !important; }
  .tr:hover, .sb-item:hover, .card:hover, .qg-c:hover { transform: none !important; box-shadow: none !important; }
  .main, .cg, .sb-nav, .settings-sidebar, .settings-content { -webkit-overflow-scrolling: touch !important; }
}
/* ══ ФОН: светлее + видимость ══ */
@media (max-width: 768px) {
  .custom-bg { position: fixed !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; display: block !important; }
  #customBgImg  { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
  #customBgVideo { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .custom-bg-overlay { position: fixed !important; inset: 0 !important; z-index: 1 !important; background: rgba(0,0,0,0.45) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; pointer-events: none !important; }
  .app  { background: transparent !important; }
  .main { background: rgba(6,6,10,0.7) !important; }
  .sidebar { background: rgba(6,6,10,0.92) !important; }
}

/* ══ GPU: отключить backdrop-filter везде ══ */
@media (max-width: 768px) {
  *, *::before, *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .player:not(.expanded) .pl-bar { background: rgba(12,12,18,0.97) !important; }
  .modal  { background: rgba(10,10,15,0.99) !important; }
  .toast  { background: rgba(14,14,20,0.99) !important; }
  .set-card { background: rgba(255,255,255,0.05) !important; }
  .pl-exp-cover.playing { animation: none !important; }
  .hero-glow { animation: none !important; }
  .pp-glow { display: none !important; }
  .player { transition: none !important; }
  @keyframes pageIn { from { opacity:0; transform:translate3d(0,5px,0); } to { opacity:1; transform:translate3d(0,0,0); } }
}

/* ── MOB LYRICS: подсветка активной строки ── */
@media (max-width: 768px) {
  .mob-lyrics-content .lyrics-line {
    padding: 9px 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.3) !important;
    transition: color .3s, font-size .3s !important;
    cursor: pointer !important;
    line-height: 1.5 !important;
  }
  .mob-lyrics-content .lyrics-line.past {
    color: rgba(255,255,255,0.22) !important;
  }
  .mob-lyrics-content .lyrics-line.active {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
  }
  .mob-lyrics-content .lyrics-synced {
    padding: 20px 0 80px !important;
  }
}