@charset "UTF-8";

:root {
    --sdv3-green: #268b61;
    --sdv3-green-dark: #0b5436;
    --sdv3-green-soft: #e8f6ed;
    --sdv3-ink: #13201b;
    --sdv3-text: #33413c;
    --sdv3-muted: #68736f;
    --sdv3-border: #dfe8e3;
    --sdv3-border-strong: #bfd5c8;
    --sdv3-page: #f8f9f9;
    --sdv3-surface: #ffffff;
    --sdv3-surface-soft: #f2f7f4;
    --sdv3-danger: #d30423;
    --sdv3-radius: 8px;
    --sdv3-shadow: 0 1px 8px rgba(43, 43, 43, .08);
    --sdv3-shadow-hover: 0 8px 24px rgba(43, 43, 43, .11);
}

.v3-category-layout {
    width: 100%;
    padding-top: 74px;
}

.oh.sdino-v3-shell {
    width: 100%;
    max-width: none;
    overflow: visible;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.zg-v3 {
    box-sizing: border-box;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 24px 14px 44px;
    color: var(--sdv3-text);
    /* System font stack — no webfont download, OS-native rendering.
       Matches the homepage and music landing for visual consistency. */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

/* Border-box reset for the shell subtree — legacy site defaults to
   content-box which makes any `width: 100%` + padding > viewport on
   phones (e.g. mobile panel was 423px wide on a 414 screen, triggering
   horizontal page scroll). Scoped to .sdino-v3-shell so legacy pages
   outside the v3 shell are untouched. */
.sdino-v3-shell .zg-v3,
.sdino-v3-shell .zg-v3 *,
.sdino-v3-shell .zg-v3 *::before,
.sdino-v3-shell .zg-v3 *::after {
    box-sizing: border-box;
}

.zg-v3 ul,
.zg-v3 ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.zg-v3 a {
    color: var(--sdv3-green);
}

.zg-v3 *,
.zg-v3 *::before,
.zg-v3 *::after {
    box-sizing: border-box;
}

.zg-v3__top {
    position: relative;
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
}

/* Decorative category cover — desktop only, hidden below 1024 to keep
   mobile/tablet layout clean. Anchored top-right under the gear icon. */
.zg-v3__cover {
    display: none;
}

@media (min-width: 1024px) {
    /* Two-column grid: crumbs + h1 span the whole row, chips/desc live in
       column 1, the cover lives in column 2 alongside them. The toggle
       stays absolute right:0 of .zg-v3__desc-wrap so it naturally lands
       on the boundary between desc (≈70%) and cover (≈30%). */
    .zg-v3__top:has(.zg-v3__cover) {
        grid-template-columns: minmax(0, 1fr) 280px;
        grid-auto-flow: dense;
        column-gap: 24px;
    }

    .zg-v3__top:has(.zg-v3__cover) > .zg-v3__crumbs,
    .zg-v3__top:has(.zg-v3__cover) > h1,
    .zg-v3__top:has(.zg-v3__cover) > .zg-v3__subcats {
        grid-column: 1 / -1;
    }

    .zg-v3__top:has(.zg-v3__cover) > .zg-v3__chips,
    .zg-v3__top:has(.zg-v3__cover) > .zg-v3__desc-wrap {
        grid-column: 1;
    }

    .zg-v3__top:has(.zg-v3__cover) > .zg-v3__desc-wrap {
        max-width: none;
    }

    .zg-v3__top:has(.zg-v3__cover) > .zg-v3__desc-wrap .zg-v3__desc {
        max-width: none;
        --desc-collapsed-height: 160px;
    }

    .zg-v3__cover {
        display: block;
        grid-column: 2;
        grid-row: span 2;
        align-self: start;
        width: 100%;
        aspect-ratio: 384 / 274;
        margin: 0;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 8px 24px -10px rgba(2, 28, 22, .22);
    }

    /* If there's no desc-wrap, the cover only needs the chips row beside it
       — span 2 would create an empty 156px gap below. */
    .zg-v3__top:has(.zg-v3__cover):not(:has(.zg-v3__desc-wrap)) > .zg-v3__cover {
        grid-row: auto;
    }

    .zg-v3__cover img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.zg-v3__crumbs {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--sdv3-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    font-size: 13px;
    line-height: 1.25;
    color: var(--sdv3-muted);
    overflow: hidden;
}

.zg-v3__crumbs .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.zg-v3__crumbs .breadcrumb li {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    white-space: nowrap;
}

.zg-v3__crumbs .breadcrumb li:last-child {
    overflow: hidden;
}

.zg-v3__crumbs .breadcrumb li:last-child span[itemprop="name"] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zg-v3__crumbs a {
    display: inline-flex;
    min-width: 0;
    color: var(--sdv3-green);
    text-decoration: none;
}

.zg-v3__crumbs a:hover {
    color: var(--sdv3-danger);
}

.zg-v3__crumbs .divider {
    display: inline-flex;
    padding: 0 7px;
    color: var(--sdv3-border-strong);
}

.zg-v3 h1 {
    margin: 0;
    color: var(--sdv3-ink);
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: 0;
}

/* Chips under H1: ported from the music landing page's sdmuz-chip
   pattern (dot-prefixed, borderless, all-text — no pill bubbles). Lets
   subcategory pages reuse the established visual identity of the music
   hub. Music subcategories add `--ai` (purple plate) and `--stat` (bold
   number); sound subcategories use `--dyn` (gray tabular nums). */
.zg-v3__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 11px;
    max-width: 1080px;
}

.zg-v3__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sdv3-ink, #1a3a30);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}

.zg-v3__chip::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--sdv3-green, #16936f);
    opacity: .65;
}

/* Sound-only: stats chip (clips / avg duration) — tabular nums, dimmer
   dot so it reads as "metadata" not "value prop". */
.zg-v3__chip--dyn {
    color: #4a5a55;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.zg-v3__chip--dyn::before {
    opacity: .35;
}

/* Music-only: stat chip with big colored number — same big-number
   treatment as sdmuz-chip--stat on the music hub. */
.zg-v3__chip--stat {
    font-variant-numeric: tabular-nums;
}

.zg-v3__chip-num {
    margin-right: 3px;
    color: var(--sdv3-green-dark, #0b5436);
    font-weight: 800;
}

/* Music-only: 100% AI-Generated chip — purple plate, the only chip with
   a background (signals AI provenance as the standout value prop). */
.zg-v3__chip--ai {
    padding: 5px 11px;
    border-radius: 8px;
    background: linear-gradient(135deg, #efeafe 0%, #f5e7fb 100%);
    color: #3d2a85;
    font-weight: 700;
}

.zg-v3__chip--ai::before {
    width: 6px;
    height: 6px;
    background: #6a4bd6;
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(106, 75, 214, .18);
}

.zg-v3__desc-wrap {
    position: relative;
    max-width: 860px;
    padding-right: 36px;
}

.zg-v3__desc {
    --desc-collapsed-height: 118px;
    max-width: 860px;
    color: var(--sdv3-text);
    font-size: 16px;
    line-height: 1.55;
}

/* Sound subcategories have no cover image on the right (covers exist
   only on music subcategories), so the description block can use the
   full content width instead of being capped at 860px. Discriminated
   via the `data-v3-is-music="0"` attribute on the .zg-v3 root. */
.zg-v3[data-v3-is-music="0"] .zg-v3__desc-wrap,
.zg-v3[data-v3-is-music="0"] .zg-v3__desc {
    max-width: none;
}

.zg-v3__desc-wrap.is-desc-collapsible:not(.is-desc-expanded) .zg-v3__desc {
    position: relative;
    max-height: var(--desc-collapsed-height);
    overflow: hidden;
}

.zg-v3__desc-wrap.is-desc-collapsible:not(.is-desc-expanded) .zg-v3__desc::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 46px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(248, 249, 249, 0), var(--sdv3-page));
}

.zg-v3__desc p {
    margin: 0 0 12px;
}

.zg-v3__desc-toggle {
    display: none;
    position: absolute;
    right: 0;
    bottom: 8px;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 0;
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--sdv3-border);
    border-radius: 6px;
    color: var(--sdv3-ink);
    cursor: pointer;
    z-index: 2;
    transition: background .15s ease, border-color .15s ease;
}

.zg-v3__desc-toggle::before {
    content: "";
    width: 12px;
    height: 12px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 6 8 10 12 6'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 6 8 10 12 6'/></svg>") center/contain no-repeat;
    transition: transform .18s ease;
}

.zg-v3__desc-toggle[aria-expanded="true"]::before {
    transform: rotate(180deg);
}

.zg-v3__desc-toggle:hover {
    background: #ffffff;
    border-color: var(--sdv3-green);
    color: var(--sdv3-green);
}

.zg-v3__desc-wrap.is-desc-collapsible .zg-v3__desc-toggle {
    display: inline-flex;
}

.zg-v3__subcats {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Search-page related-categories row. Legacy style.css applies a heavy
   dark-green banner (background:#517255, padding:15) + `#`-prefixed
   hashtag pills via .result_cats li::before / a::before content.
   Restyle ALL of that to the new chip pattern (borderless, dot-prefix,
   matches `.zg-v3__chip` / `.sdmuz-chip`). PHP template stays untouched. */
.zg-v3__subcats .result_cats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* The dot is the inter-item separator (first dot hidden below).
       Gap = visible distance between adjacent chip "groups". */
    gap: 8px 18px;
    width: 100%;
    margin: 14px 0 22px;
    padding: 0;
    background: transparent;
    border: 0;
    list-style: none;
    box-sizing: border-box;
}

.zg-v3__subcats .result_cats li {
    display: inline-flex;
    align-items: center;
    /* Tight 7px between the leading dot and the link text so the dot
       reads as a separator-mark, not a standalone chip-icon. */
    gap: 7px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    list-style: none;
}

/* The dot is an INTER-item separator. The first item shouldn't have a
   leading dot pinned to the container edge — hide it on :first-child. */
.zg-v3__subcats .result_cats li:first-child::before {
    display: none;
}

/* Dot-prefix dot (replaces the legacy `#` symbol from style.css). */
.zg-v3__subcats .result_cats li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--sdv3-green, #16936f);
    opacity: .55;
    transition: opacity .15s ease;
}

/* Legacy style.css injects the `#` via .result_cats li a::before / span
   content — neutralize it. */
.zg-v3__subcats .result_cats li a::before,
.zg-v3__subcats .result_cats li > span::before {
    content: none;
}

.zg-v3__subcats .result_cats li a {
    color: var(--sdv3-ink, #1a3a30);
    text-decoration: none;
    transition: color .15s ease;
}

.zg-v3__subcats .result_cats li:hover::before {
    opacity: 1;
}

.zg-v3__subcats .result_cats li a:hover {
    color: var(--sdv3-green-dark, #0b5436);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 560px) {
    .zg-v3__subcats .result_cats {
        gap: 6px 14px;
        margin: 10px 0 16px;
    }
    .zg-v3__subcats .result_cats li {
        font-size: 13px;
    }
}

.zg-v3__subcats .zvukcat {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.zg-v3__subcats .zvukcat li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "name count"
        "meta meta";
    align-items: center;
    min-height: 52px;
    padding: 9px 10px;
    border: 1px solid var(--sdv3-border);
    border-radius: var(--sdv3-radius);
    background: var(--sdv3-surface);
    box-shadow: 0 1px 4px rgba(43, 43, 43, .04);
}

.zg-v3__subcats .zvukcat li.hdr {
    display: none;
}

.zg-v3__subcats .zvukcat .infzvuk {
    float: none;
    display: block;
    width: auto;
    line-height: 1.25;
}

.zg-v3__subcats .zvukcat .frstzvuk {
    grid-area: name;
    min-width: 0;
}

.zg-v3__subcats .zvukcat .frstzvuk a {
    display: block;
    overflow: hidden;
    color: var(--sdv3-green-dark);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zg-v3__subcats .zvukcat .frstzvuk a:hover {
    color: var(--sdv3-danger);
}

.zg-v3__subcats .zvukcat .kolzvk {
    grid-area: count;
    min-width: 30px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--sdv3-green-soft);
    color: var(--sdv3-green-dark);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.zg-v3__subcats .zvukcat .dlitzvk {
    grid-area: meta;
    margin-top: 4px;
    color: var(--sdv3-muted);
    font-size: 12px;
}

.zg-v3__subcats .zvukcat .dwdzvk {
    display: none;
}

/* Admin-only collapsed widget. Gear icon sits at the right end of the
   breadcrumbs line; click opens a popover that grows to the LEFT so it
   doesn't push the page width. Markup: <details class="zg-v3__admin
   forAdmin"><summary></summary><div class="zg-v3__admin-body">...</div>
   </details>. Native <details> = zero JS. */
.zg-v3__admin.forAdmin {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 50;
}

.zg-v3__admin.forAdmin > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--sdv3-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    color: var(--sdv3-muted);
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.zg-v3__admin.forAdmin > summary::-webkit-details-marker { display: none; }
.zg-v3__admin.forAdmin > summary::marker { content: ""; }

.zg-v3__admin.forAdmin > summary::before {
    content: "\2699"; /* gear ⚙ */
    font-size: 15px;
    line-height: 1;
}

.zg-v3__admin.forAdmin > summary:hover,
.zg-v3__admin.forAdmin[open] > summary {
    color: var(--sdv3-green);
    border-color: var(--sdv3-green);
    background: var(--sdv3-green-soft, #e8f6ed);
}

.zg-v3__admin-body {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    padding: 6px;
    border: 1px solid var(--sdv3-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--sdv3-shadow, 0 6px 18px rgba(0, 0, 0, .12));
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
}

.zg-v3__admin-body a {
    display: block;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--sdv3-text);
    text-decoration: none;
}

.zg-v3__admin-body a:hover {
    background: var(--sdv3-green-soft, #e8f6ed);
    color: var(--sdv3-green-dark, #0b5436);
}

/* Make room for the gear at the right end of the breadcrumbs line */
.zg-v3__crumbs {
    padding-right: 40px;
}

.zg-v3__panel {
    position: sticky;
    top: 76px;
    z-index: 90;
    align-self: start;
    margin: 18px 0;
    padding: 12px;
    border: 1px solid var(--sdv3-border);
    border-radius: var(--sdv3-radius);
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--sdv3-shadow);
    overflow: visible;
}

.zg-v3__panel-sentinel {
    height: 1px;
    margin: 0;
    pointer-events: none;
}

body.sdino-v3-panel-stuck .sdino-head.sdino-v3-top-head {
    box-shadow: none;
}

.zg-v3__sorts,
.zg-v3__groups,
.zg-v3__filters,
.zgcat-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.zg-v3__sorts,
.zg-v3__filters,
.zgcat-row {
    flex-wrap: wrap;
}

.zg-v3__catalog-trigger {
    gap: 7px;
    order: 100;
    margin-left: auto;
}

.zg-v3__filters {
    width: 100%;
    margin-top: 0;
    row-gap: 8px;
}

.zg-v3__filters--with-catalog {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 8px;
    row-gap: 8px;
}

.zg-v3__filter-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    grid-column: 1;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 38px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.zg-v3__filter-scroll::-webkit-scrollbar {
    display: none;
}

.zgcat-row {
    display: contents;
    width: auto;
}

.zg-v3__filters > .zg-v3__groups {
    flex: 0 0 100%;
    order: 200;
}

.zg-v3__filters--with-catalog > .zg-v3__groups {
    grid-column: 1 / -1;
}

.zg-v3__filters--with-catalog > .zg-v3__catalog-trigger {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin-left: 0;
}

.zg-v3__btn,
.zgcat-fdrop-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid var(--sdv3-border-strong);
    border-radius: 7px;
    background: var(--sdv3-surface);
    color: var(--sdv3-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

.zg-v3__btn:hover,
.zgcat-fdrop-toggle:hover {
    border-color: var(--sdv3-green);
    color: var(--sdv3-green-dark);
    background: var(--sdv3-green-soft);
}

.zg-v3__btn.is-active,
.zgcat-fdrop.is-active > .zgcat-fdrop-toggle,
.zgcat-fdrop.is-open > .zgcat-fdrop-toggle {
    border-color: var(--sdv3-green);
    background: var(--sdv3-green);
    color: #fff;
}

.zg-v3__groups {
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--sdv3-border);
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.zg-v3__groups::-webkit-scrollbar {
    display: none;
}

.zg-v3__groups .zg-v3__btn {
    flex: 0 0 auto;
}

.zgcat-fdrop {
    position: relative;
    flex: 0 0 auto;
}

.zgcat-fdrop-toggle {
    gap: 7px;
}

.zgcat-fdrop-caret {
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform .15s ease;
}

.zgcat-fdrop.is-open .zgcat-fdrop-caret {
    transform: rotate(225deg) translate(-1px, -1px);
}

.zgcat-fdrop-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.zgcat-fdrop-icon-grid {
    background:
        linear-gradient(currentColor, currentColor) 0 0 / 5px 5px no-repeat,
        linear-gradient(currentColor, currentColor) 9px 0 / 5px 5px no-repeat,
        linear-gradient(currentColor, currentColor) 0 9px / 5px 5px no-repeat,
        linear-gradient(currentColor, currentColor) 9px 9px / 5px 5px no-repeat;
    opacity: .9;
}

.zgcat-fdrop-chips {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 100;
    display: none;
    min-width: 190px;
    max-width: min(520px, calc(100vw - 28px));
    max-height: 360px;
    padding: 8px;
    border: 1px solid var(--sdv3-border);
    border-radius: var(--sdv3-radius);
    background: var(--sdv3-surface);
    box-shadow: 0 14px 34px rgba(19, 32, 27, .16);
    overflow: auto;
}

.zgcat-fdrop.is-open .zgcat-fdrop-chips {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
}

.zg-v3__filter-scroll .zgcat-fdrop.is-open .zgcat-fdrop-chips {
    position: fixed;
    top: var(--zgcat-drop-top, 0);
    left: var(--zgcat-drop-left, 0);
    right: auto;
    min-width: min(190px, var(--zgcat-drop-max-width, calc(100vw - 24px)));
    max-width: var(--zgcat-drop-max-width, min(520px, calc(100vw - 24px)));
}

.zgcat-fdrop-chips .zg-v3__btn {
    min-height: 30px;
    padding: 6px 9px;
    font-size: 13px;
}

.zgcat-music-tags-window {
    width: 360px;
}

.zgcat-groups-window-category,
.zgcat-music-tags-window-search {
    width: 420px;
}

.zgcat-music-tag-head {
    position: sticky;
    top: -8px;
    z-index: 2;
    width: 100%;
    margin: -8px -8px 8px;
    padding: 8px;
    background: var(--sdv3-surface);
    border-bottom: 1px solid var(--sdv3-border);
}

.zgcat-music-tag-search {
    width: 100%;
    height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--sdv3-border-strong);
    border-radius: 7px;
    background: #fff;
    color: var(--sdv3-text);
    font-family: inherit;
    font-size: 14px;
}

.zgcat-music-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

.zg-v3__tracks {
    margin-top: 16px;
    min-height: 58vh;
}

.zg-v3__tracks .trackList {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: opacity .12s ease;
}

.zg-v3.is-loading .zg-v3__tracks .trackList {
    opacity: .58;
}

.zg-v3__section {
    margin: 26px 0 0;
    scroll-margin-top: 86px;
}

.zg-v3__section h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    color: var(--sdv3-ink);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
}

.zgcat-section-count {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--sdv3-green-soft);
    color: var(--sdv3-green-dark);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.zg-v3__list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zg-v3 .playtrack {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    max-width: 100%;
    min-height: 72px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: var(--sdv3-radius);
    background: var(--sdv3-surface);
    box-shadow: var(--sdv3-shadow);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.zg-v3 .playtrack:hover {
    border-color: var(--sdv3-border-strong);
    box-shadow: var(--sdv3-shadow-hover);
    transform: translateY(-1px);
}

/* Cancel legacy `.playtrack div { line-height:60px; height:60px; margin-right:15px }`
 * from style.css that forces every <div> inside the row to be 60 px tall.
 * Selector (0,2,1) beats legacy (0,1,1). Each specific child (.name, .peaks,
 * .music-cover, etc.) still sets its own dimensions on top of this base.
 */
.zg-v3 .playtrack div {
    line-height: normal;
    height: auto;
    margin-right: 0;
}

.zg-v3 .playtrack .name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    min-width: 220px;
    max-width: 330px;
    color: var(--sdv3-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.zg-v3 .playtrack .playerLeft {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1 1 auto;
}

.zg-v3 .playtrack .playerRight {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
    color: var(--sdv3-ink);
}

.zg-v3 .playtrack .play {
    flex: 0 0 auto;
    margin-left: 0;
    margin-right: 0;
}

.zg-v3 .playtrack .plBttn {
    position: relative;
    display: block;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--sdv3-green-dark) url("/img/icon/play-button.svg") no-repeat center;
    background-size: 32px;
    cursor: pointer;
}

.zg-v3 .playtrack .plBttn.Pause {
    background-image: url("/img/icon/pause-button.svg");
}

.zg-v3 .playtrack .plBttn.loading {
    background-image: none;
    cursor: wait;
}

.zg-v3 .playtrack .plBttn.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -11px 0 0 -11px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sdino-spin .72s linear infinite;
}

@keyframes sdino-spin {
    to {
        transform: rotate(360deg);
    }
}

.zg-v3 .playtrack .peaks {
    min-width: 220px;
    flex: 1 1 auto;
}

.zg-v3 .playtrack .waveform {
    position: relative;
    width: 100%;
    height: 50px;
}

/* Music keeps the taller 60px waveform — matches the 60px cover/title block. */
.zg-v3 .playtrack-music .waveform {
    height: 60px;
}

.zg-v3 .playtrack .waveform.loading {
    overflow: hidden;
    background: linear-gradient(180deg, #eef6f1 0%, #e4efe9 100%) !important;
    border-radius: 4px;
}

.zg-v3 .playtrack .waveform.loading > * {
    visibility: hidden;
}

.zg-v3 .playtrack .waveform.loading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, .55) 45%,
        rgba(255, 255, 255, .75) 50%,
        rgba(255, 255, 255, .55) 55%,
        transparent 100%);
    transform: translateX(-100%);
    animation: sdino-wf-shimmer 1.6s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
}

@keyframes sdino-wf-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(280%); }
}

.zg-v3 .playtrack .time {
    padding-left: 22px;
    background: url("/img/icon/clock.svg") no-repeat left center;
    background-size: 16px;
    white-space: nowrap;
}

.zg-v3 .playtrack .stats {
    position: relative;
    white-space: nowrap;
}

.zg-v3 .playtrack .download {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 0;
    background-color: #16302a;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3 v11 M5.5 9.5 L11 15 L16.5 9.5'/%3E%3Cpath d='M4 18 L18 18'/%3E%3C/svg%3E") no-repeat center / 22px 22px;
            mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3 v11 M5.5 9.5 L11 15 L16.5 9.5'/%3E%3Cpath d='M4 18 L18 18'/%3E%3C/svg%3E") no-repeat center / 22px 22px;
    color: transparent;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    transition: background-color 140ms ease, transform 140ms ease;
}

.zg-v3 .playtrack .download:hover {
    background-color: #b87813;
    transform: translateY(1px);
}

.zg-v3 .playtrack .download:active {
    transform: translateY(2px);
}

.zg-v3 .tooltip {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    min-width: 180px;
    padding: 8px 10px;
    border: 1px solid var(--sdv3-border);
    border-radius: 7px;
    background: #fff;
    box-shadow: var(--sdv3-shadow-hover);
    color: var(--sdv3-text);
    font-size: 13px;
    line-height: 1.5;
}

.zg-v3 .ttw:hover .tooltip {
    display: block;
}

.zg-v3 .trackCat,
.zg-v3 .trackCatSep {
    color: var(--sdv3-green);
    text-decoration: none;
}

.zg-v3 .trackCat:hover {
    color: var(--sdv3-danger);
}

.zg-v3 .trackCatSep {
    padding: 0 4px;
    opacity: .65;
}

.zg-v3 .playtrack-music {
    min-height: 86px;
}

.zg-v3 .playtrack-music .playerLeft {
    align-items: center;
    width: calc(100% - 180px);
}

.zg-v3 .playtrack-music .music-cover {
    position: relative;
    width: 60px;
    min-width: 60px;
    height: 60px;
    margin-left: unset;
    border-radius: 8px;
    background: var(--sdv3-cover, linear-gradient(135deg, #174039, #268b61));
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.zg-v3 .playtrack-music .music-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .2);
}

.zg-v3 .playtrack-music .music-cover .plBttn {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    margin: 10px;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.25));
}

.zg-v3 .playtrack-music .musicInfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 290px;
    max-width: 560px;
    height: auto;
    line-height: 1.2;
    margin: 0 15px 0 0;
}

.zg-v3 .playtrack-music .peaks {
    min-width: 160px;
}

.zg-v3 .playtrack-music .musicInfo .name {
    width: auto;
    height: auto;
    min-width: 0;
    margin: 0 0 4px;
    color: var(--sdv3-ink);
    font-weight: 600;
}

.zg-v3 .playtrack-music:has(.musicDesc:hover),
.zg-v3 .playtrack-music:has(.musicDesc:focus-within) {
    position: relative;
    z-index: 30;
    animation: sdino-desc-elevate 1ms linear 200ms forwards;
}

@keyframes sdino-desc-elevate {
    to { z-index: 30; }
}

.zg-v3 .playtrack-music .musicDescBox {
    position: relative;
    min-width: 0;
    height: 1.35em;
    margin: 0 0 4px;
    font-size: 11px;
    line-height: 1.35;
}

.zg-v3 .playtrack-music .musicDesc {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 1.35em;
    overflow: hidden;
    color: var(--sdv3-muted);
    line-height: 1.35;
    overflow-wrap: anywhere;
    cursor: default;
}

.zg-v3 .playtrack-music .musicDesc__text {
    display: -webkit-box;
    flex: 0 0 auto;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.zg-v3 .playtrack-music .musicDesc .musicMeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin: 0;
    padding: 6px 0 0;
    border-top: 1px solid rgba(2, 28, 22, .08);
    color: var(--sdv3-ink);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    opacity: .65;
}

.zg-v3 .playtrack-music .musicDesc:hover,
.zg-v3 .playtrack-music .musicDesc:focus-within {
    animation: sdino-desc-open 1ms linear 400ms forwards;
}

.zg-v3 .playtrack-music .musicDesc:hover .musicDesc__text,
.zg-v3 .playtrack-music .musicDesc:focus-within .musicDesc__text {
    animation: sdino-desc-text-open 1ms linear 200ms forwards;
}

@keyframes sdino-desc-open {
    to {
        height: auto;
        overflow: visible;
        z-index: 10;
        padding: 6px 8px;
        margin: -6px -8px;
        border-radius: 0 0 6px 6px;
        background: #ffffff;
        box-shadow: 0 18px 28px -8px rgba(2, 28, 22, .22);
        color: var(--sdv3-ink);
    }
}

@keyframes sdino-desc-text-open {
    to {
        -webkit-line-clamp: unset;
        overflow: visible;
    }
}

.zg-v3 .playtrack-music .musicMeta .trackMeta__bpm,
.zg-v3 .playtrack-music .musicMeta .trackMeta__bitrate,
.zg-v3 .playtrack-music .musicMeta .trackMeta__downloads {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

/* Google Auto Ads occasionally injects a slot INSIDE a .playtrack-music
   <li>, which inflates the card by 200-400px. Hide any auto-placed ad
   that lands inside our player rows; the matching MutationObserver in
   v3_category_admin.php also removes the node so layout collapses. The
   proper long-term fix is AdSense Console → Page exclusions → selector
   `.playtrack`, but this guard handles legacy cached placements. */
.zg-v3 .playtrack .google-auto-placed,
.zg-v3 .playtrack ins.adsbygoogle,
.zg-v3 .playtrack-music .google-auto-placed,
.zg-v3 .playtrack-music ins.adsbygoogle {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
}

.zg-v3 .playtrack-music .musicTags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    height: auto;
    line-height: 1;
    margin: 0;
}

.zg-v3 .playtrack-music .musicTags span {
    display: inline-flex;
    max-width: 120px;
    overflow: hidden;
    padding: 3px 6px;
    border-radius: 999px;
    background: var(--sdv3-green-soft);
    color: var(--sdv3-green-dark);
    font-size: 11px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.zg-v3 .playtrack-music .musicTags span:hover {
    background: var(--sdv3-green, #268b61);
    color: #fff;
}

/* Admin-only delete link floats at the very top-right corner of the
   .playtrack row, above the download button. Invisible by default;
   ghost-fades in (low opacity, intentionally subtle) when the user
   hovers anywhere on the row; turns red on direct hover so destructive
   intent is unambiguous. Position anchors to .playtrack (li already
   has position:relative). */
.zg-v3 a.delTrack {
    position: absolute;
    top: 4px;
    right: 8px;
    z-index: 6;
    color: #b4bdb8;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, color .15s ease;
}

.zg-v3 .playtrack:hover a.delTrack,
.zg-v3 a.delTrack:focus {
    opacity: .35;
    pointer-events: auto;
}

.zg-v3 a.delTrack:hover {
    opacity: 1;
    color: var(--sdv3-danger, #c0392b);
    text-decoration: underline;
}

.zg-v3__group-loader,
.zg-v3__infinite {
    padding: 12px 0;
    color: var(--sdv3-muted);
    font-size: 13px;
}

.zg-v3__section.is-loading .zg-v3__group-loader,
.zg-v3.is-loading .zg-v3__infinite {
    color: var(--sdv3-green-dark);
}

.zg-v3__empty {
    padding: 18px;
    border: 1px dashed var(--sdv3-border-strong);
    border-radius: var(--sdv3-radius);
    color: var(--sdv3-muted);
    background: var(--sdv3-surface);
}

.zg-v3__catalog {
    scroll-margin-top: 86px;
    margin-top: 30px;
    padding: 16px;
    border: 1px solid var(--sdv3-border);
    border-radius: var(--sdv3-radius);
    background: var(--sdv3-surface);
    box-shadow: var(--sdv3-shadow);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.zg-v3__catalog.is-highlighted {
    border-color: var(--sdv3-green);
    box-shadow: 0 0 0 3px rgba(38, 139, 97, .16), var(--sdv3-shadow-hover);
}

.zg-v3__catalog-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.zg-v3__catalog-title {
    margin: 0;
    color: var(--sdv3-ink);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
}

.zg-v3__catalog-count {
    min-width: 28px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--sdv3-green-soft);
    color: var(--sdv3-green-dark);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.zg-v3__catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.zg-v3__catalog-card {
    min-height: 64px;
    padding: 10px;
    border: 1px solid var(--sdv3-border);
    border-radius: var(--sdv3-radius);
    background: var(--sdv3-surface-soft);
}

.zg-v3__catalog-card.is-current {
    border-color: var(--sdv3-border-strong);
    background: #eef8f2;
}

.zg-v3__catalog-root,
.zg-v3__catalog-children a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    color: var(--sdv3-green-dark);
    text-decoration: none;
}

.zg-v3__catalog-root {
    min-height: 42px;
    padding: 0 6px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.zg-v3__catalog-root span,
.zg-v3__catalog-children span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zg-v3__catalog-root em,
.zg-v3__catalog-children em {
    flex: 0 0 auto;
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #fff;
    color: var(--sdv3-muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    text-align: center;
}

.zg-v3__catalog-root:hover,
.zg-v3__catalog-children a:hover {
    color: var(--sdv3-danger);
}

.zg-v3__catalog-root.is-current,
.zg-v3__catalog-children a.is-current {
    color: #fff;
}

.zg-v3__catalog-root.is-current {
    margin: -4px -4px 8px;
    padding: 6px 8px;
    border-radius: 7px;
    background: var(--sdv3-green);
}

.zg-v3__catalog-children {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.zg-v3__catalog-children a {
    max-width: 100%;
    min-height: 30px;
    padding: 5px 8px;
    border: 1px solid var(--sdv3-border-strong);
    border-radius: 7px;
    background: var(--sdv3-surface);
    font-size: 13px;
    line-height: 1.2;
}

.zg-v3__catalog-children a.is-current {
    border-color: var(--sdv3-green);
    background: var(--sdv3-green);
}

.sdino-category-popup-open {
    overflow: hidden;
}

.zg-v3__catalog-popup {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    padding: 22px;
    background: rgba(10, 19, 15, .58);
}

.zg-v3__catalog-popup.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.zg-v3__catalog-modal {
    display: flex;
    flex-direction: column;
    width: min(1040px, 100%);
    max-height: min(760px, calc(100vh - 44px));
    border: 1px solid var(--sdv3-border);
    border-radius: var(--sdv3-radius);
    background: var(--sdv3-surface);
    box-shadow: 0 22px 70px rgba(0, 0, 0, .28);
    overflow: hidden;
}

.zg-v3__catalog-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--sdv3-border);
    background: var(--sdv3-surface-soft);
}

.zg-v3__catalog-modal-title {
    margin: 0;
    color: var(--sdv3-ink);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
}

.zg-v3__catalog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--sdv3-border-strong);
    border-radius: 7px;
    background: #fff;
    color: var(--sdv3-text);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.zg-v3__catalog-close:hover {
    border-color: var(--sdv3-green);
    color: var(--sdv3-green-dark);
    background: var(--sdv3-green-soft);
}

.zg-v3__catalog-modal-body {
    padding: 14px;
    overflow: auto;
}

.zg-v3__catalog-modal-foot {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-top: 1px solid var(--sdv3-border);
    background: var(--sdv3-surface-soft);
}

.zg-v3__catalog-foot-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--sdv3-border-strong);
    border-radius: 7px;
    color: var(--sdv3-green-dark);
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.zg-v3__catalog-foot-link:hover {
    border-color: var(--sdv3-green);
    color: #fff;
    background: var(--sdv3-green);
}

.zg-v3-search .zg-v3__subcats {
    margin-top: 8px;
}

@media (max-width: 860px) {
    .zg-v3 {
        padding: 18px 12px 38px;
    }

    .zg-v3 h1 {
        font-size: 32px;
    }

    .zg-v3__panel {
        top: 78px;
        width: calc(100% + 24px);
        max-width: none;
        margin-left: -12px;
        margin-right: -12px;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .zg-v3__sorts,
    .zg-v3__groups {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .zg-v3__filters {
        width: 100%;
        flex-wrap: wrap;
        overflow: visible;
        padding-bottom: 0;
    }

    .zg-v3__filter-scroll {
        width: 100%;
    }

    .zgcat-fdrop {
        position: static;
    }

    .zgcat-fdrop-chips {
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
    }

    .zg-v3__filter-scroll .zgcat-fdrop.is-open .zgcat-fdrop-chips {
        right: auto;
        width: auto;
        min-width: min(190px, var(--zgcat-drop-max-width, calc(100vw - 24px)));
        max-width: var(--zgcat-drop-max-width, calc(100vw - 24px));
    }

    .zg-v3__catalog-trigger {
        margin-left: 0;
    }

    .zg-v3__catalog-popup {
        padding: 10px;
    }

    .zg-v3__catalog-modal {
        max-height: calc(100vh - 20px);
    }
}

@media (max-width: 768px) {
    .zg-v3 .playtrack {
        max-width: 100%;
        overflow: hidden;
        padding-bottom: 52px;
    }

    .zg-v3 .playtrack .name {
        min-width: 0;
    }

    .zg-v3 .playtrack .playerRight {
        position: absolute;
        right: 12px;
        bottom: 0;
    }

    .zg-v3 .playtrack-music {
        padding-bottom: 58px;
    }

    .zg-v3 .playtrack-music .playerLeft {
        flex-wrap: wrap;
        width: 100%;
        min-width: 0;
    }

    .zg-v3 .playtrack-music .musicInfo {
        flex: 1 1 auto;
        max-width: calc(100% - 76px);
        min-width: 0;
    }

    .zg-v3 .playtrack-music .peaks {
        order: 99;
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        margin: 8px 0 0;
    }

    /* Legacy style.css fires @media (max-width: 720px) on .playtrack family
       (flex-wrap, name absolute positioning, peaks width). Replay those
       rules within the v3-shell scope at 768px so the 721-768 range gets
       the same vertical-stacked layout instead of a squeezed inline one. */
    .zg-v3 .playtrack {
        flex-wrap: wrap;
    }

    .zg-v3 .playtrack .playerLeft {
        width: 100%;
        padding-top: 10px;
    }

    .zg-v3 .playtrack .playerRight {
        width: auto;
    }

    .zg-v3 .playtrack .peaks {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .zg-v3 {
        padding: 14px 10px 34px;
    }

    /* Re-match the panel's edge-bleed to the new 10px parent padding —
       previous -12px values (from the 860px block) were 2px wider than
       the parent on each side and produced a horizontal page scroll. */
    .zg-v3__panel {
        width: calc(100% + 20px);
        margin-left: -10px;
        margin-right: -10px;
    }

    .zg-v3 h1 {
        font-size: 28px;
    }

    .zg-v3__btn,
    .zgcat-fdrop-toggle {
        min-height: 36px;
        padding: 8px 11px;
        font-size: 13px;
    }

    .zg-v3__section h2 {
        font-size: 19px;
    }

    .zgcat-music-tag-list .zg-v3__btn {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* On phones we hide the description entirely — the hover popup is not
       usable on touch, and the row needs more room for title + tags. */
    .sdino-v3-shell .zg-v3 .playtrack-music .musicDescBox {
        display: none;
    }

    /* Defeat legacy `@media (max-width: 720px) .playtrack .name { position:
       absolute; top: 85px; width: calc(100% - 180px) }` from style.css so the
       title comes back into the normal flex column flow inside .musicInfo,
       above the tags row. Specificity 0,5,0 beats legacy 0,2,0. */
    .sdino-v3-shell .zg-v3 .playtrack-music .musicInfo .name {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        width: auto;
        max-width: 100%;
        min-width: 0;
        height: auto;
        margin: 0 0 4px;
        padding: 0 56px 0 0;
        overflow: hidden;
        font-size: 14px;
    }


    /* Tighten card bottom — playerRight no longer lives in flow at the
       bottom edge, so the legacy 58px gutter from the 720px block is dead
       space here. */
    .sdino-v3-shell .zg-v3 .playtrack-music {
        padding-bottom: 12px;
    }

    /* Shrink cover to 50×50 on phones so the row height matches the title
       block more naturally. plBttn margin is re-centered to 5 in a later
       @media block (below the Mode-2 rule) so it wins by source order. */
    .sdino-v3-shell .zg-v3 .playtrack-music .music-cover {
        width: 50px;
        min-width: 50px;
        height: 50px;
    }

    /* Drop the desktop min-width:290px so the column fits next to the cover
       at 414px viewports; otherwise the whole musicInfo flex-wraps below
       the cover. Stretch the column to the cover's 50px height and pin
       title to the top edge / tags to the bottom edge of the cover line
       via space-between, so visually title=cover-top, tags=cover-bottom.
       Reserve right-side gutter for the absolute time corner. */
    .sdino-v3-shell .zg-v3 .playtrack-music .musicInfo {
        flex: 1 1 0;
        min-width: 0;
        max-width: calc(100% - 66px);
        height: 50px;
        justify-content: space-between;
        margin-right: 0;
    }

    /* Tag chips: single horizontally-scrollable row aligned to the cover's
       bottom edge (musicInfo is space-between, so this child pins to the
       column's bottom). min-width:0 + max-width:100% prevent the nowrap
       row from pushing its min-content width up the flex chain and
       triggering a horizontal page scroll. */
    .sdino-v3-shell .zg-v3 .playtrack-music .musicTags {
        margin: 0;
        flex-wrap: nowrap;
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x proximity;
    }
    .sdino-v3-shell .zg-v3 .playtrack-music .musicTags::-webkit-scrollbar {
        display: none;
    }
    .sdino-v3-shell .zg-v3 .playtrack-music .musicTags span {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    /* Waveform crop trick: wavesurfer renders ~60px symmetric mirror; the
       top half carries the full visual essence, so cropping to 30px via
       parent overflow:hidden saves vertical space without losing meaning. */
    .sdino-v3-shell .zg-v3 .playtrack-music .peaks {
        height: 30px;
        overflow: hidden;
        flex: 1 1 auto;
        width: calc(100% - 36px);
        max-width: calc(100% - 36px);
    }

    /* playerRight becomes a full-card overlay so .time sits aligned with
       the title row at top, and .download sits at the right end of the
       waveform row — both anchored to corners independent of the flex
       flow on the left. */
    .sdino-v3-shell .zg-v3 .playtrack-music .playerRight {
        position: absolute;
        inset: 0;
        display: block;
        width: auto;
        height: auto;
        padding: 0;
        pointer-events: none;
    }

    /* top:18 + line-height 16 gives the 14px clock icon enough room to
       render without top/bottom clipping, while keeping the 12px text
       centered against the title row. */
    .sdino-v3-shell .zg-v3 .playtrack-music .playerRight .time {
        position: absolute;
        top: 18px;
        right: 14px;
        height: 16px;
        margin: 0;
        padding-left: 18px;
        background-size: 14px 14px;
        background-position: left center;
        font-size: 12px;
        line-height: 16px;
        pointer-events: auto;
    }

    /* bottom:18 puts the 22px download icon vertical-centered against the
       30px peaks row (peaks ends at padding-bottom+0 = 12px from card
       bottom, peaks center = 12+15 = 27 → icon center = 18+11 = 29). */
    .sdino-v3-shell .zg-v3 .playtrack-music .playerRight .download {
        position: absolute;
        right: 8px;
        bottom: 18px;
        margin: 0;
        pointer-events: auto;
    }

    /* ───────── SOUND mobile polish (mirror of music-mobile) ─────────
       Same grammar as .playtrack-music above but for effects/sounds:
       44px play button stays as-is (no enlargement — no cover to
       wrap), trackTitleWrap forms a 44px-tall column next to it with
       name pinned top and trackMeta pinned bottom (space-between),
       waveform crops to 30px below, .playerRight floats time top-
       right and download bottom-right of the waveform row.
       Selector excludes .playtrack-music so it scopes to sound only. */
    .sdino-v3-shell .zg-v3 .playtrack:not(.playtrack-music) {
        padding-bottom: 12px;
    }

    .sdino-v3-shell .zg-v3 .playtrack:not(.playtrack-music) .playerLeft {
        flex-wrap: wrap;
        width: 100%;
        min-width: 0;
        padding-top: 0;
        height: auto;
        line-height: normal;
    }

    /* Legacy in style.css forces `.playtrack .play { margin-left: 15px }` and
       `.playtrack div { height: 60px; line-height: 60px; margin-right: 7-15px }`.
       Both bloat the row to 60px and shove the button right. Cancel here so
       the 44px play + 44px title column line up flush at the card edge. */
    .sdino-v3-shell .zg-v3 .playtrack:not(.playtrack-music) .play {
        margin-left: 0;
        margin-right: 0;
        height: 44px;
        line-height: 1;
    }

    .sdino-v3-shell .zg-v3 .playtrack:not(.playtrack-music) .trackTitleWrap {
        flex: 1 1 0;
        min-width: 0;
        max-width: calc(100% - 60px);
        height: 44px;
        padding-top: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-right: 0;
    }

    /* Title back into normal flow (legacy desktop overlay-on-hover is
       wrong on touch). Reserves right padding for the absolute .time
       overlay so the ellipsis cuts before it reaches the clock. */
    .sdino-v3-shell .zg-v3 .playtrack:not(.playtrack-music) .trackTitleWrap .name {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        margin: 0;
        width: auto;
        max-width: 100%;
        height: auto;
        padding: 0 56px 0 0;
        font-size: 14px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Hover-expand of the title is desktop-only — kill it on touch so
       it doesn't accidentally fire on tap-and-hold and shift layout. */
    .sdino-v3-shell .zg-v3 .playtrack:not(.playtrack-music) .trackTitleWrap:hover .name {
        white-space: nowrap;
        overflow: hidden;
        background: transparent;
        padding: 0 56px 0 0;
        box-shadow: none;
    }

    /* Meta chips always expanded inline at row bottom (only bitrate +
       downloads — they fit; no horizontal scroll like music tags).
       `height: auto` + `line-height: 1` neutralizes legacy `.playtrack div
       { height: 60px; line-height: 60px }` that would otherwise stretch the
       row past the 44px title column. */
    .sdino-v3-shell .zg-v3 .playtrack:not(.playtrack-music) .trackMeta {
        margin: 0;
        gap: 10px;
        flex-wrap: nowrap;
        height: auto;
        line-height: 1;
    }

    /* Waveform: crop top half to 26px (1px of breathing room around the
       25px-tall bars so the centred silence line stays visible as a thin
       horizontal stripe). Reserve 36px gutter on the right for the
       absolute download icon. */
    .sdino-v3-shell .zg-v3 .playtrack:not(.playtrack-music) .peaks {
        order: 99;
        flex: 1 1 100%;
        width: calc(100% - 36px);
        max-width: calc(100% - 36px);
        height: 26px;
        overflow: hidden;
        margin: 8px 0 0;
    }

    /* playerRight becomes a full-card absolute overlay; the two
       children below are anchored to corners independent of left flow. */
    .sdino-v3-shell .zg-v3 .playtrack:not(.playtrack-music) .playerRight {
        position: absolute;
        inset: 0;
        display: block;
        width: auto;
        height: auto;
        padding: 0;
        pointer-events: none;
    }

    .sdino-v3-shell .zg-v3 .playtrack:not(.playtrack-music) .playerRight .time {
        position: absolute;
        top: 18px;
        right: 14px;
        height: 16px;
        margin: 0;
        padding-left: 18px;
        background-size: 14px 14px;
        background-position: left center;
        font-size: 12px;
        line-height: 16px;
        pointer-events: auto;
    }

    .sdino-v3-shell .zg-v3 .playtrack:not(.playtrack-music) .playerRight .download {
        position: absolute;
        right: 8px;
        bottom: 18px;
        margin: 0;
        pointer-events: auto;
    }
}

/* ─────────────────────────────────────────────────────────────────────
 * Player button v2.1 — two modes:
 *   1. SOUND (.playtrack — no music-cover): full verdant glass button
 *   2. MUSIC (.playtrack-music .music-cover): transparent, icon-only —
 *      the cover image shows through, only a white icon with shadow is
 *      drawn so the artwork stays visible.
 * Scoped under .sdino-v3-shell so this block beats legacy on specificity
 * — no !important needed. Outside .sdino-v3-shell, legacy rules apply.
 * ─────────────────────────────────────────────────────────────────── */

/* === Common: pseudo-element icons (play / pause / spinner) ============
 * Both sound and music share the morph; per-mode visuals diverge later.
 * URL-encoded SVG (%3C/%3E) for cross-browser data-URI safety.
 */
.sdino-v3-shell .zg-v3 .playtrack .plBttn {
    transition:
        transform 180ms cubic-bezier(.4, 0, .2, 1),
        box-shadow 200ms cubic-bezier(.4, 0, .2, 1),
        background 200ms cubic-bezier(.4, 0, .2, 1);
}

.sdino-v3-shell .zg-v3 .playtrack .plBttn::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.4 L17.5 11.4 a0.75 0.75 0 0 1 0 1.2 L9 17.6 a0.75 0.75 0 0 1 -1.12 -0.62 L7.88 7.02 a0.75 0.75 0 0 1 1.12 -0.62 Z' fill='white' stroke='white' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E")
        no-repeat center / 60% 60%;
    transform: translateX(2%);
    opacity: 1;
    transition:
        transform 140ms cubic-bezier(.4, 0, .2, 1),
        opacity 120ms cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35));
}

.sdino-v3-shell .zg-v3 .playtrack .plBttn::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7.2' y='6' width='3.4' height='12' rx='1.4' ry='1.4' fill='white'/%3E%3Crect x='13.4' y='6' width='3.4' height='12' rx='1.4' ry='1.4' fill='white'/%3E%3C/svg%3E")
        no-repeat center / 60% 60%;
    transform: scale(.7);
    opacity: 0;
    transition:
        transform 140ms cubic-bezier(.4, 0, .2, 1),
        opacity 120ms cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35));
    margin: 0;
    border: 0;
    border-radius: 0;
    animation: none;
}

.sdino-v3-shell .zg-v3 .playtrack .plBttn.Pause::before {
    transform: translateX(2%) scale(.7);
    opacity: 0;
}
.sdino-v3-shell .zg-v3 .playtrack .plBttn.Pause::after {
    transform: scale(1);
    opacity: 1;
}

/* === Mode 1: SOUND — full verdant glass button ======================= */
.sdino-v3-shell .zg-v3 .playtrack:not(.playtrack-music) .plBttn {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background:
        linear-gradient(155deg,
            rgba(38, 139, 97, .82) 0%,
            rgba(11, 84, 54, .96) 100%);
    background-size: auto;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .18) inset,
        0 1px 2px rgba(11, 84, 54, .14);
    overflow: hidden;
}

.sdino-v3-shell .zg-v3 .playtrack:not(.playtrack-music) .plBttn:hover {
    transform: translateY(-1px) scale(1.04);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .22) inset,
        0 2px 5px rgba(11, 84, 54, .2);
}

.sdino-v3-shell .zg-v3 .playtrack:not(.playtrack-music) .plBttn:active {
    transform: translateY(0) scale(.96);
    transition-duration: 80ms;
}

/* === Mode 2: MUSIC — transparent, icon-only over cover =============== */
.sdino-v3-shell .zg-v3 .playtrack-music .music-cover .plBttn {
    width: 40px;
    height: 40px;
    margin: 10px;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow: visible;
    filter: none;
}

/* Heavier icon shadow on music — cover artwork can be light or busy */
.sdino-v3-shell .zg-v3 .playtrack-music .music-cover .plBttn::before,
.sdino-v3-shell .zg-v3 .playtrack-music .music-cover .plBttn::after {
    background-size: 80% 80%;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)) drop-shadow(0 0 4px rgba(0, 0, 0, .35));
}

.sdino-v3-shell .zg-v3 .playtrack-music .music-cover .plBttn:hover {
    transform: scale(1.08);
}
.sdino-v3-shell .zg-v3 .playtrack-music .music-cover .plBttn:active {
    transform: scale(.94);
    transition-duration: 80ms;
}

/* Mobile: cover shrinks to 50×50, so plBttn margin halves to 5 to stay
   centered. Re-declared here (instead of in the upper 480 block) so it
   comes AFTER the Mode-2 baseline above and wins by source order at
   equal specificity. */
@media (max-width: 768px) {
    .sdino-v3-shell .zg-v3 .playtrack-music .music-cover .plBttn {
        margin: 5px;
    }
}

/* === Loading state (both modes) — arc spinner via ::after ============ */
.sdino-v3-shell .zg-v3 .playtrack .plBttn.loading {
    cursor: wait;
}
.sdino-v3-shell .zg-v3 .playtrack:not(.playtrack-music) .plBttn.loading {
    background-image:
        linear-gradient(155deg,
            rgba(38, 139, 97, .82) 0%,
            rgba(11, 84, 54, .96) 100%);
}
.sdino-v3-shell .zg-v3 .playtrack .plBttn.loading::before {
    opacity: 0;
    transform: scale(.7);
}
.sdino-v3-shell .zg-v3 .playtrack .plBttn.loading::after {
    /* cancel legacy border-ring geometry: top/left/width/height/margin/border */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    background-image:
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 4 A8 8 0 0 1 20 12' opacity='.95'/%3E%3Cpath d='M4 12 A8 8 0 0 0 8.5 19.1' opacity='.45'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60% 60%;
    transform: rotate(0deg);
    opacity: 1;
    animation: sdino-spin .8s linear infinite;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}
@keyframes sdino-spin {
    to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────────────
 * Sound row meta — bitrate/downloads under title on the LEFT.
 * Key trick: .trackMeta is absolutely positioned BELOW .trackTitleWrap so
 * it does NOT contribute to the wrap's height. Result: the wrap height
 * equals the title height, and `align-items: center` in .playerLeft
 * centers the TITLE itself against the play button. Meta dangles below
 * as a caption without dragging the title off-center.
 * ─────────────────────────────────────────────────────────────────── */
.zg-v3 .playtrack .trackTitleWrap {
    /* Title floats absolute in the padding-top zone, meta sits in normal flow
       below. Title is always 1-line w/ ellipsis; on :hover it expands DOWN
       as an overlay covering meta — no layout shift because meta and wrap
       height never change. */
    position: relative;
    align-self: center;
    min-width: 220px;
    max-width: 330px;
    padding-top: 22px;
}

.zg-v3 .playtrack .trackTitleWrap .name {
    /* Override legacy `.playtrack .name` desktop rule (margin-top:13px,
       width:270px, height:35px, font-size:14px, display:flex). Абсолютный
       overlay над padding-top зоной обёртки.
       Используем `-webkit-line-clamp:1` + `white-space:normal` вместо
       nowrap+ellipsis, чтобы:
         (а) слова ломались по словам (word-break:normal) — никакого
             срезания посередине слова;
         (б) на ховере clamp снимается → скрытый «хвост» проявляется
             ниже первой строки БЕЗ перерисовки самой первой строки
             (zero visual shift).
       JS-детектор обрезки переключается на scrollHeight>clientHeight —
       при line-clamp это корректный сигнал. */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    margin: 0;
    padding: 0;
    width: auto;
    max-width: 100%;
    height: auto;
    font-size: inherit;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    overflow-wrap: normal;
    z-index: 2;
    transition: box-shadow 120ms ease, background 120ms ease;
}

/* Force first letter uppercase on every track title (data may come
   lowercased from the dump; this is presentational only — source text
   is untouched). */
.zg-v3 .playtrack .trackTitleWrap .name::first-letter {
    text-transform: uppercase;
}

/* Hover-expand fires ONLY when JS has set `.is-truncated` on the wrap
   (i.e., the title was actually clipped). Short titles that fit on one
   line never trigger the popover. Switches to `white-space: normal` so
   the hidden tail wraps to additional lines below; `word-break: normal`
   + `overflow-wrap: normal` keep whole words intact (no mid-word break).
   Same drop-down grammar as the music description box (no border, just
   the soft drop shadow). */
.zg-v3 .playtrack .trackTitleWrap.is-truncated:hover .name {
    /* Снимаем clamp → все строки переноса проявляются ВНИЗ. Первая
       строка остаётся пиксель-в-пиксель такой же, потому что content-box
       сохраняет ту же ширину (см. трюк с left/right + padding ниже). */
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;

    /* ── ВАЖНО: zero horizontal rewrap ──
       .name — это `position:absolute; left:0; right:0`. Чтобы дать белой
       плашке «воздух» по 8px по бокам, НО при этом не сдвинуть точки
       переноса слов на первой строке, расширяем сам бокс наружу через
       отрицательные left/right, а внутрь добавляем padding-left/right
       по 8px. Итог: box.width = parent.width + 16; content area =
       box.width - 2*padding = parent.width. Ширина рабочего поля для
       текста = такая же как в свернутом состоянии → переносы слов
       не меняются. */
    left: -6px;
    right: -6px;
    padding: 0 6px 3px 6px;
    margin: 0;

    background: #fff;
    /* Только нижние углы скруглены (4px), верх прямой — popover
       «вытягивается» вниз из обрезанной строки. Тень ТОЛЬКО под
       нижней кромкой и слегка по бокам у низа: вверху и по бокам её
       нет (отрицательный spread −10px и большой нижний offset 10px
       прижимают пятно тени строго вниз → визуально нет верхней
       подсветки/линии, плашка кажется «приклеенной» к первой строке). */
    border-radius: 0 0 4px 4px;
    box-shadow: 0 10px 14px -10px rgba(2, 28, 22, .28);
    z-index: 5;
}

.zg-v3 .playtrack .trackMeta {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--sdv3-ink);
    opacity: .5;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.zg-v3 .playtrack .trackMeta__bpm,
.zg-v3 .playtrack .trackMeta__bitrate,
.zg-v3 .playtrack .trackMeta__downloads {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.zg-v3 .playtrack .trackMeta__bpm::before,
.zg-v3 .playtrack .trackMeta__bitrate::before,
.zg-v3 .playtrack .trackMeta__downloads::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex: 0 0 12px;
}

/* BPM icon — metronome (triangle body with pendulum needle) */
.zg-v3 .playtrack .trackMeta__bpm::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2313201b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 14 L7 2 L9 2 L11 14 Z'/%3E%3Cpath d='M5 14 L11 14'/%3E%3Cpath d='M8 11 L11.5 3.5'/%3E%3C/svg%3E");
}

/* Bitrate icon — equalizer (3 bars of varying height) */
.zg-v3 .playtrack .trackMeta__bitrate::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2313201b'%3E%3Crect x='2' y='6' width='2.4' height='8' rx='1.2'/%3E%3Crect x='6.8' y='2' width='2.4' height='12' rx='1.2'/%3E%3Crect x='11.6' y='8' width='2.4' height='6' rx='1.2'/%3E%3C/svg%3E");
}

/* Downloads icon — arrow down with floor line */
.zg-v3 .playtrack .trackMeta__downloads::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2313201b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2 v8 M4.5 7 L8 10.5 L11.5 7'/%3E%3Cpath d='M3 13.5 L13 13.5'/%3E%3C/svg%3E");
}