/* ============================================================
   StreamIndy Homepage — Cinematic Dark Theme (sh-* prefix)
   ============================================================ */

/* ── Global: reduce fixed header from 64px → 56px ───────────────── */
header { height: 56px; }

/* ── Link resets for card/track anchors ─────────────────────── */
a.sh-card, a.sh-card:hover,
a.sh-artist-card, a.sh-artist-card:hover,
a.sh-track, a.sh-track:hover {
    text-decoration: none !important;
    color: inherit !important;
}

/* sh-card-info used as <a> for title/artist navigation */
a.sh-card-info {
    display: block;
    text-decoration: none !important;
    color: inherit !important;
}
a.sh-card-info:hover {
    text-decoration: none !important;
}

/* ── Hero ───────────────────────────────────────────────────── */
.sh-hero {
    position: relative;
    min-height: 78vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    background: linear-gradient(135deg, #1a0533 0%, #0d0d1a 60%, #0d0d0f 100%);
    background-size: cover;
    background-position: center top;
}

.sh-hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.08) 0%,
        rgba(0,0,0,0.28) 28%,
        rgba(0,0,0,0.68) 56%,
        rgba(0,0,0,0.94) 82%,
        #0d0d0f 100%
    );
}

/* ── Floating nav ───────────────────────────────────────────── */
.sh-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}
.sh-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 44px;
}
.sh-nav-brand img { max-height: 36px; }
.sh-nav-actions { display: flex; gap: 10px; align-items: center; }

/* ── Hero body ──────────────────────────────────────────────── */
.sh-hero-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px 60px;
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
}

.sh-hero-tag {
    font-size: 0.63rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--main-color);
    background: rgba(124,58,237,0.14);
    border: 1px solid rgba(124,58,237,0.28);
    padding: 4px 14px;
    border-radius: 100px;
    margin-bottom: 18px;
}

.sh-hero-name {
    font-size: clamp(2.8rem, 8vw, 6rem);
    font-weight: 900;
    letter-spacing: -0.045em;
    color: #fff;
    margin: 0 0 12px;
    line-height: 1;
    text-shadow: 0 4px 40px rgba(0,0,0,0.55);
}

.sh-hero-heading {
    font-size: clamp(2.4rem, 7vw, 5rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.1;
    text-shadow: 0 4px 40px rgba(0,0,0,0.55);
}

.sh-hero-sub {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.7);
    margin: 0 0 28px;
    max-width: 520px;
    line-height: 1.65;
}

.sh-hero-meta {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 26px;
    letter-spacing: 0.04em;
}

.sh-hero-ctas {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 38px;
}

/* ── Search ─────────────────────────────────────────────────── */
.sh-hero-search { width: 100%; max-width: 480px; }

.sh-hero-search form {
    display: flex;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 100px;
    overflow: hidden;
    backdrop-filter: blur(14px);
    transition: border-color 0.2s, background 0.2s;
}
.sh-hero-search form:focus-within {
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.11);
}
.sh-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 14px 20px;
    color: #fff;
    font-size: 0.92rem;
}
.sh-search-input::placeholder { color: rgba(255,255,255,0.38); }
.sh-search-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.55);
    padding: 0 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}
.sh-search-btn:hover { color: #fff; }

/* ── Buttons ────────────────────────────────────────────────── */
.sh-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: 100px;
    font-size: 0.87rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: none;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.22s cubic-bezier(.22,.68,0,1.2);
    line-height: 1;
}
.sh-btn--primary {
    background: var(--main-color);
    color: #fff !important;
    box-shadow: 0 6px 22px rgba(124,58,237,0.38);
}
.sh-btn--primary:hover {
    filter: brightness(1.12);
    box-shadow: 0 10px 32px rgba(124,58,237,0.52);
    color: #fff !important;
}
.sh-btn--play {
    background: #fff;
    color: #000 !important;
    box-shadow: 0 6px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.15);
    font-weight: 800;
}
.sh-btn--play:hover {
    background: #f5f5f5;
    color: #000 !important;
    transform: scale(1.04);
    box-shadow: 0 8px 36px rgba(0,0,0,0.65);
}
.sh-btn--ghost {
    background: rgba(255,255,255,0.09);
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.18);
}
.sh-btn--ghost:hover {
    background: rgba(255,255,255,0.16);
    color: #fff !important;
}
.sh-btn--outline {
    background: rgba(255,255,255,0.08);
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.55);
    backdrop-filter: blur(6px);
}
.sh-btn--outline:hover {
    background: rgba(255,255,255,0.16);
    color: #fff !important;
    border-color: rgba(255,255,255,0.8);
}

/* ── Main Content wrapper ───────────────────────────────────── */
.sh-main {
    background: #0d0d0f;
    padding: 16px 0 88px;
}

/* ── Sections ───────────────────────────────────────────────── */
.sh-section {
    padding: 0 28px;
    max-width: 1480px;
    margin: 0 auto 44px;
    width: 100%;
    box-sizing: border-box;
}
.sh-section-head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
}
.sh-section-title {
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #fff;
    margin: 0;
    white-space: nowrap;
}
.sh-section-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(255,255,255,0.11), transparent);
}
.sh-view-all {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #8a8a96;
    opacity: 0.9;
    white-space: nowrap;
    text-decoration: none !important;
    transition: opacity 0.18s;
}
.sh-view-all:hover { opacity: 1; color: #8a8a96 !important; }

/* ── Scroll rows (mobile: flex; desktop: grid) ──────────────── */
.sh-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}
.sh-scroll::-webkit-scrollbar { display: none; }

@media (min-width: 760px) {
    .sh-scroll { overflow-x: visible; }
    .sh-scroll--videos  { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 20px; }
    .sh-scroll--tracks  { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 24px; }
    .sh-scroll--artists { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 19px; }
}

/* ── Design tokens ───────────────────────────────────────────
   Hover:   translateY(-5px) scale(1.015)  — all square cards
   Shadow:  0 20px 56px rgba(0,0,0,0.75), 0 0 0 1px rgba(124,58,237,0.28)
   Radius:  12px square cards  |  16px featured/label  |  50% avatar
   Glow:    border-color rgba(124,58,237,0.5) + box-shadow ring
   ───────────────────────────────────────────────────────────── */

/* ── Cards ──────────────────────────────────────────────────── */
.sh-card {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 172px;
    cursor: pointer;
    transition: transform 0.28s cubic-bezier(.22,.68,0,1.2);
}
.sh-card--video { width: 290px; }
.sh-card:hover { transform: translateY(-5px) scale(1.015); }

@media (min-width: 760px) {
    .sh-card, .sh-card--video { width: auto; }
}

.sh-card-thumb {
    position: relative;
    border-radius: 13px;
    overflow: hidden;
    aspect-ratio: 1 / 1.08;
    background: #1a1a1e;
    border: 1px solid rgba(255,255,255,0.06);
    transition: border-color 0.28s, box-shadow 0.28s;
}
.sh-card-thumb--video { aspect-ratio: 16 / 9; }
.sh-card:hover .sh-card-thumb {
    border-color: rgba(124,58,237,0.5);
    box-shadow: 0 20px 56px rgba(0,0,0,0.75), 0 0 0 1px rgba(124,58,237,0.28);
}

/* Shimmer skeleton — plays while image loads */
.sh-card-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #1a1a1e 0%, #252530 42%, #1e1e28 58%, #1a1a1e 100%);
    background-size: 600px 100%;
    animation: sh-shimmer 1.5s ease-in-out infinite;
    z-index: 0;
}

/* Gradient overlay — always on, improves text legibility */
.sh-card-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.3) 32%, transparent 58%);
    z-index: 2;
    pointer-events: none;
    opacity: 0.72;
    transition: opacity 0.28s;
}
.sh-card:hover .sh-card-thumb::after { opacity: 0.5; }

.sh-card-thumb img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1;
    transform: none;
    transition: transform 0.45s cubic-bezier(.22,.68,0,1.2);
}
.sh-card:hover .sh-card-thumb img { transform: scale(1.03); }

.sh-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.22s;
    z-index: 3;
}
.sh-card:hover .sh-card-overlay { opacity: 1; }

.sh-card-play {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.72);
    transition: transform 0.22s cubic-bezier(.22,.68,0,1.2);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.sh-card-play svg { margin-left: 2px; }
.sh-card:hover /* Album badge shown on Fresh Drops album cards */
.sh-card-album-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(124,58,237,.82);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s;
}
.sh-card:hover .sh-card-album-badge { opacity: 1; }

.sh-card-play {transform: scale(1); }

.sh-video-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0,0,0,0.68);
    color: rgba(255,255,255,0.78);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    backdrop-filter: blur(4px);
}

.sh-card-info { flex: 1; padding: 10px 2px 0; }
.sh-card-title {
    font-size: 0.91rem;
    font-weight: 600;
    color: #f0f0f4;
    margin: 0 0 5px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.sh-card-artist {
    font-size: 0.75rem;
    color: #8a8aa8;
    margin: 0;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Artist cards ───────────────────────────────────────────── */
.sh-artist-card {
    flex-shrink: 0;
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none !important;
    transition: transform 0.28s cubic-bezier(.22,.68,0,1.2);
}
.sh-artist-card:hover { transform: translateY(-5px) scale(1.03); }

@media (min-width: 760px) { .sh-artist-card { width: auto; } }

.sh-artist-avatar {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    overflow: hidden;
    background: #1a1a1e;
    border: 2px solid rgba(124,58,237,0.22);
    margin-bottom: 12px;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.28s cubic-bezier(.22,.68,0,1.2);
}
.sh-artist-card:hover .sh-artist-avatar {
    border-color: var(--main-color);
    box-shadow: 0 0 0 3px var(--main-color), 0 0 28px rgba(124,58,237,0.45), 0 16px 48px rgba(0,0,0,0.65);
    transform: scale(1.04);
}
.sh-artist-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1;
    transform: none;
}

.sh-artist-name {
    font-size: 0.87rem;
    font-weight: 700;
    color: #f0f0f4;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* ── Artist follower count (card + artists page) ─────────────── */
.sh-artist-followers {
    font-size: 0.72rem;
    color: rgba(200,200,220,0.5);
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* ── Artists page ────────────────────────────────────────────── */
.sd-artists-page {
    padding: 72px 28px 120px;
    max-width: 1480px;
    margin: 0 auto;
    box-sizing: border-box;
}
.sd-artists-header {
    margin-bottom: 36px;
}
.sd-artists-title {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}
.sd-artists-sub {
    font-size: 0.9rem;
    color: rgba(200,200,220,0.6);
    margin: 0;
}
.sd-artists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 20px 16px;
    width: 100%;
}
.sd-artists-more {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* ── Track list ─────────────────────────────────────────────── */
.sh-track-list { display: flex; flex-direction: column; gap: 2px; }

.sh-track {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.18s;
}
.sh-track:hover { background: rgba(255,255,255,0.055); }

.sh-track-num {
    font-size: 0.78rem;
    font-weight: 700;
    color: #8a8a96;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}
.sh-track-art {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #1a1a1e;
}
.sh-track-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sh-track-play-icon {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity 0.18s;
}
.sh-track:hover .sh-track-play-icon { opacity: 1; }

.sh-track-info { flex: 1; min-width: 0; }
.sh-track-title {
    font-size: 0.86rem;
    font-weight: 600;
    color: #e8e8ec;
    margin: 0 0 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sh-track-artist {
    font-size: 0.73rem;
    color: #8a8a96;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sh-track-dur {
    font-size: 0.73rem;
    color: #8a8a96;
    flex-shrink: 0;
}

/* ── Creator CTA ────────────────────────────────────────────── */
.sh-creator {
    background: linear-gradient(135deg, rgba(124,58,237,0.12) 0%, transparent 65%);
    border-top: 1px solid rgba(255,255,255,0.055);
    margin-top: 16px;
}
.sh-creator-inner {
    max-width: 660px;
    margin: 0 auto;
    padding: 76px 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.sh-creator-title {
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0;
    line-height: 1.1;
}
.sh-creator-sub {
    font-size: 1rem;
    color: rgba(255,255,255,0.58);
    margin: 0 0 10px;
    line-height: 1.65;
}
.sh-creator-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ── Mood / Category Chips ──────────────────────────────────── */
.sh-chips-bar {
    background: #0d0d0f;
    padding: 20px 0 18px;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sh-chips-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        #0d0d0f 0%,
        transparent 6%,
        transparent 94%,
        #0d0d0f 100%
    );
    pointer-events: none;
    z-index: 1;
}
.sh-chips-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px 48px;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 2;
}
.sh-chips-track::-webkit-scrollbar { display: none; }

.sh-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(255,255,255,0.68);
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.09);
    text-decoration: none !important;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.22s, border-color 0.22s, color 0.22s, box-shadow 0.22s, transform 0.22s cubic-bezier(.22,.68,0,1.2);
}
.sh-chip:hover {
    background: rgba(124,58,237,0.18);
    border-color: rgba(124,58,237,0.4);
    color: #fff !important;
    box-shadow: 0 0 20px rgba(124,58,237,0.2);
    transform: translateY(-1px);
}
.sh-chip--active,
.sh-chip.active {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff !important;
    box-shadow: 0 4px 22px rgba(124,58,237,0.58);
}

/* "For You" chip — subtle heart accent before activation */
.sh-chip--foryou {
    border-color: rgba(124,58,237,0.22);
}
.sh-chip--foryou:not(.sh-chip--active):hover {
    border-color: rgba(124,58,237,0.5);
}

/* Feed chips bar used on standard-layout pages (.ma_pc_inner) */
.ma_pc_inner > .si-feed-chips.sh-chips-bar {
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 0;
    margin-bottom: 0;
}

/* ── Section labels: eyebrow + larger title ─────────────────── */
.sh-section-labels {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
.sh-section-eyebrow {
    font-size: 0.57rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--main-color);
    opacity: 0.9;
    line-height: 1;
}
.sh-section-labels .sh-section-title {
    font-size: 0.9rem;
    text-transform: none;
    letter-spacing: -0.005em;
}

/* ── Videos section: cinematic emphasis ─────────────────────── */
.sh-section--videos {
    padding-top: 28px;
    padding-bottom: 28px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(124,58,237,0.11) 0%, rgba(124,58,237,0.04) 45%, transparent 70%);
    border-top: 2px solid rgba(124,58,237,0.28);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sh-section--videos .sh-section-labels .sh-section-title {
    font-size: 1.05rem;
}
.sh-section--videos .sh-section-rule {
    background: linear-gradient(to right, rgba(124,58,237,0.22), transparent);
}
.sh-card--video .sh-card-play {
    width: 60px;
    height: 60px;
}
.sh-card--video .sh-card-play svg {
    width: 26px;
    height: 26px;
}

/* ── Mood section: atmospheric accent ───────────────────────── */
.sh-section--mood {
    padding-top: 36px;
    padding-bottom: 36px;
    background: linear-gradient(to right, rgba(88,28,135,0.12) 0%, rgba(88,28,135,0.04) 55%, transparent 100%);
    border-top: 1px solid rgba(124,58,237,0.07);
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .sh-hero { min-height: 86vh; }
    .sh-hero-body { padding: 0 18px 50px; }
    .sh-hero-name { font-size: 2.5rem; }
    .sh-hero-heading { font-size: 2.2rem; }

    .sh-nav-inner { padding: 16px 20px; }
    .sh-nav-brand img { max-height: 30px; }

    .sh-main { padding-top: 8px; }

    .sh-section { padding: 0 18px; margin-bottom: 36px; }
    .sh-section--videos { padding-top: 24px; padding-bottom: 24px; }
    .sh-section--videos .sh-section-labels .sh-section-title { font-size: 0.9rem; }
    .sh-section--mood { padding-top: 24px; padding-bottom: 24px; }
    .sh-section-title { font-size: 0.72rem; }
    .sh-section-labels .sh-section-title { font-size: 0.82rem; }

    .sh-chips-bar::before { display: none; }
    .sh-chips-track { padding: 4px 18px; gap: 8px; }
    .sh-chip { padding: 8px 15px; font-size: 0.74rem; min-height: 44px; }

    .sh-creator-inner { padding: 56px 24px; }

    .sh-track { padding: 10px 0; }
    .sh-track-num { display: none; }
}

/* ============================================================
   Discover Page — Cinematic Redesign (sd-* prefix)
   ============================================================ */

/* ── Discover wrapper resets ───────────────────────────────── */
.sd-discover {
    background: #0d0d0f;
    padding-top: 72px; /* clear 56px fixed header + breathing room */
}

/* ── Discover Hero (in-app, no floating nav) ───────────────── */
.sd-hero {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: linear-gradient(135deg, #1a0533 0%, #0d0d1a 60%, #0d0d0f 100%);
    background-size: cover;
    background-position: center top;
}

.sd-hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.35) 30%,
        rgba(0,0,0,0.72) 62%,
        rgba(0,0,0,0.96) 84%,
        #0d0d0f 100%
    );
}

.sd-hero-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 0 28px 28px;
    max-width: 720px;
    width: 100%;
}

.sd-hero-eyebrow {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--main-color);
    background: rgba(124,58,237,0.13);
    border: 1px solid rgba(124,58,237,0.26);
    padding: 4px 14px;
    border-radius: 100px;
    margin-bottom: 8px;
    display: inline-block;
}

.sd-hero-name {
    font-size: clamp(2.8rem, 7vw, 6rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #fff;
    margin: 0 0 4px;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 8px 40px rgba(0,0,0,0.8), 0 0 80px rgba(0,0,0,0.5);
}

.sd-hero-sub {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.55);
    margin: 4px 0 16px;
    max-width: 480px;
    line-height: 1.65;
    display: block;
}

.sd-hero-ctas {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Discover main: no extra top pad needed ─────────────────── */
.sd-main {
    background: #0d0d0f;
    padding: 20px 0 120px;
}

/* ── Playlist scroll cards ──────────────────────────────────── */
.sh-playlist-card {
    flex-shrink: 0;
    width: 172px;
    cursor: pointer;
    text-decoration: none !important;
    color: inherit !important;
    transition: transform 0.28s cubic-bezier(.22,.68,0,1.2);
    display: block;
}
.sh-playlist-card:hover { transform: translateY(-5px) scale(1.015); }

.sh-playlist-thumb {
    position: relative;
    border-radius: 13px;
    overflow: hidden;
    aspect-ratio: 1;
    background: #1a1a1e;
    border: 1px solid rgba(255,255,255,0.06);
    transition: border-color 0.28s, box-shadow 0.28s;
}
.sh-playlist-card:hover .sh-playlist-thumb {
    border-color: rgba(124,58,237,0.5);
    box-shadow: 0 20px 56px rgba(0,0,0,0.75), 0 0 0 1px rgba(124,58,237,0.28);
}
.sh-playlist-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #1a1a1e 0%, #252530 42%, #1e1e28 58%, #1a1a1e 100%);
    background-size: 600px 100%;
    animation: sh-shimmer 1.5s ease-in-out infinite;
    z-index: 0;
}
.sh-playlist-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.24) 30%, transparent 55%);
    z-index: 2;
    pointer-events: none;
    opacity: 0.68;
    transition: opacity 0.28s;
}
.sh-playlist-card:hover .sh-playlist-thumb::after { opacity: 0.45; }
.sh-playlist-thumb img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1;
    transform: none;
    transition: transform 0.45s cubic-bezier(.22,.68,0,1.2);
}
.sh-playlist-card:hover .sh-playlist-thumb img { transform: scale(1.03); }
.sh-playlist-play {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.22s;
    z-index: 3;
}
.sh-playlist-card:hover .sh-playlist-play { opacity: 1; }
.sh-playlist-play-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.72);
    transition: transform 0.22s cubic-bezier(.22,.68,0,1.2);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.sh-playlist-play-btn svg { margin-left: 2px; }
.sh-playlist-card:hover .sh-playlist-play-btn { transform: scale(1); }
.sh-playlist-info { padding: 12px 2px 0; }
.sh-playlist-name {
    font-size: 0.91rem;
    font-weight: 700;
    color: #f0f0f4;
    margin: 0 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sh-playlist-meta {
    font-size: 0.75rem;
    color: #72728a;
    margin: 0;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 760px) {
    .sh-playlist-card { width: auto; }
    .sh-scroll--playlists { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 24px; }
}

/* ── Recommended two-column split ──────────────────────────── */
.sd-split {
    padding: 0 28px;
    max-width: 1480px;
    margin: 0 auto 48px;
    width: 100%;
    box-sizing: border-box;
}
@media (min-width: 960px) {
    .sd-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .sd-split .sh-section {
        margin-bottom: 0;
        padding: 0;
    }
    .sd-split > .sh-section:only-child {
        grid-column: 1 / -1;
    }
}
@media (max-width: 760px) {
    .sd-split { padding: 0 18px; margin-bottom: 36px; }
    .sd-split .sh-section { padding: 0; margin-bottom: 32px; }
}

/* ── Fresh Drops: wrapping card grid ────────────────────────────── */
.sd-drops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}
.sd-drops-grid .sh-card { width: auto; }
@media (min-width: 760px) {
    .sd-drops-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 16px;
    }
}

/* ── Recommended: compact numbered track list ───────────────────── */
.sd-track-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
@media (min-width: 960px) {
    .sd-track-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px 12px;
    }
}
.sd-track-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.18s;
    -webkit-tap-highlight-color: transparent;
}
.sd-track-row:hover { background: rgba(255,255,255,0.05); }
.sd-track-num {
    width: 16px;
    text-align: right;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.2);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.sd-track-thumb {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #1a1a1e;
}
.sd-track-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sd-track-play-ico {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s;
    color: #fff;
}
.sd-track-row:hover .sd-track-play-ico { opacity: 1; }
.sd-track-meta { flex: 1; min-width: 0; }
.sd-track-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e8e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 0 2px;
}
.sd-track-artist {
    font-size: 0.7rem;
    color: #7c7c9e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    transition: color 0.18s;
}
.sd-track-row:hover .sd-track-artist { color: #8a8aa8; }

/* ── Best-selling card (store) ──────────────────────────────── */
.sh-scroll--best { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.sh-scroll--best::-webkit-scrollbar { display: none; }
@media (min-width: 760px) {
    .sh-scroll--best { overflow-x: visible; display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 24px; }
}

/* ── Stories bar (keep existing look, just reset top margin) ── */
.sd-stories { padding: 0; border-bottom: 1px solid rgba(255,255,255,0.05); margin-bottom: 20px; }
.sd-stories .user-status-home { margin: 0; }

/* ════════════════════════════════════════════════════════════════
   DISCOVER HERO V2
   ════════════════════════════════════════════════════════════════ */

/* ── Outer shell ──────────────────────────────────────────────── */
.discover-hero {
    position: relative;
    min-height: 200px;
    padding: 14px 36px 16px;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    background-color: #0e0818;
    background-size: cover;
    background-position: center top;
    overflow: hidden;
    margin: 0 0 20px;
    /* ambient purple glow on the container itself */
    box-shadow: 0 0 0 1px rgba(124,58,237,0.12),
                inset 0 1px 0 rgba(124,58,237,0.1);
}

/* ── Multi-layer veil: image stays visible left, fades right ──── */
.discover-hero-veil {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        /* purple bloom top-left */
        radial-gradient(ellipse 55% 80% at 0% 50%, rgba(124,58,237,0.28) 0%, transparent 70%),
        /* strong dark fade across the whole card */
        linear-gradient(100deg, rgba(14,8,24,0.72) 0%, rgba(14,8,24,0.88) 42%, rgba(8,4,16,0.97) 100%);
}

/* ── Left column ──────────────────────────────────────────────── */
.discover-hero-left {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

/* ── Right column ─────────────────────────────────────────────── */
.discover-hero-right {
    width: 300px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

/* ── Pill ─────────────────────────────────────────────────────── */
.discover-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: #c4b5fd;
    background: rgba(124,58,237,0.18);
    border: 1px solid rgba(124,58,237,0.38);
    padding: 4px 12px 4px 10px;
    border-radius: 100px;
    margin-bottom: 7px;
    /* tiny pulse on the dot */
}
.discover-hero-eyebrow::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #7c3aed;
    box-shadow: 0 0 6px #7c3aed;
    animation: dh-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes dh-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.7); }
}

/* ── Title ────────────────────────────────────────────────────── */
.discover-hero-title {
    font-size: clamp(1.9rem, 3.8vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1;
    text-shadow: 0 2px 20px rgba(124,58,237,0.35);
}

/* ── Subtitle ─────────────────────────────────────────────────── */
.discover-hero-sub {
    font-size: 1rem;
    color: rgba(255,255,255,0.5);
    margin: 0 0 13px;
    max-width: 400px;
    line-height: 1.6;
}

/* ── CTA row ──────────────────────────────────────────────────── */
.discover-hero-ctas {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Artist card (now an <a> tag) ─────────────────────────────── */
.discover-hero-artist-card {
    display: block;
    text-decoration: none !important;
    color: inherit !important;
    background: rgba(14,8,24,0.65);
    border: 1px solid rgba(124,58,237,0.28);
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(124,58,237,0.18),
        0 0 24px rgba(124,58,237,0.25),
        0 10px 32px rgba(0,0,0,0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    will-change: transform;
    transition: transform 0.22s cubic-bezier(.22,.68,0,1.2),
                box-shadow 0.22s ease,
                border-color 0.22s ease;
}
.discover-hero-artist-card:hover {
    transform: translateY(-5px) scale(1.015);
    box-shadow:
        0 0 0 1px rgba(124,58,237,0.35),
        0 0 42px rgba(124,58,237,0.3),
        0 16px 44px rgba(0,0,0,0.65);
    border-color: rgba(124,58,237,0.55);
}

/* ── Cover image — 21/9 keeps the card wide without driving hero height up ── */
.discover-hero-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 21/9;
    overflow: hidden;
}
.discover-hero-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.discover-hero-artist-card:hover .discover-hero-cover img {
    transform: scale(1.04);
}
.discover-hero-cover-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0);
    transition: background 0.22s ease;
}
.discover-hero-artist-card:hover .discover-hero-cover-overlay {
    background: rgba(0,0,0,0.35);
}
.discover-hero-play-ico {
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(.22,.68,0,1.2);
    color: #fff;
    drop-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.discover-hero-artist-card:hover .discover-hero-play-ico {
    opacity: 1;
    transform: scale(1);
}

/* ── Artist info footer ───────────────────────────────────────── */
.discover-hero-artist-info {
    padding: 12px 14px 14px;
}
.discover-hero-artist-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.discover-hero-artist-plays {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.42);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
}
.discover-hero-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.discover-hero-tag {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #c4b5fd;
    background: rgba(124,58,237,0.16);
    border: 1px solid rgba(124,58,237,0.24);
    padding: 2px 8px;
    border-radius: 100px;
}
.discover-hero-tag--live {
    color: #f87171;
    background: rgba(239,68,68,0.14);
    border-color: rgba(239,68,68,0.28);
    display: inline-flex;
    align-items: center;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .discover-hero {
        flex-direction: column;
        align-items: stretch;
        min-height: auto;
        padding: 22px 18px 24px;
        border-radius: 14px;
        gap: 18px;
        margin: 0 0 16px;
    }
    .discover-hero-left { max-width: 100%; }
    .discover-hero-right { width: 100%; }
    .discover-hero-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
    .discover-hero-sub { max-width: 100%; }
    /* Drop blur compositing cost on mobile GPUs */
    .discover-hero-artist-card {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .discover-hero-eyebrow::before { animation: none; }
}

/* ── Mobile overrides ───────────────────────────────────────── */
@media (max-width: 760px) {
    .sd-hero { min-height: 42vh; }
    .sd-hero-body { padding: 0 18px 24px; }
    .sd-hero-name { font-size: 2.2rem; }
    .sd-hero-ctas { flex-wrap: wrap; gap: 10px; }
    .sd-main { padding-top: 8px; padding-bottom: 100px; }
    .sd-split { display: block; padding: 0 18px; }
    .sd-split .sh-section { margin-bottom: 32px; }
    .sd-discover { overflow-x: hidden; }
}

/* ================================================================
   DISCOVER PHASE 2 — HIERARCHY TRANSFORMATION
   ================================================================ */

/* ── Section: tinted atmospheric accent ────────────────────────── */
.sh-section--tinted {
    background: linear-gradient(
        to right,
        rgba(88,28,135,0.09) 0%,
        rgba(88,28,135,0.04) 55%,
        transparent 100%
    );
    border-top: 1px solid rgba(124,58,237,0.07);
    border-bottom: 1px solid rgba(124,58,237,0.07);
    padding-top: 37px;
    padding-bottom: 37px;
}

/* ── Section: subtle alternate background ──────────────────────── */
.sh-section--alt {
    background: rgba(255,255,255,0.018);
    padding-top: 37px;
    padding-bottom: 37px;
}

/* ── sh-scroll--fresh: 3-col grid, bigger cards ────────────────── */
.sh-scroll--fresh {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.sh-scroll--fresh::-webkit-scrollbar { display: none; }
.sh-scroll--fresh .sh-card { width: 200px; }
@media (min-width: 760px) {
    .sh-scroll--fresh {
        overflow-x: visible;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 28px;
    }
    .sh-scroll--fresh .sh-card { width: auto; }
}

/* ── Rank badge on card artwork ────────────────────────────────── */
.sh-card-rank {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 4;
    min-width: 28px;
    height: 28px;
    background: rgba(0,0,0,0.74);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.02em;
    padding: 0 6px;
    border: 1px solid rgba(255,255,255,0.1);
}
/* Top-3 ranks get accent colour */
.sh-card:nth-child(1) .sh-card-rank { background: rgba(234,179,8,0.82); color: #000; }
.sh-card:nth-child(2) .sh-card-rank { background: rgba(156,163,175,0.82); color: #000; }
.sh-card:nth-child(3) .sh-card-rank { background: rgba(180,83,9,0.82);   color: #fff; }

/* Continue Listening */
.si-continue-listening {border: 1px solid rgba(139,92,246,.16);border-radius: 16px;padding: 18px;background: linear-gradient(135deg, rgba(139,92,246,.11), rgba(255,255,255,.025));box-shadow: 0 18px 45px rgba(0,0,0,.14);}
.si-continue-grid {display: grid;grid-template-columns: repeat(4, minmax(0,1fr));gap: 12px;}
.si-continue-card {display: grid;grid-template-columns: 74px minmax(0,1fr);gap: 12px;align-items: center;min-width: 0;padding: 9px;border: 1px solid rgba(255,255,255,.07);border-radius: 12px;background: rgba(0,0,0,.18);transition: transform .18s ease,border-color .18s ease,background .18s ease;}
.si-continue-card:hover {transform: translateY(-2px);border-color: rgba(139,92,246,.35);background: rgba(139,92,246,.10);}
.si-continue-thumb {position: relative;display: block;width: 74px;aspect-ratio: 1;border: 0;border-radius: 10px;overflow: hidden;padding: 0;background: rgba(255,255,255,.05);cursor: pointer;}
.si-continue-thumb img,.si-continue-thumb video {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;object-position: center;display: block;}
.si-continue-thumb::after {content: "";position: absolute;inset: 0;background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45));}
.si-continue-play {position: absolute;right: 7px;bottom: 7px;z-index: 2;display: inline-flex;align-items: center;justify-content: center;width: 30px;height: 30px;border-radius: 50%;background: var(--main-color,#7c3aed);color: #fff;box-shadow: 0 10px 22px rgba(124,58,237,.38);}
.si-continue-play svg {margin-left: 1px;}
.si-continue-meta {display: flex;flex-direction: column;min-width: 0;text-decoration: none !important;}
.si-continue-kicker {margin-bottom: 4px;color: #a78bfa;font-size: 10px;font-weight: 850;text-transform: uppercase;letter-spacing: .04em;}
.si-continue-meta strong {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #fff;font-size: 13px;font-weight: 850;line-height: 1.25;}
.si-continue-meta small {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-top: 3px;color: rgba(255,255,255,.52);font-size: 12px;font-weight: 650;}
@media (max-width: 1199px) {.si-continue-grid {grid-template-columns: repeat(2, minmax(0,1fr));}}
@media (max-width: 575px) {.si-continue-listening {padding: 14px;}.si-continue-grid {grid-template-columns: 1fr;}.si-continue-card {grid-template-columns: 64px minmax(0,1fr);}.si-continue-thumb {width: 64px;}}

/* New From Artists You Follow */
.si-followed-new {border: 1px solid rgba(139,92,246,.14);border-radius: 16px;padding: 18px;background: rgba(255,255,255,.025);}
.si-followed-new-sub {margin: 4px 0 0;color: rgba(255,255,255,.52);font-size: 13px;font-weight: 650;}
.si-followed-new-rail {display: grid;grid-template-columns: repeat(5, minmax(0,1fr));gap: 14px;}
.si-followed-card {min-width: 0;border: 1px solid rgba(255,255,255,.07);border-radius: 13px;background: rgba(0,0,0,.18);overflow: hidden;cursor: pointer;transition: transform .18s ease,border-color .18s ease,background .18s ease;}
.si-followed-card:hover {transform: translateY(-3px);border-color: rgba(139,92,246,.38);background: rgba(139,92,246,.08);}
.si-followed-thumb {position: relative;display: block;width: 100%;aspect-ratio: 1;border: 0;padding: 0;background: rgba(255,255,255,.05);cursor: pointer;overflow: hidden;}
.si-followed-thumb img,.si-followed-thumb video {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;object-position: center;display: block;}
.si-followed-thumb::after {content: "";position: absolute;inset: 0;background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.48));}
.si-followed-play {position: absolute;right: 10px;bottom: 10px;z-index: 2;display: inline-flex;align-items: center;justify-content: center;width: 34px;height: 34px;border-radius: 50%;background: var(--main-color,#7c3aed);color: #fff;box-shadow: 0 10px 24px rgba(124,58,237,.4);}
.si-followed-play svg {margin-left: 1px;}
.si-followed-meta {display: flex;flex-direction: column;min-width: 0;padding: 10px 11px 12px;}
.si-followed-artist-row {display: flex;align-items: center;justify-content: space-between;gap: 8px;min-height: 24px;margin-bottom: 7px;}
.si-followed-artist-row img {width: 24px;height: 24px;border-radius: 50%;object-fit: cover;border: 1px solid rgba(255,255,255,.12);}
.si-followed-artist-row span {margin-left: auto;color: #a78bfa;font-size: 11px;font-weight: 850;white-space: nowrap;}
.si-followed-meta strong {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #fff;font-size: 13px;font-weight: 900;line-height: 1.25;}
.si-followed-meta small {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-top: 4px;color: rgba(255,255,255,.55);font-size: 12px;font-weight: 700;}
.si-followed-empty {display: flex;align-items: center;gap: 12px;padding: 16px;border: 1px dashed rgba(139,92,246,.24);border-radius: 12px;background: rgba(0,0,0,.16);}
.si-followed-empty-icon {display: inline-flex;align-items: center;justify-content: center;width: 42px;height: 42px;border-radius: 50%;background: rgba(139,92,246,.16);color: #a78bfa;}
.si-followed-empty p {margin: 0;flex: 1;color: rgba(255,255,255,.72);font-size: 14px;font-weight: 800;}
.si-followed-empty .btn {border-radius: 999px;font-weight: 850;}
@media (max-width: 1199px) {.si-followed-new-rail {grid-template-columns: repeat(4, minmax(0,1fr));}}
@media (max-width: 767px) {.si-followed-new {padding: 14px;}.si-followed-new-rail {display: flex;gap: 12px;overflow-x: auto;scroll-snap-type: x mandatory;scrollbar-width: none;margin: 0 -14px;padding: 0 14px 4px;}.si-followed-new-rail::-webkit-scrollbar {display: none;}.si-followed-card {flex: 0 0 162px;scroll-snap-align: start;}.si-followed-empty {align-items: flex-start;flex-direction: column;}.si-followed-empty .btn {width: 100%;}}

/* Daily Mixes */
.si-daily-mixes {border: 1px solid rgba(139,92,246,.16);border-radius: 16px;padding: 18px;background: linear-gradient(135deg, rgba(139,92,246,.07), rgba(255,255,255,.025));}
.si-daily-mixes-sub {margin: 4px 0 0;color: rgba(255,255,255,.54);font-size: 13px;font-weight: 650;}
.si-daily-mix-rail {display: grid;grid-template-columns: repeat(4, minmax(0,1fr));gap: 15px;}
.si-daily-mix-card {display: flex;flex-direction: column;min-width: 0;border: 1px solid rgba(255,255,255,.08);border-radius: 14px;padding: 0;background: rgba(0,0,0,.2);color: inherit;text-align: left;overflow: hidden;cursor: pointer;transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;}
.si-daily-mix-card:hover {transform: translateY(-3px);border-color: rgba(139,92,246,.45);background: rgba(139,92,246,.09);box-shadow: 0 18px 45px rgba(0,0,0,.22),0 0 28px rgba(124,58,237,.12);}
.si-daily-mix-art {position: relative;display: block;width: 100%;aspect-ratio: 1;overflow: hidden;background: #0a0a0c;}
.si-daily-mix-art img,.si-daily-mix-art video {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;object-position: center;display: block;transition: transform .28s ease;}
.si-daily-mix-card:hover .si-daily-mix-art img,.si-daily-mix-card:hover .si-daily-mix-art video {transform: scale(1.035);}
.si-daily-mix-art::after {content: "";position: absolute;inset: 0;background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.62));}
.si-daily-mix-play {position: absolute;right: 13px;bottom: 13px;z-index: 2;display: inline-flex;align-items: center;justify-content: center;width: 44px;height: 44px;border-radius: 50%;background: var(--main-color,#7c3aed);color: #fff;box-shadow: 0 14px 30px rgba(124,58,237,.44);}
.si-daily-mix-play svg {margin-left: 2px;}
.si-daily-mix-info {display: flex;flex-direction: column;gap: 5px;min-width: 0;padding: 13px 13px 14px;}
.si-daily-mix-info strong {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #fff;font-size: 15px;font-weight: 950;line-height: 1.2;}
.si-daily-mix-info small {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: rgba(255,255,255,.56);font-size: 12px;font-weight: 700;line-height: 1.25;}
.si-daily-mix-info em {margin-top: 2px;color: #a78bfa;font-size: 11px;font-style: normal;font-weight: 900;text-transform: uppercase;letter-spacing: .04em;}
@media (max-width: 991px) {.si-daily-mix-rail {grid-template-columns: repeat(2, minmax(0,1fr));}}
@media (max-width: 767px) {.si-daily-mixes {padding: 14px;}.si-daily-mix-rail {display: flex;gap: 12px;overflow-x: auto;scroll-snap-type: x mandatory;scrollbar-width: none;margin: 0 -14px;padding: 0 14px 4px;}.si-daily-mix-rail::-webkit-scrollbar {display: none;}.si-daily-mix-card {flex: 0 0 210px;scroll-snap-align: start;}.si-daily-mix-info strong {font-size: 14px;}}

/* Because You Played */
.si-because-played {border: 1px solid rgba(139,92,246,.14);border-radius: 16px;padding: 18px;background: rgba(255,255,255,.022);}
.si-because-played-sub {margin: 4px 0 0;color: rgba(255,255,255,.54);font-size: 13px;font-weight: 650;}
.si-because-rail {display: grid;grid-template-columns: repeat(6, minmax(0,1fr));gap: 14px;}
.si-because-card {min-width: 0;border: 1px solid rgba(255,255,255,.07);border-radius: 13px;background: rgba(0,0,0,.18);overflow: hidden;cursor: pointer;transition: transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;}
.si-because-card:hover {transform: translateY(-3px);border-color: rgba(139,92,246,.38);background: rgba(139,92,246,.08);box-shadow: 0 16px 36px rgba(0,0,0,.2);}
.si-because-thumb {position: relative;display: block;width: 100%;aspect-ratio: 1;border: 0;padding: 0;background: rgba(255,255,255,.05);cursor: pointer;overflow: hidden;}
.si-because-thumb img,.si-because-thumb video {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;object-position: center;display: block;}
.si-because-thumb::after {content: "";position: absolute;inset: 0;background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.5));}
.si-because-play {position: absolute;right: 9px;bottom: 9px;z-index: 2;display: inline-flex;align-items: center;justify-content: center;width: 34px;height: 34px;border-radius: 50%;background: var(--main-color,#7c3aed);color: #fff;box-shadow: 0 10px 24px rgba(124,58,237,.4);}
.si-because-play svg {margin-left: 1px;}
.si-because-meta {display: flex;flex-direction: column;min-width: 0;padding: 10px 11px 12px;}
.si-because-meta strong {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #fff;font-size: 13px;font-weight: 900;line-height: 1.25;}
.si-because-meta small {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-top: 4px;color: rgba(255,255,255,.55);font-size: 12px;font-weight: 700;}
.si-because-empty {display: flex;align-items: center;gap: 12px;padding: 16px;border: 1px dashed rgba(139,92,246,.24);border-radius: 12px;background: rgba(0,0,0,.16);}
.si-because-empty-icon {display: inline-flex;align-items: center;justify-content: center;width: 42px;height: 42px;border-radius: 50%;background: rgba(139,92,246,.16);color: #a78bfa;flex: 0 0 auto;}
.si-because-empty div {flex: 1;min-width: 0;}
.si-because-empty strong {display: block;color: #fff;font-size: 14px;font-weight: 900;}
.si-because-empty p {margin: 3px 0 0;color: rgba(255,255,255,.56);font-size: 12px;font-weight: 650;}
.si-because-empty .btn {border-radius: 999px;font-weight: 850;white-space: nowrap;}
@media (max-width: 1199px) {.si-because-rail {grid-template-columns: repeat(4, minmax(0,1fr));}}
@media (max-width: 767px) {.si-because-played {padding: 14px;}.si-because-rail {display: flex;gap: 12px;overflow-x: auto;scroll-snap-type: x mandatory;scrollbar-width: none;margin: 0 -14px;padding: 0 14px 4px;}.si-because-rail::-webkit-scrollbar {display: none;}.si-because-card {flex: 0 0 162px;scroll-snap-align: start;}.si-because-empty {align-items: flex-start;flex-direction: column;}.si-because-empty .btn {width: 100%;}}

/* Artist Fan Club */
.si-fanclub {display: flex;flex-direction: column;gap: 16px;}
.si-fanclub-hero {display: flex;align-items: center;justify-content: space-between;gap: 18px;padding: 20px;border: 1px solid rgba(139,92,246,.22);border-radius: 16px;background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(255,255,255,.035));box-shadow: 0 18px 45px rgba(0,0,0,.16);}
.si-fanclub-eyebrow {display: inline-flex;margin-bottom: 8px;color: #a78bfa;font-size: 11px;font-weight: 900;letter-spacing: .08em;text-transform: uppercase;}
.si-fanclub-hero h2 {margin: 0;color: #fff;font-size: 22px;font-weight: 900;line-height: 1.18;}
.si-fanclub-hero p {max-width: 620px;margin: 8px 0 0;color: rgba(255,255,255,.62);font-size: 13px;line-height: 1.55;}
.si-fanclub-stats {display: flex;flex-wrap: wrap;gap: 8px;margin-top: 13px;}
.si-fanclub-stats span {display: inline-flex;align-items: center;min-height: 27px;padding: 0 10px;border-radius: 999px;background: rgba(255,255,255,.07);color: rgba(255,255,255,.82);font-size: 12px;font-weight: 800;}
.si-fanclub-actions {display: flex;flex-direction: column;gap: 9px;align-items: flex-end;flex: 0 0 auto;}
.si-fanclub-actions .btn {white-space: nowrap;border-radius: 999px;font-weight: 850;}
.si-fanclub-member-pill {display: inline-flex;align-items: center;min-height: 36px;padding: 0 14px;border-radius: 999px;background: rgba(34,197,94,.12);border: 1px solid rgba(34,197,94,.22);color: #86efac;font-size: 13px;font-weight: 900;}
.si-fanclub-follow-cta {box-shadow: 0 10px 22px rgba(124,58,237,.22);}
.si-fanclub-follow-copy {display: inline-flex;align-items: center;min-height: 36px;padding: 0 14px;border-radius: 999px;background: rgba(255,255,255,.07);color: rgba(255,255,255,.74);font-size: 13px;font-weight: 850;}
.si-fanclub-feed-head {display: flex;align-items: end;justify-content: space-between;gap: 12px;margin-top: 2px;padding: 0 2px;}
.si-fanclub-feed-head h3 {margin: 0;color: #fff;font-size: 17px;font-weight: 900;}
.si-fanclub-feed-head p {margin: 0;color: rgba(255,255,255,.48);font-size: 12px;font-weight: 700;}
.si-fanclub-feed .feed_post:first-child {margin-top: 0;}
@media (max-width: 767px) {.si-fanclub-hero {align-items: flex-start;flex-direction: column;padding: 16px;}.si-fanclub-actions {align-items: stretch;width: 100%;}.si-fanclub-actions .btn,.si-fanclub-follow-copy {justify-content: center;width: 100%;}.si-fanclub-feed-head {align-items: flex-start;flex-direction: column;gap: 3px;}}

/* ── Featured Video Section header ────────────────────────────── */
.sd-featured-video-section {
    margin-top: 6px;
    margin-bottom: 24px;
}
.sd-fv-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 28px;
    margin-bottom: 22px;
}
.sd-fv-section-title {
    font-size: clamp(0.9rem, 2vw, 1.2rem) !important;
}

/* ── Featured Video Card ───────────────────────────────────────── */
.sd-featured-video-card {
    display: block;
    position: relative;
    margin: 0 28px;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none !important;
    background: #0a0a0c;
    box-shadow: 0 28px 80px rgba(0,0,0,0.72), 0 0 0 1px rgba(255,255,255,0.05);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.sd-featured-video-card:hover {
    box-shadow: 0 36px 100px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.1);
    transform: translateY(-3px);
}

/* Fixed-height thumb — caps at 280px on desktop, scales fluidly below */
.sd-fv-thumb {
    position: relative;
    width: 100%;
    height: min(40vw, 280px);
    overflow: hidden;
    background: #050507;
}
.sd-fv-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s cubic-bezier(.22,.68,0,1.1);
}
.sd-featured-video-card:hover .sd-fv-thumb img { transform: scale(1.04); }

/* Cinematic gradient overlay */
.sd-fv-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.06) 0%,
        rgba(0,0,0,0.0) 18%,
        rgba(0,0,0,0.0) 42%,
        rgba(0,0,0,0.78) 74%,
        rgba(0,0,0,0.96) 100%
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Large centered play button */
.sd-fv-play-btn {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 2px solid rgba(255,255,255,0.32);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.84);
    transition: transform 0.3s cubic-bezier(.22,.68,0,1.2), background 0.2s;
    margin-bottom: auto;
    margin-top: auto;
    flex-shrink: 0;
}
.sd-fv-play-btn svg { color: #fff; margin-left: 4px; }
.sd-featured-video-card:hover .sd-fv-play-btn {
    transform: scale(1);
    background: rgba(255,255,255,0.2);
}

/* Bottom info bar */
.sd-fv-info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 0 40px 32px;
}
.sd-fv-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    background: var(--main-color);
    padding: 4px 12px 4px 10px;
    border-radius: 4px;
    margin-bottom: 14px;
}
.sd-fv-track-title {
    font-size: clamp(1.2rem, 2.8vw, 2.1rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 8px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.7);
    line-height: 1.08;
    letter-spacing: -0.03em;
}
.sd-fv-artist {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.65);
    margin: 0;
    font-weight: 500;
}

/* ── Creator CTA ───────────────────────────────────────────────── */
.sd-creator-cta {
    margin: 0 28px 64px;
    border-radius: 18px;
    background: linear-gradient(
        135deg,
        rgba(124,58,237,0.16) 0%,
        rgba(139,92,246,0.08) 50%,
        rgba(88,28,135,0.12) 100%
    );
    border: 1px solid rgba(124,58,237,0.16);
    border-top: 1px solid rgba(124,58,237,0.22);
    box-shadow: 0 -1px 0 rgba(124,58,237,0.12) inset;
    padding: 52px 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.sd-creator-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(139,92,246,0.14) 0%, transparent 70%);
    pointer-events: none;
}
.sd-creator-cta-eyebrow {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--main-color);
    background: rgba(124,58,237,0.13);
    border: 1px solid rgba(124,58,237,0.26);
    padding: 4px 14px;
    border-radius: 100px;
    display: inline-block;
    margin-bottom: 18px;
    position: relative;
}
.sd-creator-cta-title {
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 10px;
    letter-spacing: -0.035em;
    line-height: 1.08;
    position: relative;
}
.sd-creator-cta-sub {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.52);
    margin: 0 auto 30px;
    max-width: 480px;
    line-height: 1.65;
    position: relative;
}
.sd-creator-cta-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}

/* ── Mobile: Featured Video ─────────────────────────────────────── */
@media (max-width: 760px) {
    .sd-featured-video-card { margin: 0 18px; border-radius: 12px; }
    .sd-fv-head { padding: 0 18px; }
    .sd-fv-info { padding: 0 20px 22px; }
    .sd-fv-play-btn { width: 60px; height: 60px; }
    .sd-fv-play-btn svg { width: 24px; height: 24px; }
    .sd-fv-thumb { height: 240px; }
    .sd-creator-cta { margin: 0 18px 48px; padding: 36px 22px; }
    .sh-section--tinted,
    .sh-section--alt { padding-top: 24px; padding-bottom: 24px; }
}

/* ================================================================
   ACTIVITY + SOCIAL LAYER — PHASE 1
   ================================================================ */

/* ── Feed Card Wrapper ──────────────────────────────────────────── */
.feed_post.feed-card {
    background: rgba(255,255,255,0.025);
    border-radius: 10px;
    border-bottom: none;
    margin-bottom: 14px;
    padding-bottom: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: box-shadow 0.2s ease, background 0.2s ease;
}
.feed_post.feed-card:hover {
    background: rgba(255,255,255,0.04);
    box-shadow: 0 4px 18px rgba(0,0,0,0.32);
}
.feed_post.feed-card:last-child { border: none; margin-bottom: 0; }

/* ── Avatar ─────────────────────────────────────────────────────── */
.feed-avatar { position: relative; }
.feed-avatar img:not(.pro_packages_icon) {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    border: 2px solid rgba(255,255,255,0.06);
    transition: border-color 0.2s ease;
}
.feed_post.feed-card:hover .feed-avatar img:not(.pro_packages_icon) {
    border-color: var(--main-color);
}

/* ── User Info Block ────────────────────────────────────────────── */
.feed-user-info { flex: 1; min-width: 0; }
.feed-name-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 5px;
}
.feed-artist-link {
    color: #e0e0e0;
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
    transition: color 0.15s ease;
}
.feed-artist-link:hover { color: var(--main-color); text-decoration: none; }
.feed-artist-link svg { width: 16px; height: 16px; vertical-align: middle; margin-top: -2px; }

/* ── Trending Pill ──────────────────────────────────────────────── */
.feed-trending-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #7c3aed 0%, #9f67ff 100%);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 2px 8px 2px 6px;
    border-radius: 20px;
    flex-shrink: 0;
    line-height: 1.6;
}
.feed-trending-pill svg { width: 10px; height: 10px; }

/* ── Activity Meta Row ──────────────────────────────────────────── */
.feed-activity-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 12px;
    color: #888;
    line-height: 1.5;
}
.feed-activity-text { color: #7a7a7a; }
.feed-time {
    color: #5a5a5a;
    font-size: 11px;
    flex-shrink: 0;
}

/* ── Activity Type Badge ────────────────────────────────────────── */
.feed-type-badge {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    flex-shrink: 0;
    line-height: 1.7;
}
.badge-type--upload    { background: rgba(30,180,100,0.14); color: #2ecc85; }
.badge-type--video     { background: rgba(168,85,247,0.14); color: #c084fc; }
.badge-type--album     { background: rgba(59,130,246,0.14); color: #60a5fa; }
.badge-type--like      { background: rgba(239,68,68,0.14);  color: #f87171; }
.badge-type--share     { background: rgba(14,165,233,0.14); color: #38bdf8; }
.badge-type--comment   { background: rgba(99,102,241,0.14);  color: #818cf8; }
.badge-type--event     { background: rgba(14,165,233,0.14);  color: #38bdf8; }
.badge-type--playlist  { background: rgba(139,92,246,0.14);  color: #a78bfa; }
.badge-type--trending  { background: rgba(124,58,237,0.14);  color: #9f67ff; }
.badge-type--milestone { background: rgba(234,179,8,0.14);  color: #f59e0b; }
.badge-type--default   { background: rgba(255,255,255,0.07); color: #888; }

/* ── Audio Track Card ───────────────────────────────────────────── */
.feed-track-card {
    display: flex;
    align-items: flex-start;
    padding: 12px 14px;
    gap: 14px;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    transition: background 0.15s ease;
}
.feed-track-card:hover { background: rgba(255,255,255,0.04); }

.feed-track-art {
    position: relative;
    flex-shrink: 0;
    width: 86px;
    height: 86px;
}
.feed-track-art img {
    width: 86px;
    height: 86px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}
.feed-track-art .play_btn {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}
.feed-track-art .play_btn svg { width: 36px; height: 36px; }
.feed-track-card:hover .feed-track-art .play_btn { opacity: 1; visibility: visible; }

.feed-track-info { flex: 1; min-width: 0; padding-top: 2px; }

.feed-track-title {
    color: #e4e4e4;
    font-size: 17px;
    font-weight: 500;
    margin: 0 0 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
.feed-price-tag, .feed-lock-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 6px;
}
.feed-price-tag { background: rgba(30,180,100,0.14); color: #2ecc85; }
.feed-lock-tag  { background: rgba(239,68,68,0.12);  color: #f87171; }

.feed-track-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.feed-genre-tag {
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    background: rgba(255,255,255,0.07);
    color: #aaa;
    letter-spacing: 0.2px;
    border: 1px solid rgba(255,255,255,0.06);
}
.feed-duration {
    font-size: 12px;
    color: #666;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.feed-track-stats {
    display: flex;
    align-items: center;
    gap: 16px;
}
.fts-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #666;
}
.fts-item svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Video Feed Card ────────────────────────────────────────────── */
.feed_post .fp_body.fp_body--video {
    background: #0d0d0f !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 0 8px 8px !important;
    overflow: hidden;
}
.feed-video-wrap {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: block;
}
.feed-video-thumb {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #0a0a0c;
    overflow: hidden;
}
.feed-video-thumb img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}
.feed-video-wrap:hover .feed-video-thumb img { transform: scale(1.04); }

.feed-video-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.08) 0%,
        rgba(0,0,0,0.0) 25%,
        rgba(0,0,0,0.0) 50%,
        rgba(0,0,0,0.88) 100%
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.feed-video-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 2px solid rgba(255,255,255,0.28);
    opacity: 0;
    transform: scale(0.82);
    transition: opacity 0.22s ease, transform 0.22s ease;
    position: relative;
    z-index: 2;
}
.feed-video-play-btn svg {
    width: 26px;
    height: 26px;
    color: #fff;
    margin-left: 3px;
}
.feed-video-wrap:hover .feed-video-play-btn { opacity: 1; transform: scale(1); }

.feed-video-info-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 16px 16px 13px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    z-index: 2;
}
.feed-video-title { flex: 1; min-width: 0; }
.feed-video-title h4 {
    color: #fff;
    font-size: 15.5px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 5px rgba(0,0,0,0.7);
}
.feed-video-title small { font-size: 11px; opacity: 0.75; margin-left: 6px; }
.feed-video-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.fvs-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: rgba(255,255,255,0.82);
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.fvs-item svg { width: 13px; height: 13px; }

/* ── Sidebar Artist Cards ───────────────────────────────────────── */
.feed-artist-card .cover_art a {
    border: 2px solid rgba(255,255,255,0.0);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.feed-artist-card .cover_art a:hover {
    border-color: var(--main-color);
    box-shadow: 0 0 0 3px rgba(var(--main-color-rgb, 103,58,183), 0.18);
}
.feed-sidebar-name { font-weight: 500; font-size: 13px; }
.feed-sidebar-name svg { width: 13px; height: 13px; vertical-align: middle; margin-top: -2px; }

/* ── Sidebar Weekly Track ───────────────────────────────────────── */
.feed-sidebar-track .song_list { cursor: pointer; border-radius: 5px; transition: background 0.15s ease; }
.feed-sidebar-track .song_list:hover { background: rgba(255,255,255,0.04); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .feed_post .fp_body { margin-left: 10px; }
    .feed-track-art { width: 72px; height: 72px; }
    .feed-track-art img { width: 72px; height: 72px; }
    .feed-track-title { font-size: 15px; }
    .feed_post .fp_body.fp_body--video { border-radius: 0 !important; }
    .feed-video-play-btn { width: 50px; height: 50px; }
}
/* ── Similar Songs Notification Toast ───────────────────────────────────── */
#similar-songs-notif {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1ed760;
    color: #000;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 10px 22px;
    border-radius: 999px;
    box-shadow: 0 4px 24px rgba(0,0,0,.45);
    opacity: 0;
    transition: opacity .3s, transform .3s;
    pointer-events: none;
    z-index: 9999;
    white-space: nowrap;
}
#similar-songs-notif.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Up Next – Similar Songs Section ────────────────────────────────────── */
.upnext-section {
    background: #121212;
    padding: 0 24px 32px;
    margin-top: -1px;
}
.upnext-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 0 16px;
    border-top: 1px solid rgba(255,255,255,.08);
}
.upnext-title {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.55);
    margin: 0;
}
.upnext-refresh-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.55);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 5px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.upnext-refresh-btn:hover { border-color: #fff; color: #fff; }
.upnext-refresh-btn svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }
.upnext-refresh-btn.spinning svg { animation: upnext-spin .7s linear infinite; }
@keyframes upnext-spin { to { transform: rotate(360deg); } }

.upnext-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.upnext-row {
    display: grid;
    grid-template-columns: 46px 1fr 80px;
    align-items: center;
    gap: 0;
    padding: 5px 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background .12s;
}
.upnext-row:hover { background: rgba(255,255,255,.07); }
.upnext-row-img {
    width: 38px;
    height: 38px;
    border-radius: 3px;
    object-fit: cover;
    flex-shrink: 0;
}
.upnext-row-body { display: flex; align-items: center; gap: 12px; min-width: 0; }
.upnext-row-text { min-width: 0; }
.upnext-row-title {
    font-size: .86rem;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.upnext-row-artist {
    font-size: .75rem;
    color: #b3b3b3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.upnext-row-dur {
    font-size: .8rem;
    color: #b3b3b3;
    text-align: right;
    padding-right: 8px;
    white-space: nowrap;
}
.upnext-skeleton { opacity: .35; pointer-events: none; }
.upnext-skeleton .upnext-row-img { background: rgba(255,255,255,.12); border-radius: 3px; }
.upnext-skeleton .upnext-row-title,
.upnext-skeleton .upnext-row-artist,
.upnext-skeleton .upnext-row-dur {
    background: rgba(255,255,255,.12);
    border-radius: 3px;
    color: transparent;
}
@media(max-width:640px) {
    .upnext-section { padding: 0 8px 24px; }
    .upnext-header { padding: 20px 0 12px; }
    .upnext-row { grid-template-columns: 40px 1fr 64px; }
}

.ma_player input[type="range"],
.ma_player .amplitude-volume-slider {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    accent-color: #7c3aed;
}

.ma_player input[type="range"]::-webkit-slider-runnable-track {
    background: rgba(255,255,255,0.25);
    height: 4px;
    border-radius: 10px;
}

.ma_player input[type="range"]::-webkit-slider-thumb {
    margin-top: -5px;
    background: #7c3aed;
}

.ma_player input[type="range"]::-moz-range-track {
    background: rgba(255,255,255,0.25);
    height: 4px;
    border-radius: 10px;
}

.ma_player input[type="range"]::-moz-range-thumb {
    background: #7c3aed;
    border: none;
}

.spl-row-active {
    background: rgba(124, 58, 237, 0.18) !important;
    border-left: 3px solid #7c3aed;
}

.up-next-similar-songs,
#up-next-similar-songs,
.upnext-section,
.similar-song-row {
    display: none !important;
    width: 100%;
}

.similar-song-row {
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 4px;
    cursor: pointer;
}

.similar-song-row:hover {
    background: rgba(255,255,255,0.05);
}

.similar-song-inner {
    display: grid;
    grid-template-columns: 40px 1fr 50px 34px;
    align-items: center;
    gap: 12px;
}

.similar-cover {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    display: block;
}

.similar-title {
    font-weight: 600;
    color: #fff;
    font-size: 14px;
}

.similar-artist {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
}

.similar-duration {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    text-align: right;
}

.similar-meta {
    min-width: 0;
}

.similar-title,
.similar-artist {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.btn-add-playlist {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(124,58,237,.55);
    background: rgba(124,58,237,.18);
    color: #b78cff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.btn-add-playlist:hover {
    background: #7c3aed;
    color: #fff;
    box-shadow: 0 0 12px rgba(124,58,237,.6);
}

.similar-song-row.spl-row-active {
    background: rgba(124,58,237,.20) !important;
    border-left: 3px solid #7c3aed;
}

/* ── StreamIndy Video Modal ──────────────────────────────────────────────── */
.si-video-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.si-video-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(8px);
}

.si-video-box {
    position: relative;
    width: min(960px, 94vw);
    background: #08080d;
    border: 1px solid rgba(124,58,237,0.55);
    box-shadow: 0 0 45px rgba(124,58,237,0.35);
    border-radius: 18px;
    padding: 16px;
    z-index: 2;
}

.si-video-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: #7c3aed;
    color: #fff;
    border: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 30px;
    cursor: pointer;
    z-index: 3;
}

.si-video-close:hover {
    background: #6d28d9;
}

.si-video-meta {
    padding: 4px 44px 12px 4px;
}

.si-video-title {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}

.si-video-artist {
    color: rgba(255,255,255,0.65);
    font-size: 13px;
    margin-top: 3px;
}

.si-video-player {
    width: 100%;
    max-height: 72vh;
    background: #000;
    border-radius: 14px;
    display: block;
}

@media (max-width: 600px) {
    .si-video-box {
        width: 96vw;
        padding: 10px;
        border-radius: 14px;
    }

    .si-video-player {
        max-height: 68vh;
    }
}

/* ── Music Videos ───────────────────────────────────────────────────────── */
.si-music-videos-page {
    padding: 72px 0 120px;
}
.si-music-videos-header {
    margin-bottom: 36px;
}
.si-music-videos-eyebrow {
    display: inline-block;
    font-size: 0.63rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #9f67ff;
    background: rgba(124,58,237,0.13);
    border: 1px solid rgba(124,58,237,0.26);
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 14px;
}
.si-music-videos-title {
    font-size: 2.1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.025em;
    margin: 0 0 8px;
    line-height: 1.1;
}
.si-music-videos-sub {
    font-size: 0.93rem;
    color: rgba(200,200,220,0.58);
    margin: 0;
}
.si-music-videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}
.si-music-video-card {
    background: #16161e;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    color: inherit;
    cursor: pointer;
    display: block;
    overflow: hidden;
    padding: 0;
    text-align: left;
    transition: border-color 0.28s, transform 0.28s cubic-bezier(.22,.68,0,1.2), box-shadow 0.28s;
    width: 100%;
}
.si-music-video-card:hover {
    border-color: rgba(124,58,237,0.5);
    transform: translateY(-5px) scale(1.015);
    box-shadow: 0 20px 56px rgba(0,0,0,0.75), 0 0 0 1px rgba(124,58,237,0.28);
}
.si-music-video-cover {
    aspect-ratio: 16 / 9;
    background: #1a1a1e;
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
}
/* shimmer skeleton while image loads */
.si-music-video-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #1a1a1e 0%, #252530 42%, #1e1e28 58%, #1a1a1e 100%);
    background-size: 600px 100%;
    animation: sh-shimmer 1.5s ease-in-out infinite;
    z-index: 0;
}
.si-music-video-cover img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
    position: relative;
    z-index: 1;
    transition: transform 0.45s cubic-bezier(.22,.68,0,1.2);
}
.si-music-video-card:hover .si-music-video-cover img {
    transform: scale(1.04);
}
.si-music-video-play {
    align-items: center;
    background: rgba(0,0,0,0.52);
    border-radius: 50%;
    color: #fff;
    display: flex;
    height: 48px;
    justify-content: center;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.72);
    transition: opacity 0.22s, transform 0.22s cubic-bezier(.22,.68,0,1.2);
    width: 48px;
    z-index: 2;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.2);
}
.si-music-video-card:hover .si-music-video-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.si-music-video-info {
    display: block;
    padding: 12px 14px 14px;
}
.si-music-video-title,
.si-music-video-artist {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.si-music-video-title {
    color: #f0f0f8;
    font-size: 0.91rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.si-music-video-artist {
    color: #72728a;
    font-size: 0.75rem;
}
.si-music-video-badge {
    background: rgba(124,58,237,0.14);
    border: 1px solid rgba(124,58,237,0.3);
    border-radius: 100px;
    color: #a78bfa;
    display: inline-flex;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    margin-top: 9px;
    padding: 4px 9px;
}

.si-music-videos-empty {
	grid-column: 1 / -1;
}

.si-profile-music-videos {
	margin-bottom: 24px;
}

.si-profile-music-videos-head {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 12px;
}

.si-profile-music-videos-head h3 {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	margin: 0;
}

.si-profile-music-videos-all {
	color: #c4b5fd;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}

.si-profile-music-videos-all:hover {
	color: #fff;
	text-decoration: none;
}

.si-profile-music-videos-grid {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
}

.si-attach-video-box {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 8px;
	margin-bottom: 24px;
	padding: 16px;
}

.si-attach-video-copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 12px;
}

.si-attach-video-copy strong {
	color: #fff;
	font-size: 15px;
}

.si-attach-video-copy span,
.si-attach-video-copy small {
	color: rgba(255,255,255,0.62);
	font-size: 12px;
}

.si-attach-video-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}

#si-attach-video-alert {
	margin: 12px 0 0;
}

@media (max-width: 600px) {
	.si-music-videos-grid {
		grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
		gap: 12px;
	}
}
/* ── Watch Video button (track page) ─────────────────────────────────────── */
.si-watch-video-btn {
    background: rgba(124,58,237,0.15);
    border: 1px solid rgba(124,58,237,0.5);
    border-radius: 999px;
    color: #c4b5fd;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    transition: background .16s, border-color .16s, color .16s, box-shadow .16s;
}
.si-watch-video-btn:hover {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
    box-shadow: 0 0 14px rgba(124,58,237,0.55);
}
.si-watch-video-btn svg { flex-shrink: 0; }
/* ── End StreamIndy Video Modal ──────────────────────────────────────────── */

/* ── StreamIndy Reels ────────────────────────────────────────────────────── */

/* Page header */
.si-reels-page { padding-bottom: 40px; }

.si-reels-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.si-reels-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.si-reels-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #7c3aed;
    color: #fff !important;
    border-radius: 10px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s;
}
.si-reels-upload-btn:hover { background: #6d28d9; }

/* Grid */
.si-reels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

/* Card */
.si-reel-card {
    background: #0e0e16;
    border: 1px solid rgba(124,58,237,.22);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .18s, box-shadow .18s;
    cursor: pointer;
}
.si-reel-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(124,58,237,.28);
}

/* Video area */
.si-reel-video-wrap {
    position: relative;
    aspect-ratio: 9 / 16;
    max-height: 80vh;
    background: #000;
    overflow: hidden;
}

.si-reel-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mute toggle button */
.si-reel-mute-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,.55);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    z-index: 3;
    transition: background .15s;
    padding: 0;
}
.si-reel-mute-btn:hover { background: rgba(0,0,0,.8); }
.si-reel-mute-btn .icon-unmuted { display: none; }
.si-reel-mute-btn.si-reel-unmuted .icon-muted   { display: none; }
.si-reel-mute-btn.si-reel-unmuted .icon-unmuted { display: block; }

.si-reel-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.32);
    color: #fff;
    transition: opacity .15s;
    pointer-events: none;
}
.si-reel-card.si-reel-playing .si-reel-play-overlay { opacity: 0; }

/* Info area */
.si-reel-info {
    padding: 14px 14px 12px;
}

.si-reel-artist {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}

.si-reel-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(124,58,237,.5);
    flex-shrink: 0;
}

.si-reel-artist-name {
    font-size: 13px;
    font-weight: 600;
    color: #e5e7eb;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.si-reel-artist-name:hover { color: #7c3aed; }

.si-reel-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.si-reel-caption {
    font-size: 12px;
    color: rgba(255,255,255,.55);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.si-reel-song-link {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #7c3aed;
    margin-bottom: 8px;
    cursor: pointer;
}
.si-reel-song-link:hover { color: #a78bfa; text-decoration: underline; }

.si-reel-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }

/* Comment placeholder */
.si-reel-comment-placeholder {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,.07);
    border-radius: 20px;
    padding: 5px 12px;
    color: rgba(255,255,255,.45);
    font-size: 13px;
    cursor: default;
}

/* Infinite scroll sentinel */
.si-reels-sentinel { height: 1px; grid-column: 1 / -1; }

.si-reel-like-btn, .si-reel-like-static {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,.07);
    border: none;
    border-radius: 20px;
    padding: 5px 12px;
    color: rgba(255,255,255,.7);
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.si-reel-like-btn:hover { background: rgba(239,68,68,.18); color: #ef4444; }
.si-reel-like-btn.si-reel-liked { background: rgba(239,68,68,.18); color: #ef4444; }
.si-reel-like-static { cursor: default; }

/* Song search on upload form */
.si-reel-song-wrap { position: relative; }
.si-reel-song-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #16162a;
    border: 1px solid rgba(124,58,237,.4);
    border-radius: 10px;
    z-index: 50;
    max-height: 200px;
    overflow-y: auto;
}
.si-reel-song-result-item {
    padding: 10px 14px;
    font-size: 13px;
    color: rgba(255,255,255,.8);
    cursor: pointer;
    transition: background .12s;
}
.si-reel-song-result-item:hover { background: rgba(124,58,237,.22); color: #fff; }
.si-reel-song-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(124,58,237,.12);
    border: 1px solid rgba(124,58,237,.35);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    font-size: 13px;
    color: #c4b5fd;
}
.si-reel-song-selected button {
    background: none;
    border: none;
    color: rgba(255,255,255,.45);
    cursor: pointer;
    font-size: 18px;
    padding: 0;
    margin-left: auto;
    line-height: 1;
}
.si-reel-song-selected button:hover { color: #fff; }

/* ── Upload Reel page ── */
.si-upload-reel-wrap {
    max-width: 580px;
    margin: 0 auto;
}

.si-upload-reel-header {
    margin-bottom: 28px;
}
.si-upload-reel-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}
.si-upload-reel-header p { color: rgba(255,255,255,.5); font-size: 14px; margin: 0; }

.si-upload-reel-section { margin-bottom: 20px; }

.si-upload-reel-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.75);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.si-required { color: #ef4444; }

.si-reel-dropzone {
    border: 2px dashed rgba(124,58,237,.45);
    border-radius: 14px;
    background: rgba(124,58,237,.06);
    padding: 36px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .18s, background .18s;
    color: rgba(255,255,255,.5);
}
.si-reel-dropzone:hover, .si-reel-dropzone.si-drag-over {
    border-color: #7c3aed;
    background: rgba(124,58,237,.12);
}
.si-reel-dropzone svg { margin-bottom: 10px; color: #7c3aed; }
.si-reel-dropzone p { margin: 0 0 4px; font-size: 14px; color: rgba(255,255,255,.7); }
.si-reel-dropzone p span { color: #7c3aed; font-weight: 600; }
.si-reel-dropzone small { font-size: 12px; color: rgba(255,255,255,.35); }

.si-reel-progress {
    height: 4px;
    background: rgba(124,58,237,.2);
    border-radius: 4px;
    margin-top: 10px;
    overflow: hidden;
}
.si-reel-progress-bar {
    height: 100%;
    background: #7c3aed;
    border-radius: 4px;
    width: 0%;
    transition: width .2s;
}

.si-reel-thumb-zone {
    width: 120px;
    height: 200px;
    border: 2px dashed rgba(124,58,237,.35);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .18s;
}
.si-reel-thumb-zone:hover { border-color: #7c3aed; }
#si-reel-thumb-placeholder { text-align: center; color: rgba(255,255,255,.4); padding: 10px; }
#si-reel-thumb-placeholder small { font-size: 11px; display: block; margin-top: 6px; }

.si-reel-input {
    width: 100%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(124,58,237,.3);
    border-radius: 10px;
    padding: 11px 14px;
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color .18s;
}
.si-reel-input:focus { border-color: #7c3aed; }
.si-reel-input::placeholder { color: rgba(255,255,255,.3); }

.si-reel-textarea {
    width: 100%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(124,58,237,.3);
    border-radius: 10px;
    padding: 11px 14px;
    color: #fff;
    font-size: 14px;
    outline: none;
    resize: vertical;
    transition: border-color .18s;
    font-family: inherit;
}
.si-reel-textarea:focus { border-color: #7c3aed; }
.si-reel-textarea::placeholder { color: rgba(255,255,255,.3); }

.si-reel-status {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 10px;
}
.si-reel-status.si-error { background: rgba(239,68,68,.15); color: #ef4444; border: 1px solid rgba(239,68,68,.3); }
.si-reel-status.si-success { background: rgba(34,197,94,.12); color: #22c55e; border: 1px solid rgba(34,197,94,.3); }

.si-reel-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #7c3aed;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s, opacity .18s;
}
.si-reel-submit-btn:hover:not(:disabled) { background: #6d28d9; }
.si-reel-submit-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Mobile */
@media (max-width: 600px) {
    .si-reels-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
    .si-upload-reel-wrap { padding: 0 4px; }
}
/* ── End StreamIndy Reels ─────────────────────────────────────────────────── */

/* ── Hero title impact: header logo subdued over hero ────────────── */
header .head_logo a.brans img,
header .head_logo a.brans svg {
    opacity: 0.6;
    transition: opacity 0.2s;
}
header .head_logo a.brans:hover img,
header .head_logo a.brans:hover svg {
    opacity: 1;
}
/* ================================================================
   PLAYLIST CARDS (spc-*) — My Playlists + Saved Playlists
   Moved from inline <style> in list.html / saved-list.html
   ================================================================ */

.spc-card {
    background: #16161e;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    position: relative;
    transition: border-color 0.28s, transform 0.28s cubic-bezier(.22,.68,0,1.2), box-shadow 0.28s;
}
.spc-card:hover {
    background: #1c1c28;
    border-color: rgba(124,58,237,0.5);
    transform: translateY(-5px) scale(1.015);
    box-shadow: 0 20px 56px rgba(0,0,0,0.75), 0 0 0 1px rgba(124,58,237,0.28);
}
.spc-img-wrap {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
    aspect-ratio: 1;
    background: #1a1a1e;
}
/* shimmer skeleton */
.spc-img-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #1a1a1e 0%, #252530 42%, #1e1e28 58%, #1a1a1e 100%);
    background-size: 600px 100%;
    animation: sh-shimmer 1.5s ease-in-out infinite;
    z-index: 0;
}
.spc-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
    transition: transform 0.45s cubic-bezier(.22,.68,0,1.2);
}
.spc-card:hover .spc-img-wrap img { transform: scale(1.04); }

.spc-play-btn {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
    opacity: 0;
    transform: translateY(6px) scale(0.88);
    transition: opacity 0.2s, transform 0.22s cubic-bezier(.22,.68,0,1.2);
    z-index: 2;
}
.spc-card:hover .spc-play-btn {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.spc-play-btn:hover { background: #f0f0ff; }
.spc-play-btn svg { width: 20px; height: 20px; fill: #111; margin-left: 2px; }

.spc-opts {
    position: absolute;
    top: 8px;
    right: 8px;
    opacity: 0;
    transition: opacity 0.18s;
    z-index: 2;
}
.spc-card:hover .spc-opts { opacity: 1; }
.spc-opts-btn {
    width: 32px;
    height: 32px;
    background: rgba(0,0,0,0.68);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    padding: 0;
    backdrop-filter: blur(4px);
}
.spc-opts-btn svg { width: 18px; height: 18px; fill: currentColor; }

.spc-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #f0f0f8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
    line-height: 1.3;
}
.spc-meta {
    font-size: 0.76rem;
    color: #72728a;
    line-height: 1.4;
}
.spc-card a { text-decoration: none; }
.spc-card a:hover .spc-title { color: #fff; }

.spc-create-card {
    background: #16161e;
    border: 2px dashed rgba(124,58,237,0.22);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    text-align: center;
    gap: 10px;
}
.spc-create-card:hover {
    background: #1c1c28;
    border-color: rgba(124,58,237,0.5);
}
.spc-create-card svg { width: 36px; height: 36px; fill: rgba(159,103,255,0.45); }
.spc-create-card span { font-size: 0.84rem; font-weight: 600; color: rgba(160,160,200,0.65); }

@media (max-width: 640px) {
    .spc-play-btn { opacity: 1; transform: translateY(0) scale(1); }
    .spc-opts { opacity: 1; }
}

/* ================================================================
   MY PLAYLISTS PAGE (mpl-*)
   Moved from inline <style> in playlists/content.html
   ================================================================ */

.mpl-page { padding: 32px 20px 120px; }
.mpl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 12px;
}
.mpl-header h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
}
.mpl-section { margin-top: 40px; }
.mpl-section:first-of-type { margin-top: 0; }
.mpl-section-subtitle { font-size: 0.84rem; color: #72728a; margin: 6px 0 0; }
.mpl-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 50%, #9f67ff 100%);
    border: none;
    border-radius: 100px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 9px 22px;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
    text-decoration: none;
}
.mpl-new-btn:hover { opacity: 0.88; transform: scale(1.03); color: #fff; }
.mpl-new-btn svg { width: 16px; height: 16px; fill: currentColor; }
.mpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 18px;
}
.mpl-empty {
    color: #72728a;
    font-size: 0.88rem;
    padding: 40px 0;
    text-align: center;
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .mpl-page { padding: 16px 12px 100px; }
    .mpl-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
}

/* ================================================================
   GENRES PAGE
   ================================================================ */

.gn-page {
    padding: 72px 28px 120px;
    max-width: 1480px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ── Page header ──────────────────────────────────────────────── */
.gn-header {
    margin-bottom: 44px;
}
.gn-header-eyebrow {
    display: inline-block;
    font-size: 0.63rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #9f67ff;
    background: rgba(124,58,237,0.13);
    border: 1px solid rgba(124,58,237,0.26);
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 14px;
}
.gn-header-title {
    font-size: 2.1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.025em;
    margin: 0 0 8px;
    line-height: 1.1;
}
.gn-header-sub {
    font-size: 0.93rem;
    color: rgba(200,200,220,0.58);
    margin: 0;
}

/* ── Genre grid ───────────────────────────────────────────────── */
.gn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

/* ── Genre card ───────────────────────────────────────────────── */
.gn-card {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    background: #161620;
    border: 1px solid rgba(255,255,255,0.07);
    text-decoration: none;
    color: inherit;
    transition: transform 0.28s cubic-bezier(.22,.68,0,1.2),
                border-color 0.22s,
                box-shadow 0.28s;
    cursor: pointer;
}
.gn-card:hover {
    transform: translateY(-5px) scale(1.015);
    border-color: rgba(124,58,237,0.5);
    box-shadow: 0 20px 56px rgba(0,0,0,0.75), 0 0 0 1px rgba(124,58,237,0.28);
    text-decoration: none;
    color: inherit;
}

/* art block — fixed aspect ratio */
.gn-card-art {
    position: relative;
    width: 100%;
    padding-top: 68%;
    overflow: hidden;
    background: #1a1a24;
}
.gn-card-art::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #1a1a1e 0%, #252530 42%, #1e1e28 58%, #1a1a1e 100%);
    background-size: 600px 100%;
    animation: sh-shimmer 1.5s ease-in-out infinite;
    z-index: 0;
}
.gn-card-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1;
    transform: none;
    z-index: 1;
    transition: transform 0.45s cubic-bezier(.22,.68,0,1.2);
}
.gn-card:hover .gn-card-art img {
    transform: scale(1.06);
}
.gn-card-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 50%, transparent 100%);
    z-index: 2;
}

/* info block */
.gn-card-body {
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gn-card-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #f0f0f8;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gn-card-count {
    font-size: 0.73rem;
    color: rgba(160,160,200,0.8);
    font-weight: 500;
}

@media (max-width: 640px) {
    .gn-page { padding: 64px 18px 80px; }
    .gn-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
    .gn-header-title { font-size: 1.6rem; }
}

/* ================================================================
   LABELS PAGE
   ================================================================ */

.lb-page {
    padding: 72px 28px 120px;
    max-width: 1480px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ── Page header ──────────────────────────────────────────────── */
.lb-header {
    margin-bottom: 44px;
}
.lb-header-eyebrow {
    display: inline-block;
    font-size: 0.63rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #9f67ff;
    background: rgba(124,58,237,0.13);
    border: 1px solid rgba(124,58,237,0.26);
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 14px;
}
.lb-header-title {
    font-size: 2.1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.025em;
    margin: 0 0 8px;
    line-height: 1.1;
}
.lb-header-sub {
    font-size: 0.93rem;
    color: rgba(200,200,220,0.58);
    margin: 0;
}

/* ── Empty state ──────────────────────────────────────────────── */
.lb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 80px 24px;
    color: rgba(160,160,200,0.5);
}
.lb-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(124,58,237,0.1);
    border: 1px solid rgba(124,58,237,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: rgba(159,103,255,0.6);
}
.lb-empty-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(220,220,240,0.7);
    margin: 0 0 8px;
}
.lb-empty-sub {
    font-size: 0.87rem;
    color: rgba(160,160,200,0.45);
    margin: 0;
    max-width: 320px;
}

/* ── Labels grid — 3-col desktop / 2-col tablet / 1-col mobile ── */
.lb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 900px) {
    .lb-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 560px) {
    .lb-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Label card — Hall-of-Fame style ─────────────────────────── */
.lb-card {
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: #0e0e18;
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    transition: transform 0.28s cubic-bezier(.22,.68,0,1.2),
                border-color 0.22s,
                box-shadow 0.28s;
}
.lb-card:hover {
    transform: translateY(-5px) scale(1.015);
    border-color: rgba(124,58,237,0.5);
    box-shadow: 0 24px 60px rgba(0,0,0,0.75), 0 0 0 1px rgba(124,58,237,0.28);
    text-decoration: none;
    color: inherit;
}

/* ── Visual / logo area ───────────────────────────────────────── */
.lb-card-visual {
    position: relative;
    height: 186px;
    background: linear-gradient(145deg, #1a0e2e 0%, #0e0e1a 55%, #12061e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.lb-card-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, rgba(124,58,237,0.2) 0%, transparent 68%);
    pointer-events: none;
}
/* logo image — used when a real logo is eventually uploaded */
.lb-card-logo-img {
    position: relative;
    z-index: 1;
    max-width: 160px;
    max-height: 130px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,0.65));
}

/* generated text identity — shown whenever no logo exists */
.lb-ph-initials {
    position: relative;
    z-index: 1;
    font-size: 72px;
    font-weight: 900;
    color: rgba(196,160,255,0.42);
    letter-spacing: -0.04em;
    line-height: 1;
    user-select: none;
    text-shadow: 0 2px 40px rgba(124,58,237,0.55);
}
.lb-ph-badge {
    position: absolute;
    bottom: 14px;
    left: 16px;
    z-index: 2;
    font-size: 0.57rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(196,160,255,0.88);
    background: rgba(124,58,237,0.22);
    border: 1px solid rgba(124,58,237,0.36);
    padding: 3px 10px 3px 9px;
    border-radius: 4px;
}

/* ── Info panel ───────────────────────────────────────────────── */
.lb-card-info {
    padding: 18px 20px 20px;
    background: #0c0c16;
    border-top: 1px solid rgba(124,58,237,0.15);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lb-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: #f0f0f8;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.01em;
}
.lb-card-location {
    font-size: 0.75rem;
    color: rgba(160,160,200,0.65);
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}
.lb-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.lb-card-count {
    font-size: 0.76rem;
    color: rgba(159,103,255,0.85);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}
.lb-card-cta {
    font-size: 0.74rem;
    font-weight: 700;
    color: #9f67ff;
    letter-spacing: 0.01em;
    opacity: 0;
    transition: opacity 0.18s;
}
.lb-card:hover .lb-card-cta {
    opacity: 1;
}

@media (max-width: 640px) {
    .lb-page { padding: 64px 18px 80px; }
    .lb-header-title { font-size: 1.6rem; }
    .lb-card-visual { height: 160px; }
}

/* ================================================================
   DISCOVER POLISH PASS — Animations + Footer Fade
   ================================================================ */

/* Shimmer skeleton keyframe */
@keyframes sh-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

/* Image reveal keyframe */
@keyframes sh-img-reveal {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: scale(1);    }
}

/* Footer fade — soft black-to-purple bleed before player bar */
.sd-footer-fade {
    height: 80px;
    margin-top: -40px;
    background: linear-gradient(to bottom, transparent 0%, rgba(13,13,15,0.7) 50%, #0d0d0f 100%);
    pointer-events: none;
    position: relative;
    z-index: 0;
}

/* Mobile: compress section spacing further */
@media (max-width: 760px) {
    .sh-section { margin-bottom: 32px; }
    .sh-section--tinted, .sh-section--alt { padding-top: 28px; padding-bottom: 28px; }
    .sd-featured-video-section { margin-bottom: 20px; }
    .sh-artist-avatar { width: 104px; height: 104px; }
    .sh-artist-card { width: 120px; }
}

/* ── Focus visibility — WCAG 2.4.7 ──────────────────────────────── */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:not([type="range"]):focus-visible {
    outline: 2px solid #9f67ff !important;
    outline-offset: 3px !important;
}

/* ── Player dock position — theme-update safe override ───────────── */
/* Duplicates style.css:243-245 and :7158-7162. If a Volcano theme    */
/* update ever resets .ma_player positioning, these rules win because  */
/* custom.style.css loads after style.css (container.html:367 > :31). */
/* Remove the style.css originals if a theme update breaks this.      */
.ma_player {
    bottom: 8px;
    left: 72px;
    right: 8px;
    border-radius: 8px;
}
@media (max-width: 1220px) {
    .ma_player {
        bottom: 0;
        left: 0;
        right: 0;
    }
}

/* ── Player visual weight reduction ──────────────────────────────── */
/* Overrides style.css:615-669. All changes are cosmetic only.       */
.player {
    padding: 0 16px;
}
.player .song_details .song_details_inner .song_art {
    width: 48px;
    min-width: 48px;
    height: 48px;
    margin-right: 12px;
}
.player .song_details .song_details_inner .song_art img {
    width: 48px;
    height: 48px;
}
.player .song_progress .song_controls .amplitude-shuffle,
.player .song_progress .song_controls .amplitude-prev {
    margin: 0 11px;
}
.player .song_progress .song_controls .amplitude-next,
.player .song_progress .song_controls .amplitude-repeat {
    margin: 0 11px;
}
.player .song_progress .song_controls .amplitude-play-pause {
    width: 38px;
    height: 38px;
    margin: 0 7px;
}

/* ── Recommendation reason chip + AI badge ───────────────────────── */
.si-rec-reason {
    display: block;
    font-size: 0.68rem;
    color: #7e7e9a;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
}
.si-ai-badge {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #9f67ff;
    border: 1px solid rgba(159, 103, 255, 0.4);
    border-radius: 3px;
    padding: 0 4px;
    vertical-align: middle;
    margin-left: 5px;
    line-height: 1.7;
}

/* ── Genre card — emerging (zero-song) state ─────────────────────── */
.gn-card-emerging {
    color: #9f67ff;
    font-style: italic;
    opacity: 0.85;
}

/* ── Discover filter — empty state + fallback label ─────────────── */
.sh-empty-state {
    padding: 2rem 1rem;
    color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
    text-align: center;
    font-style: italic;
    width: 100%;
}
.sh-trending-fallback {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.38);
    margin-left: 0.6rem;
    vertical-align: middle;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 3px;
    padding: 1px 5px;
}

/* ── Dashboard V2 — Track Leaderboard Tabs ──────────────────────── */
.db2-tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 14px;
}
.db2-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: rgba(255,255,255,0.42);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 16px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.db2-tab:hover { color: rgba(255,255,255,0.75); }
.db2-tab.db2-tab-active {
    color: #fff;
    border-bottom-color: #536fd7;
}
.db2-tab-panel { display: none; }
.db2-tab-panel.db2-tab-panel-active { display: block; }

/* ── Dashboard V2 Phase 1C ───────────────────────────────────────── */

/* Followers KPI card accent */
.small_stat.follows { border-left-color: #9f67ff; }

/* Momentum Hero */
.db2-hero {
    background: rgba(83,111,215,0.10);
    border: 1px solid rgba(83,111,215,0.22);
    border-radius: 8px;
    padding: 14px 20px;
    margin-bottom: 16px;
}
.db2-hero-msg {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.88);
    line-height: 1.5;
}

/* Best Track This Week */
.db2-best-track-panel {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 0;
}
.db2-best-track-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.45);
    white-space: nowrap;
}
.db2-best-track-link {
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
.db2-best-track-link:hover { color: #536fd7; text-decoration: none; }
.db2-best-track-count {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.45);
}
.db2-best-track-panel.db2-best-track-empty {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.35);
    font-style: italic;
    justify-content: center;
}

/* Next Best Actions */
.db2-nba-section { margin-top: 6px; }
.db2-nba-list { display: flex; flex-direction: column; gap: 1px; }
.db2-action-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #1e1e1e;
    border-radius: 8px;
    padding: 13px 16px;
    margin-bottom: 6px;
}
.db2-action-icon {
    flex-shrink: 0;
    color: rgba(255,255,255,0.45);
    display: flex;
    align-items: center;
}
.db2-action-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.db2-action-label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
}
.db2-action-cta {
    font-size: 0.78rem;
    font-weight: 600;
    color: #536fd7;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid rgba(83,111,215,0.35);
    border-radius: 5px;
    padding: 4px 12px;
    transition: background 0.15s, color 0.15s;
}
.db2-action-cta:hover {
    background: rgba(83,111,215,0.18);
    color: #7b9aff;
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════
   Dashboard V2 — Phase 1D: Visual Polish & Hierarchy
   ═══════════════════════════════════════════════════════════════════ */

/* ── Section labels ──────────────────────────────────────────────── */
.db2-section-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.24);
    margin: 0 0 10px;
    padding: 0;
    line-height: 1;
}

/* ── Dashboard spacing tighten ───────────────────────────────────── */
.ma_dashboard .content { margin: 14px auto; }

/* ── KPI grid: 4-up desktop, 2×2 tablet, 1-col mobile ───────────── */
.db2-kpi-grid { margin-bottom: 4px; }
.db2-kpi-grid .content.small_stat { margin-bottom: 14px; }

/* Prevent number overflow on smaller viewports */
@media (max-width: 991px) {
    .small_stat_hdr p { font-size: 36px !important; line-height: 44px !important; }
}
@media (max-width: 767px) {
    .small_stat_hdr p { font-size: 30px !important; line-height: 38px !important; }
    .small_stat_hdr h2 { font-size: 11px !important; }
}
@media (max-width: 479px) {
    .small_stat_hdr p { font-size: 26px !important; line-height: 34px !important; }
}

/* ── Momentum Hero (Phase 1D) ────────────────────────────────────── */
.db2-hero {
    background: linear-gradient(135deg, rgba(83,111,215,0.14) 0%, rgba(159,103,255,0.06) 100%);
    border: 1px solid rgba(83,111,215,0.2);
    border-left-width: 3px;
    border-left-color: #536fd7;
    border-radius: 8px;
    padding: 18px 22px 18px 20px;
    margin-bottom: 20px;
}
.db2-hero-msg {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255,255,255,0.92);
    line-height: 1.55;
}

/* ── Chart container ─────────────────────────────────────────────── */
.db2-chart-section {
    padding: 20px 20px 14px;
    margin-bottom: 14px !important;
}

/* ── Track Leaderboard Tabs (Phase 1D) ───────────────────────────── */
.db2-track-tabs { padding: 18px 20px 8px; }
.db2-tab-nav { margin-bottom: 18px; }
.db2-tab { min-height: 44px; padding: 8px 18px; }
.db2-tab.db2-tab-active {
    background: rgba(83,111,215,0.08);
    border-radius: 4px 4px 0 0;
}

/* ── Best Track panel ────────────────────────────────────────────── */
.db2-best-track-panel {
    padding: 12px 20px;
    margin-bottom: 14px !important;
}

/* ── Revenue section ─────────────────────────────────────────────── */
.db2-revenue-section > .db2-section-label { margin-top: 2px; margin-bottom: 12px; }
.db2-revenue-divider {
    height: 1px;
    background: rgba(255,255,255,0.07);
    margin: 2px 12px 14px;
    padding: 0;
}

/* ── NBA spacing ─────────────────────────────────────────────────── */
.db2-nba-section { margin-top: 6px; padding-bottom: 8px; }
.db2-nba-section .home_widget_title { margin-bottom: 12px; }

/* ── Mobile: 767px ───────────────────────────────────────────────── */
@media (max-width: 767px) {
    .db2-hero { padding: 14px 16px 14px 14px; }
    .db2-hero-msg { font-size: 0.92rem; }

    .db2-chart-section { padding: 14px 12px 10px; }

    /* Tabs: horizontal scroll on small screens, no wrapping */
    .db2-tab-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        padding-bottom: 1px;
        scrollbar-width: none;
    }
    .db2-tab-nav::-webkit-scrollbar { display: none; }
    .db2-tab { flex-shrink: 0; font-size: 0.72rem; padding: 10px 12px; letter-spacing: 0.03em; }

    .db2-best-track-panel { flex-direction: column; align-items: flex-start; gap: 6px; }

    .db2-action-body { flex-direction: column; align-items: flex-start; gap: 8px; }
    .db2-action-cta { align-self: flex-start; }

    .db2-section-label { margin-bottom: 8px; }
}

/* ── Mobile: 479px ───────────────────────────────────────────────── */
@media (max-width: 479px) {
    /* Single-column KPI stacking */
    .db2-kpi-grid > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }

    .db2-track-tabs { padding: 14px 14px 6px; }
    .db2-hero { margin-bottom: 14px; }
    .db2-action-item { padding: 11px 12px; gap: 10px; }
    .db2-nba-section .home_widget_title { font-size: 16px !important; }
}

/* ═══ Locked song state — Phase A visual ═══════════════════════════ */
.song_list.song--locked { opacity: 0.72; }
.si-video-badge,
.si-watch-video-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 8px;
	border-radius: 999px;
	background: rgba(249, 143, 29, .14);
	color: #f98f1d !important;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none !important;
}
.si-video-badge:hover,
.si-watch-video-btn:hover { background: #f98f1d; color: #111 !important; }
.si-video-icon-link { display: inline-flex; margin-left: 7px; color: #f98f1d; vertical-align: middle; }
.si-track-video-preview { display: flex; align-items: center; gap: 8px; max-width: 150px; color: #f98f1d; font-size: 11px; font-weight: 700; }
.si-track-video-preview img { width: 48px; height: 32px; border-radius: 5px; object-fit: cover; }
.si-player-video-link { display: none; color: #f98f1d; margin-left: 8px; }
.si-player-video-link.is-visible { display: inline-flex; }
.song_list.song--locked .avatar { position: relative; }
.song--lock-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,0.52); border-radius: 4px;
    gap: 3px; pointer-events: none;
}
.song--lock-overlay svg { width: 20px; height: 20px; fill: #fff; flex-shrink: 0; }
.song--lock-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.67rem; font-weight: 700; letter-spacing: 0.04em;
    padding: 2px 8px; border-radius: 3px; text-transform: uppercase;
    white-space: nowrap; vertical-align: middle; margin-left: 4px;
}
.song--lock-badge.artist-exclusive { background: var(--main-color); color: #fff; }
.song--lock-badge.label-exclusive  { background: #7c4dff; color: #fff; }
.song--lock-badge.song-private     { background: #6c757d; color: #fff; }
.song--lock-badge.song-preview     { background: #0d9cf0; color: #fff; }
.song--lock-cta { font-size: 0.73rem; color: var(--main-color); font-weight: 500; margin-top: 3px; }

/* Album list locked row */
li.content.song--locked { opacity: 0.72; }
.al-lock-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.62rem; font-weight: 700; padding: 1px 5px;
    border-radius: 3px; text-transform: uppercase;
    vertical-align: middle; margin-left: 2px;
}
.al-lock-badge.artist-exclusive { background: var(--main-color); color: #fff; }
.al-lock-badge.label-exclusive  { background: #7c4dff; color: #fff; }
.al-lock-badge.song-private     { background: #6c757d; color: #fff; }

/* Playlist row locked state */
.spl-row.locked { opacity: 0.72; }
.spl-row-lock { display: inline-flex; align-items: center; gap: 4px; }
.spl-row-lock svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ═══ Dashboard V2 Phase 1 ══════════════════════════════════════════════════ */

/* ── Artist Pulse ─────────────────────────────────────────────────── */
.db2-pulse {
    padding: 20px 22px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, rgba(var(--main-color-rgb,30,238,108),.08) 0%, rgba(83,111,215,.08) 100%);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
}
.db2-pulse-hdr {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 14px;
}
.db2-pulse-fire { font-size: 1.3rem; line-height: 1; }
.db2-pulse-title {
    font-size: 1rem; font-weight: 700; letter-spacing: .02em;
    color: rgba(255,255,255,.9);
}
.db2-pulse-stats {
    display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center;
}
.db2-pulse-stat {
    display: flex; flex-direction: column; gap: 2px;
}
.db2-pulse-num {
    font-size: 1.55rem; font-weight: 800; line-height: 1;
    color: var(--main-color, #1eee6c);
}
.db2-pulse-lbl {
    font-size: 0.72rem; color: rgba(255,255,255,.55); letter-spacing: .03em;
    display: flex; align-items: center; gap: 5px;
}
.db2-pulse-delta {
    font-size: 0.68rem; font-weight: 700; padding: 1px 5px;
    border-radius: 3px; letter-spacing: 0;
}
.db2-pulse-delta.db2-pulse-up { background: rgba(34,197,94,.18); color: #22c55e; }
.db2-pulse-delta.db2-pulse-dn { background: rgba(239,68,68,.18);  color: #ef4444; }
.db2-pulse-best {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.db2-pulse-best-lbl {
    font-size: 0.72rem; color: rgba(255,255,255,.45); white-space: nowrap;
}
.db2-pulse-best-name {
    font-weight: 600; font-size: 0.9rem;
    color: rgba(255,255,255,.88); cursor: pointer;
    text-decoration: none;
}
.db2-pulse-best-name:hover { color: var(--main-color, #1eee6c); text-decoration: underline; }
.db2-pulse-best-cnt {
    font-size: 0.72rem; color: rgba(255,255,255,.45);
}
.db2-pulse-vibe {
    display: flex; align-items: center; gap: 8px;
}
.db2-pulse-vibe-lbl {
    font-size: 0.72rem; color: rgba(255,255,255,.45);
}
.db2-pulse-vibe-tag {
    background: rgba(var(--main-color-rgb,30,238,108),.15);
    color: var(--main-color, #1eee6c);
    border: 1px solid rgba(var(--main-color-rgb,30,238,108),.3);
    font-size: 0.72rem; font-weight: 600; padding: 2px 9px; border-radius: 20px;
}
.db2-pulse-fallback { margin-bottom: 18px; }

/* ── Quick Actions ────────────────────────────────────────────────── */
.db2-qa-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}
.db2-qa-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 16px 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    color: rgba(255,255,255,.75);
    font-size: 0.78rem; font-weight: 600; letter-spacing: .02em;
    text-decoration: none; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.db2-qa-card svg { opacity: .8; transition: opacity .15s; }
.db2-qa-card:hover {
    background: rgba(var(--main-color-rgb,30,238,108),.1);
    border-color: rgba(var(--main-color-rgb,30,238,108),.35);
    color: var(--main-color, #1eee6c);
    transform: translateY(-2px);
    text-decoration: none;
}
.db2-qa-card:hover svg { opacity: 1; }
@media (max-width:600px) {
    .db2-qa-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── Creator Health card ──────────────────────────────────────────── */
.db2-health-card {
    padding: 18px 20px 16px;
    margin-bottom: 0;
}
.db2-health-hdr {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.db2-health-title {
    font-weight: 700; font-size: 0.95rem; color: rgba(255,255,255,.88);
}
.db2-health-pct {
    font-weight: 800; font-size: 1.1rem; color: var(--main-color, #1eee6c);
}
.db2-health-bar {
    height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); margin-bottom: 14px;
}
.db2-health-bar-inner {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, var(--main-color, #1eee6c), #536fd7);
    transition: width .4s ease;
}
.db2-health-rows {
    display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px;
}
.db2-health-item {
    display: flex; align-items: center; gap: 5px;
    font-size: 0.8rem; font-weight: 500;
}
.db2-health-item svg { flex-shrink: 0; }
.db2-health-ok  { color: #22c55e; }
.db2-health-warn { color: rgba(255,255,255,.45); }
.db2-health-cta {
    background: rgba(var(--main-color-rgb,30,238,108),.12);
    color: var(--main-color, #1eee6c);
    border: 1px solid rgba(var(--main-color-rgb,30,238,108),.3);
    font-size: 0.8rem; font-weight: 600; padding: 6px 16px; border-radius: 6px;
    text-decoration: none;
    transition: background .15s;
}
.db2-health-cta:hover {
    background: rgba(var(--main-color-rgb,30,238,108),.2);
    color: var(--main-color, #1eee6c); text-decoration: none;
}

/* ── Growth Opportunities ─────────────────────────────────────────── */
.db2-opps { padding: 18px 20px; }
.db2-opps-title {
    font-size: 0.92rem; font-weight: 700; color: rgba(255,255,255,.85);
    margin: 0 0 12px;
}
.db2-opps-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 9px;
}
.db2-opps-list li::before {
    content: '•'; color: var(--main-color, #1eee6c);
    font-size: 1.1rem; margin-right: 8px; line-height: 1;
}
.db2-opps-list li {
    display: flex; align-items: center;
    font-size: 0.85rem; color: rgba(255,255,255,.7);
}
.db2-opps-list a {
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: color .15s;
}
.db2-opps-list a:hover { color: var(--main-color, #1eee6c); text-decoration: none; }

/* ── Recent Activity feed ─────────────────────────────────────────── */
.db2-activity { padding: 18px 20px 12px; margin-top: 6px; }
.db2-activity-title {
    font-size: 0.92rem; font-weight: 700; color: rgba(255,255,255,.85);
    margin: 0 0 14px;
}
.db2-ar-list { display: flex; flex-direction: column; gap: 1px; }
.db2-ar-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.db2-ar-item:last-child { border-bottom: none; }
.db2-ar-avatar {
    width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.db2-ar-body { flex: 1; min-width: 0; font-size: 0.83rem; }
.db2-ar-who {
    font-weight: 600; color: rgba(255,255,255,.85);
}
.db2-ar-desc { color: rgba(255,255,255,.5); }
.db2-ar-time {
    font-size: 0.72rem; color: rgba(255,255,255,.35); white-space: nowrap; flex-shrink: 0;
}

/* ── KPI section labels (Audience / Creator Growth) ──────────────── */
.db2-section-label {
    font-size: 0.7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.4); margin: 18px 0 10px;
}
.db2-section-label:first-child { margin-top: 0; }

/* ── Revenue section (unchanged visuals) ─────────────────────────── */
.db2-revenue-section > .db2-section-label { margin-top: 2px; margin-bottom: 12px; }
.db2-revenue-divider { height: 1px; background: rgba(255,255,255,.06); margin: 8px 0 16px; }

/* ── Responsive tweaks ────────────────────────────────────────────── */
@media (max-width:768px) {
    .db2-pulse { padding: 16px; margin-bottom: 14px; }
    .db2-pulse-num { font-size: 1.25rem; }
    .db2-pulse-stats { gap: 14px 20px; }
    .db2-health-rows { gap: 7px 14px; }
    .db2-ar-item { padding: 8px 0; }
}

/* ═══ Dashboard V2 — Refinement Pass ════════════════════════════════════════ */

/* ── Global spacing reduction ────────────────────────────────────────────── */
.ma_dashboard .content { margin: 10px auto; }
.db2-section-label { margin: 10px 0 8px; }
.db2-kpi-grid { margin-bottom: 2px; }

/* ── Artist Pulse: taller, 3-column layout, larger type ─────────────────── */
.db2-pulse { padding: 26px 28px 24px; min-height: 118px; }
.db2-pulse-hdr { margin-bottom: 20px; }
.db2-pulse-fire { font-size: 1.45rem; }
.db2-pulse-title { font-size: 1.1rem; letter-spacing: .01em; }
.db2-pulse-cols {
    display: flex; align-items: flex-start; gap: 0; flex-wrap: wrap;
}
.db2-pulse-col {
    display: flex; flex-direction: column; gap: 5px;
    padding-right: 32px; min-width: 130px;
}
.db2-pulse-col-sep {
    border-left: 1px solid rgba(255,255,255,.1);
    padding-left: 28px; padding-right: 24px;
}
.db2-pulse-plays-num {
    font-size: 2.5rem; font-weight: 800; color: var(--main-color,#1eee6c);
    line-height: 1; letter-spacing: -.02em;
}
.db2-pulse-plays-lbl {
    font-size: 0.78rem; color: rgba(255,255,255,.5); letter-spacing: .02em;
}
.db2-pulse-delta-row { margin-top: 3px; }
.db2-pulse-delta { font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.db2-pulse-foll {
    font-size: 1rem; font-weight: 700; color: rgba(255,255,255,.8); margin-top: 6px;
}
.db2-pulse-foll-lbl { font-size: 0.78rem; font-weight: 400; color: rgba(255,255,255,.45); }
.db2-pulse-col-hdr {
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: rgba(255,255,255,.35); margin-bottom: 3px;
}
.db2-pulse-track-name {
    font-size: 1.05rem; font-weight: 700; color: rgba(255,255,255,.9);
    cursor: pointer; text-decoration: none; line-height: 1.25;
}
.db2-pulse-track-name:hover { color: var(--main-color,#1eee6c); text-decoration: none; }
.db2-pulse-track-cnt { font-size: 0.78rem; color: rgba(255,255,255,.4); margin-top: 2px; }
@media (max-width: 640px) {
    .db2-pulse { padding: 18px 18px 16px; }
    .db2-pulse-cols { flex-direction: column; gap: 14px; }
    .db2-pulse-col-sep {
        border-left: none; border-top: 1px solid rgba(255,255,255,.08);
        padding-left: 0; padding-top: 14px; padding-right: 0;
    }
    .db2-pulse-plays-num { font-size: 2rem; }
}

/* ── Quick Actions: compact pill strip ───────────────────────────────────── */
.db2-qa-strip {
    display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;
}
.db2-qab {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 18px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    color: rgba(255,255,255,.72);
    font-size: 0.83rem; font-weight: 600;
    text-decoration: none; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.db2-qab:hover {
    background: rgba(var(--main-color-rgb,30,238,108),.12);
    border-color: rgba(var(--main-color-rgb,30,238,108),.4);
    color: var(--main-color,#1eee6c);
    text-decoration: none;
}
.db2-qab-video-studio {
    background: rgba(139,92,246,.14);
    border-color: rgba(139,92,246,.38);
    color: #c4b5fd;
}
.db2-qab-video-studio:hover {
    background: rgba(139,92,246,.22);
    border-color: rgba(139,92,246,.62);
    color: #fff;
}

/* ── Creator Health: score badge + warning triangle ──────────────────────── */
.db2-health-score {
    font-weight: 800; font-size: 1.05rem; color: var(--main-color,#1eee6c);
}
.db2-health-warn {
    color: rgba(255,255,255,.48);
}
.db2-health-warn svg { color: #f59e0b; }

/* ── Best Track: expanded with listeners ─────────────────────────────────── */
.db2-best-track-panel {
    display: flex; align-items: center; padding: 14px 20px;
}
.db2-best-track-body {
    display: flex; flex-direction: column; gap: 3px; flex: 1;
}
.db2-best-track-label {
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: rgba(255,255,255,.35);
}
.db2-best-track-link {
    font-size: 1.05rem; font-weight: 700;
    color: rgba(255,255,255,.9); cursor: pointer; text-decoration: none;
}
.db2-best-track-link:hover { color: var(--main-color,#1eee6c); text-decoration: none; }
.db2-best-track-meta { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.db2-best-track-count { font-size: 0.8rem; color: rgba(255,255,255,.45); }
.db2-best-listeners {
    font-size: 0.75rem; color: #22c55e; font-weight: 600;
    background: rgba(34,197,94,.12); padding: 1px 8px; border-radius: 10px;
}
@media (max-width: 600px) {
    .db2-best-track-panel { flex-direction: column; align-items: flex-start; }
}

/* ── Revenue card (consolidated) ─────────────────────────────────────────── */
.db2-revenue-card { padding: 18px 20px; }
.db2-revenue-title {
    font-size: 0.9rem; font-weight: 700; color: rgba(255,255,255,.85);
    margin: 0 0 14px;
}
.db2-rev-rows { display: flex; flex-direction: column; }
.db2-rev-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.85rem; padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.db2-rev-row:last-child { border-bottom: none; }
.db2-rev-lbl { color: rgba(255,255,255,.5); }
.db2-rev-val { color: rgba(255,255,255,.85); font-weight: 600; text-align: right; }
.db2-revenue-empty {
    display: flex; align-items: center; justify-content: center; min-height: 68px;
}
.db2-rev-empty-msg {
    font-size: 0.85rem; color: rgba(255,255,255,.38); text-align: center; margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Artist Profile V2 + Media Hub
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Featured Release hero ────────────────────────────────────────────────── */
.ap2-featured {
    position: relative; border-radius: 14px; overflow: hidden;
    min-height: 250px; display: flex; align-items: flex-end;
    margin-bottom: 20px; background: #111114;
    box-shadow: 0 4px 24px rgba(0,0,0,.45);
}
.ap2-featured-inner {
    display: flex; align-items: stretch; min-height: 160px;
}
.ap2-featured-cover {
    position: absolute; inset: 0; width: 100%; height: 100%;
    overflow: hidden; cursor: pointer; z-index: 0;
}
.ap2-featured-cover img,
.ap2-featured-cover .ap2-featured-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center; display: block;
}
.ap2-featured-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.58) 42%, rgba(0,0,0,.25) 100%),
                linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.12) 55%, rgba(0,0,0,.42) 100%);
}
.ap2-featured-info {
    position: relative; z-index: 2; flex: 1; padding: 34px 36px 30px;
    display: flex; flex-direction: column; justify-content: flex-end; max-width: 680px;
}
.ap2-featured-label {
    font-size: 10px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: rgba(255,255,255,.38); margin-bottom: 6px;
}
.ap2-featured-title {
    font-size: 1.3rem; font-weight: 800; color: #fff; line-height: 1.25;
    text-decoration: none; margin-bottom: 8px; display: block;
}
.ap2-featured-title a { color: inherit; text-decoration: none; }
.ap2-featured-title:hover,
.ap2-featured-title a:hover { color: var(--main-color); text-decoration: none; }
.ap2-featured-meta {
    display: flex; align-items: center; gap: 14px; margin-bottom: 10px;
}
.ap2-featured-plays {
    font-size: 12px; color: rgba(255,255,255,.45);
    display: flex; align-items: center; gap: 4px;
}
.ap2-featured-desc {
    font-size: 12.5px; color: rgba(255,255,255,.45); line-height: 1.5;
    margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ap2-featured-play {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    background: transparent; color: #fff; text-decoration: none;
    transition: background .15s, color .15s;
}
.ap2-featured-play svg { filter: drop-shadow(0 8px 18px rgba(0,0,0,.55)); }
.ap2-featured-play:hover { background: rgba(0,0,0,.18); color: #fff; text-decoration: none; }
.ap2-feat-empty {
    padding: 22px 20px; text-align: center;
    font-size: 13px; color: rgba(255,255,255,.35);
    border-radius: 14px; background: rgba(255,255,255,.03); margin-bottom: 20px;
}

/* Release Checklist */
.si-release-checklist {margin: 18px 0 22px;padding: 18px;border: 1px solid rgba(139,92,246,.24);border-radius: 12px;background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(255,255,255,.035));box-shadow: 0 18px 45px rgba(0,0,0,.18);}
.si-release-checklist-dashboard {margin: 14px auto 18px;}
.si-rc-head {display: flex;align-items: flex-start;justify-content: space-between;gap: 14px;margin-bottom: 12px;}
.si-rc-head h3 {margin: 0;color: #fff;font-size: 17px;font-weight: 800;line-height: 1.2;}
.si-rc-head p {margin: 4px 0 0;color: rgba(255,255,255,.56);font-size: 12px;line-height: 1.3;}
.si-rc-head > span {display: inline-flex;align-items: center;justify-content: center;min-width: 48px;height: 30px;padding: 0 10px;border-radius: 999px;background: rgba(139,92,246,.18);color: #c4b5fd;font-size: 13px;font-weight: 800;}
.si-rc-progress {overflow: hidden;height: 9px;margin-bottom: 13px;border-radius: 999px;background: rgba(255,255,255,.08);}
.si-rc-progress span {display: block;height: 100%;border-radius: inherit;background: linear-gradient(90deg, #7c3aed, #a78bfa);box-shadow: 0 0 18px rgba(139,92,246,.35);}
.si-rc-list {display: grid;grid-template-columns: repeat(2, minmax(0,1fr));gap: 8px;margin: 0;padding: 0;list-style: none;}
.si-rc-list li,
.si-rc-list a {display: flex;align-items: center;gap: 9px;min-width: 0;min-height: 38px;padding: 8px 10px;border-radius: 9px;text-decoration: none !important;}
.si-rc-list li {background: rgba(0,0,0,.18);border: 1px solid rgba(255,255,255,.06);}
.si-rc-list li.is-done {border-color: rgba(34,197,94,.22);background: rgba(34,197,94,.075);color: rgba(220,252,231,.94);}
.si-rc-list li.is-missing {padding: 0;border-color: rgba(255,255,255,.075);}
.si-rc-list li.is-missing a {width: 100%;color: rgba(255,255,255,.82);}
.si-rc-list li.is-missing a:hover {background: rgba(139,92,246,.14);color: #fff;}
.si-rc-status {display: inline-flex;align-items: center;justify-content: center;flex: 0 0 21px;width: 21px;height: 21px;border-radius: 50%;font-size: 13px;font-weight: 900;line-height: 1;}
.is-done .si-rc-status {background: rgba(34,197,94,.16);color: #4ade80;}
.is-missing .si-rc-status {background: rgba(245,158,11,.14);color: #fbbf24;}
.si-rc-label {overflow: hidden;min-width: 0;text-overflow: ellipsis;white-space: nowrap;font-size: 13px;font-weight: 650;}
.si-rc-label em {font-style: normal;color: rgba(255,255,255,.55);font-weight: 750;}
.si-rc-action {margin-left: auto;flex: 0 0 auto;color: #c4b5fd;font-size: 11px;font-weight: 800;}
.si-rc-summary {display: flex;align-items: center;justify-content: space-between;gap: 12px;margin-top: 13px;padding-top: 12px;border-top: 1px solid rgba(255,255,255,.08);color: rgba(255,255,255,.72);font-size: 13px;font-weight: 700;}
.si-rc-summary strong {color: #fff;font-size: 13px;font-weight: 850;}
@media (max-width: 767px) {.si-rc-list {grid-template-columns: 1fr;}.si-rc-action {display: none;}}
@media (max-width: 575px) {
    .ap2-featured { min-height: 220px; }
    .ap2-featured-info { padding: 26px 22px 22px; }
    .ap2-featured-title { font-size: 1.05rem; }
}

/* ── Video Hub bridge card ────────────────────────────────────────────────── */
.ap2-vhub-bridge {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px; padding: 14px 16px; margin: 14px 0 2px;
}
.ap2-vhub-inner {
    display: flex; align-items: center; gap: 12px;
}
.ap2-vhub-inner svg { flex-shrink: 0; color: var(--main-color); opacity: .85; }
.ap2-vhub-text { flex: 1; }
.ap2-vhub-lbl {
    display: block; font-size: 11px; color: rgba(255,255,255,.38);
    font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px;
}
.ap2-vhub-handle {
    display: block; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.8);
    text-decoration: none;
}
.ap2-vhub-handle:hover { color: var(--main-color); text-decoration: none; }
.ap2-vhub-cta {
    display: inline-block; padding: 6px 14px; border-radius: 20px;
    background: rgba(255,255,255,.08); color: rgba(255,255,255,.75);
    font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none;
    transition: background .15s;
}
.ap2-vhub-cta:hover { background: var(--main-color); color: #fff; text-decoration: none; }

/* ── Creator Spotlight card ───────────────────────────────────────────────── */
.ap2-spotlight {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px; padding: 18px 18px 14px; margin-bottom: 14px;
}
.ap2-spotlight-title {
    font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: rgba(255,255,255,.38); margin: 0 0 14px;
}
.ap2-spotlight-list {
    list-style: none; margin: 0; padding: 0;
}
.ap2-spotlight-list li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05);
    gap: 8px;
}
.ap2-spotlight-list li:last-child { border-bottom: none; }
.ap2-sl-lbl { font-size: 12.5px; color: rgba(255,255,255,.45); flex-shrink: 0; }
.ap2-sl-val {
    font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.85);
    text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 60%;
}
a.ap2-sl-val { text-decoration: none; }
a.ap2-sl-val:hover,
.ap2-sl-val a:hover { color: var(--main-color); text-decoration: none; }

/* ── Sticky creator actions bar ──────────────────────────────────────────── */
.ap2-sticky-actions {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px 12px;
    background: rgba(18,18,22,.92); backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,.08);
    flex-wrap: wrap;
}
.ap2-sa-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: 20px;
    background: rgba(255,255,255,.08); color: rgba(255,255,255,.8);
    font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
    border: 1px solid rgba(255,255,255,.1); transition: background .15s, color .15s;
    white-space: nowrap;
}
.ap2-sa-btn:hover { background: var(--main-color); color: #fff; text-decoration: none; border-color: transparent; }
.ap2-sa-share:hover { background: #536fd7; }

/* ── Sticky toast ─────────────────────────────────────────────────────────── */
.ap2-sticky-toast {
    position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%) translateY(12px);
    background: #22c55e; color: #fff; padding: 9px 22px;
    border-radius: 20px; font-size: 13px; font-weight: 600;
    pointer-events: none; opacity: 0; transition: opacity .22s, transform .22s;
    z-index: 1050; white-space: nowrap;
}
.ap2-sticky-toast.ap2-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* give page bottom breathing room when sticky bar is visible */
.ma_page_content { padding-bottom: 64px; }

/* ── Sidebar V2 CTA Button ───────────────────────────────────────────────── */
.si-sb-cta-li { padding: 0 16px 20px !important; display: block !important; }
.si-sb-cta-li .si-sb-cta { all: unset; }
.si-sb-cta {
    display: flex !important; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: 8px;
    font-size: 13px; font-weight: 600; color: #fff !important;
    background: var(--main-color);
    text-decoration: none !important; cursor: pointer;
    transition: opacity 0.2s, background 0.2s;
    width: 100%; box-sizing: border-box;
}
.si-sb-cta:hover { opacity: 0.85; color: #fff !important; }
.si-sb-cta svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; }
.si-sb-cta--fan {
    background: linear-gradient(135deg, var(--second-color) 0%, var(--main-color) 100%);
}
/* suppress the sound-bar ::before decoration on the CTA li */
.si-sb-cta-li a.si-sb-cta:before { display: none !important; }

/* ================================================================
   MOBILE POLISH PASS — Phase 1
   Targets: Discover, Artist Profile, Track, Dashboard, Notifications,
            Hall of Fame, Artist Profile sticky actions
   Breakpoints: 768 / 640 / 480 / 400 / 380px
   No duplicates — all checked against existing rules above.
   ================================================================ */

/* ── Global: keep mobile pages in the document scroll flow ──────── */
@media (max-width: 768px) {
    html,
    body:not(.side_open):not(.modal-open) {
        height: auto;
        min-height: 100%;
        overflow-y: auto;
    }
    .ma_page_content {
        min-height: 100vh;
        overflow-y: visible;
    }
    .ma_pc_inner {
        height: auto;
        min-height: 100vh;
        overflow-x: clip;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }
}

/* ──────────────────────────────────────────────────────────────────
   DISCOVER
   ────────────────────────────────────────────────────────────────── */

/* Hero CTAs: stack full-width on small phones */
@media (max-width: 480px) {
    .discover-hero-ctas {
        flex-direction: column;
        align-items: stretch;
    }
    .discover-hero-ctas .sh-btn {
        justify-content: center;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }
    .discover-hero { padding: 16px 14px 18px; gap: 16px; }
}

/* ──────────────────────────────────────────────────────────────────
   ARTIST PROFILE — tab strip horizontal scroll
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Clip at container, scroll inside the ul */
    .ma_tabs.mus_user_tabs { overflow: hidden; }
    .mus_user_tabs ul {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .mus_user_tabs ul::-webkit-scrollbar { display: none; }
    .mus_user_tabs ul li { flex-shrink: 0; }
}

/* ──────────────────────────────────────────────────────────────────
   ARTIST PROFILE — sticky action bar safe area + compact
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ap2-sticky-actions {
        padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
        gap: 6px;
    }
    .ap2-sa-btn { padding: 8px 14px; font-size: 12px; }
}

/* ──────────────────────────────────────────────────────────────────
   NOTIFICATIONS — tab row scrolls on narrow phones
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
    .sn-tabs-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .sn-tabs-wrap::-webkit-scrollbar { display: none; }
    .sn-tabs { min-width: max-content; }
    .sn-page { padding-left: 12px; padding-right: 12px; }
    .sn-item { padding: 10px 12px; border-radius: 8px; }
    .sn-avatar { width: 38px; height: 38px; }
    .sn-ach-icon { width: 38px; height: 38px; }
    .sn-body p { font-size: .8rem; }
}

/* ──────────────────────────────────────────────────────────────────
   DASHBOARD — recent notifications widget compact
   (db2-rn-* defined inline in dashboard/content.html)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .db2-rn-item { padding: 10px 12px; gap: 10px; }
    .db2-rn-avt { width: 30px; height: 30px; }
    .db2-rn-icon { font-size: .6rem; }
    .db2-rn-name { font-size: .78rem; }
    .db2-rn-desc { font-size: .72rem; }
}

/* ──────────────────────────────────────────────────────────────────
   HALL OF FAME — tabs and legend wrap at 380px
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
    .hof-tabs { flex-wrap: wrap; justify-content: center; }
    .hof-tab  { padding: 6px 14px; }
    .hof-hero-title { font-size: 1.6rem; }
    .hof-legend { flex-wrap: wrap; gap: 8px 14px; }
}

/* ── Modal z-index — must render above .ma_player (z-index: 9999) ─────────
   All Bootstrap modals, fan-subscription popups, and the fan-tier editor
   need to sit above the fixed audio player. Do NOT raise .ma_player. */
.modal-backdrop                 { z-index: 10040 !important; }
.modal                          { z-index: 10050 !important; }
.modal .dropdown-menu,
.modal .select2-container--open { z-index: 10060 !important; }

/* Fan Club Phase 2 */
.si-fc-page{max-width:860px;padding-top:24px;padding-bottom:48px}.si-fc-page-head{margin-bottom:18px}.si-fc-page-head span{color:#a78bfa;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.si-fc-page-head h2{margin:4px 0;color:#fff;font-weight:900}.si-fc-page-head p{margin:0;color:rgba(255,255,255,.58)}
.si-fc-composer,.si-fc-post{margin-bottom:16px;padding:18px;border:1px solid rgba(139,92,246,.2);border-radius:16px;background:rgba(255,255,255,.04)}.si-fc-composer h3{margin:0 0 12px;color:#fff;font-size:16px}.si-fc-composer textarea{width:100%;min-height:100px;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(0,0,0,.18);color:#fff;resize:vertical}.si-fc-composer>div{display:flex;gap:10px;margin-top:10px}.si-fc-composer select,.si-fc-comment-form input{flex:1;min-width:0;padding:9px 11px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#1d1d25;color:#fff}.si-fc-composer button,.si-fc-comment-form button,.si-fc-interactions button,.si-fc-manage button{border:0;border-radius:8px;background:#7c3aed;color:#fff;font-weight:800;padding:9px 14px}
.si-fc-post.is-pinned{border-color:rgba(167,139,250,.58);box-shadow:0 12px 36px rgba(124,58,237,.12)}.si-fc-post header,.si-fc-author,.si-fc-interactions,.si-fc-comment-form{display:flex;align-items:center}.si-fc-post header{justify-content:space-between;gap:12px}.si-fc-author{gap:10px;color:#fff}.si-fc-author:hover{color:#fff}.si-fc-author img,.si-fc-comment img{width:42px;height:42px;border-radius:50%;object-fit:cover}.si-fc-author span{display:flex;flex-direction:column}.si-fc-author small{color:rgba(255,255,255,.48)}.si-fc-manage{display:flex;gap:6px}.si-fc-manage button{padding:5px 8px;background:rgba(255,255,255,.08);font-size:11px}.si-fc-body{padding:16px 0;color:rgba(255,255,255,.9);line-height:1.6}.si-fc-attachment{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;background:rgba(255,255,255,.06);color:#fff}.si-fc-attachment:hover{color:#fff}.si-fc-attachment img{width:54px;height:54px;border-radius:8px;object-fit:cover}.si-fc-attachment span{display:flex;flex-direction:column}.si-fc-attachment small{color:#a78bfa;text-transform:uppercase;font-weight:800}.si-fc-interactions{justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.5);font-size:12px}.si-fc-interactions button{padding:5px 9px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.7)}.si-fc-interactions button.is-liked{background:rgba(124,58,237,.25);color:#c4b5fd}.si-fc-comments{display:flex;flex-direction:column;gap:10px;margin-top:12px}.si-fc-comment{display:flex;gap:9px}.si-fc-comment img{width:30px;height:30px}.si-fc-comment a{color:#fff;font-size:12px;font-weight:850}.si-fc-comment p{margin:1px 0 0;color:rgba(255,255,255,.7);font-size:13px}.si-fc-comment-form{gap:8px;margin-top:12px}.si-fc-comment-form button{padding:8px 10px;font-size:12px}
@media(max-width:600px){.si-fc-page{padding-left:8px;padding-right:8px}.si-fc-composer>div{align-items:stretch;flex-direction:column}.si-fc-post{padding:14px}.si-fc-manage{flex-direction:column}}