/* ============================================================
   Essence Music: новые панели. Подключается после polish.css.
   Заново сделаны: панель вкладок, мини-плеер, шторки (меню трека, «Мой эфир», плейлисты, очередь, таймер),
   карточки альбомов, поле поиска, заголовок вложенных страниц.
   Принципы: сплошные плоские поверхности, никакого стекла, свечения, пружинок и вращающихся лучей;
   строки без рамок (их разделяет отступ или тонкая линия); один шрифт Onest, обычный регистр.
   ============================================================ */

:root {
  --ui-bar: #0d0d0f;        /* панель вкладок */
  --ui-raise: #18181b;      /* мини-плеер, шторки */
  --ui-line: #232327;       /* тонкая линия */
  --ui-press: rgba(255, 255, 255, 0.07);
}

/* ---------- 1. Панель вкладок (телефон и планшет) ---------- */
@media (max-width: 1023.98px) {
  :root { --nav-h: 56px; }
  #main-view:not(.hidden) { padding-bottom: calc(var(--player-h) + var(--nav-safe) + 20px); }

  .bottomnav {
    left: 0; right: 0; bottom: 0; transform: none; width: auto; max-width: none;
    height: var(--nav-safe);
    padding: 0 max(2px, calc((100vw - 560px) / 2)) env(safe-area-inset-bottom, 0px);
    background: var(--ui-bar);
    border: 0; border-top: 1px solid var(--ui-line); border-radius: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .nav-btn { gap: 3px; padding: 0; color: #8b8b94; transition: none; }
  .nav-btn::before, .nav-btn::after { content: none; }
  .nav-btn svg { width: 24px; height: 24px; transform: none; filter: none; transition: none; }
  .nav-btn span { font-size: clamp(10px, 3vw, 11px); font-weight: 500; letter-spacing: 0; }
  .nav-btn.active { color: #fff; }
  .nav-btn.active svg { transform: none; filter: none; stroke-width: 2.2; }
  .nav-btn.active span { font-weight: 500; }
  .nav-btn:active { opacity: 0.55; }
  .nav-btn:active svg { transform: none; }
}

/* ---------- 2. Мини-плеер: полоса прямо над вкладками ---------- */
@media (max-width: 1023.98px) {
  body.player-on { --player-h: 56px; }
  body.player-on.pl-collapsed { --player-h: 41px; }
  .player {
    left: 0; right: 0; width: auto; max-width: none; transform: none;
    bottom: var(--nav-safe);
    background: var(--ui-raise);
    border: 0; border-radius: 0; box-shadow: none;
  }
  .player .player-row { height: 56px; padding: 8px 4px 8px 12px; gap: 8px; }
  .player .player-cover { width: 40px; height: 40px; border-radius: 4px; margin-right: 4px; }
  .player .player-title { font-size: 14px; font-weight: 600; }
  .player .player-artist { font-size: 12.5px; margin-top: 1px; }
  .player .pbtn { width: 44px; height: 44px; }
  .player .pbtn::after { content: none; }
  .player .pbtn:active { transform: none; opacity: 0.6; }
  .player .pbtn.main svg { width: 26px; height: 26px; animation: none; }
  .player .seek { top: 0; bottom: auto; height: 10px; }
  .player .seek::before, .player .seek-buffered, .player .seek-fill { top: 0; bottom: auto; height: 2px; }
  .player .seek::before { background: rgba(255, 255, 255, 0.12); }
  .player .seek-buffered { background: transparent; }
  .player .seek-fill { background: #fff; }
  .player.collapsed .player-row { height: 40px; padding: 0 4px 0 12px; }
  .player.collapsed .player-cover { width: 28px; height: 28px; border-radius: 4px; }
}

/* ---------- 3. Шторки ---------- */
.modal-backdrop { background: rgba(0, 0, 0, 0.62); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sheet {
  background: var(--ui-raise);
  border: 0; border-radius: 16px 16px 0 0;
  padding: 8px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
.sheet::before { width: 32px; height: 4px; margin: 0 auto 12px; background: #3b3b41; }
.sheet-title { font-size: 17px; font-weight: 600; line-height: 1.3; }
.sheet-sub { margin: 2px 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--ui-line); font-size: 13px; }
.sheet-title:not(:has(+ .sheet-sub)) { margin-bottom: 8px; }

/* строки меню: без рамок и подложек, нажатие подсвечивает полосу */
.menu-item {
  gap: 16px; width: calc(100% + 16px); min-height: 52px;
  margin: 0 -8px; padding: 0 8px;
  background: none; border: 0; border-radius: 8px;
  font-size: 16px; font-weight: 500;
}
.menu-item:active { background: var(--ui-press); }
.menu-item > svg { color: #b4b4bc; }
.menu-item.danger, .menu-item.danger > svg { color: var(--danger); }
.menu-item.active { font-weight: 600; }
.menu-item.active::after {
  content: ''; flex: none; margin-left: auto; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px);
}
.picker-name { font-size: 16px; font-weight: 500; }
.queue-list .queue-row { margin-bottom: 0; padding: 6px 8px; border-radius: 8px; }
.queue-row.current { background: var(--ui-press); }

/* выбор в «Мой эфир»: кружок и подпись без карточек */
.radio-row {
  gap: 14px; margin: 0; padding: 14px 0;
  background: none; border: 0; border-radius: 0;
  font-size: 16px; font-weight: 500;
}
.radio-row + .radio-row { border-top: 1px solid var(--ui-line); }
.radio-row input[type="radio"] {
  -webkit-appearance: none; appearance: none; margin-top: 2px; width: 20px; height: 20px;
  border: 2px solid #5c5c64; border-radius: 50%; background: none; cursor: pointer;
}
.radio-row input[type="radio"]:checked { border-color: #fff; background: radial-gradient(circle, #fff 0 42%, transparent 46%); }
.radio-text small { margin-top: 3px; font-size: 13px; line-height: 1.35; }

.sheet .btn.primary { height: 48px; margin-top: 14px; border-radius: 10px; font-size: 16px; }
.sheet-close {
  margin-top: 6px; height: 48px; background: none; border: 0; border-radius: 8px;
  color: var(--muted); font-size: 15px; font-weight: 500;
}
.sheet-close:active { background: var(--ui-press); }

/* ---------- 4. Карточки альбомов: обложка и подпись, без коробки ---------- */
.album-card, .album-card.card {
  display: block; width: auto; height: auto; padding: 0; gap: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.album-card::before, .album-card::after { content: none; }
.album-card:active { transform: none; }
.album-card:active .album-card-cover { opacity: 0.75; }
.album-card-cover { border-radius: 8px; margin-bottom: 8px; background: #17171a; }
.album-card-name { line-height: 1.3; }
.album-card-sub { margin-top: 1px; line-height: 1.3; }
.album-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px 14px; }
.album-grid .album-card { content-visibility: auto; contain-intrinsic-size: auto 212px; }
.album-cards .album-card { width: 140px; flex: none; }

/* ---------- 5. Поле поиска: спокойная заливка вместо светящейся рамки ---------- */
.search-wrap::before, .search-wrap:focus-within::before { content: none; animation: none; }
#view-search .search-wrap {
  top: var(--bar-vis, 58px);
  background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; padding: 8px 0;
}
.search-wrap input[type="search"] {
  height: 44px; padding: 0 50px 0 42px;
  background: #151517; border: 1px solid transparent; border-radius: 10px; outline: none;
}
.search-wrap input[type="search"]:focus { background: #19191c; border-color: #55555d; outline: none; box-shadow: none; }
.search-wrap input[type="search"]::placeholder { color: #8b8b94; font-size: 15px; }
.search-ic { left: 14px; color: #8b8b94; }
#view-search .search-wrap { margin-bottom: 0; }

/* ---------- 6. Заголовок вложенных страниц: обычным текстом ---------- */
#appbar #bar-title { font-family: Onest, system-ui, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* ---------- 7. Уведомление ---------- */
.toast { background: #2a2a2e; border: 0; border-radius: 10px; box-shadow: none; padding: 11px 16px; }
.toast-long { border-radius: 10px; }

/* ---------- 8. Без «цвета обложки»: свечение, бегущий луч по рамке, окрашенная подсветка строки ---------- */
.player::after, .player.playing::after { content: none; animation: none; }
.player, .player .player-cover, .player .seek-fill { box-shadow: none; }
.track.playing, .track.current { background: rgba(255, 255, 255, 0.06); border-color: transparent; box-shadow: none; }
.track.playing .t-title { color: #fff; }
.nav-btn.active svg { filter: none; }

/* ---------- 9. Фокус: одно спокойное выделение вместо двойного белого кольца ---------- */
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }
input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="url"]:focus, textarea:focus, select:focus { border-color: #8a8a93; }
.menu-item:focus-visible, .sheet-close:focus-visible { outline: none; background: var(--ui-press); }

/* the sticky top bar must not cover the block the "Недавно слушали" tile scrolls to */
#home-recent-block { scroll-margin-top: calc(64px + env(safe-area-inset-top, 0px)); }