/* ==========================================================================
   Kriyasya — Sound & Music World (Phase 1)
   Built on the shared design tokens (assets/css/tokens.css). No hardcoded
   brand colours: surfaces/ink/borders come from --lv-*, and only the
   per-category accent arrives as --snd-acc / --snd-acc2 from the shell.
   Dark mode is inherited from the tokens, with a few local refinements.
   All motion is guarded by prefers-reduced-motion.
   ========================================================================== */

.snd-body {
    margin: 0;
    font-family: var(--lv-font-body, 'Inter', system-ui, -apple-system, sans-serif);
    color: var(--lv-ink);
    background: var(--lv-bg);
    line-height: var(--lv-lh, 1.55);
    min-height: 100vh;
}
.snd-body * { box-sizing: border-box; }

.snd-wrap {
    max-width: var(--lv-maxw, 1080px);
    margin: 0 auto;
    padding: 26px clamp(14px, 4vw, 28px) 64px;
}

/* ---------- typography ---------- */
.snd-kicker {
    font-size: var(--lv-fs-xs, .72rem);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--snd-acc, var(--lv-violet));
}
.snd-h1 {
    font-family: var(--lv-font-display, 'Fraunces', Georgia, serif);
    font-weight: 700;
    font-size: clamp(2rem, 5.5vw, 3.2rem);
    line-height: 1.05;
    margin: 12px 0 8px;
}
.snd-lead {
    color: var(--lv-ink-mute);
    font-size: var(--lv-fs-lg, 1.05rem);
    max-width: 680px;
    margin: 0;
}
.snd-hero { padding: 14px 0 8px; }

/* ---------- badges & pills ---------- */
.snd-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.snd-badge,
.snd-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--lv-fs-xs, .76rem);
    font-weight: 700;
    border-radius: 30px;
    padding: 6px 13px;
    border: 1px solid var(--lv-border);
    color: var(--lv-ink-mute);
    background: var(--lv-surface);
}
.snd-pill { padding: 4px 10px; border: 0; }
.snd-badge.paid,
.snd-pill.paid {
    color: var(--snd-acc, var(--lv-violet));
    border-color: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 30%, transparent);
    background: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 10%, transparent);
}
.snd-badge.free,
.snd-pill.free {
    color: var(--lv-success, #0e7a5f);
    border-color: color-mix(in srgb, var(--lv-success, #0e7a5f) 35%, transparent);
    background: color-mix(in srgb, var(--lv-success, #0e7a5f) 10%, transparent);
}
.snd-badge.trad {
    color: var(--lv-gold-2, #b8860b);
    border-color: color-mix(in srgb, var(--lv-gold, #e7b84e) 40%, transparent);
    background: color-mix(in srgb, var(--lv-gold, #e7b84e) 12%, transparent);
}
.snd-badge.soon { color: var(--lv-ink-mute); }

/* ---------- sections ---------- */
.snd-sec { margin-top: 40px; }
.snd-sechead { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.snd-sechead h2 {
    font-family: var(--lv-font-display, 'Fraunces', Georgia, serif);
    font-weight: 600;
    font-size: var(--lv-fs-xl, 1.5rem);
    margin: 0;
}
.snd-sechead .cnt { font-size: var(--lv-fs-sm, .8rem); color: var(--lv-ink-mute); }

/* ---------- tool cards ---------- */
.snd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 18px;
}
.snd-card {
    display: flex;
    flex-direction: column;
    min-height: 158px;
    padding: 20px 20px 16px;
    border: 1px solid var(--lv-border);
    border-radius: 16px;
    background: var(--lv-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color .18s var(--lv-ease-out, ease), transform .18s var(--lv-ease-out, ease), box-shadow .18s var(--lv-ease-out, ease);
}
.snd-card:hover,
.snd-card:focus-visible {
    border-color: var(--snd-acc, var(--lv-violet));
    transform: translateY(-2px);
    box-shadow: var(--lv-sh-md, 0 12px 30px rgba(20, 16, 45, .12));
}
.snd-card .ic {
    width: 42px; height: 42px;
    margin-bottom: 12px;
    border-radius: 11px;
    display: grid; place-items: center;
    color: var(--snd-acc, var(--lv-violet));
    background: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 22%, transparent);
}
.snd-card .t { font-weight: 700; font-size: var(--lv-fs-md, 1rem); margin-bottom: 5px; }
.snd-card .d { font-size: var(--lv-fs-sm, .86rem); color: var(--lv-ink-mute); margin: 0; }
.snd-card .foot {
    margin-top: auto; padding-top: 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.snd-open { font-size: var(--lv-fs-xs, .74rem); font-weight: 700; color: var(--lv-ink-mute); }

/* ---------- plan cards (weekly / monthly) ---------- */
.snd-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    max-width: 560px;
}
.snd-plan {
    border: 1px solid var(--lv-border);
    border-radius: 14px;
    background: var(--lv-surface);
    padding: 16px 18px;
}
.snd-plan.best {
    border-color: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 45%, transparent);
    background: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 6%, var(--lv-surface));
}
.snd-plan .pn {
    font-size: var(--lv-fs-xs, .74rem); font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--lv-ink-mute);
}
.snd-plan .pp {
    font-family: var(--lv-font-display, 'Fraunces', Georgia, serif);
    font-size: 1.9rem; font-weight: 700; margin: 4px 0 2px;
    color: var(--snd-acc, var(--lv-violet));
}
.snd-plan .pp span { font-size: .85rem; font-weight: 600; color: var(--lv-ink-mute); }
.snd-plan .pd { font-size: var(--lv-fs-sm, .84rem); color: var(--lv-ink-mute); }

/* ---------- notes, lists, CTA ---------- */
.snd-note,
.snd-legal,
.snd-safe {
    border: 1px solid var(--lv-border);
    background: var(--lv-surface);
    border-radius: 14px;
    color: var(--lv-ink-mute);
    font-size: var(--lv-fs-sm, .86rem);
}
.snd-note { margin-top: 34px; padding: 16px 18px; }
.snd-legal {
    margin-top: 34px; padding: 14px 16px;
    display: flex; gap: 10px; align-items: flex-start;
    font-size: var(--lv-fs-xs, .8rem);
}
.snd-legal p { margin: 0; }
.snd-safe {
    margin-top: 20px; padding: 11px 14px;
    display: flex; gap: 9px; align-items: center;
    border-color: color-mix(in srgb, var(--lv-info, #3b6fe0) 30%, transparent);
    background: color-mix(in srgb, var(--lv-info, #3b6fe0) 8%, var(--lv-surface));
}
.snd-fine { font-size: var(--lv-fs-xs, .78rem); color: var(--lv-ink-mute); margin: 12px 0 0; max-width: 560px; }

.snd-list { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.snd-list li {
    display: flex; gap: 9px; align-items: flex-start;
    color: var(--lv-ink-mute); font-size: var(--lv-fs-sm, .9rem);
}
.snd-list li::before {
    content: ''; flex: none;
    width: 7px; height: 7px; margin-top: 7px;
    border-radius: 50%;
    background: var(--snd-acc, var(--lv-violet));
}

.snd-cta {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 10px; padding: 11px 20px;
    border-radius: 30px;
    text-decoration: none; font-weight: 700; font-size: var(--lv-fs-sm, .9rem);
    color: var(--lv-on-gold, #1a1230);
    background: linear-gradient(135deg, var(--snd-acc, var(--lv-violet)), var(--snd-acc2, var(--lv-violet-2)));
}
.snd-cta:focus-visible,
.snd-card:focus-visible,
.snd-back:focus-visible { outline: 2px solid var(--lv-ring, var(--snd-acc)); outline-offset: 2px; }

.snd-back {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 8px;
    color: var(--lv-ink-mute); text-decoration: none;
    font-weight: 600; font-size: var(--lv-fs-sm, .85rem);
}
.snd-back:hover { color: var(--snd-acc, var(--lv-violet)); }

/* ---------- FAQ accordion (per-tool SEO landings) ---------- */
.snd-faq { display: grid; gap: 10px; }
.snd-faq-item {
    border: 1px solid var(--lv-border);
    border-radius: 14px;
    background: var(--lv-surface);
    overflow: hidden;
    transition: border-color .18s var(--lv-ease-out, ease), box-shadow .18s var(--lv-ease-out, ease);
}
.snd-faq-item:hover { border-color: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 40%, var(--lv-border)); }
.snd-faq-item[open] {
    border-color: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 45%, transparent);
    box-shadow: var(--lv-sh-sm, 0 4px 14px rgba(20, 16, 45, .08));
}
.snd-faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 15px 18px;
    cursor: pointer;
    font-weight: 600; font-size: var(--lv-fs-md, 1rem);
    color: var(--lv-ink);
    list-style: none;
}
.snd-faq-item summary::-webkit-details-marker { display: none; }
.snd-faq-item summary::after {
    content: ''; flex: none;
    width: 10px; height: 10px; margin-top: -3px;
    border-right: 2px solid var(--snd-acc, var(--lv-violet));
    border-bottom: 2px solid var(--snd-acc, var(--lv-violet));
    transform: rotate(45deg);
    transition: transform .18s var(--lv-ease-out, ease);
}
.snd-faq-item[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.snd-faq-item summary:hover { color: var(--snd-acc, var(--lv-violet)); }
.snd-faq-item p {
    margin: 0; padding: 0 18px 16px;
    color: var(--lv-ink-mute); font-size: var(--lv-fs-sm, .9rem);
    line-height: var(--lv-lh, 1.55);
}
@media (prefers-reduced-motion: reduce) {
    .snd-faq-item, .snd-faq-item summary::after { transition: none; }
}

/* ---------- paid-tool unlock gate ---------- */
.snd-unlock {
    max-width: 560px;
    margin: 40px auto 0;
    padding: 0 clamp(14px, 4vw, 20px);
}
.snd-unlock-card {
    border: 1px solid var(--lv-border);
    background: var(--lv-surface);
    border-radius: 20px;
    padding: clamp(24px, 5vw, 40px) clamp(20px, 5vw, 34px);
    text-align: center;
    box-shadow: 0 18px 48px -28px color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 60%, transparent);
}
.snd-unlock-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 58px; height: 58px; margin-bottom: 14px;
    border-radius: 16px;
    color: var(--snd-acc, var(--lv-violet));
    background: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 14%, var(--lv-surface));
}
.snd-unlock-ic .snd-ic { width: 28px; height: 28px; }
.snd-unlock-h {
    font-family: var(--lv-font-display, 'Fraunces', Georgia, serif);
    font-weight: 700;
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    line-height: 1.1;
    margin: 0 0 10px;
}
.snd-unlock-lead {
    color: var(--lv-ink-mute);
    font-size: var(--lv-fs-sm, .95rem);
    line-height: 1.6;
    margin: 0 auto 18px;
    max-width: 42ch;
}
.snd-unlock-price {
    display: inline-block;
    margin: 0 0 20px;
    padding: 8px 18px;
    border-radius: 30px;
    font-weight: 700;
    font-size: var(--lv-fs-sm, .95rem);
    color: var(--snd-acc, var(--lv-violet));
    background: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 12%, var(--lv-surface));
    border: 1px solid color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 30%, transparent);
}
.snd-unlock .snd-cta.primary {
    margin-top: 0;
    padding: 13px 28px;
    font-size: var(--lv-fs-md, 1rem);
}
.snd-unlock-form { margin: 0; }
.snd-unlock-note {
    color: var(--lv-ink);
    font-size: var(--lv-fs-sm, .92rem);
    margin: 0 0 12px;
}
.snd-unlock-err {
    color: var(--lv-danger, #d64545);
    font-size: var(--lv-fs-sm, .88rem);
    font-weight: 600;
    margin: 14px 0 0;
}
.snd-unlock .snd-fine { margin-left: auto; margin-right: auto; }
.snd-unlock-back {
    display: inline-block;
    margin-top: 22px;
    color: var(--lv-ink-mute);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--lv-fs-sm, .85rem);
}
.snd-unlock-back:hover { color: var(--snd-acc, var(--lv-violet)); }
.snd-unlock-back:focus-visible { outline: 2px solid var(--lv-ring, var(--snd-acc)); outline-offset: 2px; }
.snd-unlock + .snd-legal,
.snd-unlock .snd-legal { max-width: 560px; margin-left: auto; margin-right: auto; text-align: left; }

/* ---------- Sleep Studio: steps + curated sound picker ---------- */
.snd-steps {
    list-style: none; margin: 20px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px;
}
.snd-steps li {
    display: flex; align-items: center; gap: 9px;
    flex: 1 1 200px;
    border: 1px solid var(--lv-border);
    background: var(--lv-surface);
    border-radius: 12px;
    padding: 11px 14px;
    font-size: var(--lv-fs-sm, .9rem);
    color: var(--lv-ink);
}
.snd-steps-n {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: .8rem; font-weight: 700;
    color: var(--snd-acc, var(--lv-violet));
    background: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 15%, var(--lv-surface));
}
/* ---------- shared "choose a sound" rows (lvone_snd_sound_row) ----------
   The previous layout put the play button, the title, a wrapping badge stack and the favourite
   toggle on one flex line inside a 240px grid column, so titles ellipsised after a few characters
   and the badges stacked into a tower. Wider columns + a two-line title block + a fixed-size
   control cluster fix both, and the row reads the same on every tool page. */
.snd-rows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    margin-top: 14px;
}
/* Vertical card: the title and the badge row each get the FULL card width. Side-by-side controls
   starved the text column, which pushed a duration + evidence + headphone + premium set into a
   four-line tower and re-truncated the title. */
.snd-row {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    border: 1px solid var(--lv-border);
    background: var(--lv-surface);
    border-radius: var(--lv-r-lg, 16px);
    padding: 14px 16px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.snd-row:hover {
    border-color: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 42%, var(--lv-border));
    box-shadow: var(--lv-sh-sm, 0 6px 18px rgba(20, 16, 45, .08));
}
.snd-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.snd-row-sep { border-top: 1px solid var(--lv-border); margin-top: 2px; }
.snd-row-title {
    font-weight: 650; font-size: var(--lv-fs-md, 1rem); line-height: 1.35;
    color: var(--lv-ink); text-decoration: none;
    min-height: 24px;                 /* target size floor (WCAG 2.2 AA 2.5.8) for the title link */
    /* Two lines, then ellipsis: long raga and soundscape names are no longer cut mid-word. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere;
}
.snd-row-title:hover { color: var(--snd-acc, var(--lv-violet)); text-decoration: underline; }
.snd-row-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.snd-row-hint { margin: 1px 0 0; font-size: var(--lv-fs-xs, .76rem); color: var(--lv-ink-mute); line-height: 1.45; }
/* Footer action row: primary action on the left, favourite on the right, pinned to the card bottom
   so cards in the same grid band line their controls up. */
.snd-row-act {
    flex: 0 0 auto; margin-top: auto; padding-top: 10px;
    border-top: 1px solid var(--lv-border);
    display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px;
}
.snd-row-act .snd-play { justify-content: center; white-space: nowrap; }
@media (max-width: 420px) {
    .snd-rows { grid-template-columns: 1fr; }
    .snd-row { padding: 13px 14px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .snd-row { transition: none; }
}

/* ---------- landing FAQ ---------- */
.snd-faq { display: flex; flex-direction: column; gap: 10px; }
.snd-faq-item {
    border: 1px solid var(--lv-border);
    background: var(--lv-surface);
    border-radius: 12px;
    padding: 4px 4px;
}
.snd-faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 40px 12px 16px;
    position: relative;
    font-weight: 600;
    font-size: var(--lv-fs-sm, .95rem);
    color: var(--lv-ink);
}
.snd-faq-item summary::-webkit-details-marker { display: none; }
.snd-faq-item summary::after {
    content: '+';
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    font-size: 1.2rem; font-weight: 400; color: var(--snd-acc, var(--lv-violet));
}
.snd-faq-item[open] summary::after { content: '\2212'; }
.snd-faq-item summary:focus-visible { outline: 2px solid var(--lv-ring, var(--snd-acc)); outline-offset: 2px; border-radius: 8px; }
.snd-faq-item > p {
    margin: 0; padding: 0 16px 14px;
    color: var(--lv-ink-mute);
    font-size: var(--lv-fs-sm, .9rem);
    line-height: 1.6;
}

/* ---------- icons ---------- */
.snd-ic { width: 22px; height: 22px; flex: none; }
.snd-ic.sm { width: 16px; height: 16px; }

/* ---------- Hindi (Devanagari) ----------
   The display face has no Devanagari glyphs, so Hindi must use Noto and slightly
   smaller display sizes with a more open line-height. */
html[lang="hi"] .snd-body,
.snd-body.snd-hi { font-family: 'Noto Sans Devanagari', var(--lv-font-body, 'Inter'), system-ui, sans-serif; }
html[lang="hi"] .snd-h1 {
    font-family: 'Noto Serif Devanagari', var(--lv-font-display, Georgia), serif;
    font-size: clamp(1.7rem, 4.6vw, 2.6rem);
    line-height: 1.28;
}
html[lang="hi"] .snd-sechead h2 { font-family: 'Noto Serif Devanagari', var(--lv-font-display, Georgia), serif; font-size: 1.3rem; }
html[lang="hi"] .snd-lead,
html[lang="hi"] .snd-list li,
html[lang="hi"] .snd-note,
html[lang="hi"] .snd-legal { line-height: 1.75; }
html[lang="hi"] .snd-plan .pp { font-family: 'Noto Serif Devanagari', var(--lv-font-display, Georgia), serif; }

/* ---------- dark mode refinements (tokens already flip surfaces/ink) ---------- */
@media (prefers-color-scheme: dark) {
    .snd-card:hover,
    .snd-card:focus-visible { box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
}

/* ---------- accessibility: motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .snd-card { transition: none; }
    .snd-card:hover,
    .snd-card:focus-visible { transform: none; }
}

/* ---------- small screens ---------- */
@media (max-width: 560px) {
    .snd-wrap { padding-bottom: 48px; }
    .snd-grid { grid-template-columns: 1fr; }
    .snd-badges { gap: 6px; }
}

/* ==========================================================================
   Phase 4/5 — player, track detail, browse. Token-based colours only; motion
   guarded by prefers-reduced-motion; nothing signalled by colour alone.
   ========================================================================== */

/* ---------- play / favourite controls ---------- */
.snd-play {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 30px;
    border: 0; cursor: pointer;
    font-weight: 700; font-size: var(--lv-fs-sm, .9rem);
    color: var(--lv-on-gold, #1a1230);
    background: linear-gradient(135deg, var(--snd-acc, var(--lv-violet)), var(--snd-acc2, var(--lv-violet-2)));
    transition: transform .15s var(--lv-ease-out, ease), box-shadow .15s var(--lv-ease-out, ease);
}
.snd-play.sm { padding: 7px 13px; font-size: var(--lv-fs-xs, .8rem); }
.snd-play:hover { transform: translateY(-1px); box-shadow: var(--lv-sh-sm, 0 6px 16px rgba(20,16,45,.16)); }
.snd-play:focus-visible { outline: 2px solid var(--lv-ring, var(--snd-acc)); outline-offset: 2px; }
.snd-play-ic { display: inline-flex; }

.snd-fav {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px; flex: none;
    border-radius: 50%; cursor: pointer;
    border: 1px solid var(--lv-border);
    background: var(--lv-surface); color: var(--lv-ink-mute);
    transition: color .15s ease, border-color .15s ease;
}
.snd-fav:hover { color: var(--snd-acc, var(--lv-violet)); border-color: var(--snd-acc, var(--lv-violet)); }
.snd-fav[aria-pressed="true"] {
    color: var(--lv-danger, #d6455d);
    border-color: color-mix(in srgb, var(--lv-danger, #d6455d) 45%, transparent);
    background: color-mix(in srgb, var(--lv-danger, #d6455d) 10%, transparent);
}
.snd-fav[aria-pressed="true"] svg { fill: currentColor; }
.snd-fav:focus-visible { outline: 2px solid var(--lv-ring, var(--snd-acc)); outline-offset: 2px; }

/* ---------- catalogue track cards ---------- */
.snd-track-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.snd-track {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px; border: 1px solid var(--lv-border);
    border-radius: 14px; background: var(--lv-surface);
}
.snd-track-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.snd-track-title {
    font-weight: 700; font-size: var(--lv-fs-md, 1rem);
    color: inherit; text-decoration: none; line-height: 1.3;
}
.snd-track-title:hover { color: var(--snd-acc, var(--lv-violet)); }
.snd-track-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.snd-badge.exp { color: var(--lv-info, #3b6fe0); border-color: color-mix(in srgb, var(--lv-info,#3b6fe0) 35%, transparent); background: color-mix(in srgb, var(--lv-info,#3b6fe0) 10%, transparent); }

/* ---------- track detail ---------- */
.snd-detail .snd-hero { padding-top: 6px; }
.snd-kicker-link { color: inherit; text-decoration: none; }
.snd-kicker-link:hover { text-decoration: underline; }
.snd-player-card {
    margin-top: 22px; padding: 20px;
    border: 1px solid var(--lv-border); border-radius: 16px;
    background: var(--lv-surface);
}
.snd-wave {
    height: 64px; border-radius: 10px; margin-bottom: 16px;
    background:
        repeating-linear-gradient(90deg,
            color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 30%, transparent) 0 2px,
            transparent 2px 6px);
    opacity: .5;
}
.snd-player-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.snd-access-note {
    margin: 14px 0 0; padding: 10px 12px;
    display: flex; gap: 8px; align-items: center;
    font-size: var(--lv-fs-sm, .86rem); color: var(--lv-ink-mute);
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 25%, transparent);
    background: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 7%, transparent);
}
.snd-muted { color: var(--lv-ink-mute); font-size: var(--lv-fs-sm, .9rem); }

.snd-evidence {
    margin-top: 34px; padding: 16px 18px;
    border: 1px solid var(--lv-border); border-radius: 14px; background: var(--lv-surface);
}
.snd-evidence-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.snd-evidence-head h3 { margin: 0; font-size: var(--lv-fs-md, 1rem); }
.snd-evidence p { margin: 0; color: var(--lv-ink-mute); font-size: var(--lv-fs-sm, .9rem); }

.snd-feedback { margin-top: 28px; display: flex; align-items: center; gap: 12px; }
.snd-nothelp {
    padding: 8px 14px; border-radius: 24px; cursor: pointer;
    border: 1px solid var(--lv-border); background: var(--lv-surface);
    color: var(--lv-ink-mute); font-size: var(--lv-fs-sm, .84rem); font-weight: 600;
}
.snd-nothelp:hover { border-color: var(--snd-acc, var(--lv-violet)); color: var(--snd-acc, var(--lv-violet)); }
.snd-feedback-thanks { font-size: var(--lv-fs-sm, .84rem); color: var(--lv-ink-mute); }

/* ---------- browse: filters + results ---------- */
.snd-filters {
    margin-top: 22px; padding: 16px; border: 1px solid var(--lv-border);
    border-radius: 14px; background: var(--lv-surface);
    display: grid; gap: 14px;
}
.snd-search {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--lv-border); border-radius: 10px; padding: 4px 12px;
    background: var(--lv-bg);
}
.snd-search input {
    flex: 1; border: 0; background: transparent; color: var(--lv-ink);
    font-size: var(--lv-fs-md, 1rem); padding: 8px 0; outline: none;
}
.snd-facets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.snd-facet { display: grid; gap: 4px; min-width: 0; font-size: var(--lv-fs-xs, .74rem); font-weight: 700; color: var(--lv-ink-mute); text-transform: uppercase; letter-spacing: .5px; }
.snd-facet select {
    /* width:100% + min-width:0 keep the <select> inside its grid track (a long option's
       min-content would otherwise grow the track past a 320px viewport). box-sizing:border-box
       here in case the page wrapper is not .snd-body (which sets it globally). */
    width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
    padding: 8px 10px; border-radius: 8px; border: 1px solid var(--lv-border);
    background: var(--lv-bg); color: var(--lv-ink); font-size: var(--lv-fs-sm, .88rem);
    font-weight: 500; text-transform: none; letter-spacing: 0;
}
.snd-facet select:focus-visible { outline: 2px solid var(--lv-ring, var(--snd-acc)); outline-offset: 1px; }
.snd-filter-actions { display: flex; align-items: center; gap: 14px; }
.snd-cta.sm { margin: 0; padding: 9px 18px; font-size: var(--lv-fs-sm, .86rem); }
.snd-clear { color: var(--lv-ink-mute); text-decoration: none; font-size: var(--lv-fs-sm, .85rem); font-weight: 600; }
.snd-clear:hover { color: var(--snd-acc, var(--lv-violet)); }

.snd-results-head { margin: 24px 0 12px; }
.snd-count { font-size: var(--lv-fs-sm, .9rem); color: var(--lv-ink-mute); font-weight: 600; }

.snd-pager { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.snd-page { color: var(--snd-acc, var(--lv-violet)); text-decoration: none; font-weight: 700; font-size: var(--lv-fs-sm, .9rem); }
.snd-page-info { color: var(--lv-ink-mute); font-size: var(--lv-fs-sm, .85rem); }

.snd-empty {
    margin-top: 24px; padding: 40px 20px; text-align: center;
    border: 1px dashed var(--lv-border); border-radius: 16px; color: var(--lv-ink-mute);
}
.snd-empty h2 { font-size: var(--lv-fs-lg, 1.1rem); margin: 12px 0 6px; color: var(--lv-ink); }
.snd-empty p { max-width: 460px; margin: 0 auto 16px; font-size: var(--lv-fs-sm, .9rem); }

.snd-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.snd-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 24px; text-decoration: none;
    border: 1px solid var(--lv-border); background: var(--lv-surface); color: inherit;
    font-size: var(--lv-fs-sm, .86rem); font-weight: 600;
}
.snd-chip:hover { border-color: var(--snd-acc, var(--lv-violet)); color: var(--snd-acc, var(--lv-violet)); }
.snd-chip .n { color: var(--lv-ink-mute); font-size: var(--lv-fs-xs, .74rem); }

/* ---------- global mini-player ---------- */
body.snd-has-player { padding-bottom: 92px; }
.snd-mini {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--lv-surface);
    border-top: 1px solid var(--lv-border);
    box-shadow: 0 -6px 24px rgba(20, 16, 45, .10);
}
.snd-mini-in {
    max-width: var(--lv-maxw, 1080px); margin: 0 auto;
    padding: 10px clamp(12px, 4vw, 24px);
    display: flex; align-items: center; gap: 14px;
}
.snd-mini-play {
    flex: none; width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer; border: 0;
    color: var(--lv-on-gold, #1a1230);
    background: linear-gradient(135deg, var(--snd-acc, var(--lv-violet)), var(--snd-acc2, var(--lv-violet-2)));
}
.snd-mini-play:focus-visible,
.snd-mini button:focus-visible,
.snd-mini input:focus-visible { outline: 2px solid var(--lv-ring, var(--snd-acc)); outline-offset: 2px; }
.snd-mini-meta { min-width: 0; width: clamp(120px, 22%, 240px); }
.snd-mini-title {
    display: block; font-weight: 700; font-size: var(--lv-fs-sm, .9rem); color: inherit; text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.snd-mini-title:hover { color: var(--snd-acc, var(--lv-violet)); }
.snd-mini-sub { font-size: var(--lv-fs-xs, .75rem); color: var(--lv-ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snd-mini-seek { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.snd-mini-cur, .snd-mini-total { font-size: var(--lv-fs-xs, .74rem); color: var(--lv-ink-mute); flex: none; font-variant-numeric: tabular-nums; }
.snd-mini-range { flex: 1; accent-color: var(--snd-acc, var(--lv-violet)); height: 4px; }
.snd-mini-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.snd-mini-tools button {
    width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
    display: grid; place-items: center; border: 1px solid transparent;
    background: transparent; color: var(--lv-ink-mute);
}
.snd-mini-tools button:hover { color: var(--snd-acc, var(--lv-violet)); background: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 8%, transparent); }
/* Sleep timer: when armed, the button shows the minutes left beside the icon so the state is not
   carried by colour alone. It widens rather than shrinking the icon, so the target stays >= 24px. */
.snd-mini-tools .snd-mini-timer { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.snd-mini-timer.on { color: var(--snd-acc, var(--lv-violet)); border-color: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 35%, transparent); }
.snd-mini-tools .snd-mini-timer.on { width: auto; min-width: 38px; padding: 0 9px; }
.snd-mini-timerleft:empty { display: none; }
.snd-mini-timerleft { font-size: var(--lv-fs-xs, .72rem); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.snd-mini-volrange { width: 0; opacity: 0; transition: width .18s ease, opacity .18s ease; accent-color: var(--snd-acc, var(--lv-violet)); }
.snd-mini-volrange.open { width: 90px; opacity: 1; }
.snd-mini-timermenu {
    position: absolute; right: clamp(12px, 4vw, 24px); bottom: 70px;
    background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: 12px;
    box-shadow: var(--lv-sh-md, 0 12px 30px rgba(20,16,45,.18));
    padding: 6px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; min-width: 180px;
}
/* The player sets .hidden on this menu, but a class selector's `display: grid` beats the UA
   `[hidden] { display: none }` rule, so the Off/5/10/15-minute grid stayed permanently on screen.
   Re-assert the attribute with matching specificity. */
.snd-mini-timermenu[hidden] { display: none; }
.snd-timer-opt {
    padding: 8px 10px; border-radius: 8px; border: 0; cursor: pointer;
    background: transparent; color: var(--lv-ink); font-size: var(--lv-fs-sm, .85rem); text-align: left;
}
.snd-timer-opt:hover { background: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 10%, transparent); color: var(--snd-acc, var(--lv-violet)); }
.snd-mini-msg {
    max-width: var(--lv-maxw, 1080px); margin: 0 auto; padding: 0 clamp(12px, 4vw, 24px) 10px;
    font-size: var(--lv-fs-sm, .84rem); color: var(--lv-ink-mute);
    display: flex; align-items: center; gap: 10px;
}
/* Same `display` vs `[hidden]` specificity problem as the timer menu above: this row is only for
   playback errors / sign-in prompts and must stay collapsed until onDenied() reveals it. */
.snd-mini-msg[hidden] { display: none; }
.snd-mini-cta { color: var(--snd-acc, var(--lv-violet)); font-weight: 700; text-decoration: none; }
/* Headphone requirement is surfaced textually on the track's badges (never by colour/emoji). */
.snd-mini.needs-headphones .snd-mini-play { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lv-info, #3b6fe0) 60%, transparent); }

/* Hindi sizing already handled globally; keep mini-player labels compact. */
html[lang="hi"] .snd-mini-title { font-size: .85rem; }

/* Dark mode: tokens flip surfaces; strengthen the player shadow. */
@media (prefers-color-scheme: dark) {
    .snd-mini { box-shadow: 0 -8px 28px rgba(0, 0, 0, .5); }
}

/* Reduced motion: no transforms/transitions anywhere in the player UI. */
@media (prefers-reduced-motion: reduce) {
    .snd-play, .snd-fav, .snd-mini-volrange { transition: none; }
    .snd-play:hover { transform: none; }
}

/* Floating toast notification for actions like saving favourites */
.snd-toast {
    position: fixed;
    bottom: 84px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--lv-card, #ffffff);
    color: var(--lv-ink, #1f242e);
    border: 1px solid var(--lv-border, rgba(0, 0, 0, 0.14));
    border-radius: 9999px;
    padding: 10px 22px;
    font-size: 0.88rem;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.snd-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.snd-toast svg {
    width: 16px;
    height: 16px;
    fill: #ef4444;
    color: #ef4444;
    flex-shrink: 0;
}
.snd-toast a {
    color: var(--snd-acc, var(--lv-violet, #6366f1));
    font-weight: 700;
    text-decoration: underline;
    margin-left: 2px;
}
@media (prefers-color-scheme: dark) {
    .snd-toast {
        background: #1e1e24;
        color: #f3f4f6;
        border-color: rgba(255, 255, 255, 0.14);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
}

/* Small screens: simplify the mini-player. */
@media (max-width: 640px) {
    .snd-mini-meta { width: 40%; }
    .snd-mini-seek { order: 3; flex-basis: 100%; }
    .snd-mini-in { flex-wrap: wrap; }
    .snd-facets { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
    .snd-toast { bottom: 100px; width: 90%; max-width: 380px; justify-content: center; text-align: center; border-radius: 16px; }
}

/* ==========================================================================
   Phase 6 — Find My Sound questionnaire + suggestions. Token-based; no colour-only
   signals; reduced-motion safe.
   ========================================================================== */

.snd-fms-form {
    margin-top: 22px; padding: 20px; border: 1px solid var(--lv-border);
    border-radius: 16px; background: var(--lv-surface);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px;
}
.snd-fms-field { display: grid; gap: 6px; margin: 0; border: 0; padding: 0; min-width: 0; }
.snd-fms-field > label,
.snd-fms-field > legend {
    font-size: var(--lv-fs-xs, .74rem); font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--lv-ink-mute); padding: 0;
}
.snd-fms-field select {
    padding: 10px 12px; border-radius: 8px; border: 1px solid var(--lv-border);
    background: var(--lv-bg); color: var(--lv-ink); font-size: var(--lv-fs-md, 1rem);
}
.snd-fms-field select:focus-visible { outline: 2px solid var(--lv-ring, var(--snd-acc)); outline-offset: 1px; }

.snd-radio, .snd-check {
    display: inline-flex; align-items: center; gap: 7px; margin-right: 14px;
    font-size: var(--lv-fs-sm, .9rem); color: var(--lv-ink); cursor: pointer;
}
.snd-radio input, .snd-check input { accent-color: var(--snd-acc, var(--lv-violet)); }
.snd-fms-checks {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 20px;
    padding-top: 4px; border-top: 1px solid var(--lv-border);
}
.snd-fms-form .snd-filter-actions { grid-column: 1 / -1; }

/* ---- suggestions ---- */
.snd-result {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px; border: 1px solid var(--lv-border); border-radius: 14px;
    background: var(--lv-surface); margin-bottom: 12px;
}
.snd-result.primary {
    border-color: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 45%, transparent);
    background: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 6%, var(--lv-surface));
    padding: 22px;
}
.snd-result-main { min-width: 0; }
.snd-result-title { font-weight: 700; font-size: var(--lv-fs-lg, 1.05rem); color: inherit; text-decoration: none; }
.snd-result-title:hover { color: var(--snd-acc, var(--lv-violet)); }
.snd-result.primary .snd-result-title {
    font-family: var(--lv-font-display, 'Fraunces', Georgia, serif); font-size: 1.4rem;
}
.snd-fms-why { margin: 6px 0 10px; color: var(--lv-ink-mute); font-size: var(--lv-fs-sm, .9rem); }
.snd-result-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.snd-result-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.snd-fms-not { color: var(--lv-ink-mute); font-size: var(--lv-fs-xs, .78rem); text-decoration: none; }
.snd-fms-not:hover { color: var(--snd-acc, var(--lv-violet)); text-decoration: underline; }
.snd-flag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--lv-fs-xs, .72rem); font-weight: 600;
    border-radius: 20px; padding: 3px 9px;
    color: var(--lv-ink-mute); border: 1px solid var(--lv-border); background: var(--lv-bg);
}
.snd-fms-alts { display: grid; gap: 10px; }

@media (max-width: 560px) {
    .snd-result { flex-direction: column; align-items: stretch; }
    .snd-result-actions { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ==========================================================================
   Phase 7 — Soundscape Mixer. Token-based; reduced-motion safe.
   ========================================================================== */

.snd-mixer { margin-top: 22px; }
.snd-mx-transport {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 16px 18px; border: 1px solid var(--lv-border); border-radius: 14px;
    background: var(--lv-surface);
}
.snd-mx-play { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.snd-mx-master { display: flex; align-items: center; gap: 10px; font-size: var(--lv-fs-sm, .88rem); color: var(--lv-ink-mute); font-weight: 600; }
.snd-mx-master input { accent-color: var(--snd-acc, var(--lv-violet)); width: 140px; }
.snd-mx-lowstim { margin: 0; }
.snd-mx-msg {
    margin-top: 12px; padding: 8px 12px; border-radius: 8px;
    background: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 10%, transparent);
    color: var(--lv-ink); font-size: var(--lv-fs-sm, .86rem);
}

.snd-mx-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px; margin-top: 18px; }
.snd-mx-palette, .snd-mx-active-wrap {
    padding: 16px; border: 1px solid var(--lv-border); border-radius: 14px; background: var(--lv-surface);
}
.snd-mx-cols h3, .snd-mx-presets h3, .snd-mx-saved-wrap h3 {
    margin: 0 0 12px; font-size: var(--lv-fs-md, 1rem);
    font-family: var(--lv-font-display, 'Fraunces', Georgia, serif); font-weight: 600;
}
.snd-mx-palette-list { display: flex; flex-wrap: wrap; gap: 8px; }

.snd-mx-active { display: grid; gap: 10px; min-height: 40px; }
.snd-mx-layer {
    display: grid; grid-template-columns: 1fr auto minmax(120px, 1.4fr) auto; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--lv-border); border-radius: 10px; background: var(--lv-bg);
}
.snd-mx-layer-name { font-weight: 600; font-size: var(--lv-fs-sm, .9rem); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snd-mx-vol { accent-color: var(--snd-acc, var(--lv-violet)); }
.snd-mx-mute {
    padding: 5px 10px; border-radius: 20px; cursor: pointer; font-size: var(--lv-fs-xs, .74rem); font-weight: 700;
    border: 1px solid var(--lv-border); background: var(--lv-surface); color: var(--lv-ink-mute);
}
.snd-mx-mute[aria-pressed="true"] { color: var(--snd-acc, var(--lv-violet)); border-color: var(--snd-acc, var(--lv-violet)); }
.snd-mx-remove {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    border: 1px solid transparent; background: transparent; color: var(--lv-ink-mute);
}
.snd-mx-remove:hover { color: var(--lv-danger, #d6455d); background: color-mix(in srgb, var(--lv-danger, #d6455d) 10%, transparent); }

.snd-mx-save { display: flex; gap: 8px; margin-top: 14px; }
.snd-mx-name { flex: 1; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--lv-border); background: var(--lv-bg); color: var(--lv-ink); }
.snd-mx-savebtn { margin: 0; cursor: pointer; }

.snd-mx-presets, .snd-mx-saved-wrap { margin-top: 22px; }
.snd-mx-preset-list { display: flex; flex-wrap: wrap; gap: 8px; }
.snd-mx-saved { display: grid; gap: 8px; }
.snd-mx-saved-row { display: flex; align-items: center; gap: 8px; }
.snd-mx-load {
    flex: 1; text-align: left; padding: 10px 12px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--lv-border); background: var(--lv-surface); color: inherit; font-weight: 600;
}
.snd-mx-load:hover { border-color: var(--snd-acc, var(--lv-violet)); color: var(--snd-acc, var(--lv-violet)); }
.snd-mx-copy, .snd-mx-del {
    padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: var(--lv-fs-xs, .78rem); font-weight: 600;
    border: 1px solid var(--lv-border); background: var(--lv-surface); color: var(--lv-ink-mute);
}
.snd-mx-del:hover { color: var(--lv-danger, #d6455d); border-color: color-mix(in srgb, var(--lv-danger, #d6455d) 40%, transparent); }
.snd-mx-copy:hover { color: var(--snd-acc, var(--lv-violet)); border-color: var(--snd-acc, var(--lv-violet)); }

.snd-mixer :focus-visible { outline: 2px solid var(--lv-ring, var(--snd-acc)); outline-offset: 2px; }

@media (max-width: 720px) {
    .snd-mx-cols { grid-template-columns: 1fr; }
    .snd-mx-layer { grid-template-columns: 1fr auto; grid-auto-rows: auto; }
    .snd-mx-vol { grid-column: 1 / -1; }
}

/* ==========================================================================
   Phase 8 — Tone / frequency / noise generator. Token-based; reduced-motion safe.
   ========================================================================== */

.snd-gen { margin-top: 22px; }
.snd-gen-modes { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--lv-border); border-radius: 12px; background: var(--lv-surface); margin-bottom: 16px; }
.snd-gen-mode {
    padding: 8px 16px; border-radius: 9px; border: 0; cursor: pointer;
    background: transparent; color: var(--lv-ink-mute); font-weight: 700; font-size: var(--lv-fs-sm, .88rem);
}
.snd-gen-mode.is-on { background: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 14%, transparent); color: var(--snd-acc, var(--lv-violet)); }

.snd-gen-panel { display: flex; flex-wrap: wrap; gap: 16px; padding: 16px; border: 1px solid var(--lv-border); border-radius: 14px; background: var(--lv-surface); }
.snd-gen-panel label { display: grid; gap: 6px; font-size: var(--lv-fs-xs, .74rem); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--lv-ink-mute); }
.snd-gen-panel input[type="number"], .snd-gen-panel select {
    padding: 9px 12px; border-radius: 8px; border: 1px solid var(--lv-border); background: var(--lv-bg); color: var(--lv-ink);
    font-size: var(--lv-fs-md, 1rem); font-weight: 500; text-transform: none; letter-spacing: 0; min-width: 140px;
}
.snd-gen-note { flex-basis: 100%; margin: 4px 0 0; font-size: var(--lv-fs-sm, .84rem); color: var(--lv-ink-mute); }

.snd-gen-presets { margin-top: 16px; padding: 16px; border: 1px solid var(--lv-border); border-radius: 14px; background: var(--lv-surface); }
.snd-gen-preset-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.snd-gen-preset-group > span { font-size: var(--lv-fs-xs, .74rem); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--lv-ink-mute); width: 100%; }

.snd-gen-colors { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.snd-gen-color.is-on { border-color: var(--snd-acc, var(--lv-violet)); color: var(--snd-acc, var(--lv-violet)); }

.snd-gen-display {
    margin: 16px 0 10px; padding: 12px 14px; border-radius: 10px; min-height: 20px;
    background: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 8%, transparent);
    font-variant-numeric: tabular-nums; font-weight: 700; color: var(--lv-ink);
}
.snd-gen-transport { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.snd-gen-play { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.snd-gen-vol, .snd-gen-timer-wrap { display: flex; align-items: center; gap: 10px; font-size: var(--lv-fs-sm, .86rem); color: var(--lv-ink-mute); font-weight: 600; }
.snd-gen-vol input { accent-color: var(--snd-acc, var(--lv-violet)); width: 130px; }
.snd-gen-timer-wrap select { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--lv-border); background: var(--lv-bg); color: var(--lv-ink); }
.snd-gen :focus-visible { outline: 2px solid var(--lv-ring, var(--snd-acc)); outline-offset: 2px; }

@media (max-width: 560px) {
    .snd-gen-panel input[type="number"], .snd-gen-panel select { min-width: 0; width: 100%; }
    .snd-gen-panel label { flex-basis: 100%; }
}

/* ==========================================================================
   Phase 9 — My Library. Reuses track cards, saved-mix rows, and the questionnaire
   form styles; only a couple of local touches here.
   ========================================================================== */
.snd-sechead .snd-clear { margin-left: auto; cursor: pointer; border: 0; background: transparent; }
.snd-sechead .snd-clear:hover { color: var(--snd-acc, var(--lv-violet)); }
.snd-detail .snd-mx-saved .snd-mx-load[role="text"] { cursor: default; }

/* ==========================================================================
   Phase 10 — Sound Journal. Token-based; reuses form/badge styles.
   ========================================================================== */
.snd-journal-note { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--lv-border); background: var(--lv-bg); color: var(--lv-ink); font-family: inherit; resize: vertical; }
.snd-journal-list { display: grid; gap: 12px; }
.snd-journal-entry { padding: 14px 16px; border: 1px solid var(--lv-border); border-radius: 12px; background: var(--lv-surface); }
.snd-journal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.snd-journal-date { font-size: var(--lv-fs-xs, .74rem); color: var(--lv-ink-mute); font-variant-numeric: tabular-nums; }
.snd-journal-meta .snd-clear { margin-left: auto; }
.snd-journal-text { margin: 10px 0 0; color: var(--lv-ink); font-size: var(--lv-fs-sm, .92rem); white-space: pre-wrap; word-break: break-word; }

/* ==========================================================================
   Phase 11 — timers, breath pacer, meditation, japa, yoga. Token-based;
   all motion respects prefers-reduced-motion.
   ========================================================================== */
.snd-tool { margin-top: 22px; }
.snd-tl, .snd-br, .snd-md, .snd-jp, .snd-yg {
    padding: 22px; border: 1px solid var(--lv-border); border-radius: 16px; background: var(--lv-surface);
    display: grid; gap: 16px; justify-items: center; text-align: center;
}
.snd-tl-presets, .snd-br-patterns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.snd-chip.is-on { border-color: var(--snd-acc, var(--lv-violet)); color: var(--snd-acc, var(--lv-violet)); }
.snd-tl-clock {
    font-family: var(--lv-font-display, 'Fraunces', Georgia, serif);
    font-size: clamp(2.6rem, 12vw, 4.5rem); font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--snd-acc, var(--lv-violet)); line-height: 1;
}
.snd-tl-controls { display: flex; gap: 12px; align-items: center; }
.snd-tl-controls .snd-cta { margin: 0; cursor: pointer; }
.snd-tl-stop { padding: 10px 18px; border-radius: 30px; cursor: pointer; border: 1px solid var(--lv-border); background: var(--lv-surface); color: var(--lv-ink-mute); font-weight: 700; }
.snd-tl-stop:hover { border-color: var(--snd-acc, var(--lv-violet)); color: var(--snd-acc, var(--lv-violet)); }
.snd-tl-note { color: var(--lv-ink-mute); font-size: var(--lv-fs-sm, .86rem); max-width: 460px; margin: 0; }
.snd-tl-sessions { color: var(--lv-ink-mute); font-size: var(--lv-fs-sm, .86rem); }

/* Sleep dim-screen mode — everything softly darkens; controls stay tappable. */
body.snd-dimmed { filter: brightness(0.35); transition: filter 1.2s ease; }
@media (prefers-reduced-motion: reduce) { body.snd-dimmed { transition: none; } }

/* Breathing pacer */
.snd-br-stage { position: relative; width: 220px; height: 220px; display: grid; place-items: center; }
.snd-br-ring {
    width: 120px; height: 120px; border-radius: 50%;
    background: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 22%, transparent);
    border: 2px solid var(--snd-acc, var(--lv-violet)); transform: scale(1);
}
.snd-br-stage.reduced .snd-br-ring { display: none; }
.snd-br-word { position: absolute; font-weight: 700; font-size: var(--lv-fs-md, 1rem); color: var(--lv-ink); }
.snd-br-stage.reduced .snd-br-word { position: static; font-size: var(--lv-fs-lg, 1.2rem); }

/* Japa counter */
.snd-jp-count {
    width: 180px; height: 180px; border-radius: 50%; cursor: pointer;
    border: 2px solid var(--snd-acc, var(--lv-violet));
    background: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 10%, var(--lv-surface));
    display: grid; place-items: center; gap: 2px; color: var(--lv-ink);
}
.snd-jp-count:active { background: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 20%, var(--lv-surface)); }
.snd-jp-num { font-family: var(--lv-font-display, Georgia, serif); font-size: 3rem; font-weight: 700; line-height: 1; }
.snd-jp-of { font-size: var(--lv-fs-sm, .85rem); color: var(--lv-ink-mute); }
.snd-jp-rounds { color: var(--lv-ink-mute); font-weight: 600; }

/* Yoga phases */
.snd-yg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; max-width: 360px; }
.snd-yg-list li { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--lv-border); color: var(--lv-ink-mute); }
.snd-yg-list li.is-on { border-color: var(--snd-acc, var(--lv-violet)); color: var(--snd-acc, var(--lv-violet)); background: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 8%, transparent); }
.snd-yg-list li em { font-style: normal; font-variant-numeric: tabular-nums; }
.snd-yg-phase { font-weight: 700; color: var(--snd-acc, var(--lv-violet)); min-height: 1.2em; }

.snd-tool :focus-visible, .snd-jp-count:focus-visible { outline: 2px solid var(--lv-ring, var(--snd-acc)); outline-offset: 2px; }
.snd-md .snd-fms-field, .snd-jp .snd-fms-field { width: 100%; max-width: 320px; }

@media (prefers-reduced-motion: reduce) { .snd-br-ring { transition: none !important; } }

/* ==========================================================================
   Phase 12 — suggestion tools: saved suggestions + the AI plan upsell.
   Reuses .snd-result / .snd-fms-* / .snd-chip; only the new pieces live here.
   ========================================================================== */
.snd-ai-panel {
    border: 1px solid color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 30%, var(--lv-border));
    border-radius: 16px; padding: 18px; background: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 5%, var(--lv-surface));
}
.snd-ai-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.snd-ai-cta .snd-cta { margin: 0; cursor: pointer; }
.snd-ai-cta .snd-cta[disabled] { opacity: .55; cursor: not-allowed; }
.snd-ai-out {
    margin-top: 12px; padding: 12px 14px; border-radius: 12px; color: var(--lv-ink-mute);
    font-size: var(--lv-fs-sm, .9rem); border: 1px dashed var(--lv-border);
    background: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 6%, transparent);
}

.snd-saved-list { display: grid; gap: 10px; }
.snd-saved {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    padding: 14px 16px; border: 1px solid var(--lv-border); border-radius: 14px; background: var(--lv-surface);
}
.snd-saved-main { min-width: 0; }
.snd-saved-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: none; }
.snd-result-title.muted { color: var(--lv-ink-mute); font-weight: 600; }
.snd-chip.danger { color: var(--lv-ink-mute); }
.snd-chip.danger:hover { border-color: var(--lv-danger, #b42318); color: var(--lv-danger, #b42318); }

@media (max-width: 640px) {
    .snd-saved { flex-direction: column; align-items: stretch; }
    .snd-saved-actions { justify-content: flex-start; }
}

/* ============================================================================
   Sound & Music HUB landing — premium redesign.
   SCOPED entirely under .snd-hub so the per-tool landing pages, the shared
   components and the universal header/footer are untouched. Token-driven per the
   Kriyasya design system (no hardcoded hex/px): dark + reduced-motion + forced
   -colors aware, and it EXTENDS the existing .snd-card / price badge rather than
   introducing a second component.
   ============================================================================ */
.snd-hub { padding-bottom: var(--lv-sp-64); }

/* ---------- hero: premium panel ---------- */
.snd-hub .snd-hero {
    position: relative;
    overflow: hidden;
    margin-top: var(--lv-sp-4);
    padding: clamp(var(--lv-sp-32), 5vw, var(--lv-sp-64)) clamp(var(--lv-sp-24), 5vw, 56px);
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-r-xl);
    background: var(--lv-grad-hero);
    box-shadow: var(--lv-sh-sm);
}
.snd-hub .snd-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(620px 320px at 90% -20%, color-mix(in srgb, var(--lv-violet) 16%, transparent), transparent 60%),
        radial-gradient(420px 280px at 4% 130%, color-mix(in srgb, var(--lv-gold) 12%, transparent), transparent 55%);
}
.snd-hub .snd-hero > * { position: relative; z-index: 1; }
.snd-hub .snd-hero .snd-rings {
    position: absolute; right: clamp(-90px, -4vw, -40px); top: 50%; transform: translateY(-50%);
    width: 320px; height: 320px; z-index: 0; opacity: .5; color: var(--lv-violet); pointer-events: none;
}
.snd-hub .snd-hero .snd-h1 { max-width: 15ch; }
.snd-hub .snd-hero .snd-lead { max-width: 62ch; margin-top: var(--lv-sp-3); font-size: var(--lv-fs-lg); }

/* ---------- hero search + suggestion chips ---------- */
.snd-hub-search {
    display: flex; align-items: center; gap: var(--lv-sp-2);
    max-width: 620px; margin-top: var(--lv-sp-24);
    padding: 6px 6px 6px var(--lv-sp-4);
    background: var(--lv-surface);
    border: 1px solid var(--lv-border-2);
    border-radius: var(--lv-r-pill);
    box-shadow: var(--lv-sh-sm);
}
.snd-hub-search:focus-within { border-color: var(--lv-violet); box-shadow: var(--lv-ring); }
.snd-hub-search svg { flex: none; color: var(--lv-ink-mute); }
.snd-hub-search input {
    flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--lv-ink);
    font: inherit; font-size: 1rem; padding: 10px 4px; outline: none;
}
.snd-hub-search input::placeholder { color: var(--lv-ink-mute); }
.snd-hub-search .snd-hub-clear {
    flex: none; border: 0; background: var(--lv-surface-2); color: var(--lv-ink-soft);
    width: 34px; height: 34px; border-radius: var(--lv-r-pill); cursor: pointer; font-size: 1rem;
    display: none; place-items: center;
}
.snd-hub-search .snd-hub-clear:hover { color: var(--lv-ink); }
.snd-hub-search.has-value .snd-hub-clear { display: grid; }

.snd-hub-chips { display: flex; flex-wrap: wrap; gap: var(--lv-sp-2); margin-top: var(--lv-sp-4); }
.snd-hub-chip {
    appearance: none; cursor: pointer;
    padding: 9px 16px; border-radius: var(--lv-r-pill);
    border: 1px solid var(--lv-border-2); background: var(--lv-surface); color: var(--lv-ink-soft);
    font: inherit; font-size: var(--lv-fs-sm); font-weight: 600;
    transition: color var(--lv-dur-1) var(--lv-ease), border-color var(--lv-dur-1) var(--lv-ease), background var(--lv-dur-1) var(--lv-ease);
}
.snd-hub-chip:hover { border-color: var(--lv-violet); color: var(--lv-violet); }
.snd-hub-chip[aria-pressed="true"] {
    background: color-mix(in srgb, var(--lv-violet) 12%, transparent);
    border-color: color-mix(in srgb, var(--lv-violet) 40%, transparent); color: var(--lv-violet);
}
.snd-hub-chip:focus-visible { outline: none; box-shadow: var(--lv-ring); }

/* ---------- sticky filter row ---------- */
.snd-hub-filters {
    position: sticky; top: 0; z-index: 20;
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--lv-sp-3);
    margin-top: var(--lv-sp-32); padding: var(--lv-sp-3) var(--lv-sp-4);
    background: var(--lv-surface-glass); backdrop-filter: blur(10px);
    border: 1px solid var(--lv-border); border-radius: var(--lv-r-md);
}
.snd-hub-filters .grp { display: inline-flex; align-items: center; gap: 6px; }
.snd-hub-filters label { font-size: var(--lv-fs-sm); color: var(--lv-ink-mute); font-weight: 600; }
.snd-hub-filters select {
    font: inherit; font-size: var(--lv-fs-sm); color: var(--lv-ink);
    background: var(--lv-surface); border: 1px solid var(--lv-border-2);
    border-radius: var(--lv-r-sm); padding: 8px 10px; cursor: pointer; min-height: 40px;
}
.snd-hub-filters select:focus-visible { outline: none; box-shadow: var(--lv-ring); }
.snd-hub-count { margin-left: auto; font-size: var(--lv-fs-sm); color: var(--lv-ink-mute); }
.snd-hub-count b { color: var(--lv-ink); font-weight: 700; }
.snd-hub-reset {
    appearance: none; cursor: pointer; font: inherit; font-size: var(--lv-fs-sm); font-weight: 600;
    color: var(--lv-violet); background: transparent; border: 0; padding: 8px 6px; min-height: 40px;
}
.snd-hub-reset:hover { text-decoration: underline; }
.snd-hub-reset:focus-visible { outline: none; box-shadow: var(--lv-ring); border-radius: var(--lv-r-sm); }

/* ---------- section rhythm ---------- */
.snd-hub .snd-sec { margin-top: var(--lv-sp-64); }
.snd-hub .snd-featured { margin-top: var(--lv-sp-48); }

/* ---------- category header ---------- */
.snd-hub .snd-sechead {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    gap: var(--lv-sp-3) var(--lv-sp-4); margin: 0 0 var(--lv-sp-4);
    padding-bottom: var(--lv-sp-3);
    border-bottom: 1px solid var(--lv-border);
}
.snd-hub .snd-sechead .snd-cat-title { display: flex; align-items: center; gap: var(--lv-sp-3); }
.snd-hub .snd-sechead h2 { font-size: var(--lv-fs-xl); font-weight: 700; margin: 0; }
.snd-hub .snd-cat-ic {
    flex: none; width: 34px; height: 34px; border-radius: var(--lv-r-sm);
    display: grid; place-items: center; color: var(--snd-acc, var(--lv-violet));
    background: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 22%, transparent);
}
.snd-hub .snd-cat-desc { grid-column: 1 / -1; margin: 0; color: var(--lv-ink-mute); font-size: var(--lv-fs-sm); max-width: 68ch; }
.snd-hub .snd-cat-count {
    font-size: var(--lv-fs-xs); font-weight: 700; color: var(--lv-ink-soft);
    background: var(--lv-surface-2); border: 1px solid var(--lv-border);
    padding: 4px 11px; border-radius: var(--lv-r-pill); white-space: nowrap;
}

/* ---------- grid: 4 / 3 / 2 / 1 per design system ---------- */
.snd-hub .snd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lv-sp-5); }
@media (min-width: 1280px) { .snd-hub .snd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .snd-hub .snd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .snd-hub .snd-grid { grid-template-columns: 1fr; gap: var(--lv-sp-3); } }

/* ---------- tool card (extends .snd-card; hub-only overrides) ---------- */
.snd-hub .snd-card {
    min-height: 190px; padding: var(--lv-sp-5);
    border-radius: var(--lv-r-lg); border: 1px solid var(--lv-border);
    box-shadow: var(--lv-sh-sm);
    transition: transform var(--lv-dur-2) var(--lv-ease-out), box-shadow var(--lv-dur-2) var(--lv-ease-out), border-color var(--lv-dur-2) var(--lv-ease-out);
}
.snd-hub .snd-card:hover,
.snd-hub .snd-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--lv-sh-md);
    border-color: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 45%, var(--lv-border));
}
.snd-hub .snd-card:focus-visible { outline: none; box-shadow: var(--lv-ring), var(--lv-sh-md); }
.snd-hub .snd-card .snd-card-top {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lv-sp-3);
    margin-bottom: var(--lv-sp-3);
}
.snd-hub .snd-card .ic { margin-bottom: 0; transition: transform var(--lv-dur-2) var(--lv-ease-out); }
.snd-hub .snd-card:hover .ic { transform: scale(1.04); }
.snd-hub .snd-card .t { font-size: 1rem; line-height: 1.35; font-weight: 700; margin: 0 0 6px; color: var(--lv-ink); }
.snd-hub .snd-card .d {
    font-size: var(--lv-fs-sm); line-height: 1.5; color: var(--lv-ink-soft); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.snd-hub .snd-card .foot { margin-top: auto; padding-top: var(--lv-sp-4); }
.snd-hub .snd-card .snd-open {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--lv-fs-sm); font-weight: 700; color: var(--lv-violet);
}
.snd-hub .snd-card .snd-open .arw { transition: transform var(--lv-dur-1) var(--lv-ease); }
.snd-hub .snd-card:hover .snd-open .arw { transform: translateX(3px); }
/* paid tools: a subtle accent top-hairline (world colour as a secondary identifier only) */
.snd-hub .snd-card.is-paid { border-top: 2px solid color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 55%, transparent); }

/* ---------- featured / recommended (REUSES .snd-card with an is-featured modifier — not a second
   card component; just larger emphasis + a soft accent wash) ---------- */
.snd-hub-featured-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lv-sp-5);
}
@media (max-width: 1023px) { .snd-hub-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .snd-hub-featured-grid { grid-template-columns: 1fr; } }
.snd-hub .snd-card.is-featured {
    min-height: 210px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 10%, var(--lv-surface)), var(--lv-surface) 68%);
    border-color: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 30%, var(--lv-border));
}
.snd-hub .snd-card.is-featured .ic { width: 50px; height: 50px; border-radius: var(--lv-r-md); }
.snd-hub .snd-card.is-featured .t { font-size: var(--lv-fs-lg); }

/* ---------- show-all + hidden/empty helpers ---------- */
.snd-hub .snd-card.is-collapsed,
.snd-hub .snd-card.is-hidden { display: none; }
.snd-hub .snd-sec.is-empty { display: none; }
.snd-hub-showall {
    margin-top: var(--lv-sp-4); display: inline-flex; align-items: center; gap: 6px;
    appearance: none; cursor: pointer; font: inherit; font-size: var(--lv-fs-sm); font-weight: 700;
    color: var(--lv-violet); background: var(--lv-surface); border: 1px solid var(--lv-border-2);
    padding: 10px 16px; border-radius: var(--lv-r-pill); min-height: 44px;
}
.snd-hub-showall:hover { border-color: var(--lv-violet); }
.snd-hub-showall:focus-visible { outline: none; box-shadow: var(--lv-ring); }
.snd-hub-empty {
    margin-top: var(--lv-sp-24); padding: var(--lv-sp-32); text-align: center;
    border: 1px dashed var(--lv-border-2); border-radius: var(--lv-r-lg); color: var(--lv-ink-mute);
    display: none;
}
.snd-hub.is-searching .snd-hub-empty.show { display: block; }

/* ---------- bottom notices: membership panel + quieter disclaimer ---------- */
.snd-hub-membership {
    display: flex; align-items: flex-start; gap: var(--lv-sp-4);
    margin-top: var(--lv-sp-48); padding: var(--lv-sp-5);
    border: 1px solid color-mix(in srgb, var(--lv-violet) 26%, var(--lv-border));
    border-radius: var(--lv-r-lg);
    background: linear-gradient(160deg, color-mix(in srgb, var(--lv-violet) 8%, var(--lv-surface)), var(--lv-surface) 70%);
}
.snd-hub-membership .ic {
    flex: none; width: 44px; height: 44px; border-radius: var(--lv-r-md); display: grid; place-items: center;
    color: var(--lv-violet); background: color-mix(in srgb, var(--lv-violet) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--lv-violet) 24%, transparent);
}
.snd-hub-membership .bd { flex: 1 1 auto; min-width: 0; }
.snd-hub-membership h2 { font-size: var(--lv-fs-lg); margin: 0 0 6px; color: var(--lv-ink); }
.snd-hub-membership p { margin: 0; font-size: var(--lv-fs-sm); color: var(--lv-ink-soft); max-width: 68ch; }
.snd-hub .snd-legal { margin-top: var(--lv-sp-4); }

/* ---------- responsive hero / filters ---------- */
@media (max-width: 767px) {
    .snd-hub .snd-hero .snd-rings { display: none; }
    .snd-hub-filters { gap: var(--lv-sp-2); }
    .snd-hub-count { margin-left: 0; width: 100%; order: 5; }
    .snd-hub-membership { flex-direction: column; gap: var(--lv-sp-3); }
}

/* ---------- reduced motion + forced colors ---------- */
@media (prefers-reduced-motion: reduce) {
    .snd-hub .snd-card,
    .snd-hub .snd-card .ic,
    .snd-hub .snd-card .snd-open .arw,
    .snd-hub-feat,
    .snd-hub-chip { transition: none; }
}
@media (forced-colors: active) {
    .snd-hub .snd-hero::before,
    .snd-hub .snd-hero .snd-rings { display: none; }
    .snd-hub .snd-card,
    .snd-hub-feat,
    .snd-hub-membership { border: 1px solid CanvasText; }
}

/* screen-reader-only (scoped to the hub; used for the search field's visible-to-AT label) */
.snd-hub .snd-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================================
   Sound & Music hub rev 19 — calm, category-at-a-time directory.
   Additive overrides remain fully scoped to .snd-hub; tool pages and the
   universal header/footer retain their existing styles.
   ============================================================================ */
.snd-hub [hidden] { display: none !important; }

.snd-hub .snd-quick-starts {
    display: flex; align-items: center; justify-content: space-between; gap: var(--lv-sp-24);
    margin-top: var(--lv-sp-32); padding: var(--lv-sp-24) 0;
    border-block: 1px solid var(--lv-border);
}
.snd-hub .snd-quick-copy { flex: 1 1 22rem; min-width: 0; }
.snd-hub .snd-quick-copy h2 {
    margin: var(--lv-sp-2) 0 var(--lv-sp-1); font-size: var(--lv-fs-lg); color: var(--lv-ink);
}
.snd-hub .snd-quick-copy p { margin: 0; color: var(--lv-ink-soft); font-size: 1rem; line-height: 1.55; }
.snd-hub .snd-quick-links {
    flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--lv-sp-2);
}
.snd-hub .snd-quick-link {
    display: inline-flex; align-items: center; gap: var(--lv-sp-2); min-height: 2.75rem;
    text-decoration: none; white-space: nowrap;
}
.snd-hub .snd-quick-link .ic {
    width: var(--lv-sp-24); height: var(--lv-sp-24); margin: 0; border: 0; background: transparent;
}
.snd-hub .snd-quick-link .ic svg { width: 100%; height: 100%; }
.snd-hub .snd-quick-arrow { transition: transform var(--lv-dur-1) var(--lv-ease); }
.snd-hub .snd-quick-link:hover .snd-quick-arrow { transform: translateX(var(--lv-sp-1)); }

.snd-hub .snd-directory { margin-top: var(--lv-sp-48); }
.snd-hub .snd-directory-head { max-width: 46rem; }
.snd-hub .snd-directory-head h2 {
    margin: var(--lv-sp-2) 0 var(--lv-sp-2); color: var(--lv-ink); font-size: var(--lv-fs-2xl);
}
.snd-hub .snd-directory-head p { margin: 0; color: var(--lv-ink-soft); font-size: 1rem; line-height: 1.6; }

.snd-hub .snd-category-toolbar {
    display: grid; gap: var(--lv-sp-3); margin-top: var(--lv-sp-24); padding: var(--lv-sp-4);
    border: 1px solid var(--lv-border); border-radius: var(--lv-r-lg); background: var(--lv-surface-2);
}
.snd-hub .snd-category-tabs {
    display: flex; gap: var(--lv-sp-2); max-width: 100%; overflow-x: auto; padding-bottom: var(--lv-sp-1);
    overscroll-behavior-inline: contain; scrollbar-width: thin;
}
.snd-hub .snd-category-tab { flex: 0 0 auto; white-space: nowrap; }
.snd-hub .snd-category-tab[aria-selected="true"] {
    color: var(--lv-violet); border-color: color-mix(in srgb, var(--lv-violet) 45%, var(--lv-border));
    background: color-mix(in srgb, var(--lv-violet) 12%, var(--lv-surface));
}
.snd-hub .snd-directory-controls {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--lv-sp-3);
    padding-top: var(--lv-sp-3); border-top: 1px solid var(--lv-border);
}
.snd-hub .snd-access-filter { display: inline-flex; align-items: center; gap: var(--lv-sp-2); }
.snd-hub .snd-access-filter label { color: var(--lv-ink-mute); font-size: var(--lv-fs-sm); font-weight: 700; }
.snd-hub .snd-access-filter select {
    min-height: 2.75rem; padding: var(--lv-sp-2) var(--lv-sp-3); font: inherit; color: var(--lv-ink);
    border: 1px solid var(--lv-border-2); border-radius: var(--lv-r-sm); background: var(--lv-surface);
}
.snd-hub .snd-access-filter select:focus-visible { outline: none; box-shadow: var(--lv-ring); }
.snd-hub .snd-directory-controls .snd-hub-count { margin-left: auto; }

.snd-hub .snd-category-panels .snd-sec { margin-top: var(--lv-sp-32); }
.snd-hub .snd-category-panels .snd-sec:focus { outline: none; }
.snd-hub .snd-category-panels .snd-sec:focus-visible { border-radius: var(--lv-r-sm); box-shadow: var(--lv-ring); }
.snd-hub .snd-cat-desc { font-size: 1rem; line-height: 1.55; }

.snd-hub .snd-card { min-height: 12.5rem; padding: var(--lv-sp-24); }
.snd-hub .snd-card .t { margin-bottom: var(--lv-sp-2); font-size: var(--lv-fs-lg); line-height: 1.35; }
.snd-hub .snd-card .d { font-size: 1rem; line-height: 1.55; }
.snd-hub .snd-card .snd-open { font-size: 1rem; }
.snd-hub .snd-hub-showall { font-size: 1rem; }
.snd-hub .snd-hub-empty.show { display: block; }
.snd-hub .snd-hub-membership p { font-size: 1rem; line-height: 1.6; }

@media (max-width: 767px) {
    .snd-hub .snd-quick-starts { align-items: stretch; flex-direction: column; }
    .snd-hub .snd-quick-copy,
    .snd-hub .snd-quick-links { flex: 0 1 auto; }
    .snd-hub .snd-quick-links { justify-content: flex-start; }
    .snd-hub .snd-quick-link { flex: 1 1 100%; justify-content: flex-start; white-space: normal; }
    .snd-hub .snd-quick-link .snd-quick-arrow { margin-left: auto; }
    .snd-hub .snd-category-toolbar { padding-inline: var(--lv-sp-3); }
    .snd-hub .snd-directory-controls .snd-hub-count { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .snd-hub .snd-quick-arrow { transition: none; }
}

@media (forced-colors: active) {
    .snd-hub .snd-quick-starts,
    .snd-hub .snd-category-toolbar { border-color: CanvasText; }
}

/* ============================================================================
   Sound & Music hub rev 21 — premium dark theme.
   Brings the hub to the same midnight-purple theme as the tool landing and the
   homepage/Experts pages. Achieved by re-pointing the --lv-* tokens the hub
   already consumes at the dark palette, so every existing .snd-hub rule adapts
   with no markup churn. Scoped to .snd-hub + the .snd-dark body class, so the
   universal header/footer, the mini-player and the tool apps are untouched.
   ============================================================================ */
.snd-body.snd-dark {
    background:
        radial-gradient(1100px 620px at 82% -6%, rgba(139, 108, 255, .16), transparent 60%),
        radial-gradient(760px 520px at 6% 108%, rgba(233, 190, 99, .07), transparent 55%),
        linear-gradient(180deg, #090817, #0d0b20);
    background-color: #090817;
}
.snd-hub {
    --lv-bg: #090817;
    --lv-surface: #17142d;
    --lv-surface-2: #100e25;
    --lv-surface-glass: rgba(23, 20, 45, .72);
    --lv-ink: #f8f7ff;
    --lv-ink-soft: #c9c4d9;
    --lv-ink-mute: #968ea8;
    --lv-border: rgba(166, 140, 255, .18);
    --lv-border-2: rgba(166, 140, 255, .31);
    --lv-violet: #8b6cff;
    --lv-success: #74d9a1;
    --lv-grad-hero: linear-gradient(160deg, #1b1640, #120f2b 58%, #0b0920);
    color: var(--lv-ink);
}
/* The category-accent hues are chosen for a light ground; on the dark hub, lift the icon-tint and
   paid hairline so they keep contrast without changing the accent identity. */
.snd-hub .snd-cat-ic { color: color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 62%, #ffffff); }

@media (forced-colors: active) {
    .snd-body.snd-dark { background: Canvas; }
}

/* ============================================================================
   Sound & Music hub rev 23 — artwork-led cards, category tiles, plans, hero.
   Scoped to .snd-hub; overrides the earlier card rules (later in the file wins).
   Every cover uses a real image when present, else a cohesive per-category
   gradient built from the tool's --snd-acc / --snd-acc2.
   ============================================================================ */

/* ---- Cover-art tool card ---- */
.snd-hub .snd-card {
    padding: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: var(--lv-r-lg);
    background: var(--lv-surface);
}
.snd-hub .snd-cover {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    background-image:
        radial-gradient(120% 120% at 15% 12%, color-mix(in srgb, var(--snd-acc2, var(--lv-violet)) 42%, transparent), transparent 60%),
        linear-gradient(150deg, color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 60%, #0b0920), #0b0920 92%);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.snd-hub .snd-cover.has-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 8, 23, .12), rgba(9, 8, 23, .5));
}
.snd-hub .snd-cover-ic {
    position: absolute;
    left: 14px;
    bottom: 12px;
    z-index: 1;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: rgba(9, 8, 23, .42);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(5px);
}
.snd-hub .snd-cover-ic svg { width: 22px; height: 22px; }
.snd-hub .snd-cover .snd-pill {
    position: absolute;
    top: 11px;
    right: 11px;
    z-index: 1;
    color: #fff;
    background: rgba(9, 8, 23, .5);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(5px);
}
.snd-hub .snd-cover .snd-pill.free { color: #b8f2d6; }
.snd-hub .snd-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--lv-sp-4);
}
.snd-hub .snd-card-body .t { margin: 0 0 6px; font-size: var(--lv-fs-lg); line-height: 1.3; color: var(--lv-ink); }
.snd-hub .snd-card-body .d {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--lv-ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.snd-hub .snd-card .foot { margin-top: auto; padding-top: var(--lv-sp-3); }
.snd-hub .snd-card:hover .snd-cover-ic { transform: none; }

/* ---- Category tiles (visual selector) ---- */
.snd-hub .snd-cat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--lv-sp-3);
    margin-top: var(--lv-sp-24);
}
@media (max-width: 767px) {
    .snd-hub .snd-cat-tiles { grid-auto-flow: column; grid-auto-columns: 74%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
    .snd-hub .snd-cat-tile { scroll-snap-align: start; }
}
.snd-hub .snd-cat-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 118px;
    padding: var(--lv-sp-4);
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-r-lg);
    background-image:
        radial-gradient(120% 120% at 18% 10%, color-mix(in srgb, var(--snd-acc2, var(--lv-violet)) 40%, transparent), transparent 60%),
        linear-gradient(150deg, color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 52%, #0b0920), #0b0920 92%);
    background-size: cover;
    background-position: center;
    color: #fff;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    transition: transform var(--lv-dur-1) var(--lv-ease), border-color var(--lv-dur-1) var(--lv-ease);
}
.snd-hub .snd-cat-tile.has-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 8, 23, .1), rgba(9, 8, 23, .62)); }
.snd-hub .snd-cat-tile > * { position: relative; z-index: 1; }
.snd-hub .snd-cat-tile:hover { transform: translateY(-2px); }
.snd-hub .snd-cat-tile[aria-selected="true"] { border-color: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 60%, transparent); }
.snd-hub .snd-cat-tile:focus-visible { outline: none; box-shadow: var(--lv-ring); }
.snd-hub .snd-cat-tile .snd-cat-tile-ic { width: 26px; height: 26px; margin-bottom: auto; }
.snd-hub .snd-cat-tile .snd-cat-tile-ic svg { width: 100%; height: 100%; }
.snd-hub .snd-cat-tile .nm { font-weight: 700; font-size: 1rem; line-height: 1.25; margin-top: var(--lv-sp-3); }
.snd-hub .snd-cat-tile .ct { font-size: var(--lv-fs-sm); opacity: .82; }
.snd-hub .snd-cat-tile.all { background-image: linear-gradient(150deg, #241d47, #0b0920 92%); }

/* ---- Membership & plans ------------------------------------------------------------------
   Four access routes, presented as comparable cards. Previously these were four flat text blocks
   on a 200px auto-fit grid: they collapsed to unequal heights, had no icon or price anchor, and the
   paid routes looked identical to the free one. Now each card is a fixed-shape unit — icon, route
   name, what you pay, one sentence, two hard facts pinned to the bottom — so the four can be read
   across in one pass. */
.snd-hub .snd-plans-wrap {
    margin-top: var(--lv-sp-48);
    padding: clamp(var(--lv-sp-5), 3vw, var(--lv-sp-8, 40px));
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-r-lg);
    background:
        radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--lv-violet) 10%, transparent), transparent 62%),
        var(--lv-surface);
    position: relative;
    overflow: hidden;
}
.snd-hub .snd-plans-wrap::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--lv-violet), var(--lv-gold, #e9be63));
}
/* Explicit column counts, not auto-fit: inside the padded panel the four cards fell one short of
   auto-fit's track minimum and wrapped 3 + 1, leaving a half-empty row. */
.snd-hub .snd-plans-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--lv-sp-4);
    margin-top: var(--lv-sp-5);
    align-items: stretch;
}
@media (max-width: 1080px) {
    .snd-hub .snd-plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.snd-hub .snd-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--lv-sp-5);
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-r-lg);
    background: linear-gradient(160deg, color-mix(in srgb, var(--lv-violet) 8%, var(--lv-surface)), var(--lv-surface) 72%);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.snd-hub .snd-plan-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--lv-violet) 34%, var(--lv-border));
    box-shadow: 0 10px 28px -18px rgba(0, 0, 0, .55);
}
.snd-hub .snd-plan-card.feat {
    border-color: color-mix(in srgb, var(--lv-violet) 45%, var(--lv-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--lv-violet) 22%, transparent);
}
/* Badge sits on the card edge, so the card needs the top padding to clear it. */
.snd-hub .snd-plan-card.feat { padding-top: calc(var(--lv-sp-5) + 10px); }
.snd-hub .snd-plan-card .pbadge {
    position: absolute;
    top: -11px;
    left: var(--lv-sp-5);
    padding: 3px 12px;
    border-radius: 999px;
    font-size: var(--lv-fs-xs, .74rem);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #241a03;
    background: linear-gradient(120deg, var(--lv-gold, #e9be63), color-mix(in srgb, var(--lv-gold, #e9be63) 70%, #fff));
    white-space: nowrap;
}
.snd-hub .snd-plan-card .pic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--lv-sp-3);
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--lv-violet) 26%, var(--lv-border));
    background: color-mix(in srgb, var(--lv-violet) 12%, transparent);
    color: var(--lv-violet);
}
.snd-hub .snd-plan-card .pk { font-size: var(--lv-fs-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--lv-ink-mute); }
.snd-hub .snd-plan-card .pv { font-family: var(--lv-font-display, 'Fraunces', serif); font-size: 1.65rem; line-height: 1.15; color: var(--lv-ink); margin: 6px 0 2px; }
.snd-hub .snd-plan-card .pv small { display: block; margin-top: 5px; font-size: .92rem; font-weight: 600; color: var(--lv-ink-mute); font-family: var(--lv-font-body, 'Inter', sans-serif); }
.snd-hub .snd-plan-card .pd { margin: var(--lv-sp-3) 0 0; font-size: .98rem; color: var(--lv-ink-soft); line-height: 1.55; }
/* Facts pinned to the bottom keep the four cards aligned even with uneven copy. */
.snd-hub .snd-plan-card .pf {
    list-style: none;
    margin: var(--lv-sp-4) 0 0;
    padding: var(--lv-sp-3) 0 0;
    border-top: 1px solid var(--lv-border);
    margin-top: auto;
}
.snd-hub .snd-plan-card .pf li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    font-size: .9rem;
}
.snd-hub .snd-plan-card .pf .k { color: var(--lv-ink-mute); }
.snd-hub .snd-plan-card .pf .v { color: var(--lv-ink); font-weight: 700; text-align: right; }
.snd-hub .snd-plan-note {
    margin-top: var(--lv-sp-5);
    display: flex;
    gap: var(--lv-sp-3);
    align-items: flex-start;
    padding: var(--lv-sp-3) var(--lv-sp-4);
    border: 1px solid color-mix(in srgb, var(--lv-gold, #e9be63) 30%, transparent);
    border-radius: var(--lv-r-md, 12px);
    background: color-mix(in srgb, var(--lv-gold, #e9be63) 8%, transparent);
    font-size: .98rem;
    color: var(--lv-ink-soft);
}
.snd-hub .snd-plan-note svg { flex: none; color: var(--lv-gold, #e9be63); }
@media (max-width: 640px) {
    .snd-hub .snd-plans-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .snd-hub .snd-plan-card, .snd-hub .snd-plan-card:hover { transition: none; transform: none; }
}
@media (forced-colors: active) {
    .snd-hub .snd-plans-wrap, .snd-hub .snd-plan-card, .snd-hub .snd-plan-note { border-color: CanvasText; }
    .snd-hub .snd-plan-card .pbadge { border: 1px solid CanvasText; }
}

/* ---- Immersive hero art (replaces the thin rings) ---- */
.snd-hub .snd-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(var(--lv-sp-24), 4vw, var(--lv-sp-48)); align-items: center; }
.snd-hub .snd-hero-copy { min-width: 0; }
.snd-hub .snd-hero-cta { display: flex; flex-wrap: wrap; gap: var(--lv-sp-3); margin-top: var(--lv-sp-5); }
.snd-hub .snd-hero-art {
    position: relative;
    align-self: stretch;
    min-height: 240px;
    border-radius: var(--lv-r-lg);
    background-image:
        radial-gradient(80% 80% at 70% 25%, color-mix(in srgb, var(--lv-violet) 45%, transparent), transparent 62%),
        radial-gradient(70% 70% at 25% 85%, color-mix(in srgb, var(--lv-gold, #e9be63) 18%, transparent), transparent 60%),
        linear-gradient(150deg, #1b1640, #0b0920 90%);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border: 1px solid var(--lv-border);
}
.snd-hub .snd-hero-art .snd-rings {
    position: absolute; right: -10%; top: 50%; transform: translateY(-50%);
    width: 92%; height: auto; opacity: .5; color: #fff; pointer-events: none;
}
@media (max-width: 860px) {
    .snd-hub .snd-hero { grid-template-columns: 1fr; }
    .snd-hub .snd-hero-art { min-height: 150px; order: -1; }
}

/* ============================================================================
   Sound & Music hub rev 24 — wire the rev-23 artwork markup into the hub page.
   The rev-23 rules (cover cards, category tiles, plan cards, two-column hero
   art) shipped in CSS but the index.php markup was never updated to use them,
   so the page rendered a broken hybrid. These small additions finish the join:
   button resets for the tile <button>s, the hero CTA row + ghost button, an
   image-overlay for the hero art, and plan-card spacing. Scoped to .snd-hub.
   ============================================================================ */
.snd-hub .snd-cat-tile { appearance: none; font: inherit; }
.snd-hub .snd-cat-tile .nm,
.snd-hub .snd-cat-tile .ct { color: #fff; }

.snd-hub .snd-hero-cta { display: flex; flex-wrap: wrap; gap: var(--lv-sp-3); margin-top: var(--lv-sp-5); }
.snd-hub .snd-hero-cta .snd-cta { margin-top: 0; min-height: 46px; }
.snd-hub .snd-hero-cta .snd-cta.ghost {
    color: var(--lv-ink); background: transparent; border: 1px solid var(--lv-border-2);
}
.snd-hub .snd-hero-cta .snd-cta.ghost:hover { border-color: var(--lv-violet); color: var(--lv-violet); }
.snd-hub .snd-hero .snd-badges { margin-top: var(--lv-sp-4); }

.snd-hub .snd-hero-art.has-img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(9, 8, 23, .12), rgba(9, 8, 23, .55));
}

.snd-hub .snd-plans-cta { margin-top: var(--lv-sp-5); }
/* The qualifier is its own line under the price now, so nowrap would only cause overflow. */
.snd-hub .snd-plan-card .pv small { white-space: normal; }

/* ============================================================================
   Track artwork (rev 24) — cover art on catalogue track cards + a thumbnail in
   the persistent mini-player. Uses a real image when assets/img/sound/track/<code>
   or assets/img/sound/collection/<slug> exists, else a cohesive violet gradient.
   ============================================================================ */
.snd-track { overflow: hidden; }
.snd-track-cover {
    display: block; position: relative;
    margin: -16px -16px 4px;              /* full-bleed over the card's 16px padding */
    aspect-ratio: 16 / 10;
    border-radius: 14px 14px 0 0;
    background-image:
        radial-gradient(120% 120% at 16% 12%, color-mix(in srgb, var(--snd-acc2, var(--lv-violet-2, #b8a7ff)) 40%, transparent), transparent 60%),
        linear-gradient(150deg, color-mix(in srgb, var(--snd-acc, var(--lv-violet)) 55%, #0b0920), #0b0920 92%);
    background-size: cover; background-position: center;
    overflow: hidden;
}
.snd-track-cover.has-img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(9, 8, 23, .04), rgba(9, 8, 23, .42));
}
.snd-track-cover-ic {
    position: absolute; left: 12px; bottom: 10px; z-index: 1;
    width: 34px; height: 34px; display: grid; place-items: center;
    border-radius: 10px; color: #fff;
    background: rgba(9, 8, 23, .42); border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(5px);
}
.snd-track-cover-ic svg { width: 18px; height: 18px; }

/* Mini-player now-playing thumbnail (shown only when the track has artwork). */
.snd-mini-art {
    display: none; flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 8px;
    background-size: cover; background-position: center;
    background-color: color-mix(in srgb, var(--lv-violet) 30%, #0b0920);
    border: 1px solid var(--lv-border, rgba(166, 140, 255, .18));
}
.snd-mini-art.has-img { display: block; }