/* ==== listen.css — раздел «Слушать», mini- и full-плеер ====
   Подключается только на index.php после bottom-nav.css.
   Слои: раздел 600 (под настройками 930 и модалкой «Найти аят» 940),
   mini-плеер 946 (над настройками, под нижним меню 950),
   full-плеер 955 (над меню), тост 1060 (над всем как у bottom-nav). */

/* ---------- старый режим «Слушать» на главной отключён ---------- */
#sidebar-mode-listen { display: none !important; }

/* ================= раздел ================= */
.mq-listen {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: var(--bg);
    color: var(--text);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--mq-bnav-h, 56px) + 76px);
    overscroll-behavior: contain;
}
.mq-listen[hidden] { display: none !important; }
body.mq-listen-open { overflow: hidden; }

.mq-ls-page {
    max-width: 760px;
    margin: 0 auto;
    min-height: 100%;
}
.mq-ls-page[hidden] { display: none !important; }
.mq-ls-reciter { animation: mq-ls-slide-in 0.22s ease; }
@keyframes mq-ls-slide-in {
    from { transform: translateX(26px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

.mq-ls-list { padding: 8px 0 24px; }

/* ---------- «Продолжить» ---------- */
.mq-ls-hero { margin: 14px 14px 4px; }
.mq-ls-hero[hidden] { display: none !important; }
.mq-ls-hero-main {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: transform 0.15s ease;
}
.mq-ls-hero-main:active { transform: scale(0.985); }
.mq-ls-hero-av {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.mq-ls-hero-av img { width: 100%; height: 100%; object-fit: cover; }
.mq-ls-hero-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mq-ls-hero-txt em {
    font-style: normal;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.85;
}
.mq-ls-hero-txt b { font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-ls-hero-txt small { font-size: 0.78rem; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-ls-hero-play {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.24);
    font-size: 1.2rem;
}

/* ---------- вкладки ---------- */
.mq-ls-tabs {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}
.mq-ls-tabs::-webkit-scrollbar { display: none; }
.mq-ls-tab {
    flex: 1 0 auto;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-light);
    font-size: 0.84rem;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition);
}
.mq-ls-tab.is-on {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
}

/* ---------- «Главное»: горизонтальные ряды подборок ---------- */
.mq-ls-hsec { margin-top: 4px; }
.mq-ls-hsec-t {
    padding: 13px 14px 7px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}
.mq-ls-hrow {
    display: flex;
    gap: 10px;
    padding: 2px 14px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
}
.mq-ls-hrow::-webkit-scrollbar { height: 6px; }
.mq-ls-hrow::-webkit-scrollbar-track { background: transparent; }
.mq-ls-hrow::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
.mq-ls-hrow::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

.mq-ls-hcard {
    flex: 0 0 auto;
    width: 106px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 11px 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    color: var(--text);
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    scroll-snap-align: start;
    transition: var(--transition);
}
.mq-ls-hcard:active { transform: scale(0.97); }
.mq-ls-hcard-av {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
}
.mq-ls-hcard-av img { width: 100%; height: 100%; object-fit: cover; }
.mq-ls-hcard b {
    font-size: 0.79rem;
    line-height: 1.25;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.mq-ls-hcard small {
    font-size: 0.7rem;
    color: var(--text-muted);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* карточки случайного плейлиста: иконка-плашка слева, текст под ней */
.mq-ls-hcard--shuf { width: 150px; align-items: flex-start; text-align: left; }
.mq-ls-hcard--shuf b, .mq-ls-hcard--shuf small { text-align: left; }
.mq-ls-hcard-ic {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--accent-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex: 0 0 auto;
}

/* ---------- фильтры каталога ---------- */
.mq-ls-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px 4px;
}
.mq-ls-filters[hidden] { display: none !important; }
.mq-ls-search {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-size: 0.92rem;
    font-family: inherit;
    outline: none;
    transition: var(--transition);
}
.mq-ls-search:focus { border-color: var(--primary); }
.mq-ls-search::placeholder { color: var(--text-muted); }

.mq-ls-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.mq-ls-chips--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.mq-ls-chips--scroll::-webkit-scrollbar { display: none; }
.mq-ls-chip {
    flex: 0 0 auto;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-light);
    font-size: 0.8rem;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition);
}
.mq-ls-chip.is-on {
    background: var(--accent-light);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}
.mq-ls-chip:active { transform: scale(0.96); }

/* ---------- карточки чтецов ---------- */
.mq-ls-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    margin: 0 14px 9px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    transition: var(--transition);
    /* тап по карточке срабатывает сразу, без задержки двойного тапа */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.mq-ls-card:active { transform: scale(0.985); }
.mq-ls-card.is-open {
    border-color: var(--primary);
    background: var(--accent-light);
}
/* кнопка «⋮» справа на карточке плейлиста */
.mq-ls-card-menu {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    flex: 0 0 auto;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}
.mq-ls-card-menu:hover { background: var(--bg); color: var(--primary); }
.mq-ls-card-menu:active { transform: scale(0.9); }
.mq-ls-card-av {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
}
.mq-ls-card-av img { width: 100%; height: 100%; object-fit: cover; }
.mq-ls-card-av--pl { background: var(--accent-light); color: var(--primary); font-size: 1.25rem; }
.mq-ls-card-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mq-ls-card-txt b { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-ls-card-txt small { font-size: 0.76rem; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-ls-card-txt em { font-style: normal; font-size: 0.72rem; color: var(--primary); }
/* стопка аватаров чтецов на карточке плейлиста */
.mq-ls-pl-avs { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.mq-ls-pl-av {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.56rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0;
    box-shadow: 0 0 0 2px var(--bg-card, #12161f);
}
.mq-ls-pl-av--more { background: var(--text-muted); color: var(--bg-card, #12161f); }
.mq-ls-star {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
    transition: var(--transition);
}
.mq-ls-star.is-on { color: #ef476f; }
.mq-ls-star:active { transform: scale(0.88); }

/* ---------- строки сур ---------- */
.mq-ls-sect {
    padding: 14px 16px 6px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.mq-ls-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s ease;
}
.mq-ls-row:active { background: var(--accent-light); }
.mq-ls-row.is-playing { background: var(--accent-light); }
.mq-ls-row-num {
    width: 26px;
    flex: 0 0 auto;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.mq-ls-row-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mq-ls-row-txt b {
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mq-ls-row-ar { color: var(--text-muted); font-weight: 400; font-size: 0.9em; margin-right: 4px; }
.mq-ls-row-txt small { font-size: 0.75rem; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-ls-row-badge {
    align-self: flex-start;
    font-size: 0.72rem;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mq-ls-row-badge i { font-size: 0.8rem; }
.mq-ls-row-play {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    flex: 0 0 auto;
    background: var(--accent-light);
    color: var(--primary);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}
.mq-ls-row-play:active { transform: scale(0.88); }
.mq-ls-row.is-playing .mq-ls-row-play { background: var(--primary); color: #fff; }

/* ---------- пустые состояния / загрузка ---------- */
.mq-ls-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 46px 20px;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
}
.mq-ls-empty i { font-size: 2rem; opacity: 0.5; }
.mq-ls-loading { display: flex; justify-content: center; padding: 34px 0; }
.mq-ls-spin {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    animation: mq-ls-spin 0.8s linear infinite;
    display: inline-block;
}
@keyframes mq-ls-spin { to { transform: rotate(360deg); } }

/* ---------- подстраница чтеца ---------- */
.mq-ls-rhead {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.mq-ls-rhead-av {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    font-size: 0.92rem;
}
.mq-ls-rhead-av img { width: 100%; height: 100%; object-fit: cover; }
.mq-ls-rhead-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mq-ls-rhead-txt b { font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-ls-rhead-txt small { font-size: 0.75rem; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-ls-surah-tools {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
.mq-ls-surah-tools[hidden] { display: none !important; }

/* ---------- общие кнопки-иконки ---------- */
.mq-ls-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
    transition: var(--transition);
}
.mq-ls-icon-btn:active { transform: scale(0.88); }
.mq-ls-back { margin-left: -4px; }

/* ================= mini-плеер ================= */
.mq-ls-mini {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 946;
    height: 56px;
    /* сетка: инфо о чтеце (1fr) | группа кнопок ⌃ ▶ ✕ (auto) | ✕ (auto) */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 2px;
    padding: 0 8px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.16);
}
.mq-ls-mini[hidden] { display: none !important; }
body.mq-bnav-on .mq-ls-mini { bottom: var(--mq-bnav-h, 56px); }
/* уступаем место, когда внизу открыт аят-плеер приложения или модалка «Найти аят» */
body.mq-listen-mini-yield .mq-ls-mini,
body.mq-find-open .mq-ls-mini { display: none !important; }

.mq-ls-mini-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(128, 128, 128, 0.22);
    pointer-events: none;
}
.mq-ls-mini-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--primary);
    transition: width 0.35s linear;
}
.mq-ls-mini-open {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    background: none;
    border: 0;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.mq-ls-mini-av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    color: #fff;
}
.mq-ls-mini-av img { width: 100%; height: 100%; object-fit: cover; }
.mq-ls-mini-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mq-ls-mini-text b { font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-ls-mini-text small { font-size: 0.72rem; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-ls-mini-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    flex: 0 0 auto;
    background: transparent;
    color: var(--text);
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}
.mq-ls-mini-btn:active { transform: scale(0.88); }
.mq-ls-mini-play { background: var(--primary); color: #fff; width: 42px; height: 42px; font-size: 1.25rem; }
/* группа управления — справа, сразу после инфо о чтеце */
.mq-ls-mini-ctrls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    justify-self: end;
}
/* ⌃ — переключение в полный плеер */
.mq-ls-mini-expand { color: var(--text-light); font-size: 1.05rem; }
.mq-ls-mini-expand:active { color: var(--primary); }
/* ✕ полного закрытия и отключения плеера — справа */
.mq-ls-mini-close {
    justify-self: end;
    color: var(--text-light);
    font-size: 1.05rem;
}
.mq-ls-mini-close:active { color: var(--primary); }

/* ================= full-плеер: Bento × Аврора =================
   Раскладка — демо «25 · Bento × Аврора» (players/), палитра —
   цвета проекта (тёмная тема): фон #111827/#1f2937, акценты
   --primary (#5eadff) и --primary-dark (#3d96f0), борд #2d3748. */
.mq-ls-full {
    position: fixed;
    inset: 0;
    z-index: 955;
    background: linear-gradient(180deg, #111827 0%, #1f2937 55%, #111827 100%);
    color: #e5e7eb;
    overflow: hidden;
    animation: mq-ls-rise 0.26s ease;
}
.mq-ls-full::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(45% 35% at 18% 6%, rgba(94, 160, 255, 0.30), transparent 65%),
                radial-gradient(40% 30% at 84% 16%, rgba(46, 134, 222, 0.30), transparent 65%),
                radial-gradient(60% 42% at 55% 108%, rgba(94, 160, 255, 0.16), transparent 65%);
    animation: mq-ls-aur 15s ease-in-out infinite alternate;
}
.mq-ls-full[hidden] { display: none !important; }
body.mq-ls-full-open, body.mq-listen-full-open { overflow: hidden; }
@keyframes mq-ls-rise {
    from { transform: translateY(6%); opacity: 0.4; }
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes mq-ls-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes mq-ls-aur {
    to { transform: translate3d(0, -3%, 0) scale(1.07); }
}

.mq-ls-full-sheet {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 14px calc(env(safe-area-inset-bottom, 0px) + 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.mq-ls-full-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.mq-ls-full-top .mq-ls-icon-btn {
    width: 38px;
    height: 38px;
    border: 1px solid #2d3748;
    background: rgba(31, 41, 55, 0.72);
    border-radius: 50%;
    color: #cdd9f2;
}
.mq-ls-full-label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mq-ls-full-top-pad { width: 38px; flex: 0 0 auto; }

/* ---------- сетка bento ---------- */
.mq-ls-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(56px, 1fr);
    gap: 10px;
    min-height: 0;
}
.mq-ls-tile {
    background: rgba(31, 41, 55, 0.72);
    border: 1px solid #2d3748;
    border-radius: 22px;
    padding: 11px 13px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    text-align: left;
    color: inherit;
    font-family: inherit;
    transition: transform 0.15s ease, border-color 0.2s ease, color 0.2s ease;
}
button.mq-ls-tile { cursor: pointer; }
button.mq-ls-tile:active { transform: scale(0.97); }
.mq-ls-t-lab {
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mq-ls-t-val {
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mq-ls-t-lab2 {
    font-size: 11.5px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* плитка-обложка: фото/инициалы чтеца + арабская сура на градиенте */
.mq-ls-t-art {
    grid-column: span 2;
    grid-row: span 2;
    position: relative;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    border: 0;
    background: linear-gradient(135deg, var(--primary, #5eadff), var(--primary-dark, #3d96f0));
    overflow: hidden;
}
.mq-ls-t-art::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 62%;
    background: linear-gradient(180deg, transparent, rgba(17, 24, 39, 0.78));
    pointer-events: none;
}
.mq-ls-art { position: absolute; inset: 0; margin: 0; display: block; }
.mq-ls-art-av {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--primary, #5eadff), var(--primary-dark, #3d96f0));
    transition: box-shadow 0.3s ease;
}
.mq-ls-art-av img { width: 100%; height: 100%; object-fit: cover; }
/* полное имя чтеца вместо инициалов — тонкий текст, по центру,
   с отступом снизу, чтобы не задевать арабское название суры */
.mq-ls-art-av--name {
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    padding: 14px 12px 34px;
}
.mq-ls-art.is-playing .mq-ls-art-av { animation: mq-ls-coverpulse 4.5s ease-in-out infinite; }
@keyframes mq-ls-coverpulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

.mq-ls-full-ar {
    position: relative;
    z-index: 1;
    padding: 0 8px 9px;
    text-align: center;
    font-family: var(--arabic-font, 'Amiri', serif);
    font-size: clamp(26px, 8vw, 40px);
    line-height: 1.35;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.mq-ls-t-title, .mq-ls-t-next { grid-column: span 2; justify-content: center; }
.mq-ls-t-mini { justify-content: center; }
.mq-ls-t-mini.is-on { border-color: var(--primary); color: var(--primary); }

/* плитка перемотки: время / проценты / бар */
.mq-ls-t-seek { grid-column: span 4; justify-content: center; gap: 8px; }
.mq-ls-t-seekrow {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #9ca3af;
}
.mq-ls-t-seekrow .mono { font-variant-numeric: tabular-nums; }
.mq-ls-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 7px;
    margin: 4px 0;
    border-radius: 99px;
    background: linear-gradient(90deg,
        var(--primary, #5eadff) var(--fill, 0%),
        rgba(128, 128, 128, 0.3) var(--fill, 0%));
    cursor: pointer;
    outline: none;
}
.mq-ls-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(94, 160, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.mq-ls-range::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(94, 160, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.mq-ls-range::-moz-range-track { background: transparent; border: 0; }

.mq-ls-resume {
    align-self: center;
    margin-top: 2px;
    background: rgba(94, 160, 255, 0.16);
    color: #9cc6ff;
    border: 1px solid rgba(94, 160, 255, 0.45);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
}
.mq-ls-resume[hidden] { display: none !important; }
.mq-ls-resume:active { transform: scale(0.95); }

/* плитка транспорта */
.mq-ls-t-tp { grid-column: span 4; align-items: center; justify-content: center; padding: 12px 10px; }
.mq-ls-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    width: 100%;
}
.mq-ls-ctl {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #2d3748;
    flex: 0 0 auto;
    background: rgba(31, 41, 55, 0.72);
    color: #e5e7eb;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: transform 0.15s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.mq-ls-ctl:active { transform: scale(0.9); }
.mq-ls-ctl.is-on { color: var(--primary); border-color: var(--primary); background: rgba(94, 160, 255, 0.16); }
.mq-ls-ctl small {
    position: absolute;
    bottom: 5px;
    right: 6px;
    font-size: 0.5rem;
    font-weight: 700;
    opacity: 0.85;
}
.mq-ls-ctl--seek { font-size: 1.25rem; }
.mq-ls-ctl--play {
    width: 74px;
    height: 74px;
    font-size: 1.75rem;
    background: var(--primary);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 26px rgba(94, 160, 255, 0.45);
}

/* подвкладки внутри «Избранного» и «Истории»: чтецы / суры */
.mq-ls-subtabs {
    display: flex;
    gap: 6px;
    padding: 2px 14px 10px;
}
.mq-ls-subtab {
    flex: 0 0 auto;
    min-width: 96px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-light);
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}
.mq-ls-subtab.is-on {
    background: var(--accent-light);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

/* ---------- шторки выбора чтеца и таймера ---------- */
.mq-ls-picker {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px calc(env(safe-area-inset-bottom, 0px) + 14px);
    background: rgba(17, 24, 39, 0.97);
    animation: mq-ls-fade 0.18s ease;
}
.mq-ls-picker[hidden] { display: none !important; }
.mq-ls-picker-head { display: flex; align-items: center; gap: 8px; color: #e7edfb; }
.mq-ls-picker-head .mq-ls-search { flex: 1 1 auto; }
.mq-ls-picker-head .mq-ls-search {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: #e7edfb;
}
.mq-ls-picker-head .mq-ls-search::placeholder { color: #8fa3cd; }
.mq-ls-picker-head b { flex: 1 1 auto; font-size: 0.95rem; }
.mq-ls-picker-head .mq-ls-icon-btn { color: #cdd9f2; }
.mq-ls-picker-list {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mq-ls-pick {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: #e7edfb;
    cursor: pointer;
    transition: var(--transition);
}
.mq-ls-pick:active { transform: scale(0.98); }
.mq-ls-pick.is-on { background: rgba(94, 160, 255, 0.2); }
.mq-ls-pick > span:not(.mq-ls-pick-av) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mq-ls-pick b { font-size: 0.92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-ls-pick small { font-size: 0.72rem; color: #93a5cc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-ls-pick i.bi-check2 { color: var(--primary); font-size: 1.1rem; }

/* Нижняя шторка «Выберите плейлист» лежит на фоне карточки темы
   (var(--bg-card)) — в светлой теме захардкоженные тёмные цвета выше
   делали текст нечитаемым. Здесь берём переменные темы; внутриигровые
   пикеры (.mq-ls-picker), у которых свой тёмный фон, остаются как были. */
.mq-ls-sheet-list .mq-ls-pick {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
}
.mq-ls-sheet-list .mq-ls-pick.is-on {
    background: rgba(94, 160, 255, 0.16);
    border-color: var(--primary);
}
.mq-ls-sheet-list .mq-ls-pick small { color: var(--text-light); }
.mq-ls-sheet-list .mq-ls-pick-av {
    background: var(--accent-light);
    color: var(--primary);
}
.mq-ls-sheet-list .mq-ls-pick-av i { color: var(--primary); }
.mq-ls-sheet-list .mq-ls-pick > i.bi-plus-lg,
.mq-ls-sheet-list .mq-ls-pick > i.bi-chevron-right { color: var(--text-muted); }
.mq-ls-sheet-list .mq-ls-pick > i.bi-check2 { color: var(--primary); }
.mq-ls-pick-av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.72rem;
    color: #fff;
}
.mq-ls-pick-av img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- тост ---------- */
.mq-ls-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--mq-bnav-h, 56px) + 78px);
    transform: translateX(-50%) translateY(14px);
    z-index: 1060;
    max-width: min(92vw, 420px);
    padding: 11px 16px;
    border-radius: 14px;
    font-size: 0.87rem;
    line-height: 1.35;
    text-align: center;
    color: #eef1ff;
    background: rgba(14, 16, 38, 0.94);
    border: 1px solid rgba(94, 160, 255, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.mq-ls-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ================= отступы под mini-плеер =================
   Плашка видна во всех разделах — резервируем под неё место,
   чтобы не перекрывала контент. Правила идут после bottom-nav.css
   и перекрывают его отступы при равной специфичности. */
body.mq-listen-mini-on .list-view { padding-bottom: calc(var(--mq-bnav-h, 56px) + 60px); }
body.mq-listen-mini-on #ajax-page-container { padding-bottom: calc(var(--mq-bnav-h, 56px) + 60px); }
body.mq-listen-mini-on .settings-panel-body { padding-bottom: calc(32px + var(--mq-bnav-h, 56px) + 60px); }
body.mq-listen-mini-on .read-view { padding-bottom: calc(var(--player-height, 72px) + 76px); }
body.mq-listen-mini-on:not(.mq-bnav-on) .mq-ls-toast { bottom: 74px; }

/* ---------- доступность и десктоп ---------- */
@media (prefers-reduced-motion: reduce) {
    .mq-ls-art.is-playing .mq-ls-art-av,
    .mq-ls-spin { animation: none !important; }
    .mq-ls-full, .mq-ls-reciter, .mq-ls-picker { animation: none !important; }
    .mq-ls-full::before { animation: none !important; }
}
@media (min-width: 1024px) {
    .mq-ls-full-sheet { max-width: 560px; }
}
@media (max-width: 380px) {
    .mq-ls-controls { gap: 7px; }
    .mq-ls-ctl { width: 42px; height: 42px; font-size: 1rem; }
    .mq-ls-ctl--play { width: 64px; height: 64px; font-size: 1.55rem; }
}

/* ================= вкладка «Плейлисты»: создание и управление ================= */
.mq-ls-pl-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 14px 10px;
}
.mq-ls-pl-head b { font-size: 0.95rem; }

.mq-ls-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: var(--transition, 0.2s ease);
}
.mq-ls-btn:active { transform: scale(0.96); }
.mq-ls-btn.is-main { background: var(--primary); border-color: var(--primary); color: #0b1220; }
.mq-ls-btn.is-danger {
    color: #ef476f;
    border-color: rgba(239, 71, 111, 0.45);
    background: transparent;
}
.mq-ls-btn i { font-size: 0.95rem; }

.mq-ls-empty-hint { font-size: 0.8rem; line-height: 1.35; opacity: 0.75; max-width: 34ch; }
.mq-ls-empty--sm { padding: 18px 16px; gap: 8px; font-size: 0.85rem; }
.mq-ls-empty--sm i { font-size: 1.4rem; }

/* раскрытая карточка плейлиста */
.mq-ls-pl-rows {
    margin: -4px 14px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}
.mq-ls-pl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border-bottom: 1px solid var(--border);
}
.mq-ls-pl-rows .mq-ls-row:last-child { border-bottom: 0; }
/* как добавлять записи — подсказка рядом с кнопкой «К чтецам» */
.mq-ls-pl-hint {
    flex: 1 1 180px;
    min-width: 0;
    align-self: center;
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--text-light);
}

/* кнопки в строке суры: сердечко (избранное) / «+» (в плейлист) / «×» (убрать) */
.mq-ls-row-act {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    margin-left: 2px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted, #718096);
    font-size: 0.98rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition, 0.2s ease);
}
.mq-ls-row-act:active { transform: scale(0.86); }
.mq-ls-row-act:hover { background: var(--accent-light, rgba(94, 160, 255, 0.14)); color: var(--primary); }
.mq-ls-row-fav.is-on { color: #ef476f; }
.mq-ls-row-fav.is-on:hover { background: rgba(239, 71, 111, 0.14); color: #ef476f; }
/* запись «сура + чтец» уже сохранена хотя бы в один плейлист */
.mq-ls-row-save.is-on { color: var(--primary); }
.mq-ls-row-save.is-on:hover { background: rgba(94, 160, 255, 0.2); color: var(--primary); }

/* ================= нижняя шторка: плейлисты ================= */
.mq-ls-sheet {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.mq-ls-sheet[hidden] { display: none !important; }
.mq-ls-sheet-bg {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.55);
}
.mq-ls-sheet-card {
    position: relative;
    width: min(560px, 100%);
    max-height: min(86vh, 760px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35);
    animation: mq-ls-sheet-up 0.2s ease;
}
@keyframes mq-ls-sheet-up {
    from { transform: translateY(26px); opacity: 0; }
    to { transform: none; opacity: 1; }
}
.mq-ls-sheet-head { display: flex; align-items: center; gap: 8px; }
.mq-ls-sheet-head b {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 1rem;
}
/* сура и чтец под заголовком шторки сохранения */
.mq-ls-sheet-sub {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mq-ls-sheet-lab { font-size: 0.78rem; color: var(--text-light); }
.mq-ls-sheet-input { width: 100%; }
.mq-ls-sheet-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}
.mq-ls-sheet-list {
    max-height: min(52vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 2px;
}
.mq-ls-sheet-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.mq-ls-sheet-foot .mq-ls-btn { min-width: 132px; }

/* чекбоксы сур в шторке добавления */
.mq-ls-pick--check { cursor: pointer; }
.mq-ls-pick--check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: var(--primary);
    cursor: pointer;
}
.mq-ls-pick--check.is-disabled { opacity: 0.6; cursor: default; }
.mq-ls-pick > span.mq-ls-pick-num {
    flex: 0 0 auto;
    display: block;
    width: 26px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
}
.mq-ls-pick-av i { font-size: 1.05rem; color: var(--primary); }
.mq-ls-pick > i.bi-chevron-right { color: var(--text-muted, #718096); font-size: 0.9rem; }
/* запись ещё не сохранена — «+», сохранена — галочка (акцент) */
.mq-ls-pick > i.bi-plus-lg { color: var(--text-muted, #718096); font-size: 0.95rem; }
.mq-ls-pick.is-on > i.bi-plus-lg { color: var(--primary); }

@media (max-width: 380px) {
    .mq-ls-sheet-foot .mq-ls-btn { min-width: 0; flex: 1 1 auto; }
    .mq-ls-row-act { width: 32px; height: 32px; }
    .mq-ls-card-menu { width: 32px; height: 32px; }
}

/* ---------- меню карточки плейлиста (⋮) ---------- */
.mq-ls-pl-menu {
    position: fixed;
    z-index: 1400;
    min-width: 196px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    animation: mq-ls-menu-in 0.14s ease-out;
}
@keyframes mq-ls-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.mq-ls-pl-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}
.mq-ls-pl-menu button i { width: 18px; text-align: center; color: var(--text-muted); }
.mq-ls-pl-menu button:hover { background: var(--bg); color: var(--primary); }
.mq-ls-pl-menu button:hover i { color: var(--primary); }
.mq-ls-pl-menu button.is-danger:hover { color: #f87171; }
.mq-ls-pl-menu button.is-danger:hover i { color: #f87171; }