/* =============================================================================
   MYCDBAG — Main Stylesheet
   Structure:
     1.  Design Tokens (CSS Custom Properties)
     2.  Reset & Base
     3.  Typography
     4.  Layout Shell (app-card grid)
     5.  Sidebar
     6.  Top Bar
     7.  Content Area
     8.  Components — Cards, Songs, Playlists, Carousel
     9.  Player Bar
    10.  Utilities
    11.  Auth Pages
    12.  Responsive
    13+. Feature sections (upload, admin, artist studio, playlists…)
============================================================================= */

/* ── 1. Design Tokens ────────────────────────────────────────────────────── */
:root {
    /* Brand colours */
    --color-brand:        #007bff;
    --color-brand-light:  #eff6ff;
    --color-brand-dark:   #003366;

    /* Studio palette (artist / admin accent) */
    --color-studio:       #7c3aed;
    --color-studio-mid:   #2563eb;
    --color-studio-sky:   #0ea5e9;
    --color-studio-grad:  linear-gradient(135deg, #7c3aed 0%, #2563eb 60%, #0ea5e9 100%);
    --for-you-hero-background: linear-gradient(135deg, #7c3aed 0%, #2563eb 55%, #0ea5e9 100%);
    --for-you-hero-overlay:
        linear-gradient(90deg, rgba(4, 17, 42, .56), rgba(4, 17, 42, .05) 62%),
        linear-gradient(to bottom, rgba(0, 0, 0, .04), rgba(0, 0, 0, .30));

    /* Surfaces */
    --color-bg:           #e8ecf3;
    --color-surface:      #ffffff;
    --color-surface-alt:  #f5f7ff;
    --color-border:       #eaecf0;

    /* Text */
    --color-text:         #1a1a2e;
    --color-text-muted:   #6b7280;
    --color-text-inverse: #ffffff;

    /* Player bar */
    --color-player-bg:    #003366;

    /* Elevation */
    --shadow-xs:  0 1px  4px rgba(0,0,0,.05);
    --shadow-sm:  0 2px  8px rgba(0,0,0,.07);
    --shadow-md:  0 6px 18px rgba(0,0,0,.10);
    --shadow-lg:  0 14px 28px rgba(0,0,0,.14);

    /* Radii */
    --radius-sm:  6px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-xl:  20px;
    --radius-pill: 9999px;

    /* Spacing scale */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  32px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;

    /* Sidebar width */
    --sidebar-width:  210px;
    --player-height:  76px;
}

/* =============================================================================
   SONGS CATALOG — EDITORIAL MUSIC LIBRARY
============================================================================= */
.page-songs .sng {
    padding-bottom: 72px;
}

.page-songs .sng-page-header {
    min-height: 178px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 79% 10%, rgba(103, 232, 249, .16), transparent 24%),
        radial-gradient(circle at 105% 110%, rgba(124, 58, 237, .34), transparent 42%),
        linear-gradient(120deg, #071d3b 0%, #143b84 54%, #086a9f 100%);
    box-shadow: 0 20px 46px rgba(15, 43, 92, .19);
}
.page-songs .sng-page-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 220px;
    height: 220px;
    right: 96px;
    top: -115px;
    border: 34px solid rgba(255, 255, 255, .045);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .05),
        inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.page-songs .sng-page-header__title {
    max-width: 760px;
}
.page-songs .sng-page-header__sub {
    max-width: 650px;
}

.page-songs .sng-filter-bar {
    margin-top: 18px;
    padding: 14px 16px 12px;
    border: 1px solid rgba(211, 220, 233, .92);
    border-radius: 16px;
    background: rgba(255, 255, 255, .91);
    box-shadow: 0 12px 34px rgba(15, 23, 42, .07);
    backdrop-filter: blur(18px);
}
.page-songs .sng-filter-bar__row {
    gap: 10px;
}
.page-songs .sng-catalog-search {
    min-width: 220px;
    max-width: 420px;
    height: 40px;
    flex: 1 1 300px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    color: #7b879b;
    background: #f5f7fb;
    border: 1px solid #e1e7f0;
    border-radius: 11px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.page-songs .sng-catalog-search:focus-within {
    color: #5b48dd;
    background: #fff;
    border-color: rgba(109, 78, 232, .52);
    box-shadow: 0 0 0 3px rgba(109, 78, 232, .10);
}
.page-songs .sng-catalog-search input {
    min-width: 0;
    height: 100%;
    flex: 1;
    color: #18243a;
    font: inherit;
    font-size: 13px;
    border: 0;
    outline: 0;
    background: transparent;
}
.page-songs .sng-catalog-search input::placeholder {
    color: #919bad;
}
.page-songs .sng-catalog-search input::-webkit-search-cancel-button {
    display: none;
}
.page-songs .sng-catalog-search button {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #7a8496;
    border: 0;
    border-radius: 50%;
    background: #e7ebf2;
    cursor: pointer;
}
.page-songs .sng-catalog-search button:hover {
    color: #fff;
    background: #6d4ee8;
}
.page-songs .sng-sort-wrap {
    height: 40px;
    padding-left: 12px;
    border-color: #e1e7f0;
    border-radius: 11px;
    background: #fff;
}
.page-songs .sng-results-count {
    min-width: 72px;
    padding: 7px 12px;
    text-align: center;
    color: #596579;
    background: #f6f7fb;
    border: 1px solid #e3e7ef;
    border-radius: 999px;
}
.page-songs .sng-genre-strip {
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid #edf0f5;
}
.page-songs .sng-pill {
    min-height: 34px;
    padding-inline: 15px;
    font-weight: 700;
    border-radius: 999px;
}

.page-songs .sng-catalog-heading {
    margin: 32px 2px 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.page-songs .sng-catalog-heading__eyebrow {
    margin: 0 0 5px;
    color: #6d4ee8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.page-songs .sng-catalog-heading h2 {
    margin: 0;
    color: #142139;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.12;
    letter-spacing: -.035em;
}
.page-songs .sng-catalog-heading > div > p:last-child {
    max-width: 620px;
    margin: 7px 0 0;
    color: #737f92;
    font-size: 13px;
    line-height: 1.6;
}
.page-songs .sng-catalog-heading__live {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-bottom: 4px;
    color: #6c7789;
    font-size: 11px;
    font-weight: 700;
}

.albdet-col-plays.is-updated,
[data-album-total-plays].is-updated {
    animation: albdet-count-update .55s ease;
}

@keyframes albdet-count-update {
    0% { color: inherit; transform: translateY(0); }
    35% { color: #7c3aed; transform: translateY(-1px); }
    100% { color: inherit; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .albdet-col-plays.is-updated,
    [data-album-total-plays].is-updated {
        animation: none;
    }
}
.page-songs .sng-catalog-heading__live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .11);
}

.page-songs .sng-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
    gap: 16px;
}
.page-songs .sng-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(215, 222, 233, .94);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .065);
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.page-songs .sng-card:hover {
    transform: translateY(-5px);
    border-color: rgba(111, 78, 232, .32);
    box-shadow: 0 20px 38px rgba(26, 35, 64, .13);
}
.page-songs .sng-card--playing {
    border-color: rgba(109, 78, 232, .58);
    box-shadow:
        0 0 0 2px rgba(109, 78, 232, .10),
        0 18px 38px rgba(72, 52, 158, .16);
}
.page-songs .sng-card__cover {
    position: relative;
    aspect-ratio: 1.45 / 1;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .9), transparent 18%),
        linear-gradient(145deg, #e9f3ff, #eee8ff);
}
.page-songs .sng-card__cover::after {
    content: "";
    position: absolute;
    inset: 45% 0 0;
    pointer-events: none;
    background: linear-gradient(transparent, rgba(5, 12, 29, .48));
    opacity: 0;
    transition: opacity .22s ease;
}
.page-songs .sng-card:hover .sng-card__cover::after,
.page-songs .sng-card--playing .sng-card__cover::after {
    opacity: 1;
}
.page-songs .sng-card__art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.page-songs .sng-card:hover .sng-card__art {
    transform: scale(1.055);
}
.page-songs .sng-card__art--fallback {
    display: grid;
    place-items: center;
    color: rgba(77, 88, 129, .42);
}
.page-songs .sng-card__art--fallback svg {
    width: 42px;
    height: 42px;
    filter: drop-shadow(0 8px 10px rgba(84, 67, 159, .14));
}
.page-songs .sng-card__type {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;
    padding: 5px 8px;
    color: rgba(255, 255, 255, .93);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    background: rgba(8, 20, 43, .62);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    backdrop-filter: blur(8px);
}
.page-songs .sng-card__play {
    z-index: 3;
    width: 52px;
    height: 52px;
    inset: auto 14px 14px auto;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translateY(8px) scale(.94);
    color: #fff;
    background: linear-gradient(135deg, #7047ed, #296bea);
    border: 2px solid rgba(255, 255, 255, .76);
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(16, 27, 58, .32);
    transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.page-songs .sng-card:hover .sng-card__play,
.page-songs .sng-card--playing .sng-card__play,
.page-songs .sng-card__play:focus-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.page-songs .sng-card__play:hover {
    box-shadow: 0 13px 28px rgba(47, 43, 135, .42);
    transform: translateY(-1px) scale(1.04);
}
.page-songs .sng-card__body {
    padding: 11px 14px 9px;
}
.page-songs .sng-card__title {
    display: block;
    overflow: hidden;
    color: #17213a;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.012em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-songs .sng-card__title:hover {
    color: #6547dd;
}
.page-songs .sng-card__artist {
    display: block;
    overflow: hidden;
    margin-top: 5px;
    color: #788397;
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-songs a.sng-card__artist:hover {
    color: #5f48cb;
}
.page-songs .sng-card__meta {
    min-height: 27px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.page-songs .sng-genre-chip {
    max-width: calc(100% - 44px);
    overflow: hidden;
    padding: 5px 8px;
    color: #6644dc;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #f2efff;
    border: 1px solid #dfd7ff;
    border-radius: 6px;
}
.page-songs .sng-card__dur {
    color: #818b9c;
    font-size: 10px;
    font-weight: 600;
}
.page-songs .sng-card__footer {
    margin-top: 10px;
    padding-top: 11px;
    border-top: 1px solid #edf0f5;
}
.page-songs .sng-card__plays {
    color: #808a9b;
    font-size: 10px;
    font-weight: 700;
}
.page-songs .sng-card__actions {
    gap: 4px;
}
.page-songs :is(.sng-card__like, .sng-card__add-pl, .sng-card__share) {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #727e91;
    border: 1px solid #e0e5ed;
    border-radius: 50%;
    background: #f8f9fc;
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.page-songs :is(.sng-card__like, .sng-card__add-pl, .sng-card__share):hover {
    color: #6546df;
    border-color: #d5caff;
    background: #f1edff;
    transform: translateY(-1px);
}
.page-songs .sng-card__like--liked {
    color: #e43d68;
    border-color: #ffd1dc;
    background: #fff3f6;
}

.page-songs .sng-no-results {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px;
    text-align: center;
    color: #778397;
    border: 1px dashed #cfd7e4;
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 0%, rgba(112, 71, 237, .07), transparent 42%),
        #fff;
}
.page-songs .sng-no-results[hidden] {
    display: none;
}
.page-songs .sng-no-results__icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 15px;
    color: #6c4be4;
    border-radius: 18px;
    background: #f0ecff;
    box-shadow: 0 9px 22px rgba(80, 58, 171, .12);
}
.page-songs .sng-no-results strong {
    margin-bottom: 6px;
    color: #1f2a40;
    font-size: 17px;
}
.page-songs .sng-no-results span:last-child {
    font-size: 12px;
}
.page-songs .sng-load-more-row {
    padding-top: 30px;
}
.page-songs .sng-load-more {
    min-height: 42px;
    padding-inline: 20px;
    color: #5d42cc;
    font-weight: 800;
    border-color: #d9d0fb;
    border-radius: 999px;
    background: #f6f3ff;
}
.page-songs .sng-load-more:hover {
    color: #fff;
    background: linear-gradient(135deg, #7047ed, #296bea);
    border-color: transparent;
}

@media (max-width: 1050px) {
    .page-songs .sng-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .page-songs .sng-page-header {
        min-height: 164px;
    }
    .page-songs .sng-filter-bar__row {
        align-items: stretch;
        flex-wrap: wrap;
    }
    .page-songs .sng-catalog-search {
        min-width: 100%;
        max-width: none;
        flex-basis: 100%;
    }
    .page-songs .sng-sort-wrap {
        flex: 1;
    }
    .page-songs .sng-catalog-heading {
        margin-top: 26px;
    }
    .page-songs .sng-catalog-heading__live {
        display: none;
    }
    .page-songs .sng-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (max-width: 500px) {
    .page-songs .sng {
        padding-bottom: 50px;
    }
    .page-songs .sng-page-header {
        min-height: 154px;
        padding: 22px 20px;
    }
    .page-songs .sng-page-header__aside {
        display: none;
    }
    .page-songs .sng-filter-bar {
        margin-inline: 0;
        padding-inline: 12px;
        border-radius: 14px;
    }
    .page-songs .sng-results-count {
        min-width: auto;
    }
    .page-songs .sng-catalog-heading {
        margin-inline: 1px;
    }
    .page-songs .sng-catalog-heading > div > p:last-child {
        display: none;
    }
    .page-songs .sng-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .page-songs .sng-card {
        border-radius: 13px;
    }
    .page-songs .sng-card__body {
        padding: 12px 11px 10px;
    }
    .page-songs .sng-card__type {
        top: 8px;
        left: 8px;
    }
    .page-songs .sng-card__play {
        width: 43px;
        height: 43px;
        right: 9px;
        bottom: 9px;
        opacity: 1;
        transform: none;
    }
    .page-songs .sng-card__title {
        font-size: 12px;
    }
    .page-songs .sng-card__meta {
        margin-top: 9px;
    }
    .page-songs .sng-genre-chip {
        max-width: 100%;
    }
    .page-songs .sng-card__dur {
        display: none;
    }
    .page-songs .sng-card__footer {
        align-items: flex-end;
    }
    .page-songs .sng-card__plays {
        font-size: 9px;
    }
    .page-songs :is(.sng-card__like, .sng-card__add-pl, .sng-card__share) {
        width: 27px;
        height: 27px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-songs .sng-card,
    .page-songs .sng-card__art,
    .page-songs .sng-card__play {
        transition: none;
    }
}

/* ── 2. Reset & Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    background-color: var(--color-bg);
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color: var(--color-text);
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

a   { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }

/* ── 3. Typography ───────────────────────────────────────────────────────── */
.text-xs   { font-size: 11px; }
.text-sm   { font-size: 12px; }
.text-base { font-size: 14px; }
.text-muted { color: var(--color-text-muted); }
.text-upper {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
    color: #ccc;
}
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 4. Layout Shell ─────────────────────────────────────────────────────── */
.app-card {
    background: var(--color-surface);
    width: 100%;
    height: 100vh;
    border-radius: 0;
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: 1fr var(--player-height);
    grid-template-areas:
        "sidebar main"
        "player  player";
    overflow: hidden;
}

/* Wrapper for topbar + scrollable content */
.main-wrapper {
    grid-area: main;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* ── 5. Sidebar ──────────────────────────────────────────────────────────── */
.sidebar {
    grid-area: sidebar;
    width: var(--sidebar-width);
    padding: 22px var(--space-5);
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    transition: width 0.22s ease, padding 0.22s ease;
}
.sidebar::-webkit-scrollbar { display: none; }

/* ── Sidebar header row (logo + toggle button) ─── */
.sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    min-width: 0;
}
/* Toggle button */
.sidebar__toggle {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    cursor: pointer;
    color: var(--color-text-muted);
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    transition: color var(--transition-fast), background var(--transition-fast),
                border-color var(--transition-fast), transform 0.25s ease;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.sidebar__toggle:hover {
    color: var(--color-brand-dark);
    background: var(--color-surface-alt);
    border-color: rgba(0,51,102,.2);
}
.sidebar__toggle-icon { flex-shrink: 0; }

/* Sidebar labels — smooth hide/show during collapse transition */
.sidebar__label {
    overflow: hidden;
    white-space: nowrap;
    max-width: 180px;
    opacity: 1;
    transition: max-width 0.22s ease, opacity 0.16s ease;
}

/* ── Collapsed state ─── */
.sidebar--collapsed {
    width: 52px;
    padding: 22px 10px;
    overflow: visible; /* allow tooltips to escape sidebar clip */
}
/* Stack header vertically so icon + toggle never fight for horizontal space */
.sidebar--collapsed .sidebar__header {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-4);
}
/* Smooth fade-shrink for all text labels */
.sidebar--collapsed .sidebar__label {
    max-width: 0;
    opacity: 0;
    pointer-events: none;
}
/* Non-animated elements still use display:none */
.sidebar--collapsed .nav-section__title,
.sidebar--collapsed .nav-add-btn {
    display: none;
}
.sidebar--collapsed .sidebar__toggle {
    transform: rotate(180deg);
}
.sidebar--collapsed .logo {
    justify-content: center;
    overflow: visible;
    gap: 0;
}
.sidebar--collapsed .nav-item {
    justify-content: center;
    padding: 7px 0;
}
.sidebar--collapsed .nav-item__icon {
    margin: 0;
    width: 18px; height: 18px;
}
.sidebar--collapsed .nav-item-wrap {
    justify-content: center;
}
/* Tooltip on hover when collapsed */
.sidebar--collapsed .nav-item {
    position: relative;
}
.sidebar--collapsed .nav-item[data-label]::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: rgba(30,30,30,.92);
    color: #e8e8e8;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .02em;
    padding: 2px 6px;
    border-radius: 3px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s ease;
    z-index: 100;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.sidebar--collapsed .nav-item[data-label]:hover::after {
    opacity: 1;
}

/* When sidebar is collapsed, shrink the grid column */
.app-card:has(.sidebar--collapsed) {
    grid-template-columns: 52px 1fr;
}

.logo {
    color: var(--color-brand);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 16px;
    font-weight: 700;
    min-width: 0;
}
/* Always show only the bag illustration (left ~40% of the image) */
.logo-img {
    height: 34px;
    width: 34px;
    object-fit: cover;
    object-position: 8% center;
    flex-shrink: 0;
    border-radius: 6px;
}
.logo-img--custom {
    object-fit: contain;
    object-position: center;
    background: transparent;
}
/* Colored text matching the logo palette */
.logo-text {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.3px;
    line-height: 1;
    white-space: nowrap;
}
.logo-text__plain { color: #003366; }
.logo-text__cd    { color: #1a90ff; }

.nav-section { margin-bottom: var(--space-2); }
.nav-section__title {
    font-size: 11px;
    color: #ccc;
    text-transform: uppercase;
    margin: 14px 0 6px;
    letter-spacing: 0.05em;
    transition: opacity 0.15s ease;
}

.nav-item {
    padding: 8px var(--space-2);
    color: #4b5563;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
    position: relative;
}
.nav-item:hover {
    background: rgba(124,58,237,.07);
    color: #4f46e5;
}
.nav-item.active {
    background: linear-gradient(135deg, rgba(124,58,237,.13) 0%, rgba(37,99,235,.13) 60%, rgba(14,165,233,.10) 100%);
    color: #7c3aed;
    font-weight: 600;
}
/* Active left accent bar */
.nav-item.active::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: linear-gradient(180deg, #7c3aed, #2563eb);
    border-radius: 0 3px 3px 0;
}
.nav-item__icon  { width: 16px; height: 16px; flex-shrink: 0; }

/* ── 6. Top Bar ──────────────────────────────────────────────────────────── */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    gap: var(--space-3);
    flex-shrink: 0;
    background: var(--color-surface);
    position: relative;
    z-index: 5000;
}

.search-wrap {
    position: relative;
    flex: 1;
    max-width: 720px;
    z-index: 5100;
}
.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--color-text-muted);
    pointer-events: none;
}
.search-input {
    background: #f5f5f5;
    border: none;
    padding: 9px 16px 9px 36px;
    border-radius: var(--radius-pill);
    width: 100%;
    font-size: 13px;
    outline: none;
    transition: background var(--transition-fast);
    color: var(--color-text);
}
.search-input:focus { background: #eef2ff; }
.search-input::placeholder { color: var(--color-text-muted); }

/* ── Global Search Dropdown ──────────────────────────────────────────────── */
.search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    min-width: 360px;
    background: rgba(248, 249, 253, .96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(31, 41, 55, .12), 0 2px 6px rgba(31, 41, 55, .05);
    border: 1px solid #e6e8f0;
    z-index: 5200;
    max-height: 540px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.search-dropdown::-webkit-scrollbar { width: 4px; }
.search-dropdown::-webkit-scrollbar-track { background: transparent; }
.search-dropdown::-webkit-scrollbar-thumb { background: #d7dae5; border-radius: 2px; }
.search-dropdown[hidden] { display: none; }

.search-dropdown__section-header {
    padding: 10px 14px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-muted);
    border-top: 1px solid #e7e9f0;
}
.search-dropdown__section:first-child .search-dropdown__section-header { border-top: none; }

.search-dropdown__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background var(--transition-fast);
    text-decoration: none;
    color: inherit;
    outline: none;
}
.search-dropdown__row:hover,
.search-dropdown__row.is-focused { background: rgba(237, 233, 254, .62); }

.search-dropdown__art {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--color-surface-alt);
}
.search-dropdown__art--circle { border-radius: 50%; }

.search-dropdown__art-placeholder {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(37,99,235,.12));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #7c3aed;
}
.search-dropdown__art-placeholder--circle { border-radius: 50%; }

.search-dropdown__info { flex: 1; min-width: 0; }
.search-dropdown__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-dropdown__sub {
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.search-dropdown__badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #7c3aed;
    background: rgba(124,58,237,.1);
    border-radius: 4px;
    padding: 2px 7px;
    flex-shrink: 0;
}
.search-dropdown__empty {
    padding: 28px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.6;
}
.search-dropdown__loading {
    padding: 20px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.search-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-border);
    border-top-color: #7c3aed;
    border-radius: 50%;
    animation: srch-spin .65s linear infinite;
    flex-shrink: 0;
}
@keyframes srch-spin { to { transform: rotate(360deg); } }

mark.search-hl {
    background: none;
    color: #7c3aed;
    font-weight: 700;
}

.topbar-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }

.likes-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: #e05;
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    transition: color var(--transition-fast);
}
.likes-btn svg { width: 14px; height: 14px; }
.likes-btn:hover { color: #c00; }

.user-name { font-size: 13px; font-weight: 600; color: var(--color-text); }
.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-border);
}

/* ── User menu (avatar trigger + dropdown) ─────────────────────────── */
.user-menu { position: relative; }

/* Trigger button */
.user-menu__trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 8px 5px 5px;
    border-radius: var(--radius-pill);
    transition: background var(--transition-fast);
    outline: none;
}
.user-menu__trigger:hover,
.user-menu:focus-within .user-menu__trigger,
.user-menu--open .user-menu__trigger {
    background: var(--color-surface-alt);
}
.user-menu__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-border);
    flex-shrink: 0;
    transition: border-color var(--transition-fast);
}
.user-menu__trigger:hover .user-menu__avatar { border-color: var(--color-brand); }
.user-menu__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-menu__caret {
    color: var(--color-text-muted);
    transition: transform .2s;
    flex-shrink: 0;
}
.user-menu--open .user-menu__caret { transform: rotate(180deg); }

/* Dropdown panel */
.user-menu__dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 200px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2) 0;
    z-index: 200;
    opacity: 0;
    transform: translateY(-8px) scale(.97);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    transform-origin: top right;
}
/* Visibility follows the trigger's explicit expanded state. */
.user-menu--open .user-menu__dropdown {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.user-menu__dropdown[hidden] { display: none; }
.user-menu__dropdown {
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Profile header inside dropdown */
.user-menu__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}
.user-menu__header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-border);
    flex-shrink: 0;
}
.user-menu__header-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.user-menu__header-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-menu__header-email {
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Divider */
.user-menu__divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--space-2) 0;
}

/* Menu items (both <a> and <button>) */
.user-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: 9px var(--space-4);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
    text-align: left;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.user-menu__item svg {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: color var(--transition-fast);
}
.user-menu__item:hover {
    background: var(--color-surface-alt);
    color: var(--color-brand);
}
.user-menu__item:hover svg { color: var(--color-brand); }

/* Danger (logout) variant */
.user-menu__item--danger { color: var(--color-text); }
.user-menu__item--danger:hover { background: #fff1f1; color: #dc2626; }
.user-menu__item--danger:hover svg { color: #dc2626; }

/* Sign-out icon button (legacy — kept for safety) */
.topbar-logout-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
}
.topbar-logout-btn svg { width: 16px; height: 16px; }
.topbar-logout-btn:hover { color: var(--color-text); }

/* Topbar user cluster base */
.topbar-user {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Guest sign-in / sign-up links */
.topbar-auth-link {
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    color: var(--color-text-muted);
}
.topbar-auth-link:hover { color: var(--color-text); background: var(--color-surface-alt); }
.topbar-auth-link--primary {
    background: var(--color-studio-grad);
    color: #fff;
    box-shadow: 0 2px 8px rgba(124,58,237,.28);
}
.topbar-auth-link--primary:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #1d4ed8 60%, #0284c7 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(124,58,237,.38);
}

/* Studio section header in user dropdown */
.user-menu__studio-section {
    padding: 6px var(--space-4) 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.user-menu__studio-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-studio);
}
.user-menu__studio-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #fff;
    background: var(--color-studio-grad);
    padding: 1px 7px;
    border-radius: var(--radius-pill);
}
.user-menu__item--studio {
    color: var(--color-studio);
}
.user-menu__item--studio svg { color: var(--color-studio); }
.user-menu__item--studio:hover { background: rgba(124,58,237,.07); color: #6d28d9; }

/* ── 7. Content Area ─────────────────────────────────────────────────────── */
.content {
    padding: var(--space-5) var(--space-6);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
/* No padding when the content area hosts a full-height sp-wrap layout */
.content:has(.sp-wrap) { padding: 0; overflow: hidden; }

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}
.section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── 8. Components ───────────────────────────────────────────────────────── */

/* Shared icon button */
.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    font-size: 12px;
    transition: color var(--transition-fast);
}
.icon-btn svg  { width: 16px; height: 16px; }
.icon-btn:hover { color: var(--color-brand); }

/* Carousel */
/* ═══════════════════════════════════════════════════════════════════════════
   HOME PAGE  (.hm-*)
═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hm-hero {
    position: relative;
    background: var(--for-you-hero-background);
    margin: -20px -24px 0;
    overflow: hidden;
}
.hm-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.10) 0%, rgba(0,0,0,.42) 100%);
    pointer-events: none;
}
.hm-hero__waves {
    position: absolute; inset: 0; pointer-events: none;
}
.hm-hero__waves svg { width: 100%; height: 100%; }
.hm-hero__wave--1 { fill: rgba(255,255,255,.07); }
.hm-hero__wave--2 { fill: rgba(255,255,255,.11); }
.hm-hero__body {
    position: relative; z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 20px 24px 14px;
}
.hm-hero__left { flex: 1; min-width: 0; }
.hm-hero__badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; letter-spacing: .12em;
    color: rgba(255,255,255,.75);
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--radius-pill);
    padding: 4px 10px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.hm-hero__title {
    font-size: clamp(22px, 3.5vw, 36px);
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.2;
    letter-spacing: -.02em;
}
.hm-hero__sub {
    font-size: 13px;
    color: rgba(255,255,255,.65);
    margin: 0;
    max-width: 420px;
    line-height: 1.55;
}
/* Stats glass panel */
.hm-hero__stats {
    display: flex; align-items: center;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    padding: 16px 24px;
    flex-shrink: 0;
    backdrop-filter: blur(8px);
    position: relative; z-index: 1;
}
.hm-stat {
    display: flex; flex-direction: column; align-items: center;
    padding: 0 20px; gap: 2px;
}
.hm-stat__value {
    font-size: 26px; font-weight: 800; color: #fff;
    line-height: 1; letter-spacing: -.02em;
}
.hm-stat__label {
    font-size: 10px; color: rgba(255,255,255,.5);
    font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
}
.hm-stat__divider {
    width: 1px; height: 34px;
    background: rgba(255,255,255,.16); flex-shrink: 0;
}

/* ── Quick-nav tiles ──────────────────────────────────────────────────────── */
.hm-nav-tiles {
    position: relative; z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 24px 14px;
}
.hm-nav-tile {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px;
    border-radius: 99px;
    background: rgba(255,255,255,.12);
    border: 1.5px solid rgba(255,255,255,.2);
    color: #fff;
    text-decoration: none;
    font-size: 13px; font-weight: 600;
    transition: background .15s, border-color .15s, transform .12s;
    backdrop-filter: blur(4px);
}
.hm-nav-tile:hover {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.45);
    color: #fff;
    transform: translateY(-1px);
}
.hm-nav-tile svg { opacity: .85; }

/* ── Section wrappers ─────────────────────────────────────────────────────── */
.hm-section { margin-top: var(--space-6); }
.hm-section--top { margin-top: var(--space-2); }
.hm-section__hd {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.hm-section__heading {
    min-width: 0;
}
.hm-section__eyebrow {
    display: block;
    margin-bottom: 3px;
    color: #7657dc;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .13em;
}
.hm-section__heading > p {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: 11px;
    line-height: 1.4;
}
.hm-section__title {
    margin: 0;
    font-size: 17px; font-weight: 800;
    color: var(--color-text);
    letter-spacing: -.025em;
}
.hm-section__hd-right {
    display: flex; align-items: center; gap: 14px;
}
.hm-section__see-all {
    font-size: 12px; font-weight: 600;
    color: var(--color-text-muted); text-decoration: none;
    white-space: nowrap;
    transition: color .15s;
}
.hm-section__see-all:hover { color: var(--color-text); text-decoration: none; }
.hm-for-you-next { border: 0; background: transparent; color: var(--color-text-muted); font: inherit; font-size: 12px; font-weight: 700; padding: 4px 0; cursor: pointer; white-space: nowrap; }
.hm-for-you-next:hover { color: var(--color-text); }

/* Inline carousel nav (arrows in header row) */
.hm-carousel-nav { display: flex; align-items: center; gap: 6px; }
.hm-carousel-nav__btn {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    background: var(--color-bg);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text);
    transition: background .15s, border-color .15s;
    padding: 0;
    flex-shrink: 0;
}
.hm-carousel-nav__btn[hidden] { display: none; }
.hm-carousel-nav__btn:hover { background: var(--color-surface-alt); border-color: var(--color-text-muted); }
.hm-carousel-nav__btn svg { width: 16px; height: 16px; display: block; }

.carousel-section { margin-right: calc(-1 * var(--space-6)); }

/* Wrapper holds the track + two overlay arrows */
.carousel-wrap {
    position: relative;
}

/* Overlay arrow buttons — shown on section hover */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(124,58,237,.85) 0%, rgba(37,99,235,.85) 60%, rgba(14,165,233,.85) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    box-shadow: 0 2px 12px rgba(124,58,237,.4), 0 1px 4px rgba(0,0,0,.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, box-shadow .15s ease;
}
.carousel-arrow svg { width: 18px; height: 18px; display: block; }

.carousel-arrow--prev { left:  -12px; }
.carousel-arrow--next { right: calc(var(--space-6) - 12px); }

/* Show arrows only when the section is hovered */
.carousel-wrap:hover .carousel-arrow:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
}

.carousel-arrow:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 60%, #0ea5e9 100%);
    transform: translateY(-50%) scale(1.10);
    box-shadow: 0 4px 18px rgba(124,58,237,.55), 0 2px 6px rgba(0,0,0,.2);
}

/* Keep old .carousel-nav / .carousel-btn removed from HTML */

.carousel {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: var(--space-3);
    padding-right: var(--space-6);
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.carousel--paged { overflow: hidden; transition: transform .38s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.hm-for-you-page { flex: 0 0 100%; min-width: 100%; display: flex; gap: 14px; overflow-x: auto; overflow-y: visible; padding-bottom: var(--space-3); padding-right: var(--space-6); scrollbar-width: none; }
.hm-for-you-page::-webkit-scrollbar { display: none; }
.carousel::-webkit-scrollbar { display: none; }

/* Music card */
.card {
    min-width: 148px;
    width: 148px;
    padding: 6px;
    flex-shrink: 0;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 14px;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover {
    border-color: rgba(113, 82, 217, .12);
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 12px 30px rgba(26, 37, 68, .08);
}
.card__art-wrap {
    position: relative;
    width: 134px;
    height: 134px;
}
.card__art {
    width: 134px;
    height: 134px;
    object-fit: cover;
    border-radius: var(--radius-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    box-shadow: var(--shadow-md);
    display: block;
}
.card:hover .card__art { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card__play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 60%, #0ea5e9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 16px rgba(37,99,235,.5);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}
.card:hover .card__play-overlay {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
/* Active (currently playing) card — always show overlay */
.card.is-active .card__play-overlay {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.card.is-active .card__art-wrap {
    outline: 2px solid #7c3aed;
    outline-offset: -2px;
    border-radius: inherit;
}
.card__wave {
    position: relative;
    height: 24px;
    margin-top: 8px;
    overflow: hidden;
    cursor: crosshair;
    border-radius: 5px;
    outline: none;
}
.card__wave:focus-visible {
    box-shadow: 0 0 0 3px rgba(101, 73, 220, .14);
}
.card__wave-bars {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}
.card__wave-bars i {
    display: block;
    width: 3px;
    height: var(--wave-height);
    min-height: 3px;
    flex: 1;
    border-radius: 999px;
    background: #cbd2de;
}
.card__wave-progress {
    position: absolute;
    z-index: 1;
    inset: 0 auto 0 0;
    width: 0;
    overflow: hidden;
    transition: width .1s linear;
}
.card__wave-progress .card__wave-bars {
    width: 136px;
}
.card__wave-progress .card__wave-bars i {
    background: linear-gradient(180deg, #7c3aed, #2563eb);
}
.card__signal-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 3px;
    color: #949dac;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .045em;
}
.card.has-wave-progress .card__signal-meta {
    color: #6549dc;
}
.card__info {
    margin-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
}
.card__title  { font-size: 12px; color: var(--color-text); }
.card__artist { font-size: 11px; color: var(--color-text-muted); }

/* Bottom grid */
.content-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr); gap: var(--space-6); margin-top: var(--space-4); }

/* ── Home page song rows (hm-song-row) ──────────────────────────────────── */
.hm-song__empty { color: var(--color-text-muted); font-size: 13px; padding: 8px; }

.hm-song-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
}
.hm-song-row:hover { background: var(--color-surface-alt); }
.hm-song-row:hover .hm-song__num { opacity: 0; }
.hm-song-row:hover .hm-song__play-btn { opacity: 1; transform: scale(1); color: #fff; }
.hm-song-row:hover .hm-song__actions { opacity: 1; }
.hm-song-row:hover .hm-song__dur { opacity: 0; }

/* Active (currently playing) */
.hm-song-row--active { background: var(--color-brand-light, rgba(124,58,237,.08)); }
.hm-song-row--active .hm-song__title { color: var(--color-brand, #7c3aed); font-weight: 600; }
.hm-song-row--active .hm-song__num { opacity: 0; }
.hm-song-row--active .hm-song__play-btn { opacity: 1; color: #fff; }

/* Left section */
.hm-song__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

/* Number / play button toggle */
.hm-song__num-wrap {
    position: relative;
    width: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hm-song__num {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1;
    transition: opacity 0.15s ease;
    position: absolute;
}
.hm-song__play-btn {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 60%, #0ea5e9 100%);
    color: #fff;
    padding: 0;
    flex-shrink: 0;
}
.hm-song__play-btn:hover { transform: scale(1.1) !important; filter: brightness(1.15); }

/* Art thumbnail */
.hm-song__art-wrap { flex-shrink: 0; position: relative; }
.hm-song__art {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    object-fit: cover;
    display: block;
    background: var(--color-surface-alt);
}
.hm-song__art--fallback {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    background: var(--color-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    opacity: 0.5;
}

/* Meta */
.hm-song__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.hm-song__title {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    transition: color 0.15s ease;
}
.hm-song__artist {
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Right section */
.hm-song__right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    position: relative;
    min-width: 80px;
    justify-content: flex-end;
}
.hm-song__dur {
    font-size: 12px;
    color: var(--color-text-muted);
    transition: opacity 0.15s ease;
    min-width: 32px;
    text-align: right;
}

/* Action buttons (like + three-dots) */
.hm-song__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
    position: absolute;
    right: 0;
}
.hm-song__action-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: color 0.15s ease, background 0.12s ease;
    padding: 0;
}
.hm-song__action-btn:hover { background: var(--color-surface); color: var(--color-text); }
.js-hm-like--active { color: #e2445c !important; }
.js-hm-like--active:hover { background: rgba(226,68,92,.1) !important; }

/* Song rows */
.song-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px var(--space-3);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    position: relative;
}
.song-row:hover { background: var(--color-surface-alt); }
.song-row:hover .song-row__play  { opacity: 1; }
.song-row:hover .song-row__index { opacity: 0; }
.song-row:hover .song-row__actions { opacity: 1; }

.song-row__left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
    position: relative;
}
.song-row__index {
    font-size: 12px;
    color: var(--color-text-muted);
    min-width: 20px;
    text-align: center;
    transition: opacity var(--transition-fast);
}
.song-row__play {
    position: absolute;
    left: 0;
    width: 28px !important;
    height: 28px !important;
    opacity: 0;
    transition: opacity var(--transition-fast);
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 60%, #0ea5e9 100%) !important;
    color: #fff !important;
}
.song-row__play svg { width: 12px; height: 12px; }
.song-row__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.song-row__meta strong { font-size: 13px; color: var(--color-text); }
.song-row__meta small  { font-size: 11px; color: var(--color-text-muted); }
.song-row__time { font-size: 12px; color: var(--color-text-muted); flex-shrink: 0; margin: 0 var(--space-3); }
.song-row__actions { display: flex; gap: 2px; opacity: 0; transition: opacity var(--transition-fast); }

/* ── Add-to-playlist (+) button hover accent ───────────────────────────── */
/* Works for both icon-btn (song-row) and hm-song__action-btn variants */
.js-add-to-playlist:hover {
    background: rgba(124, 58, 237, 0.12) !important;
    color: #7c3aed !important;
}

/* ── Add-to-playlist dropdown ───────────────────────────────────────────── */
.atp-drop {
    display: none;
    position: fixed;
    z-index: 9100;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
    min-width: 220px;
    max-width: 280px;
    overflow: hidden;
    animation: atp-pop .14s ease;
}
@keyframes atp-pop {
    from { opacity: 0; transform: scale(.95) translateY(-4px); }
    to   { opacity: 1; transform: scale(1)  translateY(0); }
}
.atp-drop--open { display: block; }

.atp-drop__header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #888;
    border-bottom: 1px solid #f0f0f0;
}
.atp-drop__header svg { color: #7c3aed; flex-shrink: 0; }

.atp-drop__list {
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 0;
}
.atp-drop__list::-webkit-scrollbar { width: 4px; }
.atp-drop__list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }

.atp-drop__loading,
.atp-drop__empty {
    padding: 14px 16px;
    font-size: 12px;
    color: #999;
    text-align: center;
}

.atp-drop__item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: #1a1a2e;
    text-align: left;
    transition: background .12s ease;
}
.atp-drop__item:hover { background: #f4f1ff; }
.atp-drop__item-icon { flex-shrink: 0; color: #7c3aed; }
.atp-drop__item-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.atp-drop__item-count {
    font-size: 11px;
    color: #aaa;
    flex-shrink: 0;
    margin-left: auto;
}

.atp-drop__footer {
    border-top: 1px solid #f0f0f0;
    padding: 4px 0;
}
.atp-drop__new {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #7c3aed;
    transition: background .12s ease;
}
.atp-drop__new:hover { background: rgba(124,58,237,.07); }
.atp-drop__new svg { flex-shrink: 0; }

/* ── Like-count pill (used across all item types) ───────────────────────── */
.like-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 500;
    color: #c0576e;
    background: rgba(224, 49, 78, 0.07);
    border-radius: 20px;
    padding: 2px 7px 2px 5px;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    flex-shrink: 0;
}
.like-pill svg { flex-shrink: 0; }

/* ── Song-row context ─────────────────────────────────────────────────────
   Sits between the duration and the hover-actions, always visible           */
.song-row__like {
    display: flex;
    align-items: center;
}
.song-row__like .like-pill { opacity: 0.75; }
.song-row:hover .song-row__like .like-pill { opacity: 1; }

/* ─── Context menu ──────────────────────────────────────────────────────── */
.song-ctx-menu {
    position: fixed;
    z-index: 1200;
    min-width: 210px;
    max-width: 260px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,.15), 0 1px 4px rgba(0,0,0,.08);
    padding: 6px 0;
    display: none;
    animation: ctx-pop .14s ease;
}
.song-ctx-menu.is-open { display: block; }
.hm-song-ctx-menu { z-index: 9500; }
@keyframes ctx-pop {
    from { opacity: 0; transform: scale(.95) translateY(-4px); }
    to   { opacity: 1; transform: scale(1)  translateY(0); }
}

/* ── Inline (row-attached) variant — slides down from the three-dots button ── */
.song-ctx-menu--inline {
    position: absolute;
    right: 0;
    top: calc(100% + 2px);
    left: auto;
    z-index: 1100;
    min-width: 200px;
    max-width: 240px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,.15), 0 1px 4px rgba(0,0,0,.08);
    animation: ctx-slidedown .2s cubic-bezier(.23, 1, .32, 1);
    transform-origin: top right;
}
@keyframes ctx-slidedown {
    from { opacity: 0; transform: scaleY(.88) translateY(-6px); }
    to   { opacity: 1; transform: scaleY(1)   translateY(0); }
}

.song-ctx-menu__title {
    padding: 8px 14px 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text, #e5e5e5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.song-ctx-menu__title small {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}
.song-ctx-menu__divider {
    height: 1px;
    background: var(--color-border, #e5e7eb);
    margin: 4px 0;
}
.song-ctx-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 13px;
    color: var(--color-text, #1a1a2e);
    cursor: pointer;
    transition: background .12s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
}
.song-ctx-menu__item svg { flex-shrink: 0; color: var(--color-text-muted); }
.song-ctx-menu__item:hover { background: var(--color-surface-alt, #f5f7ff); }
.song-ctx-menu__item--muted { color: var(--color-text-muted); cursor: default; font-size: 12px; }
.song-ctx-menu__item--muted:hover { background: none; }
.song-ctx-menu__item--auth { color: var(--color-text-muted); }
.song-ctx-menu__item--accent { color: #7c3aed; }
.song-ctx-menu__item--accent svg { color: #7c3aed; }
.song-ctx-menu__item--accent:hover { background: rgba(124,58,237,.1); }
.song-ctx-menu__chevron { margin-left: auto; color: var(--color-text-muted); flex-shrink: 0; }
.song-ctx-menu__signin-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(124,58,237,.2);
    color: #a78bfa;
    flex-shrink: 0;
}
/* ATP (Add to Playlist) sub-view */
.song-ctx-menu__atp-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border-bottom: 1px solid rgba(255,255,255,.07);
    margin-bottom: 4px;
}
.song-ctx-menu__back {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; flex-shrink: 0;
    border-radius: 50%; border: none;
    background: rgba(255,255,255,.07);
    color: var(--color-text-muted);
    cursor: pointer; padding: 0;
    transition: background .12s;
}
.song-ctx-menu__back:hover { background: rgba(255,255,255,.14); color: var(--color-text); }
.song-ctx-menu__atp-list { max-height: 200px; overflow-y: auto; }
.song-ctx-menu__atp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.song-ctx-menu__atp-count { font-size: 11px; color: var(--color-text-muted); flex-shrink: 0; margin-left: auto; padding-left: 8px; }

/* Toast notification */
.atp-toast {
    position: fixed;
    bottom: calc(var(--player-height, 72px) + 16px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #1e1e30;
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(0,0,0,.45);
    opacity: 0;
    transition: opacity .22s, transform .22s;
    pointer-events: none;
    z-index: 2000;
    white-space: nowrap;
}
.atp-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Playlists */
.playlist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-3); }
.playlist-chip {
    height: 100px;
    border-radius: 12px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    font-size: 14px;
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: 0 2px 10px rgba(37,99,235,.3);
}
.playlist-chip__name { font-weight: 700; font-size: 14px; line-height: 1.2; }
.playlist-chip__count { font-size: 11px; opacity: .75; }
.playlist-chip:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(37,99,235,.4); }

/* ── 9. Player Bar ───────────────────────────────────────────────────────── */
.player-bar {
    grid-area: player;
    background: var(--color-player-bg);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 var(--space-6);
    height: var(--player-height);
    gap: var(--space-4);
}

/* Now Playing */
.now-playing { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }

.now-playing__art-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}
.now-playing__art {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    transition: border-radius var(--transition-base);
}
.art-playing .now-playing__art {
    border-radius: 50%;
    animation: spin-art 8s linear infinite;
}
@keyframes spin-art {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Buffering spinner overlay */
.now-playing__art-spinner {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(255,255,255,.6);
    animation: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.now-playing__art-spinner.spinning {
    opacity: 1;
    animation: spin-loader .8s linear infinite;
}
@keyframes spin-loader {
    to { transform: rotate(360deg); }
}

.now-playing__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.now-playing__title  { font-size: 13px; color: var(--color-text-inverse); }
.now-playing__artist { font-size: 11px; color: rgba(255,255,255,.55); }

/* Transport buttons */
.player-controls { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 380px; }
.player-controls__row { display: flex; align-items: center; gap: var(--space-3); }

.ctrl-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,.6);
    padding: var(--space-1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast);
    border-radius: var(--radius-sm);
    position: relative;
}
.ctrl-btn svg  { width: 18px; height: 18px; display: block; }
.ctrl-btn:hover { color: var(--color-text-inverse); }
.ctrl-btn--active { color: #7ec8ff !important; }
/* repeat-one badge */
.ctrl-btn[data-repeat='one']::after {
    content: '1';
    position: absolute;
    top: 0; right: 0;
    font-size: 8px;
    background: #7ec8ff;
    color: #003366;
    border-radius: 50%;
    width: 10px; height: 10px;
    display: flex; align-items: center; justify-content: center;
    line-height: 10px;
    font-weight: 700;
}

.ctrl-btn--liked { color: #e05 !important; }
.ctrl-btn--liked svg { fill: #e05; stroke: none; }

.play-btn {
    background: var(--color-text-inverse);
    color: var(--color-player-bg);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), transform var(--transition-fast);
    flex-shrink: 0;
}
.play-btn svg  { width: 16px; height: 16px; display: block; }
.play-btn:hover { background: rgba(255,255,255,.88); transform: scale(1.08); }

/* Progress row */
.progress-row { display: flex; align-items: center; gap: var(--space-2); width: 100%; }
.time-label { font-size: 11px; color: rgba(255,255,255,.55); flex-shrink: 0; min-width: 28px; font-variant-numeric: tabular-nums; }
.time-label:last-child { text-align: right; }

.progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,.15);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    transition: height var(--transition-fast);
}
.progress-bar:hover { height: 6px; }

.progress-bar__buffer {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    background: rgba(255,255,255,.2);
    border-radius: 2px;
    pointer-events: none;
}
.progress-bar__fill {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    background: var(--color-text-inverse);
    border-radius: 2px;
    pointer-events: none;
    transition: width .1s linear;
}
.progress-bar__thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 12px; height: 12px;
    background: var(--color-text-inverse);
    border-radius: 50%;
    pointer-events: none;
    transition: transform var(--transition-fast);
}
.progress-bar:hover .progress-bar__thumb { transform: translate(-50%, -50%) scale(1); }

/* Volume */
.volume-wrap { display: flex; align-items: center; gap: var(--space-2); justify-content: flex-end; }
.vol-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,.65);
    display: flex;
    align-items: center;
    padding: var(--space-1);
    border-radius: 50%;
    transition: color var(--transition-fast), background var(--transition-fast);
    flex-shrink: 0;
}
.vol-btn svg { width: 18px; height: 18px; display: block; }
.vol-btn:hover { color: var(--color-text-inverse); background: rgba(255,255,255,.12); }

/* Proper visible styled range — no hidden-overlay hack */
.vol-range-visible {
    -webkit-appearance: none;
    appearance: none;
    width: 90px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(
        to right,
        rgba(255,255,255,.9) 0%,
        rgba(255,255,255,.9) var(--vol-pct, 70%),
        rgba(255,255,255,.2) var(--vol-pct, 70%),
        rgba(255,255,255,.2) 100%
    );
    outline: none;
    cursor: pointer;
    flex-shrink: 0;
}
.vol-range-visible::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
    transition: transform var(--transition-fast);
}
.vol-range-visible::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border: none;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.vol-range-visible:hover::-webkit-slider-thumb { transform: scale(1.25); }
.vol-range-visible:hover::-moz-range-thumb    { transform: scale(1.25); }

/* Active song row */
.song-row--active { background: var(--color-brand-light) !important; }
.song-row--active .song-row__meta strong { color: var(--color-brand); }
.song-row--active .song-row__meta strong .sng-title-link { color: var(--color-brand); }
.song-row--active .song-row__index { opacity: 0; }
.song-row--active .song-row__play  { opacity: 1; color: var(--color-brand); }

/* Art thumbnail inside .song-row (songs page list) */
.song-row__left .sng-art-wrap { position: static; flex-shrink: 0; }
.song-row__meta small a { color: inherit; }
.song-row__meta small { color: var(--color-text-muted); }

/* ── 9b. Queue Drawer ────────────────────────────────────────────────────── */
.queue-drawer {
    position: fixed;
    bottom: var(--player-height);
    right: var(--space-4);
    width: 340px;
    max-height: 480px;
    background: var(--color-player-bg);
    border: 1px solid rgba(255,255,255,.09);
    border-bottom: 2px solid var(--color-player-bg); /* covers any sub-pixel gap */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,.55), 0 -1px 0 rgba(255,255,255,.05) inset;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 200;
    /* Hidden state — slides down behind the player */
    transform: translateY(calc(100% + var(--player-height)));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.32s cubic-bezier(.4,0,.2,1), opacity 0.2s ease;
}
.queue-drawer.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Header */
.queue-drawer__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}
.queue-drawer__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.queue-drawer__count {
    font-size: 11px;
    color: rgba(255,255,255,.45);
    margin-left: auto;
}
.queue-drawer__close {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,.5);
    padding: 4px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast), background var(--transition-fast);
    flex-shrink: 0;
}
.queue-drawer__close:hover { color: #fff; background: rgba(255,255,255,.1); }

/* Scrollable body */
.queue-drawer__section {
    overflow-y: auto;
    flex: 1;
    padding: var(--space-2) 0 var(--space-2);
    /* Thin custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.15) transparent;
}
.queue-drawer__section::-webkit-scrollbar { width: 4px; }
.queue-drawer__section::-webkit-scrollbar-track { background: transparent; }
.queue-drawer__section::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

.queue-drawer__section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.4);
    padding: 4px var(--space-4) 6px;
}

/* Empty state */
.queue-drawer__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    color: rgba(255,255,255,.3);
    font-size: 13px;
}

/* Queue list */
.queue-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Track row (shared by "Now Playing" and list items) */
.queue-track {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 6px var(--space-4);
    cursor: pointer;
    border-radius: 0;
    transition: background var(--transition-fast);
    position: relative;
}
.queue-track:hover { background: rgba(255,255,255,.07); }

.queue-track--active {
    background: rgba(126,200,255,.08) !important;
}
.queue-track--active .queue-track__title { color: #7ec8ff; }

.queue-track__art {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255,255,255,.08);
}
.queue-track__art-fallback {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.35);
    flex-shrink: 0;
}

/* Playing indicator: animated bars on active row */
.queue-track__eq {
    display: none;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
    flex-shrink: 0;
    margin-right: 2px;
}
.queue-track--active.is-playing .queue-track__eq { display: flex; }
.queue-track--active.is-playing .queue-track__index { display: none; }
.queue-track__eq span {
    display: block;
    width: 3px;
    background: #7ec8ff;
    border-radius: 1px;
    animation: eq-bar 0.9s ease-in-out infinite alternate;
}
.queue-track__eq span:nth-child(1) { height: 5px;  animation-delay: 0s;    animation-duration: .7s; }
.queue-track__eq span:nth-child(2) { height: 12px; animation-delay: .2s;   animation-duration: .9s; }
.queue-track__eq span:nth-child(3) { height: 8px;  animation-delay: .15s;  animation-duration: .8s; }
@keyframes eq-bar {
    from { transform: scaleY(.4); }
    to   { transform: scaleY(1);  }
}

.queue-track__index {
    font-size: 11px;
    color: rgba(255,255,255,.3);
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.queue-track__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.queue-track__title {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.queue-track__artist {
    font-size: 11px;
    color: rgba(255,255,255,.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.queue-track__dur {
    font-size: 11px;
    color: rgba(255,255,255,.3);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.queue-track__remove {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,.2);
    padding: 4px;
    border-radius: var(--radius-sm);
    display: none;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast);
    flex-shrink: 0;
}
.queue-track:hover .queue-track__remove { display: flex; }
.queue-track__remove:hover { color: #ff6b6b; }

/* Queue button active state */
.ctrl-btn--queue-open {
    color: #7ec8ff !important;
    background: rgba(126,200,255,.12);
}

/* ── 10. Utilities ───────────────────────────────────────────────────────── */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── 11. Auth Pages ──────────────────────────────────────────────────────── */
/*
 * Reuses every design token from section 1.
 * Background: deep navy gradient (--color-brand-dark → #001a40).
 * Card: semi-opaque white on top of the blur layer — mirrors the player bar.
 * Accent: --color-brand (#007bff) for inputs focus, primary button, links.
 */

/* Full-page dark background */
.auth-body {
    overflow: auto;
    height: 100vh;
    background: linear-gradient(145deg, var(--color-brand-dark) 0%, #001a40 55%, #002855 100%);
    display: flex;
    align-items: stretch;
}

/* Decorative blobs — same hue as --color-brand */
.auth-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.auth-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.18;
}
.auth-blob--1 {
    width: 520px; height: 520px;
    background: var(--color-brand);
    top: -120px; left: -100px;
}
.auth-blob--2 {
    width: 400px; height: 400px;
    background: #00c6ff;
    bottom: -80px; right: -60px;
}

/* Centering wrapper */
.auth-center {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    padding: var(--space-6) var(--space-4);
}

/* Glassy card — echoes the player bar surface */
.auth-card {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    padding: 40px 36px 36px;
    width: 100%;
    max-width: 420px;
    color: var(--color-text-inverse);
}

/* Logo inside auth card */
.auth-logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-brand);
    font-weight: 700;
    font-size: 17px;
    margin-bottom: var(--space-6);
    width: fit-content;
}
.auth-logo svg {
    width: 22px; height: 22px;
    flex-shrink: 0;
}
.auth-logo__img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 8px;
    flex-shrink: 0;
}
.auth-logo:hover { color: #339dff; }

.auth-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-inverse);
    margin-bottom: 24px;
    letter-spacing: -0.01em;
}

/* Alert banners */
.auth-alert {
    font-size: 13px;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: var(--space-4);
    font-weight: 500;
}
.auth-alert--success { background: rgba(52, 168, 83,  0.20); color: #7effa4; border: 1px solid rgba(52,168,83,.35); }
.auth-alert--error   { background: rgba(220, 53,  69,  0.20); color: #ffb3bb; border: 1px solid rgba(220,53,69,.35); }
.auth-alert--info    { background: rgba(0,  123, 255, 0.18); color: #a8d4ff; border: 1px solid rgba(0,123,255,.35); }

/* Google / social button */
.auth-btn--google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 0;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a2e;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-4);
}
.auth-btn--google svg  { width: 20px; height: 20px; flex-shrink: 0; }
.auth-btn--google:hover { background: #ffffff; box-shadow: var(--shadow-md); }

/* OR divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--space-4);
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
}

/* Form fields */
.auth-field {
    margin-bottom: var(--space-4);
}
.auth-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.auth-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
}
.auth-input {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-inverse);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
    -webkit-text-fill-color: var(--color-text-inverse);
}
.auth-input::placeholder {
    color: rgba(255, 255, 255, .38);
    -webkit-text-fill-color: rgba(255, 255, 255, .38);
    opacity: 1;
}
/* Browser autofill override */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #002050 inset;
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
}
.auth-input:focus {
    border-color: var(--color-brand);
    background: rgba(0, 123, 255, 0.10);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.20);
}
.auth-input--error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.20) !important;
}
.auth-field-error {
    display: block;
    font-size: 12px;
    color: #ffb3bb;
    margin-top: 5px;
}

/* Primary submit button — brand blue → gradient */
.auth-btn--primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 0;
    margin-top: var(--space-2);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-brand) 0%, #0056d6 100%);
    color: var(--color-text-inverse);
    font-size: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: 0 4px 16px rgba(0, 123, 255, 0.45);
    text-decoration: none;
}
.auth-btn--primary:hover  { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,123,255,0.55); }
.auth-btn--primary:active { transform: translateY(0); opacity: 1; }

/* Footer "already have an account" text */
.auth-footer-text {
    margin-top: 22px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
}
.auth-link {
    color: var(--color-brand);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast);
}
.auth-link:hover { color: #339dff; }
.auth-link--small { font-size: 12px; }

/* ── Artist account toggle (register page) ──────────────────────────────── */
.auth-artist-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(124,58,237,.10);
    border: 1px solid rgba(124,58,237,.22);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.auth-artist-toggle:hover {
    background: rgba(124,58,237,.16);
    border-color: rgba(124,58,237,.38);
}
.auth-artist-toggle__check {
    margin-top: 2px;
    accent-color: #7c3aed;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}
.auth-artist-toggle__label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.92);
    cursor: pointer;
    display: block;
    margin-bottom: 3px;
    line-height: 1.3;
}
.auth-artist-toggle__hint {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    display: block;
    line-height: 1.5;
}

/* ── 13. Upload Page ─────────────────────────────────────────────────────── */

/* Page wrapper */
.up-page {
    width: 100%;
    padding-bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Compact page header */
.up-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}
.up-header__icon {
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
    display: flex; align-items: center; justify-content: center;
    color: #fff; flex-shrink: 0;
}
.up-header__title { font-size: 16px; font-weight: 800; color: var(--color-text); margin: 0 0 2px; }
.up-header__sub   { font-size: 11px; color: var(--color-text-muted); margin: 0; }

/* Alerts */
.up-alert { border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; }
.up-alert--ok  { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.up-alert--err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* Step cards */
.up-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.up-card--details { animation: upFadeUp .22s ease both; }
@keyframes upFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.up-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}
.up-step-num {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
    color: #fff;
    font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.up-card__title { font-size: 13px; font-weight: 700; color: var(--color-text); }

/* Drop zone */
.up-dropzone { transition: background .2s; }
.up-dropzone--over { background: var(--color-brand-light); }

.up-drop-inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 24px 24px;
    cursor: pointer;
}
.up-drop-icon { color: var(--color-brand); flex-shrink: 0; }
.up-drop-text { flex: 1; min-width: 0; }
.up-drop-title { font-size: 14px; font-weight: 600; color: var(--color-text); margin: 0 0 3px; }
.up-drop-hint  { font-size: 11px; color: var(--color-text-muted); margin: 0; }

.up-browse-btn {
    display: inline-block;
    padding: 8px 20px;
    background: var(--color-brand);
    color: #fff;
    border-radius: var(--radius-pill);
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: opacity .15s, transform .15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.up-browse-btn:hover { opacity: .88; transform: translateY(-1px); }

/* File selected row */
.up-file-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 11px 20px;
    background: var(--color-brand-light);
    border-top: 1px solid var(--color-border);
    font-size: 13px;
    color: var(--color-text);
}
.up-file-icon { color: var(--color-brand); flex-shrink: 0; }
.up-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.up-file-remove {
    background: none; border: none; padding: 4px; cursor: pointer;
    color: var(--color-text-muted); border-radius: var(--radius-sm);
    display: flex; align-items: center; transition: color .15s;
}
.up-file-remove:hover { color: #e05; }

/* Details body: art column + fields column */
.up-details-body { display: flex; }

/* Cover art column */
.up-art-col {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 20px 20px;
    border-right: 1px solid var(--color-border);
    flex-shrink: 0; width: 176px;
}
.up-art-frame {
    width: 136px; height: 136px;
    border-radius: var(--radius-md);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.up-art-frame img { width: 100%; height: 100%; object-fit: cover; }
.up-art-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--color-text-muted); font-size: 11px; }
.up-art-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    width: 136px; padding: 7px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 11px; font-weight: 500; cursor: pointer;
    color: var(--color-text-muted);
    transition: border-color .15s, color .15s, background .15s;
    background: var(--color-bg);
    box-sizing: border-box;
}
.up-art-btn:hover { border-color: var(--color-brand); color: var(--color-brand); background: var(--color-brand-light); }
.up-art-hint { font-size: 10px; color: var(--color-text-muted); text-align: center; line-height: 1.5; }

/* Fields column */
.up-fields-col { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); padding: 20px; min-width: 0; }
.up-row-2    { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.up-field    { display: flex; flex-direction: column; gap: 4px; }
.up-label    { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.up-req      { color: #ef4444; }
.up-input {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 8px 11px;
    font-size: 13px; color: var(--color-text);
    background: var(--color-surface);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit; width: 100%; box-sizing: border-box;
}
.up-input:focus        { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(0,123,255,.12); }
.up-input--err         { border-color: #ef4444; }
.up-input--err:focus   { box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
.up-select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    padding-right: 28px;
    cursor: pointer;
}
.up-select option { background: var(--color-surface); color: var(--color-text); }
.up-textarea  { resize: vertical; min-height: 68px; }
.up-err-msg   { font-size: 11px; color: #ef4444; }
.up-field-hint          { font-size: 11px; color: var(--color-text-muted); display: flex; align-items: center; gap: 4px; }
.up-field-hint--brand   { color: #007bff; }
.up-field-hint a        { color: inherit; }

/* Input with inline addon button */
.up-input-addon          { display: flex; gap: 8px; align-items: center; }
.up-input-addon .up-input { flex: 1; }
.up-addon-link           { flex-shrink: 0; color: var(--color-brand); display: inline-flex; align-items: center; }

/* Footer row: public toggle + submit button */
.up-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-1);
}
.up-toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.up-toggle-text  { font-size: 13px; color: var(--color-text); }

.up-submit-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 24px;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 60%, #0ea5e9 100%);
    color: #fff; border: none; border-radius: var(--radius-pill);
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: opacity .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 3px 10px rgba(124,58,237,.35);
    font-family: inherit; white-space: nowrap;
    letter-spacing: .02em;
}
.up-submit-btn:hover  { opacity: .92; transform: translateY(-1px); box-shadow: 0 5px 16px rgba(124,58,237,.45); }
.up-submit-btn:active { transform: translateY(0); }

/* Shared: hide file inputs; preserve toggle track */
.upload-file-input   { display: none; }
.upload-toggle-input { display: none; }
.upload-toggle-track {
    width: 36px; height: 20px;
    border-radius: 10px;
    background: var(--color-border);
    position: relative; transition: background .2s; flex-shrink: 0;
}
.upload-toggle-track::after {
    content: ''; position: absolute;
    top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; transition: transform .2s;
}
.upload-toggle-input:checked ~ .upload-toggle-track          { background: var(--color-brand); }
.upload-toggle-input:checked ~ .upload-toggle-track::after   { transform: translateX(16px); }

/* My uploads library */
.up-library { margin-top: var(--space-2); }
.up-library__hd {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-3);
}
.up-library__title { font-size: 14px; font-weight: 700; margin: 0; color: var(--color-text); }
.up-library__count {
    font-size: 11px; color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 2px 10px; border-radius: var(--radius-pill);
}
.up-library__list {
    display: flex; flex-direction: column; gap: 1px;
    background: var(--color-border);
    border-radius: var(--radius-md); overflow: hidden;
    border: 1px solid var(--color-border);
}
.up-track {
    display: flex; align-items: center; gap: var(--space-3);
    background: var(--color-surface);
    padding: 9px var(--space-4);
    transition: background .15s;
}
.up-track:hover { background: var(--color-bg); }
.up-track__art {
    width: 36px; height: 36px; border-radius: var(--radius-sm);
    overflow: hidden; flex-shrink: 0;
    background: var(--color-bg);
    display: flex; align-items: center; justify-content: center;
}
.up-track__art img { width: 100%; height: 100%; object-fit: cover; }
.up-track__no-art  { color: var(--color-text-muted); }
.up-track__info    { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.up-track__info strong { font-size: 13px; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-track__info small  { font-size: 11px; color: var(--color-text-muted); }
.up-track__genre {
    font-size: 11px; color: var(--color-text-muted);
    padding: 2px 8px; background: var(--color-bg); border-radius: var(--radius-pill);
}
.up-track__vis { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 600; }
.up-vis--pub   { background: #ecfdf5; color: #065f46; }
.up-vis--priv  { background: #fef2f2; color: #991b1b; }
.up-track__date { font-size: 11px; color: var(--color-text-muted); flex-shrink: 0; }
.up-track__del {
    flex-shrink: 0; margin-left: auto;
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 6px;
    border: none; background: transparent; cursor: pointer;
    color: var(--color-text-muted); transition: background .15s, color .15s;
}
.up-track__del:hover  { background: rgba(220,38,38,.12); color: #ef4444; }
.up-track__del:active { background: rgba(220,38,38,.22); }

/* ── 12. Responsive ──────────────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 860px) {
    :root { --sidebar-width: 56px; }

    .sidebar { padding: 16px var(--space-2); }
    .logo .sidebar__label { display: none; }
    .nav-section__title { display: none; }
    .nav-item .sidebar__label { display: none; }
    .nav-item { padding: var(--space-3) 0; justify-content: center; }
    .nav-item__icon { width: 18px; height: 18px; margin: 0; }
    /* Keep toggle visible so the user can still collapse at tablet */
    .sidebar__toggle { display: flex; }
    .content-grid { grid-template-columns: 1fr; }
    .player-controls { width: 280px; }
    .volume-wrap { display: none; }
    .player-bar { grid-template-columns: auto 1fr; }
}

/* Mobile */
@media (max-width: 540px) {
    .app-card {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr var(--player-height);
        grid-template-areas:
            "main"
            "player";
    }
    .sidebar { display: none; }
    .content { padding: var(--space-3) 14px; }
    .player-bar { padding: 0 var(--space-3); grid-template-columns: auto 1fr; }
    .volume-wrap { display: none; }
    .player-controls { width: 100%; }
    .content-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ── 14. New Playlist — sidebar button ──────────────────────────────────── */

/* ── Dynamic genre list expand / collapse ───────────────────────────────── */
.nav-genres-extra {
    overflow: hidden;
    max-height: 0;
    transition: max-height .28s ease;
}
.nav-genres-extra.expanded { max-height: 1200px; }

/* Chevron rotates when expanded */
.nav-genres-chevron { transition: transform .22s ease; display: block; }
.nav-genres-toggle[aria-expanded="true"] .nav-genres-chevron { transform: rotate(180deg); }

/* Muted appearance until hover */
.nav-genres-toggle {
    width: 100%;
    margin-top: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: #6b7280;
    font: inherit;
    text-align: left;
    opacity: .9;
}
.nav-genres-toggle:hover,
.nav-genres-toggle:focus-visible {
    background: rgba(124,58,237,.08);
    border-color: rgba(124,58,237,.18);
    color: #5b21b6;
    opacity: 1;
    outline: none;
}
.nav-genres-toggle__lbl { flex: 1; }

/* Hide the toggle in icon-only (collapsed) sidebar */
.sidebar--collapsed .nav-genres-toggle { display: none; }

/* Wrapper that holds the Playlists nav-item + the "+" add button side by side */
.nav-item-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
}
.nav-item-wrap .nav-item {
    flex: 1;
    min-width: 0;
}

/* The round "+" add button — hidden until row is hovered */
.nav-add-btn {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: opacity var(--transition-fast),
                background var(--transition-fast),
                color var(--transition-fast),
                transform var(--transition-fast);
}
.nav-add-btn svg { width: 16px; height: 16px; display: block; }

.nav-item-wrap:hover .nav-add-btn { opacity: 1; }

.nav-add-btn:hover {
    background: var(--color-brand-light);
    color: var(--color-brand);
    transform: scale(1.15) rotate(90deg);
}
.nav-add-btn:active { transform: scale(1.0); }

/* Responsive: hide the add-btn text at tablet width */
@media (max-width: 860px) {
    .nav-item-wrap { display: block; }
    .nav-add-btn   { display: none; }
}

/* ── 15. New Playlist — modal ────────────────────────────────────────────── */

/* Full-screen backdrop */
.pl-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.pl-modal-backdrop--open {
    opacity: 1;
    pointer-events: auto;
}

/* Dialog panel */
.pl-modal {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 440px;
    transform: translateY(22px) scale(.96);
    transition: transform .22s cubic-bezier(.34,1.56,.64,1);
    border: 1px solid var(--color-border);
}
.pl-modal-backdrop--open .pl-modal {
    transform: translateY(0) scale(1);
}

/* Header */
.pl-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-5) var(--space-3);
    border-bottom: 1px solid var(--color-border);
}
.pl-modal__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.pl-modal__title svg { color: var(--color-brand); }
.pl-modal__close {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), color var(--transition-fast);
    padding: 0;
}
.pl-modal__close svg { width: 18px; height: 18px; }
.pl-modal__close:hover { background: var(--color-surface-alt); color: var(--color-text); }

/* Body */
.pl-modal__body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.pl-modal__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.pl-modal__field--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) 0;
}
.pl-modal__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
}
.pl-modal__required { color: var(--color-brand); }
.pl-modal__input {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 13px;
    font-size: 13px;
    color: var(--color-text);
    background: var(--color-surface);
    font-family: inherit;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.pl-modal__input:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.13);
}
.pl-modal__input--error {
    border-color: #ef4444;
}
.pl-modal__input--error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.pl-modal__textarea { resize: vertical; min-height: 80px; }
.pl-modal__error {
    font-size: 11px;
    color: #ef4444;
    margin-top: 2px;
}

/* Toggle control (public/private switch) */
.pl-modal__toggle-label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
    width: 100%;
    justify-content: space-between;
}
.pl-modal__toggle-wrap { display: flex; align-items: center; }
.pl-modal__toggle-input { display: none; }
.pl-modal__toggle-track {
    width: 38px; height: 22px;
    border-radius: 11px;
    background: var(--color-border);
    position: relative;
    transition: background .2s;
    flex-shrink: 0;
    cursor: pointer;
}
.pl-modal__toggle-track::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: transform .2s;
}
.pl-modal__toggle-input:checked ~ .pl-modal__toggle-track { background: var(--color-brand); }
.pl-modal__toggle-input:checked ~ .pl-modal__toggle-track::after { transform: translateX(16px); }

/* Footer */
.pl-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
}
.pl-modal__btn {
    padding: 9px 22px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--transition-fast),
                color var(--transition-fast),
                opacity var(--transition-fast),
                transform var(--transition-fast);
}
.pl-modal__btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.pl-modal__btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }
.pl-modal__btn--cancel {
    background: var(--color-bg);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}
.pl-modal__btn--cancel:hover:not(:disabled) { background: var(--color-surface-alt); color: var(--color-text); }
.pl-modal__btn--create {
    background: linear-gradient(135deg, var(--color-brand) 0%, #0056d6 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, .35);
}
.pl-modal__btn--create:hover:not(:disabled) {
    opacity: .9;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 123, 255, .45);
}

/* ── 16. Playlists Page ──────────────────────────────────────────────────── */

/* Content area — remove default padding so hero bleeds edge-to-edge */
.pll-content { padding: 20px 24px 0 !important; }

/* ── Filter bar ─────────────────────────────────────────────────────────── */
.pll-filter-bar {
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 10px 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.pll-filter-bar__row {
    display: flex; align-items: center; gap: 10px; width: 100%;
}
.pll-searchbox {
    flex: 1; min-width: 160px; max-width: 340px;
    display: flex; align-items: center; gap: 7px;
    background: #f5f5f5;
    border: none;
    border-radius: var(--radius-pill);
    padding: 0 12px;
    height: 38px;
    transition: background .15s;
}
.pll-searchbox:focus-within { background: #eef2ff; }
.pll-searchbox__icon { flex-shrink: 0; color: var(--color-text-muted); }
.pll-searchbox__input {
    flex: 1; border: none; background: transparent;
    font-size: 13px; color: var(--color-text);
    outline: none; font-family: inherit; height: 100%;
}
.pll-searchbox__input::placeholder { color: var(--color-text-muted); }
.pll-searchbox__clear {
    display: flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    border: none; background: none;
    color: var(--color-text-muted); cursor: pointer;
    border-radius: 50%; padding: 0;
    transition: color .15s;
}
.pll-searchbox__clear:hover { color: var(--color-text); }
.pll-results-count {
    font-size: 12px; font-weight: 700;
    color: var(--color-text-muted);
    white-space: nowrap;
    background: #f5f3ff;
    border: 1px solid #ede9fe;
    border-radius: 99px;
    padding: 3px 12px;
    margin-left: auto;
}
.pll-filter-create {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #fff; border: none;
    font-size: 12px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    box-shadow: 0 2px 10px rgba(124,58,237,.3);
    transition: opacity .15s, transform .15s, box-shadow .15s;
    white-space: nowrap;
}
.pll-filter-create:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(124,58,237,.45); }
.pll-filter-signin {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    border: 1.5px solid #ede9fe;
    color: #7c3aed;
    font-size: 12px; font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s, background .15s;
}
.pll-filter-signin:hover { border-color: #7c3aed; background: #f5f3ff; }

/* ── Hero ── */
.pll-hero {
    position: relative;
    background: linear-gradient(135deg, #3b0764 0%, #1e3a8a 55%, #0c4a6e 100%);
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 20px;
    box-shadow: 0 8px 40px rgba(124,58,237,.22);
}
.pll-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 15% 50%, rgba(124,58,237,.30) 0%, transparent 65%),
        radial-gradient(ellipse 40% 60% at 85% 30%, rgba(37,99,235,.22) 0%, transparent 65%);
    pointer-events: none;
}
.pll-hero__waves {
    position: absolute; inset: 0; pointer-events: none;
}
.pll-hero__waves svg { width: 100%; height: 100%; }
.pll-hero__wave--1 { fill: rgba(255,255,255,.05); }
.pll-hero__wave--2 { fill: rgba(255,255,255,.09); }
.pll-hero__body {
    position: relative; z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 28px 28px 24px;
}
.pll-hero__left {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 6px;
}

/* Hero stats glass panel */
.pll-hero__stats {
    display: flex; align-items: center;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 14px;
    padding: 12px 20px;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    gap: 0;
}
.pll-stat {
    display: flex; flex-direction: column; align-items: center;
    padding: 0 18px; gap: 3px;
}
.pll-stat__value {
    font-size: 26px; font-weight: 900; color: #fff;
    line-height: 1; letter-spacing: -.03em;
}
.pll-stat__label {
    font-size: 9px; color: rgba(255,255,255,.6);
    font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
}
.pll-stat__divider {
    width: 1px; height: 28px;
    background: rgba(255,255,255,.2); flex-shrink: 0;
}
.pll-hero__badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; letter-spacing: .12em;
    color: rgba(255,255,255,.8);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    text-transform: uppercase;
    width: fit-content;
}
.pll-hero__title {
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 900;
    color: #fff;
    margin: 0;
    letter-spacing: -.03em;
    line-height: 1.1;
    text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.pll-hero__sub {
    display: block;
    font-size: 13px;
    color: rgba(255,255,255,.65);
    margin: 0;
    font-weight: 400;
    line-height: 1.4;
    max-width: 380px;
}
.pll-hero__actions { display: none; }
.pll-hero__create-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 11px 24px;
    border-radius: var(--radius-pill);
    background: var(--color-brand);
    color: #fff;
    border: none;
    font-size: 14px; font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 16px rgba(0,123,255,.4);
    transition: opacity .15s, transform .15s, box-shadow .15s;
}
.pll-hero__create-btn:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,123,255,.5); }
.pll-hero__signin-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 11px 24px;
    border-radius: var(--radius-pill);
    border: 1.5px solid rgba(255,255,255,.35);
    color: rgba(255,255,255,.9);
    font-size: 14px; font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}
.pll-hero__signin-btn:hover { border-color: rgba(255,255,255,.8); color: #fff; background: rgba(255,255,255,.06); }

/* ── Body wrapper ── */
.pll-body {
    padding: 0 0 40px;
}

/* ── Section header ── */
.pll-section {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px 18px 22px;
    margin-bottom: 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.pll-section--mine { border-radius: 12px; }
.pll-section__hd {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.pll-section__meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.pll-section__hd--with-action .pll-add-btn { margin-left: auto; }
.pll-section__title {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0;
    letter-spacing: -.01em;
    padding-left: 12px;
    border-left: 3px solid #7c3aed;
}
.pll-section__title svg { color: #7c3aed; }
.pll-section__count {
    font-size: 12px;
    font-weight: 700;
    color: #7c3aed;
    background: #f5f3ff;
    border: 1px solid #ede9fe;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
}
.pll-add-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #fff;
    border: none;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(124,58,237,.3);
    transition: opacity .15s, transform .15s;
}
.pll-add-btn:hover { opacity: .88; transform: translateY(-1px); }

/* ── Search bar ── */
.pll-search-wrap {
    margin-bottom: 16px;
    max-width: 380px;
}
.pll-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 0 14px;
    transition: border-color .15s;
}
.pll-search-box:focus-within { border-color: var(--color-brand); }
.pll-search-box svg { flex-shrink: 0; color: var(--color-text-muted); }
.pll-search-input {
    flex: 1;
    border: none;
    background: transparent;
    height: 38px;
    font-size: 13px;
    color: var(--color-text);
    outline: none;
    font-family: inherit;
}
.pll-search-input::placeholder { color: var(--color-text-muted); }
.pll-search-clear {
    display: flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    border: none; background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    transition: color .15s;
}
.pll-search-clear:hover { color: var(--color-text); }

/* ── Card grid ── */
.pll-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}
.pll-playlist-slider {
    overflow: hidden;
    width: 100%;
}
.pll-grid--paged {
    display: block;
    width: 100%;
    overflow: hidden;
}
.pll-page {
    display: none;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    align-content: start;
}
.pll-page.is-active {
    display: grid;
}
.pll-page-next { margin-left: auto; border: 0; background: transparent; color: var(--color-brand, #2563eb); font: inherit; font-size: 12px; font-weight: 700; padding: 4px 0; cursor: pointer; white-space: nowrap; }
.pll-page-next:hover { color: #1d4ed8; }
.pll-section__meta .pll-page-next { margin-left: 0; }
.pll-card__playing-bars { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: none; align-items: flex-end; justify-content: center; gap: 3px; width: 28px; height: 18px; padding: 4px 5px; border-radius: 8px; background: rgba(37,99,235,.88); z-index: 3; }
.pll-card--is-playing .pll-card__playing-bars { display: flex; }
.pll-card__playing-bars i { display: block; width: 3px; height: 7px; border-radius: 2px; background: #fff; animation: pll-playing-bar .8s ease-in-out infinite alternate; }
.pll-card__playing-bars i:nth-child(2) { height: 13px; animation-delay: .18s; }
.pll-card__playing-bars i:nth-child(3) { height: 9px; animation-delay: .34s; }
@keyframes pll-playing-bar { from { transform: scaleY(.45); } to { transform: scaleY(1); } }

/* ── Card (album-style: cover + body below) ── */
.pll-card {
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    display: flex; flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: transform .2s, box-shadow .2s, border-color .2s;
    box-shadow: 0 2px 8px rgba(16,24,40,.04);
}
.pll-card:hover {
    box-shadow: 0 8px 22px rgba(124,58,237,.12);
    border-color: rgba(124,58,237,.22);
    transform: translateY(-2px);
}

/* Cover area — square, matches album card cover-wrap */
.pll-card__cover {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #eef2ff, #f8fafc);
}
.pll-card__cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.pll-card__cover--c0,
.pll-card__cover--c1,
.pll-card__cover--c2,
.pll-card__cover--c3,
.pll-card__cover--c4,
.pll-card__cover--c5,
.pll-card__cover--c6,
.pll-card__cover--c7 { background: #e8f0fc; }

.pll-card__cover-icon {
    width: 60px; height: 60px;
    color: rgba(0,51,102,.22);
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.pll-card__cover-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.28);
    opacity: 0;
    transition: opacity .22s;
    z-index: 2;
}
.pll-card:hover .pll-card__cover-overlay { opacity: 1; }

.pll-card__play-btn {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #fff;
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transform: scale(.78);
    transition: transform .22s, box-shadow .22s;
    box-shadow: 0 4px 16px rgba(124,58,237,.45);
}
.pll-card:hover .pll-card__play-btn { transform: scale(1); }
.pll-card__play-btn:hover { transform: scale(1.1) !important; }

/* Body below cover (matches album card body) */
.pll-card__body {
    padding: 9px 10px 11px;
    display: flex; flex-direction: column; gap: 2px;
}
.pll-card__name {
    display: block;
    font-size: 12.5px; font-weight: 700;
    color: #0d1f3c;
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin: 0;
    transition: color .12s;
    line-height: 1.35;
}
.pll-card:hover .pll-card__name { color: #003366; }
.pll-card__meta-row {
    display: flex; align-items: center; gap: 5px;
    font-size: 10.5px;
    color: #5a7299;
    white-space: nowrap; overflow: hidden;
    line-height: 1.3;
}

/* Visibility mini badge (inside overlay) */
.pll-vis-sm {
    padding: 1px 6px;
    border-radius: 99px;
    font-size: 9px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
    flex-shrink: 0;
}
.pll-vis-sm--pub  { background: rgba(0,185,110,.15);  color: #00875a; }
.pll-vis-sm--priv { background: rgba(124,58,237,.12); color: #7c3aed; }

/* Visibility badge (used in detail pages) */
.pll-vis {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 700;
    padding: 2px 8px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pll-vis--pub  { background: rgba(0,185,110,.15);  color: #00875a; }
.pll-vis--priv { background: rgba(124,58,237,.12); color: #7c3aed; }

/* Delete button (top-right, appears on hover) */
.pll-card__del-btn {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 5;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.55);
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity .15s, background .15s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.pll-card--mine:hover .pll-card__del-btn { opacity: 1; }
.pll-card__del-btn:hover { background: rgba(239,68,68,.85); }

/* ── Empty states ── */
.pll-empty {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: 60px 24px;
    color: var(--color-text-muted);
    border-radius: 12px;
    border: 1.5px dashed #ede9fe;
    background: #faf9ff;
}
.pll-empty--sm { padding: 36px 24px; }
.pll-empty svg { color: var(--color-border); margin-bottom: 14px; }
.pll-empty__title {
    font-size: 15px; font-weight: 700;
    color: var(--color-text);
    margin: 0 0 6px;
}
.pll-empty__text { font-size: 13px; color: var(--color-text-muted); margin: 0 0 16px; }
.pll-empty__cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 20px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #fff;
    border: none; cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 600;
    box-shadow: 0 2px 10px rgba(124,58,237,.3);
    transition: opacity .15s;
}
.pll-empty__cta:hover { opacity: .88; }
.pll-inline-link {
    color: var(--color-brand);
    text-decoration: none;
    font-weight: 600;
}
.pll-inline-link:hover { text-decoration: underline; }

/* No search results */
.pll-no-results {
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: center;
    padding: 32px;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .pll-filter-bar { padding: 10px 14px; }
    .pll-searchbox { max-width: none; }
    .pll-results-count, .pll-filter-signin { display: none; }
    .pll-hero__body { padding: 8px 14px 10px; flex-wrap: wrap; }
    .pll-hero__stats { display: none; }
    .pll-body { padding: 16px 14px 32px; }
    .pll-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
}

/* ==========================================================================
   14. Admin Pages
   ========================================================================== */

/* ── Upload select ───────────────────────────────────────────────────────── */
.upload-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a0aec0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}
.upload-select option { background: var(--color-surface); color: var(--color-text); }

/* ── Admin badge ─────────────────────────────────────────────────────────── */
.admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: rgba(var(--color-brand-rgb, 255,107,53), .15);
    color: var(--color-brand);
}

/* ── Page wrapper ────────────────────────────────────────────────────────── */
.admin-genres-page {
    padding: var(--space-8) var(--space-6);
    max-width: 1000px;
    margin: 0 auto;
}
.admin-genres-page h1 {
    font-size: 26px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* ── Two-column layout ───────────────────────────────────────────────────── */
.admin-genres-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: var(--space-6);
    align-items: start;
}
@media (max-width: 720px) {
    .admin-genres-layout { grid-template-columns: 1fr; }
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.admin-genres-form-card,
.admin-genres-list-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-6);
}

/* ── Form card ───────────────────────────────────────────────────────────── */
.admin-genres-form-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.admin-genres-form-title svg { color: var(--color-brand); flex-shrink: 0; }
.admin-genres-form { display: flex; flex-direction: column; gap: var(--space-4); }
.admin-genres-input-row { display: flex; gap: var(--space-3); }
.admin-genres-input {
    flex: 1;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 14px;
    outline: none;
    transition: border-color .15s;
}
.admin-genres-input:focus { border-color: var(--color-brand); }
.admin-genres-add-btn {
    height: 40px;
    padding: 0 18px;
    border-radius: var(--radius-md, 8px);
    border: none;
    background: var(--color-brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .15s;
}
.admin-genres-add-btn:hover { opacity: .85; }

/* ── Flash messages ──────────────────────────────────────────────────────── */
.admin-flash {
    padding: 10px 14px;
    border-radius: var(--radius-md, 8px);
    font-size: 13px;
    font-weight: 500;
}
.admin-flash--success { background: rgba(72,199,116,.15); color: #48c774; }
.admin-flash--error   { background: rgba(255,56,96,.15);  color: #ff3860; }

/* ── List card ───────────────────────────────────────────────────────────── */
.admin-genres-count {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4);
}
.admin-genres-count strong { color: var(--color-text); }
.admin-genres-empty {
    padding: var(--space-8) 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
}
.admin-genres-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.admin-genre-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 9px 10px;
    border-radius: var(--radius-sm, 6px);
    transition: background .12s;
}
.admin-genre-row:hover { background: var(--color-bg); }
.admin-genre-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-brand);
    flex-shrink: 0;
    opacity: .7;
}
.admin-genre-name {
    flex: 1;
    font-size: 14px;
    color: var(--color-text);
}
.admin-genre-delete {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm, 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s;
    opacity: 0;
}
.admin-genre-row:hover .admin-genre-delete { opacity: 1; }
.admin-genre-delete:hover { background: rgba(255,56,96,.15); color: #ff3860; }

/* description textarea in the add form */
.admin-genres-desc-input {
    width: 100%;
    resize: vertical;
    min-height: 72px;
    margin-top: var(--space-3);
}

/* genre row info column — stacks name above description */
.admin-genre-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.admin-genre-desc {
    font-size: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Admin dashboard page ────────────────────────────────────────────────── */
.admin-page {
    padding: 0;
    max-width: 100%;
}

/* Hero banner */
.admin-dash-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 60%, #0ea5e9 100%);
    padding: 36px 32px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.admin-dash-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,.38) 100%);
    pointer-events: none;
}
.admin-dash-hero__left {
    position: relative;
    z-index: 1;
}
.admin-dash-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.12);
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}
.admin-dash-hero__title {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 900;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.1;
    text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.admin-dash-hero__sub {
    font-size: 13px;
    color: rgba(255,255,255,.72);
    margin: 0;
    max-width: 420px;
}
.admin-dash-hero__right {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.admin-dash-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 18px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    min-width: 80px;
    text-align: center;
}
.admin-dash-stat__val {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}
.admin-dash-stat__lbl {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.65);
    margin-top: 2px;
}

/* Content area below hero */
.admin-dash-body {
    padding: 28px 28px 40px;
}

.admin-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.admin-page-title-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.admin-page-icon { color: var(--color-brand); flex-shrink: 0; }
.admin-page-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0;
}
.admin-page-sub {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-7);
    max-width: 560px;
}
.admin-dash-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 14px;
}

/* ── Admin dashboard cards grid ──────────────────────────────────────────── */
.admin-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.admin-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color .18s, box-shadow .18s, transform .14s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.admin-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--card-accent, linear-gradient(to bottom, #7c3aed, #0ea5e9));
    border-radius: 3px 0 0 3px;
    opacity: 0;
    transition: opacity .18s;
}
.admin-card:hover::before { opacity: 1; }
.admin-card:hover {
    border-color: rgba(124,58,237,.4);
    box-shadow: 0 6px 24px rgba(0,0,0,.16), 0 0 0 1px rgba(124,58,237,.08);
    transform: translateY(-2px);
}
.admin-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--card-icon-bg, rgba(124,58,237,.1));
    color: var(--card-icon-color, #7c3aed);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .18s;
}
.admin-card:hover .admin-card__icon {
    background: var(--card-icon-bg-hover, rgba(124,58,237,.18));
}
.admin-card__body { flex: 1; min-width: 0; }
.admin-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 3px;
}
.admin-card__desc {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}
.admin-card__arrow {
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: color .15s, transform .15s;
    opacity: .5;
}
.admin-card:hover .admin-card__arrow {
    color: var(--card-icon-color, #7c3aed);
    opacity: 1;
    transform: translateX(3px);
}

/* Per-card accent colour tokens */
.admin-card--violet {
    --card-accent: linear-gradient(to bottom, #7c3aed, #a78bfa);
    --card-icon-bg: rgba(124,58,237,.1);
    --card-icon-bg-hover: rgba(124,58,237,.2);
    --card-icon-color: #8b5cf6;
}
.admin-card--blue {
    --card-accent: linear-gradient(to bottom, #2563eb, #60a5fa);
    --card-icon-bg: rgba(37,99,235,.1);
    --card-icon-bg-hover: rgba(37,99,235,.2);
    --card-icon-color: #3b82f6;
}
.admin-card--cyan {
    --card-accent: linear-gradient(to bottom, #0ea5e9, #67e8f9);
    --card-icon-bg: rgba(14,165,233,.1);
    --card-icon-bg-hover: rgba(14,165,233,.2);
    --card-icon-color: #0ea5e9;
}
.admin-card--emerald {
    --card-accent: linear-gradient(to bottom, #10b981, #6ee7b7);
    --card-icon-bg: rgba(16,185,129,.1);
    --card-icon-bg-hover: rgba(16,185,129,.2);
    --card-icon-color: #10b981;
}
.admin-card--indigo {
    --card-accent: linear-gradient(to bottom, #4f46e5, #818cf8);
    --card-icon-bg: rgba(79,70,229,.1);
    --card-icon-bg-hover: rgba(79,70,229,.2);
    --card-icon-color: #6366f1;
}
.admin-card--rose {
    --card-accent: linear-gradient(to bottom, #e11d48, #fb7185);
    --card-icon-bg: rgba(225,29,72,.1);
    --card-icon-bg-hover: rgba(225,29,72,.2);
    --card-icon-color: #f43f5e;
}

/* ==========================================================================
   15. Admin Control Panel (acp-*) — sub-nav, tables, genre panel, roles
   ========================================================================== */

/* ── Admin sub-nav ────────────────────────────────────────────────────────── */
.admin-subnav {
    background: var(--color-surface);
    border-bottom: 2px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.admin-subnav__inner {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 var(--space-6);
    overflow-x: auto;
    scrollbar-width: none;
    min-height: 48px;
}
.admin-subnav__inner::-webkit-scrollbar { display: none; }

.admin-subnav__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 48px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color .15s, border-color .15s, background .15s;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.admin-subnav__item svg { flex-shrink: 0; }
.admin-subnav__item:hover { color: var(--color-text); background: var(--color-surface-alt); }
.admin-subnav__item.is-active {
    color: var(--color-studio);
    border-bottom-color: var(--color-studio);
    font-weight: 600;
    background: rgba(124,58,237,.04);
}

/* Group separators + labels */
.admin-subnav__sep {
    width: 1px;
    height: 20px;
    background: var(--color-border);
    flex-shrink: 0;
    margin: 0 6px;
    align-self: center;
}
.admin-subnav__group-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-text-muted);
    padding: 0 6px;
    align-self: center;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Admin brand chip – plain label, no pill */

/* ══════════════════════════════════════════════════════════════════════════════
   MY ALBUMS PAGE  (.myal-*)
══════════════════════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.myal-hero {
    position: relative;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 60%, #0ea5e9 100%);
    overflow: hidden;
}
.myal-hero__waves {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 50px;
    pointer-events: none;
}
.myal-hero__body {
    position: relative;
    z-index: 1;
    padding: 28px 28px 44px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.myal-hero__left { display: flex; flex-direction: column; gap: 4px; }
.myal-hero__artist-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    background: rgba(255,255,255,.18);
    color: #fff;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    width: fit-content;
    margin-bottom: 4px;
}
.myal-hero__title {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.15;
}
.myal-hero__sub {
    font-size: 13px;
    color: rgba(255,255,255,.72);
    margin: 0;
}
.myal-hero__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.myal-hero__profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.30);
    border-radius: var(--radius-pill);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
}
.myal-hero__profile-btn:hover { background: rgba(255,255,255,.22); }
.myal-hero__new-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: #fff;
    border: none;
    border-radius: var(--radius-pill);
    color: #7c3aed;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 2px 12px rgba(0,0,0,.15);
    transition: transform .15s, box-shadow .15s;
}
.myal-hero__new-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(0,0,0,.2);
}

/* ── Create panel (slide-down) ──────────────────────────────────────────────── */
.myal-create-panel {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
    max-height: 0;
    transition: max-height .35s cubic-bezier(.4,0,.2,1), padding .35s;
    padding: 0 28px;
}
.myal-create-panel.is-open {
    max-height: 480px;
    padding: 20px 28px 24px;
}
.myal-create-panel__inner { max-width: 860px; }
.myal-create-panel__hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.myal-create-panel__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}
.myal-create-panel__title svg { color: #7c3aed; }
.myal-create-panel__close {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: background .15s, color .15s;
}
.myal-create-panel__close:hover { background: var(--color-surface-alt); color: var(--color-text); }

.myal-flash {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 14px;
}
.myal-flash--ok  { background: rgba(22,163,74,.1);  color: #15803d; border: 1px solid rgba(22,163,74,.2); }
.myal-flash--err { background: rgba(220,38,38,.1);  color: #b91c1c; border: 1px solid rgba(220,38,38,.2); }

.myal-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.myal-form__field { display: flex; flex-direction: column; gap: 5px; }
.myal-form__field--wide { grid-column: span 1; }
.myal-form__field--full { grid-column: 1 / -1; }
.myal-form__label { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.myal-form__req { color: #e2445c; }
.myal-form__input {
    padding: 8px 12px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    font-size: 13px;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
.myal-form__input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.myal-form__textarea { resize: vertical; min-height: 62px; }
.myal-form__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}
.myal-form__submit {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 20px;
    background: #7c3aed;
    border: none;
    border-radius: var(--radius-pill);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, transform .15s;
}
.myal-form__submit:hover { background: #6d28d9; transform: translateY(-1px); }
.myal-form__cancel {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: border-color .15s, color .15s;
}
.myal-form__cancel:hover { border-color: var(--color-text-muted); color: var(--color-text); }

/* ── Body / grid ──────────────────────────────────────────────────────────── */
.myal-body { padding: 24px 28px 32px; }

.myal-section-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.myal-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}
.myal-section-title svg { color: #7c3aed; }
.myal-section-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

/* Album card grid */
.myal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 16px;
}
.myal-album-card {
    border-radius: 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s, border-color .15s;
    cursor: default;
}
.myal-album-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(124,58,237,.14);
    border-color: #7c3aed;
}

/* Art block */
.myal-album-card__art {
    position: relative;
    padding-top: 100%;
    overflow: hidden;
    background: #0d1b2b;
}
.myal-album-card__img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.myal-album-card__art-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.45);
    background: linear-gradient(145deg, #5b21b6 0%, #2563eb 65%, #0ea5e9 100%);
}

/* Hover overlay with delete */
.myal-album-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(91,33,182,.65);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 8px;
    opacity: 0;
    transition: opacity .2s;
}
.myal-album-card:hover .myal-album-card__overlay { opacity: 1; }
.myal-album-card__del {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(239,68,68,.85);
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.myal-album-card__del:hover { background: #dc2626; transform: scale(1.08); }

/* Card body */
.myal-album-card__body { padding: 10px 12px 12px; }
.myal-album-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.myal-album-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.myal-album-card__year {
    font-size: 11px;
    color: var(--color-text-muted);
}
.myal-album-card__tracks {
    font-size: 11px;
    font-weight: 600;
    color: #7c3aed;
    background: rgba(124,58,237,.10);
    padding: 1px 6px;
    border-radius: var(--radius-pill);
}
.myal-album-card__desc {
    font-size: 11px;
    color: var(--color-text-muted);
    margin: 5px 0 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Empty state */
.myal-empty {
    text-align: center;
    padding: 56px 20px;
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.myal-empty svg { opacity: .25; }
.myal-empty__title { font-size: 16px; font-weight: 700; color: var(--color-text); margin: 0; }
.myal-empty__sub { font-size: 13px; margin: 0; }

/* ── Drag-and-drop states ──────────────────────────────────────────────────── */
.myal-album-card.drag-active {
    border-color: rgba(124,58,237,.4);
    box-shadow: 0 0 0 2px rgba(124,58,237,.15);
}
.myal-album-card.drag-over {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,.35);
    transform: translateY(-4px) scale(1.02);
    transition: transform .15s, box-shadow .15s;
}
.myal-album-card.drag-over .myal-album-card__art-fallback,
.myal-album-card.drag-over .myal-album-card__overlay {
    opacity: 1;
}

/* ── Drag-hint label in section header ──────────────────────────────────────── */
.myal-drag-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    border: 1px dashed var(--color-border);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    margin-left: auto;
}

/* ── Track list (drag source) ────────────────────────────────────────────────── */
.myal-track-list { display: flex; flex-direction: column; }
.myal-track-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: grab;
    transition: background .12s;
    user-select: none;
    border: 1px solid transparent;
}
.myal-track-row:hover { background: var(--color-surface-alt); border-color: var(--color-border); }
.myal-track-row:active { cursor: grabbing; }
.myal-track-row__drag { color: var(--color-text-muted); flex-shrink: 0; opacity: .5; }
.myal-track-row:hover .myal-track-row__drag { opacity: 1; }
.myal-track-row__num { font-size: 11px; color: var(--color-text-muted); width: 20px; text-align: right; flex-shrink: 0; }
.myal-track-row__title { font-size: 13px; font-weight: 600; color: var(--color-text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.myal-track-row__album { font-size: 12px; color: var(--color-text-muted); min-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.myal-track-row__badge {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    padding: 2px 7px; border-radius: var(--radius-pill); flex-shrink: 0;
}
.myal-track-row__badge--pub  { background: rgba(22,163,74,.12); color: #15803d; }
.myal-track-row__badge--draft { background: rgba(234,179,8,.12); color: #92400e; }

/* ── Artist Studio subnav ─────────────────────────────────────────────────── */
.artist-subnav {
    background: var(--color-surface);
    border-bottom: 2px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 40;
    /* Subtle gradient top accent to distinguish from admin */
    border-top: 3px solid transparent;
    border-image: var(--color-studio-grad) 1;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.artist-subnav__inner {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 var(--space-6);
    overflow-x: auto;
    scrollbar-width: none;
    min-height: 48px;
}
.artist-subnav__inner::-webkit-scrollbar { display: none; }

.artist-subnav__brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #fff;
    background: var(--color-studio-grad);
    padding: 4px 12px 4px 10px;
    border-radius: var(--radius-pill);
    margin-right: 12px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
    box-shadow: 0 2px 8px rgba(124,58,237,.3);
}

.artist-subnav__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 48px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color .15s, border-color .15s, background .15s;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.artist-subnav__item svg { flex-shrink: 0; }
.artist-subnav__item:hover { color: var(--color-text); background: rgba(124,58,237,.04); }
.artist-subnav__item.is-active {
    color: var(--color-studio);
    border-bottom-color: var(--color-studio);
    font-weight: 600;
    background: rgba(124,58,237,.04);
}
.artist-subnav__item--profile {
    margin-left: auto;
    font-size: 12px;
    color: var(--color-text-muted);
    padding: 0 10px;
}
.artist-subnav__item--profile:hover { color: var(--color-studio); }
.artist-subnav__sep {
    width: 1px;
    height: 18px;
    background: var(--color-border);
    flex-shrink: 0;
    margin: 0 6px;
    align-self: center;
}

/* ── Section shell ────────────────────────────────────────────────────────── */
.acp-section {
    padding: var(--space-5) var(--space-6);
}

/* ── "New …" button inside the page-hero right slot ────────────────────── */
.acp-page-hero-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.32);
    border-radius: var(--radius-pill);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.acp-page-hero-add-btn:hover {
    background: rgba(255,255,255,.28);
    border-color: rgba(255,255,255,.5);
}
.acp-page-hero-add-btn svg { flex-shrink: 0; }

/* ── Slide-in drawer overlay ─────────────────────────────────────────────── */
.acp-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0,0,0,.52);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.acp-drawer-overlay.is-open { opacity: 1; pointer-events: all; }

/* ── Drawer panel ────────────────────────────────────────────────────────── */
.acp-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 210;
    width: 460px;
    max-width: 95vw;
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    box-shadow: -8px 0 48px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.acp-drawer.is-open { transform: translateX(0); }

.acp-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px 15px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    background: var(--color-surface);
}
.acp-drawer__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}
.acp-drawer__title svg { color: var(--color-brand); flex-shrink: 0; }
.acp-drawer__close {
    width: 30px; height: 30px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-muted);
    transition: background .15s, color .15s, border-color .15s;
    flex-shrink: 0;
    padding: 0;
}
.acp-drawer__close:hover { background: rgba(239,68,68,.1); color: #ef4444; border-color: #fca5a5; }

.acp-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 22px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.acp-drawer__body::-webkit-scrollbar { width: 4px; }
.acp-drawer__body::-webkit-scrollbar-track { background: transparent; }
.acp-drawer__body::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }

/* Action row at the bottom of every drawer form */
.acp-drawer-form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
.acp-drawer-form-actions .acp-submit-btn {
    margin-top: 0;
    flex: 1;
    justify-content: center;
}
/* Tighter section gaps for drawer forms */
.acp-drawer__body .acp-label { margin-top: 14px; display: block; }
.acp-drawer__body .acp-label:first-child { margin-top: 0; }

/* ── Slim page-hero banner (all admin sub-pages) ────────────────────────── */
.acp-page-hero {
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 60%, #0ea5e9 100%);
    border-radius: var(--radius-md);
    padding: 18px 22px;
    margin-bottom: var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    position: relative;
    overflow: hidden;
}
.acp-page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.04) 0%, rgba(0,0,0,.22) 100%);
    pointer-events: none;
}
/* Decorative circles */
.acp-page-hero::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    pointer-events: none;
}
.acp-page-hero__left {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
}
.acp-page-hero__icon {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.acp-page-hero__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.acp-page-hero__title {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.25;
}
.acp-page-hero__sub {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    margin: 0;
}
.acp-page-hero__right {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
/* Pill badge inside hero */
.acp-page-hero .admin-badge,
.acp-page-hero-badge {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.9);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}
/* CTA button inside hero */
.acp-page-hero .acp-submit-btn {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.32);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.acp-page-hero .acp-submit-btn:hover {
    background: rgba(255,255,255,0.28);
    opacity: 1;
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.acp-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.acp-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 3px;
}
.acp-subtitle {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0;
}

/* ── Flash messages ──────────────────────────────────────────────────────── */
.acp-flash {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: var(--space-4);
}
.acp-flash--ok  { background: rgba(72,199,116,.12); color: #2d8a52; border: 1px solid rgba(72,199,116,.25); }
.acp-flash--err { background: rgba(255,56,96,.10);  color: #c0392b; border: 1px solid rgba(255,56,96,.2); }

/* ── Toolbar (filter row above table) ───────────────────────────────────── */
.acp-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.acp-search-wrap {
    position: relative;
    flex: 1;
    max-width: 340px;
}
.acp-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}
.acp-search {
    width: 100%;
    height: 34px;
    padding: 0 10px 0 30px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 13px;
    outline: none;
    transition: border-color .15s;
}
.acp-search:focus { border-color: var(--color-brand); }

/* ── Data table ──────────────────────────────────────────────────────────── */
.acp-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    /* thin horizontal scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.acp-table-wrap::-webkit-scrollbar { height: 4px; }
.acp-table-wrap::-webkit-scrollbar-track { background: transparent; }
.acp-table-wrap::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }

.acp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.acp-table thead tr {
    border-bottom: 1px solid var(--color-border);
}
.acp-table th {
    padding: 7px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.acp-table td {
    padding: 7px 12px;
    color: var(--color-text);
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
}
.acp-table tbody tr:last-child td { border-bottom: none; }
.acp-table tbody tr:hover { background: var(--color-bg); }

.acp-td-user { min-width: 200px; }
.acp-td-roles { white-space: nowrap; }
.acp-td-date { white-space: nowrap; color: var(--color-text-muted); font-size: 12px; }
.acp-th-actions, .acp-td-actions { text-align: right; white-space: nowrap; }

/* Avatar cell */
.acp-td-user { display: flex; align-items: center; gap: 10px; }
.acp-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--color-border);
}
.acp-user-info { display: flex; flex-direction: column; gap: 1px; }
.acp-user-name  { font-weight: 600; font-size: 13px; color: var(--color-text); }
.acp-user-email { font-size: 11px; color: var(--color-text-muted); }

/* Provider badge */
.acp-provider-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.acp-provider-badge--local  { background: var(--color-brand-light); color: var(--color-brand-dark); }
.acp-provider-badge--google { background: #fce8e6; color: #c1351d; }

/* Role chips */
.acp-role-chip {
    display: inline-block;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-right: 3px;
    background: #e8f4fd;
    color: #1a6db0;
}
.acp-role-chip--admin  { background: #fde8f0; color: #a01040; }
.acp-role-chip--artist { background: #e8fdef; color: #0e7a3a; }

/* Status indicator */
.acp-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}
.acp-status-dot--on  { background: #48c774; }
.acp-status-dot--off { background: #ff3860; }
.acp-status-label { font-size: 12px; color: var(--color-text-muted); }

/* Row action buttons */
.acp-action-btn {
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: opacity .15s;
}
.acp-action-btn:hover { opacity: .8; }
.acp-action-btn--warn { background: #fff5eb; color: #c07010; border-color: #f5d080; }
.acp-action-btn--ok   { background: #edfaf3; color: #1a7a40; border-color: #80d4a0; }

/* ── Genres two-column layout ─────────────────────────────────────────────── */
.acp-genres-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--space-5);
    align-items: start;
}
@media (max-width: 780px) {
    .acp-genres-layout { grid-template-columns: 1fr; }
}

/* ── Generic card ─────────────────────────────────────────────────────────── */
.acp-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}
.acp-card-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--space-4);
}
.acp-card-title svg { color: var(--color-brand); flex-shrink: 0; }
.acp-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.acp-card-title-row .acp-card-title { margin-bottom: 0; }

/* Count pill */
.acp-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    background: var(--color-brand-light);
    color: var(--color-brand);
}

/* ── Add-genre form ───────────────────────────────────────────────────────── */
.acp-form { display: flex; flex-direction: column; }
.acp-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 5px;
}
.acp-required { color: #ff3860; }
.acp-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 13px;
    outline: none;
    transition: border-color .15s;
    box-sizing: border-box;
}
.acp-input:focus { border-color: var(--color-brand); }
.acp-textarea { resize: vertical; min-height: 72px; }
.acp-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: var(--space-4);
    height: 36px;
    padding: 0 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--color-brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s;
}
.acp-submit-btn:hover { opacity: .85; }

/* ── Genre filter input ───────────────────────────────────────────────────── */
.acp-filter-wrap {
    position: relative;
    min-width: 140px;
    flex-shrink: 0;
}
.acp-filter-wrap svg {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--color-text-muted);
    pointer-events: none;
}
.acp-filter-input {
    width: 100%;
    height: 30px;
    padding: 0 8px 0 26px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 12px;
    outline: none;
    transition: border-color .15s;
    box-sizing: border-box;
}
.acp-filter-input:focus { border-color: var(--color-brand); }

/* ── Genre scrollable list ───────────────────────────────────────────────── */
.acp-genre-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 420px;
    overflow-y: auto;
    /* thin scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.acp-genre-list::-webkit-scrollbar { width: 4px; }
.acp-genre-list::-webkit-scrollbar-track { background: transparent; }
.acp-genre-list::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }

.acp-genre-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 6px;
    border-radius: var(--radius-sm);
    transition: background .1s;
}
.acp-genre-item:hover { background: var(--color-bg); }
.acp-genre-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-brand);
    opacity: .6;
    flex-shrink: 0;
}
.acp-genre-text { flex: 1; min-width: 0; }
.acp-genre-name { display: block; font-size: 13px; font-weight: 500; color: var(--color-text); }
.acp-genre-desc {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.acp-delete-btn {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .1s, background .1s, color .1s;
    flex-shrink: 0;
}
.acp-genre-item:hover .acp-delete-btn { opacity: 1; }
.acp-delete-btn:hover { background: rgba(255,56,96,.12); color: #ff3860; }

/* ── Admin radio station tags ────────────────────────────────────────────── */
.acp-radio-genre-tag,
.acp-radio-builtin-tag,
.acp-radio-country {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    margin-right: 4px;
    vertical-align: middle;
}
.acp-radio-genre-tag  { background: rgba(0,123,255,.1); color: var(--color-brand); }
.acp-radio-builtin-tag { background: rgba(40,167,69,.12); color: #28a745; }
.acp-radio-user-tag    { background: rgba(108,117,125,.1); color: var(--color-text-muted); display:inline-block; font-size:10px; font-weight:600; padding:1px 6px; border-radius:10px; }
.acp-radio-country    { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.acp-radio-dot--builtin { background: #28a745; opacity: .8; }

/* ── Radio page: inline form panel ───────────────────────────────────────── */
.rd-form-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
    overflow: hidden;
    animation: rdFormSlideIn .18s ease;
}
@keyframes rdFormSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.rd-form-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.rd-form-panel__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
}
.rd-form-panel__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color .15s, background .15s;
}
.rd-form-panel__close:hover { color: var(--color-text); background: var(--color-border); }

.rd-form {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.rd-form__row {
    display: grid;
    gap: 16px;
}
.rd-form__row--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 680px) { .rd-form__row--2 { grid-template-columns: 1fr; } }
.rd-form__field { display: flex; flex-direction: column; gap: 5px; }
.rd-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 4px;
    border-top: 1px solid var(--color-border);
    margin-top: 4px;
}
.rd-form__check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text);
    cursor: pointer;
}
.rd-form__check-label input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; }
.rd-form__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Radio table cell helpers ─────────────────────────────────────────────── */
.rd-logo-cell {
    width: 30px; height: 30px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}
.rd-logo-cell__img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.rd-logo-cell__fallback {
    width: 100%; height: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}
.rd-name-cell { display: flex; flex-direction: column; gap: 2px; }
.rd-name-cell__name { font-size: 13px; font-weight: 600; color: var(--color-text); }
.rd-name-cell__url {
    font-size: 11px;
    color: var(--color-text-muted);
    word-break: break-all;
    text-decoration: none;
    display: block;
}
.rd-name-cell__url:hover { text-decoration: underline; color: var(--color-brand); }
.acp-td-muted { color: var(--color-text-muted); font-size: 12px; }
.acp-td-country { font-size: 12px; color: var(--color-text); }
.acp-td-actions { text-align: right; white-space: nowrap; }
.acp-th-actions { text-align: right; }

/* ── Events / shared table extras ─────────────────────────────────────── */
.acp-td-title-wrap { display: flex; align-items: center; gap: 10px; }
.acp-thumb {
    width: 30px; height: 30px; border-radius: 6px;
    object-fit: cover; flex-shrink: 0; background: var(--color-surface-alt);
}
.acp-thumb--placeholder {
    width: 30px; height: 30px; border-radius: 6px; flex-shrink: 0;
    background: var(--color-surface-alt); border: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-muted);
}
.acp-td-title { font-size: 13px; font-weight: 600; color: var(--color-text); }
.acp-td--mono  { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.acp-flag {
    display: inline-block; padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    margin-right: 2px;
}
.acp-flag--feat  { background: #fef9c3; color: #854d0e; }
.acp-flag--pub   { background: #dcfce7; color: #166534; }
.acp-flag--draft { background: #f1f5f9; color: #64748b; }
.acp-row-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 6px;
    border: none; cursor: pointer; background: transparent;
    transition: background var(--transition-fast); text-decoration: none;
}
.acp-row-btn--view { color: #2563eb; }
.acp-row-btn--view:hover { background: #eff6ff; }
.acp-row-btn--edit { color: #7c3aed; }
.acp-row-btn--edit:hover { background: #f5f3ff; }
.acp-row-btn--del  { color: #ef4444; }
.acp-row-btn--del:hover  { background: #fef2f2; }
.acp-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: background .15s, color .15s, border-color .15s;
    padding: 0;
    flex-shrink: 0;
}
.acp-icon-action:hover { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.acp-icon-action--danger:hover { background: rgba(255,56,96,.08); color: #ff3860; border-color: rgba(255,56,96,.25); }

/* ── Events page: form footer toggle group ────────────────────────── */
.ev-toggles {
    display: flex;
    align-items: center;
    gap: 20px;
}
.event-art-picker__input {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.event-art-picker {
    position: relative;
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px;
    color: #475569;
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}
.event-art-picker:hover,
.event-art-picker:focus-within {
    background: #f5f3ff;
    border-color: #7c3aed;
}
.event-art-picker__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: #6d4be8;
    background: #ede9fe;
    border-radius: 9px;
}
.event-art-picker__icon svg {
    width: 19px;
    height: 19px;
}
.event-art-picker strong,
.event-art-picker small {
    display: block;
}
.event-art-picker strong {
    color: #1e293b;
    font-size: 12px;
}
.event-art-picker small {
    margin-top: 2px;
    color: #64748b;
    font-size: 10px;
}
.event-art-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.event-art-preview[hidden] {
    display: none;
}
.event-art-preview__item {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #e2e8f0;
    border: 1px solid #d8dee9;
    border-radius: 8px;
}
.event-art-preview__item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.event-art-preview__badge,
.event-art-preview__remove {
    position: absolute;
    top: 7px;
}
.event-art-preview__badge {
    left: 7px;
    padding: 3px 7px;
    color: #fff;
    background: rgba(15, 23, 42, .78);
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
}
.event-art-preview__remove {
    right: 7px;
    width: 23px;
    height: 23px;
    padding: 0;
    color: #fff;
    background: rgba(15, 23, 42, .78);
    border: 0;
    border-radius: 50%;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    flex-wrap: wrap;
}

/* ── Artist table: inline edit row ───────────────────────────────── */
.acp-edit-row > td { border-top: 2px solid var(--color-brand) !important; }
.acp-inline-edit-panel .rd-form { padding: 16px 20px; }

/* ── Custom confirm modal ────────────────────────────────────────────────── */
.acp-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 9000;
    display: none; align-items: center; justify-content: center;
}
.acp-modal-backdrop.is-open {
    display: flex;
}
.acp-modal {
    background: var(--color-card, #1a1a2e);
    border: 1px solid var(--color-border, rgba(255,255,255,.1));
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
    width: min(420px, 90vw);
    padding: 28px 28px 22px;
    display: flex; flex-direction: column; gap: 16px;
}
.acp-modal__icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,56,96,.12);
    color: #ff3860;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.acp-modal__icon--warn {
    background: rgba(245,166,35,.12);
    color: #f5a623;
}
.acp-modal__title {
    font-size: 16px; font-weight: 600;
    color: var(--color-text, #fff);
    margin: 0;
    line-height: 1.3;
}
.acp-modal__body {
    font-size: 13px;
    color: var(--color-text-muted, #aaa);
    line-height: 1.6;
    margin: 0;
}
.acp-modal__body strong {
    color: var(--color-text, #fff);
    font-weight: 600;
}
.acp-modal__footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding-top: 6px;
}
.acp-modal__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .14s, color .14s, border-color .14s;
    line-height: 1;
}
.acp-modal__btn--cancel {
    background: transparent;
    border-color: var(--color-border, rgba(255,255,255,.12));
    color: var(--color-text-muted, #aaa);
}
.acp-modal__btn--cancel:hover {
    background: var(--color-surface, rgba(255,255,255,.06));
    color: var(--color-text, #fff);
}
.acp-modal__btn--danger {
    background: #ff3860;
    color: #fff;
    border-color: #ff3860;
}
.acp-modal__btn--danger:hover { background: #e0234f; border-color: #e0234f; }
.acp-modal__btn--primary {
    background: var(--color-brand, #007bff);
    color: #fff;
    border-color: var(--color-brand, #007bff);
}
.acp-modal__btn--primary:hover { filter: brightness(1.1); }

/* Prompt modal input */
.acp-prompt__input {
    width: 100%;
    margin-top: 10px;
    padding: 9px 12px;
    background: var(--color-surface, rgba(255,255,255,.06));
    border: 1px solid var(--color-border, rgba(255,255,255,.14));
    border-radius: var(--radius-sm, 6px);
    color: var(--color-text, #fff);
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s;
}
.acp-prompt__input:focus {
    border-color: var(--color-brand, #7c6baa);
    box-shadow: 0 0 0 3px rgba(124,107,170,.2);
}
.acp-prompt__input::placeholder { color: var(--color-text-muted, #888); }

/* ── Prompt dialog — light theme overrides ───────────────────────────────── */
#acp-prompt-backdrop { background: rgba(0,0,0,.35); }
#acp-prompt-backdrop .acp-modal,
#acp-modal-backdrop   .acp-modal {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.1);
}
.acp-playlist-create-modal { background: rgba(0,0,0,.35); }
.acp-playlist-create-modal .acp-modal {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.1);
    color: #1a1a2e;
}
.acp-playlist-create-modal .acp-modal__icon {
    background: rgba(124,107,170,.12);
    color: #6c5fbf;
}
.acp-playlist-create-modal .acp-modal__title { color: #1a1a2e; }
.acp-playlist-create-modal label { color: #334155; }
.acp-playlist-create-modal .acp-prompt__input {
    background: #f7f7f9;
    border-color: #d0cfe8;
    color: #1a1a2e;
}
.acp-playlist-create-modal .acp-prompt__input:focus {
    background: #fff;
    border-color: #7c6baa;
    box-shadow: 0 0 0 3px rgba(124,107,170,.15);
}
.acp-playlist-create-modal .acp-prompt__input::placeholder { color: #8a94a6; }
.acp-playlist-art-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 5px;
    border: 1px solid #d0cfe8;
    border-radius: 4px;
    background: #f7f7f9;
}
.acp-playlist-art-picker__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%);
}
.acp-playlist-art-picker__button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 7px 10px;
    border: 1px solid #6c5fbf;
    border-radius: 3px;
    background: #6c5fbf;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
}
.acp-playlist-art-picker__button:hover { background: #5a4eab; border-color: #5a4eab; transform: translateY(-1px); }
.acp-playlist-art-picker__button:active { transform: translateY(0); }
.acp-playlist-art-picker__input:focus-visible + .acp-playlist-art-picker__button { outline: 3px solid rgba(108,95,191,.25); outline-offset: 2px; }
.acp-playlist-art-picker__name {
    min-width: 0;
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.acp-playlist-create-modal .acp-modal__btn--cancel {
    border-color: #ddd;
    color: #666;
}
.acp-playlist-create-modal .acp-modal__btn--cancel:hover {
    background: #f5f5f5;
    color: #333;
}
.acp-playlist-create-modal .acp-modal__btn--primary {
    background: #6c5fbf;
    border-color: #6c5fbf;
}
.acp-playlist-create-modal .acp-modal__btn--primary:hover {
    background: #5a4eab;
    border-color: #5a4eab;
    filter: none;
}
#acp-prompt-backdrop .acp-modal__icon {
    background: rgba(124,107,170,.12);
    color: #6c5fbf;
}
#acp-modal-backdrop .acp-modal__icon {
    background: rgba(255,56,96,.1);
    color: #e0234f;
}
#acp-modal-backdrop .acp-modal__icon--warn {
    background: rgba(245,166,35,.1);
    color: #d4880a;
}
#acp-prompt-backdrop .acp-modal__title,
#acp-modal-backdrop   .acp-modal__title {
    color: #1a1a2e;
}
#acp-prompt-backdrop .acp-modal__body,
#acp-modal-backdrop   .acp-modal__body {
    color: #555;
}
#acp-prompt-backdrop .acp-modal__body strong,
#acp-modal-backdrop   .acp-modal__body strong {
    color: #1a1a2e;
}
#acp-prompt-backdrop .acp-prompt__input {
    background: #f7f7f9;
    border-color: #d0cfe8;
    color: #1a1a2e;
}
#acp-prompt-backdrop .acp-prompt__input:focus {
    background: #fff;
    border-color: #7c6baa;
    box-shadow: 0 0 0 3px rgba(124,107,170,.15);
}
#acp-prompt-backdrop .acp-prompt__input::placeholder { color: #aaa; }
#acp-prompt-backdrop .acp-modal__btn--cancel,
#acp-modal-backdrop   .acp-modal__btn--cancel {
    border-color: #ddd;
    color: #666;
}
#acp-prompt-backdrop .acp-modal__btn--cancel:hover,
#acp-modal-backdrop   .acp-modal__btn--cancel:hover {
    background: #f5f5f5;
    color: #333;
}
#acp-modal-backdrop .acp-modal__btn--danger {
    background: #ff3860;
    border-color: #ff3860;
    color: #fff;
}
#acp-modal-backdrop .acp-modal__btn--danger:hover {
    background: #e0234f;
    border-color: #e0234f;
}
#acp-prompt-backdrop .acp-modal__btn--primary {
    background: #6c5fbf;
    border-color: #6c5fbf;
    color: #fff;
}
#acp-prompt-backdrop .acp-modal__btn--primary:hover {
    background: #5a4eab;
    border-color: #5a4eab;
    filter: none;
}
.acp-select-wrap { position: relative; }
.acp-select { appearance: none; -webkit-appearance: none; padding-right: 28px !important; cursor: pointer; }

/* ── Logo mode tabs ──────────────────────────────────────────────────────── */
.acp-logo-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    width: fit-content;
}
.acp-logo-tab {
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 500;
    background: var(--color-bg);
    color: var(--color-text-muted);
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.acp-logo-tab + .acp-logo-tab { border-left: 1px solid var(--color-border); }
.acp-logo-tab--active {
    background: var(--color-brand);
    color: #fff;
}
.acp-logo-tab:not(.acp-logo-tab--active):hover { background: var(--color-surface); }
.acp-file-input { cursor: pointer; }
.acp-field-hint {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

/* Empty / no-results states */
.acp-empty, .acp-no-results, .acp-hint {
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--space-6) 0;
    margin: 0;
}
.acp-hint { text-align: left; padding: var(--space-4) 0 0; font-style: italic; }

/* ── Roles grid ──────────────────────────────────────────────────────────── */
.acp-roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
}
.acp-role-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}
.acp-role-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-4);
}
.acp-role-card__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--color-brand-light);
    color: var(--color-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.acp-role-card__name {
    font-size: 15px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 2px;
}
.acp-role-card__full-name { font-size: 11px; color: var(--color-text-muted); display: block; }
.acp-role-card__perms-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 8px;
}
.acp-perm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.acp-perm-chip {
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 600;
    background: #f0f4ff;
    color: #3352b3;
    letter-spacing: .03em;
}
.acp-role-card__no-perms { font-size: 12px; color: var(--color-text-muted); margin: 0; font-style: italic; }

/* ── Tracks table specifics ───────────────────────────────────────────────── */
.acp-td-track {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
}
.acp-track-art {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.acp-track-art img { width: 100%; height: 100%; object-fit: cover; }
.acp-track-art-placeholder { color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.acp-track-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.acp-track-title  { font-size: 13px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.acp-track-artist { font-size: 11px; color: var(--color-text-muted); }
.acp-td-uploader  { font-size: 12px; color: var(--color-text-muted); }
.acp-td-plays     { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.acp-muted        { color: var(--color-text-muted); font-size: 12px; }

/* Genre tag */
.acp-genre-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    background: #f0f4ff;
    color: #3352b3;
}

/* Published status badge */
.acp-pub-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}
.acp-pub-badge--live  { background: #edfaf3; color: #1a7a40; }
.acp-pub-badge--draft { background: #f5f5f5; color: #888; }

/* Danger action button */
.acp-action-btn--danger { background: #fff0f0; color: #c0392b; border-color: #f5c0b8; }
.acp-action-btn--danger:hover { opacity: .8; }

/* ── Compact table modifier ───────────────────────────────────────────────── */
.acp-table--compact th,
.acp-table--compact td { padding: 5px 10px; }
.acp-table--compact .acp-td-track { min-width: 180px; }
.acp-td-idx { width: 36px; text-align: right; font-size: 11px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* ── Icon-only action buttons (replaces text buttons in tracks table) ──────── */
.acp-action-form { display: inline-flex; }
.acp-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    background: transparent;
    color: var(--color-text-muted);
    padding: 0;
    flex-shrink: 0;
}
.acp-icon-action:hover { background: var(--color-bg); color: var(--color-text); border-color: var(--color-border); }
.acp-icon-action--warn   { color: #c07010; }
.acp-icon-action--warn:hover { background: #fff5eb; border-color: #f5d080; }
.acp-icon-action--ok     { color: #1a7a40; }
.acp-icon-action--ok:hover { background: #edfaf3; border-color: #80d4a0; }
.acp-icon-action--danger { color: #c0392b; }
.acp-icon-action--danger:hover { background: #fff0f0; border-color: #f5c0b8; }
.acp-td-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.acp-th-actions { text-align: right; }

/* ── Toolbar right slot (per-page selector) ───────────────────────────────── */
.acp-toolbar-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.acp-per-page-label { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.acp-per-page-select {
    height: 30px;
    padding: 0 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 12px;
    cursor: pointer;
    outline: none;
}
.acp-per-page-select:focus { border-color: var(--color-brand); }

/* ── Pagination bar ───────────────────────────────────────────────────────── */
.acp-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 10px 0 4px;
}
.acp-pagination__info {
    font-size: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.acp-pagination__controls {
    display: flex;
    align-items: center;
    gap: 3px;
}
.acp-pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    line-height: 1;
}
.acp-pg-btn:hover:not([disabled]) { background: var(--color-bg); border-color: var(--color-brand); color: var(--color-brand); }
.acp-pg-btn--active { background: var(--color-brand); border-color: var(--color-brand); color: #fff; font-weight: 700; }
.acp-pg-btn--active:hover { background: var(--color-brand); opacity: .9; }
.acp-pg-btn[disabled] { opacity: .38; cursor: default; }
.acp-pg-ellipsis { display: inline-flex; align-items: center; justify-content: center; width: 24px; font-size: 12px; color: var(--color-text-muted); }

/* Empty state with icon */
.acp-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    color: var(--color-text-muted);
    text-align: center;
    gap: var(--space-3);
}
.acp-empty-state p { margin: 0; font-size: 14px; }

/* ── 16. Turntable Idle Overlay ──────────────────────────────────────────── */
/*
 * Slides up from below the fold after 60 s of inactivity.
 * Occupies the lower 50 % of the viewport, mirrors the player-bar palette.
 * Realistic vinyl record with CSS groove simulation + tonearm + full controls.
 */

/* ─── Overlay shell ──────────────────────────────────────────────── */
.tt-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50vh;
    min-height: 300px;
    max-height: 520px;
    z-index: 900;
    background: linear-gradient(155deg, #001428 0%, var(--color-player-bg) 45%, #001e42 100%);
    border-top: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 -10px 60px rgba(0,8,32,.7), 0 -2px 20px rgba(0,80,200,.18);
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-5) var(--space-6);
    transform: translateY(100%);
    transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
    overflow: hidden;
}
.tt-overlay.tt-visible { transform: translateY(0); }

/* Ambient glow radial gradient behind the platter */
.tt-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 90% at 18% 55%,
        rgba(0, 70, 180, 0.35) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* ─── Close button ───────────────────────────────────────────────── */
.tt-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.65);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast);
    z-index: 10;
    flex-shrink: 0;
}
.tt-close:hover {
    background: rgba(255,255,255,.22);
    color: #fff;
    border-color: rgba(255,255,255,.4);
}

/* ─── Platter section (left side) ────────────────────────────────── */
.tt-platter-section {
    position: relative;
    flex-shrink: 0;
    width: 220px;
    height: 220px;
    z-index: 3;    /* must exceed .tt-controls (z:2) so the arm paints above the controls column */
}

/* Wood-grain turntable base — appears as a raised shadow under the vinyl */
.tt-platter-base {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%,
        #6b4423 0%, #3e2210 35%, #1e0f06 65%, #0a0503 100%);
    box-shadow:
        0 0 0  9px #2a1408,
        0 0 0 16px #180b04,
        0  8px 48px rgba(0,0,0,.85),
        0 -2px 10px rgba(255,255,255,.03);
}

/* ─── Vinyl record ───────────────────────────────────────────────── */
.tt-vinyl {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /*
     * Layer order (bottom → top):
     *   1. Base dark vinyl colour
     *   2. Tight groove rings (repeating-radial-gradient)
     *   3. Subtle iridescent conic sheen
     */
    background:
        conic-gradient(
            rgba(80,  130, 255, 0.055)   0deg,
            rgba(170,  70, 255, 0.055)  72deg,
            rgba(255,  70, 130, 0.045) 144deg,
            rgba(70,  255, 170, 0.045) 216deg,
            rgba(70,  150, 255, 0.055) 288deg,
            rgba(80,  130, 255, 0.055) 360deg
        ),
        repeating-radial-gradient(
            circle at center,
            rgba(255,255,255,.030)  0px,
            rgba(0,0,0,.10)         1.1px,
            rgba(255,255,255,.015)  2.2px,
            rgba(0,0,0,.055)        3.4px,
            transparent             4.8px,
            rgba(255,255,255,.012)  6.2px
        ),
        radial-gradient(
            circle at 44% 40%,
            #2c2c2c 0%,
            #111111 52%,
            #040404 100%
        );
    box-shadow:
        0 0 0  3px #131313,
        0 0 0  7px #090909,
        0  8px 36px rgba(0,0,0,.9),
        inset 0 0 70px rgba(0,0,0,.55);
    will-change: transform;
}

@keyframes tt-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.tt-vinyl.tt-spinning {
    animation: tt-spin 1.8s linear infinite;
}

/* Centre label — shows album art, spins with the disc */
.tt-vinyl__label {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 37%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    box-shadow:
        0 0 0 2px #2a2a2a,
        0 0 0 3.5px rgba(255,255,255,.13),
        0 3px 12px rgba(0,0,0,.75);
    z-index: 1;
}
.tt-vinyl__art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #1c1c1c;
}
/* Spindle hole */
.tt-vinyl__label::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 8px; height: 8px;
    background: radial-gradient(circle, #555, #222);
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px #444, inset 0 1px 3px rgba(0,0,0,.9);
    z-index: 2;
}

/* ─── Tonearm — JS-controlled progressive tracking ─────────────── */
/*
 * JS drives style.transform = rotate(Xdeg) directly.
 * Pivot at right:-6% (≈13px outside disc right edge) so the full arm
 * tube sweeps visibly across the disc face during playback.
 *
 *   ARM_REST  = 22°   CW  – arm resting off disc to the right
 *   ARM_OUTER = -12°  outer groove (~101 px radius from disc centre)
 *   ARM_INNER = -32°  inner groove (~52 px radius, just outside label)
 *
 * CSS pivot position (220px disc, arm at right:-6% ≈ -13px):
 *   arm left = 220+13-20 = 213px  →  pivot x = 213+10 = 223px
 *   pivot y  = top(2%=4.4px) + origin-y(22px) = 26px
 *
 * When playing, .tt-playing is added by JS → headshell shakes.
 */
.tt-arm {
    position: absolute;
    top: 2%;
    right: -6%;             /* pivot ~13 px outside right disc edge */
    width: 20px;
    height: 68%;
    transform-origin: 10px 22px;   /* centre of pivot bearing */
    transform: rotate(8deg);       /* outer groove — overridden by JS */
    z-index: 6;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.tt-arm--dragging { cursor: grabbing; }

/* ── Precision pivot bearing housing (flat knob, not a sphere) ─── */
.tt-arm::before {
    content: '';
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%) translateX(-4px);
    width: 24px; height: 24px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 28% 24%,
            rgba(255,255,255,.88) 0%,
            rgba(255,255,255,.12) 22%,
            transparent           38%),
        radial-gradient(circle at 44% 40%,
            #eeeeee 0%,
            #cccccc 14%,
            #999    38%,
            #555    62%,
            #222    84%,
            #0a0a0a 100%);
    box-shadow:
        0 4px 14px rgba(0,0,0,.80),
        inset 0 -1px 4px rgba(0,0,0,.35),
        0 0 0 1.5px rgba(200,200,200,.18),
        0 0 0   3px rgba(0,0,0,.50);
    z-index: 8;
}

/* ── Counterweight — rectangular CYLINDER (not a sphere) ─── */
/*
 * width < height makes it look like a machined metal cylinder seen
 * from above, clearly distinct from the circular bearing cap.
 */
.tt-arm__cw {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px; height: 28px; /* taller than wide = cylinder */
    border-radius: 4px 4px 3px 3px;
    background: linear-gradient(to right,
        #1a1a1a  0%,
        #787878 16%,
        #d4d4d4 30%,
        #f0f0f0 42%,
        #ffffff 50%,
        #f0f0f0 58%,
        #d4d4d4 70%,
        #787878 84%,
        #1a1a1a 100%);
    box-shadow:
        0 5px 14px rgba(0,0,0,.78),
        0 1px  4px rgba(0,0,0,.42),
        0 0 0 1px rgba(255,255,255,.10);
    z-index: 9;
}
/* Machining notch ring on counterweight */
.tt-arm__cw::before {
    content: '';
    position: absolute;
    top: 45%;
    left: 2px; right: 2px;
    height: 1.5px;
    background: linear-gradient(to right,
        transparent,
        rgba(0,0,0,.50)    20%,
        rgba(255,255,255,.70) 40%,
        rgba(255,255,255,.85) 50%,
        rgba(255,255,255,.70) 60%,
        rgba(0,0,0,.50)    80%,
        transparent);
}

/* ── Polished aluminium arm tube (widened for visibility) ─── */
.tt-arm__tube {
    position: absolute;
    top: 38px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;              /* wider = more visible sweeping over disc */
    height: calc(100% - 60px);
    background: linear-gradient(to right,
        #888   0%,
        #d8d8d8 14%,
        #f5f5f5 26%,
        #e8e8e8 40%,
        #cccccc 56%,
        #aaaaaa 72%,
        #666666 88%,
        #333333 100%);
    border-radius: 4px 4px 2px 2px;
    box-shadow:
        2px 0 8px rgba(0,0,0,.50),
        -1px 0 3px rgba(0,0,0,.22),
        inset 1px 0 3px rgba(255,255,255,.55);
}
/* Adjustment-ring band */
.tt-arm__tube::before {
    content: '';
    position: absolute;
    top: 28%;
    left: -3px; right: -3px;
    height: 3px;
    background: linear-gradient(to right,
        #333 0%, #aaaaaa 28%, #eeeeee 50%, #aaaaaa 72%, #333 100%);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,.50);
}
/* ── Headshell + cartridge + cantilever ─── */
.tt-arm__head {
    position: absolute;
    bottom: 0;
    left: -6px;
    width: 16px; height: 11px;
    transform-origin: 50% 0%;     /* shake pivots at tube connection */
    background: linear-gradient(145deg,
        #c8c8c8 0%, #a8a8a8 22%,
        #808080 50%, #484848 76%,
        #282828 100%);
    clip-path: polygon(14% 0%, 100% 0%, 100% 55%, 82% 100%, 0% 100%, 0% 20%);
    box-shadow: 0 2px 8px rgba(0,0,0,.72);
}
/* Cartridge body */
.tt-arm__head::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 12px; height: 7px;
    border-radius: 1px 1px 0 0;
    background: linear-gradient(170deg,
        #282828 0%, #1a1a1a 38%,
        #222222 62%, #0e0e0e 100%);
    box-shadow:
        inset 0 1px 1.5px rgba(255,255,255,.14),
        inset 0 -1px 2px rgba(0,0,0,.55);
}
/* Cantilever rod + diamond tip */
.tt-arm__head::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 2px;
    width: 0.8px;
    height: 20px;
    transform: rotate(-3deg);
    transform-origin: top center;
    background: linear-gradient(to bottom,
        #c8c8c8  0%,
        #a8a8a8 20%,
        #888888 40%,
        #606060 60%,
        #303030 78%,
        rgba(200,225,255,.98) 100%);
    border-radius: 0 0 0.5px 0.5px;
    box-shadow:
        0 2px 5px rgba(0,0,0,.55),
        0 0 4px 1.5px rgba(150,200,255,.38);
}

/* ── Stylus vibration — active when JS adds .tt-playing to .tt-arm ─── */
/*
 * The headshell micro-vibrates like a real needle reading the groove.
 * JS sets `arm.classList.toggle('tt-playing', playing)` each state change.
 * transform is on .tt-arm__head (child), not .tt-arm, so JS rotation
 * of the arm itself is never interfered with.
 */
@keyframes tt-styl-vibe {
    0%, 100% { transform: none; }
    20%      { transform: translateX(0.5px)  translateY(-0.25px) rotate( 0.20deg); }
    40%      { transform: translateX(-0.4px) translateY( 0.18px) rotate(-0.15deg); }
    60%      { transform: translateX(0.35px) translateY(-0.12px) rotate( 0.12deg); }
    80%      { transform: translateX(-0.3px) translateY( 0.10px) rotate(-0.08deg); }
}
.tt-arm.tt-playing .tt-arm__head {
    animation: tt-styl-vibe 0.11s ease-in-out infinite;
}

/* ─── Controls section (right of vinyl) ─────────────────────────── */
.tt-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    z-index: 2;
    padding-left: var(--space-4);
    padding-right: 44px; /* clear the × button */
}

/* Track info */
.tt-track-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tt-title {
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -.3px;
    line-height: 1.15;
}
.tt-artist {
    font-size: 13px;
    color: rgba(255,255,255,.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Animated EQ bars — visible only while playing */
.tt-eq {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 18px;
    margin-top: 3px;
}
.tt-eq__bar {
    width: 3px;
    height: 5px;
    background: #7ec8ff;
    border-radius: 1.5px 1.5px 0 0;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.tt-eq--active .tt-eq__bar                  { opacity: 1; }
.tt-eq--active .tt-eq__bar:nth-child(1) { animation: tt-eq .80s ease-in-out infinite; }
.tt-eq--active .tt-eq__bar:nth-child(2) { animation: tt-eq .60s ease-in-out infinite  .15s; }
.tt-eq--active .tt-eq__bar:nth-child(3) { animation: tt-eq 1.00s ease-in-out infinite .05s; }
.tt-eq--active .tt-eq__bar:nth-child(4) { animation: tt-eq .70s ease-in-out infinite  .30s; }
.tt-eq--active .tt-eq__bar:nth-child(5) { animation: tt-eq .90s ease-in-out infinite  .10s; }

@keyframes tt-eq {
    0%, 100% { height: 4px;  }
    50%       { height: 16px; }
}

/* Transport buttons */
.tt-transport {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.tt-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,.55);
    padding: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
}
.tt-btn svg   { width: 22px; height: 22px; display: block; }
.tt-btn:hover { color: #fff; background: rgba(255,255,255,.1); }
.tt-btn--active { color: #7ec8ff !important; }

/* Large circular play / pause button */
.tt-btn--play {
    background: rgba(255,255,255,.95);
    color: var(--color-player-bg);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    padding: 0;
    transition: background var(--transition-fast), transform var(--transition-fast);
    flex-shrink: 0;
}
.tt-btn--play svg { width: 22px; height: 22px; }
.tt-btn--play:hover {
    background: #fff;
    transform: scale(1.1);
    color: var(--color-player-bg);
}

/* Progress row */
.tt-progress-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
}
.tt-time {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    flex-shrink: 0;
    min-width: 32px;
    font-variant-numeric: tabular-nums;
}
.tt-time:last-child { text-align: right; }

.tt-progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,.15);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    transition: height var(--transition-fast);
}
.tt-progress-bar:hover { height: 6px; }
.tt-progress-fill {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #7ec8ff, #fff);
    border-radius: 2px;
    pointer-events: none;
    transition: width .1s linear;
}
.tt-progress-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%) scale(0);
    width: 13px;
    height: 13px;
    background: #fff;
    border-radius: 50%;
    pointer-events: none;
    transition: transform var(--transition-fast);
    box-shadow: 0 1px 5px rgba(0,0,0,.45);
}
.tt-progress-bar:hover .tt-progress-thumb { transform: translate(-50%, -50%) scale(1); }

/* Volume row */
.tt-volume-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.tt-vol-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 90px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(
        to right,
        rgba(255,255,255,.9)  0%,
        rgba(255,255,255,.9)  var(--tt-vol, 70%),
        rgba(255,255,255,.2)  var(--tt-vol, 70%),
        rgba(255,255,255,.2)  100%
    );
    outline: none;
    cursor: pointer;
}
.tt-vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
    transition: transform var(--transition-fast);
}
.tt-vol-slider::-moz-range-thumb {
    width: 13px; height: 13px;
    border: none;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.tt-vol-slider:hover::-webkit-slider-thumb { transform: scale(1.22); }

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .tt-platter-section { width: 168px; height: 168px; }
    .pll-page { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
    .tt-platter-base    { inset: -10px; }
    .tt-title           { font-size: 15px; }
    .tt-transport       { gap: var(--space-2); }
    .tt-btn--play       { width: 40px; height: 40px; }
    .tt-btn svg         { width: 18px; height: 18px; }
    .tt-overlay         { gap: var(--space-4); }
}
@media (max-width: 480px) {
    .tt-overlay         { gap: var(--space-3); padding: var(--space-4) var(--space-3); }
    .tt-platter-section { width: 130px; height: 130px; }
    .tt-platter-base    { inset: -8px; }
    .tt-controls        { padding-left: var(--space-2); }
    .tt-vol-slider      { width: 60px; }
    .tt-title           { font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════════════
   17. DISCOVER PAGE  (dsc-*)
══════════════════════════════════════════════════════════════════ */

/* ─── Page wrapper ────────────────────────────────────────────── */
.dsc-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-bottom: calc(var(--space-6) * 2);
}

.dsc-intents {
    padding: 22px;
    border: 1px solid rgba(210, 218, 231, .9);
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0, rgba(124, 58, 237, .055), transparent 25rem),
        #fff;
    box-shadow: 0 14px 34px rgba(23, 35, 64, .07);
}
.dsc-intents__heading {
    max-width: 620px;
    margin-bottom: 17px;
}
.dsc-intents__heading > span {
    display: block;
    margin-bottom: 5px;
    color: #7253d6;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
}
.dsc-intents__heading h2 {
    margin: 0;
    color: var(--color-text);
    font-size: clamp(20px, 2.3vw, 29px);
    line-height: 1.12;
    letter-spacing: -.04em;
}
.dsc-intents__heading p {
    margin: 7px 0 0;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.5;
}
.dsc-intents__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.dsc-intent-card {
    position: relative;
    min-height: 156px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding: 15px;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(18, 31, 60, .12);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dsc-intent-card:hover {
    color: #fff;
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, .27);
    box-shadow: 0 15px 30px rgba(18, 31, 60, .2);
}
.dsc-intent-card--pulse {
    background: linear-gradient(145deg, #16264b, #274ea0);
}
.dsc-intent-card--mood {
    background: linear-gradient(145deg, #38206c, #7850d9);
}
.dsc-intent-card--genre {
    background: linear-gradient(145deg, #073e5c, #0786ad);
}
.dsc-intent-card--artist {
    background: linear-gradient(145deg, #282a62, #505bc2);
}
.dsc-intent-card__number {
    position: absolute;
    top: 13px;
    left: 14px;
    color: rgba(255, 255, 255, .48);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
}
.dsc-intent-card__visual {
    position: absolute;
    top: 15px;
    right: 13px;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    background: rgba(255, 255, 255, .065);
    transform: rotate(4deg);
    transition: transform .22s ease, background .22s ease;
}
.dsc-intent-card:hover .dsc-intent-card__visual {
    background: rgba(255, 255, 255, .11);
    transform: rotate(0) scale(1.04);
}
.dsc-intent-card__visual svg {
    width: 34px;
    height: 34px;
}
.dsc-intent-card__copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 20px;
}
.dsc-intent-card__copy strong {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}
.dsc-intent-card__copy small {
    color: rgba(255, 255, 255, .65);
    font-size: 9px;
    line-height: 1.4;
}
.dsc-intent-card__arrow {
    position: absolute;
    right: 14px;
    bottom: 15px;
    font-size: 15px;
    transition: transform .18s ease;
}
.dsc-intent-card:hover .dsc-intent-card__arrow {
    transform: translateX(3px);
}

@media (max-width: 1050px) {
    .dsc-intents__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .dsc-intents {
        padding: 17px;
    }
    .dsc-intents__grid {
        grid-template-columns: 1fr;
    }
    .dsc-intent-card {
        min-height: 132px;
    }
}

/* ─── Hero Banner ─────────────────────────────────────────────── */
.dsc-hero {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    height: 260px;
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    background: linear-gradient(135deg, #003366 0%, #007bff 100%); /* fallback */
}

/* Blurred cover-art fill */
.dsc-hero__backdrop {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(28px) brightness(0.40);
    transform: scale(1.12);   /* hide blur-edge artifacts */
    z-index: 0;
}

/* Dark left-to-right gradient overlay */
.dsc-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0.90) 0%,
        rgba(0,0,0,0.55) 45%,
        rgba(0,0,0,0.08) 100%
    );
    z-index: 1;
}

/* Text content (left) */
.dsc-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-6);
    flex: 1;
    min-width: 0;
    gap: 4px;
}

.dsc-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    width: fit-content;
    margin-bottom: 8px;
    box-shadow: 0 2px 10px rgba(124,58,237,.35);
}

.dsc-hero__title {
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 420px;
    text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.dsc-hero__artist {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.72);
    margin-top: 2px;
}
.dsc-hero__tagline {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    margin-top: 3px;
}

.dsc-hero__cta {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
    align-items: center;
}

/* ─── Hero CTA buttons (.dsc-btn) ────────────────────────────── */
.dsc-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    border-radius: var(--radius-pill);
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.dsc-btn--play {
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #fff;
    box-shadow: 0 4px 18px rgba(124,58,237,.4);
}
.dsc-btn--play:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(124,58,237,.55);
}
.dsc-btn--ghost {
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.85);
    border: 1.5px solid rgba(255,255,255,.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.dsc-btn--ghost:hover {
    background: rgba(255,255,255,.22);
    color: #fff;
    border-color: rgba(255,255,255,.45);
}
.dsc-btn--ghost.is-saved {
    background: rgba(124,58,237,.32);
    color: #fff;
    border-color: rgba(196,181,253,.72);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.dsc-hero__play-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-brand);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    padding: 11px 24px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--transition-fast),
                box-shadow var(--transition-fast),
                background var(--transition-fast);
    box-shadow: 0 4px 18px rgba(0,123,255,0.50);
}
.dsc-hero__play-btn svg { width: 15px; height: 15px; fill: #fff; flex-shrink: 0; }
.dsc-hero__play-btn:hover {
    background: #0062cc;
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(0,123,255,0.60);
}

.dsc-hero__add-btn {
    background: rgba(255,255,255,0.10);
    border: 1.5px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.82);
    border-radius: var(--radius-pill);
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast);
}
.dsc-hero__add-btn:hover {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border-color: rgba(255,255,255,0.45);
}

/* Album-art thumbnail (right) */
.dsc-hero__art-wrap {
    position: relative;
    z-index: 2;
    width: 230px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
}
.dsc-hero__art {
    width: 185px;
    height: 185px;
    border-radius: var(--radius-md);
    object-fit: cover;
    box-shadow: 0 16px 48px rgba(0,0,0,0.65);
    transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
}
.dsc-hero:hover .dsc-hero__art { transform: scale(1.04) rotate(-1.5deg); }

/* ─── Mood Pills Strip ────────────────────────────────────────── */
.dsc-moods {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding: 2px 0 6px;
    scrollbar-width: none;
    flex-shrink: 0;
}
.dsc-moods::-webkit-scrollbar { display: none; }

.dsc-mood-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color var(--transition-fast),
                background    var(--transition-fast),
                color         var(--transition-fast),
                box-shadow    var(--transition-fast);
}
.dsc-mood-pill:hover {
    border-color: #7c3aed;
    color: #7c3aed;
    background: #f5f3ff;
}
.dsc-mood-pill--active,
.dsc-mood-pill.active {
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    border-color: #7c3aed;
    color: #fff;
    box-shadow: 0 2px 10px rgba(124,58,237,.30);
}
.dsc-mood-pill__emoji { font-size: 14px; line-height: 1; }

/* ─── Section Wrapper ─────────────────────────────────────────── */
.dsc-section { display: flex; flex-direction: column; gap: var(--space-4); }
.dsc-section--last { padding-bottom: var(--space-6); }

.dsc-section-hd {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.dsc-section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    flex: 1;
    min-width: 0;
}

/* Live badge */
.dsc-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #FFF5F5;
    color: #C53030;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}
.dsc-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #C53030;
    animation: dsc-pulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes dsc-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.35; transform: scale(0.65); }
}

/* AI badge */
.dsc-badge--ai {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* See-all link */
.dsc-see-all {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-brand);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color var(--transition-fast);
}
.dsc-see-all:hover { color: #0047b3; text-decoration: underline; }

/* Refresh button */
.dsc-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1.5px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: border-color var(--transition-fast),
                color var(--transition-fast),
                background var(--transition-fast);
    flex-shrink: 0;
}
.dsc-refresh-btn:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
    background: var(--color-brand-light);
}
.dsc-refresh-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.dsc-refresh-btn.spinning svg { animation: dsc-spin 0.7s linear infinite; }
@keyframes dsc-spin { to { transform: rotate(360deg); } }

/* ─── Horizontal scroll row ───────────────────────────────────── */
.dsc-row {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.dsc-row::-webkit-scrollbar { height: 4px; }
.dsc-row::-webkit-scrollbar-track { background: transparent; }
.dsc-row::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

/* ─── Track Card ──────────────────────────────────────────────── */
.dsc-card {
    flex-shrink: 0;
    width: 158px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    cursor: pointer;
    border-radius: var(--radius-md);
    padding: var(--space-2);
    border: 1px solid transparent;
    transition: background var(--transition-fast),
                border-color var(--transition-fast);
    outline: none;
}
.dsc-card:hover,
.dsc-card:focus-visible {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
}

.dsc-card__art-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-border);
}
.dsc-card__art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.38s cubic-bezier(0.25,0.46,0.45,0.94);
}
.dsc-card:hover .dsc-card__art,
.dsc-card:focus-visible .dsc-card__art { transform: scale(1.07); }

/* Play overlay on hover — kept for backward compat; new HTML uses .dsc-card__overlay */
.dsc-card__play-overlay,
.dsc-card__overlay--legacy {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.38);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    border-radius: inherit;
    transition: opacity var(--transition-base);
}
.dsc-card:hover  .dsc-card__play-overlay,
.dsc-card:focus-visible .dsc-card__play-overlay { opacity: 1; }

.dsc-card__play-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #003366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(0,51,102,0.55);
    transition: transform var(--transition-fast), background var(--transition-fast);
    cursor: pointer;
    border: none;
    padding: 0;
}
.dsc-card__play-icon:hover { transform: scale(1.10); background: #004080; }
.dsc-card__play-icon svg { width: 18px; height: 18px; fill: #fff; margin-left: 2px; }

/* NEW badge */
.dsc-card__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.09em;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    pointer-events: none;
    z-index: 2;
}
.dsc-card__badge--new {
    background: linear-gradient(135deg, #00B5D8 0%, #0BC5EA 100%);
    color: #fff;
    box-shadow: 0 2px 10px rgba(11,197,234,0.45);
}

/* Duration chip */
.dsc-card__duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.62);
    color: rgba(255,255,255,0.90);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 2;
}

.dsc-card__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 2px;
}
.dsc-card__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dsc-card__artist {
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dsc-card__tip-btn {
    align-self: flex-start;
    margin-top: 4px;
    padding: 3px 8px;
    border: 1px solid rgba(124,58,237,.18);
    border-radius: 4px;
    background: rgba(124,58,237,.07);
    color: #6d28d9;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}
.dsc-card__tip-btn:hover { background: rgba(124,58,237,.14); border-color: rgba(124,58,237,.3); }
.dsc-card__tip-btn:focus-visible { outline: 2px solid rgba(124,58,237,.3); outline-offset: 2px; }
.dsc-card__plays {
    font-size: 10px;
    color: var(--color-text-muted);
    margin-top: 1px;
}

/* ─── Two-column layout (Chart + New Releases) ────────────────── */
.dsc-two-col {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: var(--space-6);
    align-items: start;
}

/* ─── Chart List ──────────────────────────────────────────────── */
.dsc-chart {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dsc-chart__item {
    display: grid;
    grid-template-columns: 28px 44px 1fr auto 20px 88px;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    outline: none;
    transition: background var(--transition-fast);
    position: relative;
}
.dsc-chart__item:hover,
.dsc-chart__item:focus-visible { background: var(--color-surface-alt); }

/* Art wrapper — circular */
.dsc-chart__art-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}
.dsc-chart__art-wrap .dsc-chart__art {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* Play button hovering over the thumbnail — circular */
.dsc-chart__play-btn {
    position: absolute;
    inset: 0;
    background: rgba(0,51,102,0.82);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition-fast);
    padding: 0;
}
.dsc-chart__play-btn svg {
    width: 18px;
    height: 18px;
    fill: #fff;
    margin-left: 2px;
}
.dsc-chart__item:hover .dsc-chart__play-btn,
.dsc-chart__item:focus-visible .dsc-chart__play-btn { opacity: 1; }
.dsc-chart__play-btn:hover { background: rgba(0,51,102,0.95); }

/* Action buttons — fixed-width container keeps everything on one row */
.dsc-chart__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    width: 88px;
    opacity: 0;
    transition: opacity var(--transition-fast);
    flex-shrink: 0;
}
.dsc-chart__item:hover .dsc-chart__actions,
.dsc-chart__item:focus-within .dsc-chart__actions { opacity: 1; }

.dsc-chart__action-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.dsc-chart__tip-btn {
    height: 24px;
    padding: 0 6px;
    border: 1px solid rgba(124,58,237,.18);
    border-radius: 4px;
    background: rgba(124,58,237,.07);
    color: #6d28d9;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}
.dsc-chart__tip-btn:hover { background: rgba(124,58,237,.14); border-color: rgba(124,58,237,.3); }
.dsc-chart__tip-btn:focus-visible { outline: 2px solid rgba(124,58,237,.3); outline-offset: 2px; }
.dsc-chart__action-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    pointer-events: none;
}
.dsc-chart__action-btn:hover {
    background: var(--color-border);
    color: var(--color-text);
}
.dsc-chart__action-btn--like:hover {
    color: #E53E3E;
    background: rgba(229,62,62,0.12);
}
.dsc-chart__action-btn.is-saved {
    color: #6d42df;
    background: rgba(109,66,223,.12);
}
.dsc-chart__action-btn--like.is-saved {
    color: #e2445c;
    background: rgba(226,68,92,.12);
}
.dsc-chart__action-btn--like.is-saved svg {
    fill: currentColor;
    stroke: currentColor;
}

.dsc-chart__rank-wrap {
    position: relative;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dsc-chart__rank {
    font-size: 14px;
    font-weight: 800;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1;
}
/* Gold / Silver / Bronze for top 3 */
.dsc-chart__item:nth-child(1) .dsc-chart__rank { color: #D69E2E; }
.dsc-chart__item:nth-child(2) .dsc-chart__rank { color: #A0AEC0; }
.dsc-chart__item:nth-child(3) .dsc-chart__rank { color: #B7791F; }

/* EQ bars — overlay inside rank-wrap, shown while playing */
.dsc-chart__eq {
    position: absolute;
    inset: 0;
    display: none;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    padding-bottom: 2px;
}
.dsc-chart__eq b {
    display: block;
    width: 3px;
    background: var(--color-brand);
    border-radius: 1.5px;
    transform-origin: bottom;
    animation: dsc-eq-bar 0.8s ease-in-out infinite;
}
.dsc-chart__eq b:nth-child(1) { height: 7px;  animation-duration: 0.80s; }
.dsc-chart__eq b:nth-child(2) { height: 13px; animation-duration: 0.60s; animation-delay: .12s; }
.dsc-chart__eq b:nth-child(3) { height: 9px;  animation-duration: 0.95s; animation-delay: .22s; }

/* Active row: loaded track (may be paused) */
.dsc-chart__item--active {
    background: rgba(0, 51, 102, 0.07) !important;
}
.dsc-chart__item--active .dsc-chart__rank {
    color: var(--color-brand);
}
/* Always show the play/pause button on the loaded track */
.dsc-chart__item--active  .dsc-chart__play-btn,
.dsc-chart__item--playing .dsc-chart__play-btn { opacity: 1; }

/* Playing row: hide rank number, show animated EQ */
.dsc-chart__item--playing .dsc-chart__rank { visibility: hidden; }
.dsc-chart__item--playing .dsc-chart__eq   { display: flex; }
/* Paused row: EQ bars visible but frozen */
.dsc-chart__item--active:not(.dsc-chart__item--playing) .dsc-chart__eq b { animation: none; }

.dsc-chart__art {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.dsc-chart__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.dsc-chart__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dsc-chart__artist {
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dsc-chart__plays {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.dsc-chart__trend {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.dsc-chart__trend--up     { color: #38A169; }
.dsc-chart__trend--down   { color: #E53E3E; }
.dsc-chart__trend--stable { color: var(--color-text-muted); }

/* ─── New Releases grid ───────────────────────────────────────── */
.dsc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: var(--space-4);
}
.dsc-new-releases__actions { display: flex; align-items: center; gap: 14px; }
.dsc-new-releases-slider { overflow: hidden; }
.dsc-grid--paged { display: flex; gap: 0; transition: transform .38s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.dsc-new-releases-page { flex: 0 0 100%; min-width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.dsc-trending__actions { display: flex; align-items: center; gap: 14px; }
.dsc-trending-slider { overflow: hidden; }
.dsc-row--paged { display: flex; gap: 0; transition: transform .38s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.dsc-trending-page { flex: 0 0 100%; min-width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 158px)); justify-content: flex-start; gap: 10px; }
.dsc-picked__actions { display: flex; align-items: center; gap: 14px; }
.dsc-picked-slider { overflow: hidden; }
.dsc-picked-page { flex: 0 0 100%; min-width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 158px)); justify-content: flex-start; gap: 10px; }

/* ─── Genre Spotlight grid ────────────────────────────────────── */
.dsc-genre-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 14px 16px 16px;
}
.dsc-genre-section__actions { display: flex; align-items: center; gap: 14px; }
.dsc-genre-next { border: 0; background: transparent; color: #7c3aed; font: inherit; font-size: 12px; font-weight: 700; padding: 4px 0; cursor: pointer; transition: color .15s, opacity .15s; }
.dsc-genre-next:hover:not(:disabled) { color: #5b21b6; }
.dsc-genre-next:disabled { color: var(--color-text-muted); cursor: default; opacity: .65; }
.dsc-genre-slider { overflow: hidden; }
.dsc-genre-grid--paged { display: flex; gap: 0; padding: 0; transition: transform .38s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.dsc-genre-page { flex: 0 0 100%; min-width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 14px 16px 16px; align-content: start; }

/* Genre section card wrapper */
.dsc-genre-section {
    background: var(--color-surface, #fff);
    border-radius: 4px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    gap: 0;
}
.dsc-genre-section .dsc-section-hd {
    padding: 8px 18px;
    background: linear-gradient(90deg, rgba(124,58,237,.07) 0%, rgba(37,99,235,.04) 60%, transparent 100%);
    border-left: 3px solid;
    border-image: linear-gradient(180deg, #7c3aed, #2563eb) 1;
    border-top: none; border-right: none; border-bottom: none;
    border-radius: 0;
}
.dsc-genre-section .dsc-section-title {
    font-size: 16px;
    font-weight: 800;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 55%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.dsc-genre-section .dsc-see-all { color: #7c3aed; }
.dsc-genre-section .dsc-see-all:hover { color: #5b21b6; }

.dsc-genre-tile {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 14px;
    aspect-ratio: 3 / 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.32s cubic-bezier(0.25,0.46,0.45,0.94),
                box-shadow  0.32s ease;
    outline: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
/* Scrim for text readability */
.dsc-genre-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.52) 0%, transparent 55%);
    border-radius: inherit;
    z-index: 0;
}
/* Hover darken overlay */
.dsc-genre-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    border-radius: inherit;
    transition: background 0.28s ease;
}
.dsc-genre-tile:hover,
.dsc-genre-tile:focus-visible {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 14px 36px rgba(0,0,0,.3);
}
.dsc-genre-tile:hover::after,
.dsc-genre-tile:focus-visible::after { background: rgba(0,0,0,0.12); }

.dsc-genre-tile__icon {
    position: relative;
    z-index: 1;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.9);
    flex-shrink: 0;
}
.dsc-genre-tile__bottom {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dsc-genre-tile__name {
    position: relative;
    z-index: 1;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 5px rgba(0,0,0,0.45);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dsc-genre-tile__desc {
    position: relative;
    z-index: 1;
    font-size: 10px;
    color: rgba(255,255,255,.7);
    text-shadow: 0 1px 4px rgba(0,0,0,.40);
    margin-top: 1px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .dsc-genre-grid { grid-template-columns: repeat(4, 1fr); }
    .dsc-genre-page { grid-template-columns: repeat(4, 1fr); }
    .dsc-new-releases-page { grid-template-columns: repeat(4, 1fr); }
    .dsc-trending-page { grid-template-columns: repeat(4, minmax(0, 158px)); }
    .dsc-picked-page { grid-template-columns: repeat(4, minmax(0, 158px)); }
}
@media (max-width: 950px) {
    .dsc-two-col    { grid-template-columns: 1fr; }
    .dsc-genre-grid { grid-template-columns: repeat(3, 1fr); }
    .dsc-genre-page { grid-template-columns: repeat(3, 1fr); }
    .dsc-new-releases-page { grid-template-columns: repeat(3, 1fr); }
    .dsc-trending-page { grid-template-columns: repeat(3, minmax(0, 158px)); }
    .dsc-picked-page { grid-template-columns: repeat(3, minmax(0, 158px)); }
    .dsc-hero       { height: 210px; }
    .dsc-hero__title { font-size: 22px; max-width: 100%; }
    .dsc-hero__art-wrap { width: 170px; }
    .dsc-hero__art  { width: 140px; height: 140px; }
}
@media (max-width: 640px) {
    .dsc-hero__art-wrap { display: none; }
    .dsc-genre-grid { grid-template-columns: repeat(2, 1fr); }
    .dsc-genre-page { grid-template-columns: repeat(2, 1fr); }
    .dsc-new-releases-page { grid-template-columns: repeat(2, 1fr); }
    .dsc-trending-page { grid-template-columns: repeat(2, minmax(0, 158px)); }
    .dsc-picked-page { grid-template-columns: repeat(2, minmax(0, 158px)); }
    .dsc-grid       { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Section icon ────────────────────────────────────────────── */
.dsc-section-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand);
    flex-shrink: 0;
}
.dsc-section-icon svg { width: 20px; height: 20px; }

/* ─── See-all link (with trailing SVG chevron) ────────────────── */
.dsc-see-all {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.dsc-see-all svg { width: 14px; height: 14px; }

/* ─── Hero additions ──────────────────────────────────────────── */
.dsc-hero__artist {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.72);
    margin-top: 2px;
}

/* Decorative wave bars */
.dsc-hero__waves {
    position: absolute;
    right: 240px;
    bottom: 0;
    top: 0;
    width: 60px;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding-bottom: 20px;
    opacity: 0.09;
    pointer-events: none;
}
.dsc-hero__waves span {
    flex: 1;
    background: #fff;
    border-radius: 3px 3px 0 0;
    animation: dsc-wave 1.6s ease-in-out infinite;
}
.dsc-hero__waves span:nth-child(1) { height: 45%; animation-delay: 0s;    }
.dsc-hero__waves span:nth-child(2) { height: 75%; animation-delay: 0.2s;  }
.dsc-hero__waves span:nth-child(3) { height: 55%; animation-delay: 0.35s; }
.dsc-hero__waves span:nth-child(4) { height: 85%; animation-delay: 0.1s;  }
.dsc-hero__waves span:nth-child(5) { height: 40%; animation-delay: 0.45s; }
@keyframes dsc-wave {
    0%, 100% { transform: scaleY(1);    }
    50%       { transform: scaleY(0.4); }
}

/* Vinyl ring decoration */
.dsc-hero__vinyl-ring {
    position: absolute;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    border: 18px solid rgba(255,255,255,0.06);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none;
}

/* Add-to-library button (flex with icon) */
.dsc-hero__add-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* ─── Mood pill SVG icon (replaces emoji) ─────────────────────── */
.dsc-mood-pill__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.dsc-mood-pill--active .dsc-mood-pill__icon,
.dsc-mood-pill.active  .dsc-mood-pill__icon { fill: #fff; }

/* ─── Scroll wrapper + arrow buttons ─────────────────────────── */
.dsc-scroll-wrap {
    position: relative;
}
.dsc-arr {
    position: absolute;
    top: calc(50% - 22px);   /* 22 = half card-art, center on the art */
    transform: translateY(0);
    z-index: 4;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text);
    transition: background var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
}
.dsc-arr:hover {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: #fff;
}
.dsc-arr svg { width: 16px; height: 16px; }
.dsc-arr--prev { left: -16px; }
.dsc-arr--next { right: -16px; }
.dsc-arr[hidden] { display: none; }

/* ─── Card overlay (renamed from __play-overlay) with EQ state ── */
.dsc-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.40);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    border-radius: inherit;
    transition: opacity var(--transition-base);
}
.dsc-card:hover  .dsc-card__overlay,
.dsc-card:focus-visible .dsc-card__overlay { opacity: 1; }

/* EQ bars (hidden until dsc-card--playing) */
.dsc-card__eq {
    display: none;
    align-items: flex-end;
    gap: 2.5px;
    height: 22px;
}
.dsc-card__eq span {
    width: 3.5px;
    background: #fff;
    border-radius: 2px;
    transform-origin: bottom;
    animation: dsc-eq-bar 0.8s ease-in-out infinite;
}
.dsc-card__eq span:nth-child(1) { height: 8px;  animation-duration: 0.85s;                   }
.dsc-card__eq span:nth-child(2) { height: 15px; animation-duration: 0.65s; animation-delay: .10s; }
.dsc-card__eq span:nth-child(3) { height: 11px; animation-duration: 0.95s; animation-delay: .20s; }
.dsc-card__eq span:nth-child(4) { height: 6px;  animation-duration: 0.75s; animation-delay: .05s; }

@keyframes dsc-eq-bar {
    0%, 100% { transform: scaleY(0.35); }
    50%       { transform: scaleY(1.1);  }
}

/* ── Active / playing card states ─── */
.dsc-card--active {
    border-color: var(--color-brand) !important;
}
.dsc-card--playing .dsc-card__overlay   { opacity: 1; }
.dsc-card--playing .dsc-card__play-icon { display: none; }
.dsc-card--playing .dsc-card__eq        { display: flex; }

/* ─── Card footer (plays count row) ──────────────────────────── */
.dsc-card__footer {
    display: flex;
    align-items: center;
    margin-top: 2px;
}
.dsc-card__plays {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--color-text-muted);
}
.dsc-card__plays svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    opacity: 0.65;
}



/* ═══════════════════════════════════════════════════════════════════════════
   RADIO PAGE  — .rdp-*
═══════════════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ────────────────────────────────────────────────────────── */
.rdp {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-bottom: 40px;
}

/* ── Live dot (pulsing red) ──────────────────────────────────────────────── */
.rdp-live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e53e3e;
    margin-right: 5px;
    animation: rdp-dot-pulse 1.4s ease-in-out infinite;
    vertical-align: middle;
}
@keyframes rdp-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1);   }
    50%       { opacity: 0.4; transform: scale(0.7); }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.rdp-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #3b0764 0%, #1e3a8a 55%, #0c4a6e 100%);
    border-radius: 4px;
    margin: 0 0 20px;
    padding: 0;
    min-height: 200px;
    display: flex;
    align-items: stretch;
    box-shadow: 0 8px 40px rgba(59,7,100,.28);
}
.rdp-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,.35) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Ambient orbs */
.rdp-hero__ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.rdp-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: .35;
}
.rdp-hero__orb--1 {
    width: 260px; height: 260px;
    background: radial-gradient(circle, #7c3aed, transparent);
    top: -60px; left: -40px;
    animation: rdp-orb 10s ease-in-out infinite alternate;
}
.rdp-hero__orb--2 {
    width: 200px; height: 200px;
    background: radial-gradient(circle, #2563eb, transparent);
    bottom: -40px; right: 30%;
    animation: rdp-orb 14s ease-in-out infinite alternate-reverse;
}
.rdp-hero__orb--3 {
    width: 160px; height: 160px;
    background: radial-gradient(circle, #0ea5e9, transparent);
    top: 10px; right: 80px;
    animation: rdp-orb 9s ease-in-out infinite alternate;
    animation-delay: 2s;
}
@keyframes rdp-orb {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(20px, 10px) scale(1.1); }
}

/* Hero panels */
.rdp-hero__panel {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 28px 32px;
    gap: 24px;
}
.rdp-hero__panel[hidden] { display: none !important; }
.rdp-hero__panel--idle {
    justify-content: space-between;
}
.rdp-hero__idle-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rdp-hero__idle-vis {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 60px;
    flex-shrink: 0;
    opacity: .55;
}
.rdp-hero__idle-vis span {
    display: block;
    width: 4px;
    background: rgba(255,255,255,.8);
    border-radius: 2px;
    animation: rdp-idle-bar 1.2s ease-in-out infinite alternate;
    transform-origin: bottom;
}
.rdp-hero__idle-vis span:nth-child(odd)  { animation-duration: 1.0s; }
.rdp-hero__idle-vis span:nth-child(3n)   { animation-duration: 1.5s; animation-delay: .2s; }
.rdp-hero__idle-vis span:nth-child(5n)   { animation-duration: 0.8s; animation-delay: .1s; }
.rdp-hero__idle-vis span:nth-child(7n)   { animation-duration: 1.3s; animation-delay: .3s; }
@keyframes rdp-idle-bar {
    0%   { height: 6px; }
    100% { height: 44px; }
}
.rdp-hero__panel--playing {
    gap: 20px;
}
.rdp-hero__art-frame {
    width: 100px; height: 100px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.rdp-hero__art {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 14px;
}
.rdp-hero__art-fallback {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.1);
    border-radius: 14px;
    color: rgba(255,255,255,.6);
}
.rdp-hero__art-fallback svg { width: 40px; height: 40px; }
.rdp-hero__now-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rdp-hero__on-air-lbl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    color: rgba(255,255,255,.8);
    text-transform: uppercase;
}
.rdp-hero__now-name {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -.02em;
    text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.rdp-hero__now-genre {
    font-size: 13px;
    color: rgba(255,255,255,.55);
    margin: 0;
}
.rdp-hero__eq {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 20px;
    margin-top: 4px;
}
.rdp-hero__eq b {
    display: block;
    width: 3px;
    background: rgba(255,255,255,.7);
    border-radius: 2px;
    animation: rdp-eq 0.75s ease-in-out infinite;
    transform-origin: bottom;
}
.rdp-hero__eq b:nth-child(1) { height: 8px;  animation-duration: 0.75s; }
.rdp-hero__eq b:nth-child(2) { height: 16px; animation-duration: 0.55s; animation-delay: .10s; }
.rdp-hero__eq b:nth-child(3) { height: 10px; animation-duration: 0.90s; animation-delay: .20s; }
.rdp-hero__eq b:nth-child(4) { height: 14px; animation-duration: 0.65s; animation-delay: .08s; }
.rdp-hero__eq b:nth-child(5) { height: 7px;  animation-duration: 0.80s; animation-delay: .15s; }
.rdp-hero__ctrls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.rdp-hero__ctrl-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
    flex-shrink: 0;
}
.rdp-hero__ctrl-btn--playpause {
    background: rgba(255,255,255,.95);
    color: #3b0764;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.rdp-hero__ctrl-btn--playpause:hover { transform: scale(1.08); }
.rdp-hero__ctrl-btn--playpause .rdp-icon-pause { display: block; }
.rdp-hero__ctrl-btn--playpause .rdp-icon-play  { display: none; }
.rdp-hero__ctrl-btn--playpause.rdp-paused .rdp-icon-pause { display: none; }
.rdp-hero__ctrl-btn--playpause.rdp-paused .rdp-icon-play  { display: block; }
.rdp-hero__ctrl-btn--stop {
    background: rgba(229,62,62,.2);
    color: #fca5a5;
    border: 1px solid rgba(229,62,62,.3);
}
.rdp-hero__ctrl-btn--stop:hover { background: rgba(229,62,62,.35); }
.rdp-hero__ctrl-btn svg { width: 18px; height: 18px; }
.rdp-hero__vol {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.6);
}
.rdp-hero__vol svg { width: 16px; height: 16px; flex-shrink: 0; }
.rdp-hero__waves {
    position: absolute;
    inset: auto 0 0 0;
    height: 80px;
    pointer-events: none;
}
.rdp-hero__waves svg {
    width: 100%;
    height: 100%;
}
.rdp-hero__wave {
    fill-opacity: 0.09;
}
.rdp-hero__wave--1 {
    fill: #fff;
    animation: rdp-wave 8s ease-in-out infinite;
}
.rdp-hero__wave--2 {
    fill: #fff;
    animation: rdp-wave 12s ease-in-out infinite reverse;
}
@keyframes rdp-wave {
    0%, 100% { transform: translateX(0);    }
    50%       { transform: translateX(-4%); }
}
.rdp-hero__body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 32px 36px;
    width: 100%;
}
.rdp-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,.9);
    text-transform: uppercase;
    margin-bottom: 10px;
    background: rgba(255,255,255,.12);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255,255,255,.2);
    width: fit-content;
}
.rdp-hero__title {
    font-size: clamp(24px, 3.5vw, 38px);
    font-weight: 900;
    color: #fff;
    line-height: 1.05;
    margin: 0 0 6px;
    letter-spacing: -.03em;
    text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.rdp-hero__sub {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    margin: 0;
    max-width: 400px;
}
.rdp-btn-add {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: 0 4px 18px rgba(124,58,237,.4);
    white-space: nowrap;
    flex-shrink: 0;
}
.rdp-btn-add svg { width: 18px; height: 18px; flex-shrink: 0; }
.rdp-btn-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(124,58,237,.55);
}

/* ── On-air bar ─────────────────────────────────────────────────────────── */
.rdp-onair {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(90deg, #0a1628 0%, #001a36 100%);
    border: 1px solid rgba(0,102,204,0.35);
    border-radius: 6px;
    padding: 12px 16px;
    box-shadow: 0 4px 24px rgba(0,51,102,0.3);
}
.rdp-onair__art-wrap {
    position: relative;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.rdp-onair__art,
.rdp-onair__art-fallback {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-sm);
    object-fit: cover;
}
.rdp-onair__art-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 30% 30%, #2a1060 0%, #0d0d25 55%, #050510 100%);
    border: 1px solid rgba(124,58,237,0.25);
    border-radius: var(--radius-sm);
}
.rdp-onair__fallback-icon {
    width: 26px;
    height: 26px;
    color: rgba(220,220,255,0.75);
    filter: drop-shadow(0 0 6px rgba(124,58,237,0.5));
}
.rdp-onair__info {
    flex: 1;
    min-width: 0;
}
.rdp-onair__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #7ec8ff;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    margin-bottom: 2px;
}
.rdp-onair__name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.rdp-onair__genre {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    margin: 0;
}
/* EQ bars animation */
.rdp-onair__eq {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 22px;
    padding-bottom: 1px;
}
.rdp-onair__eq b {
    display: block;
    width: 3px;
    background: #7ec8ff;
    border-radius: 2px;
    transform-origin: bottom;
    animation: rdp-eq 0.75s ease-in-out infinite;
}
.rdp-onair__eq b:nth-child(1) { height: 8px;  animation-duration: 0.75s; }
.rdp-onair__eq b:nth-child(2) { height: 16px; animation-duration: 0.55s; animation-delay: .10s; }
.rdp-onair__eq b:nth-child(3) { height: 10px; animation-duration: 0.90s; animation-delay: .20s; }
.rdp-onair__eq b:nth-child(4) { height: 14px; animation-duration: 0.65s; animation-delay: .08s; }
.rdp-onair__eq b:nth-child(5) { height: 7px;  animation-duration: 0.80s; animation-delay: .15s; }
@keyframes rdp-eq {
    0%, 100% { transform: scaleY(0.3); }
    50%       { transform: scaleY(1);   }
}
.rdp-onair__controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.rdp-onair__btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.08);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast);
    flex-shrink: 0;
}
.rdp-onair__btn:hover { background: rgba(255,255,255,0.18); }
.rdp-onair__btn svg  { width: 18px; height: 18px; }
.rdp-onair__btn--playpause .rdp-icon-pause { display: block;  }
.rdp-onair__btn--playpause .rdp-icon-play  { display: none;   }
.rdp-onair__btn--playpause.rdp-onair__btn--paused .rdp-icon-pause { display: none;  }
.rdp-onair__btn--playpause.rdp-onair__btn--paused .rdp-icon-play  { display: block; }
.rdp-onair__btn--stop { background: rgba(229,62,62,0.15); color: #e53e3e; }
.rdp-onair__btn--stop:hover { background: rgba(229,62,62,0.3); }
.rdp-onair__vol {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255,255,255,0.5);
}
.rdp-onair__vol svg { width: 16px; height: 16px; flex-shrink: 0; }
.rdp-vol-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,0.2);
    outline: none;
    cursor: pointer;
}
.rdp-vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #7ec8ff;
    cursor: pointer;
}
.rdp-vol-slider::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #7ec8ff;
    cursor: pointer;
    border: none;
}

/* ── Radio Meter ─────────────────────────────────────────────────────────── */
.rdp-meter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: #0a0e1a;
    border: 1px solid rgba(126,200,255,.15);
    border-radius: 10px;
    min-width: 0;
    flex: 2;
    max-width: 320px;
    box-shadow: 0 0 14px rgba(126,200,255,.07), inset 0 1px 0 rgba(255,255,255,.04);
    align-self: center;
}
/* Tuner row */
.rdp-meter__tuner {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rdp-meter__tuner-scale { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.rdp-meter__tuner-band {
    position: relative;
    height: 12px;
    background: linear-gradient(to right, #060c1a, #0f2244, #060c1a);
    border-radius: 3px;
    border: 1px solid rgba(126,200,255,.2);
    overflow: visible;
}
/* Scale ticks */
.rdp-meter__tuner-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to right,
        rgba(126,200,255,.35) 0px, rgba(126,200,255,.35) 1px,
        transparent 1px, transparent calc(100% / 20)
    );
    border-radius: inherit;
}
/* Red needle */
.rdp-meter__tuner-needle {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 2px;
    background: #ff3333;
    border-radius: 1px;
    left: calc(var(--needle-pos, .5) * 100%);
    transform: translateX(-50%);
    box-shadow: 0 0 7px rgba(255,50,50,.7);
    transition: left .7s cubic-bezier(.34,1.56,.64,1);
    z-index: 1;
}
.rdp-meter__tuner-needle::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 5px solid #ff3333;
}
.rdp-meter__tuner-labels {
    display: flex;
    justify-content: space-between;
    font-size: 7px;
    color: rgba(126,200,255,.45);
    font-family: 'Courier New', monospace;
    padding: 0 1px;
}
/* Digital freq readout */
.rdp-meter__freq-readout {
    flex-shrink: 0;
    background: #000;
    border: 1px solid rgba(126,200,255,.2);
    border-radius: 5px;
    padding: 3px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    box-shadow: inset 0 0 8px rgba(126,200,255,.1);
}
.rdp-meter__freq-num {
    font-size: 13px;
    font-weight: 700;
    color: #7ec8ff;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
    line-height: 1.2;
    text-shadow: 0 0 8px rgba(126,200,255,.8);
}
.rdp-meter__freq-unit {
    font-size: 7px;
    color: rgba(126,200,255,.45);
    font-family: monospace;
    letter-spacing: 2px;
}
/* Spectrum bars */
.rdp-meter__spectrum {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 38px;
    border-bottom: 1px solid rgba(126,200,255,.12);
    padding-bottom: 2px;
}
.rdp-meter__spectrum span {
    flex: 1;
    border-radius: 1px 1px 0 0;
    transform-origin: bottom;
    background: linear-gradient(to top, #22c55e 0%, #86efac 45%, #f59e0b 72%, #ef4444 100%);
    height: 2px;
    animation: rdp-spec var(--spec-dur,.8s) ease-in-out infinite alternate;
    animation-delay: var(--spec-delay,0s);
    animation-play-state: paused;
}
.rdp-meter--playing .rdp-meter__spectrum span { animation-play-state: running; }
@keyframes rdp-spec {
    0%   { height: var(--spec-min,3px); }
    100% { height: var(--spec-max,28px); }
}
.rdp-meter__spectrum span:nth-child(1)  { --spec-dur:.62s; --spec-delay:.00s; --spec-min:3px;  --spec-max:18px; }
.rdp-meter__spectrum span:nth-child(2)  { --spec-dur:.48s; --spec-delay:.07s; --spec-min:5px;  --spec-max:30px; }
.rdp-meter__spectrum span:nth-child(3)  { --spec-dur:.71s; --spec-delay:.13s; --spec-min:7px;  --spec-max:24px; }
.rdp-meter__spectrum span:nth-child(4)  { --spec-dur:.55s; --spec-delay:.04s; --spec-min:2px;  --spec-max:35px; }
.rdp-meter__spectrum span:nth-child(5)  { --spec-dur:.83s; --spec-delay:.17s; --spec-min:4px;  --spec-max:22px; }
.rdp-meter__spectrum span:nth-child(6)  { --spec-dur:.44s; --spec-delay:.09s; --spec-min:6px;  --spec-max:38px; }
.rdp-meter__spectrum span:nth-child(7)  { --spec-dur:.67s; --spec-delay:.21s; --spec-min:3px;  --spec-max:27px; }
.rdp-meter__spectrum span:nth-child(8)  { --spec-dur:.58s; --spec-delay:.02s; --spec-min:8px;  --spec-max:32px; }
.rdp-meter__spectrum span:nth-child(9)  { --spec-dur:.76s; --spec-delay:.15s; --spec-min:4px;  --spec-max:20px; }
.rdp-meter__spectrum span:nth-child(10) { --spec-dur:.51s; --spec-delay:.11s; --spec-min:5px;  --spec-max:36px; }
.rdp-meter__spectrum span:nth-child(11) { --spec-dur:.69s; --spec-delay:.06s; --spec-min:3px;  --spec-max:23px; }
.rdp-meter__spectrum span:nth-child(12) { --spec-dur:.42s; --spec-delay:.19s; --spec-min:6px;  --spec-max:29px; }
.rdp-meter__spectrum span:nth-child(13) { --spec-dur:.78s; --spec-delay:.03s; --spec-min:4px;  --spec-max:34px; }
.rdp-meter__spectrum span:nth-child(14) { --spec-dur:.60s; --spec-delay:.14s; --spec-min:7px;  --spec-max:21px; }
.rdp-meter__spectrum span:nth-child(15) { --spec-dur:.53s; --spec-delay:.08s; --spec-min:2px;  --spec-max:26px; }
.rdp-meter__spectrum span:nth-child(16) { --spec-dur:.85s; --spec-delay:.22s; --spec-min:5px;  --spec-max:33px; }
.rdp-meter__spectrum span:nth-child(17) { --spec-dur:.46s; --spec-delay:.12s; --spec-min:3px;  --spec-max:25px; }
.rdp-meter__spectrum span:nth-child(18) { --spec-dur:.73s; --spec-delay:.16s; --spec-min:6px;  --spec-max:31px; }
/* Signal strength */
.rdp-meter__signal {
    display: flex;
    align-items: center;
    gap: 6px;
}
.rdp-meter__signal-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
}
.rdp-meter__signal-bars span {
    border-radius: 1px;
    background: rgba(126,200,255,.12);
    transition: background .3s;
}
.rdp-meter__signal-bars span:nth-child(1) { width: 4px; height: 6px;  }
.rdp-meter__signal-bars span:nth-child(2) { width: 4px; height: 10px; }
.rdp-meter__signal-bars span:nth-child(3) { width: 4px; height: 14px; }
.rdp-meter__signal-bars span:nth-child(4) { width: 4px; height: 18px; }
.rdp-meter--playing .rdp-meter__signal-bars span:nth-child(1) { background: #22c55e; }
.rdp-meter--playing .rdp-meter__signal-bars span:nth-child(2) { background: #22c55e; }
.rdp-meter--playing .rdp-meter__signal-bars span:nth-child(3) { background: #f59e0b; animation: rdp-sig-blink 2.2s step-end infinite; }
.rdp-meter--playing .rdp-meter__signal-bars span:nth-child(4) { background: #ef4444; animation: rdp-sig-blink 1.4s step-end infinite; animation-delay:.4s; }
@keyframes rdp-sig-blink {
    0%,100% { opacity:1; }
    50%      { opacity:.35; }
}
.rdp-meter__signal-label {
    font-size: 7px;
    color: rgba(126,200,255,.35);
    font-family: monospace;
    letter-spacing: 1px;
    margin-left: auto;
}

/* ── Station search box ──────────────────────────────────────────────────── */
.rdp-search-wrap {
    margin-bottom: 4px;
}
.rdp-search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border, #dde2ef);
    border-radius: var(--radius-md);
    transition: border-color .15s, box-shadow .15s;
}
.rdp-search-box:focus-within {
    border-color: #2a5298;
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.12);
}
.rdp-search-icon {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
    flex-shrink: 0;
}
.rdp-search-input {
    width: 100%;
    padding: 9px 36px 9px 38px;
    border: none;
    background: transparent;
    color: var(--color-text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
}
.rdp-search-input::placeholder { color: var(--color-text-muted); }
.rdp-search-input::-webkit-search-cancel-button,
.rdp-search-input::-webkit-search-decoration { -webkit-appearance: none; }
.rdp-search-clear {
    position: absolute;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: var(--color-text-muted);
    color: var(--color-bg, #fff);
    cursor: pointer;
    padding: 0;
    opacity: 0.65;
    transition: opacity .15s;
}
.rdp-search-clear:hover { opacity: 1; }

/* ── Genre filter pills ──────────────────────────────────────────────────── */
.rdp-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.rdp-pill {
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    border: 1.5px solid rgba(124,58,237,0.18);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: background 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}
.rdp-pill:hover {
    border-color: #7c3aed;
    color: #7c3aed;
    background: rgba(124,58,237,0.06);
    box-shadow: 0 2px 10px rgba(124,58,237,0.12);
}
.rdp-pill--active {
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(124,58,237,0.3);
}

/* ── Filter bar (card style) ─────────────────────────────────────────── */
.rdp-filter-bar {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    margin: 0 0 16px;
    padding: 0 16px;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.rdp-filter-bar__row {
    display: flex;
    align-items: center;
    min-height: 36px;
}
.rdp-filter-bar .rdp-filters {
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 0;
}
.rdp-filter-bar .rdp-filters::-webkit-scrollbar { display: none; }
.rdp-filter-bar__end {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding-left: 14px;
    border-left: 1px solid var(--color-border, #e4e8f0);
    margin-left: 12px;
}
.rdp-filter-bar__count {
    font-size: 11px;
    font-weight: 700;
    color: #7c3aed;
    background: #f5f3ff;
    border: 1px solid #ede9fe;
    border-radius: 99px;
    padding: 2px 10px;
    white-space: nowrap;
}

/* ── Section ──────────────────────────────────────────────────────────────── */
.rdp-section { display: flex; flex-direction: column; gap: 20px; }
.rdp-section--hidden { display: none; }
.rdp-section__hd {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    background: linear-gradient(90deg, rgba(124,58,237,0.07) 0%, rgba(37,99,235,0.04) 60%, transparent 100%);
    border-radius: var(--radius-md);
    border-left: 3px solid;
    border-image: linear-gradient(180deg, #7c3aed, #2563eb, #0ea5e9) 1;
    border-top: none;
    border-right: none;
    border-bottom: none;
    position: relative;
    overflow: hidden;
}
.rdp-section__hd::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(124,58,237,0.04) 0%, rgba(14,165,233,0.03) 100%);
    pointer-events: none;
}
.rdp-section__title {
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 55%, #0ea5e9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.01em;
    margin: 0;
}
.rdp-section__count {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.04em;
}

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

/* ── Station card ─────────────────────────────────────────────────────────── */
.rdp-card {
    border-radius: var(--radius-md);
    background: var(--color-surface);
    border: 1px solid rgba(124,58,237,0.12);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease,
                border-color 0.25s ease;
    outline: none;
    display: flex;
    flex-direction: column;
    position: relative;
}
.rdp-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, rgba(124,58,237,0.05) 0%, transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.rdp-card:hover,
.rdp-card:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(37,99,235,0.18), 0 4px 14px rgba(124,58,237,0.12);
    border-color: rgba(124,58,237,0.45);
}
.rdp-card:hover::after,
.rdp-card:focus-visible::after {
    opacity: 1;
}
.rdp-card--playing {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.22), 0 10px 36px rgba(37,99,235,0.24) !important;
}
.rdp-card--playing::after {
    opacity: 1 !important;
}

/* Art wrapper */
.rdp-card__art-wrap {
    position: relative;
    padding-top: 80%; /* slightly shorter than square */
    overflow: hidden;
    background: #e8f0fc;
}
.rdp-card__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.rdp-card:hover .rdp-card__art { transform: scale(1.04); }

/* Fallback — music icon + initial letter */
.rdp-card__art-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #e8f0fc;
}
.rdp-card__fallback-icon {
    width: 34px;
    height: 34px;
    color: rgba(0,51,102,.25);
    flex-shrink: 0;
}
/* Remove dark decorative overlays */
.rdp-card__art-fallback::before { display: none; }
.rdp-card__art-fallback::after  { display: none; }

/* Pulse dot — top-right corner (removed, kept in DOM for possible future use) */
.rdp-card__pulse-dot { display: none; }
@keyframes rdp-pulse-ring {
    0%   { box-shadow: 0 0 0 0   rgba(16,185,129,0.7); }
    70%  { box-shadow: 0 0 0 7px rgba(16,185,129,0);   }
    100% { box-shadow: 0 0 0 0   rgba(16,185,129,0);   }
}

.rdp-card__new-tag {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #f59e0b;
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.3);
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
    pointer-events: none;
}

/* ── View toggle buttons ─────────────────────────────────────────────────── */
.rdp-view-toggle {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(124,58,237,0.07);
    border: 1px solid rgba(124,58,237,0.22);
    border-radius: var(--radius-sm);
    padding: 2px;
}
.rdp-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    border: none;
    border-radius: calc(var(--radius-sm) - 2px);
    background: transparent;
    color: #7c3aed;
    cursor: pointer;
    transition: background .18s, color .18s;
}
.rdp-view-btn:hover {
    background: rgba(124,58,237,0.12);
    color: #6d28d9;
}
.rdp-view-btn--active {
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 60%, #0ea5e9 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(124,58,237,0.35);
}

/* ── List view ────────────────────────────────────────────────────────────── */
.rdp-grid--list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rdp-grid--list .rdp-card {
    flex-direction: row;
    align-items: stretch;
    height: 70px;
    border-radius: var(--radius-sm);
    transform: none !important;
}
.rdp-grid--list .rdp-card:hover,
.rdp-grid--list .rdp-card:focus-visible {
    transform: none !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.09);
}
.rdp-grid--list .rdp-card--playing {
    border-left: 3px solid #003366 !important;
}
.rdp-grid--list .rdp-card__art-wrap {
    width: 70px;
    min-width: 70px;
    height: 70px;
    padding-top: 0;
    border-radius: 0;
    flex-shrink: 0;
}
.rdp-grid--list .rdp-card__body {
    flex: 1;
    padding: 0 14px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 3px;
}
.rdp-grid--list .rdp-card__name-row { width: 100%; min-width: 0; }
.rdp-grid--list .rdp-card__name {
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.rdp-grid--list .rdp-card__genre {
    display: inline-flex;
    align-items: center;
    margin-top: 0;
    font-size: 8px;
    line-height: 1;
    padding: 1px 6px;
    letter-spacing: .08em;
    flex-shrink: 0;
}
.rdp-grid--list .rdp-card__desc  { display: none; }
.rdp-grid--list .rdp-card__footer {
    position: absolute;
    right: 14px;
    bottom: 8px;
    margin-left: 0;
    border-top: none;
    padding-top: 0;
    flex-shrink: 0;
    gap: 8px;
}
.rdp-grid--list .rdp-card__meta  { font-size: 11px; white-space: nowrap; }
.rdp-grid--list .rdp-card__onair { display: none; }
.rdp-grid--list .rdp-card__new-tag { flex-shrink: 0; }
/* Play overlay button */
.rdp-card__play-btn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(124,58,237,0.55) 0%, rgba(37,99,235,0.55) 100%);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.22s ease;
}
.rdp-card__play-btn svg {
    width: 46px;
    height: 46px;
    fill: #fff;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,0.6));
    transform: scale(1);
    transition: transform 0.18s ease;
}
.rdp-card:hover .rdp-card__play-btn svg { transform: scale(1.08); }
.rdp-card:hover  .rdp-card__play-btn,
.rdp-card:focus-visible .rdp-card__play-btn,
.rdp-card--playing .rdp-card__play-btn { opacity: 1; }
/* Playing state */
.rdp-card--playing .rdp-card__play-btn {
    background: linear-gradient(135deg, rgba(124,58,237,0.65) 0%, rgba(37,99,235,0.65) 100%);
}
/* Delete button (my stations only) */
.rdp-card__delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.5);
    color: rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition-fast), background var(--transition-fast),
                color var(--transition-fast);
    z-index: 2;
}
.rdp-card__delete-btn svg { width: 14px; height: 14px; }
.rdp-card--mine:hover .rdp-card__delete-btn,
.rdp-card--mine:focus-visible .rdp-card__delete-btn { opacity: 1; }
.rdp-card__delete-btn:hover { background: #e53e3e; color: #fff; }

/* Card body */
.rdp-card__body {
    padding: 13px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
/* Name row: station name + NEW tag */
.rdp-card__name-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.rdp-card__name {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    flex: 1;
    min-width: 0;
    letter-spacing: -0.02em;
}
.rdp-card__genre {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #7c3aed;
    background: linear-gradient(135deg, rgba(124,58,237,0.12) 0%, rgba(37,99,235,0.1) 100%);
    border: 1px solid rgba(124,58,237,0.22);
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    width: fit-content;
}
.rdp-card__desc {
    font-size: 11px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* Footer row: meta left, right-side actions */
.rdp-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px solid rgba(124,58,237,0.08);
}
.rdp-card__footer-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Like button ──────────────────────────────────────────────────────────── */
.rdp-card__like-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    background: transparent;
    border: 1px solid rgba(124,58,237,0.18);
    border-radius: 99px;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    transition: background .18s, border-color .18s, color .18s, transform .15s;
}
.rdp-card__like-btn svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform .2s;
}
.rdp-card__like-btn:hover {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.35);
    color: #ef4444;
    transform: scale(1.06);
}
.rdp-card__like-btn:hover svg { transform: scale(1.2); }
.rdp-card__like-btn.is-liked {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.4);
    color: #ef4444;
}
.rdp-card__like-btn.is-liked:hover { background: rgba(239,68,68,0.18); }
/* Show only the correct heart variant */
.rdp-like-filled { display: none; }
.rdp-card__like-btn.is-liked .rdp-like-outline { display: none; }
.rdp-card__like-btn.is-liked .rdp-like-filled  { display: block; }
.rdp-like-count {
    min-width: 0;
    /* hidden when empty */
}
.rdp-card__meta {
    font-size: 10px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: nowrap;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* ON AIR badge in footer */
.rdp-card__onair {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #10b981;
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.25);
    padding: 2px 7px;
    border-radius: 99px;
    white-space: nowrap;
    flex-shrink: 0;
}
.rdp-card__onair-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #10b981;
    animation: rdp-pulse-ring 2.2s ease-out infinite;
    flex-shrink: 0;
}
.rdp-card__owner {
    font-size: 10px;
    color: var(--color-text-muted);
    opacity: .75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.rdp-modal[hidden] { display: none !important; }
.rdp-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.rdp-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
}
.rdp-modal__panel {
    position: relative;
    z-index: 1;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0,0,0,0.25);
    width: 100%;
    max-width: 520px;
    overflow: hidden;
}
.rdp-modal__hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--color-border, #dde2ef);
}
.rdp-modal__title {
    Font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.rdp-modal__title svg { width: 20px; height: 20px; color: var(--color-brand); fill: var(--color-brand); }
.rdp-modal__close {
    width: 30px; height: 30px;
    border-radius: 50%; border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
}
.rdp-modal__close:hover { background: var(--color-surface-alt); color: var(--color-text); }
.rdp-modal__close svg   { width: 18px; height: 18px; }
.rdp-modal__form {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.rdp-form-row--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.rdp-field { display: flex; flex-direction: column; gap: 5px; }
.rdp-field__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
}
.rdp-field__label span { color: var(--color-brand); }
.rdp-field__input {
    height: 38px;
    padding: 0 12px;
    border: 1.5px solid var(--color-border, #dde2ef);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 13px;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%;
    box-sizing: border-box;
}
.rdp-field__input:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(0,123,255,0.12);
}
.rdp-field__input--select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 32px;
    cursor: pointer;
}
.rdp-field__select-wrap { position: relative; }
.rdp-field__select-caret {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
}
.rdp-field__hint {
    font-size: 11px;
    color: var(--color-text-muted);
}
.rdp-modal__error {
    font-size: 13px;
    color: #e53e3e;
    background: rgba(229,62,62,0.08);
    border: 1px solid rgba(229,62,62,0.25);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    margin: 0;
}
.rdp-modal__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}
.rdp-modal__btn {
    height: 38px;
    padding: 0 20px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--transition-fast), border-color var(--transition-fast),
                color var(--transition-fast);
}
.rdp-modal__btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.rdp-modal__btn--cancel {
    background: transparent;
    border-color: var(--color-border, #dde2ef);
    color: var(--color-text-muted);
}
.rdp-modal__btn--cancel:hover { border-color: var(--color-text-muted); color: var(--color-text); }
.rdp-modal__btn--submit {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: #fff;
}
/* -- Stations section card ------------------------------------------ */
.rdp-stations-section {
    background: var(--color-surface, #fff);
    border-radius: 4px;
    border: 1px solid rgba(124,58,237,0.14);
    overflow: hidden;
    margin-bottom: 28px;
    box-shadow: 0 4px 32px rgba(37,99,235,0.07), 0 1px 4px rgba(124,58,237,0.06);
}
.rdp-stations-section .rdp-section__hd {
    padding: 14px 20px;
    background:
        linear-gradient(135deg,
            rgba(124,58,237,0.11) 0%,
            rgba(37,99,235,0.07) 45%,
            rgba(14,165,233,0.04) 75%,
            transparent 100%);
    border-bottom: 1px solid rgba(124,58,237,0.1);
    border-left: none;
    border-top: none;
    border-right: none;
    border-radius: 0;
    position: relative;
    overflow: hidden;
}
/* Gradient accent bar on left */
.rdp-stations-section .rdp-section__hd::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #7c3aed 0%, #2563eb 55%, #0ea5e9 100%);
    border-radius: 0 2px 2px 0;
}
/* Ambient orb top-right */
.rdp-stations-section .rdp-section__hd::after {
    content: '';
    position: absolute;
    right: -40px; top: -50px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(124,58,237,0.1) 0%, transparent 68%);
    pointer-events: none;
}
.rdp-stations-section .rdp-section__title {
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 55%, #0ea5e9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}
.rdp-stations-section .rdp-section__count {
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
    padding: 3px 10px;
    border-radius: 6px;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 12px rgba(124,58,237,0.35);
    position: relative;
    z-index: 1;
}
.rdp-stations-section .rdp-grid { padding: 20px 20px 10px; }

/* -- Load More ------------------------------------------------------- */
.rdp-load-more-wrap {
    display: flex;
    justify-content: center;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--color-border);
}
.rdp-load-more-wrap--header {
    margin-left: 0;
    justify-content: flex-start;
    padding: 0;
    border-top: 0;
    position: relative;
    z-index: 1;
}
.rdp-load-more-wrap--hidden { display: none !important; }
.rdp-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 38px;
    border: 1.5px solid rgba(124,58,237,.3);
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, rgba(124,58,237,0.05) 0%, rgba(37,99,235,0.04) 100%);
    color: #7c3aed;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, border-color .2s, box-shadow .2s, transform .15s;
    letter-spacing: .02em;
}
.rdp-load-more-btn svg { flex-shrink: 0; }
.rdp-load-more-btn:hover {
    background: rgba(124,58,237,.07);
    border-color: #7c3aed;
    box-shadow: 0 2px 16px rgba(124,58,237,.18);
    transform: translateY(-1px);
}
.rdp-load-more-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.rdp-load-more-wrap--header .rdp-load-more-btn {
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--color-brand, #2563eb);
    font-size: 12px;
}
.rdp-load-more-wrap--header .rdp-load-more-btn:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #1d4ed8;
    transform: none;
}

.rdp-modal__btn--submit:hover   { background: #0056cc; border-color: #0056cc; }
.rdp-modal__btn--submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .rdp-hero__panel--idle    { flex-direction: column; align-items: flex-start; gap: 16px; }
    .rdp-hero__idle-vis       { height: 44px; }
    .rdp-hero__panel--playing { flex-wrap: wrap; gap: 12px; }
    .rdp-hero__vol            { display: none; }
    .rdp-hero__title          { font-size: 22px; }
    .rdp-form-row--2          { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
    .rdp-grid          { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .rdp-modal__panel  { border-radius: var(--radius-md); }
    .rdp-hero__panel   { padding: 20px; }
    .rdp-hero__idle-vis { display: none; }
    .rdp-hero__now-name { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════
   ADD A STATION — inline manage panel
══════════════════════════════════════════════════════ */
.rdp-manage {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e4e8f0);
    border-radius: var(--radius-md, 10px);
    padding: 20px 24px;
}
.rdp-manage .rdp-section__hd {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}
.rdp-manage .rdp-section__hd svg {
    color: var(--color-brand, #007bff);
    flex-shrink: 0;
}
.rdp-manage__toggle {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 13px;
    padding: 8px 16px;
    height: 34px;
}
.rdp-manage__panel {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border, #e4e8f0);
}
.rdp-manage__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.rdp-manage__actions {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    padding-top: 4px;
}
@media (max-width: 540px) {
    .rdp-manage { padding: 16px; }
    .rdp-manage__actions { flex-direction: column; }
    .rdp-manage__actions .rdp-modal__btn { width: 100%; justify-content: center; }
}

/* ============================================================
   ARTIST FEATURE STYLES
   Sections: A) Hero  B) Toolbar  C) Card grid  D) List view
             E) Detail page  F) Admin panel
   ============================================================ */

/* ── A) Page Header ──────────────────────────────────────── */
.ast-ph {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 0 20px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0;
    flex-wrap: wrap;
}
.ast-ph__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(124,58,237,.30);
}
.ast-ph__text {
    flex: 1;
    min-width: 0;
}
.ast-ph__title {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 3px;
    letter-spacing: -.02em;
    line-height: 1.2;
}
.ast-ph__sub {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
    max-width: 480px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ast-ph__badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.ast-ph__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(124,58,237,.08);
    border: 1.5px solid rgba(124,58,237,.15);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
}
.ast-ph__badge strong {
    font-size: 16px;
    font-weight: 800;
    color: #7c3aed;
    line-height: 1;
}

/* ── B) Sticky Filter Bar ────────────────────────────────── */
.ast-filter-bar {
    position: sticky;
    top: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0 16px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    margin-bottom: 22px;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.ast-filter-bar__pills {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 4px 18px 4px 0;
    min-height: 36px;
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
}
.ast-filter-bar__pills::-webkit-scrollbar { display: none; }
.ast-filter-bar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding-left: 14px;
    border-left: 1px solid var(--color-border, #e4e8f0);
    margin-left: 12px;
}
.ast-results-count {
    font-size: 11px;
    font-weight: 700;
    color: #7c3aed;
    background: #f5f3ff;
    border: 1px solid #ede9fe;
    border-radius: 99px;
    padding: 2px 10px;
    white-space: nowrap;
}
.ast-sort-select {
    height: 28px;
    padding: 0 26px 0 10px;
    border: 1px solid var(--color-border);
    border-radius: 40px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    transition: border-color .15s;
}
.ast-sort-select:focus { border-color: #7c3aed; }

/* Pills inside artist filter bar — thinner than global .rdp-pill */
.ast-filter-bar__pills .rdp-pill {
    padding: 4px 14px;
    font-size: 11.5px;
    border-radius: 40px;
    border-color: transparent;
}
.ast-filter-bar__pills .rdp-pill:hover {
    border-color: transparent;
    background: rgba(124,58,237,.08);
}
.ast-filter-bar__pills .rdp-pill--active {
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(124,58,237,.25);
}

.ast-section { min-height: 0; }

/* ── C) Artist card grid ─────────────────────────────────── */
.ast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px 10px;
}
.ast-card {
    border-radius: 18px;
    background: var(--color-surface, #fff);
    overflow: hidden;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 12px 10px 14px;
    text-align: center;
    border: 1px solid var(--color-border, #eef0f6);
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.ast-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(124,58,237,.14);
    border-color: rgba(124,58,237,.22);
}

/* Circular avatar — fills card width */
.ast-card__avatar-wrap {
    position: relative;
    width: calc(100% - 8px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: #0d1b2b;
    flex-shrink: 0;
    margin-bottom: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,.22);
    transition: box-shadow .22s;
}
/* Vinyl ring overlay */
.ast-card__avatar-wrap::before { display: none; }
.ast-card:hover .ast-card__avatar-wrap {
    box-shadow: 0 8px 32px rgba(124,58,237,.28);
}
.ast-card__avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
}
.ast-card__avatar-fallback {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, #1e3a8a 0%, #0f1e4a 55%, #080f2a 100%);
}
.ast-card__fallback-icon {
    display: none;
}
.ast-card__overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: background .2s;
    border-radius: 50%;
    z-index: 3;
}
.ast-card:hover .ast-card__overlay { background: rgba(0,0,0,.18); }
.ast-card__play-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 60%, #0ea5e9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 18px rgba(37,99,235,.55);
    transition: transform .18s, box-shadow .18s;
    flex-shrink: 0;
}
.ast-card:hover .ast-card__play-btn {
    transform: scale(1.10);
    box-shadow: 0 6px 26px rgba(124,58,237,.7);
}

/* Body below avatar */
.ast-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    padding-top: 2px;
}
.ast-card__name {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.ast-card__verified {
    color: #1877f2;
    flex-shrink: 0;
}
.ast-card__genre {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #7c3aed;
    background: rgba(124,58,237,.10);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    width: fit-content;
}
.ast-card__listeners {
    font-size: 11px;
    color: var(--color-text-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.ast-card__country {
    font-size: 11px;
    color: var(--color-text-muted);
    margin: 0;
}
.ast-card__track-count {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--color-text-muted);
    margin: 0;
}
.ast-card__like-count {
    margin: 2px 0 0;
}

/* ── Album create: two-column layout + art upload zone ─────────────────────── */
.alb-create-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 24px;
    align-items: start;
}
.alb-create-art {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sp-field-label-sm {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
    display: block;
    width: 100%;
    text-align: center;
}
.alb-create-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Art upload zone */
.alb-art-zone {
    width: 180px;
    height: 180px;
    border: 2px dashed var(--color-border, #d1d5db);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .18s, background .18s;
    background: var(--color-surface-1, #f9fafb);
    flex-shrink: 0;
    outline: none;
}
.alb-art-zone:hover,
.alb-art-zone:focus,
.alb-art-zone.is-drag {
    border-color: var(--color-primary, #7c3aed);
    background: rgba(124,58,237,.05);
}
.alb-art-zone__ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 100%;
    color: var(--color-text-muted);
    padding: 16px;
    text-align: center;
    pointer-events: none;
    line-height: 1.35;
}
.alb-art-zone__ph svg { opacity: .4; }
.alb-art-zone__ph span { font-size: 12px; font-weight: 600; }
.alb-art-zone__ph small { font-size: 11px; opacity: .65; }
.alb-art-zone__preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.alb-art-zone__clr {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
    transition: background .15s;
}
.alb-art-zone__clr:hover { background: rgba(0,0,0,.8); }
.alb-art-selected-count {
    display: block;
    margin-top: 6px;
    min-height: 16px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-align: center;
}
.alb-art-existing {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.alb-art-existing--admin {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    max-width: 640px;
}
.alb-art-existing__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    background: var(--color-surface, #fff);
    cursor: pointer;
}
.alb-art-existing__item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
    background: var(--color-surface-1, #f3f4f6);
}
.alb-art-existing__item input {
    position: absolute;
    top: 8px;
    left: 8px;
    accent-color: #7c3aed;
}
.alb-art-existing__item span {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-align: center;
}
.alb-art-existing__item:has(input:not(:checked)) {
    opacity: .55;
}

.albdet-art-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 10px;
    margin: 14px 0 18px;
}
.albdet-art-gallery img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-surface-1, #f3f4f6);
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

.evtd-gallery {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    background: var(--color-surface, #fff);
}
.evtd-gallery__title {
    margin: 0;
    font-size: 16px;
    color: var(--color-text);
}
.evtd-gallery__viewport {
    overflow-x: auto;
    border-radius: 10px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.evtd-gallery__viewport::-webkit-scrollbar {
    display: none;
}
.evtd-gallery__track {
    display: flex;
}
.evtd-gallery__slide {
    position: relative;
    min-width: 100%;
    margin: 0;
    scroll-snap-align: start;
}
.evtd-gallery__slide img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-surface-1, #f3f4f6);
}

/* Collapsible external URL option */
.alb-art-url-details {
    margin-top: 16px;
}
.alb-art-url-details > summary {
    font-size: 12px;
    color: var(--color-text-muted);
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.alb-art-url-details > summary::-webkit-details-marker { display: none; }
.alb-art-url-details > summary::before {
    content: '›';
    display: inline-block;
    transition: transform .15s;
    font-size: 14px;
    line-height: 1;
}
.alb-art-url-details[open] > summary::before { transform: rotate(90deg); }
.alb-art-url-details > summary:hover { color: var(--color-text); }

.alb-track-picker {
    overflow: hidden;
    border: 1px solid #dde3ed;
    border-radius: 14px;
    background: #f9fbfe;
}
.alb-track-picker__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px 13px;
    border-bottom: 1px solid #e7ebf2;
    background: linear-gradient(135deg, #fff, #f7f8ff);
}
.alb-track-picker__header h3 {
    margin: 0;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 800;
}
.alb-track-picker__header p {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: 11px;
    line-height: 1.45;
}
.alb-track-picker__count {
    flex-shrink: 0;
    padding: 5px 9px;
    color: #6549dc;
    font-size: 10px;
    font-weight: 800;
    border: 1px solid rgba(101, 73, 220, .13);
    border-radius: 999px;
    background: rgba(101, 73, 220, .07);
}
.alb-track-picker__tools {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #e7ebf2;
    background: #fff;
}
.alb-track-picker__search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
}
.alb-track-picker__search svg {
    position: absolute;
    left: 11px;
    color: #8791a2;
    pointer-events: none;
}
.alb-track-picker__search input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 34px;
    color: var(--color-text);
    font: inherit;
    font-size: 12px;
    border: 1px solid #dce2eb;
    border-radius: 9px;
    outline: none;
    background: #f7f9fc;
}
.alb-track-picker__search input:focus {
    border-color: rgba(101, 73, 220, .4);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(101, 73, 220, .09);
}
.alb-track-picker__select-all {
    height: 34px;
    padding: 0 11px;
    color: #6549dc;
    font-size: 11px;
    font-weight: 750;
    border: 1px solid rgba(101, 73, 220, .16);
    border-radius: 8px;
    background: rgba(101, 73, 220, .06);
    cursor: pointer;
}
.alb-track-picker__select-all:hover {
    background: rgba(101, 73, 220, .11);
}
.alb-track-picker__list {
    max-height: 308px;
    overflow-y: auto;
    padding: 6px;
}
.alb-track-option {
    position: relative;
    display: grid;
    grid-template-columns: 20px 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.alb-track-option:hover {
    border-color: #e0e5ee;
    background: #fff;
}
.alb-track-option:has(input:checked) {
    border-color: rgba(101, 73, 220, .13);
    background: rgba(101, 73, 220, .055);
}
.alb-track-option > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.alb-track-option__check {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    color: transparent;
    border: 1.5px solid #bdc5d2;
    border-radius: 5px;
    background: #fff;
}
.alb-track-option input:checked + .alb-track-option__check {
    color: #fff;
    border-color: #6549dc;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
}
.alb-track-option input:focus-visible + .alb-track-option__check {
    box-shadow: 0 0 0 3px rgba(101, 73, 220, .16);
}
.alb-track-option__art {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    overflow: hidden;
    color: #6549dc;
    border-radius: 8px;
    background: linear-gradient(135deg, #e9e5ff, #e6f3ff);
}
.alb-track-option__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.alb-track-option__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.alb-track-option__meta strong {
    overflow: hidden;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.alb-track-option__meta small {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.alb-track-option__status {
    padding: 3px 7px;
    color: #8a6470;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 999px;
    background: #f4edf0;
}
.alb-track-option__status.is-live {
    color: #15805d;
    background: #e9f8f1;
}
.alb-track-picker__empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    color: #8791a2;
}
.alb-track-picker__empty > div {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.alb-track-picker__empty strong {
    color: var(--color-text);
    font-size: 12px;
}
.alb-track-picker__empty span {
    color: var(--color-text-muted);
    font-size: 10px;
}
.alb-track-picker__empty a {
    color: #6549dc;
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
}
.alb-track-picker__no-results {
    margin: 0;
    padding: 20px;
    color: var(--color-text-muted);
    font-size: 11px;
    text-align: center;
}

@media (max-width: 560px) {
    .alb-create-row { grid-template-columns: 1fr; }
    .alb-create-art { align-items: flex-start; }
    .alb-art-zone   { width: 140px; height: 140px; }
    .alb-track-picker__header { align-items: center; }
    .alb-track-picker__tools { align-items: stretch; flex-direction: column; }
    .alb-track-picker__select-all { align-self: flex-start; }
}

/* Empty state */
.ast-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 72px 24px;
    color: var(--color-text-muted);
    gap: 10px;
}
.ast-empty__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-surface-alt, #f0f2ff);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}
.ast-empty__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}
.ast-empty__sub {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0;
    max-width: 320px;
}

/* Load more */
.ast-load-more-row {
    display: flex;
    justify-content: center;
    padding: 24px 0 8px;
}
.ast-load-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: var(--radius-pill);
    background: transparent;
    border: 1.5px solid rgba(124,58,237,.3);
    color: #7c3aed;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: .02em;
    transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
    white-space: nowrap;
}
.ast-load-more:hover {
    border-color: #7c3aed;
    background: rgba(124,58,237,.07);
    box-shadow: 0 4px 16px rgba(124,58,237,.18);
    transform: translateY(-1px);
}

/* ── D) Artist card list view ────────────────────────────── */
.ast-grid--list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ast-grid--list .ast-card {
    flex-direction: row;
    align-items: center;
    padding: 10px 16px;
    text-align: left;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    margin-bottom: 0;
    gap: 14px;
    transform: none !important;
    box-shadow: none;
}
.ast-grid--list .ast-card:hover {
    background: var(--color-bg);
    border-color: rgba(124,58,237,.3);
    box-shadow: 0 2px 12px rgba(124,58,237,.08);
}
.ast-grid--list .ast-card__avatar-wrap {
    width: 52px;
    height: 52px;
    aspect-ratio: auto;
    margin-bottom: 0;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.14);
}
.ast-grid--list .ast-card__avatar-wrap::before { display: none; }
.ast-grid--list .ast-card__play-btn {
    width: 26px;
    height: 26px;
}
.ast-grid--list .ast-card__play-btn svg { width: 12px; height: 12px; }
.ast-grid--list .ast-card:hover .ast-card__avatar-wrap {
    box-shadow: 0 2px 12px rgba(124,58,237,.22);
}
.ast-grid--list .ast-card__body {
    flex: 1;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}
.ast-grid--list .ast-card__name {
    justify-content: flex-start;
    font-size: 14px;
}
.ast-grid--list .ast-card__listeners,
.ast-grid--list .ast-card__country {
    display: inline;
}
.ast-grid--list .ast-card__country::before {
    content: ' · ';
    color: var(--color-text-muted);
}

/* ── D) Artist detail page ───────────────────────────────── */
.adet-hero {
    position: relative;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 60%, #0ea5e9 100%);
    min-height: 210px;
    margin: 0 0 20px;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(124,58,237,.25);
}
.adet-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,.48) 100%);
}
.adet-hero--has-photo .adet-hero__scrim {
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.adet-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 28px;
    padding: 36px 32px 32px;
}
.adet-avatar-wrap {
    flex-shrink: 0;
    position: relative;
    width: 130px;
    height: 130px;
    border-radius: 50%;
}
.adet-avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.35);
    display: block;
    box-shadow: 0 4px 24px rgba(0,0,0,.35);
    z-index: 1;
}
.adet-avatar-fallback {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    font-weight: 900;
    color: rgba(255,255,255,0.85);
    background: radial-gradient(circle at 50% 50%, #1e3a8a 0%, #0f1e4a 55%, #080f2a 100%);
    border: 3px solid rgba(255,255,255,0.2);
    box-shadow: 0 4px 24px rgba(0,0,0,.35);
}
.adet-info { display: flex; flex-direction: column; }
.adet-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 8px;
}
.adet-breadcrumb__link { color: rgba(255,255,255,0.6); text-decoration: none; }
.adet-breadcrumb__link:hover { color: #fff; }
.adet-info__name {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    letter-spacing: -.02em;
}
.adet-verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: #1877f2;
    border-radius: 50%;
    color: #fff;
    flex-shrink: 0;
}
.adet-info__pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.adet-genre-pill {
    font-size: 11px;
    font-weight: 700;
    background: rgba(255,255,255,0.18);
    color: #fff;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: .06em;
    border: 1px solid rgba(255,255,255,0.22);
}
.adet-country {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: rgba(255,255,255,0.75);
}
.adet-info__listeners {
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    margin: 0 0 8px;
}
.adet-info__listeners strong {
    font-size: 22px;
    font-weight: 800;
    margin-right: 4px;
    letter-spacing: -.02em;
}
.adet-website {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 1px;
    width: fit-content;
}
.adet-website:hover { color: #fff; border-bottom-color: #fff; }

/* ── D2) Bio & Tracks — card style ──────────────────────── */
.adet-bio-section,
.adet-tracks-section {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 4px;
    padding: 22px 24px;
    margin-bottom: 16px;
}
.adet-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.adet-section-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    background: #eeeff5;
    padding: 2px 9px;
    border-radius: 20px;
}
.adet-bio {
    font-size: 13px;
    line-height: 1.8;
    color: var(--color-text-muted);
    max-width: 680px;
    margin: 0;
    white-space: pre-line;
}
.adet-tracks-empty {
    text-align: center;
    padding: 40px 32px;
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.adet-tracks-table-wrap { overflow-x: auto; }
.adet-tracks-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.adet-tracks-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}
.adet-track-row {
    border-bottom: 1px solid var(--color-border);
    cursor: default;
}
.adet-track-row:hover { background: var(--color-surface-alt, #f5f7fa); }
.adet-track-row td { padding: 8px 10px; vertical-align: middle; }
.adet-col-num { width: 32px; color: var(--color-text-muted); text-align: center; }
.adet-col-album,
.adet-col-genre { color: var(--color-text-muted); white-space: nowrap; }
.adet-col-plays,
.adet-col-dur { color: var(--color-text-muted); text-align: right; white-space: nowrap; }
.adet-track-title-cell { display: flex; align-items: center; gap: 10px; }
.adet-track-art-wrap {
    width: 38px;
    min-width: 38px;
    height: 38px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #eeeff5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.adet-track-art { width: 100%; height: 100%; object-fit: cover; }
.adet-track-art-fallback { color: var(--color-text-muted); }

/* ── E) Admin artist panel (new .acp-* classes) ──────────── */
.acp-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-brand);
    background: var(--color-brand-light, rgba(0,123,255,0.08));
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}
.acp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.acp-list-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.acp-list-item:last-child { border-bottom: none; }
.acp-list-item__info {
    flex: 1;
    min-width: 0;
}
.acp-list-item__name {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.acp-list-item__name a {
    color: inherit;
    text-decoration: none;
}
.acp-list-item__name a:hover {
    text-decoration: underline;
    color: var(--color-brand);
}
.acp-list-item__sub {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
}
.acp-list-item__actions {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}
.acp-artist-thumb {
    width: 44px;
    min-width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #0d1b2b;
    display: flex;
    align-items: center;
    justify-content: center;
}
.acp-artist-thumb__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.acp-artist-thumb__fallback {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
}
.acp-verified-badge { color: #1877f2; flex-shrink: 0; }

.acp-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    padding: 0;
    line-height: 1;
}
.acp-icon-btn--edit:hover {
    background: var(--color-brand);
    color: #fff;
    border-color: var(--color-brand);
}
.acp-icon-btn--delete:hover {
    background: #e53e3e;
    color: #fff;
    border-color: #e53e3e;
}
.acp-inline-edit-panel {
    width: 100%;
    padding: 14px;
    background: var(--color-surface-alt, #f5f7fa);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    margin-top: 8px;
}
.acp-inline-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.acp-inline-edit-full { grid-column: 1 / -1; }
.acp-inline-edit-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    align-items: center;
}
.acp-cancel-btn {
    padding: 7px 14px;
    border: 1px solid var(--color-border);
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text-muted);
}
.acp-cancel-btn:hover { background: var(--color-bg); }
.acp-submit-btn--sm {
    padding: 7px 14px;
    font-size: 13px;
}

/* Artist responsive tweaks */
@media (max-width: 768px) {
    .adet-hero { margin: 0 0 16px; border-radius: 4px; }
    .adet-hero__inner { flex-direction: column; align-items: flex-start; padding: 24px 20px 20px; gap: 16px; }
    .adet-avatar, .adet-avatar-fallback { font-size: 38px; }
    .adet-avatar-wrap { width: 88px; height: 88px; }
    .adet-info__name { font-size: 20px; }
    .adet-bio-section, .adet-tracks-section { padding: 16px 18px; border-radius: 4px; }
    .acp-inline-edit-grid { grid-template-columns: 1fr; }
    .acp-inline-edit-full { grid-column: 1; }
    .ast-ph { gap: 12px; }
    .ast-ph__sub { display: none; }
}
@media (max-width: 480px) {
    .ast-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ast-ph__badges { display: none; }
    .ast-filter-bar__right .ast-results-count { display: none; }
}

/* =============================================================================
   ALBUMS PAGE  — .alb-*
============================================================================= */

.alb { width: 100%; }

/* Hero */
.alb-hero {
    position: relative;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 60%, #0ea5e9 100%);
    border-radius: 4px;
    overflow: hidden;
    padding: 0;
    margin: 0 -24px 0;
}
.alb-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.12) 0%, rgba(0,0,0,.5) 100%);
    pointer-events: none;
}
.alb-hero__waves {
    position: absolute; inset: 0; pointer-events: none;
}
.alb-hero__waves svg { width: 100%; height: 100%; }
.alb-hero__wave--1 { fill: rgba(255,255,255,0.08); }
.alb-hero__wave--2 { fill: rgba(255,255,255,0.12); }
.alb-hero__body {
    position: relative; z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 40px 24px 60px;
}
.alb-hero__left { flex: 1; min-width: 0; }
.alb-hero__badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; letter-spacing: .12em;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-pill);
    padding: 4px 10px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.alb-hero__title {
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.15;
}
.alb-hero__sub {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    margin: 0;
    max-width: 480px;
}

/* Hero stats glass panel */
.alb-hero__stats {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    padding: 16px 24px;
    flex-shrink: 0;
    backdrop-filter: blur(8px);
}
.alb-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    gap: 2px;
}
.alb-stat__value {
    font-size: 26px; font-weight: 800; color: #fff;
    line-height: 1;
    letter-spacing: -.02em;
}
.alb-stat__label {
    font-size: 10px;
    color: rgba(255,255,255,.5);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.alb-stat__divider {
    width: 1px; height: 34px;
    background: rgba(255,255,255,.16);
    flex-shrink: 0;
}

/* ── Sticky filter bar ────────────────────────────────────────────────── */
.alb-filter-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--color-bg, #e8ecf3);
    margin: 0 -24px;
    padding: 14px 24px 14px;
    border-bottom: 1.5px solid #dce8f8;
    box-shadow: 0 2px 16px rgba(0,0,0,.07);
}
/* No top gap — filter bar is the first element */
.page-albums .content { padding-top: 0; }
.alb-filter-bar__row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Searchbox */
.alb-searchbox {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 440px;
}
.alb-searchbox__icon {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: #5a7299;
    pointer-events: none; flex-shrink: 0;
}
.alb-searchbox__input {
    width: 100%;
    background: #f5f5f5;
    border: none;
    border-radius: var(--radius-pill);
    padding: 9px 36px 9px 38px;
    font-size: 13px;
    color: #0d1f3c;
    outline: none;
    transition: background .15s;
}
.alb-searchbox__input::placeholder { color: #5a7299; }
.alb-searchbox__input:focus { background: #eef2ff; }
.alb-searchbox__clear {
    position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 2px;
    color: #5a7299; display: flex; align-items: center;
    border-radius: 50%;
    transition: color .15s;
}
.alb-searchbox__clear:hover { color: #7c3aed; }

/* Count badge */
.alb-results-count {
    font-size: 12px; font-weight: 600;
    color: #5a7299;
    white-space: nowrap;
    margin-left: auto;
    background: #f8f5ff;
    border: 1px solid #dce8f8;
    border-radius: 6px;
    padding: 4px 12px;
}

/* Section container */
.alb-section { padding-top: 24px; }

/* Album grid */
.alb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
    margin-top: 0;
    padding: 4px 0 8px;
}
.alb-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    border: 1.5px solid #dce8f8;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s, border-color .15s, transform .15s;
    box-shadow: 0 2px 8px rgba(0,51,102,.05);
}
.alb-card:hover {
    box-shadow: 0 8px 28px rgba(124,58,237,.16);
    border-color: rgba(124,58,237,.3);
    transform: translateY(-2px);
}
.alb-card__cover-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #e8f0fc;
}
.alb-card__cover {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s;
    z-index: 1;
}
.alb-card:hover .alb-card__cover { transform: scale(1.04); }
.alb-card__cover-fallback {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(0,51,102,.25);
    z-index: 0;
}
.alb-card__overlay {
    position: absolute; inset: 0;
    background: rgba(0,20,60,0);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: background .2s, opacity .2s;
    color: #fff;
    z-index: 2;
}
.alb-card:hover .alb-card__overlay {
    opacity: 1;
    background: rgba(0,20,60,.45);
}
.alb-card__body {
    padding: 10px 12px 10px;
    display: flex; flex-direction: column; gap: 4px;
    flex: 1;
}
.alb-card__title {
    font-size: 13px;
    font-weight: 700;
    color: #0d1f3c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    transition: color .12s;
}
.alb-card:hover .alb-card__title { color: #003366; }
.alb-card__artist {
    font-size: 11px;
    color: #5a7299;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.alb-card__meta {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px;
    color: #5a7299;
    margin-top: 2px;
}
.alb-card__dot { opacity: .5; }

/* Empty / no-results */
.alb-empty {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 60px 24px;
    color: var(--color-text-muted);
}
.alb-no-results {
    text-align: center;
    padding: 40px 0;
    color: var(--color-text-muted);
    font-size: 14px;
}

/* =============================================================================
   ALBUM DETAIL PAGE  — .albdet-*
============================================================================= */

.albdet-content { padding: 0 !important; }

/* ── Hero ── */
.albdet-hero {
    position: relative;
    min-height: 280px;
    overflow: hidden;
    display: flex; align-items: flex-end;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 60%, #0ea5e9 100%);
}
.albdet-hero__bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center top;
    filter: blur(24px) brightness(.3);
    transform: scale(1.1);
    z-index: 0;
}
.albdet-hero__bg--fallback {
    background: transparent; filter: none; transform: none;
}
.albdet-hero__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.12) 0%, rgba(0,0,0,.5) 100%);
    z-index: 1;
}
.albdet-hero__inner {
    position: relative; z-index: 2;
    display: flex; align-items: flex-end; gap: 28px;
    padding: 40px 28px 36px;
    width: 100%;
}

/* Cover art */
.albdet-cover-wrap { flex-shrink: 0; }
.albdet-cover {
    width: 180px; height: 180px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,.7);
    display: block;
}
.albdet-cover--fallback {
    width: 180px; height: 180px;
    background: rgba(255,255,255,.07);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.2);
    box-shadow: 0 12px 40px rgba(0,0,0,.7);
}

/* Info block */
.albdet-info { color: #fff; flex: 1; min-width: 0; }
.albdet-artist-profile {
    width: 205px;
    flex: 0 0 205px;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 14px;
    color: #fff;
    text-decoration: none;
    background: rgba(13,19,48,.38);
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.albdet-artist-profile:hover {
    color: #fff;
    transform: translateY(-2px);
    background: rgba(28,37,78,.56);
    border-color: rgba(255,255,255,.42);
}
.albdet-artist-profile__eyebrow {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    color: rgba(255,255,255,.56);
}
.albdet-artist-profile__body { display: flex; align-items: center; gap: 9px; min-width: 0; }
.albdet-artist-profile__avatar,
.albdet-artist-profile__initial {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.42);
}
.albdet-artist-profile__initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-brand);
    color: #fff;
    font-weight: 800;
}
.albdet-artist-profile__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 750;
}
.albdet-artist-profile__arrow { margin-left: auto; flex-shrink: 0; color: rgba(255,255,255,.7); }
.albdet-artist-profile__hint { font-size: 11px; color: rgba(255,255,255,.63); }
.albdet-breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,.5);
    margin-bottom: 8px;
}
.albdet-breadcrumb__link {
    color: rgba(255,255,255,.65);
    text-decoration: none;
    transition: color .15s;
}
.albdet-breadcrumb__link:hover { color: #fff; }
.albdet-info__type {
    font-size: 10px; font-weight: 800; letter-spacing: .14em;
    color: rgba(255,255,255,.55);
    margin: 0 0 4px;
    text-transform: uppercase;
}
.albdet-info__title {
    font-size: clamp(24px, 4vw, 46px);
    font-weight: 900;
    line-height: 1.05;
    margin: 0 0 12px;
    text-shadow: 0 2px 16px rgba(0,0,0,.4);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.albdet-info__artist { margin-bottom: 8px; }
.albdet-info__artist-link {
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none;
    color: rgba(255,255,255,.9);
    font-size: 14px; font-weight: 600;
    transition: color .15s;
}
.albdet-info__artist-link:hover { color: #fff; }
.albdet-info__artist-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    object-fit: cover;
}
.albdet-info__artist-init {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--color-brand);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff;
}
.albdet-info__meta {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px;
    color: rgba(255,255,255,.5);
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.albdet-meta-dot { opacity: .4; }
.albdet-info__desc {
    font-size: 13px;
    color: rgba(255,255,255,.5);
    margin: 0 0 14px;
    max-width: 520px;
    line-height: 1.55;
}

/* Action buttons row */
.albdet-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.albdet-play-all-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 24px;
    border-radius: 30px;
    background: var(--color-brand);
    color: #fff;
    border: none;
    font-size: 14px; font-weight: 700;
    cursor: pointer;
    transition: opacity .15s, transform .15s;
}
.albdet-play-all-btn:hover { opacity: .88; transform: scale(1.03); }
.albdet-artist-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,.3);
    color: rgba(255,255,255,.85);
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.albdet-artist-btn:hover { border-color: rgba(255,255,255,.7); color: #fff; }
.albdet-stats-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px;
    border-radius: 30px;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.6);
    font-size: 12px; font-weight: 600;
}
.albdet-stats-pill--likes {
    background: rgba(224, 49, 78, 0.2);
    color: #ffb3c0;
}

/* ── Track table ── */
.albdet-tracks-section { padding: 0 4px; }
.albdet-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.albdet-table__head th {
    padding: 8px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}
.albdet-row {
    border-bottom: 1px solid var(--color-border);
    transition: background .12s;
    cursor: default;
}
.albdet-row:hover { background: var(--color-surface-raised, rgba(255,255,255,.04)); }
.albdet-row--current .albdet-title-text { color: var(--color-brand) !important; }
.albdet-row--playing { background: rgba(var(--color-brand-rgb, 0,123,255),.06); }
.albdet-row td { padding: 10px 12px; vertical-align: middle; }

/* # column with inline play toggle */
.albdet-col-num {
    width: 36px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 12px;
    position: relative;
}
.albdet-row__num { display: block; }
.albdet-row__play-inline {
    display: none;
    position: absolute;
    inset: 0; margin: auto;
    width: 22px; height: 22px;
    border: none; background: none;
    color: var(--color-text);
    cursor: pointer;
    align-items: center; justify-content: center;
}
.albdet-row:hover .albdet-row__num      { visibility: hidden; }
.albdet-row:hover .albdet-row__play-inline { display: flex; }
.albdet-row--current .albdet-row__num   { color: var(--color-brand); }

/* Title cell */
.albdet-col-title { min-width: 180px; }
.albdet-title-cell { display: flex; align-items: center; gap: 10px; }
.albdet-art-wrap {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    display: block;
    text-decoration: none;
}
.albdet-art {
    width: 38px; height: 38px;
    object-fit: cover;
    display: block;
}
.albdet-art--fallback {
    width: 38px; height: 38px;
    background: var(--color-surface-raised, rgba(255,255,255,.06));
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-muted);
}
.albdet-art__overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity .15s;
}
.albdet-art-wrap:hover .albdet-art__overlay { opacity: 1; }
.albdet-title-info { min-width: 0; }
.albdet-title-text {
    display: block;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .15s;
}
.albdet-title-text:hover { color: var(--color-brand); }
.albdet-title-sub {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 1px;
}

/* Other columns */
.albdet-col-genre { white-space: nowrap; }
.albdet-col-plays, .albdet-col-dur {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
}
.albdet-col-likes {
    width: 56px;
    text-align: center;
    white-space: nowrap;
}
.albdet-col-likes .like-pill { padding: 1px 6px 1px 4px; font-size: 10px; }
.albdet-col-play {
    width: 36px;
    text-align: center;
}
.albdet-play-btn {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--color-brand);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s, transform .15s;
}
.albdet-row:hover .albdet-play-btn { opacity: 1; }
.albdet-play-btn:hover { transform: scale(1.12); }
.albdet-muted { color: var(--color-text-muted); }

/* Footer links */
.albdet-footer-section {
    display: flex; gap: 12px; flex-wrap: wrap;
    padding: 28px 8px 12px;
}
.albdet-more-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    font-size: 13px; font-weight: 600;
    background: var(--color-brand);
    color: #fff;
    text-decoration: none;
    transition: opacity .15s, transform .15s;
}
.albdet-more-btn:hover { opacity: .85; transform: translateY(-1px); }
.albdet-more-btn--ghost {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}
.albdet-more-btn--ghost:hover { border-color: var(--color-brand); color: var(--color-brand); }

/* Responsive */
@media (max-width: 640px) {
    .alb-hero { margin: -16px -16px 0; }
    .alb-hero__body { padding: 24px 16px 44px; }
    .alb-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .albdet-hero__inner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 16px 28px; }
    .albdet-cover, .albdet-cover--fallback { width: 130px; height: 130px; }
    .albdet-info__title { font-size: 22px; white-space: normal; }
    .albdet-col-genre, .albdet-col-plays, .albdet-col-likes { display: none; }
}

/* =============================================================================
   SONGS PAGE  — .sng-*
   Navy #003366-themed catalogue: rich header, glass stats, clean table with
   a deep navy thead, zebra-tinted rows, and navy accent throughout.
============================================================================= */

/* ── Navy token palette (scoped to songs page) ────────────────────────────── */
.sng {
    --sng-navy:          #7c3aed;
    --sng-navy-mid:      #2563eb;
    --sng-navy-light:    #0ea5e9;
    --sng-navy-pale:     #e8f0fc;
    --sng-navy-ghost:    #f8f5ff;
    --sng-navy-tint:     rgba(124,58,237,.06);
    --sng-navy-tint-h:   rgba(124,58,237,.10);
    --sng-navy-playing:  rgba(124,58,237,.09);
    --sng-divider:       #e8e0f8;
    --sng-text:          #1a1040;
    --sng-text-muted:    #7060a0;
    --sng-chip-bg:       rgba(124,58,237,.09);
    --sng-chip-color:    #7c3aed;
}

/* ── Base link styles ─────────────────────────────────────────────────────── */
.sng-title-link {
    color: var(--sng-text);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.sng-title-link:hover { color: var(--sng-navy); }
.sng-row--playing .sng-title-link { color: var(--sng-navy); }

.sng-art-wrap { display: block; text-decoration: none; }

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.sng-hero {
    position: relative;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 60%, #0ea5e9 100%);
    overflow: hidden;
    margin: -20px -24px 0;
    padding: 0;
}
.sng-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.12) 0%, rgba(0,0,0,.5) 100%);
    pointer-events: none;
}
/* Radial glow behind the title */
.sng-hero::before {
    content: '';
    position: absolute;
    top: -60px; left: -80px;
    width: 540px; height: 440px;
    background: radial-gradient(ellipse at 30% 40%, rgba(124,58,237,.22) 0%, transparent 70%);
    pointer-events: none;
}
.sng-hero__waves {
    position: absolute; inset: 0; pointer-events: none;
}
.sng-hero__waves svg { width: 100%; height: 100%; }
.sng-hero__wave--1 { fill: rgba(255,255,255,0.08); }
.sng-hero__wave--2 { fill: rgba(255,255,255,0.12); }

.sng-hero__body {
    position: relative; z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 28px 28px 40px;
}
.sng-hero__badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 700; letter-spacing: .15em;
    color: rgba(255,255,255,.75);
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    text-transform: uppercase;
    margin-bottom: 12px;
    backdrop-filter: blur(4px);
}
.sng-hero__title {
    font-size: clamp(22px, 3.5vw, 34px);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin: 0 0 8px;
    letter-spacing: -.02em;
}
.sng-hero__sub {
    font-size: 13.5px;
    color: rgba(255,255,255,.55);
    max-width: 440px;
    line-height: 1.6;
    margin: 0;
}

/* Stats glass card */
.sng-hero__stats {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    padding: 14px 20px;
    flex-shrink: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.sng-stat {
    display: flex; flex-direction: column; align-items: center;
    padding: 0 18px;
    gap: 2px;
}
.sng-stat__value {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -.02em;
}
.sng-stat__label {
    font-size: 10px;
    color: rgba(255,255,255,.55);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.sng-stat__divider {
    width: 1px; height: 30px;
    background: rgba(255,255,255,.2);
    flex-shrink: 0;
}

/* ── Sticky filter bar ──────────────────────────────────────────────────────── */
.sng-filter-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--color-surface);
    margin: 0 -24px;
    padding: 12px 24px 0;
    border-bottom: 1px solid var(--color-border);
}
/* No top gap — filter bar is the first element */
.page-songs .content { padding-top: 0; }
.sng-filter-bar__row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 12px;
}
.sng-sort-icon { color: var(--color-text-muted); flex-shrink: 0; }

/* Search box */
.sng-searchbox {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 400px;
}
.sng-searchbox__icon {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; color: var(--sng-text-muted);
    pointer-events: none; flex-shrink: 0;
}
.sng-searchbox__input {
    width: 100%;
    background: #f5f5f5;
    border: none;
    border-radius: var(--radius-pill);
    padding: 9px 36px 9px 38px;
    font-size: 13px;
    color: var(--sng-text);
    outline: none;
    transition: background .15s;
}
.sng-searchbox__input::placeholder { color: var(--sng-text-muted); }
.sng-searchbox__input:focus { background: #eef2ff; }
.sng-searchbox__clear {
    position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 2px;
    color: var(--sng-text-muted); display: flex; align-items: center;
    border-radius: 50%;
    transition: color .15s;
}
.sng-searchbox__clear:hover { color: var(--sng-navy); }

/* Sort */
.sng-sort-wrap {
    display: flex; align-items: center; gap: 6px;
}
.sng-sort-label {
    font-size: 11px; font-weight: 700; color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: .09em; white-space: nowrap;
}
.sng-sort-select {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 6px 30px 6px 10px;
    font-size: 13px; font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 18px;
    transition: border-color .15s, box-shadow .15s;
}
.sng-sort-select:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.12); }

/* Results count */
.sng-results-count {
    font-size: 12px; font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
    margin-left: auto;
    background: var(--color-surface-alt, #f5f5f8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 3px 12px;
}

/* ── Genre pill strip ────────────────────────────────────────────────────────── */
.sng-genre-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding: 6px 0 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.sng-genre-strip::-webkit-scrollbar { display: none; }
.sng-pill {
    flex-shrink: 0;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    font-size: 12px; font-weight: 600;
    border: 1.5px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    font-family: inherit;
}
.sng-pill:hover {
    background: var(--color-surface-alt, #f5f5f8);
    color: var(--color-text);
    border-color: var(--color-text-muted);
}
.sng-pill--active {
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(124,58,237,.30);
}
.sng-pill--active:hover { background: linear-gradient(135deg, #6d28d9, #1d4ed8); border-color: transparent; color: #fff; }

/* ── Load more row (below card grid) ────────────────────────────────────────── */
.sng-load-more-row {
    display: flex;
    justify-content: center;
    padding: 24px 0 8px;
}

/* View toggle group */
.sng-view-toggle {
    display: flex;
    align-items: center;
    background: var(--sng-navy-ghost);
    border: 1.5px solid var(--sng-divider);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}
.sng-view-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--sng-text-muted);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.sng-view-btn:hover { color: var(--sng-navy); }
.sng-view-btn--active {
    background: var(--sng-navy);
    color: #fff;
}
.sng-view-btn--active:hover { color: #fff; }
.sng-load-more {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 26px;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    color: var(--sng-text-muted);
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .15s, color .15s, background .15s;
    white-space: nowrap;
}
.sng-load-more[hidden] { display: none; }
.sng-load-more:hover {
    border-color: #7c3aed;
    color: #7c3aed;
    background: rgba(124,58,237,.06);
}

/* ── Card grid ───────────────────────────────────────────────────────────────── */
.sng-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
    gap: 10px;
    padding: 16px 0 4px;
}
.sng-card {
    background: var(--color-surface);
    border: 1px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: background .15s, box-shadow .15s, border-color .15s;
}
.sng-card:hover {
    background: var(--color-surface-alt, rgba(124,58,237,.05));
    border-color: var(--sng-divider);
    box-shadow: 0 4px 18px rgba(124,58,237,.10);
}
.sng-card--playing {
    background: var(--sng-navy-playing) !important;
    border-color: rgba(124,58,237,.25) !important;
    box-shadow: 0 0 0 1.5px rgba(124,58,237,.2) !important;
}

/* Cover */
.sng-card__cover {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--sng-navy-pale);
    overflow: hidden;
}
.sng-card__art {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .28s;
}
.sng-card:hover .sng-card__art { transform: scale(1.04); }
.sng-card__art--fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: #e8f0fc;
    color: rgba(0,51,102,.25);
}
.sng-card__art--fallback svg { width: 28%; height: 28%; }

/* Play overlay */
.sng-card__play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0);
    border: none; cursor: pointer;
    transition: background .2s;
}
.sng-card:hover .sng-card__play { background: rgba(0,0,0,.45); }
.sng-card__play svg {
    opacity: 0;
    color: #fff;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
    transform: scale(.8);
    transition: opacity .15s, transform .15s;
}
.sng-card:hover .sng-card__play svg { opacity: 1; transform: scale(1); }
.sng-card--playing .sng-card__play svg { opacity: 1; transform: scale(1); }

/* Play button circle */
.sng-card:hover .sng-card__play::before {
    content: '';
    position: absolute;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 60%, #0ea5e9 100%);
    box-shadow: 0 4px 16px rgba(37,99,235,.4);
    z-index: -1;
}

/* Body */
.sng-card__body {
    padding: 8px 10px 8px;
    display: flex; flex-direction: column; gap: 3px;
    flex: 1;
}
.sng-card__title {
    font-size: 12.5px; font-weight: 700;
    color: var(--sng-text);
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .12s;
}
.sng-card__title:hover { color: var(--sng-navy); }
.sng-card--playing .sng-card__title { color: var(--sng-navy); }
.sng-card__artist {
    font-size: 11px; color: var(--sng-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sng-card__meta {
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
    margin-top: 3px;
}
.sng-card__dur {
    font-size: 10px; color: var(--sng-text-muted);
    font-variant-numeric: tabular-nums;
}
.sng-card__footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: auto; padding-top: 6px;
    border-top: 1px solid var(--sng-divider);
}
.sng-card__plays {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; color: var(--sng-text-muted);
    font-variant-numeric: tabular-nums;
}
.sng-card__actions { display: flex; align-items: center; gap: 2px; }
.sng-card__like {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: none;
    color: var(--sng-text);
    border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color .12s, background .12s;
}
.sng-card__like .sng-heart-outline { display: block; }
.sng-card__like .sng-heart-filled  { display: none; }
.sng-card__like:hover { color: #ef4444; background: rgba(239,68,68,.08); }
.sng-card__like--liked { color: #ef4444; }
.sng-card__like--liked .sng-heart-outline { display: none; }
.sng-card__like--liked .sng-heart-filled  { display: block; }
.sng-card__like--liked:hover { background: rgba(239,68,68,.12); }
.sng-card__share {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: none;
    color: var(--sng-text-muted);
    border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color .12s, background .12s;
    opacity: 1 !important;
}
.sng-card__share:hover {
    color: var(--sng-navy);
    background: var(--sng-navy-pale);
}
.sng-card__add-pl {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: none;
    color: var(--sng-text-muted);
    border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color .12s, background .12s;
}
.sng-card__add-pl:hover { color: var(--sng-navy); background: var(--sng-navy-pale); }

/* ── Playlist picker dropdown ────────────────────────────────────────────────── */
.sng-pl-picker {
    position: absolute;
    z-index: 9999;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,51,102,.14);
    min-width: 240px; max-width: 290px;
    padding: 6px;
    display: flex; flex-direction: column; gap: 2px;
}
.sng-pl-picker[hidden] { display: none; }
.sng-pl-picker__search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    padding: 0 9px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #7c3aed;
    background: #f8fafc;
}
.sng-pl-picker__search:focus-within {
    border-color: #a78bfa;
    box-shadow: 0 0 0 3px rgba(124,58,237,.09);
    background: #fff;
}
.sng-pl-picker__search input {
    width: 100%;
    min-height: 36px;
    padding: 0;
    border: 0;
    outline: 0;
    color: #1e293b;
    background: transparent;
    font: inherit;
    font-size: .8rem;
}
.sng-pl-picker__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 240px;
    overflow-y: auto;
}
.sng-pl-picker__item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    border: none; border-radius: 6px; background: none;
    text-align: left; cursor: pointer; width: 100%;
    font-size: .82rem; color: #1e293b;
    transition: background .1s;
}
.sng-pl-picker__item:hover:not(:disabled) { background: #f1f5f9; }
.sng-pl-picker__item:disabled { opacity: .55; cursor: default; }
.sng-pl-picker__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sng-pl-picker__count {
    font-size: .74rem; color: #64748b;
    background: #f1f5f9; border-radius: 20px;
    padding: 1px 6px; white-space: nowrap;
}
.sng-pl-picker__new {
    display: block; padding: 7px 10px;
    border-top: 1px solid #e2e8f0; margin-top: 4px;
    font-size: .8rem; color: #7c3aed; text-decoration: none;
}
.sng-pl-picker__new:hover { text-decoration: underline; }
.sng-pl-picker__empty { padding: 8px 10px; font-size: .82rem; color: #64748b; }
.sng-pl-picker__empty a { color: #7c3aed; }

/* ── Table wrapper ───────────────────────────────────────────────────────────── */
.sng-table-wrap {
    overflow-x: auto;
    margin-top: 4px;
    border-radius: 14px;
    border: 1.5px solid var(--sng-divider);
    box-shadow: 0 4px 24px rgba(0,51,102,.07), 0 1px 4px rgba(0,51,102,.04);
    background: #fff;
}

.sng-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Column widths */
.sng-col-num    { width: 48px; }
.sng-col-title  { width: 240px; min-width: 160px; }
.sng-col-artist { width: 100px; }
.sng-col-album  { width: 110px; }
.sng-col-genre  { width: 110px; }
.sng-col-plays  { width: 66px; text-align: right; }
.sng-col-dur    { width: 58px; text-align: right; }
.sng-col-play   { width: 80px; text-align: center; }

.gdet-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    white-space: nowrap;
}
.sng-action-btn {
    width: 28px; height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--sng-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s, transform .15s;
}
.sng-action-btn:hover, .sng-action-btn:focus-visible {
    color: var(--sng-navy);
    background: var(--sng-navy-ghost);
    outline: none;
}
.sng-action-btn.is-liked { color: #e2445c; }
.sng-action-btn:active { transform: scale(.92); }

/* ── Table head — deep navy ──────────────────────────────────────────────────── */
.sng-table__head tr th {
    padding: 10px 12px;
    font-size: 10.5px; font-weight: 700;
    color: var(--sng-text-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    border-bottom: 2px solid var(--sng-divider);
    white-space: nowrap;
    background: var(--sng-navy-ghost);
    position: sticky; top: 0; z-index: 2;
}
.sng-table__head th:first-child { border-radius: 12px 0 0 0; padding-left: 16px; }
.sng-table__head th:last-child  { border-radius: 0 12px 0 0; }
.sng-table__head th + th {
    border-left: 1px solid var(--sng-divider);
}

/* ── Rows ────────────────────────────────────────────────────────────────────── */
.sng-row {
    transition: background .12s;
    border-bottom: 1px solid var(--sng-divider);
}
.sng-row:last-child { border-bottom: none; }

/* Subtle zebra stripe */
.sng-row:nth-child(even) { background: var(--sng-navy-ghost); }
.sng-row:nth-child(odd)  { background: #fff; }

.sng-row:hover {
    background: var(--sng-navy-pale) !important;
}
/* Playing row — navy left accent bar */
.sng-row--playing {
    background: var(--sng-navy-playing) !important;
    box-shadow: inset 3px 0 0 var(--sng-navy);
}
.sng-row--playing .sng-title-text { color: var(--sng-navy); font-weight: 700; }

.sng-row td {
    padding: 10px 12px;
    font-size: 13px;
    color: var(--sng-text);
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Actions cell must not clip the buttons on hover */
.sng-row td.sng-col-play { overflow: visible; }

/* ── # column: number → inline play on hover ─────────────────────────────────── */
.sng-col-num { text-align: center; position: relative; padding-left: 16px !important; }
.sng-row__num {
    display: block;
    font-size: 12px; font-weight: 600;
    color: var(--sng-text-muted);
    font-variant-numeric: tabular-nums;
}
.sng-row__play-inline {
    display: none;
    position: absolute; inset: 0; margin: auto;
    width: 22px; height: 22px;
    background: none; border: none; cursor: pointer; padding: 0;
    align-items: center; justify-content: center;
    color: var(--sng-navy);
    border-radius: 50%;
    transition: transform .15s;
}
.sng-row:hover .sng-row__num { visibility: hidden; }
.sng-row:hover .sng-row__play-inline { display: flex; }
.sng-row__play-inline:hover { transform: scale(1.25); }
.sng-row--playing .sng-row__num { visibility: hidden; }
.sng-row--playing .sng-row__play-inline { display: flex; color: var(--sng-navy); }

/* ── Title cell ──────────────────────────────────────────────────────────────── */
.sng-title-cell {
    display: flex; align-items: center; gap: 12px;
}
.sng-art-wrap {
    flex-shrink: 0;
    position: relative;
    width: 40px; height: 40px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--sng-navy-pale);
    border: 1px solid var(--sng-divider);
}
.sng-art {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
.sng-art-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(124,58,237,.3);
}
.sng-art-overlay {
    position: absolute; inset: 0;
    background: rgba(30,0,60,.55);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .15s;
    color: #fff; border-radius: 7px;
    cursor: pointer;
}
.sng-row:hover .sng-art-overlay { opacity: 1; }

.sng-title-info {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.sng-title-text {
    font-size: 13px; font-weight: 600;
    color: var(--sng-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .12s;
}
.sng-row:hover .sng-title-text { color: var(--sng-navy); }
.sng-title-sub {
    font-size: 11px; color: var(--sng-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Artist / album links ────────────────────────────────────────────────────── */
.sng-artist-link, .sng-album-link {
    color: var(--sng-navy-mid);
    font-weight: 500;
    text-decoration: none;
    transition: color .12s;
}
.sng-artist-link:hover, .sng-album-link:hover { color: var(--sng-navy); text-decoration: underline; }
.sng-artist-plain { color: var(--sng-text); }
.sng-col-muted    { color: var(--sng-text-muted); font-style: italic; }

/* ── Genre chip ──────────────────────────────────────────────────────────────── */
.sng-genre-chip {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    background: var(--sng-chip-bg);
    color: var(--sng-chip-color);
    border: 1px solid rgba(124,58,237,.15);
    white-space: nowrap;
}
.sng-genre-chip--link {
    text-decoration: none;
    transition: background .15s, box-shadow .15s;
}
.sng-genre-chip--link:hover {
    background: rgba(124,58,237,.16);
    box-shadow: 0 1px 4px rgba(124,58,237,.14);
}

/* ── Plays / duration ────────────────────────────────────────────────────────── */
.sng-col-plays, .sng-col-dur {
    font-variant-numeric: tabular-nums;
    color: var(--sng-text-muted);
    font-size: 12px;
    font-weight: 500;
}

/* ── Actions cell (play + share) ─────────────────────────────────────────────── */
.sng-actions-cell {
    display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* Main play button */
.sng-play-btn {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--sng-navy);
    color: #fff;
    border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity .15s, background .15s, box-shadow .15s;
    box-shadow: 0 2px 8px rgba(0,51,102,.30);
}
.sng-row:hover .sng-play-btn { opacity: 1; }
.sng-play-btn:hover { background: var(--sng-navy-mid); box-shadow: 0 4px 14px rgba(0,51,102,.45); }
.sng-row--playing .sng-play-btn { opacity: 1; background: var(--sng-navy); }

/* Share button (inside songs table — reveal on row hover) */
.sng-table .share-btn {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--sng-navy-ghost);
    color: var(--sng-navy);
    border: 1.5px solid var(--sng-divider);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity .15s, background .15s, border-color .15s;
}
.sng-row:hover .share-btn { opacity: 1; }
.sng-table .share-btn:hover {
    background: var(--sng-navy-pale);
    border-color: rgba(0,51,102,.35);
}

/* ── Empty / no-results ──────────────────────────────────────────────────────── */
.sng-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px;
    padding: 80px 24px;
    color: var(--sng-text-muted);
    text-align: center;
}
.sng-empty svg { opacity: .18; color: var(--sng-navy); }
.sng-empty p { font-size: 15px; }
.sng-upload-cta {
    font-size: 13px; font-weight: 600;
    color: var(--sng-navy);
    padding: 9px 20px;
    border: 1.5px solid var(--sng-navy);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: background .15s, color .15s, box-shadow .15s;
}
.sng-upload-cta:hover,
.sng-upload-cta:focus-visible {
    background: var(--sng-navy) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0,51,102,.3);
    outline: none;
}
.sng-no-results {
    text-align: center; padding: 48px 0;
    color: var(--sng-text-muted); font-size: 14px;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .sng-col-album  { display: none; }
    .sng-col-artist { width: 130px; }
}

/* Genre detail table: fit the complete action set on small screens. */
@media (max-width: 700px) {
    .page-genres-detail .sng-table-wrap { overflow-x: hidden; }
    .page-genres-detail .sng-table { width: 100%; min-width: 0; }
    .albdet-artist-profile { width: min(100%, 360px); flex-basis: auto; align-self: stretch; }
    .page-genres-detail .sng-col-title { min-width: 0; }
    .page-genres-detail .sng-col-album,
    .page-genres-detail .sng-col-plays { display: none; }
    .page-genres-detail .sng-col-artist { width: 70px; }
    .page-genres-detail .sng-row td,
    .page-genres-detail .sng-table__head tr th { padding-left: 7px; padding-right: 7px; }
    .page-genres-detail .sng-table__head th:first-child { padding-left: 8px; }
    .page-genres-detail .sng-col-num { width: 36px; padding-left: 4px !important; padding-right: 4px !important; }
    .page-genres-detail .sng-col-dur { width: 48px; }
        .page-genres-detail .sng-col-play { width: 98px; padding-left: 2px !important; padding-right: 2px !important; }
    .page-genres-detail .sng-title-cell { gap: 7px; }
    .page-genres-detail .sng-art-wrap { width: 34px; height: 34px; }
}

@media (max-width: 520px) {
    .page-genres-detail .sng-col-artist,
    .page-genres-detail .sng-col-dur { display: none; }
    .page-genres-detail .sng-col-title { width: auto; }
    .page-genres-detail .sng-row td { font-size: 12px; }
}
@media (max-width: 700px) {
    .sng-hero__body { padding: 28px 16px 48px; flex-direction: column; align-items: flex-start; }
    .sng-hero__stats { width: 100%; justify-content: space-around; padding: 14px 16px; }
    .sng-stat { padding: 0 12px; }
    .sng-col-genre  { display: none; }
    .sng-col-artist { display: none; }
    .sng-filter-bar { margin: 0 -14px; padding: 12px 14px 0; }
    .sng-searchbox  { max-width: 100%; }
    .sng-sort-wrap  { flex-shrink: 0; }
    .sng-results-count { display: none; }
}

/* =============================================================================
   SONG DETAIL PAGE  (.sdet-*)
============================================================================= */

/* Remove default content padding — hero extends wall-to-wall */
.sdet-content { padding: 0 !important; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.sdet-hero {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(124,58,237,.22);
    margin: 0 0 20px;
}
.sdet-hero__backdrops {
    position: absolute;
    inset: 0;
}
.sdet-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(28px) brightness(.55) saturate(1.4);
    transform: scale(1.08);
}
.sdet-hero__backdrops .sdet-hero__bg {
    opacity: 0;
    filter: blur(18px) brightness(.42) saturate(.9);
    transform: scale(1.08);
    transition: opacity 1.6s ease, transform 7s ease;
}
.sdet-hero__backdrops .sdet-hero__bg.is-active {
    opacity: .3;
    transform: scale(1.02);
}
.sdet-hero__bg--fallback {
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 60%, #0ea5e9 100%);
    filter: none;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .sdet-hero__backdrops .sdet-hero__bg {
        transition: none;
    }
}
.sdet-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(0,0,0,.30) 0%,
        rgba(0,0,0,.52) 60%,
        rgba(0,0,0,.68) 100%);
}
.sdet-hero--no-art .sdet-hero__scrim {
    background: linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,.38) 100%);
}
.sdet-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
}

/* ── Cover art ───────────────────────────────────────────────────────────── */
.sdet-cover-wrap {
    position: relative;
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.sdet-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    display: block;
}
.sdet-cover--fallback {
    background: rgba(255,255,255,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.45);
    object-fit: initial;
}
.sdet-cover--img {
    object-fit: cover;
    z-index: 1;
}
.sdet-cover__spin-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--color-brand);
    opacity: 0;
    transition: opacity var(--transition-base);
}
.sdet-cover__spin-ring--active {
    opacity: 1;
    animation: sdet-spin 1.2s linear infinite;
}
@keyframes sdet-spin { to { transform: rotate(360deg); } }

/* ── Song identity ───────────────────────────────────────────────────────── */
.sdet-info {
    flex: 1;
    min-width: 0;
    color: #fff;
}
.sdet-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: rgba(255,255,255,.5);
    margin-bottom: 3px;
}
.sdet-breadcrumb__link {
    color: rgba(255,255,255,.5);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.sdet-breadcrumb__link:hover { color: rgba(255,255,255,.9); }

.sdet-info__type {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
    margin-bottom: 3px;
}
.sdet-info__title {
    font-size: clamp(16px, 2.5vw, 28px);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Artist row */
.sdet-info__artist { margin-bottom: 4px; }
.sdet-artist-link,
.sdet-artist-plain {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.9);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.sdet-artist-link:hover { color: #fff; }
.sdet-artist-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.2);
}
.sdet-artist-init {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}
.sdet-verified {
    color: #1da1f2;
    flex-shrink: 0;
}

/* Meta pills */
.sdet-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
}
.sdet-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--radius-pill);
    padding: 3px 9px;
    font-size: 10px;
    font-weight: 500;
    color: rgba(255,255,255,.85);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.sdet-meta-pill:hover { background: rgba(255,255,255,.22); color: #fff; }
.sdet-meta-pill--genre { background: rgba(0,123,255,.22); border-color: rgba(0,123,255,.35); }
.sdet-meta-pill--album { background: rgba(255,255,255,.1); }

/* Stats */
.sdet-stats-row {
    display: flex;
    gap: 14px;
    margin-bottom: 8px;
}
.sdet-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: rgba(255,255,255,.55);
}

/* Action buttons */
.sdet-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sdet-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 60%, #0ea5e9 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: 0 4px 14px rgba(124,58,237,.45);
}
.sdet-play-btn:hover  { opacity: .88; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(124,58,237,.55); }
.sdet-play-btn:active { transform: translateY(0); }
.sdet-play-btn--playing { opacity: .88; }

.sdet-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--radius-pill);
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.sdet-back-btn:hover { background: rgba(255,255,255,.18); color: #fff; }

.sdet-like-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.sdet-like-btn:hover { background: rgba(255,255,255,.2); color: #fff; }

.sdet-more-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.sdet-more-btn:hover,
.sdet-more-btn:focus-visible,
.sdet-more-btn[aria-expanded="true"] {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.34);
    color: #fff;
    outline: none;
}
.sdet-more-btn:active { transform: scale(.96); }
.sdet-track-menu { position: fixed; z-index: 9500; }

/* ── Sections below hero ─────────────────────────────────────────────────── */
.sdet-section {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 16px;
}

.sdet-section--more { border-radius: 4px; }

.sdet-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 18px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.sdet-section-title__link {
    color: var(--color-brand);
    text-decoration: none;
}
.sdet-section-title__link:hover { text-decoration: underline; }

.sdet-description {
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text-muted);
    max-width: 680px;
    white-space: pre-wrap;
}

/* ── More-by-artist list ─────────────────────────────────────────────────── */
.sdet-more-list { display: flex; flex-direction: column; gap: 2px; }

.sdet-more-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.sdet-more-row:hover { background: var(--color-surface-alt); }
.sdet-more-row--playing { background: var(--color-brand-light); }
.sdet-more-row--current { background: var(--color-brand-light); }

.sdet-more-art-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #eeeff5;
}
.sdet-more-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sdet-more-art--fallback {
    background: rgba(124,58,237,.10);
    color: #7c3aed;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sdet-more-art__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.sdet-more-art-wrap:hover .sdet-more-art__overlay { opacity: 1; }

.sdet-more-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sdet-more-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition-fast);
}
.sdet-more-title:hover { color: var(--color-brand); }
.sdet-more-row--playing .sdet-more-title,
.sdet-more-row--current .sdet-more-title { color: var(--color-brand); }

.sdet-more-meta {
    font-size: 11px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
.sdet-more-dot { color: var(--color-border); }

.sdet-more-plays {
    font-size: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
    min-width: 48px;
    text-align: right;
}
.sdet-more-play-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-brand);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    cursor: pointer;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    flex-shrink: 0;
}
.sdet-more-row:hover .sdet-more-play-btn { opacity: 1; }
.sdet-more-play-btn:hover { transform: scale(1.1); }
.sdet-more-add-pl {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: none;
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-muted);
    opacity: 0;
    transition: opacity var(--transition-fast), color .12s, background .12s;
    flex-shrink: 0;
}
.sdet-more-row:hover .sdet-more-add-pl { opacity: 1; }
.sdet-more-add-pl:hover { color: var(--color-brand); background: var(--color-brand-light); }

/* Load More button */
.sdet-load-more-wrap {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
}
.sdet-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #eeeff5;
    border: 1px solid #d8daeb;
    border-radius: 20px;
    padding: 8px 22px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.sdet-load-more-btn:hover { background: #e0e2ef; border-color: #b8bcd8; color: #111; }
.sdet-load-more-btn:disabled { opacity: .5; cursor: not-allowed; }
.sdet-load-more-btn--hidden { display: none; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
    .sdet-hero { border-radius: 4px; }
    .sdet-hero__inner { padding: 12px 14px; gap: 12px; }
    .sdet-cover-wrap { width: 80px; height: 80px; }
    .sdet-info__title { font-size: 26px; }
    .sdet-section   { padding: 16px; }
    .sdet-more-plays { display: none; }
}
@media (max-width: 480px) {
    .sdet-hero__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 28px 16px 24px;
        gap: 16px;
    }
    .sdet-cover-wrap { width: 160px; height: 160px; }
    .sdet-info__title { white-space: normal; font-size: 24px; }
    .sdet-meta-row  { justify-content: center; }
    .sdet-stats-row { justify-content: center; }
    .sdet-actions   { justify-content: center; flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════════════════════════
   GENRES LISTING PAGE  (.gnr-*)
════════════════════════════════════════════════════════════════════════════ */
.gnr { padding: 0 0 40px; }

/* Hero */
.gnr-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #3b0764 0%, #1e3a8a 55%, #0c4a6e 100%);
    padding-bottom: 0;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 18px;
    margin: 0 0 20px;
    box-shadow: 0 8px 40px rgba(59,7,100,.28);
}
.gnr-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.12) 0%, rgba(0,0,0,.5) 100%);
    pointer-events: none;
    z-index: 0;
}
.gnr-hero__waves {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    line-height: 0;
    z-index: 1;
}
.gnr-hero__wave { fill: rgba(255,255,255,.08); }
.gnr-hero__wave--1 { opacity: 1; }
.gnr-hero__wave--2 { opacity: 1; fill: rgba(255,255,255,.05); }
.gnr-hero__body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 28px 32px 32px;
    gap: 24px;
}
.gnr-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,.15);
    color: rgba(255,255,255,.9);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}
.gnr-hero__title {
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 900;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.05;
    letter-spacing: -.03em;
    text-shadow: 0 2px 16px rgba(0,0,0,.3);
}
.gnr-hero__sub {
    font-size: 14px;
    color: rgba(255,255,255,.75);
    margin: 0;
    max-width: 460px;
}
.gnr-hero__stats {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 16px;
    padding: 14px 24px;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.gnr-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 18px;
    gap: 3px;
}
.gnr-stat__value {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    letter-spacing: -.03em;
}
.gnr-stat__label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.6);
    font-weight: 700;
}

/* Genre card grid */
.gnr-section {
    background: var(--color-surface, #fff);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    gap: 0;
}
.gnr-section .rdp-section__hd {
    padding: 6px 18px;
}
.gnr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 14px;
    padding: 16px 20px 20px;
}
.gnr-empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--color-muted, #71717a);
}
.gnr-empty svg { opacity: .3; margin-bottom: 12px; display: block; margin-inline: auto; }

.gnr-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    aspect-ratio: 3 / 2;
    border-radius: 16px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.gnr-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 14px 36px rgba(0,0,0,.32); }
.gnr-card:active { transform: translateY(-1px) scale(1); }

/* 8-colour accent palette — unified blue */
.gnr-card--c0,
.gnr-card--c1,
.gnr-card--c2,
.gnr-card--c3,
.gnr-card--c4,
.gnr-card--c5,
.gnr-card--c6,
.gnr-card--c7 { background: linear-gradient(135deg, #0891b2, #2563eb); }

.gnr-card__icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.9);
    flex-shrink: 0;
}
.gnr-card__body { flex: 1; min-width: 0; } /* legacy */
.gnr-card__info { display: flex; flex-direction: column; gap: 3px; }
.gnr-card__name {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.15;
    letter-spacing: -.02em;
    text-shadow: 0 1px 4px rgba(0,0,0,.2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gnr-card__desc { display: none; }
.gnr-card__count {
    font-size: 11px;
    color: rgba(255,255,255,.65);
    margin: 0;
    font-weight: 600;
}
.gnr-card__arrow { display: none; }
.gnr-card:hover .gnr-card__arrow { display: none; }

@media (max-width: 680px) {
    .gnr-hero__body { flex-direction: column; align-items: flex-start; padding: 24px 20px 28px; }
    .gnr-hero__title { font-size: 26px; }
    .gnr-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 12px 14px 14px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   GENRE DETAIL PAGE  (.gdet-*)
════════════════════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.gdet-hero {
    position: relative;
    background: linear-gradient(135deg, #3b0764 0%, #1e3a8a 55%, #0c4a6e 100%);
    margin: 0 0 16px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(59,7,100,.25);
}
.gdet-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,.35) 100%);
    pointer-events: none;
}
.gdet-hero__waves {
    position: absolute; inset: 0; pointer-events: none;
}
.gdet-hero__waves svg { width: 100%; height: 100%; }
.gdet-wave--1 { fill: rgba(255,255,255,.07); }
.gdet-wave--2 { fill: rgba(255,255,255,.11); }

.gdet-hero__body {
    position: relative; z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 24px 28px 28px;
}
.gdet-hero__left { flex: 1; min-width: 0; }

/* Breadcrumb */
.gdet-breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: rgba(255,255,255,.6);
    margin-bottom: 10px;
}
.gdet-breadcrumb__link {
    color: rgba(255,255,255,.75); text-decoration: none;
    transition: color .15s;
}
.gdet-breadcrumb__link:hover { color: #fff; }

/* Genre badge */
.gdet-hero__badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; letter-spacing: .12em;
    color: rgba(255,255,255,.75);
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--radius-pill);
    padding: 4px 10px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Title & description */
.gdet-info__title {
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 900; color: #fff;
    margin: 0 0 8px; line-height: 1.05;
    letter-spacing: -.03em;
    text-shadow: 0 2px 16px rgba(0,0,0,.25);
}
.gdet-info__desc {
    font-size: 13px; color: rgba(255,255,255,.68);
    margin: 0 0 16px; max-width: 500px; line-height: 1.55;
}

/* Back button */
.gdet-back-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 99px;
    background: rgba(255,255,255,.14);
    border: 1.5px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.9); text-decoration: none;
    font-size: 13px; font-weight: 600;
    transition: background .15s, border-color .15s;
    backdrop-filter: blur(4px);
}
.gdet-back-btn:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.4); color: #fff; }

/* Stats glass panel (right side) */
.gdet-hero__stats {
    display: flex; align-items: center;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 16px; padding: 14px 24px;
    flex-shrink: 0; backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.gdet-hstat { display: flex; flex-direction: column; align-items: center; padding: 0 18px; gap: 3px; }
.gdet-hstat__value { font-size: 26px; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -.03em; }
.gdet-hstat__label { font-size: 9px; color: rgba(255,255,255,.6); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.gdet-hstat__divider { width: 1px; height: 28px; background: rgba(255,255,255,.2); flex-shrink: 0; }

/* ── Filter bar ────────────────────────────────────────────────────────────── */
.gdet-filter-bar {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    margin: 0 0 16px;
    padding: 10px 16px;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.gdet-filter-bar__row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.gdet-searchbox {
    position: relative; flex: 1; min-width: 220px; max-width: 480px;
}
.gdet-searchbox__icon {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--color-text-muted); pointer-events: none;
}
.gdet-searchbox__input {
    width: 100%;
    background: #f5f5f5;
    border: none;
    border-radius: var(--radius-pill);
    padding: 9px 36px 9px 38px;
    font-size: 13px; color: var(--color-text);
    outline: none;
    transition: background .15s;
}
.gdet-searchbox__input::placeholder { color: var(--color-text-muted); }
.gdet-searchbox__input:focus { background: #eef2ff; }
.gdet-searchbox__clear {
    position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 2px;
    color: var(--color-text-muted); display: flex; align-items: center;
    border-radius: 50%; transition: color .15s;
}
.gdet-searchbox__clear:hover { color: #7c3aed; }
.gdet-results-count {
    font-size: 12px; font-weight: 700;
    color: var(--color-text-muted); white-space: nowrap; margin-left: auto;
    background: #f5f3ff; border: 1px solid #ede9fe;
    border-radius: 99px; padding: 3px 12px;
}

@media (max-width: 680px) {
    .gdet-hero__body { padding: 28px 16px 24px; flex-direction: column; align-items: flex-start; }
    .gdet-hero__stats { width: 100%; justify-content: space-around; padding: 14px 16px; }
    .gdet-hstat { padding: 0 12px; }
    .gdet-info__title { font-size: 28px; }
}

/* ═══════════════════════════════════════════════════════════════
   PLAYLIST DETAIL  (pdet-*)
═══════════════════════════════════════════════════════════════ */
.pdet-content { padding: 20px 24px 0 !important; }

/* ── Hero ── */
.pdet-hero {
    position: relative;
    min-height: 220px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(135deg, #3b0764 0%, #1e3a8a 55%, #0c4a6e 100%);
    border-radius: 4px;
    margin-bottom: 16px;
    box-shadow: 0 8px 40px rgba(59,7,100,.28);
}
.pdet-hero__bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(36px) brightness(.22) saturate(1.4);
    transform: scale(1.14);
    z-index: 0;
}
/* Fallback colour slots — let parent gradient show; disable filter that would darken it */
.pdet-bg--c0,
.pdet-bg--c1,
.pdet-bg--c2,
.pdet-bg--c3,
.pdet-bg--c4,
.pdet-bg--c5,
.pdet-bg--c6,
.pdet-bg--c7 { background: transparent; filter: none; transform: none; }

.pdet-hero__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,.55) 100%);
    z-index: 1;
}
.pdet-hero__inner {
    position: relative; z-index: 2;
    display: flex; align-items: flex-end; gap: 20px;
    padding: 22px 28px 20px;
    width: 100%;
}

/* Gradient cover tile */
.pdet-cover-wrap { flex-shrink: 0; }
.pdet-cover {
    width: 148px; height: 148px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.3);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.pdet-cover__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Info block */
.pdet-info { color: #fff; flex: 1; min-width: 0; }
.pdet-breadcrumb {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px;
    color: rgba(255,255,255,.45);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.pdet-breadcrumb__link {
    color: rgba(255,255,255,.6);
    text-decoration: none;
    transition: color .15s;
}
.pdet-breadcrumb__link:hover { color: #fff; }
.pdet-info__type {
    font-size: 9.5px; font-weight: 800; letter-spacing: .18em;
    color: rgba(255,255,255,.45);
    margin: 0 0 3px;
    text-transform: uppercase;
}
.pdet-info__title {
    font-size: clamp(20px, 3.2vw, 36px);
    font-weight: 800;
    line-height: 1.08;
    margin: 0 0 6px;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: -.01em;
}
.pdet-info__desc {
    font-size: 12.5px;
    color: rgba(255,255,255,.5);
    margin: 0 0 8px;
    max-width: 520px;
    line-height: 1.5;
}
.pdet-info__meta {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px;
    color: rgba(255,255,255,.5);
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.pdet-owner {
    display: inline-flex; align-items: center; gap: 4px;
    color: rgba(255,255,255,.72);
    font-weight: 500;
}
.pdet-meta-dot { opacity: .35; }

/* Action buttons */
.pdet-actions {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.pdet-play-all-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 24px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #fff; border: none;
    font-size: 13px; font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    transition: opacity .15s, transform .12s, box-shadow .15s;
    box-shadow: 0 4px 18px rgba(124,58,237,.45);
}
.pdet-play-all-btn:hover {
    opacity: .92;
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(124,58,237,.6);
}
.pdet-edit-btn, .pdet-delete-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255,255,255,.22);
    color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(6px);
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}
.pdet-edit-btn:hover   { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.15); }
.pdet-delete-btn:hover { border-color: rgba(239,68,68,.5); color: #ef4444; background: rgba(239,68,68,.08); }

/* ── Track table ── */
.pdet-tracks-section {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 24px;
}
.pdet-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; padding: 60px 20px;
    color: var(--color-text-muted);
}
.pdet-empty__title { font-size: 15px; font-weight: 600; margin: 0; }
.pdet-empty__sub   { font-size: 13px; margin: 0; }

.pdet-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.pdet-table__head th {
    padding: 12px 12px 10px;
    text-align: left;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--color-text-muted);
    background: rgba(124,58,237,.04);
    border-bottom: 1px solid var(--color-border);
    user-select: none;
}
.pdet-row {
    border-bottom: 1px solid var(--color-border);
    transition: background .12s;
    cursor: default;
}
.pdet-row:hover { background: rgba(124,58,237,.05); }
.pdet-row--current .pdet-title-text { color: #7c3aed !important; }
.pdet-row td { padding: 10px 12px; vertical-align: middle; }

/* # column */
.pdet-col-num {
    width: 36px; text-align: center;
    color: var(--color-text-muted); font-size: 12px;
    position: relative;
}
.pdet-row__num { display: block; }
.pdet-row__play-inline {
    display: none;
    position: absolute; inset: 0; margin: auto;
    width: 22px; height: 22px;
    border: none; background: none;
    color: var(--color-text);
    cursor: pointer;
    align-items: center; justify-content: center;
}
.pdet-row:hover .pdet-row__num        { visibility: hidden; }
.pdet-row:hover .pdet-row__play-inline { display: flex; }
.pdet-row--playing .pdet-row__num { visibility: hidden; }
.pdet-row--playing .pdet-row__play-inline {
    display: flex;
    color: var(--color-brand);
}
.pdet-row--current .pdet-row__num     { color: var(--color-brand); }

/* Title cell */
.pdet-col-title { min-width: 180px; }
.pdet-title-cell { display: flex; align-items: center; gap: 10px; }
.pdet-art-wrap {
    flex-shrink: 0; width: 38px; height: 38px;
    border-radius: 4px; overflow: hidden;
    display: block; text-decoration: none;
}
.pdet-art {
    width: 38px; height: 38px;
    object-fit: cover; display: block;
}
.pdet-art--fallback {
    width: 38px; height: 38px;
    background: var(--color-surface-raised, rgba(255,255,255,.06));
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-muted);
}
.pdet-title-info { min-width: 0; }
.pdet-title-text {
    display: block; font-weight: 600;
    color: var(--color-text); text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .15s;
}
.pdet-title-text:hover { color: #7c3aed; }
.pdet-title-album {
    display: block; font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 1px;
}

/* Other columns */
.pdet-col-artist { min-width: 100px; }
.pdet-artist-link {
    color: var(--color-text); text-decoration: none;
    transition: color .15s;
}
.pdet-artist-link:hover { color: #7c3aed; }
.pdet-col-genre { white-space: nowrap; }
.pdet-col-dur {
    font-variant-numeric: tabular-nums;
    font-size: 12px; text-align: right; white-space: nowrap;
}
.pdet-muted { color: var(--color-text-muted); }
.pdet-col-actions { width: 44px; text-align: center; }
.pdet-more-btn {
    width: 28px; height: 28px; border: none;
    background: transparent; border-radius: 50%;
    color: var(--color-text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: 0;
    transition: opacity .15s, color .15s, background .15s, transform .15s;
}
.pdet-row:hover .pdet-more-btn,
.pdet-more-btn:focus-visible,
.pdet-more-btn[aria-expanded="true"] { opacity: 1; }
.pdet-more-btn:hover,
.pdet-more-btn:focus-visible {
    color: #7c3aed;
    background: rgba(124,58,237,.10);
    outline: none;
}
.pdet-more-btn:active { transform: scale(.94); }
.pdet-track-menu { position: fixed; z-index: 9500; }
.song-ctx-menu__item--danger { color: #dc2626; }
.song-ctx-menu__item--danger:hover { background: rgba(220,38,38,.10); color: #b91c1c; }

.pdet-col-remove { width: 36px; text-align: center; }
.pdet-remove-btn {
    width: 28px; height: 28px; border: none;
    background: none; border-radius: 50%;
    color: var(--color-text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: 0;
    transition: opacity .15s, color .15s, background .15s;
}
.pdet-row:hover .pdet-remove-btn { opacity: 1; }
.pdet-remove-btn:hover { color: #ef4444; background: rgba(239,68,68,.1); }

/* ── Edit modal ── */
.pdet-modal {
    display: none;
    position: fixed; inset: 0;
    z-index: 9000;
    align-items: center; justify-content: center;
}
.pdet-modal.is-open { display: flex; }
.pdet-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px);
}
.pdet-modal__box {
    position: relative; z-index: 1;
    background: var(--color-surface, #fff);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0,0,0,.35);
    width: min(440px, calc(100vw - 32px));
    overflow: hidden;
}
.pdet-modal__header {
    display: flex; align-items: center;
    padding: 20px 20px 0;
    margin-bottom: 16px;
}
.pdet-modal__title {
    font-size: 17px; font-weight: 700;
    color: var(--color-text); flex: 1; margin: 0;
}
.pdet-modal__close {
    background: none; border: none; cursor: pointer;
    color: var(--color-text-muted); padding: 4px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    transition: color .15s, background .15s;
}
.pdet-modal__close:hover { color: var(--color-text); background: var(--color-border); }
.pdet-modal__body { padding: 0 20px 16px; display: flex; flex-direction: column; gap: 14px; }
.pdet-modal__footer {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 14px 20px;
    border-top: 1px solid var(--color-border);
}
.pdet-field { display: flex; flex-direction: column; gap: 5px; }
.pdet-field__label { font-size: 12px; font-weight: 700; color: var(--color-text-muted); letter-spacing: .05em; text-transform: uppercase; }
.pdet-field__input {
    padding: 9px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text); font-size: 14px;
    outline: none; transition: border-color .15s;
    font-family: inherit;
}
.pdet-field__input:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.pdet-field__textarea { resize: vertical; min-height: 70px; }
.pdet-field__err { font-size: 12px; color: #ef4444; margin: 0; }
.pdet-file-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 5px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg, #f8fafc);
}
.pdet-file-picker__input {
    position: absolute;
    width: 1px !important;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%);
}
.pdet-file-picker__button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 7px 10px;
    border: 1px solid #6d28d9;
    border-radius: 3px;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
}
.pdet-file-picker__button:hover { background: linear-gradient(135deg, #6d28d9, #1d4ed8); border-color: #5b21b6; transform: translateY(-1px); }
.pdet-file-picker__button:active { transform: translateY(0); }
.pdet-file-picker__input:focus-visible + .pdet-file-picker__button { outline: 3px solid rgba(124,58,237,.25); outline-offset: 2px; }
.pdet-file-picker__name { min-width: 0; overflow: hidden; color: var(--color-text-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pdet-field__check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text); cursor: pointer; }
.pdet-field__check input { accent-color: var(--color-brand); width: 15px; height: 15px; cursor: pointer; }
.pdet-modal__cancel {
    padding: 8px 18px; border-radius: 30px;
    border: 1px solid var(--color-border);
    background: none; color: var(--color-text-muted);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.pdet-modal__cancel:hover { border-color: var(--color-text-muted); color: var(--color-text); }
.pdet-modal__save {
    padding: 8px 22px; border-radius: 30px;
    border: none; background: var(--color-brand);
    color: #fff; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: opacity .15s;
}
.pdet-modal__save:hover { opacity: .88; }
.pdet-modal__save:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 680px) {
    .pdet-hero__inner { flex-direction: column; align-items: flex-start; padding: 18px 16px 16px; gap: 12px; }
    .pdet-cover { width: 90px; height: 90px; }
    .pdet-info__title { white-space: normal; }
    .pdet-col-artist, .pdet-col-genre { display: none; }
}


/* =============================================================================
   SHARE & EMBED FEATURE  (theme: #003366 navy)
   .share-btn (trigger), .sh-overlay, .sh-modal, .sh-* components
============================================================================= */

/* ── Design tokens (scoped to share components) ──────────────────────────── */
:root {
    --sh-navy:        #7c3aed;
    --sh-navy-mid:    #2563eb;
    --sh-navy-light:  #0ea5e9;
    --sh-accent:      rgba(255,255,255,.9);
    --sh-gold:        #f0c040;
    --sh-surface:     #ffffff;
    --sh-surface-2:   #f5f3ff;
    --sh-border:      #e4daf8;
    --sh-text:        #1a1040;
    --sh-text-muted:  #7060a0;
    --sh-radius:      8px;
}

/* ── Trigger button ──────────────────────────────────────────────────────── */
.share-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(0,51,102,.07);
    border: 1px solid rgba(0,51,102,.18);
    color: var(--sh-navy);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, transform .12s, border-color .15s, box-shadow .15s;
}
.share-btn:hover {
    background: rgba(0,51,102,.14);
    border-color: rgba(0,51,102,.38);
    box-shadow: 0 2px 10px rgba(0,51,102,.18);
    transform: scale(1.1);
}
.share-btn:active { transform: scale(.95); }

/* In song-list rows: hidden until hover */
.sng-actions-cell {
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.sng-actions-cell .share-btn {
    opacity: 0;
    transition: opacity .15s, background .15s, transform .12s;
}
.sng-row:hover .sng-actions-cell .share-btn { opacity: 1; }

/* Expand the play column to fit both buttons */
.sng-col-play { width: 76px; }

/* ── Detail page share button (pill on dark hero) ────────────────────────── */
.sdet-share-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.9);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--radius-pill);
    padding: 11px 20px;
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    width: auto; height: auto;
}
.sdet-share-btn:hover {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.45);
    color: #fff;
}

/* ── Modal overlay ───────────────────────────────────────────────────────── */
.sh-overlay {
    position: fixed; inset: 0; z-index: 9900;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(2, 8, 23, .52);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}
.sh-overlay.sh-overlay--open {
    opacity: 1;
    pointer-events: auto;
}
body.sh-modal-open { overflow: hidden; }

/* ── Modal card ──────────────────────────────────────────────────────────── */
.sh-modal {
    width: min(520px, 100%);
    max-height: min(760px, calc(100vh - 40px));
    border-radius: 20px;
    overflow: hidden;
    overflow-y: auto;
    background: var(--sh-surface);
    border: 1px solid var(--sh-border);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.55),
        0 10px 30px rgba(2,8,23,.20),
        0 36px 90px rgba(2,8,23,.34);
    transform: translateY(18px) scale(.96);
    opacity: 0;
    transition: transform .26s cubic-bezier(.34,1.4,.64,1), opacity .2s ease;
    scrollbar-width: thin;
    scrollbar-color: #d8ddeb transparent;
}
.sh-overlay.sh-overlay--open .sh-modal {
    transform: none;
    opacity: 1;
}

/* ── Header — navy gradient banner ──────────────────────────────────────── */
.sh-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 22px 18px;
    background:
        radial-gradient(circle at 88% -20%, rgba(126,200,255,.30), transparent 38%),
        linear-gradient(135deg, #24105d 0%, var(--sh-navy) 48%, var(--sh-navy-mid) 100%);
    position: relative;
    overflow: hidden;
}
/* Subtle radial glow top-right */
.sh-header::after {
    content: '';
    position: absolute; top: -30px; right: -30px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(77,159,255,.28) 0%, transparent 70%);
    pointer-events: none;
}
.sh-header__left {
    display: flex; align-items: center; gap: 9px; position: relative; z-index: 1;
}
.sh-header__icon { color: var(--sh-accent); }
.sh-header__title {
    font-size: 14px; font-weight: 700;
    color: #fff;
    letter-spacing: .02em;
}
.sh-close {
    position: relative; z-index: 1;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.75);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.sh-close:hover { background: rgba(255,255,255,.22); color: #fff; }

/* ── Track preview strip ─────────────────────────────────────────────────── */
.sh-track-preview {
    display: flex; align-items: center; gap: 13px;
    padding: 16px 22px 15px;
    background: linear-gradient(to bottom, rgba(124,58,237,.04) 0%, transparent 100%);
    border-bottom: 1px solid var(--sh-border);
}
.sh-track-art {
    width: 52px; height: 52px;
    border-radius: 11px;
    flex-shrink: 0; overflow: hidden;
    background: var(--sh-surface-2);
    box-shadow: 0 2px 8px rgba(0,51,102,.15);
}
.sh-track-art__img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.sh-track-art__fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--sh-text-muted);
}
.sh-track-info { flex: 1; min-width: 0; }
.sh-track-info__title {
    font-size: 13px; font-weight: 700;
    color: var(--sh-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sh-track-info__artist {
    font-size: 11px; color: var(--sh-text-muted); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-weight: 500;
}

/* ── Tab bar ─────────────────────────────────────────────────────────────── */
.sh-tabs {
    display: flex;
    padding: 0 22px;
    border-bottom: 1px solid var(--sh-border);
    background: var(--sh-surface);
}
.sh-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 2px;
    font-size: 12px; font-weight: 700;
    letter-spacing: .01em;
    color: var(--sh-text-muted);
    background: none; border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer; margin-right: 22px;
    transition: color .15s, border-color .15s;
}
.sh-tab:last-child { margin-right: 0; }
.sh-tab--active { color: var(--sh-navy); border-bottom-color: var(--sh-navy); }
.sh-tab:not(.sh-tab--active):hover { color: var(--sh-text); }
.sh-tab svg { opacity: .75; }
.sh-tab--active svg { opacity: 1; }

/* ── Tab panels ──────────────────────────────────────────────────────────── */
.sh-panel { display: none; padding: 20px 22px 24px; }
.sh-panel--active { display: block; }

/* ── URL row ─────────────────────────────────────────────────────────────── */
.sh-url-row { display: flex; align-items: center; gap: 8px; }
.sh-url-input {
    flex: 1; min-width: 0;
    padding: 10px 13px;
    border: 1.5px solid var(--sh-border);
    border-radius: 10px;
    font-size: 12px;
    color: var(--sh-text-muted);
    background: var(--sh-surface-2);
    outline: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}
.sh-url-input:focus { border-color: var(--sh-navy-mid); color: var(--sh-text); background: #fff; }
.sh-copy-btn {
    flex-shrink: 0;
    padding: 10px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--sh-navy), var(--sh-navy-mid));
    color: #fff;
    border: none; cursor: pointer;
    font-size: 12px; font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(124,58,237,.28);
    transition: background .15s, transform .1s, box-shadow .15s;
}
.sh-copy-btn:hover { background: linear-gradient(135deg, #6d28d9, #1d4ed8); box-shadow: 0 4px 14px rgba(124,58,237,.38); }
.sh-copy-btn:active { transform: scale(.97); }

/* ── Rule divider ────────────────────────────────────────────────────────── */
.sh-rule {
    display: flex; align-items: center; gap: 10px;
    margin: 14px 0 12px;
    color: var(--sh-text-muted); font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .07em;
}
.sh-rule::before, .sh-rule::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(to right, transparent, var(--sh-border), transparent);
}

/* ── Social buttons ──────────────────────────────────────────────────────── */
.sh-socials { display: flex; gap: 8px; }
.sh-social {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 42px;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1.5px solid var(--sh-border);
    background: var(--sh-surface-2);
    color: var(--sh-text);
    font-size: 12px; font-weight: 600;
    text-decoration: none; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.sh-social:hover {
    border-color: var(--sh-navy);
    background: rgba(124,58,237,.06);
    color: var(--sh-navy);
    box-shadow: 0 2px 8px rgba(124,58,237,.1);
}
.sh-social--x:hover       { background: rgba(29,155,240,.07); border-color: #1d9bf0; color: #1d9bf0; }
.sh-social--whatsapp:hover { background: rgba(37,211,102,.07); border-color: #25d366; color: #25d366; }
.sh-social--copy:hover     { background: rgba(124,58,237,.06);  border-color: var(--sh-navy); color: var(--sh-navy); }

/* ── Embed panel rows ────────────────────────────────────────────────────── */
.sh-row { display: flex; align-items: center; gap: 12px; }
.sh-row--label { margin-bottom: 12px; }
.sh-label {
    font-size: 10px; font-weight: 800;
    color: var(--sh-text-muted);
    text-transform: uppercase; letter-spacing: .09em;
    white-space: nowrap;
}
.sh-sizes { display: flex; gap: 6px; }
.sh-size-btn {
    padding: 6px 14px;
    border-radius: 9px;
    background: var(--sh-surface-2);
    border: 1.5px solid var(--sh-border);
    color: var(--sh-text-muted);
    font-size: 11px; font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.sh-size-btn--active {
    background: linear-gradient(135deg, var(--sh-navy), var(--sh-navy-mid));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(124,58,237,.28);
}
.sh-size-btn:not(.sh-size-btn--active):hover {
    border-color: var(--sh-navy-mid);
    color: var(--sh-navy);
    background: rgba(124,58,237,.05);
}

/* ── Embed code block ────────────────────────────────────────────────────── */
.sh-code-wrap { position: relative; margin-top: 0; }
.sh-code {
    display: block;
    width: 100%;
    padding: 12px 52px 12px 14px;
    border: 1.5px solid var(--sh-border);
    border-radius: 11px;
    background: #f4f7fc;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px; line-height: 1.7;
    color: var(--sh-navy);
    resize: none; outline: none;
    height: 172px;
    transition: border-color .15s;
}
.sh-code:focus { border-color: var(--sh-navy-mid); background: #fff; }
.sh-code-copy {
    position: absolute; top: 9px; right: 9px;
    padding: 5px 11px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--sh-navy), var(--sh-navy-mid)); color: #fff;
    border: none; font-size: 10px; font-weight: 800;
    letter-spacing: .03em;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(124,58,237,.25);
    transition: background .15s;
}
.sh-code-copy:hover { background: linear-gradient(135deg, #6d28d9, #1d4ed8); }

/* ── Embed preview ───────────────────────────────────────────────────────── */
.sh-preview-section { margin-top: 14px; }
.sh-preview-label {
    font-size: 10px; font-weight: 800;
    color: var(--sh-text-muted);
    text-transform: uppercase; letter-spacing: .09em;
    margin-bottom: 8px;
    display: block;
}
.sh-preview-frame {
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid var(--sh-border);
    background: var(--sh-navy);
    box-shadow: 0 4px 18px rgba(124,58,237,.18);
    transition: height .2s ease;
}
.sh-preview-frame iframe {
    display: block; width: 100%; border: none;
    transition: height .2s ease;
}

/* ── Responsive — bottom sheet on mobile ─────────────────────────────────── */
@media (max-width: 540px) {
    .sh-overlay { align-items: flex-end; padding: 0; }
    .sh-modal {
        width: 100%;
        max-height: min(88vh, 760px);
        border-radius: 24px 24px 0 0;
    }
    .sh-header { padding: 18px 18px 16px; }
    .sh-track-preview { padding-inline: 18px; }
    .sh-tabs { padding-inline: 18px; }
    .sh-panel { padding: 18px 18px 24px; }
    .sh-socials { display: grid; grid-template-columns: repeat(3, 1fr); }
    .sh-social { min-width: 0; }
    .sh-social span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sh-row--label { align-items: flex-start; flex-direction: column; }
}

/* ── Colour picker row ────────────────────────────────────────────────────── */
.sh-row--color { flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.sh-color-dots { display: flex; gap: 6px; align-items: center; }
.sh-color-dot {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--dot-c, #003366);
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    outline: none;
    transition: transform .12s, border-color .12s;
}
.sh-color-dot:hover { transform: scale(1.15); }
.sh-color-dot--active {
    border-color: #fff;
    box-shadow: 0 0 0 2px var(--sh-navy);
    transform: scale(1.1);
}
.sh-color-label {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--sh-surface-2);
    border: 1.5px solid var(--sh-border);
    cursor: pointer;
    color: var(--sh-text-muted);
    transition: border-color .12s, color .12s;
    position: relative;
    overflow: hidden;
}
.sh-color-label:hover { border-color: var(--sh-navy-mid); color: var(--sh-navy); }
.sh-color-input {
    position: absolute; opacity: 0;
    width: 100%; height: 100%;
    top: 0; left: 0;
    cursor: pointer;
    padding: 0; margin: 0; border: none;
}

/* ── Auto-play toggle ─────────────────────────────────────────────────────── */
.sh-row--autoplay { align-items: center; }
.sh-toggle {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: none; cursor: pointer; padding: 0;
    color: var(--sh-text-muted);
    font-size: 11px; font-weight: 500;
}
.sh-toggle__track {
    width: 32px; height: 18px;
    border-radius: 9px;
    background: var(--sh-border);
    position: relative;
    transition: background .2s;
    flex-shrink: 0;
}
.sh-toggle--on .sh-toggle__track { background: var(--sh-navy); }
.sh-toggle__thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
    transition: left .2s;
}
.sh-toggle--on .sh-toggle__thumb { left: 16px; }
.sh-toggle__lbl { color: var(--sh-text-muted); transition: color .15s; }
.sh-toggle--on .sh-toggle__lbl { color: var(--sh-navy); }

/* ══════════════════════════════════════════════════════════════════════════
   EVENTS PAGE  (.evt)
══════════════════════════════════════════════════════════════════════════ */

/* ── Scoped design tokens ──────────────────────────────────────────────── */
.evt {
    --evt-accent:      #7c3aed;
    --evt-accent-2:    #2563eb;
    --evt-gold:        #f59e0b;
    --evt-card-bg:     #ffffff;
    --evt-card-border: rgba(124,58,237,.13);
    --evt-radius:      16px;
    padding: 0 0 48px;
    min-height: 100%;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.evt-hero {
    position: relative;
    background: linear-gradient(135deg, #1e0533 0%, #0c1445 50%, #0b1a2e 100%);
    padding: 0;
    margin: 0 0 16px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 6px 32px rgba(30,5,51,.3);
}
.evt-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 20% 50%, rgba(124,58,237,.25) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 80% 30%, rgba(37,99,235,.20) 0%, transparent 70%);
    pointer-events: none;
}
.evt-hero__waves {
    position: absolute; inset: 0; pointer-events: none;
}
.evt-hero__waves svg { width: 100%; height: 100%; }
.evt-hero__wave--1 { fill: rgba(255,255,255,.05); }
.evt-hero__wave--2 { fill: rgba(255,255,255,.08); }
.evt-hero__body {
    position: relative; z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 24px 16px;
}
.evt-hero__left { flex: 1; min-width: 0; }
.evt-hero__badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(124,58,237,.25);
    border: 1px solid rgba(124,58,237,.5);
    color: #c4b5fd;
    font-size: 10px; font-weight: 800; letter-spacing: .12em;
    padding: 4px 12px; border-radius: 99px;
    margin-bottom: 8px;
}
.evt-hero__title {
    font-size: clamp(18px, 2.5vw, 28px);
    font-weight: 900;
    color: #fff;
    letter-spacing: -.5px;
    margin-bottom: 6px;
}
.evt-hero__sub {
    font-size: 13px;
    color: rgba(255,255,255,.65);
    max-width: 480px;
    margin: 0;
    line-height: 1.5;
}

/* Hero stats glass panel */
.evt-hero__stats {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 10px 18px;
    flex-shrink: 0;
    backdrop-filter: blur(8px);
}
.evt-stat {
    display: flex; flex-direction: column; align-items: center;
    padding: 0 14px; gap: 2px;
}
.evt-stat__value {
    font-size: 20px; font-weight: 800; color: #fff;
    line-height: 1; letter-spacing: -.02em;
}
.evt-stat__label {
    font-size: 10px; color: rgba(255,255,255,.5);
    font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
}
.evt-stat__divider {
    width: 1px; height: 28px;
    background: rgba(255,255,255,.14); flex-shrink: 0;
}

/* ── Sticky filter bar ──────────────────────────────────────────────── */
.evt-filter-bar {
    position: sticky; top: 0; z-index: 40;
    background: var(--color-surface, #fff);
    margin: 0 0 16px;
    padding: 10px 16px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(0,0,0,.07);
}
.evt-filter-bar__row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.evt-searchbox {
    position: relative; flex: 1; min-width: 220px; max-width: 440px;
}
.evt-searchbox__icon {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--color-text-muted); pointer-events: none;
}
.evt-searchbox__input {
    width: 100%;
    background: #f5f5f5;
    border: none;
    border-radius: var(--radius-pill);
    padding: 9px 36px 9px 38px;
    font-size: 13px; color: var(--color-text);
    outline: none;
    transition: background .15s;
}
.evt-searchbox__input::placeholder { color: var(--color-text-muted); }
.evt-searchbox__input:focus { background: #eef2ff; }
.evt-searchbox__clear {
    position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 2px;
    color: var(--color-text-muted); display: flex; align-items: center;
    border-radius: 50%; transition: color .15s;
}
.evt-searchbox__clear:hover { color: #7c3aed; }
.evt-results-count {
    font-size: 12px; font-weight: 600;
    color: var(--color-text-muted); white-space: nowrap; margin-left: auto;
    background: #f8f5ff; border: 1px solid var(--color-border);
    border-radius: 6px; padding: 4px 12px;
}

/* ── Section titles ────────────────────────────────────────────────────── */
.evt-section-title {
    display: flex; align-items: center; gap: 14px;
    font-size: 13px; font-weight: 800;
    color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: .1em;
    margin: 0 0 20px;
    list-style: none;
}
.evt-section-title__line {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, rgba(124,58,237,.18), transparent);
}
.evt-section-title--past { cursor: pointer; user-select: none; }
.evt-section-title--past::-webkit-details-marker { display: none; }

/* ── Featured grid ─────────────────────────────────────────────────────── */
.evt-featured { padding: 28px 0 8px; }
.evt-featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.evt-feat-card {
    display: flex; flex-direction: column;
    border-radius: var(--evt-radius); overflow: hidden;
    text-decoration: none; color: inherit;
    background: var(--evt-card-bg);
    border: 1.5px solid var(--evt-card-border);
    box-shadow: 0 2px 12px rgba(124,58,237,.07);
    transition: box-shadow .18s, border-color .18s, transform .18s;
}
.evt-feat-card:hover {
    box-shadow: 0 10px 36px rgba(124,58,237,.18);
    border-color: rgba(124,58,237,.35);
    transform: translateY(-3px);
}
.evt-feat-card__img-wrap {
    position: relative; aspect-ratio: 16/9; overflow: hidden; background: #1a0838;
}
.evt-feat-card__img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .4s;
}
.evt-feat-card:hover .evt-feat-card__img { transform: scale(1.04); }
.evt-feat-card__img--placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; color: rgba(124,58,237,.4);
}
.evt-feat-card__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(13,4,30,.82) 0%, transparent 55%);
    display: flex; flex-direction: column;
    justify-content: flex-end; align-items: flex-start;
    padding: 14px 16px; gap: 5px;
}
.evt-feat-card__genre {
    background: rgba(124,58,237,.85); color: #fff;
    font-size: 9px; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; padding: 3px 9px; border-radius: 99px;
}
.evt-feat-card__tagline {
    font-size: 12px; color: rgba(255,255,255,.85); margin: 0; line-height: 1.4;
    max-width: 90%; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.evt-feat-card__body {
    display: flex; align-items: flex-start; gap: 14px; padding: 16px;
}
.evt-feat-card__date-badge {
    flex-shrink: 0; width: 48px;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 8px 4px; color: #fff;
}
.evt-feat-card__date-day { font-size: 22px; font-weight: 900; line-height: 1; }
.evt-feat-card__date-mon { font-size: 9px; font-weight: 700; letter-spacing: .06em; opacity: .85; }
.evt-feat-card__info     { flex: 1; min-width: 0; }
.evt-feat-card__title {
    font-size: 15px; font-weight: 800; color: var(--color-text);
    margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.evt-feat-card__meta {
    font-size: 12px; color: var(--color-text-muted);
    margin: 0 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.evt-feat-card__time { font-size: 11px; color: #7c3aed; font-weight: 600; margin: 0; }
.evt-feat-card__price {
    align-self: center; margin-left: auto; flex-shrink: 0;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e; font-size: 10px; font-weight: 800;
    padding: 4px 10px; border-radius: 99px; white-space: nowrap;
}

/* ── Upcoming grid ─────────────────────────────────────────────────────── */
.evt-upcoming { padding: 28px 0 8px; }
.evt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}
.evt-grid--muted { opacity: .72; }

.evt-card {
    display: flex; flex-direction: column;
    border-radius: var(--evt-radius); overflow: hidden;
    text-decoration: none; color: inherit;
    background: var(--evt-card-bg);
    border: 1.5px solid var(--evt-card-border);
    box-shadow: 0 2px 8px rgba(124,58,237,.04);
    transition: box-shadow .18s, border-color .18s, transform .18s;
}
.evt-card:hover {
    box-shadow: 0 8px 28px rgba(124,58,237,.15);
    border-color: rgba(124,58,237,.3);
    transform: translateY(-3px);
}
.evt-card--past { pointer-events: none; }

.evt-card__img-wrap {
    position: relative; aspect-ratio: 3/2; overflow: hidden; background: #1a0838;
}
.evt-card__img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .35s;
}
.evt-card:hover .evt-card__img { transform: scale(1.05); }
.evt-card__img--placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(124,58,237,.35);
}

.evt-card__date-badge {
    position: absolute; top: 10px; left: 10px;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    border-radius: 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 5px 7px; color: #fff; min-width: 38px;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.evt-card__date-badge--past { background: rgba(80,80,100,.7); }
.evt-card__date-day { font-size: 16px; font-weight: 900; line-height: 1; }
.evt-card__date-mon { font-size: 8px; font-weight: 700; letter-spacing: .05em; opacity: .9; }

.evt-card__genre-pill {
    position: absolute; top: 10px; right: 10px;
    background: rgba(0,0,0,.65); color: #d4bbff;
    font-size: 9px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; padding: 3px 8px; border-radius: 99px;
    backdrop-filter: blur(4px);
}

.evt-card__body {
    padding: 14px 16px 16px;
    display: flex; flex-direction: column; gap: 5px; flex: 1;
}
.evt-card__title {
    font-size: 14px; font-weight: 800; color: var(--color-text);
    margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .12s;
}
.evt-card:hover .evt-card__title { color: #7c3aed; }
.evt-card__artist {
    font-size: 12px; color: #7c3aed; font-weight: 600; margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.evt-card__location {
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; color: var(--color-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.evt-card__time-row {
    display: flex; align-items: center; justify-content: space-between; margin-top: 2px;
}
.evt-card__time  { font-size: 11px; color: var(--color-text-muted); font-weight: 500; }
.evt-card__price {
    font-size: 10px; font-weight: 800;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e; padding: 2px 8px; border-radius: 99px;
}
.evt-card__cta { margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(124,58,237,.09); }
.evt-card__cta-btn {
    font-size: 12px; font-weight: 700; color: #7c3aed;
    letter-spacing: .02em; transition: letter-spacing .15s;
}
.evt-card:hover .evt-card__cta-btn { letter-spacing: .06em; }

/* ── Event card share buttons ──────────────────────────────────────────── */
.evt-feat-card__share {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 5;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: 1.5px solid rgba(255,255,255,.28);
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transform: scale(.82);
    transition: opacity .18s, transform .18s, background .15s, border-color .15s;
    padding: 0;
}
.evt-feat-card:hover .evt-feat-card__share {
    opacity: 1;
    transform: scale(1);
}
.evt-feat-card__share:hover {
    background: rgba(255,255,255,.3);
    border-color: rgba(255,255,255,.65);
    transform: scale(1.1) !important;
}
.evt-feat-card__share:active { transform: scale(.93) !important; }

.evt-card__share {
    position: absolute;
    bottom: 10px; right: 10px;
    z-index: 5;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    border: 1.5px solid rgba(124,58,237,.2);
    color: #7c3aed;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    opacity: 0;
    transform: scale(.82) translateY(4px);
    transition: opacity .18s, transform .18s, background .15s, box-shadow .15s, color .15s;
    pointer-events: auto;
    padding: 0;
}
.evt-card:hover .evt-card__share {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.evt-card__share:hover {
    background: #7c3aed;
    color: #fff;
    border-color: #7c3aed;
    box-shadow: 0 4px 14px rgba(124,58,237,.38);
    transform: scale(1.1) translateY(0) !important;
}
.evt-card__share:active { transform: scale(.93) translateY(0) !important; }

/* Share feedback toast */
.evt-share-toast {
    position: fixed;
    bottom: calc(var(--player-height, 72px) + 16px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: linear-gradient(135deg, #1e0533 0%, #0c1445 100%);
    border: 1px solid rgba(124,58,237,.35);
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 24px rgba(124,58,237,.35), 0 2px 8px rgba(0,0,0,.3);
    opacity: 0;
    transition: opacity .22s, transform .22s;
    pointer-events: none;
    z-index: 2000;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}
.evt-share-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Past events ───────────────────────────────────────────────────────── */
.evt-past { padding: 12px 0 8px; }
.evt-past-details[open] .evt-section-title--past { margin-bottom: 20px; }
.evt-past-details summary::after { content: "show"; font-size: 10px; color: var(--color-text-muted); text-transform: none; letter-spacing: 0; font-weight: 600; margin-left: -8px; }
.evt-past-details[open] summary::after { content: "hide"; }

/* ── Empty state ───────────────────────────────────────────────────────── */
.evt-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 80px 24px; color: var(--color-text-muted); text-align: center;
}
.evt-empty svg { opacity: .35; }
.evt-empty p { font-size: 14px; max-width: 340px; line-height: 1.6; }
.evt-dot { opacity: .4; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .evt-hero__body  { padding: 14px 20px 20px; }
    .evt-featured, .evt-upcoming, .evt-past { padding-left: 0; padding-right: 0; }
    .evt-featured-grid { grid-template-columns: 1fr; }
    .evt-grid        { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EVENT DETAIL PAGE  (.evtd)
══════════════════════════════════════════════════════════════════════════ */
.evtd {
    --evtd-accent:   #7c3aed;
    --evtd-accent-2: #2563eb;
    --evtd-border:   rgba(124,58,237,.13);
    --evtd-radius:   4px;
    min-height: 100%;
    padding-bottom: 60px;
}

/* ── Hero banner ───────────────────────────────────────────────────────── */
.evtd-hero {
    position: relative;
    min-height: 270px;
    background:
        linear-gradient(to bottom, rgba(30,27,75,.55) 0%, rgba(67,56,202,.68) 60%, rgba(79,70,229,.74) 100%),
        linear-gradient(135deg, #312e81 0%, #4f46e5 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    border-radius: var(--evtd-radius);
    overflow: hidden;
}
.evtd-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(15,23,42,.18) 0%,
        rgba(30,27,75,.28) 40%,
        rgba(30,27,75,.42) 100%
    );
}
.evtd-hero__content {
    position: relative;
    width: 100%;
    padding: 36px 40px 40px;
    display: flex; flex-direction: column; gap: 12px;
}
.evtd-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: color .15s;
    width: fit-content;
}
.evtd-back:hover { color: #fff; }
.evtd-hero__badges {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.evtd-genre-pill {
    background: rgba(124,58,237,.75);
    backdrop-filter: blur(6px);
    color: #ede9fe;
    font-size: 10px; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 12px; border-radius: 99px;
}
.evtd-featured-pill {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(245,158,11,.85);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 12px; border-radius: 99px;
}
.evtd-hero__title {
    font-size: clamp(24px, 4vw, 44px);
    font-weight: 900;
    color: #fff;
    letter-spacing: -.5px;
    line-height: 1.15;
    text-shadow: 0 2px 16px rgba(0,0,0,.45);
    margin: 0;
}
.evtd-hero__tagline {
    font-size: 15px; color: rgba(255,255,255,.75);
    margin: 0; line-height: 1.5; max-width: 620px;
}
.evtd-hero__meta {
    display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px;
}
.evtd-meta-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.9);
    font-size: 12px; font-weight: 500;
    padding: 5px 12px; border-radius: 99px;
}

/* ── Body layout (2-col on wide, stack on narrow) ──────────────────────── */
.evtd-body {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
    padding: 36px 40px 0;
    align-items: start;
    max-width: none;
}

/* ── Main content column ───────────────────────────────────────────────── */
.evtd-main {
    display: flex; flex-direction: column; gap: 28px;
}

/* Artist block */
.evtd-artist-block {
    display: flex; align-items: center; gap: 10px;
    font-size: 18px; font-weight: 800;
    color: var(--evtd-accent);
}
.evtd-artist-block svg { flex-shrink: 0; }

/* Description */
.evtd-desc__heading {
    font-size: 13px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--color-text-muted);
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--evtd-border);
}
.evtd-desc__text {
    font-size: 14px; line-height: 1.75;
    color: var(--color-text);
    white-space: pre-line;
    margin: 0;
}

/* Opening times */
.evtd-times {
    display: flex; gap: 24px; flex-wrap: wrap;
}
.evtd-time-item {
    display: flex; flex-direction: column; gap: 4px;
    background: #fff;
    border: 1.5px solid var(--evtd-border);
    border-radius: 12px;
    padding: 14px 20px;
    min-width: 120px;
}
.evtd-time-item__label {
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--color-text-muted);
}
.evtd-time-item__val {
    font-size: 20px; font-weight: 900;
    color: var(--evtd-accent);
    letter-spacing: -.3px;
}

/* ── Ticket sidebar card ───────────────────────────────────────────────── */
.evtd-ticket-aside { position: sticky; top: 20px; }
.evtd-ticket-card {
    background: #fff;
    border: 1.5px solid var(--evtd-border);
    border-radius: var(--evtd-radius);
    box-shadow: 0 4px 24px rgba(124,58,237,.09);
    overflow: hidden;
}
.evtd-ticket-card__header {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
    color: #fff;
    font-size: 14px; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase;
}
.evtd-ticket-card__price {
    padding: 18px 20px 4px;
    font-size: 28px; font-weight: 900;
    color: var(--evtd-accent);
    letter-spacing: -.5px;
}
.evtd-ticket-card__price--free {
    font-size: 18px; color: #16a34a;
    padding: 18px 20px 4px;
    font-weight: 800;
}
.evtd-ticket-card__meta {
    padding: 10px 20px 18px;
    display: flex; flex-direction: column; gap: 4px;
    border-bottom: 1px solid var(--evtd-border);
}
.evtd-ticket-card__meta p {
    font-size: 13px; color: var(--color-text-muted); margin: 0;
}
.evtd-ticket-card__meta p:first-child {
    font-weight: 700; color: var(--color-text); font-size: 13px;
}
.evtd-ticket-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 16px 20px;
    padding: 13px 24px;
    border-radius: 99px;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
    color: #fff;
    font-size: 14px; font-weight: 800;
    text-decoration: none;
    transition: opacity .15s, box-shadow .15s;
    box-shadow: 0 4px 18px rgba(124,58,237,.35);
    letter-spacing: .02em;
}
.evtd-ticket-btn:hover {
    opacity: .9;
    box-shadow: 0 6px 24px rgba(124,58,237,.5);
}
.evtd-ticket-btn--disabled {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    box-shadow: none;
    cursor: default;
    font-size: 13px; font-weight: 600;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .evtd-hero__content { padding: 28px 20px 32px; }
    .evtd-body {
        grid-template-columns: 1fr;
        padding: 24px 20px 0;
    }
    .evtd-ticket-aside { position: static; }
    .evtd-hero__title  { font-size: 26px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EVENT DETAIL PAGE  (.evtd)
══════════════════════════════════════════════════════════════════════════ */
.evtd {
    --evtd-accent:   #7c3aed;
    --evtd-accent-2: #2563eb;
    --evtd-border:   rgba(124,58,237,.13);
    --evtd-radius:   4px;
    min-height: 100%;
    padding-bottom: 60px;
}

/* ── Hero banner ───────────────────────────────────────────────────────── */
.evtd-hero {
    position: relative;
    min-height: 270px;
    background:
        linear-gradient(to bottom, rgba(30,27,75,.55) 0%, rgba(67,56,202,.68) 60%, rgba(79,70,229,.74) 100%),
        linear-gradient(135deg, #312e81 0%, #4f46e5 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    border-radius: var(--evtd-radius);
    overflow: hidden;
}
.evtd-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(15,23,42,.18) 0%,
        rgba(30,27,75,.28) 40%,
        rgba(30,27,75,.42) 100%
    );
}
.evtd-hero__content {
    position: relative;
    width: 100%;
    padding: 36px 40px 40px;
    display: flex; flex-direction: column; gap: 12px;
}
.evtd-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: color .15s;
    width: fit-content;
}
.evtd-back:hover { color: #fff; }
.evtd-hero__badges {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.evtd-genre-pill {
    background: rgba(124,58,237,.75);
    backdrop-filter: blur(6px);
    color: #ede9fe;
    font-size: 10px; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 12px; border-radius: 99px;
}
.evtd-featured-pill {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(245,158,11,.85);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 12px; border-radius: 99px;
}
.evtd-hero__title {
    font-size: clamp(24px, 4vw, 44px);
    font-weight: 900;
    color: #fff;
    letter-spacing: -.5px;
    line-height: 1.15;
    text-shadow: 0 2px 16px rgba(0,0,0,.45);
    margin: 0;
}
.evtd-hero__tagline {
    font-size: 15px; color: rgba(255,255,255,.75);
    margin: 0; line-height: 1.5; max-width: 620px;
}
.evtd-hero__meta {
    display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px;
}
.evtd-meta-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.9);
    font-size: 12px; font-weight: 500;
    padding: 5px 12px; border-radius: 99px;
}

/* ── Body layout (2-col on wide, stack on narrow) ──────────────────────── */
.evtd-body {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
    padding: 36px 40px 0;
    align-items: start;
    max-width: none;
}

/* ── Main content column ───────────────────────────────────────────────── */
.evtd-main {
    display: flex; flex-direction: column; gap: 28px;
}

/* Artist block */
.evtd-artist-block {
    display: flex; align-items: center; gap: 10px;
    font-size: 18px; font-weight: 800;
    color: var(--evtd-accent);
}
.evtd-artist-block svg { flex-shrink: 0; }

/* Description */
.evtd-desc__heading {
    font-size: 13px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--color-text-muted);
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--evtd-border);
}
.evtd-desc__text {
    font-size: 14px; line-height: 1.75;
    color: var(--color-text);
    white-space: pre-line;
    margin: 0;
}

/* Opening times */
.evtd-times {
    display: flex; gap: 24px; flex-wrap: wrap;
}
.evtd-time-item {
    display: flex; flex-direction: column; gap: 4px;
    background: #fff;
    border: 1.5px solid var(--evtd-border);
    border-radius: 12px;
    padding: 14px 20px;
    min-width: 120px;
}
.evtd-time-item__label {
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--color-text-muted);
}
.evtd-time-item__val {
    font-size: 20px; font-weight: 900;
    color: var(--evtd-accent);
    letter-spacing: -.3px;
}

/* ── Ticket sidebar card ───────────────────────────────────────────────── */
.evtd-ticket-aside { position: sticky; top: 20px; }
.evtd-ticket-card {
    background: #fff;
    border: 1.5px solid var(--evtd-border);
    border-radius: var(--evtd-radius);
    box-shadow: 0 4px 24px rgba(124,58,237,.09);
    overflow: hidden;
}
.evtd-ticket-card__header {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
    color: #fff;
    font-size: 14px; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase;
}
.evtd-ticket-card__price {
    padding: 18px 20px 4px;
    font-size: 28px; font-weight: 900;
    color: var(--evtd-accent);
    letter-spacing: -.5px;
}
.evtd-ticket-card__price--free {
    font-size: 18px; color: #16a34a;
    padding: 18px 20px 4px;
    font-weight: 800;
}
.evtd-ticket-card__meta {
    padding: 10px 20px 18px;
    display: flex; flex-direction: column; gap: 4px;
    border-bottom: 1px solid var(--evtd-border);
}
.evtd-ticket-card__meta p {
    font-size: 13px; color: var(--color-text-muted); margin: 0;
}
.evtd-ticket-card__meta p:first-child {
    font-weight: 700; color: var(--color-text); font-size: 13px;
}
.evtd-ticket-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 16px 20px;
    padding: 13px 24px;
    border-radius: 99px;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
    color: #fff;
    font-size: 14px; font-weight: 800;
    text-decoration: none;
    transition: opacity .15s, box-shadow .15s;
    box-shadow: 0 4px 18px rgba(124,58,237,.35);
    letter-spacing: .02em;
}
.evtd-ticket-btn:hover {
    opacity: .9;
    box-shadow: 0 6px 24px rgba(124,58,237,.5);
}
.evtd-ticket-btn--disabled {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    box-shadow: none;
    cursor: default;
    font-size: 13px; font-weight: 600;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .evtd-hero__content { padding: 28px 20px 32px; }
    .evtd-body {
        grid-template-columns: 1fr;
        padding: 24px 20px 0;
    }
    .evtd-ticket-aside { position: static; }
    .evtd-hero__title  { font-size: 26px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ADMIN REDESIGN — Professional & calm palette
   Overrides all acp-* and admin-* rules above to a clean slate/indigo theme.
══════════════════════════════════════════════════════════════════════════ */

/* ── 0. Admin design tokens ─────────────────────────────────────────────── */
.admin-subnav,
.acp-section,
.admin-page,
.acp-drawer {
    --adm-ink:        #0f172a;
    --adm-ink2:       #1e293b;
    --adm-muted:      #64748b;
    --adm-border:     #e2e8f0;
    --adm-surface:    #ffffff;
    --adm-bg:         #f8fafc;
    --adm-accent:     #4f46e5;
    --adm-accent-lt:  #eef2ff;
    --adm-accent-dk:  #4338ca;
    --adm-ok:         #15803d;
    --adm-ok-bg:      #f0fdf4;
    --adm-ok-br:      #bbf7d0;
    --adm-err:        #dc2626;
    --adm-err-bg:     #fef2f2;
    --adm-err-br:     #fecaca;
    --adm-warn:       #b45309;
    --adm-warn-bg:    #fffbeb;
    --adm-warn-br:    #fde68a;
}

/* ── 1. Admin sub-nav ───────────────────────────────────────────────────── */
.admin-subnav {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.admin-subnav__inner {
    align-items: center;
    padding: 0 28px;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: visible;
}
/* "Admin" brand chip on the left */
.admin-subnav__brand {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #94a3b8;
    background: none;
    border: none;
    border-radius: 0;
    border-right: 1px solid #e2e8f0;
    padding: 0 16px 0 0;
    margin-right: 4px;
    align-self: stretch;
    flex-shrink: 0;
    user-select: none;
    white-space: nowrap;
}
/* Vertical separator between groups */
.admin-subnav__sep {
    width: 1px;
    height: 18px;
    background: #e2e8f0;
    margin: 0 8px;
    flex-shrink: 0;
    align-self: center;
}
/* Small group label above separator */
.admin-subnav__group-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #cbd5e1;
    padding: 0 4px 0 2px;
    align-self: center;
    flex-shrink: 0;
    user-select: none;
    white-space: nowrap;
}
/* Nav items */
.admin-subnav__item {
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    padding: 13px 14px;
    border-bottom: 2px solid transparent;
    gap: 6px;
    border-radius: 0;
    transition: color .14s, border-color .14s;
    white-space: nowrap;
}
.admin-subnav__item svg { opacity: .65; transition: opacity .14s; }
.admin-subnav__item:hover { color: #1e293b; }
.admin-subnav__item:hover svg { opacity: .9; }
.admin-subnav__item.is-active {
    color: #4f46e5;
    border-bottom-color: #4f46e5;
    font-weight: 600;
}
.admin-subnav__item.is-active svg { opacity: 1; color: #4f46e5; }

.admin-subnav__settings-menu {
    position: relative;
    flex: 0 0 auto;
}
.admin-subnav__settings-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    padding: 0 12px;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}
.admin-subnav__settings-trigger::-webkit-details-marker { display: none; }
.admin-subnav__settings-trigger:hover,
.admin-subnav__settings-menu.is-active > .admin-subnav__settings-trigger {
    color: #4f46e5;
    background: #f8f7ff;
}
.admin-subnav__settings-chevron { transition: transform .15s ease; }
.admin-subnav__settings-menu[open] .admin-subnav__settings-chevron { transform: rotate(180deg); }
.admin-subnav__settings-dropdown {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 80;
    display: grid;
    min-width: 180px;
    padding: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .14);
}
.admin-subnav__settings-dropdown a {
    padding: 9px 10px;
    border-radius: 6px;
    color: #64748b;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}
.admin-subnav__settings-dropdown a:hover,
.admin-subnav__settings-dropdown a.is-active {
    color: #4338ca;
    background: #eef2ff;
}

@media (max-width: 900px) {
    .admin-subnav__inner {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-inline: 14px;
    }
}

/* ── 2. acp-section background ──────────────────────────────────────────── */
.acp-section { background: #f8fafc; min-height: 100%; }

/* ── 3. Page hero — clean white card ────────────────────────────────────── */
.acp-page-hero {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #4f46e5;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    padding: 16px 22px;
    margin-bottom: 20px;
}
.acp-page-hero::before,
.acp-page-hero::after { display: none !important; }
.acp-page-hero__icon {
    background: #eef2ff;
    border: 1px solid #e0e7ff;
    color: #4f46e5;
    border-radius: 8px;
}
.acp-page-hero__title { color: #0f172a; font-size: 16px; font-weight: 700; }
.acp-page-hero__sub   { color: #64748b; font-size: 12px; }
/* Badge inside hero (re-style from translucent white) */
.acp-page-hero .admin-badge,
.acp-page-hero-badge {
    background: #eef2ff;
    border: 1px solid #e0e7ff;
    color: #4338ca;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
}

/* ── 4. "New …" add button inside/outside hero ──────────────────────────── */
.acp-page-hero-add-btn {
    background: #4f46e5;
    border: 1px solid #4338ca;
    color: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(79,70,229,.28);
    padding: 9px 18px;
    font-weight: 600;
    font-size: 13px;
    transition: background .14s, box-shadow .14s;
}
.acp-page-hero-add-btn:hover {
    background: #4338ca;
    border-color: #3730a3;
    box-shadow: 0 4px 14px rgba(79,70,229,.38);
}
/* Override hero's translucent style on acp-submit-btn */
.acp-page-hero .acp-submit-btn {
    background: #4f46e5;
    border: 1px solid #4338ca;
    box-shadow: 0 2px 8px rgba(79,70,229,.28);
    backdrop-filter: none;
}
.acp-page-hero .acp-submit-btn:hover {
    background: #4338ca;
    opacity: 1;
}

/* ── 5. Dashboard hero ─────────────────────────────────────────────────── */
.admin-dash-hero {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 45%, #4f46e5 100%) !important;
    border-radius: 0;
    padding: 40px 32px 36px;
    align-items: center;
    min-height: 152px;
}
.admin-dash-hero::before {
    content: '';
    position: absolute;
    top: -90px; right: -50px;
    width: 340px; height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,.32) 0%, transparent 62%);
    pointer-events: none;
}
.admin-dash-hero::after { display: none !important; }
.admin-dash-hero__eyebrow {
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.82);
}
.admin-dash-hero__title   { color: #fff; text-shadow: none; letter-spacing: -.025em; }
.admin-dash-hero__sub     { color: rgba(255,255,255,.65); }
.admin-dash-stat {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    min-width: 90px;
    padding: 12px 22px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.admin-dash-stat__val { color: #fff; font-size: 26px; font-weight: 800; }
.admin-dash-stat__lbl { color: rgba(255,255,255,.55); font-size: 10px; }

/* ── 6. Dashboard body + section label ──────────────────────────────────── */
.admin-dash-body { background: #f8fafc; padding: 28px 28px 48px; }
.admin-dash-section-label { color: #94a3b8; letter-spacing: .10em; }

/* ── 7. Dashboard quick-access cards ────────────────────────────────────── */
.admin-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: border-color .18s, box-shadow .18s, transform .15s;
}
.admin-card:hover {
    border-color: #c7d2fe;
    box-shadow: 0 4px 18px rgba(79,70,229,.10);
    transform: translateY(-2px);
}
.admin-card__title { color: #0f172a; font-weight: 700; }
.admin-card__desc  { color: #64748b; }
/* Unify all card icon tones to calm indigo */
.admin-card--violet,
.admin-card--blue,
.admin-card--cyan,
.admin-card--emerald,
.admin-card--indigo,
.admin-card--rose {
    --card-icon-bg:       #eef2ff;
    --card-icon-bg-hover: #e0e7ff;
    --card-icon-color:    #4f46e5;
}
/* Keep subtle per-card left strip distinctions */
.admin-card--violet  { --card-accent: linear-gradient(to bottom,#7c3aed,#a78bfa); }
.admin-card--blue    { --card-accent: linear-gradient(to bottom,#2563eb,#93c5fd); }
.admin-card--cyan    { --card-accent: linear-gradient(to bottom,#0891b2,#67e8f9); }
.admin-card--emerald { --card-accent: linear-gradient(to bottom,#059669,#6ee7b7); }
.admin-card--indigo  { --card-accent: linear-gradient(to bottom,#4f46e5,#818cf8); }
.admin-card--rose    { --card-accent: linear-gradient(to bottom,#e11d48,#fda4af); }
.admin-card:hover .admin-card__arrow { color: #4f46e5; opacity: .85; }

/* ── 8. Submit / primary buttons ─────────────────────────────────────────── */
.acp-submit-btn {
    background: #4f46e5;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(79,70,229,.22);
    font-weight: 600;
    transition: background .14s, box-shadow .14s, opacity .14s;
}
.acp-submit-btn:hover { background: #4338ca; opacity: 1; box-shadow: 0 4px 14px rgba(79,70,229,.32); }
.acp-submit-btn--sm {
    height: 32px; padding: 0 14px; font-size: 12px;
}

/* Cancel button */
.acp-cancel-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; padding: 0 16px;
    border: 1px solid #e2e8f0; border-radius: 8px;
    background: #fff; color: #475569;
    font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit;
    transition: background .14s, border-color .14s;
}
.acp-cancel-btn:hover { background: #f1f5f9; border-color: #cbd5e1; color: #1e293b; }

/* ── 9. Form labels + inputs ─────────────────────────────────────────────── */
.acp-label {
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.acp-required { color: #ef4444; }
.acp-input {
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #fff;
    color: #0f172a;
    font-size: 13px;
    padding: 9px 11px;
    transition: border-color .15s, box-shadow .15s;
}
.acp-input:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79,70,229,.12);
    outline: none;
}
.acp-field-hint { color: #94a3b8; font-size: 11px; }

/* Checkbox row (replaces the inline-styled div) */
.acp-checkbox-row {
    display: flex; align-items: center; gap: 8px;
    margin-top: 4px;
}
.acp-checkbox {
    width: 16px !important; height: 16px; margin: 0;
    accent-color: #4f46e5; cursor: pointer;
}
.acp-checkbox-label {
    font-size: 13px; color: #1e293b; margin: 0;
    cursor: pointer; user-select: none;
}

/* Drawer body label spacing */
.acp-drawer__body .acp-label {
    margin-top: 16px !important;
    display: block;
}
.acp-drawer__body .acp-label:first-child { margin-top: 0 !important; }

/* ── 10. Flash messages ───────────────────────────────────────────────────── */
.acp-flash { border-radius: 8px; padding: 11px 15px; font-size: 13px; font-weight: 500; }
.acp-flash--ok  { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.acp-flash--err { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.admin-flash { border-radius: 8px; }
.admin-flash--success { background: #f0fdf4; color: #15803d; }
.admin-flash--error   { background: #fef2f2; color: #dc2626; }

/* ── 11. Toolbar + search ─────────────────────────────────────────────────── */
.acp-toolbar { margin-bottom: 16px; gap: 10px; }
.acp-search {
    height: 36px; border-radius: 8px;
    border-color: #e2e8f0; background: #fff; color: #1e293b;
}
.acp-search:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.10); }
.acp-search::placeholder { color: #94a3b8; }

/* ── 12. Table ────────────────────────────────────────────────────────────── */
.acp-table-wrap {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.acp-table thead tr { background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.acp-table th {
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    padding: 7px 12px;
    border-bottom: 1px solid #e2e8f0;
}
.acp-table td {
    color: #1e293b;
    border-bottom-color: #f1f5f9;
    padding: 7px 12px;
}
.acp-table tbody tr:last-child td { border-bottom: none; }
.acp-table tbody tr:hover { background: #f8fafc; }
.acp-table--compact th,
.acp-table--compact td { padding: 5px 10px; }

/* ── 13. Status badges ────────────────────────────────────────────────────── */
.acp-pub-badge--live  { background: #dcfce7; color: #15803d; }
.acp-pub-badge--draft { background: #f1f5f9; color: #64748b; }
.acp-role-chip        { background: #eef2ff; color: #4338ca; }
.acp-role-chip--admin  { background: #fce7f3; color: #9d174d; }
.acp-role-chip--artist { background: #ecfdf5; color: #065f46; }
.acp-perm-chip        { background: #eef2ff; color: #4338ca; }
.acp-genre-tag        { background: #eef2ff; color: #4338ca; }
.admin-badge          { background: #eef2ff; color: #4f46e5; }
.acp-provider-badge--local  { background: #eef2ff; color: #4338ca; }
.acp-provider-badge--google { background: #fef2f2; color: #b91c1c; }
.acp-status-dot--on  { background: #22c55e; }
.acp-status-dot--off { background: #f87171; }

/* ── 14. Row icon-action buttons ──────────────────────────────────────────── */
.acp-icon-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%; color: #94a3b8;
    border: 1px solid transparent;
    padding: 0; cursor: pointer; flex-shrink: 0;
    transition: background .12s, color .12s, border-color .12s;
}
.acp-icon-action:hover           { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.acp-icon-action--ok             { color: #15803d; }
.acp-icon-action--ok:hover       { background: #f0fdf4; border-color: #bbf7d0; }
.acp-icon-action--warn           { color: #b45309; }
.acp-icon-action--warn:hover     { background: #fffbeb; border-color: #fde68a; }
.acp-icon-action--danger         { color: #dc2626; }
.acp-icon-action--danger:hover   { background: #fef2f2; border-color: #fecaca; }
.acp-action-btn--ok     { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.acp-action-btn--warn   { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.acp-action-btn--danger { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

/* ── 15. Drawer panel ─────────────────────────────────────────────────────── */
.acp-drawer {
    background: #fff;
    border-left: 1px solid #e2e8f0;
    box-shadow: -4px 0 36px rgba(0,0,0,.12);
}
.acp-drawer__header {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.acp-drawer__title      { color: #0f172a; }
.acp-drawer__title svg  { color: #4f46e5; }
.acp-drawer__close      { background: #fff; border-color: #e2e8f0; color: #64748b; }
.acp-drawer__close:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
/* Wide drawer */
.acp-drawer--wide { width: 580px; }
/* Two-col form grid inside wide drawer */
.acp-form--two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}
.acp-form--two-col .acp-form-col { display: flex; flex-direction: column; }
.acp-form--two-col .acp-form-row-full { grid-column: 1 / -1; }

/* ── 16. Pagination ───────────────────────────────────────────────────────── */
.acp-per-page-select {
    border-color: #e2e8f0; background: #fff; border-radius: 7px; color: #475569;
}
.acp-per-page-select:focus { border-color: #4f46e5; }
.acp-pg-btn {
    border-color: #e2e8f0; background: #fff; color: #475569;
    border-radius: 7px; font-size: 12px;
}
.acp-pg-btn:hover:not([disabled]) { border-color: #4f46e5; color: #4f46e5; background: #eef2ff; }
.acp-pg-btn--active { background: #4f46e5; border-color: #4f46e5; color: #fff; font-weight: 700; }
.acp-pg-btn--active:hover { background: #4338ca; opacity: 1; }

/* ── 17. Role cards ───────────────────────────────────────────────────────── */
.acp-role-card { border-color: #e2e8f0; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.acp-role-card__icon { background: #eef2ff; color: #4f46e5; }
.acp-role-card__name { color: #0f172a; }

/* ── 18. Generic card ─────────────────────────────────────────────────────── */
.acp-card { border-color: #e2e8f0; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.acp-card-title svg { color: #4f46e5; }
.acp-count { background: #eef2ff; color: #4f46e5; }

/* ── 19. Genre (admin-genres-*) cards ────────────────────────────────────── */
.admin-genres-form-card,
.admin-genres-list-card {
    border-color: #e2e8f0; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.admin-genres-add-btn { background: #4f46e5; border-radius: 8px; }
.admin-genres-add-btn:hover { background: #4338ca; opacity: 1; }
.admin-genres-input   { border-color: #cbd5e1; border-radius: 7px; }
.admin-genres-input:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.1); }
.admin-genre-dot  { background: #4f46e5; }
.acp-genre-dot    { background: #4f46e5; }
.admin-genre-delete:hover { background: #fef2f2; color: #dc2626; }
.acp-delete-btn:hover     { background: #fef2f2; color: #dc2626; }

/* ── 20. Logo-mode tabs ───────────────────────────────────────────────────── */
.acp-logo-tab--active { background: #4f46e5; }
.acp-logo-tab:not(.acp-logo-tab--active):hover { background: #f1f5f9; }

/* ── 21. Empty states ─────────────────────────────────────────────────────── */
.acp-empty-state { color: #94a3b8; }
.acp-empty-state p { color: #64748b; }

/* ── 22. acp-icon-btn (list edit/delete in artists/albums) ──────────────── */
.acp-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    padding: 0;
}
.acp-icon-btn--edit:hover   { background: #eef2ff; color: #4f46e5; border-color: #e0e7ff; }
.acp-icon-btn--delete:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

/* ── 23. List items (artists / albums) ───────────────────────────────────── */
.acp-list {
    list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px;
}
.acp-list-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    transition: background .12s;
    flex-wrap: wrap;
}
.acp-list-item:hover { background: #f8fafc; }
.acp-list-item__name {
    font-size: 13px; font-weight: 600; color: #0f172a;
}
.acp-list-item__name a { color: inherit; text-decoration: none; }
.acp-list-item__name a:hover { color: #4f46e5; }
.acp-list-item__sub  { font-size: 11px; color: #64748b; }
.acp-list-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acp-list-item__actions { display: flex; gap: 3px; margin-left: auto; flex-shrink: 0; }

/* Artist & album thumb */
.acp-artist-thumb {
    width: 40px; height: 40px; border-radius: 8px;
    overflow: hidden; flex-shrink: 0;
    background: #f1f5f9;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; color: #94a3b8;
}
.acp-artist-thumb__img { width: 100%; height: 100%; object-fit: cover; }
.acp-artist-thumb__fallback {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    color: #4f46e5; font-size: 14px; font-weight: 800;
}

/* Artist info sub-text */
.acp-artist-info { flex: 1; min-width: 0; }

/* Inline edit panel */
.acp-inline-edit-panel {
    grid-column: 1 / -1;
    width: 100%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin-top: 8px;
}
.acp-inline-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
}
.acp-inline-edit-full { grid-column: 1 / -1; }
.acp-inline-edit-actions {
    display: flex; gap: 8px; align-items: center;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

/* ── 24. Miscellaneous cleanups ───────────────────────────────────────────── */
.acp-badge {
    display: inline-flex; align-items: center;
    padding: 2px 9px; border-radius: 99px;
    font-size: 11px; font-weight: 700;
    background: #eef2ff; color: #4338ca;
    letter-spacing: .03em;
}
.acp-radio-genre-tag  { background: #eef2ff; color: #4338ca; }
.acp-radio-builtin-tag { background: #ecfdf5; color: #065f46; }
.acp-radio-dot--builtin { background: #22c55e; }

/* Filter input */
.acp-filter-input { border-color: #e2e8f0; background: #fff; border-radius: 7px; }
.acp-filter-input:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.1); }

/* Radio tags */
.acp-logo-tab { border-radius: 0; }
.acp-logo-tabs { border-color: #e2e8f0; border-radius: 7px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ── Artist Studio Design System  (studio-*)
   Shared across: Upload Track · My Tracks · My Albums · New Album pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ──────────────────────────────────────────────────────── */
.studio-page {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    gap: 0;
}

/* ── Compact page head — replaces the tall hero banner ─────────────────── */
.studio-pg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 22px var(--space-6) 20px;
    margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-6)) 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    border-left: 3px solid #7c3aed;
    position: relative;
}
.studio-pg-head::before {
    content: '';
    position: absolute;
    inset: 0 0 0 0;
    background: linear-gradient(90deg, rgba(124,58,237,.04) 0%, transparent 40%);
    pointer-events: none;
}
.studio-pg-head__left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    position: relative;
}
.studio-pg-head__icon {
    width: 50px; height: 50px;
    border-radius: 14px;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
    display: flex; align-items: center; justify-content: center;
    color: #fff; flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(124,58,237,.28);
}
.studio-pg-head__text {
    display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.studio-pg-head__eyebrow {
    font-size: 10px; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase;
    color: #7c3aed;
    display: flex; align-items: center; gap: 5px;
}
.studio-pg-head__title {
    font-size: 22px; font-weight: 800;
    color: var(--color-text); margin: 0;
    letter-spacing: -.022em; line-height: 1.15;
}
.studio-pg-head__sub {
    font-size: 12px; color: var(--color-text-muted); margin: 0;
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.studio-pg-head__sub-sep {
    display: inline-block; width: 3px; height: 3px;
    border-radius: 50%; background: var(--color-border);
}
.studio-pg-head__right {
    display: flex; align-items: center; gap: 9px;
    flex-shrink: 0; flex-wrap: wrap; position: relative;
}

/* ── KPI bar (small inline stats row under page head) ───────────────────── */
.studio-kpi-bar {
    display: flex;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    margin: 0 calc(-1 * var(--space-6));
}
.studio-kpi {
    flex: 1; min-width: 120px;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 22px;
    border-right: 1px solid var(--color-border);
    transition: background .14s;
    cursor: default;
}
.studio-kpi:last-child { border-right: none; }
.studio-kpi:hover { background: #faf9ff; }
.studio-kpi__dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.studio-kpi__dot--violet { background: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.studio-kpi__dot--green  { background: #059669; box-shadow: 0 0 0 3px rgba(5,150,105,.15);  }
.studio-kpi__dot--amber  { background: #d97706; box-shadow: 0 0 0 3px rgba(217,119,6,.15);  }
.studio-kpi__dot--blue   { background: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15);  }
.studio-kpi__body { display: flex; flex-direction: column; gap: 1px; }
.studio-kpi__val {
    font-size: 22px; font-weight: 800;
    color: var(--color-text); line-height: 1;
    letter-spacing: -.025em;
}
.studio-kpi__lbl {
    font-size: 11px; color: var(--color-text-muted);
    font-weight: 500; white-space: nowrap;
}

/* ── Hero banner (compact — kept for backward compat, no longer used in studio pages) */
.studio-hero {
    position: relative;
    background: linear-gradient(135deg, #3b0764 0%, #4c1d95 25%, #1e3a8a 65%, #0c4a6e 100%);
    overflow: hidden;
    color: #fff;
    /* pull to edges of .content which has padding var(--space-5) var(--space-6) */
    margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-6)) 0;
    padding: 40px var(--space-6) 34px;
}
.studio-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 75% 40%, rgba(255,255,255,.08) 0%, transparent 60%),
        radial-gradient(ellipse at 15% 90%, rgba(0,0,0,.18) 0%, transparent 55%);
    pointer-events: none;
}
.studio-hero__dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.studio-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.studio-hero__left  { display: flex; flex-direction: column; gap: 6px; }
.studio-hero__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }

.studio-hero__back {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600;
    color: rgba(255,255,255,.6); text-decoration: none;
    transition: color .15s; margin-bottom: 4px;
}
.studio-hero__back:hover { color: rgba(255,255,255,.95); }

.studio-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 10px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255,255,255,.6);
}
.studio-hero__eyebrow-dot {
    display: inline-block; width: 3px; height: 3px;
    border-radius: 50%; background: rgba(255,255,255,.3);
}
.studio-hero__title {
    font-size: 28px; font-weight: 800; color: #fff;
    margin: 0; line-height: 1.15; letter-spacing: -.028em;
}
.studio-hero__meta {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; margin: 0;
    font-size: 13px; color: rgba(255,255,255,.62);
}
.studio-hero__meta-sep {
    display: inline-block; width: 3px; height: 3px;
    border-radius: 50%; background: rgba(255,255,255,.3);
}

.studio-hero__btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    color: rgba(255,255,255,.9);
    border-radius: 99px;
    font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background .15s, border-color .15s;
    text-decoration: none; backdrop-filter: blur(4px);
    font-family: inherit;
}
.studio-hero__btn:hover {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.38);
    color: #fff;
}
.studio-hero__btn--primary {
    background: #fff; color: #4c1d95;
    border-color: transparent;
    box-shadow: 0 2px 14px rgba(0,0,0,.2);
}
.studio-hero__btn--primary:hover { background: #f5f3ff; color: #4c1d95; }

/* ── Stat cards row ────────────────────────────────────────────────────── */
.studio-stats {
    display: flex; gap: 0;
    background: var(--color-border);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
}
.studio-stat {
    flex: 1; display: flex; align-items: center; gap: 14px;
    padding: 18px 24px;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    min-width: 130px;
    transition: background .15s;
}
.studio-stat:last-child { border-right: none; }
.studio-stat:hover { background: #faf9ff; }
.studio-stat__icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.studio-stat__icon--violet { background: #f5f3ff; color: #7c3aed; }
.studio-stat__icon--blue   { background: #eff6ff; color: #2563eb; }
.studio-stat__icon--green  { background: #ecfdf5; color: #059669; }
.studio-stat__icon--amber  { background: #fffbeb; color: #d97706; }
.studio-stat__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.studio-stat__value {
    font-size: 22px; font-weight: 800; color: var(--color-text);
    line-height: 1; letter-spacing: -.025em;
}
.studio-stat__label {
    font-size: 11px; color: var(--color-text-muted);
    font-weight: 500; white-space: nowrap;
}

/* ── Body (main content area below hero/stats) ─────────────────────────── */
.studio-body {
    padding: 28px var(--space-6);
    display: flex; flex-direction: column; gap: 28px;
    flex: 1;
}

/* ── Flash messages ────────────────────────────────────────────────────── */
.studio-flash {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 16px; border-radius: 10px;
    font-size: 13px; font-weight: 500;
}
.studio-flash--ok  { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.studio-flash--err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ── Section header ────────────────────────────────────────────────────── */
.studio-section__head {
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.studio-section__title {
    font-size: 15px; font-weight: 700;
    color: var(--color-text); margin: 0;
    display: flex; align-items: center; gap: 8px;
}
.studio-section__title svg { color: #7c3aed; opacity: .9; }
.studio-section__count {
    font-size: 11px; color: var(--color-text-muted);
    background: var(--color-bg); border: 1px solid var(--color-border);
    padding: 2px 10px; border-radius: 99px; margin-right: auto;
}
.studio-section__hint {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--color-text-muted);
    background: #f5f3ff; padding: 3px 10px;
    border-radius: 99px; border: 1px solid #ddd6fe;
}

/* ── Card ──────────────────────────────────────────────────────────────── */
.studio-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04), 0 4px 20px rgba(0,0,0,.025);
    overflow: hidden;
}

/* ── Form ───────────────────────────────────────────────────────────────── */
.studio-form { padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.studio-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.studio-form__field { display: flex; flex-direction: column; gap: 6px; }
.studio-form__field--full { grid-column: 1 / -1; }
.studio-form__label {
    font-size: 10px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--color-text-muted);
}
.studio-form__req { color: #ef4444; }
.studio-form__input {
    border: 1.5px solid var(--color-border); border-radius: 8px;
    padding: 10px 13px; font-size: 14px; color: var(--color-text);
    background: var(--color-surface); font-family: inherit;
    outline: none; width: 100%; box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.studio-form__input:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.1); }
.studio-form__input--err  { border-color: #ef4444; }
.studio-form__select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    padding-right: 30px; cursor: pointer;
}
.studio-form__textarea { resize: vertical; min-height: 90px; }
.studio-form__hint { font-size: 12px; color: var(--color-text-muted); line-height: 1.5; }
.studio-form__hint a { color: #7c3aed; }
.studio-form__err { font-size: 12px; color: #ef4444; }
.studio-form__actions {
    display: flex; align-items: center; gap: 12px;
    padding-top: 8px; border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.studio-form__input-addon { display: flex; gap: 8px; align-items: center; }
.studio-form__input-addon .studio-form__input { flex: 1; }
.studio-form__addon-link { flex-shrink: 0; color: #7c3aed; display: inline-flex; align-items: center; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.studio-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 22px; border-radius: 99px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: opacity .15s, transform .15s, box-shadow .15s, background .15s;
    font-family: inherit; border: none;
    text-decoration: none; white-space: nowrap; letter-spacing: .01em;
}
.studio-btn--primary {
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 70%, #0ea5e9 100%);
    color: #fff; box-shadow: 0 3px 10px rgba(124,58,237,.32);
}
.studio-btn--primary:hover {
    opacity: .88; transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(124,58,237,.44);
    color: #fff;
}
.studio-btn--ghost {
    background: var(--color-surface);
    color: var(--color-text-muted);
    border: 1.5px solid var(--color-border);
}
.studio-btn--ghost:hover { border-color: #7c3aed; color: #7c3aed; background: #f5f3ff; }
.studio-btn--danger {
    background: transparent; color: #ef4444;
    border: 1.5px solid #fecaca;
}
.studio-btn--danger:hover { background: #fef2f2; border-color: #ef4444; }
.studio-btn--sm { padding: 6px 14px; font-size: 12px; }

/* ── Album grid ─────────────────────────────────────────────────────────── */
.studio-album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}
.studio-album-card {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: box-shadow .2s, transform .2s, border-color .2s;
}
.studio-album-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.1);
    transform: translateY(-3px); border-color: #ddd6fe;
}
.studio-album-card__art {
    aspect-ratio: 1;
    background: linear-gradient(135deg, #ede9fe, #dbeafe);
    position: relative; overflow: hidden;
}
.studio-album-card__art img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.studio-album-card__art-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: #a78bfa;
}
.studio-album-card__overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0);
    display: flex; align-items: flex-end; justify-content: flex-end;
    padding: 10px; gap: 6px;
    transition: background .2s;
}
.studio-album-card:hover .studio-album-card__overlay { background: rgba(0,0,0,.3); }
.studio-album-card__del-btn {
    width: 34px; height: 34px; border-radius: 9px; border: none;
    cursor: pointer; opacity: 0; transform: translateY(6px);
    transition: opacity .2s, transform .2s, background .15s;
    display: flex; align-items: center; justify-content: center;
    color: #fff; background: rgba(239,68,68,.85);
}
.studio-album-card:hover .studio-album-card__del-btn { opacity: 1; transform: translateY(0); }
.studio-album-card__del-btn:hover { background: #ef4444; }
.studio-album-card__body {
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 5px;
}
.studio-album-card__title {
    font-size: 14px; font-weight: 700; color: var(--color-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0;
}
.studio-album-card__meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.studio-album-card__year { font-size: 12px; color: var(--color-text-muted); }
.studio-album-card__track-count {
    font-size: 11px; color: #7c3aed; background: #f5f3ff;
    padding: 1px 8px; border-radius: 99px; font-weight: 600;
}
.studio-album-card__desc {
    font-size: 12px; color: var(--color-text-muted); margin: 0;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.5;
}
/* Drag states */
.studio-album-card.drag-active {
    border-color: #a78bfa;
    box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.studio-album-card.drag-over {
    background: #f5f3ff; border-color: #7c3aed;
    box-shadow: 0 0 0 4px rgba(124,58,237,.2);
    transform: translateY(-3px);
}

/* ── Track rows (draggable source in albums page) ──────────────────────── */
.studio-track-list {
    border: 1px solid var(--color-border);
    border-radius: 10px; overflow: hidden;
}
.studio-track-row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    transition: background .12s; cursor: grab;
}
.studio-track-row:last-child { border-bottom: none; }
.studio-track-row:hover { background: #f9f8ff; }
.studio-track-row:active { cursor: grabbing; }
.studio-track-row__drag { color: var(--color-text-muted); opacity: .32; flex-shrink: 0; transition: opacity .15s; }
.studio-track-row:hover .studio-track-row__drag { opacity: .75; }
.studio-track-row__num { width: 22px; font-size: 12px; color: var(--color-text-muted); text-align: right; flex-shrink: 0; }
.studio-track-row__title { flex: 1; font-size: 13px; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-track-row__album { font-size: 12px; color: var(--color-text-muted); flex-shrink: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-track-row__badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 99px; flex-shrink: 0; }
.studio-track-row__badge--pub   { background: #ecfdf5; color: #059669; }
.studio-track-row__badge--draft { background: #f9fafb; color: #6b7280; border: 1px solid var(--color-border); }

/* ── Tracks management table (My Tracks page) ──────────────────────────── */
.studio-table-wrap {
    border: 1px solid var(--color-border);
    border-radius: 12px; overflow: hidden;
}
.studio-table {
    width: 100%; border-collapse: collapse;
    font-size: 13px; background: var(--color-surface);
}
.studio-table thead th {
    background: var(--color-bg);
    padding: 11px 16px;
    font-size: 10px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--color-text-muted); text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.studio-table thead th:first-child { padding-left: 20px; }
.studio-table thead th.st-th-actions { text-align: center; }
.studio-table tbody tr { border-bottom: 1px solid var(--color-border); transition: background .1s; }
.studio-table tbody tr:last-child { border-bottom: none; }
.studio-table tbody tr:hover { background: #f9f8ff; }
.studio-table td { padding: 12px 16px; color: var(--color-text); vertical-align: middle; }
.studio-table td:first-child { padding-left: 20px; color: var(--color-text-muted); font-size: 12px; width: 40px; font-weight: 500; }

/* Track cell */
.st-td-track { display: flex; align-items: center; gap: 12px; }
.st-td-track-art {
    width: 38px; height: 38px; border-radius: 8px; overflow: hidden;
    flex-shrink: 0; background: var(--color-bg);
    display: flex; align-items: center; justify-content: center;
}
.st-td-track-art img { width: 100%; height: 100%; object-fit: cover; }
.st-td-track-art-ph { color: #c4b5fd; }
.st-td-track-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.st-td-track-title { font-size: 13px; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-td-track-artist { font-size: 11px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Genre chip */
.studio-genre-chip { display: inline-block; padding: 2px 9px; background: #eff6ff; color: #2563eb; border-radius: 99px; font-size: 11px; font-weight: 600; }

/* Status badge */
.studio-status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 99px;
    font-size: 11px; font-weight: 600;
}
.studio-status-badge::before {
    content: ''; display: inline-block;
    width: 5px; height: 5px; border-radius: 50%;
    background: currentColor;
}
.studio-status-badge--live  { background: #ecfdf5; color: #059669; }
.studio-status-badge--draft { background: #f9fafb; color: #9ca3af; border: 1px solid var(--color-border); }

/* Action buttons */
.studio-td-actions { display: flex; align-items: center; gap: 6px; justify-content: center; }
.studio-action-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface); cursor: pointer;
    color: var(--color-text-muted);
    transition: background .12s, color .12s, border-color .12s;
}
.studio-action-btn:hover         { background: var(--color-bg); border-color: #7c3aed; color: #7c3aed; }
.studio-action-btn--warn:hover   { border-color: #f59e0b; color: #d97706; background: #fffbeb; }
.studio-action-btn--danger:hover { border-color: #ef4444; color: #ef4444; background: #fef2f2; }
.studio-action-form { margin: 0; display: contents; }

/* ── Empty state ────────────────────────────────────────────────────────── */
.studio-empty {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 56px 32px; gap: 14px;
}
.studio-empty__icon {
    width: 64px; height: 64px; border-radius: 18px;
    background: linear-gradient(135deg, #ede9fe, #dbeafe);
    display: flex; align-items: center; justify-content: center;
    color: #7c3aed; margin-bottom: 4px;
}
.studio-empty__title { font-size: 16px; font-weight: 700; color: var(--color-text); margin: 0; }
.studio-empty__sub   { font-size: 13px; color: var(--color-text-muted); max-width: 280px; margin: 0; line-height: 1.6; }
.studio-empty__sub a { color: #7c3aed; }

/* ── Toolbar ────────────────────────────────────────────────────────────── */
.studio-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.studio-search-wrap { position: relative; flex: 1; min-width: 200px; max-width: 380px; }
.studio-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
.studio-search {
    width: 100%; padding: 9px 11px 9px 34px;
    border: 1.5px solid var(--color-border); border-radius: 8px;
    font-size: 13px; outline: none; font-family: inherit;
    background: var(--color-surface); color: var(--color-text);
    transition: border-color .15s, box-shadow .15s; box-sizing: border-box;
}
.studio-search:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.1); }
.studio-per-page-label { font-size: 12px; color: var(--color-text-muted); }
.studio-per-page-select {
    border: 1.5px solid var(--color-border); border-radius: 8px;
    padding: 8px 24px 8px 10px; font-size: 12px;
    font-family: inherit; outline: none; cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center;
    background-color: var(--color-surface); color: var(--color-text);
}
.studio-per-page-select:focus { border-color: #7c3aed; }

/* ── Pagination ─────────────────────────────────────────────────────────── */
.studio-pagination {
    display: flex; align-items: center;
    justify-content: space-between; gap: 12px;
    padding: 14px 20px;
    background: var(--color-bg); border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.studio-pagination__info { font-size: 12px; color: var(--color-text-muted); }
.studio-pagination__controls { display: flex; align-items: center; gap: 4px; }
.studio-pg-btn {
    min-width: 30px; height: 30px; border-radius: 7px;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface); color: var(--color-text-muted);
    font-size: 12px; font-weight: 500; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0 6px;
    transition: background .12s, color .12s, border-color .12s;
    font-family: inherit;
}
.studio-pg-btn:hover:not([disabled]) { background: #f5f3ff; border-color: #7c3aed; color: #7c3aed; }
.studio-pg-btn--active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.studio-pg-btn--active:hover { background: #7c3aed; color: #fff; }
.studio-pg-btn[disabled] { opacity: .4; cursor: not-allowed; }
.studio-pg-ellipsis { font-size: 12px; color: var(--color-text-muted); padding: 0 4px; }

/* ── Upload page — two-column wizard layout ─────────────────────────────── */
.studio-upload-wizard {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
}
.studio-upload-main  { display: flex; flex-direction: column; gap: 16px; }
.studio-upload-aside { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; }

/* Art panel — right column */
.studio-art-panel {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: 16px; overflow: hidden;
}
.studio-art-panel__head {
    padding: 13px 18px;
    border-bottom: 1px solid var(--color-border);
    font-size: 10px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--color-text-muted);
    display: flex; align-items: center; gap: 7px;
}
.studio-art-panel__body {
    padding: 20px;
    display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.studio-art-box {
    width: 100%; aspect-ratio: 1;
    background: linear-gradient(135deg, #ede9fe 0%, #dbeafe 100%);
    border-radius: 12px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    border: 1.5px solid #e5e7eb;
}
.studio-art-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.studio-art-box__ph {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 10px; color: #a78bfa;
    pointer-events: none;
}
.studio-art-box__ph span { font-size: 11px; font-weight: 600; color: #c4b5fd; }
.studio-art-choose {
    display: inline-flex; align-items: center; gap: 7px;
    width: 100%; justify-content: center;
    padding: 10px 18px;
    border: 1.5px solid var(--color-border); border-radius: 99px;
    font-size: 12px; font-weight: 600;
    color: var(--color-text-muted); cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    font-family: inherit;
}
.studio-art-choose:hover { border-color: #7c3aed; color: #7c3aed; background: #f5f3ff; }
.studio-art-hint {
    font-size: 11px; color: var(--color-text-muted);
    text-align: center; line-height: 1.6;
}

/* Upload card refinements */
.studio-upload-card {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.studio-upload-card__head {
    display: flex; align-items: center; gap: 13px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}
.studio-step-num {
    width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #fff; font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(124,58,237,.35);
}
.studio-upload-card__title { font-size: 14px; font-weight: 700; color: var(--color-text); }

/* Dropzone */
.studio-dropzone { transition: background .2s; }
.studio-dropzone.up-dropzone--over,
.studio-dropzone.studio-dropzone--over { background: #f5f3ff; }
.studio-drop-inner {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 16px;
    padding: 52px 28px; cursor: pointer; text-align: center;
    border: 2px dashed transparent;
    transition: border-color .2s;
}
.studio-dropzone:hover .studio-drop-inner,
.studio-dropzone.up-dropzone--over .studio-drop-inner { border-color: #c4b5fd; }
.studio-drop-icon {
    width: 76px; height: 76px; border-radius: 20px;
    background: linear-gradient(135deg, #ede9fe, #dbeafe);
    display: flex; align-items: center; justify-content: center;
    color: #7c3aed;
    box-shadow: 0 4px 20px rgba(124,58,237,.15);
    transition: transform .2s, box-shadow .2s;
}
.studio-dropzone:hover .studio-drop-icon {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(124,58,237,.25);
}
.studio-drop-title {
    font-size: 15px; font-weight: 700; color: var(--color-text);
    margin: 0;
}
.studio-drop-hint {
    font-size: 12px; color: var(--color-text-muted); margin: 0;
}
.studio-drop-browse {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 24px; border-radius: 99px;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
    color: #fff; font-size: 13px; font-weight: 700;
    cursor: pointer; box-shadow: 0 3px 12px rgba(124,58,237,.35);
    transition: opacity .15s, transform .15s, box-shadow .15s;
    font-family: inherit;
}
.studio-drop-browse:hover {
    opacity: .88; transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(124,58,237,.45);
}
.studio-drop-file-row {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 22px;
    background: #f5f3ff; border-top: 1px solid #e9d5ff;
}
.studio-drop-file-icon { color: #7c3aed; flex-shrink: 0; }
.studio-drop-file-name {
    flex: 1; font-size: 13px; font-weight: 600;
    color: var(--color-text); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.studio-drop-file-remove {
    background: none; border: none; cursor: pointer;
    color: var(--color-text-muted); display: flex;
    align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 6px;
    transition: background .12s, color .12s;
}
.studio-drop-file-remove:hover { background: #fce7f3; color: #ef4444; }

@keyframes studioFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Metadata step — form layout inside upload card */
.studio-fields-col {
    flex: 1; display: flex; flex-direction: column; gap: 18px;
    padding: 26px 24px; min-width: 0;
}
.studio-fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.studio-fields-footer {
    display: flex; align-items: center;
    justify-content: space-between; gap: 12px;
    padding-top: 16px; border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.studio-pub-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.studio-pub-toggle-text { font-size: 13px; font-weight: 500; color: var(--color-text); }
.studio-toggle-input { display: none; }
.studio-toggle-track {
    width: 38px; height: 21px; border-radius: 99px;
    background: var(--color-border); position: relative; transition: background .2s; flex-shrink: 0;
}
.studio-toggle-track::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 17px; height: 17px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15);
    transition: transform .2s;
}
.studio-toggle-input:checked ~ .studio-toggle-track          { background: #7c3aed; }
.studio-toggle-input:checked ~ .studio-toggle-track::after   { transform: translateX(17px); }

/* Library list in upload page */
.studio-library-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.studio-library-title { font-size: 15px; font-weight: 700; color: var(--color-text); margin: 0; }
.studio-library-count { font-size: 11px; color: var(--color-text-muted); background: var(--color-bg); border: 1px solid var(--color-border); padding: 2px 10px; border-radius: 99px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .studio-hero          { padding: 30px 16px 26px; margin: -16px -16px 0; }
    .studio-stats         { flex-wrap: wrap; }
    .studio-stat          { min-width: 140px; }
    .studio-body          { padding: 20px 16px; gap: 20px; }
    .studio-album-grid    { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
    .studio-meta-body     { flex-direction: column; }
    .studio-art-col       { width: 100%; border-right: none; border-bottom: 1px solid var(--color-border); padding: 20px; }
    .studio-fields-row    { grid-template-columns: 1fr; }
    .studio-form__grid    { grid-template-columns: 1fr; }
    .studio-hero__title   { font-size: 22px; }
    .studio-hero__right   { width: 100%; }
}

/* ============================================================
   STUDIO v3 — Professional visual overhaul
   ============================================================ */

/* ── Page head refresh ───────────────────────────────────────────────────── */
.studio-pg-head {
    background: linear-gradient(90deg,#fff 0%,#faf9ff 100%) !important;
    border-bottom: 1.5px solid #ede9fe !important;
    border-left: 4px solid #7c3aed !important;
}
.studio-pg-head__icon {
    box-shadow: 0 6px 20px rgba(124,58,237,.32) !important;
}

/* ── KPI bar upgrade ─────────────────────────────────────────────────────── */
.studio-kpi-bar {
    background: #fff !important;
    border-bottom: 1px solid #ede9fe !important;
    padding: 0 !important;
}
.studio-kpi__val { letter-spacing: -.03em !important; }

/* ── Card upgrade ────────────────────────────────────────────────────────── */
.studio-card {
    box-shadow: 0 1px 3px rgba(0,0,0,.05),0 6px 24px rgba(0,0,0,.04) !important;
    border-color: #e5e7eb !important;
}

/* ── Upload dropzone ─────────────────────────────────────────────────────── */
.studio-dropzone {
    display: flex; flex-direction: column;
    border: 2px dashed var(--color-border);
    border-radius: 16px;
    background: var(--color-bg);
    overflow: hidden;
    transition: border-color .18s, background .18s;
}
.studio-dropzone.up-dropzone--over {
    border-color: #7c3aed;
    background: #f5f3ff;
}

.studio-drop-inner {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px; padding: 48px 24px; text-align: center;
}
.studio-drop-icon {
    width: 72px; height: 72px;
    background: linear-gradient(135deg,#ede9fe,#dbeafe);
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    color: #7c3aed; margin-bottom: 4px;
}
.studio-drop-title  { font-size: 17px; font-weight: 700; color: var(--color-text); margin: 0; }
.studio-drop-hint   { font-size: 12px; color: var(--color-text-muted); margin: 0; }
.studio-drop-browse {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 24px;
    background: linear-gradient(135deg,#7c3aed,#2563eb);
    color: #fff; border-radius: 99px;
    font-size: 13px; font-weight: 700;
    cursor: pointer; transition: opacity .15s;
    margin-top: 4px;
}
.studio-drop-browse:hover { opacity: .88; }

.studio-drop-file-row {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px;
    background: #f5f3ff;
    border-top: 1px solid #e9d5ff;
}
.studio-drop-file-icon { color: #7c3aed; flex-shrink: 0; }
.studio-drop-file-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-drop-file-remove {
    background: none; border: none; cursor: pointer;
    color: var(--color-text-muted); display: flex; align-items: center;
    padding: 4px; border-radius: 6px;
    transition: color .12s, background .12s;
}
.studio-drop-file-remove:hover { color: #ef4444; background: #fef2f2; }

/* ── Upload wizard ───────────────────────────────────────────────────────── */
.studio-upload-wizard {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 22px; align-items: start;
}
.studio-upload-main  { display: flex; flex-direction: column; gap: 16px; }
.studio-upload-aside { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; }

/* Upload card (step wrapper) */
.studio-upload-card {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
}
.studio-upload-card__head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 22px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.studio-step-num {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg,#7c3aed,#2563eb);
    color: #fff; font-size: 12px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.studio-upload-card__title { font-size: 14px; font-weight: 700; color: var(--color-text); }
.studio-upload-card > .studio-dropzone,
.studio-upload-card > .studio-fields-col { padding: 0; }

.studio-fields-col { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.studio-fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.studio-fields-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding-top: 16px;
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}

/* Publish toggle */
.studio-pub-toggle {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; user-select: none;
}
.studio-pub-toggle-text { font-size: 13px; font-weight: 600; color: var(--color-text); }

/* ── Art panel ────────────────────────────────────────────────────────────── */
.studio-art-panel {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: 16px; overflow: hidden;
}
.studio-art-panel__head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
    font-size: 10px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--color-text-muted);
    display: flex; align-items: center; gap: 7px;
}
.studio-art-panel__body {
    padding: 20px;
    display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.studio-art-box {
    width: 100%; aspect-ratio: 1;
    background: linear-gradient(135deg,#ede9fe,#dbeafe);
    border-radius: 14px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid #e5e7eb; position: relative;
}
.studio-art-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.studio-art-box__ph {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; color: #a78bfa; font-size: 12px;
    font-weight: 600; text-transform: uppercase;
    letter-spacing: .08em;
}
.studio-art-choose {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px;
    border: 1.5px solid var(--color-border);
    border-radius: 99px; font-size: 12px; font-weight: 600;
    color: var(--color-text); cursor: pointer;
    transition: border-color .14s, color .14s, background .14s;
    background: var(--color-surface);
}
.studio-art-choose:hover { border-color: #7c3aed; color: #7c3aed; background: #f5f3ff; }
.studio-art-hint {
    font-size: 11px; color: var(--color-text-muted);
    text-align: center; line-height: 1.55;
}

/* ── Tips card inside upload aside ──────────────────────────────────────── */
.studio-tips-card {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: 14px; padding: 18px 20px;
}
.studio-tips-card__label {
    font-size: 10px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--color-text-muted); margin: 0 0 12px;
}
.studio-tips-card__list {
    margin: 0; padding: 0 0 0 16px;
    display: flex; flex-direction: column; gap: 8px;
    font-size: 12px; color: var(--color-text-muted); line-height: 1.55;
    list-style: disc;
}

/* ── Upload toggle ────────────────────────────────────────────────────────── */
.studio-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.studio-toggle-track {
    width: 38px; height: 21px; border-radius: 99px;
    background: var(--color-border); position: relative;
    transition: background .18s; flex-shrink: 0; display: block;
}
.studio-toggle-track::after {
    content: ''; position: absolute;
    width: 15px; height: 15px; border-radius: 50%;
    background: #fff; top: 3px; left: 3px;
    transition: transform .18s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.studio-toggle-input:checked + .studio-toggle-track { background: #7c3aed; }
.studio-toggle-input:checked + .studio-toggle-track::after { transform: translateX(17px); }

/* ── Album grid upgrade ──────────────────────────────────────────────────── */
.studio-album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px,1fr));
    gap: 20px;
}
.studio-album-card {
    border-radius: 14px !important;
    transition: box-shadow .2s, transform .18s, border-color .18s !important;
}
.studio-album-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.12) !important;
    border-color: #c4b5fd !important;
}

/* ── Responsive studio additions ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .studio-upload-wizard { grid-template-columns: 1fr; }
    .studio-upload-aside  { position: static; }
}
@media (max-width: 640px) {
    .studio-pg-head { padding: 16px !important; }
    .studio-pg-head__title { font-size: 18px !important; }
    .studio-fields-row { grid-template-columns: 1fr; }
    .studio-kpi-bar { flex-wrap: wrap; }
    .studio-kpi { min-width: 50%; }
    .studio-album-grid { grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 14px; }
    .studio-body { padding: 18px 14px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ARTIST STUDIO — Professional Page System
   Pages: /admin/upload · /admin/tracks · /my/albums
   Design: Sidebar nav + clean page header + content area
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Studio page shell ─────────────────────────────────────────────────── */
.sp-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ── Page header ────────────────────────────────────────────────────────── */
.sp-header {
    flex-shrink: 0;
    padding: 22px 28px 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.sp-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.sp-header__left { display: flex; flex-direction: column; gap: 4px; }
.sp-header__eyebrow {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: #7c3aed;
}
.sp-header__eyebrow svg { opacity: .8; }
.sp-header__title {
    font-size: 22px; font-weight: 800; color: var(--color-text);
    line-height: 1.15; letter-spacing: -.3px; margin: 0;
}
.sp-header__subtitle {
    font-size: 13px; color: var(--color-text-muted); margin: 0;
}
.sp-header__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Stat pills in header */
.sp-header__stats {
    display: flex; align-items: center; gap: 16px;
    padding: 0 0 0 2px; margin-bottom: 18px;
}
.sp-stat {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 14px 7px 10px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}
.sp-stat__icon {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; flex-shrink: 0;
}
.sp-stat__icon--purple { background: #f5f3ff; color: #7c3aed; }
.sp-stat__icon--blue   { background: #eff6ff; color: #2563eb; }
.sp-stat__icon--green  { background: #f0fdf4; color: #16a34a; }
.sp-stat__icon--amber  { background: #fffbeb; color: #d97706; }
.sp-stat__icon--red    { background: #fef2f2; color: #dc2626; }
.sp-stat__val { font-size: 15px; font-weight: 800; color: var(--color-text); line-height: 1; }
.sp-stat__lbl { font-size: 11px; color: var(--color-text-muted); line-height: 1; margin-top: 1px; }
.sp-stat__text { display: flex; flex-direction: column; }

/* Stand-alone tab bar (wraps sp-tabs when outside sp-header) */
.sp-tabs-bar {
    background: var(--color-surface);
    border-bottom: 2px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
    padding: 0 28px;
}

/* Studio tab nav inside the header */
.sp-tabs {
    display: flex; align-items: flex-end; gap: 0;
    border-bottom: 1px solid var(--color-border);
}
.sp-tabs__item {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 16px;
    font-size: 13px; font-weight: 500; color: var(--color-text-muted);
    border-radius: 0;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    text-decoration: none; cursor: pointer;
    background: transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.sp-tabs__item:hover { color: var(--color-text); background: rgba(124,58,237,.04); }
.sp-tabs__item.is-active {
    color: #7c3aed; font-weight: 600;
    border-bottom-color: #7c3aed;
    background: transparent;
}
.sp-tabs__item.is-active svg { color: #7c3aed; }

/* ── Page body ──────────────────────────────────────────────────────────── */
.sp-body {
    flex: 1; overflow-y: auto; padding: 24px 28px;
    display: flex; flex-direction: column; gap: 20px;
}

/* ── Toolbar (filter + search row) ─────────────────────────────────────── */
.sp-toolbar {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
}
.sp-toolbar__search {
    display: flex; align-items: center; gap: 8px;
    flex: 1; min-width: 200px; max-width: 360px;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 0 14px; height: 38px;
    transition: border-color var(--transition-fast);
}
.sp-toolbar__search:focus-within { border-color: #7c3aed; }
.sp-toolbar__search input {
    flex: 1; border: none; outline: none;
    font-size: 13px; background: transparent; color: var(--color-text);
}
.sp-toolbar__search svg { color: var(--color-text-muted); flex-shrink: 0; }
.sp-toolbar__filter {
    display: flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 14px;
    background: var(--color-surface); border: 1.5px solid var(--color-border);
    border-radius: var(--radius-pill); font-size: 12px; font-weight: 600;
    color: var(--color-text); cursor: pointer;
    transition: border-color var(--transition-fast);
}
.sp-toolbar__filter:hover { border-color: #7c3aed; }
.sp-toolbar__filter select {
    border: none; outline: none; background: transparent;
    font-size: 12px; font-weight: 600; cursor: pointer;
    color: var(--color-text);
}
.sp-toolbar__spacer { flex: 1; }

/* ── Track table ────────────────────────────────────────────────────────── */
.sp-table-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    flex-shrink: 0;
}
.sp-table {
    width: 100%; border-collapse: collapse;
    font-size: 13px;
}
.sp-table thead tr {
    background: #fafafa;
    border-bottom: 1px solid var(--color-border);
}
.sp-table th {
    padding: 8px 14px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--color-text-muted); text-align: left;
    white-space: nowrap;
}
.sp-table td {
    padding: 9px 14px; vertical-align: middle;
    border-bottom: 1px solid #f4f4f6;
    color: var(--color-text);
}
.sp-table tbody tr:last-child td { border-bottom: none; }
.sp-table tbody tr:hover td { background: #fafbff; }

/* Track row */
.sp-track-thumb {
    width: 38px; height: 38px; border-radius: 8px;
    object-fit: cover; background: #f0f0f5; flex-shrink: 0;
}
.sp-track-thumb--placeholder {
    width: 38px; height: 38px; border-radius: 8px;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    display: flex; align-items: center; justify-content: center;
    color: #7c3aed; flex-shrink: 0;
}
.sp-track-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sp-track-info__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-track-info__title {
    font-weight: 700; font-size: 13px; color: var(--color-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-track-info__meta {
    font-size: 11px; color: var(--color-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: var(--radius-pill);
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.sp-badge--published { background: #f0fdf4; color: #16a34a; }
.sp-badge--draft     { background: #fafafa; color: #9ca3af; border: 1px solid #e5e7eb; }
.sp-badge--genre     { background: #f5f3ff; color: #7c3aed; }
.sp-duration { font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* Table actions */
.sp-table-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.sp-action-btn {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 7px;
    border: 1px solid transparent; cursor: pointer;
    background: transparent; transition: background var(--transition-fast);
}
.sp-action-btn--play  { color: #7c3aed; }
.sp-action-btn--play:hover  { background: #f5f3ff; }
.sp-action-btn--play.is-playing { background: #f5f3ff; color: #7c3aed; }
.sp-action-btn--edit  { color: #0891b2; }
.sp-action-btn--edit:hover  { background: #ecfeff; }
.sp-action-btn--album { color: #7c3aed; }
.sp-action-btn--album:hover { background: #f5f3ff; }
.sp-action-btn--vis   { color: #2563eb; }
.sp-action-btn--vis:hover   { background: #eff6ff; }
.sp-action-btn--del   { color: #ef4444; }
.sp-action-btn--del:hover   { background: #fef2f2; }

/* Empty state */
.sp-empty {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 40px 20px; text-align: center;
    color: var(--color-text-muted);
}
.sp-empty__icon {
    width: 60px; height: 60px; border-radius: 50%;
    background: #f5f3ff; display: flex; align-items: center; justify-content: center;
    color: #7c3aed;
}
.sp-empty__title { font-size: 16px; font-weight: 700; color: var(--color-text); }
.sp-empty__sub   { font-size: 13px; max-width: 300px; line-height: 1.6; }

/* ── Upload page — two-column form ─────────────────────────────────────── */
.sp-upload-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px) { .sp-upload-grid { grid-template-columns: 1fr; } }

.sp-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.sp-card__header {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    background: #fafafa;
}
.sp-card__header-icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: #f5f3ff; color: #7c3aed;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sp-card__header-title { font-size: 13px; font-weight: 700; color: var(--color-text); margin: 0; }
.sp-card__header-sub   { font-size: 11px; color: var(--color-text-muted); }
.sp-card__body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }

/* Dropzone */
.sp-dropzone {
    border: 2px dashed #d1d5db;
    border-radius: var(--radius-md);
    padding: 32px 20px; text-align: center;
    cursor: pointer; transition: all var(--transition-fast);
    background: #fafafa; display: flex; flex-direction: column;
    align-items: center; gap: 10px;
}
.sp-dropzone:hover, .sp-dropzone.is-dragover {
    border-color: #7c3aed; background: #faf5ff;
}
.sp-dropzone__icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: #f5f3ff; display: flex; align-items: center;
    justify-content: center; color: #7c3aed;
}
.sp-dropzone__title { font-size: 14px; font-weight: 700; color: var(--color-text); }
.sp-dropzone__sub   { font-size: 12px; color: var(--color-text-muted); line-height: 1.5; }
.sp-dropzone__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 16px;
    border: 1px solid #6d28d9;
    border-radius: 4px;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    margin-top: 4px;
    box-shadow: 0 2px 7px rgba(109,40,217,.25);
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.sp-dropzone__btn:hover { background: linear-gradient(135deg, #6d28d9, #1d4ed8); border-color: #5b21b6; box-shadow: 0 4px 12px rgba(109,40,217,.32); transform: translateY(-1px); }
.sp-dropzone__btn:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(109,40,217,.24); }
.sp-dropzone__btn:focus-visible { outline: 3px solid rgba(124,58,237,.28); outline-offset: 3px; }

/* Selected file chip */
.sp-file-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; border-radius: 4px;
    background: linear-gradient(90deg, #f5f3ff, #eff6ff); border: 1px solid #ddd6fe;
    box-shadow: 0 1px 3px rgba(76,29,149,.08);
}
.sp-file-chip__icon { color: #7c3aed; flex-shrink: 0; }
.sp-file-chip__name { font-size: 13px; font-weight: 600; flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-file-chip__remove { background: none; border: none; cursor: pointer;
    color: #9ca3af; padding: 2px; display: flex; border-radius: 4px; }
.sp-file-chip__remove:hover { color: #ef4444; background: #fef2f2; }

/* Form fields */
.sp-field { display: flex; flex-direction: column; gap: 5px; }
.sp-field label { font-size: 12px; font-weight: 700; color: var(--color-text); }
.sp-field .sp-required { color: #ef4444; }
.sp-field input, .sp-field select, .sp-field textarea {
    width: 100%; padding: 9px 12px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm); font-size: 13px;
    color: var(--color-text); background: var(--color-surface);
    font-family: inherit; transition: border-color var(--transition-fast);
    outline: none;
}
.sp-field input:focus, .sp-field select:focus, .sp-field textarea:focus {
    border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.08);
}
.sp-field textarea { resize: vertical; min-height: 80px; }
.sp-field .sp-hint { font-size: 11px; color: var(--color-text-muted); line-height: 1.5; }
.sp-field .sp-error { font-size: 11px; color: #ef4444; }

.sp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Toggle (published) — `~` not `+`: Thymeleaf's th:field inserts a hidden
   "_published" input right after the checkbox. */
.sp-toggle { display: flex; align-items: center; gap: 10px; position: relative; }
.sp-toggle input[type=checkbox] {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sp-toggle__track {
    width: 40px; height: 22px; border-radius: 11px;
    background: #d1d5db; cursor: pointer; position: relative;
    transition: background var(--transition-fast); flex-shrink: 0;
}
.sp-toggle input:checked ~ .sp-toggle__track { background: #7c3aed; }
.sp-toggle input:focus-visible ~ .sp-toggle__track { outline: 2px solid #7c3aed; outline-offset: 2px; }
.sp-toggle__track::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 16px; height: 16px; border-radius: 50%; background: #fff;
    transition: transform var(--transition-fast);
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.sp-toggle input:checked ~ .sp-toggle__track::after { transform: translateX(18px); }
.sp-toggle__label { font-size: 13px; font-weight: 600; color: var(--color-text); cursor: pointer; }

/* Cover art upload */
.sp-art-drop {
    aspect-ratio: 1; border: 2px dashed #d1d5db;
    border-radius: var(--radius-md); cursor: pointer;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px;
    position: relative; overflow: hidden;
    transition: border-color var(--transition-fast);
    background: #fafafa;
}
.sp-art-drop:hover { border-color: #7c3aed; background: #faf5ff; }
.sp-art-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-art-drop__label {
    font-size: 12px; font-weight: 700; color: var(--color-text-muted); text-align: center; z-index: 1;
}
.sp-art-drop__sub { font-size: 11px; color: #9ca3af; z-index: 1; }
.sp-art-drop__icon { color: #9ca3af; z-index: 1; }

/* Submit button */
.sp-submit-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px; border-radius: var(--radius-md);
    background: var(--color-studio-grad); color: #fff;
    font-size: 14px; font-weight: 700; border: none; cursor: pointer;
    transition: opacity var(--transition-fast);
}
.sp-submit-btn:hover { opacity: .9; }
.sp-submit-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Album grid ─────────────────────────────────────────────────────────── */
.sp-album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
}
.sp-album-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
    display: flex; flex-direction: column;
}
.sp-album-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sp-album-card__art {
    aspect-ratio: 1; position: relative; overflow: hidden;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    display: flex; align-items: center; justify-content: center;
}
.sp-album-card__art img { width: 100%; height: 100%; object-fit: cover; }
.sp-album-card__art-placeholder { color: #7c3aed; opacity: .5; }
.sp-album-card__art-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    opacity: 0; transition: opacity var(--transition-fast);
}
.sp-album-card:hover .sp-album-card__art-overlay { opacity: 1; }
.sp-album-card__art-btn {
    width: 36px; height: 36px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.8); background: rgba(255,255,255,.15);
    color: #fff; display: flex; align-items: center; justify-content: center;
    cursor: pointer; backdrop-filter: blur(4px); transition: background var(--transition-fast);
}
.sp-album-card__art-btn:hover { background: rgba(255,255,255,.3); }
.sp-album-card__body {
    padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1;
}
.sp-album-card__title {
    font-size: 14px; font-weight: 700; color: var(--color-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Home Page — Songs Card
═══════════════════════════════════════════════════════════════════════════ */
.hm-songs-card {
    background: var(--color-surface);
    border-radius: 8px;
    border: 1px solid var(--color-border, #e5e7eb);
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.hm-songs-card__hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 10px;
    background: linear-gradient(to right, rgba(124,58,237,.06) 0%, transparent 60%);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    position: relative;
}
.hm-songs-card__hd::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #7c3aed, #2563eb);
    border-radius: 0 2px 2px 0;
}
.hm-songs-card__hd-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hm-songs-card__icon {
    width: 16px; height: 16px;
    color: #7c3aed;
    flex-shrink: 0;
}
.hm-songs-card__title {
    font-size: 12px;
    font-weight: 800;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0;
}
.hm-songs-card__badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    background: #f5f3ff;
    color: #7c3aed;
    min-width: 1.4em;
    text-align: center;
    line-height: 1.6;
}
.hm-songs-card__see-all {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color .15s;
    white-space: nowrap;
    padding: 4px 0;
}
.hm-songs-card__see-all:hover { color: #7c3aed; }
.hm-songs-card__hd-right { display: flex; align-items: center; gap: 12px; }
.hm-songs-card__more {
    border: 0;
    background: transparent;
    color: #7c3aed;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 0;
    cursor: pointer;
    white-space: nowrap;
}
.hm-songs-card__more:hover { color: #5b21b6; }
.hm-songs-card__more:disabled { cursor: wait; opacity: .6; }
/* Compact chart rows */
.hm-songs-card .hm-song-row {
    min-height: 50px;
    padding: 7px 12px;
    border-bottom: 1px solid #edf0f4;
    border-radius: 0;
    background: #fff;
}
.hm-songs-card .hm-song-row:last-child { border-bottom: 0; }
.hm-songs-card .hm-song__left { gap: 12px; }
.hm-songs-card .hm-song__num-wrap {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f1f3f7;
}
.hm-songs-card .hm-song-row:nth-child(1) .hm-song__num-wrap { background: #fff5d8; }
.hm-songs-card .hm-song-row:nth-child(2) .hm-song__num-wrap { background: #eef1f5; }
.hm-songs-card .hm-song-row:nth-child(3) .hm-song__num-wrap { background: #f8e9dd; }
.hm-songs-card .hm-song-row:hover .hm-song__num,
.hm-songs-card .hm-song-row--active .hm-song__num { opacity: 1; }
.hm-songs-card .hm-song__play-btn {
    inset: 0;
    width: 42px;
    height: 42px;
    border-radius: 6px;
    background: rgba(20, 24, 35, .7);
    transform: none;
}
.hm-songs-card .hm-song__play-btn:hover {
    background: rgba(91, 63, 192, .9);
    transform: none !important;
}
.hm-songs-card .hm-song__art,
.hm-songs-card .hm-song__art--fallback {
    width: 42px;
    height: 42px;
    border-radius: 6px;
}
.hm-songs-card .hm-song__title {
    font-size: 13px;
    font-weight: 650;
}
.hm-songs-card .hm-song__artist { font-size: 11.5px; }
.hm-songs-card .hm-song__right { min-width: 104px; }
.hm-songs-card .hm-song__action-btn {
    border: 1px solid transparent;
    background: #f7f8fa;
}
.hm-songs-load-more { min-height: 28px; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--color-text-muted); font-size: 11px; opacity: 0; transition: opacity .2s ease; }
.hm-songs-load-more[aria-hidden="false"] { opacity: 1; }
.hm-songs-load-more.is-loading { color: var(--color-brand, #7c3aed); }
.hm-songs-load-more__spinner { width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: hm-songs-spin .7s linear infinite; display: none; }
.hm-songs-load-more.is-loading .hm-songs-load-more__spinner { display: inline-block; }
@keyframes hm-songs-spin { to { transform: rotate(360deg); } }
.hm-songs-card .hm-song-row:hover {
    z-index: 1;
    background: #f8f7ff;
    box-shadow: inset 3px 0 #7c3aed;
}
.hm-songs-card .hm-song-row--active {
    background: #f3f1ff;
    box-shadow: inset 3px 0 #7c3aed;
}

/* Scrollable body — shows ~6 rows, then scrolls */
.hm-songs-card__bd {
    max-height: 342px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.hm-songs-card__bd:hover {
    scrollbar-color: rgba(0,0,0,.18) transparent;
}
.hm-songs-card__bd::-webkit-scrollbar { width: 3px; }
.hm-songs-card__bd::-webkit-scrollbar-track { background: transparent; }
.hm-songs-card__bd::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 99px;
}
.hm-songs-card__bd:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); }
.hm-songs-card__bd:hover::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.35); }

/* Rank badge top 3 */
.hm-song__num--gold   { color: #d97706 !important; font-weight: 800; }
.hm-song__num--silver { color: #64748b !important; font-weight: 800; }
.hm-song__num--bronze { color: #b45309 !important; font-weight: 800; }

/* ═══════════════════════════════════════════════════════════════════════════
   Home Page — Playlists Card
═══════════════════════════════════════════════════════════════════════════ */
.hm-playlists-card {
    background: var(--color-surface);
    border-radius: 8px;
    border: 1px solid var(--color-border, #e5e7eb);
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.hm-playlists-card__hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 10px;
    background: linear-gradient(to right, rgba(37,99,235,.06) 0%, transparent 60%);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    position: relative;
}
.hm-playlists-card__hd::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #2563eb, #0ea5e9);
    border-radius: 0 2px 2px 0;
}
.hm-playlists-card__hd-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hm-playlists-card__icon {
    width: 16px; height: 16px;
    color: #2563eb;
    flex-shrink: 0;
}
.hm-playlists-card__title {
    font-size: 12px;
    font-weight: 800;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0;
}
.hm-playlists-card__badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    background: #eff6ff;
    color: #2563eb;
    min-width: 1.4em;
    text-align: center;
    line-height: 1.6;
}
.hm-playlists-card__hd-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hm-playlists-card__pager { display: flex; align-items: center; gap: 12px; }
.hm-playlists-next { border: 0; background: transparent; color: #2563eb; font: inherit; font-size: 11px; font-weight: 700; padding: 4px 0; cursor: pointer; white-space: nowrap; }
.hm-playlists-next:hover { color: #1d4ed8; }
.hm-playlists-slider { overflow: hidden; }
.playlist-grid--paged { display: flex; gap: 0; transition: transform .38s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.hm-playlists-page { flex: 0 0 100%; min-width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.hm-playlists-card__see-all {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color .15s;
    white-space: nowrap;
}
.hm-playlists-card__see-all:hover { color: #2563eb; }
.hm-playlists-card__new {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    letter-spacing: .03em;
}
.hm-playlists-card__new:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
}
.hm-playlists-card__body { padding: 14px; }

/* Varied gradient per playlist chip */
.playlist-chip { text-align: left; align-items: flex-start; justify-content: flex-end; flex-direction: column; padding: 12px; position: relative; overflow: hidden; }
.playlist-chip__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .66;
    z-index: 0;
}
.playlist-chip::after {
    content: '';
    position: absolute;
    top: 10px; right: 10px;
    width: 28px; height: 28px;
    background: rgba(255,255,255,.13);
    border-radius: 50%;
    z-index: 1;
}
.playlist-chip:nth-child(1)  { background: linear-gradient(140deg,#7c3aed,#2563eb); box-shadow: 0 3px 14px rgba(124,58,237,.38); }
.playlist-chip:nth-child(2)  { background: linear-gradient(140deg,#0ea5e9,#0d9488); box-shadow: 0 3px 14px rgba(14,165,233,.38); }
.playlist-chip:nth-child(3)  { background: linear-gradient(140deg,#e2445c,#7c3aed); box-shadow: 0 3px 14px rgba(226,68,92,.38); }
.playlist-chip:nth-child(4)  { background: linear-gradient(140deg,#059669,#0ea5e9); box-shadow: 0 3px 14px rgba(5,150,105,.38); }
.playlist-chip:nth-child(5)  { background: linear-gradient(140deg,#d97706,#dc2626); box-shadow: 0 3px 14px rgba(217,119,6,.38); }
.playlist-chip:nth-child(6)  { background: linear-gradient(140deg,#6d28d9,#d946ef); box-shadow: 0 3px 14px rgba(109,40,217,.38); }
.playlist-chip:nth-child(7)  { background: linear-gradient(140deg,#0f766e,#2563eb); box-shadow: 0 3px 14px rgba(15,118,110,.38); }
.playlist-chip:nth-child(8)  { background: linear-gradient(140deg,#be123c,#7c3aed); box-shadow: 0 3px 14px rgba(190,18,60,.38); }
.playlist-chip:nth-child(1):hover  { box-shadow: 0 8px 24px rgba(124,58,237,.55); }
.playlist-chip:nth-child(2):hover  { box-shadow: 0 8px 24px rgba(14,165,233,.55); }
.playlist-chip:nth-child(3):hover  { box-shadow: 0 8px 24px rgba(226,68,92,.55); }
.playlist-chip:nth-child(4):hover  { box-shadow: 0 8px 24px rgba(5,150,105,.55); }
.playlist-chip:nth-child(5):hover  { box-shadow: 0 8px 24px rgba(217,119,6,.55); }
.playlist-chip:nth-child(6):hover  { box-shadow: 0 8px 24px rgba(109,40,217,.55); }
.playlist-chip:nth-child(7):hover  { box-shadow: 0 8px 24px rgba(15,118,110,.55); }
.playlist-chip:nth-child(8):hover  { box-shadow: 0 8px 24px rgba(190,18,60,.55); }
.playlist-chip__name { font-weight: 700; font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; text-shadow: 0 1px 4px rgba(0,0,0,.35); position: relative; z-index: 1; }
.playlist-chip__count { font-size: 11px; opacity: .8; text-shadow: 0 1px 3px rgba(0,0,0,.35); position: relative; z-index: 1; }

/* Playlist empty state */
.playlist-empty {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 24px 16px;
    text-align: center;
}
.playlist-empty__icon { opacity: .25; }
.playlist-empty__text { font-size: 13px; color: var(--color-text-muted); }
.playlist-empty__cta {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: #7c3aed;
    border: 1px solid #ddd6fe; border-radius: 8px;
    padding: 8px 18px; text-decoration: none; cursor: pointer;
    background: #f5f3ff; transition: background .15s;
}
.playlist-empty__cta:hover { background: #ede9fe; }

/* Context menu — danger item */
.song-ctx-menu__item--danger { color: #dc2626; }
.song-ctx-menu__item--danger svg { color: #dc2626; }
.song-ctx-menu__item--danger:hover { background: #fef2f2; color: #dc2626; }
.sp-album-card__artist { font-size: 12px; color: var(--color-text-muted); }
.sp-album-card__meta {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px;
}
.sp-album-card__year { font-size: 11px; color: var(--color-text-muted); }
.sp-album-card__tracks {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    color: #7c3aed; background: #f5f3ff;
    padding: 2px 8px; border-radius: var(--radius-pill);
}
.sp-album-card__footer {
    padding: 10px 16px; border-top: 1px solid var(--color-border);
    display: flex; gap: 8px;
}
.sp-album-card__btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 7px; border-radius: var(--radius-sm);
    font-size: 11px; font-weight: 700; cursor: pointer; border: 1px solid;
    transition: background var(--transition-fast);
}
.sp-album-card__btn--edit {
    color: #2563eb; border-color: #bfdbfe; background: #eff6ff;
}
.sp-album-card__btn--edit:hover { background: #dbeafe; }
.sp-album-card__btn--del {
    color: #ef4444; border-color: #fecaca; background: #fef2f2;
}
.sp-album-card__btn--del:hover { background: #fee2e2; }

/* ── Modal (edit album) ─────────────────────────────────────────────────── */
.sp-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.48);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9000; padding: 20px;
    opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}
.sp-modal-backdrop.is-open { opacity: 1; pointer-events: all; visibility: visible; }
.sp-modal {
    background: var(--color-surface); border-radius: var(--radius-lg);
    width: 100%; max-width: 520px;
    box-shadow: 0 24px 64px rgba(0,0,0,.28), 0 4px 16px rgba(0,0,0,.12);
    transform: scale(.94) translateY(14px);
    transition: transform .25s cubic-bezier(.34,1.2,.64,1);
}
.sp-modal-backdrop.is-open .sp-modal { transform: scale(1) translateY(0); }
/* ── Delete / danger variant ────────────────────────────────────────────── */
.sp-modal__header { border-bottom: none; padding-bottom: 4px; }
.sp-modal__body > p { padding-top: 0; }
.sp-modal--danger .sp-modal__header {
    background: linear-gradient(135deg,rgba(239,68,68,.06) 0%,transparent 70%);
    border-bottom: 1px solid rgba(239,68,68,.12);
}
.sp-modal--danger .sp-modal__title { color: #dc2626; }
.sp-modal__icon-row {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 22px 0;
}
.sp-modal__icon-circle {
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sp-modal__icon-circle--danger { background: rgba(239,68,68,.12); color: #ef4444; }
.sp-modal__icon-circle--info   { background: rgba(37,99,235,.1);  color: #2563eb; }
.sp-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid var(--color-border);
}
.sp-modal__title { font-size: 16px; font-weight: 800; color: var(--color-text); margin: 0; }
.sp-modal__close {
    width: 30px; height: 30px; border-radius: 7px; border: none;
    background: none; cursor: pointer; display: flex; align-items: center;
    justify-content: center; color: var(--color-text-muted);
    transition: background var(--transition-fast);
}
.sp-modal__close:hover { background: var(--color-surface-alt); color: var(--color-text); }
.sp-modal__body { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.sp-modal__footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 22px; border-top: 1px solid var(--color-border);
}

/* Shared buttons */
.sp-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px; border-radius: var(--radius-md);
    font-size: 13px; font-weight: 700; cursor: pointer;
    border: none; text-decoration: none; transition: opacity var(--transition-fast);
    font-family: inherit;
}
.sp-btn--primary {
    background: var(--color-studio-grad); color: #fff;
}
.sp-btn--primary:hover { opacity: .88; }
.sp-btn--secondary {
    background: var(--color-surface); color: var(--color-text);
    border: 1.5px solid var(--color-border);
}
.sp-btn--secondary:hover { background: var(--color-surface-alt); }
.sp-btn--danger {
    background: #fef2f2; color: #ef4444;
    border: 1.5px solid #fecaca;
}
.sp-btn--danger:hover { background: #fee2e2; }
.sp-btn--sm { padding: 6px 14px; font-size: 12px; }
/* Active page button in JS pagination */
.sp-btn.is-active {
    background: #7c3aed; color: #fff; border-color: #7c3aed;
    box-shadow: 0 2px 8px rgba(124,58,237,.2);
}
.sp-btn.is-active:hover { background: #6d28d9; border-color: #6d28d9; }

/* Flash alert */
.sp-alert {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    border-radius: var(--radius-md); font-size: 13px; font-weight: 600;
}
.sp-alert--success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.sp-alert--error   { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.sp-alert--info    { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }

/* ══════════════════════════════════════════════════════════════════════════
   ARTIST & TRACK MANAGEMENT — Gradient hero  (.sp-grad-hero-*)
   Replaces the flat .sp-header on admin artists / tracks pages.
   Reuses the site-wide purple→blue→sky gradient identity.
══════════════════════════════════════════════════════════════════════════ */

.sp-grad-hero {
    position: relative;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 60%, #0ea5e9 100%);
    overflow: hidden;
    flex-shrink: 0;
}
/* Subtle dark vignette */
.sp-grad-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.06) 0%, rgba(0,0,0,.36) 100%);
    pointer-events: none;
}
/* Decorative background circle (top-right) */
.sp-grad-hero::before {
    content: '';
    position: absolute;
    top: -70px; right: -70px;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: rgba(255,255,255,.055);
    pointer-events: none;
}

/* Wave decoration at bottom of hero */
.sp-grad-hero__waves {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    pointer-events: none;
}
.sp-grad-hero__waves svg { width: 100%; height: 100%; }
.sp-grad-hero__wave--1 { fill: rgba(255,255,255,0.07); }
.sp-grad-hero__wave--2 { fill: rgba(255,255,255,0.11); }

/* Inner content layout */
.sp-grad-hero__body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 30px 28px 54px;
}

/* Left block: eyebrow + title + subtitle */
.sp-grad-hero__left { display: flex; flex-direction: column; gap: 4px; }

.sp-grad-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.78);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    width: fit-content;
    margin-bottom: 8px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.sp-grad-hero__title {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 900;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.1;
    text-shadow: 0 2px 12px rgba(0,0,0,.22);
}
.sp-grad-hero__sub {
    font-size: 13px;
    color: rgba(255,255,255,.62);
    margin: 0;
    max-width: 440px;
    line-height: 1.55;
}

/* Right block: stats card + CTA button */
.sp-grad-hero__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

/* Glass stats cluster */
.sp-grad-hero__stats {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    padding: 14px 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 28px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.14);
}

.sp-grad-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 18px;
    gap: 3px;
}
.sp-grad-stat__value {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -.02em;
}
.sp-grad-stat__label {
    font-size: 10px;
    color: rgba(255,255,255,.52);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    white-space: nowrap;
}
.sp-grad-stat__divider {
    width: 1px;
    height: 30px;
    background: rgba(255,255,255,.18);
    flex-shrink: 0;
}

/* CTA / action button inside the gradient hero */
.sp-grad-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    background: rgba(255,255,255,.14);
    border: 1.5px solid rgba(255,255,255,.30);
    border-radius: var(--radius-pill);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
    text-decoration: none;
    white-space: nowrap;
}
.sp-grad-hero-btn:hover {
    background: rgba(255,255,255,.24);
    border-color: rgba(255,255,255,.50);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
/* Primary variant (white pill with purple text) */
.sp-grad-hero-btn--primary {
    background: rgba(255,255,255,.95);
    color: #7c3aed;
    border-color: rgba(255,255,255,.95);
    box-shadow: 0 2px 12px rgba(0,0,0,.14);
}
.sp-grad-hero-btn--primary:hover {
    background: #fff;
    border-color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(0,0,0,.20);
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .sp-grad-hero__body { padding: 24px 20px 48px; flex-direction: column; align-items: flex-start; gap: 16px; }
    .sp-grad-hero__right { align-items: flex-start; }
    .sp-grad-hero__stats { padding: 12px 16px; }
    .sp-grad-stat { padding: 0 12px; }
    .sp-grad-stat__value { font-size: 18px; }
}
@media (max-width: 540px) {
    .sp-grad-hero__stats { flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-radius: 10px; }
    .sp-grad-stat { padding: 4px 10px; }
    .sp-grad-stat__divider { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ADMIN CRUD POLISH  — compact, professional table + card refinements
══════════════════════════════════════════════════════════════════════════ */

/* ── Page section: tighten top gap now that hero is full-width ─────────── */
.acp-section { padding: 20px 24px 32px; }

/* ── Table: thead tinted background, richer header text ──────────────────── */
.acp-table thead tr { background: #f5f7ff; }
.acp-table th {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #5b6278;
    padding: 10px 16px;
    border-bottom: 2px solid #e5e8f0;
}
.acp-table td {
    padding: 11px 16px;
    font-size: 13px;
    color: var(--color-text);
    border-bottom: 1px solid #f0f2f7;
    vertical-align: middle;
}
.acp-table tbody tr:last-child td { border-bottom: none; }
.acp-table tbody tr:hover { background: #f8f9ff; }

/* ── Table wrap: softened border + shadow ────────────────────────────────── */
.acp-table-wrap {
    border-radius: 10px;
    border: 1px solid #e5e8f0;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    overflow-x: auto;
}

/* ── Card: header bar with purple accent ──────────────────────────────────── */
.acp-card {
    background: var(--color-surface);
    border: 1px solid #e5e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    padding: 0;
}
.acp-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 13px 18px;
    background: #f8f9ff;
    border-bottom: 1px solid #e5e8f0;
    margin-bottom: 0;
}
.acp-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    padding-left: 10px;
    border-left: 3px solid #7c3aed;
}
.acp-card-title svg { color: #7c3aed; flex-shrink: 0; }
.acp-card .acp-empty { padding: 32px 18px; }
.acp-card .acp-table-wrap { border-radius: 0; border: none; box-shadow: none; }

/* ── Count chip ───────────────────────────────────────────────────────────── */
.acp-count { background: #ede9fe; color: #7c3aed; font-size: 10px; font-weight: 800; }

/* ── Flash alerts: flex layout for icon ──────────────────────────────────── */
.acp-flash {
    padding: 11px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Form panel: left accent + tinted header ──────────────────────────────── */
.rd-form-panel {
    background: var(--color-surface);
    border: 1px solid #c4b8f8;
    border-left: 4px solid #7c3aed;
    border-radius: 10px;
    margin-bottom: 18px;
    overflow: hidden;
}
.rd-form-panel__header {
    background: #f5f2ff;
    border-bottom: 1px solid #e2d9fc;
    padding: 13px 18px;
}
.rd-form-panel__title { font-size: 13px; font-weight: 700; color: #4c1d95; gap: 8px; }
.rd-form-panel__close {
    width: 28px; height: 28px;
    border-radius: 6px;
    border: 1px solid #d8d0f8;
    background: rgba(124,58,237,.06);
    color: #7c3aed;
    transition: background .15s, color .15s;
}
.rd-form-panel__close:hover { background: rgba(124,58,237,.14); color: #4c1d95; border-color: #b8a8f0; }

/* ── Inline-edit row highlight ────────────────────────────────────────────── */
.acp-edit-row > td { background: #fafbff !important; border-top: 2px solid #7c3aed !important; }
.gn-edit-row > td { background: #fafbff !important; border-top: 2px solid #7c3aed !important; }

/* ── Action buttons: pill style ──────────────────────────────────────────── */
.acp-action-btn {
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
}
.acp-action-btn:hover { opacity: .85; transform: translateY(-1px); }
.acp-action-btn--warn { background: #fff8ec; color: #a05c10; border-color: #f5d080; }
.acp-action-btn--ok   { background: #edfaf3; color: #0f6d38; border-color: #80d4a0; }

/* ── Submit + cancel buttons ─────────────────────────────────────────────── */
.acp-submit-btn {
    height: 34px;
    padding: 0 18px;
    border-radius: var(--radius-sm);
    background: #7c3aed;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: opacity .15s;
    margin-top: 0;
}
.acp-submit-btn:hover { opacity: .88; }
.acp-submit-btn--sm { height: 30px; padding: 0 14px; font-size: 12px; }
.acp-cancel-btn {
    height: 34px;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.acp-cancel-btn:hover { background: var(--color-border); color: var(--color-text); }

/* ── Roles grid: polished cards ──────────────────────────────────────────── */
.acp-roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.acp-role-card {
    background: var(--color-surface);
    border: 1px solid #e5e8f0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 8px rgba(0,0,0,.05);
    transition: box-shadow .18s, transform .18s;
}
.acp-role-card:hover { box-shadow: 0 4px 18px rgba(124,58,237,.12); transform: translateY(-2px); }
.acp-role-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f2f7;
}
.acp-role-card__icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(124,58,237,.30);
}
.acp-role-card__name { font-size: 15px; font-weight: 800; color: var(--color-text); margin: 0; }
.acp-role-card__full-name { font-size: 10px; color: var(--color-text-muted); font-family: monospace; margin-top: 2px; display: block; }
.acp-role-card__perms-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 10px; }
.acp-perm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.acp-perm-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: #ede9fe;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
}
.acp-role-card__no-perms { font-size: 12px; color: var(--color-text-muted); font-style: italic; margin: 0; }
.acp-hint { font-size: 12px; color: var(--color-text-muted); margin-top: 16px; }

/* ── Pagination: pill controls ───────────────────────────────────────────── */
.acp-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 13px 18px;
    border-top: 1px solid #f0f2f7;
}
.acp-pagination__info { font-size: 12px; color: var(--color-text-muted); }
.acp-pagination__controls { display: flex; align-items: center; gap: 4px; }
.acp-pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    border: 1px solid transparent;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.acp-pg-btn:hover { background: #ede9fe; color: #7c3aed; border-color: #ddd6fe; }
.acp-pg-btn--active { background: #7c3aed; color: #fff; border-color: #7c3aed; box-shadow: 0 2px 8px rgba(124,58,237,.25); }
.acp-pg-btn--active:hover { background: #6d28d9; color: #fff; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.acp-empty { text-align: center; padding: 40px 24px; font-size: 13px; color: var(--color-text-muted); font-style: italic; }

/* ── Toolbar refinements ─────────────────────────────────────────────────── */
.acp-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.acp-toolbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.acp-per-page-label { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.acp-per-page-select {
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 12px;
    cursor: pointer;
    outline: none;
}
.acp-per-page-select:focus { border-color: #7c3aed; }

/* ── Icon action buttons ──────────────────────────────────────────────────── */
.acp-icon-action {
    width: 28px; height: 28px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: var(--color-bg);
    cursor: pointer;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
    padding: 0;
}
.acp-icon-action:hover { background: #ede9fe; color: #7c3aed; border-color: #ddd6fe; }
.acp-icon-action--danger:hover { background: rgba(239,68,68,.08); color: #ef4444; border-color: rgba(239,68,68,.25); }
.acp-icon-action--warn:hover   { background: rgba(234,179,8,.08); color: #a16207; border-color: rgba(234,179,8,.30); }



/* =============================================================================
   LIKES PAGE  (.lk-*)
============================================================================= */

.lk { width: 100%; padding: 0 0 48px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.lk-hero {
    position: relative;
    background: linear-gradient(135deg, #4a0222 0%, #3b0764 50%, #0c1445 100%);
    margin: 0 0 16px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 6px 36px rgba(74,2,34,.32);
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px 32px;
    min-height: 110px;
}
.lk-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 50% 90% at 8% 50%, rgba(220,38,38,.22) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 75% 25%, rgba(124,58,237,.20) 0%, transparent 70%);
    pointer-events: none;
}
.lk-hero__icon {
    position: relative; z-index: 1;
    flex-shrink: 0;
    width: 68px; height: 68px;
    border-radius: 50%;
    background: rgba(220,38,38,.16);
    border: 1px solid rgba(220,38,38,.32);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fca5a5;
    animation: lk-heartbeat 2.4s ease-in-out infinite;
}
@keyframes lk-heartbeat {
    0%, 100% { transform: scale(1); }
    14%       { transform: scale(1.12); }
    28%       { transform: scale(1); }
    42%       { transform: scale(1.08); }
    70%       { transform: scale(1); }
}
.lk-hero__text { position: relative; z-index: 1; flex: 1; min-width: 0; }
.lk-hero__title {
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 900;
    color: #fff;
    letter-spacing: -.5px;
    line-height: 1.1;
    margin: 0 0 5px;
    text-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.lk-hero__sub {
    font-size: 13px;
    color: rgba(255,255,255,.65);
    margin: 0;
}

/* ── Admin Track Edit — two-column layout + info panel ───────────────────── */

/* Two-column grid: main form left, info panel right */
.te-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    align-items: start;
}
.te-main {
    min-width: 0;
}

/* ── Info panel ── */
.te-info-panel {
    --color-text: #1f2937;
    --color-text-muted: #64748b;
    --color-border: #e2e8f0;
    --color-surface: #ffffff;
    --color-surface-alt: #f8fafc;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    position: sticky;
    top: 80px;
    box-shadow: 0 4px 16px rgba(15,23,42,.08);
}

/* Cover art */
.te-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: #f8fafc;
    overflow: hidden;
}
.te-cover__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.te-cover__fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}
.te-cover__fallback--hidden { display: none; }

/* Status / ID badge row */
.te-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 0;
    flex-wrap: wrap;
}
.te-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}
.te-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.te-badge--pub {
    background: rgba(22,163,74,.15);
    color: #4ade80;
}
.te-badge--pub .te-badge__dot { background: #4ade80; }
.te-badge--draft {
    background: rgba(234,179,8,.12);
    color: #fbbf24;
}
.te-badge--draft .te-badge__dot { background: #fbbf24; }
.te-badge--id {
    background: var(--color-surface-alt, #2a2a40);
    color: var(--color-text-muted);
    font-weight: 500;
    margin-left: auto;
}

/* Stats row */
.te-stats {
    display: flex;
    align-items: stretch;
    padding: 14px 14px 10px;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
}
.te-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 0;
    font-size: 11px;
    color: var(--color-text-muted);
}
.te-stat + .te-stat {
    border-left: 1px solid var(--color-border);
}
.te-stat svg { color: var(--color-text-muted); }
.te-stat__val {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.te-stat__lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.te-stat--likes svg { color: #c0576e; }
.te-stat--likes .te-stat__val { color: #e27290; }

/* Metadata section */
.te-meta {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.te-meta__heading {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 2px;
}
.te-meta__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
}
.te-meta__key {
    flex-shrink: 0;
    width: 72px;
    color: var(--color-text-muted);
    font-weight: 500;
}
.te-meta__val {
    flex: 1;
    min-width: 0;
    color: var(--color-text);
    word-break: break-all;
}
.te-meta__val--code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    background: var(--color-surface-alt, #22223a);
    border-radius: 4px;
    padding: 2px 5px;
    color: var(--color-text-muted);
    overflow-wrap: break-word;
}
.te-meta__val--mono {
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
}
.te-meta__val--link {
    color: var(--color-brand, #7c3aed);
    text-decoration: none;
}
.te-meta__val--link:hover { text-decoration: underline; }

/* Linked entities */
.te-linked {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.te-link-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--color-text);
    text-decoration: none;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background .12s ease;
}
.te-link-row:hover { background: var(--color-surface-alt, #22223a); }
.te-link-row svg { flex-shrink: 0; color: var(--color-text-muted); }
.te-link-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.te-link-row__ext { margin-left: auto; color: var(--color-text-muted); flex-shrink: 0; opacity: 0; transition: opacity .12s; }
.te-link-row:hover .te-link-row__ext { opacity: 1; }

/* Quick actions */
.te-actions {
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.te-action-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    background: #f8fafc;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    transition: background .12s ease, border-color .12s ease;
    width: 100%;
    text-align: left;
}
.te-action-btn:hover {
    background: var(--color-surface, #1e1e38);
    border-color: var(--color-brand, #7c3aed);
    color: var(--color-brand, #7c3aed);
}
.te-action-btn svg { flex-shrink: 0; }

/* Responsive: stack to single column on narrow screens */
@media (max-width: 960px) {
    .te-layout {
        grid-template-columns: 1fr;
    }
    .te-info-panel {
        position: static;
        max-width: 440px;
    }
}

/* =============================================================================
   ARTIST DISCOVERY SECTIONS
============================================================================= */
.ast-discovery {
    margin: 24px 0 30px;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, .8fr);
    gap: 18px;
}
.ast-discovery-panel {
    min-width: 0;
    padding: 20px;
    overflow: hidden;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(218,225,236,.96);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(15,23,42,.06);
}
.ast-discovery-panel--new {
    background:
        radial-gradient(circle at 100% 0%, rgba(124,58,237,.09), transparent 34%),
        linear-gradient(145deg, #fff, #faf9ff);
}
.ast-discovery-panel--recommended {
    background:
        radial-gradient(circle at 100% 0%, rgba(37,99,235,.08), transparent 34%),
        linear-gradient(145deg, #fff, #f8fbff);
}
.ast-discovery-panel__header {
    min-height: 40px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.ast-discovery-panel__eyebrow,
.ast-directory-heading__eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #7c3aed;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.ast-discovery-panel__header h2,
.ast-directory-heading h2 {
    margin: 0;
    color: #172033;
    font-size: 20px;
    letter-spacing: -.03em;
}
.ast-discovery-panel__hint {
    padding: 5px 9px;
    color: #737d90;
    background: rgba(255,255,255,.78);
    border: 1px solid #e1e6ef;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
}
.ast-new-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
}
.ast-new-card {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    background: #fff;
    border: 1px solid #e2e6ef;
    border-radius: 14px;
    box-shadow: 0 5px 16px rgba(15,23,42,.055);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ast-new-card:hover,
.ast-new-card:focus-visible {
    color: inherit;
    border-color: rgba(124,58,237,.28);
    box-shadow: 0 13px 26px rgba(42,31,89,.13);
    transform: translateY(-3px);
    outline: none;
}
.ast-new-card__portrait {
    position: relative;
    aspect-ratio: 1.2 / 1;
    overflow: hidden;
    background: #eef1f8;
}
.ast-new-card__portrait img,
.ast-recommended-card__avatar img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.ast-editorial-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #7770a8;
    background:
        radial-gradient(circle at 50% 20%, rgba(124,58,237,.12), transparent 40%),
        linear-gradient(145deg, #f5f2ff, #e7edf9);
}
.ast-editorial-fallback svg {
    width: 29%;
    height: 29%;
    opacity: .74;
}
.ast-new-card__badge {
    position: absolute;
    left: 9px;
    top: 9px;
    z-index: 2;
    padding: 3px 7px;
    color: #fff;
    background: rgba(109,40,217,.90);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 7px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}
.ast-new-card__body {
    padding: 10px 11px 12px;
}
.ast-new-card__body h3,
.ast-recommended-card__info h3 {
    min-width: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #20283a;
    font-size: 12px;
    font-weight: 800;
}
.ast-new-card__body h3 span,
.ast-recommended-card__info h3 span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ast-new-card__body h3 svg,
.ast-recommended-card__info h3 svg {
    flex-shrink: 0;
    color: #1877f2;
}
.ast-new-card__body p {
    min-width: 0;
    margin: 4px 0 0;
    display: flex;
    gap: 4px;
    overflow: hidden;
    color: #8992a3;
    font-size: 9px;
    white-space: nowrap;
}
.ast-new-card__body p span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.ast-recommended-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.ast-recommended-card {
    min-height: 58px;
    padding: 6px 8px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto 20px;
    align-items: center;
    gap: 10px;
    color: inherit;
    border: 1px solid transparent;
    border-radius: 12px;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.ast-recommended-card:hover,
.ast-recommended-card:focus-visible {
    color: inherit;
    background: rgba(255,255,255,.88);
    border-color: #dfe5ef;
    transform: translateX(2px);
    outline: none;
}
.ast-recommended-card__avatar {
    position: relative;
    width: 44px;
    height: 44px;
    overflow: hidden;
    background: #edf1f8;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(15,23,42,.12);
}
.ast-recommended-card__info {
    min-width: 0;
}
.ast-recommended-card__info p {
    margin: 4px 0 0;
    display: flex;
    gap: 7px;
    color: #8992a3;
    font-size: 9px;
}
.ast-recommended-card__signal {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #d9466f;
    font-size: 9px;
    font-weight: 800;
}
.ast-recommended-card__signal--listeners {
    color: #5368a7;
}
.ast-recommended-card__arrow {
    color: #8d96a7;
    transition: color .16s ease, transform .16s ease;
}
.ast-recommended-card:hover .ast-recommended-card__arrow {
    color: #6d28d9;
    transform: translateX(2px);
}
.ast-directory-heading {
    margin: 0 2px 14px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.ast-directory-heading p {
    max-width: 470px;
    margin: 0;
    color: #7d8799;
    font-size: 11px;
    line-height: 1.5;
    text-align: right;
}

@media (max-width: 1050px) {
    .ast-discovery {
        grid-template-columns: 1fr;
    }
    .ast-discovery-panel--recommended .ast-recommended-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .ast-discovery {
        margin-top: 18px;
    }
    .ast-new-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ast-discovery-panel--recommended .ast-recommended-list {
        grid-template-columns: 1fr;
    }
    .ast-directory-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
    .ast-directory-heading p {
        text-align: left;
    }
}

@media (max-width: 430px) {
    .ast-discovery-panel {
        padding: 16px;
        border-radius: 16px;
    }
    .ast-new-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .ast-new-grid::-webkit-scrollbar {
        display: none;
    }
    .ast-new-card {
        min-width: 138px;
        scroll-snap-align: start;
    }
}

/* =============================================================================
   ARTIST DETAIL: SONGS + VISUAL DISCOGRAPHY
============================================================================= */
.page-artist-detail .adet-hero {
    margin-bottom: 22px;
}
.page-artist-detail :is(.adet-tracks-section, .adet-media-section, .adet-bio-section) {
    margin-bottom: 18px;
    padding: 22px 24px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(218,225,236,.96);
    border-radius: 18px;
    box-shadow: 0 9px 28px rgba(15,23,42,.06);
}
.page-artist-detail .adet-tracks-section {
    overflow: hidden;
}
.adet-content-heading {
    margin-bottom: 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.adet-content-heading__eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #7c3aed;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.adet-content-heading .adet-section-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #172033;
    font-size: clamp(19px, 2.2vw, 24px);
    letter-spacing: -.03em;
}
.adet-content-heading .adet-section-count {
    min-width: 25px;
    height: 22px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6d28d9;
    background: #f1edff;
    border: 1px solid #e5ddff;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
}
.adet-content-heading > p {
    max-width: 470px;
    margin: 0;
    color: #7d8799;
    font-size: 11px;
    line-height: 1.55;
    text-align: right;
}
.page-artist-detail .adet-tracks-table-wrap {
    overflow: hidden;
    border: 1px solid #e5e9f0;
    border-radius: 14px;
}
.page-artist-detail #adet-songs-list {
    padding: 5px 8px;
}
.page-artist-detail #adet-songs-list .song-row {
    min-height: 56px;
    margin: 0;
    border-bottom: 1px solid rgba(226,231,239,.86);
    border-radius: 0;
}
.page-artist-detail #adet-songs-list .song-row:last-child {
    border-bottom: 0;
}
.page-artist-detail #adet-songs-list .song-row:hover {
    background: linear-gradient(90deg, rgba(124,58,237,.055), rgba(37,99,235,.025));
}

.adet-media-section {
    position: relative;
    overflow: hidden;
}
.adet-media-rail-wrap {
    position: relative;
    margin-inline: -4px;
}
.adet-media-rail {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 3px 4px 12px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: #d9ddea transparent;
}
.adet-media-rail:focus-visible {
    outline: 3px solid rgba(124,58,237,.17);
    outline-offset: 3px;
    border-radius: 12px;
}
.adet-media-card {
    min-width: 210px;
    width: 210px;
    padding: 0;
    overflow: hidden;
    flex: 0 0 auto;
    color: inherit;
    text-align: left;
    background: #fff;
    border: 1px solid #e1e6ef;
    border-radius: 15px;
    box-shadow: 0 6px 18px rgba(15,23,42,.07);
    scroll-snap-align: start;
    cursor: pointer;
    transition: transform .19s ease, box-shadow .19s ease, border-color .19s ease;
}
.adet-media-card:hover,
.adet-media-card:focus-visible {
    color: inherit;
    border-color: rgba(124,58,237,.30);
    box-shadow: 0 16px 32px rgba(32,24,75,.15);
    transform: translateY(-4px);
    outline: none;
}
.adet-media-card__art {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #edf1f8;
}
.adet-media-card__art > img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .35s ease;
}
.adet-media-card:hover .adet-media-card__art > img {
    transform: scale(1.035);
}
.adet-media-card__fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.70);
    background:
        radial-gradient(circle at 72% 20%, rgba(56,189,248,.35), transparent 35%),
        linear-gradient(145deg, #261052, #173e72);
}
.adet-media-card__fallback svg {
    width: 45px;
    height: 45px;
}
.adet-media-card__type {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 2;
    padding: 4px 8px;
    color: #fff;
    background: rgba(12,18,40,.68);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}
.adet-media-card--album .adet-media-card__type {
    background: rgba(109,40,217,.82);
}
.adet-media-card__open {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(12,18,40,.66);
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 50%;
    opacity: 0;
    transform: translateY(4px);
    backdrop-filter: blur(8px);
    transition: opacity .17s ease, transform .17s ease;
}
.adet-media-card:hover .adet-media-card__open,
.adet-media-card:focus-visible .adet-media-card__open {
    opacity: 1;
    transform: none;
}
.adet-media-card__body {
    padding: 12px 13px 14px;
}
.adet-media-card__body h3 {
    margin: 0;
    overflow: hidden;
    color: #20283a;
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.adet-media-card__body p {
    min-height: 14px;
    margin: 5px 0 0;
    display: flex;
    gap: 8px;
    color: #8992a3;
    font-size: 9px;
}
.adet-media-rail__fade {
    position: absolute;
    top: 0;
    bottom: 10px;
    z-index: 3;
    width: 32px;
    pointer-events: none;
}
.adet-media-rail__fade--left {
    left: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.96), transparent);
}
.adet-media-rail__fade--right {
    right: 0;
    background: linear-gradient(-90deg, rgba(255,255,255,.96), transparent);
}
.adet-media-empty {
    min-height: 146px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #7c8799;
    text-align: left;
    background:
        radial-gradient(circle at 15% 120%, rgba(124,58,237,.09), transparent 38%),
        #fafbfe;
    border: 1px dashed #ccd4e1;
    border-radius: 14px;
}
.adet-media-empty__icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: #7168a2;
    background: #f0edff;
    border-radius: 16px;
}
.adet-media-empty strong {
    display: block;
    margin-bottom: 4px;
    color: #30394b;
    font-size: 13px;
}
.adet-media-empty p {
    max-width: 430px;
    margin: 0;
    font-size: 11px;
    line-height: 1.55;
}

body.adet-lightbox-open {
    overflow: hidden;
}
.adet-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9950;
    padding: 28px;
    display: grid;
    place-items: center;
    background: rgba(2,8,23,.76);
    backdrop-filter: blur(12px);
}
.adet-lightbox[hidden] {
    display: none;
}
.adet-lightbox__dialog {
    max-width: min(920px, 92vw);
    max-height: 88vh;
    padding: 10px;
    overflow: hidden;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 18px;
    box-shadow: 0 34px 90px rgba(0,0,0,.44);
}
.adet-lightbox__dialog img {
    display: block;
    max-width: 100%;
    max-height: calc(88vh - 62px);
    object-fit: contain;
    border-radius: 12px;
}
.adet-lightbox__dialog p {
    margin: 9px 4px 3px;
    color: #4d586b;
    font-size: 11px;
    text-align: center;
}
.adet-lightbox__close {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 1;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    cursor: pointer;
}
.adet-lightbox__close:hover {
    background: rgba(255,255,255,.20);
}

@media (hover: none), (pointer: coarse) {
    .adet-media-card__open {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 700px) {
    .page-artist-detail :is(.adet-tracks-section, .adet-media-section, .adet-bio-section) {
        padding: 18px;
        border-radius: 16px;
    }
    .adet-content-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
    .adet-content-heading > p {
        text-align: left;
    }
    .adet-media-card {
        min-width: 176px;
        width: 176px;
    }
}

@media (max-width: 480px) {
    .adet-media-empty {
        align-items: flex-start;
        flex-direction: column;
    }
    .adet-lightbox {
        padding: 16px;
    }
    .adet-lightbox__close {
        top: 14px;
        right: 14px;
    }
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.lk-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 14px;
    padding: 64px 24px;
    text-align: center;
    background: var(--color-surface);
    border-radius: 16px;
    border: 1px solid var(--color-border);
}
.lk-empty svg { color: #fca5a5; opacity: .7; }
.lk-empty p { font-size: 14px; color: var(--color-text-muted); margin: 0; }
.lk-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 24px; border-radius: 99px;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #fff; font-size: 13px; font-weight: 700;
    text-decoration: none;
    transition: opacity .15s, transform .15s;
    margin-top: 4px;
    box-shadow: 0 4px 14px rgba(124,58,237,.3);
}
.lk-cta:hover { opacity: .88; transform: translateY(-1px); }

/* ── Tracks section card ─────────────────────────────────────────────── */
.lk-tracks-section {
    background: var(--color-surface);
    border-radius: 4px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    margin-bottom: 20px;
}
.lk-section-hd {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px;
    border-left: 3px solid #7c3aed;
    background: linear-gradient(to right, rgba(124,58,237,.06), transparent);
    border-bottom: 1px solid var(--color-border);
}
.lk-section-hd__title {
    font-size: 13px; font-weight: 700;
    color: var(--color-text); letter-spacing: .01em;
}
.lk-section-hd__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; padding: 0 7px;
    border-radius: 99px;
    background: rgba(124,58,237,.1); color: #7c3aed;
    font-size: 11px; font-weight: 700;
}

/* ── Row overrides ───────────────────────────────────────────────────── */
.lk-list .lk-row:last-child { border-bottom: none; }
.lk-art-wrap {
    position: relative;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
}
.lk-art-wrap .sng-art-wrap {
    display: block;
    width: 100%;
    height: 100%;
    position: static;
    border: 0;
    border-radius: 0;
}
.lk-art-wrap .song-row__play {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
    background: rgba(19, 15, 45, .58) !important;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.lk-row:hover .lk-art-wrap .song-row__play,
.lk-row.song-row--active .lk-art-wrap .song-row__play,
.lk-art-wrap:focus-within .song-row__play { opacity: 1; }
.lk-art-wrap .song-row__play:hover { background: rgba(96, 48, 190, .72) !important; }
.lk-row:hover .song-row__index { opacity: 1; }
.lk-row .song-row__actions { opacity: 1; }

/* Unlike button — always red */
.lk-unlike { color: #ef4444 !important; }
.lk-unlike:hover { background: rgba(239,68,68,.08) !important; color: #dc2626 !important; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .lk-hero { padding: 20px; gap: 16px; min-height: auto; }
    .lk-hero__icon { width: 54px; height: 54px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATION STACK  (.acp-toast-*)
   Usage (JS): acpToast('Message', 'error'|'success'|'warning'|'info')
══════════════════════════════════════════════════════════════════════════ */
.acp-toast-stack {
    position: fixed;
    bottom: 88px; /* clear player bar */
    right: 20px;
    z-index: 10500;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 360px;
    width: calc(100vw - 40px);
}
.acp-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 12px;
    background: var(--color-surface, #1a1a2e);
    border: 1px solid var(--color-border, rgba(255,255,255,.1));
    border-left: 4px solid var(--color-border);
    box-shadow: 0 8px 28px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.10);
    pointer-events: all;
    animation: acpToastIn .26s cubic-bezier(.22,.61,.36,1);
    transition: opacity .2s ease, transform .2s ease;
}
.acp-toast.is-hiding { opacity: 0; transform: translateX(12px); }
@keyframes acpToastIn {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0);    }
}
.acp-toast--error   { border-left-color: #ef4444; }
.acp-toast--success { border-left-color: #22c55e; }
.acp-toast--warning { border-left-color: #f59e0b; }
.acp-toast--info    { border-left-color: #7c3aed; }
.acp-toast__icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}
.acp-toast--error   .acp-toast__icon { color: #ef4444; }
.acp-toast--success .acp-toast__icon { color: #22c55e; }
.acp-toast--warning .acp-toast__icon { color: #f59e0b; }
.acp-toast--info    .acp-toast__icon { color: #7c3aed; }
.acp-toast__msg {
    flex: 1;
    font-size: 13px;
    color: var(--color-text, #fff);
    line-height: 1.5;
    font-weight: 500;
}
.acp-toast__close {
    background: none; border: none;
    color: var(--color-text-muted, #aaa);
    cursor: pointer;
    padding: 0; margin: 0;
    flex-shrink: 0;
    display: flex; align-items: center;
    border-radius: 4px;
    transition: color .14s;
}
.acp-toast__close:hover { color: var(--color-text, #fff); }

/* =============================================================================
   ROLES PAGE ENHANCEMENTS  (.acp-role-*)
============================================================================= */

.acp-role-card__info { flex: 1; min-width: 0; }
.acp-role-card__actions { display: flex; gap: 4px; flex-shrink: 0; }
.acp-icon-action--edit:hover { background: #ede9fe; color: #7c3aed; border-color: #ddd6fe; }

/* Create-role bar */
.acp-create-role-bar {
    background: var(--color-surface);
    border: 1px solid #e5e8f0;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 16px;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
}
.acp-create-role-bar__inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acp-create-role-bar__icon { color: #7c3aed; flex-shrink: 0; }
.acp-create-role-bar__label { font-size: 13px; font-weight: 700; color: var(--color-text); white-space: nowrap; }
.acp-create-role-bar__hint { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }
.acp-create-role-bar__input {
    flex: 1; min-width: 160px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 13px;
    outline: none;
    transition: border-color .15s;
}
.acp-create-role-bar__input:focus { border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,.12); }

/* Permission editor inside role card */
.acp-role-perm-editor {
    padding-top: 14px;
    border-top: 1px solid #f0f2f7;
    margin-top: 4px;
}
.acp-perm-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px 20px;
    margin-bottom: 16px;
}
.acp-perm-group { }
.acp-perm-group__title {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7c3aed;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #ede9fe;
}
.acp-perm-check {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 0;
    cursor: pointer;
}
.acp-perm-check:hover .acp-perm-cb__name { color: var(--color-text); }
.acp-perm-cb { accent-color: #7c3aed; width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; }
.acp-perm-cb__name { font-size: 11px; font-weight: 500; color: var(--color-text-muted); user-select: none; }
.acp-role-perm-editor__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #f0f2f7;
}

/* Core role delete button looks muted */
.js-delete-role.is-core { opacity: .35; cursor: not-allowed; }

/* Alert banners */
.acp-alert {
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 14px;
}
.acp-alert--error   { background: rgba(239,68,68,.1); color: #b91c1c; border: 1px solid rgba(239,68,68,.25); }
.acp-alert--success { background: rgba(34,197,94,.1); color: #15803d; border: 1px solid rgba(34,197,94,.25); }

/* =============================================================================
   SETTINGS PAGE  (.st-*)
============================================================================= */

/* ── Two-column layout ───────────────────────────────────────────────────── */
.sp-body.st-layout {
    flex-direction: row;
    padding: 0;
    overflow: hidden;
    gap: 0;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

/* ── Left sidebar navigation ─────────────────────────────────────────────── */
.st-nav {
    width: 220px;
    flex-shrink: 0;
    overflow-y: auto;
    padding: 16px 10px;
    border-right: 1px solid #e5e7ef;
    background: linear-gradient(180deg, #fbfcff 0%, #f7f7fc 100%);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border, #e5e7ef) transparent;
}
.st-nav::-webkit-scrollbar { width: 4px; }
.st-nav::-webkit-scrollbar-track { background: transparent; }
.st-nav::-webkit-scrollbar-thumb { background: var(--color-border, #e5e7ef); border-radius: 4px; }

.st-nav-group {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e9ebf3;
}
.st-nav-group:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.st-nav-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 10px;
    margin: 0 0 7px;
    border: 0;
    background: transparent;
    color: #8a94a6;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left;
}
.st-nav-group-toggle::after {
    content: '⌄';
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    transition: transform .15s ease;
}
.st-nav-group.is-collapsed .st-nav-group-toggle::after { transform: rotate(-90deg); }
.st-nav-group-toggle:hover { color: #6d28d9; }
.st-nav-group-toggle:focus-visible { outline: 3px solid rgba(124,58,237,.22); outline-offset: 2px; border-radius: 4px; }
.st-nav-group.is-collapsed .st-nav-item { display: none; }
.st-nav-group:not(.is-collapsed) .st-nav-item {
    width: calc(100% - 10px);
    margin-left: 10px;
}
.st-nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
    white-space: nowrap;
    line-height: 1;
}
.st-nav-item:hover { background: #f0ecff; border-color: #e5ddff; color: #5b21b6; }
.st-nav-item.is-active {
    background: linear-gradient(90deg, #ede9fe, #f5f3ff);
    border-color: #ddd6fe;
    color: #6d28d9;
    font-weight: 600;
    box-shadow: inset 3px 0 0 #7c3aed;
}
.st-nav-item.is-active svg { color: #7c3aed; }
.st-nav-item svg { color: var(--color-text-muted); flex-shrink: 0; transition: color .12s; }
.st-nav-item:focus-visible { outline: 3px solid rgba(124,58,237,.22); outline-offset: 2px; }
.st-nav-item--link { display: flex; align-items: center; gap: 9px; }

/* ── Right scrollable content ────────────────────────────────────────────── */
.st-content {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 28px 36px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border, #e5e7ef) transparent;
}
.st-content::-webkit-scrollbar { width: 6px; }
.st-content::-webkit-scrollbar-track { background: transparent; }
.st-content::-webkit-scrollbar-thumb { background: var(--color-border, #e5e7ef); border-radius: 4px; }

/* ── Panels ──────────────────────────────────────────────────────────────── */
.st-panel { display: none; max-width: 680px; }
.st-panel.is-active { display: block; }

/* ── Responsive: stack sidebar below ~760px ──────────────────────────────── */
@media (max-width: 760px) {
    .sp-body.st-layout { flex-direction: column; overflow: visible; }
    .st-nav {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e5e7ef;
        padding: 8px 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        background: #fbfcff;
        scrollbar-width: none;
    }
    .st-nav::-webkit-scrollbar { display: none; }
    .st-nav-group { display: contents; }
    .st-nav-group-toggle { display: none; }
    .st-nav-group.is-collapsed .st-nav-item { display: flex; }
    .st-nav-item { width: auto; min-height: 34px; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
    .st-nav-group:not(.is-collapsed) .st-nav-item { width: auto; margin-left: 0; }
    .st-nav-item.is-active { box-shadow: inset 0 -2px 0 #7c3aed; }
    .st-content { padding: 20px 16px; overflow-y: visible; }
}


.st-section { margin-bottom: 16px; }
.st-section__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 4px;
}
.st-section__desc { font-size: 13px; color: var(--color-text-muted); margin: 0; line-height: 1.5; }

.st-divider {
    height: 1px;
    background: #f0f2f7;
    margin: 24px 0;
}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.st-form { }
.st-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 600px) { .st-form-grid { grid-template-columns: 1fr; } }
.st-field { display: flex; flex-direction: column; gap: 5px; }
.st-field--full { grid-column: 1 / -1; }
.st-field--inline { display: flex; flex-direction: column; gap: 5px; max-width: 360px; }
.st-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
}
.st-input, .st-select, .st-textarea {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 13px;
    padding: 8px 11px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
    box-sizing: border-box;
}
.st-input:focus, .st-select:focus, .st-textarea:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,.10);
}
.st-input:disabled { opacity: .55; cursor: not-allowed; }
.st-textarea { resize: vertical; line-height: 1.5; }
.st-select { height: 36px; cursor: pointer; }
.st-field-hint { font-size: 11px; color: var(--color-text-muted); line-height: 1.4; }
.st-field--wide { grid-column: 1 / -1; }
.st-logo-editor {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    background: var(--color-surface-1, #f9fafb);
}
.st-logo-preview {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--color-border, #e5e7eb);
    background: #fff;
}
.st-logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.st-logo-editor__controls {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.st-logo-remove {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: #b91c1c;
    cursor: pointer;
}
.st-logo-remove input { accent-color: #dc2626; }
@media (max-width: 600px) {
    .st-logo-editor { align-items: flex-start; flex-direction: column; }
}

/* ── Toggle switches ─────────────────────────────────────────────────────── */
.st-toggles { display: flex; flex-direction: column; gap: 0; }
.st-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f2f7;
}
.st-toggle-row:last-child { border-bottom: none; }
.st-toggle-row__info { flex: 1; min-width: 0; }
.st-toggle-row__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 2px;
}
.st-toggle-row__label--danger { color: #dc2626; }
.st-toggle-row__desc { font-size: 12px; color: var(--color-text-muted); line-height: 1.4; }

.st-toggle { position: relative; width: 42px; height: 24px; flex-shrink: 0; cursor: pointer; }
.st-toggle input { opacity: 0; width: 0; height: 0; }
.st-toggle__track {
    position: absolute; inset: 0;
    background: #d1d5db;
    border-radius: 12px;
    transition: background .2s;
}
.st-toggle__track::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    background: #fff;
    border-radius: 50%;
    top: 3px; left: 3px;
    transition: left .2s;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.st-toggle input:checked ~ .st-toggle__track { background: #7c3aed; }
.st-toggle input:checked ~ .st-toggle__track::after { left: 21px; }
.st-toggle__track--danger { }
.st-toggle input:checked ~ .st-toggle__track--danger { background: #dc2626; }

/* ── Radio card group (quality selector) ────────────────────────────────── */
.st-radio-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 4px;
}
.st-radio-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid #e5e8f0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: var(--color-bg);
}
.st-radio-card:has(input:checked) {
    border-color: #7c3aed;
    background: #faf5ff;
}
.st-radio-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.st-radio-card__content { flex: 1; }
.st-radio-card__name {
    display: block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text);
    margin-bottom: 2px;
}
.st-radio-card__desc { font-size: 11px; color: var(--color-text-muted); line-height: 1.4; }
.st-radio-card__dot {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    transition: border-color .15s;
}
.st-radio-card:has(input:checked) .st-radio-card__dot {
    border-color: #7c3aed;
    background: #7c3aed;
}
.st-radio-card:has(input:checked) .st-radio-card__dot::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #fff;
    border-radius: 50%;
}

/* ── Range slider ────────────────────────────────────────────────────────── */
.st-range-wrap { display: flex; align-items: center; gap: 10px; }
.st-range {
    flex: 1;
    height: 4px;
    accent-color: #7c3aed;
    cursor: pointer;
}
.st-range-val { font-size: 12px; font-weight: 700; color: #7c3aed; min-width: 48px; }

/* ── Save button ─────────────────────────────────────────────────────────── */
.st-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s, box-shadow .15s;
    box-shadow: 0 2px 10px rgba(124,58,237,.28);
}
.st-save-btn:hover { opacity: .9; box-shadow: 0 4px 16px rgba(124,58,237,.36); }
.st-save-btn:disabled { opacity: .6; cursor: not-allowed; }
.st-form-footer { display: flex; justify-content: flex-end; padding-top: 20px; }
.st-form-footer--sticky {
    position: sticky;
    bottom: 0;
    background: var(--color-bg);
    padding: 14px 0;
    border-top: 1px solid #f0f2f7;
    margin-top: 8px;
    z-index: 2;
}

/* ── Account info grid ───────────────────────────────────────────────────── */
.st-info-grid { display: flex; flex-direction: column; gap: 0; margin-bottom: 4px; }
.st-info-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f2f7;
    font-size: 13px;
}
.st-info-row:last-child { border-bottom: none; }
.st-info-label { font-weight: 600; color: var(--color-text-muted); width: 130px; flex-shrink: 0; }
.st-info-value { color: var(--color-text); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.st-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: #ede9fe;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
}
.st-badge--warn { background: #fef3c7; color: #92400e; border-color: #fde68a; }

/* ── Admin link card ─────────────────────────────────────────────────────── */
.st-admin-link-wrap { margin-top: 28px; }
.st-admin-link-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border-radius: 14px;
    text-decoration: none;
    transition: opacity .15s, transform .15s;
    box-shadow: 0 4px 18px rgba(49,46,129,.30);
}
.st-admin-link-card:hover { opacity: .92; transform: translateY(-1px); }
.st-admin-link-card__icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c4b5fd;
    flex-shrink: 0;
}
.st-admin-link-card__body { flex: 1; }
.st-admin-link-card__title {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 2px;
}
.st-admin-link-card__desc { font-size: 12px; color: #a5b4fc; line-height: 1.4; }
.st-admin-link-card__arrow { color: #a5b4fc; flex-shrink: 0; }

/* ── Admin settings sections ─────────────────────────────────────────────── */
.st-form--admin { max-width: none; }
.st-admin-section {
    background: var(--color-surface);
    border: 1px solid #e5e8f0;
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 14px;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
}
.st-admin-section__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f2f7;
    color: #7c3aed;
}
.st-admin-section__header h2 {
    font-size: 14px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0;
}

/* =============================================================================
   ACP BUTTON ALIASES  (mirrors sp-btn for use in admin role/settings pages)
============================================================================= */
.acp-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px; border-radius: 6px; font-size: 13px; font-weight: 500;
    cursor: pointer; border: 1px solid transparent; transition: opacity .15s, background .15s;
    text-decoration: none;
}
.acp-btn--primary { background: var(--accent, #7c3aed); color: #fff; }
.acp-btn--primary:hover { opacity: .88; }
.acp-btn--ghost { background: transparent; color: var(--fg-secondary, #888); border-color: var(--border, rgba(255,255,255,.1)); }
.acp-btn--ghost:hover { background: var(--hover-bg, rgba(255,255,255,.06)); color: var(--fg, #fff); }
.acp-btn--danger { background: rgba(239,68,68,.15); color: #ef4444; border-color: rgba(239,68,68,.3); }
.acp-btn--danger:hover { background: rgba(239,68,68,.25); }

/* =============================================================================
   SETTINGS — Avatar & Image Upload Widgets
============================================================================= */

/* ── Avatar row ─────────────────────────────────────────────────────────── */
.st-avatar-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.st-avatar-wrap {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-border, rgba(255,255,255,.08));
    cursor: pointer;
}
.st-avatar-wrap--artist {
    width: 120px;
    height: 120px;
    border-radius: 12px;
}

.st-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.st-avatar-img--artist { border-radius: 12px; }

/* hover overlay */
.st-avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    opacity: 0;
    transition: opacity .18s;
    cursor: pointer;
    border-radius: inherit;
}
.st-avatar-wrap:hover .st-avatar-overlay { opacity: 1; }

.st-avatar-info { display: flex; flex-direction: column; gap: 5px; }
.st-avatar-tip  { font-size: 12px; color: var(--color-text-muted); margin: 0; }

/* ── Upload status label ────────────────────────────────────────────────── */
.st-upload-status {
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.st-upload-status--ok    { color: #22c55e; }
.st-upload-status--err   { color: #ef4444; }
.st-upload-status--busy  { color: var(--color-text-muted); }

/* ── Artist image gallery ───────────────────────────────────────────────── */
.st-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.st-gallery-tile {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-border, rgba(255,255,255,.06));
}
.st-gallery-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.st-gallery-tile__remove {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,.65);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s;
}
.st-gallery-tile:hover .st-gallery-tile__remove { opacity: 1; }

/* add-photo tile */
.st-gallery-tile--add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    border: 2px dashed var(--color-border, rgba(255,255,255,.12));
    background: transparent;
    transition: border-color .15s, color .15s;
    padding: 8px;
    text-align: center;
}
.st-gallery-tile--add:hover {
    border-color: var(--accent, #7c3aed);
    color: var(--accent, #7c3aed);
}
.st-gallery-tile--add.is-busy { opacity: .6; pointer-events: none; }

/* =============================================================================
   PRODUCTION UI POLISH
   Shared refinements for the application shell and primary music surfaces.
============================================================================= */
:root {
    --color-bg: #f3f6fb;
    --color-surface-alt: #f7f9fd;
    --color-border: #e3e8f1;
    --color-text: #111827;
    --color-text-muted: #687386;
    --color-player-bg: #061b36;
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-sm: 0 4px 14px rgba(15, 23, 42, .06);
    --shadow-md: 0 12px 30px rgba(15, 23, 42, .10);
    --shadow-lg: 0 22px 50px rgba(15, 23, 42, .16);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 26px;
}

html { background: var(--color-bg); }

body {
    font-family: 'Manrope', 'Segoe UI', sans-serif;
    background:
        radial-gradient(circle at 78% -20%, rgba(37, 99, 235, .12), transparent 34%),
        var(--color-bg);
}

button,
input,
select,
textarea { font: inherit; }

button,
a,
input,
select,
textarea { -webkit-tap-highlight-color: transparent; }

:is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgba(37, 99, 235, .28);
    outline-offset: 2px;
}

.skip-link {
    position: fixed;
    top: 10px;
    left: 50%;
    z-index: 12000;
    transform: translate(-50%, -160%);
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--color-brand-dark);
    box-shadow: var(--shadow-lg);
    font-size: 12px;
    font-weight: 800;
    transition: transform .18s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

.app-card { background: transparent; }

.sidebar {
    position: relative;
    background:
        radial-gradient(circle at 20% 4%, rgba(14, 165, 233, .18), transparent 24%),
        linear-gradient(180deg, #08284b 0%, #061b36 56%, #04162c 100%);
    border-right: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 12px 0 30px rgba(4, 22, 44, .08);
}

.sidebar__header {
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.logo { color: #fff; }
.logo-img {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}
.logo-text { color: #fff; }

.sidebar__toggle {
    color: rgba(255, 255, 255, .68);
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
    box-shadow: none;
}
.sidebar__toggle:hover {
    color: #fff;
    border-color: rgba(126, 200, 255, .4);
    background: rgba(126, 200, 255, .12);
}

.nav-section__title {
    color: rgba(255, 255, 255, .35);
    font-weight: 800;
    letter-spacing: .13em;
}

.nav-item {
    min-height: 38px;
    color: rgba(232, 240, 252, .68);
    font-weight: 600;
}
.nav-item:hover {
    color: #fff;
    background: rgba(255, 255, 255, .075);
}
.nav-item.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(124, 58, 237, .52), rgba(37, 99, 235, .58));
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.nav-item.active::before { background: #7ec8ff; }
.nav-add-btn { color: rgba(255, 255, 255, .55); }
.nav-genres-toggle { color: rgba(232, 240, 252, .62); }

.main-wrapper {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(243, 246, 251, .98) 180px),
        var(--color-bg);
}

.topbar {
    min-height: 68px;
    padding: 12px clamp(16px, 2.4vw, 32px);
    background: rgba(255, 255, 255, .86);
    border-bottom-color: rgba(215, 222, 234, .86);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

.mobile-sidebar-toggle {
    display: none;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-brand-dark);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 11px;
    box-shadow: var(--shadow-xs);
    cursor: pointer;
}
.mobile-sidebar-toggle svg { width: 19px; height: 19px; }

.search-wrap { max-width: 760px; }
.search-input {
    min-height: 42px;
    padding-left: 42px;
    color: var(--color-text);
    background: rgba(239, 243, 249, .9);
    border: 1px solid transparent;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .03);
}
.search-input:hover { background: #edf2f8; }
.search-input:focus {
    background: #fff;
    border-color: rgba(37, 99, 235, .32);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .09), var(--shadow-sm);
}
.search-icon { left: 15px; color: #7c8798; }

.likes-btn {
    min-height: 38px;
    padding: 8px 12px;
    color: #c93462;
    background: rgba(244, 63, 94, .07);
    border: 1px solid rgba(244, 63, 94, .09);
    font-weight: 700;
}
.likes-btn:hover {
    color: #b51f4e;
    background: rgba(244, 63, 94, .12);
}

.user-menu__trigger {
    min-height: 42px;
    background: rgba(239, 243, 249, .72);
    border: 1px solid transparent;
}
.user-menu__trigger:hover,
.user-menu:focus-within .user-menu__trigger,
.user-menu--open .user-menu__trigger {
    background: #fff;
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}
.user-menu__dropdown {
    width: 230px;
    padding: 8px;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
}
.user-menu__item { border-radius: 9px; }

.content {
    padding: clamp(18px, 2.3vw, 32px);
    scroll-behavior: smooth;
}

.hm-hero {
    min-height: 280px;
    margin: 0 0 26px;
    border-radius: 24px;
    isolation: isolate;
    box-shadow: 0 24px 55px rgba(24, 58, 120, .22);
}
.hm-hero::after {
    background: var(--for-you-hero-overlay);
}
.hm-hero__body {
    min-height: 216px;
    align-items: center;
    padding: 34px clamp(24px, 4vw, 52px) 22px;
}
.hm-hero__left { max-width: 650px; }
.hm-hero__title {
    max-width: 620px;
    font-size: clamp(30px, 4.2vw, 54px);
    line-height: 1.04;
    letter-spacing: -.045em;
}
.hm-hero__sub {
    max-width: 560px;
    color: rgba(255, 255, 255, .74);
    font-size: clamp(13px, 1.4vw, 16px);
}
.hm-hero__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
}
.hm-hero__primary,
.hm-hero__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.hm-hero__primary {
    color: #09203c;
    background: #fff;
    box-shadow: 0 10px 24px rgba(2, 16, 40, .22);
}
.hm-hero__secondary {
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .24);
}
.hm-hero__primary:hover,
.hm-hero__secondary:hover { transform: translateY(-2px); }
.hm-hero__secondary:hover { background: rgba(255, 255, 255, .18); }

.hm-hero__visual {
    position: relative;
    width: 210px;
    height: 180px;
    flex-shrink: 0;
    margin-right: 3vw;
}
.hm-hero__disc {
    position: absolute;
    inset: 2px auto auto 20px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background:
        radial-gradient(circle, transparent 0 5%, #7ec8ff 5.5% 8%, transparent 8.5% 24%, rgba(255,255,255,.1) 24.5% 25%, transparent 25.5%),
        repeating-radial-gradient(circle, #07111f 0 2px, #17263b 3px, #07111f 4px);
    box-shadow: 0 24px 45px rgba(2, 8, 23, .45), inset 0 0 30px rgba(255,255,255,.08);
    transform: rotate(-12deg);
    animation: hm-disc-float 5s ease-in-out infinite;
}
.hm-hero__disc-label {
    position: absolute;
    inset: 37%;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #0ea5e9);
    box-shadow: 0 0 0 3px rgba(255,255,255,.14);
}
.hm-hero__signal {
    position: absolute;
    right: 0;
    bottom: 18px;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 54px;
}
.hm-hero__signal span {
    width: 5px;
    min-height: 12px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .82);
    animation: hm-signal 1.1s ease-in-out infinite alternate;
}
.hm-hero__signal span:nth-child(2) { animation-delay: -.35s; }
.hm-hero__signal span:nth-child(3) { animation-delay: -.7s; }
.hm-hero__signal span:nth-child(4) { animation-delay: -.2s; }
.hm-hero__signal span:nth-child(5) { animation-delay: -.55s; }
@keyframes hm-disc-float {
    50% { transform: rotate(-7deg) translateY(-6px); }
}
@keyframes hm-signal {
    to { min-height: 48px; }
}
.hm-hero__ambient {
    position: absolute;
    border-radius: 50%;
    filter: blur(8px);
    pointer-events: none;
}
.hm-hero__ambient--one {
    width: 260px;
    height: 260px;
    right: 6%;
    top: -45%;
    background: rgba(126, 200, 255, .18);
}
.hm-hero__ambient--two {
    width: 180px;
    height: 180px;
    left: 38%;
    bottom: -55%;
    background: rgba(124, 58, 237, .20);
}
.hm-nav-tiles {
    padding: 0 clamp(24px, 4vw, 52px) 22px;
}
.hm-nav-tile {
    padding: 8px 15px;
    font-size: 12px;
}

.hm-section--top { margin-top: 0; }
.hm-section__title,
.dsc-section-title {
    font-size: 13px;
    letter-spacing: .07em;
}

:is(.hm-songs-card, .hm-playlists-card, .sng-card, .alb-card, .ast-card, .dsc-card, .up-card, .st-admin-section, .acp-role-card) {
    border-color: rgba(214, 222, 234, .92);
    box-shadow: var(--shadow-sm);
}
:is(.sng-card, .alb-card, .ast-card, .dsc-card) {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
:is(.sng-card, .alb-card, .ast-card, .dsc-card):hover {
    transform: translateY(-5px);
    border-color: rgba(124, 58, 237, .22);
    box-shadow: var(--shadow-md);
}
.hm-songs-card,
.hm-playlists-card { border-radius: 8px; overflow: hidden; }

.dsc-hero {
    border-radius: 22px;
    box-shadow: var(--shadow-md);
}
.dsc-card { background: rgba(255, 255, 255, .72); }
.sng-filter-bar,
.ast-filter-bar,
.alb-filter-bar {
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-color: var(--color-border);
    box-shadow: var(--shadow-xs);
}

.player-bar {
    position: relative;
    background:
        radial-gradient(circle at 12% 0%, rgba(14, 165, 233, .18), transparent 28%),
        linear-gradient(90deg, #04162c, #08284b 52%, #061b36);
    border-top: 1px solid rgba(126, 200, 255, .16);
    box-shadow: 0 -10px 30px rgba(4, 22, 44, .16);
}
.player-bar::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-studio-grad);
    opacity: .85;
    transition: width .3s ease;
}
.player-bar:has(.art-playing)::before { width: 100%; }
.now-playing__art {
    box-shadow: 0 8px 18px rgba(0, 0, 0, .28);
}
.play-btn {
    width: 38px;
    height: 38px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
}
.progress-bar__fill {
    background: linear-gradient(90deg, #7c3aed, #7ec8ff);
}
.progress-bar__thumb { background: #fff; box-shadow: 0 0 0 3px rgba(126, 200, 255, .18); }

.auth-card {
    border-radius: 24px;
    background: rgba(5, 27, 54, .58);
    box-shadow: 0 32px 90px rgba(0, 8, 32, .56);
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 7999;
    border: 0;
    background: rgba(2, 8, 23, .54);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

@media (max-width: 860px) {
    .sidebar__header { border-bottom: 0; padding-bottom: 0; }
    .hm-hero__visual { width: 170px; margin-right: 0; }
    .hm-hero__disc { width: 150px; height: 150px; }
}

@media (max-width: 680px) {
    .hm-hero__visual { display: none; }
    .hm-hero__body { min-height: 224px; }
    .hm-nav-tiles { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .hm-nav-tiles::-webkit-scrollbar { display: none; }
}

@media (max-width: 540px) {
    body.mobile-nav-open { overflow: hidden; }
    .mobile-sidebar-toggle { display: inline-flex; }
    .sidebar {
        display: block;
        position: fixed;
        top: 0;
        bottom: var(--player-height);
        left: 0;
        z-index: 8000;
        width: min(82vw, 292px);
        padding: 20px 18px;
        transform: translateX(-105%);
        transition: transform .28s cubic-bezier(.22, .61, .36, 1);
        box-shadow: 24px 0 60px rgba(2, 8, 23, .35);
    }
    .sidebar.sidebar--open { transform: translateX(0); }
    .sidebar-backdrop--visible { display: block; }
    .sidebar .sidebar__header {
        flex-direction: row;
        align-items: center;
        margin-bottom: 18px;
        padding-bottom: 18px;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .sidebar .sidebar__label {
        display: inline;
        max-width: 180px;
        opacity: 1;
    }
    .sidebar .nav-section__title { display: block; }
    .sidebar .nav-item {
        justify-content: flex-start;
        padding: 8px 10px;
    }
    .sidebar .nav-item__icon { width: 16px; height: 16px; }
    .sidebar .sidebar__toggle { display: none; }
    .topbar { min-height: 62px; padding: 10px 12px; }
    .search-input { min-height: 40px; padding-right: 12px; }
    .topbar-actions { gap: 6px; }
    .likes-btn { width: 38px; padding: 0; justify-content: center; font-size: 0; }
    .likes-btn svg { width: 17px; height: 17px; }
    .user-menu__trigger { min-height: 38px; padding: 3px; background: transparent; }
    .user-menu__caret { display: none; }
    .content { padding: 14px 12px 22px; }
    .hm-hero {
        min-height: 0;
        margin-bottom: 22px;
        border-radius: 18px;
    }
    .hm-hero__body { min-height: 0; padding: 25px 20px 18px; }
    .hm-hero__title { font-size: clamp(28px, 10vw, 40px); }
    .hm-hero__actions { flex-wrap: wrap; }
    .hm-nav-tiles { padding: 0 20px 18px; }
    .hm-nav-tile { white-space: nowrap; }
    .player-bar { padding-inline: 10px; gap: 8px; }
    .now-playing__info { max-width: 92px; }
    .player-controls__row { gap: 8px; }
    #btn-shuffle,
    #btn-repeat { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* =============================================================================
   PLAYLIST CATALOG: DISCOVERY + PERSONAL COLLECTIONS
============================================================================= */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.pll-content {
    padding: 20px 24px 48px !important;
}
.pll-hero {
    min-height: 320px;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 24px;
    background:
        radial-gradient(circle at 14% 20%, rgba(139, 92, 246, .75), transparent 32%),
        radial-gradient(circle at 82% 14%, rgba(14, 165, 233, .28), transparent 25%),
        linear-gradient(125deg, #2e1065 0%, #172554 53%, #073b5b 100%);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
    isolation: isolate;
}
.pll-hero::after {
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(2, 6, 23, .06), rgba(2, 6, 23, .25)),
        radial-gradient(circle at 80% 50%, transparent 0 128px, rgba(255, 255, 255, .055) 129px 130px, transparent 131px);
}
.pll-hero__glow {
    position: absolute;
    top: -40%;
    left: 32%;
    z-index: 0;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: rgba(59, 130, 246, .13);
    filter: blur(34px);
}
.pll-hero__waves {
    z-index: 0;
    opacity: .6;
}
.pll-hero__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 420px);
    align-items: center;
    min-height: 320px;
    padding: 38px clamp(32px, 5vw, 66px);
}
.pll-hero__left {
    z-index: 2;
    max-width: 650px;
    gap: 9px;
}
.pll-hero__badge {
    margin-bottom: 4px;
    padding: 5px 11px;
    border-color: rgba(196, 181, 253, .24);
    color: #ddd6fe;
    background: rgba(124, 58, 237, .18);
    font-size: 9px;
    letter-spacing: .16em;
}
.pll-hero__title {
    max-width: 620px;
    color: #fff;
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.058em;
    text-wrap: balance;
}
.pll-hero__sub {
    max-width: 575px;
    color: rgba(226, 232, 240, .74);
    font-size: 14px;
    line-height: 1.65;
}
.pll-hero__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
.pll-hero .pll-filter-create,
.pll-hero .pll-filter-signin {
    width: fit-content;
    min-height: 42px;
    margin: 0;
    padding: 10px 18px;
    border-radius: 12px;
}
.pll-hero .pll-filter-signin {
    border-color: rgba(255, 255, 255, .2);
    color: #fff;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
}
.pll-hero__explore {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.pll-hero__explore::after {
    margin-left: 7px;
    content: "\2192";
    transition: transform .16s ease;
}
.pll-hero__explore:hover {
    color: #fff;
}
.pll-hero__explore:hover::after {
    transform: translateX(3px);
}
.pll-hero__visual {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 230px;
}
.pll-hero-cover {
    position: absolute;
    top: 4px;
    left: 50%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    width: 190px;
    height: 190px;
    padding: 23px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .23);
    border-radius: 18px;
    color: #fff;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, .18), transparent 35%),
        linear-gradient(145deg, #8b5cf6 0%, #2563eb 48%, #0f172a 100%);
    box-shadow: 0 26px 52px rgba(2, 6, 23, .42);
    box-sizing: border-box;
    transform: translateX(-50%) rotate(-4deg);
}
.pll-hero-cover::after {
    position: absolute;
    right: -42px;
    bottom: -48px;
    width: 128px;
    height: 128px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 0 15px rgba(255, 255, 255, .035), 0 0 0 32px rgba(255, 255, 255, .025);
}
.pll-hero-cover__eyebrow {
    margin-bottom: 15px;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.pll-hero-cover strong {
    font-size: 27px;
    line-height: .88;
    letter-spacing: -.06em;
}
.pll-hero-cover__mark {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 24px;
    margin-top: auto;
}
.pll-hero-cover__mark i {
    width: 3px;
    height: 35%;
    border-radius: 99px;
    background: rgba(255, 255, 255, .8);
}
.pll-hero-cover__mark i:nth-child(2),
.pll-hero-cover__mark i:nth-child(4) { height: 70%; }
.pll-hero-cover__mark i:nth-child(3) { height: 100%; }
.pll-hero-disc {
    position: absolute;
    border-radius: 50%;
    background:
        radial-gradient(circle, #d8b4fe 0 4px, #6d28d9 5px 18px, #080d1a 19px 24px, transparent 25px),
        repeating-radial-gradient(circle, #111827 0 6px, #1f2937 7px 8px);
    box-shadow: 0 20px 40px rgba(2, 6, 23, .32);
}
.pll-hero-disc--back {
    top: 32px;
    left: 8%;
    width: 150px;
    height: 150px;
    opacity: .72;
}
.pll-hero-disc--front {
    right: 3%;
    bottom: 0;
    z-index: 4;
    width: 116px;
    height: 116px;
}
.pll-hero__stats {
    position: absolute;
    right: clamp(25px, 4vw, 52px);
    bottom: 22px;
    z-index: 5;
    padding: 8px 12px;
    border-color: rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: rgba(3, 12, 35, .42);
}
.pll-stat {
    padding-inline: 12px;
}
.pll-stat__value {
    font-size: 19px;
}

.pll-body {
    padding-bottom: 26px;
}
.pll-discovery-bar {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 68px;
    margin-bottom: 20px;
    padding: 13px 18px;
    border: 1px solid rgba(218, 225, 236, .96);
    border-radius: 17px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
    backdrop-filter: blur(12px);
}
.pll-discovery-bar .pll-searchbox {
    max-width: 470px;
    height: 42px;
    border: 1px solid #e4e9f1;
    border-radius: 12px;
    background: #f7f9fc;
}
.pll-discovery-bar .pll-searchbox:focus-within {
    border-color: rgba(124, 58, 237, .38);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .08);
}
.pll-searchbox__input::-webkit-search-cancel-button {
    display: none;
}
.pll-discovery-bar__copy {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.pll-discovery-bar__copy #pllCount {
    color: #334155;
    font-weight: 800;
}
.pll-discovery-bar__pulse {
    width: 7px;
    height: 7px;
    margin-right: 2px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .1);
}

.pll-section {
    margin-bottom: 24px;
    padding: 26px 28px 30px;
    border: 1px solid rgba(218, 225, 236, .92);
    border-radius: 20px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 12px 34px rgba(15, 23, 42, .065);
}
.pll-section--mine {
    background:
        linear-gradient(100deg, rgba(124, 58, 237, .026), transparent 42%),
        rgba(255, 255, 255, .94);
}
.pll-section__hd {
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}
.pll-section__meta {
    align-items: flex-end;
    gap: 12px;
}
.pll-section__eyebrow {
    margin: 0 0 5px;
    color: #7c3aed;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.pll-section__title {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--color-text);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.04em;
}
.pll-section__description {
    max-width: 560px;
    margin: 7px 0 0;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.5;
}
.pll-section__count {
    margin-bottom: 3px;
    padding: 4px 10px;
    border-color: #e6ddfb;
    color: #6d28d9;
    background: #f7f3ff;
    font-size: 10px;
}
.pll-add-btn {
    min-height: 38px;
    padding: 8px 15px;
    border-radius: 11px;
}
.pll-page-next {
    margin-bottom: 5px;
}

#community-playlists .pll-community-carousel {
    position: relative;
    min-width: 0;
}
#community-playlists .pll-playlist-slider {
    width: 100%;
    padding: 4px 46px 18px;
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-padding-inline: 46px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
#community-playlists .pll-playlist-slider::-webkit-scrollbar {
    display: none;
}
#community-playlists .pll-grid {
    display: flex;
    width: max-content;
    gap: 18px;
}
#community-playlists .pll-card {
    flex: 0 0 clamp(184px, 17vw, 218px);
    scroll-snap-align: start;
}
.pll-community-arrow {
    position: absolute;
    top: 42%;
    z-index: 6;
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(211, 218, 232, .96);
    border-radius: 50%;
    color: #322667;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 25px rgba(15, 23, 42, .16);
    cursor: pointer;
    place-items: center;
    transform: translateY(-50%);
    transition: color .2s ease, background .2s ease, opacity .2s ease, transform .2s ease;
}
.pll-community-arrow span {
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
}
.pll-community-arrow--prev { left: 7px; }
.pll-community-arrow--next { right: 7px; }
.pll-community-arrow:hover:not(:disabled) {
    color: #fff;
    background: #5b3fc0;
    border-color: #5b3fc0;
    transform: translateY(-50%) scale(1.05);
}
.pll-community-arrow:focus-visible {
    outline: 3px solid rgba(124, 58, 237, .24);
    outline-offset: 3px;
}
.pll-community-arrow:disabled {
    opacity: .32;
    cursor: default;
}
.pll-community-arrow.is-loading span {
    animation: pll-arrow-pulse .75s ease-in-out infinite alternate;
}
@keyframes pll-arrow-pulse {
    to { opacity: .35; transform: translateX(2px); }
}

.pll-grid,
.pll-page {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px;
}
.pll-card {
    border-color: rgba(218, 225, 236, .96);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(15, 23, 42, .07);
}
.pll-card:hover {
    border-color: rgba(124, 58, 237, .25);
    box-shadow: 0 20px 42px rgba(15, 23, 42, .13);
    transform: translateY(-5px);
}
.pll-card__cover {
    background: #172554;
}
.pll-card__cover--c0 { background: linear-gradient(145deg, #7c3aed, #1e3a8a); }
.pll-card__cover--c1 { background: linear-gradient(145deg, #db2777, #6d28d9); }
.pll-card__cover--c2 { background: linear-gradient(145deg, #0284c7, #312e81); }
.pll-card__cover--c3 { background: linear-gradient(145deg, #059669, #164e63); }
.pll-card__cover--c4 { background: linear-gradient(145deg, #4f46e5, #0f172a); }
.pll-card__cover--c5 { background: linear-gradient(145deg, #c2410c, #7c2d12); }
.pll-card__cover--c6 { background: linear-gradient(145deg, #0891b2, #4338ca); }
.pll-card__cover--c7 { background: linear-gradient(145deg, #9333ea, #0f3a5b); }
.pll-card__cover-img {
    transition: transform .35s ease;
}
.pll-card:hover .pll-card__cover-img {
    transform: scale(1.035);
}
.pll-card__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 19px;
    overflow: hidden;
    color: #fff;
    box-sizing: border-box;
}
.pll-card__fallback::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .16), transparent 38%),
        radial-gradient(circle at 80% 82%, rgba(255, 255, 255, .13), transparent 33%);
    content: "";
}
.pll-card__fallback-label,
.pll-card__fallback-title,
.pll-card__fallback-bars {
    position: relative;
    z-index: 1;
}
.pll-card__fallback-label {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.pll-card__fallback-title {
    max-width: 78%;
    margin-top: 12px;
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -.055em;
    text-transform: uppercase;
}
.pll-card__fallback-disc {
    position: absolute;
    right: -30px;
    bottom: -30px;
    width: 128px;
    height: 128px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, .9) 0 3px, #8b5cf6 4px 14px, transparent 15px),
        repeating-radial-gradient(circle, rgba(255, 255, 255, .1) 0 1px, transparent 2px 8px),
        rgba(2, 6, 23, .78);
    box-shadow: -12px -15px 30px rgba(2, 6, 23, .2);
}
.pll-card__fallback-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 20px;
    margin-top: auto;
}
.pll-card__fallback-bars i {
    width: 3px;
    height: 35%;
    border-radius: 99px;
    background: rgba(255, 255, 255, .78);
}
.pll-card__fallback-bars i:nth-child(2) { height: 85%; }
.pll-card__fallback-bars i:nth-child(3) { height: 55%; }
.pll-card__fallback-bars i:nth-child(4) { height: 100%; }
.pll-card__cover-overlay {
    background: linear-gradient(0deg, rgba(2, 6, 23, .46), rgba(2, 6, 23, .12));
}
.pll-card__play-btn {
    width: 50px;
    height: 50px;
    background: #fff;
    color: #4f46e5;
    box-shadow: 0 12px 28px rgba(2, 6, 23, .28);
}
.pll-card__body {
    gap: 7px;
    padding: 13px 14px 15px;
}
.pll-card__name {
    color: #172033;
    font-size: 14px;
    font-weight: 750;
}
.pll-card:hover .pll-card__name {
    color: #6d28d9;
}
.pll-card__meta-row {
    min-height: 22px;
    gap: 8px;
    color: #718096;
    font-size: 10.5px;
}
.pll-card__owner {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 5px;
    overflow: hidden;
}
.pll-card__owner i {
    display: inline-grid;
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #7c3aed, #2563eb);
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    place-items: center;
}
.pll-card__owner span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.pll-card__del-btn {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
}
.pll-empty {
    min-height: 240px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 0%, rgba(124, 58, 237, .08), transparent 48%),
        #fcfcff;
}
.pll-no-results {
    margin: 12px 0 0;
    border: 1px dashed rgba(148, 163, 184, .38);
    border-radius: 14px;
    background: #fafbfe;
}

@media (max-width: 980px) {
    .pll-hero__body {
        grid-template-columns: minmax(0, 1fr) 290px;
        padding-inline: 36px;
    }
    .pll-hero-disc--back {
        left: 0;
    }
    .pll-hero-disc--front {
        right: -4%;
    }
    .pll-grid,
    .pll-page {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    }
}

@media (max-width: 760px) {
    #community-playlists .pll-playlist-slider {
        padding-inline: 38px;
        scroll-padding-inline: 38px;
    }
    #community-playlists .pll-card {
        flex-basis: 168px;
    }
    .pll-community-arrow {
        width: 34px;
        height: 34px;
    }
    .pll-community-arrow--prev { left: 2px; }
    .pll-community-arrow--next { right: 2px; }
    .pll-content {
        padding: 14px 14px 38px !important;
        overflow-x: hidden;
    }
    .pll-hero {
        min-height: 270px;
        border-radius: 18px;
    }
    .pll-hero__body {
        display: flex;
        align-items: flex-end;
        min-height: 270px;
        padding: 27px 24px;
    }
    .pll-hero__visual,
    .pll-hero__stats {
        display: none;
    }
    .pll-hero__title {
        font-size: clamp(36px, 10vw, 50px);
    }
    .pll-hero__sub {
        font-size: 13px;
    }
    .pll-discovery-bar {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
        padding: 12px;
    }
    .pll-discovery-bar .pll-searchbox {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }
    .pll-discovery-bar__copy {
        padding-inline: 4px;
    }
    .pll-section {
        padding: 22px 18px 24px;
        border-radius: 17px;
    }
    .pll-section__hd,
    .pll-section__meta {
        align-items: flex-start;
    }
    .pll-section__meta {
        flex: 1;
    }
    .pll-section__count {
        margin-top: 2px;
    }
}

@media (max-width: 520px) {
    .pll-hero__actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
    .pll-hero__explore {
        min-height: 30px;
    }
    .pll-section__description {
        display: none;
    }
    .pll-grid,
    .pll-page {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .pll-card__fallback {
        padding: 14px;
    }
    .pll-card__fallback-title {
        font-size: 18px;
    }
    .pll-card__body {
        padding: 11px;
    }
    .pll-add-btn {
        padding-inline: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #community-playlists .pll-playlist-slider {
        scroll-behavior: auto;
    }
    .pll-community-arrow {
        transition: none;
    }
    .pll-card__cover-img,
    .pll-hero__explore::after {
        transition: none;
    }
}

/* =============================================================================
   PLAYLISTS — COLLECTION GUIDE REFINEMENT
============================================================================= */
.pll-guide {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 15px;
}
.pll-guide__label,
.pll-guide__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}
.pll-guide__label {
    color: #6d28d9;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.pll-guide__link {
    min-height: 30px;
    padding: 5px 4px;
    color: #64748b;
    transition: color .16s ease, transform .16s ease;
}
.pll-guide__link:hover {
    color: #5b21b6;
    transform: translateY(-1px);
}
.pll-guide__divider {
    width: 1px;
    height: 18px;
    background: #dbe2ec;
}
.pll-discovery-bar__copy {
    padding: 6px 10px;
    border: 1px solid #e8defd;
    border-radius: 10px;
    color: #6d28d9;
    background: #faf7ff;
}
.pll-no-results {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 130px;
    margin: 0;
    padding: 24px;
    color: #64748b;
}
.pll-no-results[hidden] {
    display: none;
}
.pll-no-results__icon {
    display: grid;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    color: #7c3aed;
    background: #f1ebff;
    place-items: center;
}
.pll-no-results strong,
.pll-no-results span {
    display: block;
}
.pll-no-results strong {
    margin-bottom: 3px;
    color: #172033;
    font-size: 14px;
}
.pll-no-results div > span {
    font-size: 11px;
}
.pll-section[id] {
    scroll-margin-top: 90px;
}

@media (max-width: 760px) {
    .pll-discovery-bar {
        align-items: center;
        flex-direction: row;
        min-height: 56px;
    }
    .pll-guide {
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .pll-guide::-webkit-scrollbar {
        display: none;
    }
    .pll-guide__link,
    .pll-guide__label {
        white-space: nowrap;
    }
}

@media (max-width: 520px) {
    .pll-discovery-bar__copy {
        flex: 0 0 auto;
    }
    .pll-guide__label {
        font-size: 9px;
    }
    .pll-guide__link {
        display: none;
    }
}

/* =============================================================================
   EVENT DETAIL — PREMIUM LIVE EVENT EXPERIENCE
============================================================================= */
.page-event-detail .content {
    padding: 24px 32px 52px;
}
.page-event-detail .evtd {
    --evtd-accent: #7447ff;
    --evtd-accent-2: #1f6cf0;
    --evtd-border: rgba(121, 93, 223, .15);
    --evtd-radius: 22px;
}
.page-event-detail .evtd-hero {
    min-height: 360px;
    align-items: stretch;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 24px;
    background-position: center;
    box-shadow: 0 25px 58px rgba(15, 23, 42, .2);
    isolation: isolate;
}
.page-event-detail .evtd-hero::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 82% 42%, transparent 0 105px, rgba(255, 255, 255, .07) 106px 107px, transparent 108px),
        radial-gradient(circle at 82% 42%, transparent 0 150px, rgba(255, 255, 255, .045) 151px 152px, transparent 153px);
    content: "";
}
.page-event-detail .evtd-hero__overlay {
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(35, 16, 91, .96) 0%, rgba(27, 39, 104, .88) 54%, rgba(5, 84, 119, .78) 100%),
        linear-gradient(135deg, rgba(124, 58, 237, .62), rgba(2, 132, 199, .48));
}
.page-event-detail .evtd-hero__content {
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: center;
    gap: 48px;
    padding: 40px 56px;
}
.page-event-detail .evtd-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}
.page-event-detail .evtd-back {
    margin-bottom: 22px;
    color: rgba(255, 255, 255, .67);
    font-size: 11px;
}
.page-event-detail .evtd-hero__badges {
    margin-bottom: 12px;
}
.page-event-detail .evtd-genre-pill,
.page-event-detail .evtd-featured-pill {
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(12px);
}
.page-event-detail .evtd-featured-pill {
    color: #fef3c7;
}
.page-event-detail .evtd-hero__eyebrow {
    margin: 0 0 7px;
    color: #c4b5fd;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.page-event-detail .evtd-hero__title {
    max-width: 720px;
    font-size: clamp(42px, 5.7vw, 72px);
    line-height: .94;
    letter-spacing: -.06em;
    text-transform: capitalize;
    text-wrap: balance;
}
.page-event-detail .evtd-hero__tagline {
    max-width: 620px;
    margin-top: 14px;
    color: rgba(238, 242, 255, .74);
    font-size: 14px;
}
.page-event-detail .evtd-hero__meta {
    margin-top: 22px;
}
.page-event-detail .evtd-meta-chip {
    padding: 7px 11px;
    border-color: rgba(255, 255, 255, .16);
    background: rgba(4, 13, 44, .24);
    font-size: 10.5px;
}
.page-event-detail .evtd-hero__pass {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 250px;
    height: 245px;
    padding: 25px 28px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 21px;
    color: #fff;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .2), transparent 35%),
        linear-gradient(145deg, #8b5cf6, #315bec 58%, #164e80);
    box-shadow: 0 28px 60px rgba(2, 6, 23, .35);
    box-sizing: border-box;
    transform: rotate(4deg);
}
.page-event-detail .evtd-hero__pass::before,
.page-event-detail .evtd-hero__pass::after {
    position: absolute;
    top: 69%;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #16366d;
    content: "";
}
.page-event-detail .evtd-hero__pass::before { left: -14px; }
.page-event-detail .evtd-hero__pass::after { right: -14px; }
.page-event-detail .evtd-hero__pass-edge {
    position: absolute;
    right: 29px;
    bottom: 0;
    height: 31%;
    border-left: 1px dashed rgba(255, 255, 255, .42);
}
.page-event-detail .evtd-hero__pass-brand,
.page-event-detail .evtd-hero__pass-label,
.page-event-detail .evtd-hero__pass-code {
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.page-event-detail .evtd-hero__pass-month {
    margin-top: 30px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.page-event-detail .evtd-hero__pass-day {
    font-size: 72px;
    line-height: .88;
    letter-spacing: -.08em;
}
.page-event-detail .evtd-hero__pass-label {
    margin-top: auto;
    color: #ddd6fe;
}
.page-event-detail .evtd-hero__pass-code {
    margin-top: 5px;
    color: rgba(255, 255, 255, .57);
    font-size: 5.5px;
}
.page-event-detail .evtd-guide {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 58px;
    margin-top: 18px;
    padding: 10px 16px;
    border: 1px solid rgba(218, 225, 236, .95);
    border-radius: 16px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
}
.page-event-detail .evtd-guide__label,
.page-event-detail .evtd-guide a,
.page-event-detail .evtd-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}
.page-event-detail .evtd-guide__label {
    color: #6d28d9;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.page-event-detail .evtd-guide__divider {
    width: 1px;
    height: 18px;
    background: #dbe2ec;
}
.page-event-detail .evtd-guide a {
    min-height: 30px;
}
.page-event-detail .evtd-guide a:hover {
    color: #6d28d9;
}
.page-event-detail .evtd-share-btn {
    min-height: 34px;
    margin-left: auto;
    padding: 7px 12px;
    border: 1px solid #e4e8f0;
    border-radius: 10px;
    background: #f8faff;
    cursor: pointer;
}
.page-event-detail .evtd-share-btn:hover {
    border-color: #d8cafa;
    color: #6d28d9;
    background: #faf7ff;
}
.page-event-detail .evtd-body {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    padding: 22px 0 0;
}
.page-event-detail .evtd-main {
    gap: 20px;
}
.page-event-detail .evtd-artist-block,
.page-event-detail .evtd-desc,
.page-event-detail .evtd-schedule,
.page-event-detail .evtd-venue {
    border: 1px solid rgba(218, 225, 236, .92);
    border-radius: 19px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .055);
}
.page-event-detail .evtd-artist-block {
    padding: 17px 19px;
}
.page-event-detail .evtd-artist-block__avatar {
    display: grid;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    color: #fff;
    background:
        radial-gradient(circle at 68% 25%, rgba(255, 255, 255, .28), transparent 22%),
        linear-gradient(145deg, #7c3aed, #2563eb);
    font-size: 20px;
    place-items: center;
    box-shadow: 0 10px 22px rgba(91, 33, 182, .2);
}
.page-event-detail .evtd-artist-block__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}
.page-event-detail .evtd-artist-block__copy small {
    color: #8b5cf6;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.page-event-detail .evtd-artist-block__copy strong {
    overflow: hidden;
    color: #172033;
    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-event-detail .evtd-artist-block__billing {
    margin-left: auto;
    padding: 6px 9px;
    border-radius: 9px;
    color: #475569;
    background: #f2f5fa;
    font-size: 9px;
    font-weight: 750;
}
.page-event-detail .evtd-desc {
    padding: 25px 27px 27px;
}
.page-event-detail .evtd-section-kicker {
    margin: 0 0 5px;
    color: #7c3aed;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .17em;
    text-transform: uppercase;
}
.page-event-detail .evtd-desc__heading,
.page-event-detail .evtd-section-heading h2,
.page-event-detail .evtd-venue h2 {
    margin: 0;
    padding: 0;
    border: 0;
    color: #172033;
    font-size: 22px;
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: -.035em;
    text-transform: none;
}
.page-event-detail .evtd-desc__text {
    margin-top: 15px;
    color: #566176;
    font-size: 13px;
    line-height: 1.75;
}
.page-event-detail .evtd-schedule {
    padding: 24px 26px 26px;
    scroll-margin-top: 90px;
}
.page-event-detail .evtd-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}
.page-event-detail .evtd-section-heading > span {
    color: #64748b;
    font-size: 10px;
    font-weight: 750;
}
.page-event-detail .evtd-times {
    display: grid;
    gap: 9px;
}
.page-event-detail .evtd-time-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #e8ebf2;
    border-radius: 13px;
    background: #f9faff;
}
.page-event-detail .evtd-time-item__number {
    color: #a78bfa;
    font-size: 10px;
    font-weight: 850;
}
.page-event-detail .evtd-time-item__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.page-event-detail .evtd-time-item__label {
    color: #253047;
    font-size: 11px;
}
.page-event-detail .evtd-time-item__note {
    color: #8a95a8;
    font-size: 9px;
}
.page-event-detail .evtd-time-item__val {
    color: #6d28d9;
    font-size: 16px;
}
.page-event-detail .evtd-venue {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 22px;
}
.page-event-detail .evtd-venue__icon {
    display: grid;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(145deg, #2563eb, #7c3aed);
    place-items: center;
}
.page-event-detail .evtd-venue h2 {
    font-size: 17px;
}
.page-event-detail .evtd-venue div > span {
    display: block;
    margin-top: 4px;
    color: #7b879a;
    font-size: 11px;
}
.page-event-detail .evtd-ticket-aside {
    top: 88px;
    scroll-margin-top: 90px;
}
.page-event-detail .evtd-ticket-card {
    overflow: hidden;
    border: 1px solid rgba(218, 225, 236, .95);
    border-radius: 19px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .1);
}
.page-event-detail .evtd-ticket-card__status {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 18px;
    color: #557064;
    background: #f3fbf7;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.page-event-detail .evtd-ticket-card__status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .1);
}
.page-event-detail .evtd-ticket-card__header {
    padding: 18px 20px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .18), transparent 35%),
        linear-gradient(135deg, #7c3aed, #2563eb);
}
.page-event-detail .evtd-ticket-card__price {
    padding: 22px 20px 7px;
    color: #6d28d9;
    font-size: 31px;
}
.page-event-detail .evtd-ticket-card__meta {
    gap: 0;
    padding: 10px 20px 15px;
}
.page-event-detail .evtd-ticket-card__meta div {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #eef1f5;
}
.page-event-detail .evtd-ticket-card__meta div:last-child {
    border-bottom: 0;
}
.page-event-detail .evtd-ticket-card__meta span {
    color: #94a0b2;
    font-size: 9px;
    font-weight: 750;
    text-transform: uppercase;
}
.page-event-detail .evtd-ticket-card__meta strong {
    color: #344056;
    font-size: 10px;
    line-height: 1.4;
}
.page-event-detail .evtd-ticket-btn {
    min-height: 44px;
    margin: 17px 20px 10px;
    border-radius: 12px;
}
.page-event-detail .evtd-ticket-card__notice {
    margin: 0;
    padding: 5px 20px 18px;
    color: #98a2b2;
    font-size: 8.5px;
    line-height: 1.5;
    text-align: center;
}
.page-event-detail .evtd-gallery {
    margin-top: 22px;
    padding: 24px;
    border: 1px solid rgba(218, 225, 236, .92);
    border-radius: 19px;
    background: #fff;
}
.page-event-detail .evtd-gallery__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}
.page-event-detail .evtd-gallery__header > div:first-child {
    display: grid;
    gap: 5px;
}
.page-event-detail .evtd-gallery__eyebrow {
    color: #6d28d9;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.page-event-detail .evtd-gallery__controls {
    display: flex;
    align-items: center;
    gap: 7px;
}
.page-event-detail .evtd-gallery__counter {
    min-width: 42px;
    color: #8792a5;
    font-size: 9px;
    font-weight: 750;
    text-align: center;
}
.page-event-detail .evtd-gallery__counter strong {
    color: #4f46e5;
}
.page-event-detail .evtd-gallery__controls button {
    display: grid;
    width: 32px;
    height: 32px;
    padding: 0;
    place-items: center;
    border: 1px solid #dce2ec;
    border-radius: 50%;
    color: #4f46e5;
    background: #fff;
    cursor: pointer;
}
.page-event-detail .evtd-gallery__controls button:hover,
.page-event-detail .evtd-gallery__controls button:focus-visible {
    border-color: #a5b4fc;
    background: #eef2ff;
    outline: none;
}
.page-event-detail .evtd-gallery__viewport {
    outline: none;
}
.page-event-detail .evtd-gallery__slide img {
    aspect-ratio: 21 / 8;
}
.page-event-detail .evtd-gallery__viewport:focus-visible {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .22);
}
.page-event-detail .evtd-gallery__slide::after {
    position: absolute;
    inset: 58% 0 0;
    border-radius: 0 0 10px 10px;
    content: "";
    background: linear-gradient(transparent, rgba(8, 15, 32, .78));
    pointer-events: none;
}
.page-event-detail .evtd-gallery__slide figcaption {
    position: absolute;
    right: 18px;
    bottom: 16px;
    left: 18px;
    z-index: 1;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    color: #fff;
}
.page-event-detail .evtd-gallery__slide figcaption span {
    overflow: hidden;
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-event-detail .evtd-gallery__slide figcaption small {
    color: rgba(255, 255, 255, .72);
    font-size: 8px;
    font-weight: 750;
    white-space: nowrap;
}
.page-event-detail .evtd-gallery__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
}
.page-event-detail .evtd-gallery__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #cbd2dd;
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
}
.page-event-detail .evtd-gallery__dot.is-active {
    width: 22px;
    background: #6366f1;
}

@media (prefers-reduced-motion: reduce) {
    .page-event-detail .evtd-gallery__viewport {
        scroll-behavior: auto;
    }
    .page-event-detail .evtd-gallery__dot {
        transition: none;
    }
}

@media (max-width: 980px) {
    .page-event-detail .evtd-hero__content {
        grid-template-columns: minmax(0, 1fr) 230px;
        gap: 25px;
        padding-inline: 38px;
    }
    .page-event-detail .evtd-hero__pass {
        width: 205px;
        height: 220px;
    }
    .page-event-detail .evtd-body {
        grid-template-columns: minmax(0, 1fr) 285px;
    }
}

@media (max-width: 760px) {
    .page-event-detail .content {
        padding: 14px 14px 38px;
    }
    .page-event-detail .evtd-hero {
        min-height: 340px;
        border-radius: 19px;
    }
    .page-event-detail .evtd-hero__content {
        display: flex;
        align-items: flex-end;
        padding: 27px 24px 30px;
    }
    .page-event-detail .evtd-hero__pass {
        display: none;
    }
    .page-event-detail .evtd-hero__title {
        font-size: clamp(38px, 11vw, 54px);
    }
    .page-event-detail .evtd-guide {
        gap: 11px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .page-event-detail .evtd-guide::-webkit-scrollbar {
        display: none;
    }
    .page-event-detail .evtd-guide > * {
        flex: 0 0 auto;
    }
    .page-event-detail .evtd-share-btn {
        margin-left: auto;
    }
    .page-event-detail .evtd-body {
        grid-template-columns: 1fr;
        padding: 18px 0 0;
    }
    .page-event-detail .evtd-ticket-aside {
        position: static;
    }
}

@media (max-width: 520px) {
    .page-event-detail .evtd-hero__meta {
        gap: 6px;
    }
    .page-event-detail .evtd-meta-chip {
        max-width: 100%;
    }
    .page-event-detail .evtd-guide a {
        display: none;
    }
    .page-event-detail .evtd-artist-block__billing {
        display: none;
    }
    .page-event-detail .evtd-desc,
    .page-event-detail .evtd-schedule {
        padding: 21px 19px;
    }
}

/* =============================================================================
   ALBUM DETAIL — PREMIUM RELEASE EXPERIENCE
============================================================================= */
.page-album-detail .albdet-content {
    padding: 24px 32px 52px !important;
}
.page-album-detail .albdet {
    min-height: 100%;
}
.page-album-detail .albdet-hero {
    min-height: 390px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 24px;
    background: linear-gradient(125deg, #301070, #182867 55%, #07516c);
    box-shadow: 0 26px 60px rgba(15, 23, 42, .22);
    isolation: isolate;
}
.page-album-detail .albdet-hero::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 77% 44%, transparent 0 145px, rgba(255, 255, 255, .055) 146px 147px, transparent 148px),
        linear-gradient(115deg, transparent 0 62%, rgba(12, 92, 120, .2) 100%);
    content: "";
    pointer-events: none;
}
.page-album-detail .albdet-hero__bg {
    opacity: .32;
    filter: blur(38px) brightness(.72) saturate(1.25);
    transform: scale(1.24);
}
.page-album-detail .albdet-hero__scrim {
    background:
        linear-gradient(90deg, rgba(21, 8, 67, .86) 0%, rgba(20, 31, 82, .78) 58%, rgba(2, 54, 76, .68) 100%),
        linear-gradient(0deg, rgba(3, 7, 24, .28), transparent 60%);
}
.page-album-detail .albdet-hero__inner {
    z-index: 3;
    align-items: center;
    gap: clamp(56px, 7vw, 92px);
    min-height: 390px;
    padding: 44px 58px;
    box-sizing: border-box;
}
.page-album-detail .albdet-cover-wrap {
    position: relative;
    width: 255px;
    height: 255px;
}
.page-album-detail .albdet-cover {
    position: relative;
    z-index: 3;
    width: 255px;
    height: 255px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 18px;
    box-shadow: 0 30px 65px rgba(2, 6, 23, .48);
}
.page-album-detail .albdet-vinyl {
    position: absolute;
    top: 18px;
    left: 105px;
    z-index: 1;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #e9d5ff 0 4px, #7c3aed 5px 25px, #0b1120 26px 31px, transparent 32px),
        repeating-radial-gradient(circle, #0b1120 0 7px, #1e293b 8px 9px);
    box-shadow: 0 28px 55px rgba(2, 6, 23, .42);
    transition: transform .35s ease;
}
.page-album-detail .albdet-vinyl::after {
    position: absolute;
    inset: 17px;
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 50%;
    content: "";
}
.page-album-detail .albdet-cover-wrap:hover .albdet-vinyl {
    transform: translateX(18px) rotate(12deg);
}
.page-album-detail .albdet-breadcrumb {
    margin-bottom: 20px;
    font-size: 10px;
}
.page-album-detail .albdet-info__type {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: #c4b5fd;
    font-size: 8px;
    letter-spacing: .17em;
}
.page-album-detail .albdet-info__type span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .1);
}
.page-album-detail .albdet-info__title {
    max-width: 690px;
    margin-bottom: 15px;
    color: #fff;
    font-size: clamp(48px, 6vw, 76px);
    line-height: .94;
    letter-spacing: -.065em;
    text-transform: capitalize;
    text-overflow: clip;
}
.page-album-detail .albdet-info__artist-link {
    gap: 9px;
    font-size: 13px;
    font-weight: 750;
}
.page-album-detail .albdet-info__artist-avatar,
.page-album-detail .albdet-info__artist-init {
    width: 30px;
    height: 30px;
    border: 2px solid rgba(255, 255, 255, .26);
}
.page-album-detail .albdet-info__meta {
    margin: 11px 0 13px;
    color: rgba(226, 232, 240, .67);
    font-size: 11px;
}
.page-album-detail .albdet-info__desc {
    color: rgba(226, 232, 240, .68);
}
.page-album-detail .albdet-actions {
    margin-top: 18px;
}
.page-album-detail .albdet-play-all-btn,
.page-album-detail .albdet-artist-btn {
    min-height: 42px;
    padding: 10px 17px;
    border-radius: 12px;
}
.page-album-detail .albdet-play-all-btn {
    padding-inline: 22px;
    background: #fff;
    color: #4f46e5;
    box-shadow: 0 12px 28px rgba(2, 6, 23, .22);
}
.page-album-detail .albdet-share-btn {
    font-family: inherit;
    background: rgba(255, 255, 255, .06);
    cursor: pointer;
}
.page-album-detail .albdet-stats-pill {
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    box-sizing: border-box;
}
.page-album-detail .albdet-guide {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 58px;
    margin-top: 18px;
    padding: 10px 16px;
    border: 1px solid rgba(218, 225, 236, .95);
    border-radius: 16px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
}
.page-album-detail .albdet-guide__label,
.page-album-detail .albdet-guide a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}
.page-album-detail .albdet-guide__label {
    color: #6d28d9;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.page-album-detail .albdet-guide__divider {
    width: 1px;
    height: 18px;
    background: #dbe2ec;
}
.page-album-detail .albdet-guide a {
    min-height: 30px;
}
.page-album-detail .albdet-guide a:hover {
    color: #6d28d9;
}
.page-album-detail .albdet-guide__count {
    margin-left: auto;
    padding: 6px 10px;
    border: 1px solid #e7defb;
    border-radius: 10px;
    color: #6d28d9;
    background: #faf7ff;
    font-size: 9px;
    font-weight: 800;
}
.page-album-detail .albdet-art-gallery {
    margin: 20px 0 0;
    padding: 20px;
    border: 1px solid rgba(218, 225, 236, .92);
    border-radius: 18px;
    background: #fff;
}
.page-album-detail .albdet-release-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    align-items: start;
    gap: 20px;
    margin-top: 20px;
}
.page-album-detail .albdet-tracks-section {
    min-width: 0;
    margin-top: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(218, 225, 236, .94);
    border-radius: 20px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 14px 38px rgba(15, 23, 42, .07);
    scroll-margin-top: 90px;
}
.page-album-detail .albdet-favorites {
    position: sticky;
    top: 82px;
    overflow: hidden;
    border: 1px solid rgba(214, 221, 235, .92);
    border-radius: 20px;
    color: #172033;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .09);
}
.page-album-detail .albdet-favorites__visual {
    position: relative;
    height: 154px;
    overflow: hidden;
    background: linear-gradient(135deg, #111a3c, #174a67);
}
.page-album-detail .albdet-favorites__visual::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 15, 39, .18), rgba(10, 15, 39, .76));
    content: "";
}
.page-album-detail .albdet-favorites__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
}
.page-album-detail .albdet-favorites__visual > span {
    display: grid;
    height: 100%;
    color: rgba(255,255,255,.3);
    font-size: 84px;
    font-weight: 900;
    place-items: center;
}
.page-album-detail .albdet-favorites__signal {
    position: absolute;
    right: 18px;
    bottom: 16px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 9px;
    color: #fff;
    background: rgba(9, 17, 39, .58);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
}
.page-album-detail .albdet-favorites__signal i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .14);
}
.page-album-detail .albdet-favorites__body {
    padding: 22px;
}
.page-album-detail .albdet-favorites__eyebrow {
    margin: 0 0 5px;
    color: #6d28d9;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.page-album-detail .albdet-favorites h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.12;
    letter-spacing: -.035em;
}
.page-album-detail .albdet-favorites__intro {
    margin: 8px 0 18px;
    color: #788397;
    font-size: 10px;
    line-height: 1.55;
}
.page-album-detail .albdet-favorites__list {
    border-top: 1px solid #edf0f5;
}
.page-album-detail .albdet-favorite {
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 11px;
    padding: 12px 0;
    border-bottom: 1px solid #edf0f5;
}
.page-album-detail .albdet-favorite__art {
    display: grid;
    width: 43px;
    height: 43px;
    overflow: hidden;
    border-radius: 9px;
    color: #6d28d9;
    background: #eeeafd;
    place-items: center;
}
.page-album-detail .albdet-favorite__art :is(img, span) {
    width: 100%;
    height: 100%;
}
.page-album-detail .albdet-favorite__art img { object-fit: cover; }
.page-album-detail .albdet-favorite__art span { display: grid; place-items: center; }
.page-album-detail .albdet-favorite__copy {
    display: grid;
    min-width: 0;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
}
.page-album-detail .albdet-favorite__copy > span {
    grid-row: 1 / 3;
    color: #a1a8b5;
    font-size: 8px;
    font-weight: 800;
}
.page-album-detail .albdet-favorite__copy a {
    overflow: hidden;
    color: #20293b;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-album-detail .albdet-favorite__copy a:hover { color: #6d28d9; }
.page-album-detail .albdet-favorite__copy small {
    margin-top: 3px;
    color: #8b95a7;
    font-size: 8px;
}
.page-album-detail .albdet-favorite__play {
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #ddd7f3;
    border-radius: 50%;
    color: #6841ce;
    background: #fff;
    cursor: pointer;
    place-items: center;
}
.page-album-detail .albdet-favorite__play:hover {
    color: #fff;
    background: #6841ce;
    border-color: #6841ce;
}
.page-album-detail .albdet-favorites__empty {
    padding: 15px 0;
    border-block: 1px solid #edf0f5;
    color: #788397;
    font-size: 10px;
    line-height: 1.5;
}
.page-album-detail .albdet-favorites__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    margin-top: 18px;
    padding: 0 13px;
    border-radius: 10px;
    color: #fff;
    background: #172554;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}
.page-album-detail .albdet-favorites__cta:hover { background: #243878; }
.page-album-detail .albdet-tracklist-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 23px 26px 19px;
    border-bottom: 1px solid #edf0f5;
    background:
        radial-gradient(circle at 92% 0%, rgba(37, 99, 235, .07), transparent 34%),
        linear-gradient(110deg, #fff, #faf9ff 55%, #f6f9ff);
}
.page-album-detail .albdet-tracklist-heading p {
    margin: 0 0 5px;
    color: #7c3aed;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .17em;
    text-transform: uppercase;
}
.page-album-detail .albdet-tracklist-heading h2 {
    margin: 0;
    color: #172033;
    font-size: 23px;
    line-height: 1;
    letter-spacing: -.04em;
}
.page-album-detail .albdet-tracklist-heading > span {
    padding: 5px 9px;
    border-radius: 9px;
    color: #64748b;
    background: #f1f4f8;
    font-size: 9px;
    font-weight: 750;
}
.page-album-detail .albdet-table {
    padding: 0 14px 14px;
    border-collapse: separate;
    border-spacing: 0 8px;
    font-size: 12px;
}
.page-album-detail .albdet-table__head th {
    height: 42px;
    padding: 0 12px;
    border-bottom: 0;
    color: #8791a3;
    background: transparent;
    font-size: 9px;
    letter-spacing: .12em;
}
.page-album-detail .albdet-row td {
    height: 68px;
    padding: 9px 12px;
    border-block: 1px solid #e8ecf3;
    color: #4a5568;
    background: #fff;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.page-album-detail .albdet-row td:first-child {
    border-left: 1px solid #e8ecf3;
    border-radius: 12px 0 0 12px;
}
.page-album-detail .albdet-row td:last-child {
    border-right: 1px solid #e8ecf3;
    border-radius: 0 12px 12px 0;
}
.page-album-detail .albdet-row:hover td,
.page-album-detail .albdet-row--current td {
    border-color: #d8d0f0;
    background: #fbfaff;
    box-shadow: 0 9px 22px rgba(42, 32, 88, .07);
}
.page-album-detail .albdet-row--playing td {
    border-color: #c9bcf2;
    background: #f8f5ff;
}
.page-album-detail .albdet-col-num {
    width: 46px;
    color: #929bad;
    font-size: 11px;
    font-weight: 800;
}
.page-album-detail .albdet-row__play-inline {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    background: #6d28d9;
    box-shadow: 0 6px 14px rgba(109, 40, 217, .24);
}
.page-album-detail .albdet-title-cell {
    gap: 13px;
}
.page-album-detail .albdet-art-wrap,
.page-album-detail .albdet-art {
    width: 48px;
    height: 48px;
    border-radius: 9px;
}
.page-album-detail .albdet-art-wrap {
    box-shadow: 0 5px 13px rgba(15, 23, 42, .13);
}
.page-album-detail .albdet-art--fallback {
    background: linear-gradient(145deg, #eee9ff, #e4ecff);
    color: #6d28d9;
}
.page-album-detail .albdet-title-text {
    color: #172033;
    font-size: 13px;
    font-weight: 800;
}
.page-album-detail .albdet-title-sub {
    max-width: 320px;
    margin-top: 4px;
    color: #8b95a7;
    font-size: 9px;
}
.page-album-detail .albdet-col-genre .sng-genre-chip {
    min-height: 25px;
    padding-inline: 9px;
    border-color: #e2dcf4;
    color: #6549ae;
    background: #f8f6ff;
    font-size: 9px;
}
.page-album-detail :is(.albdet-col-plays, .albdet-col-likes, .albdet-col-dur) {
    color: #697386;
    font-size: 10px;
    font-weight: 700;
}
.page-album-detail .albdet-col-likes .like-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border-radius: 8px;
    color: #b42354;
    background: #fff0f5;
}
.page-album-detail .albdet-play-btn {
    width: 34px;
    height: 34px;
    border: 1px solid #d9d0f3;
    color: #6d28d9;
    background: #fff;
    opacity: 1;
    box-shadow: 0 5px 12px rgba(52, 39, 105, .08);
}
.page-album-detail .albdet-play-btn:hover {
    border-color: #6d28d9;
    color: #fff;
    background: #6d28d9;
    box-shadow: 0 8px 18px rgba(109, 40, 217, .22);
}
.page-album-detail .adet-tracks-empty {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr) auto;
    align-items: center;
    gap: 23px;
    min-height: 180px;
    padding: 28px 32px;
    color: inherit;
    text-align: left;
    background:
        radial-gradient(circle at 8% 50%, rgba(124, 58, 237, .09), transparent 24%),
        #fcfcff;
}
.page-album-detail .albdet-empty__visual {
    position: relative;
    display: grid;
    width: 96px;
    height: 96px;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(145deg, #7c3aed, #2563eb);
    place-items: center;
    box-shadow: 0 18px 34px rgba(79, 70, 229, .2);
}
.page-album-detail .albdet-empty__disc {
    position: absolute;
    right: -16px;
    bottom: -12px;
    width: 55px;
    height: 55px;
    border: 5px solid #111827;
    border-radius: 50%;
    background: radial-gradient(circle, #a78bfa 0 7px, #111827 8px);
    box-shadow: 0 7px 14px rgba(15, 23, 42, .2);
}
.page-album-detail .albdet-empty__copy {
    min-width: 0;
}
.page-album-detail .albdet-empty__copy > span {
    color: #7c3aed;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.page-album-detail .albdet-empty__copy strong {
    display: block;
    margin-top: 6px;
    color: #172033;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -.035em;
}
.page-album-detail .albdet-empty__copy p {
    max-width: 560px;
    margin: 8px 0 0;
    color: #748095;
    font-size: 11px;
    line-height: 1.55;
}
.page-album-detail .albdet-empty__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid #e0d8f5;
    border-radius: 11px;
    color: #6d28d9;
    background: #fff;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}
.page-album-detail .albdet-empty__cta:hover {
    border-color: #c4b5fd;
    box-shadow: 0 8px 20px rgba(109, 40, 217, .1);
    transform: translateY(-1px);
}
.page-album-detail .albdet-footer-section {
    padding: 22px 2px 4px;
}
.page-album-detail .albdet-more-btn {
    min-height: 39px;
    border-radius: 11px;
    background: #fff;
}

@media (max-width: 980px) {
    .page-album-detail .albdet-release-grid {
        grid-template-columns: 1fr;
    }
    .page-album-detail .albdet-favorites {
        position: static;
        display: grid;
        grid-template-columns: minmax(220px, .7fr) minmax(0, 1fr);
    }
    .page-album-detail .albdet-favorites__visual { height: 100%; min-height: 300px; }
    .page-album-detail .albdet-hero__inner {
        gap: 42px;
        padding-inline: 40px;
    }
    .page-album-detail .albdet-cover-wrap,
    .page-album-detail .albdet-cover {
        width: 220px;
        height: 220px;
    }
    .page-album-detail .albdet-vinyl {
        top: 15px;
        left: 90px;
        width: 190px;
        height: 190px;
    }
}

@media (max-width: 760px) {
    .page-album-detail .albdet-favorites { display: block; }
    .page-album-detail .albdet-favorites__visual { height: 150px; min-height: 0; }
    .page-album-detail .albdet-content {
        padding: 14px 14px 38px !important;
    }
    .page-album-detail .albdet-hero {
        min-height: 510px;
        border-radius: 19px;
    }
    .page-album-detail .albdet-hero__inner {
        align-items: flex-start;
        flex-direction: column;
        justify-content: flex-end;
        gap: 28px;
        min-height: 510px;
        padding: 30px 25px;
    }
    .page-album-detail .albdet-cover-wrap,
    .page-album-detail .albdet-cover {
        width: 160px;
        height: 160px;
    }
    .page-album-detail .albdet-vinyl {
        top: 12px;
        left: 65px;
        width: 138px;
        height: 138px;
    }
    .page-album-detail .albdet-info__title {
        font-size: clamp(40px, 12vw, 58px);
        white-space: normal;
    }
    .page-album-detail .albdet-guide {
        gap: 11px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .page-album-detail .albdet-guide::-webkit-scrollbar {
        display: none;
    }
    .page-album-detail .albdet-guide > * {
        flex: 0 0 auto;
    }
    .page-album-detail .albdet-guide__count {
        margin-left: auto;
    }
    .page-album-detail .albdet-table {
        padding-inline: 8px;
    }
    .page-album-detail .albdet-col-genre,
    .page-album-detail .albdet-col-likes {
        display: none;
    }
    .page-album-detail .albdet-row td {
        height: 64px;
        padding-inline: 8px;
    }
    .page-album-detail .albdet-art-wrap,
    .page-album-detail .albdet-art {
        width: 44px;
        height: 44px;
    }
    .page-album-detail .adet-tracks-empty {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 18px;
        padding: 25px 22px;
    }
    .page-album-detail .albdet-empty__visual {
        width: 76px;
        height: 76px;
        border-radius: 20px;
    }
    .page-album-detail .albdet-empty__cta {
        grid-column: 2;
        width: fit-content;
    }
}

@media (max-width: 520px) {
    .page-album-detail .albdet-hero {
        min-height: 500px;
    }
    .page-album-detail .albdet-breadcrumb {
        display: none;
    }
    .page-album-detail .albdet-guide a {
        display: none;
    }
    .page-album-detail .albdet-tracklist-heading {
        padding-inline: 20px;
    }
    .page-album-detail .albdet-col-plays {
        display: none;
    }
    .page-album-detail .albdet-col-num {
        width: 35px;
    }
    .page-album-detail .albdet-title-sub {
        max-width: 42vw;
    }
    .page-album-detail .adet-tracks-empty {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =============================================================================
   FINAL PRODUCT POLISH — GENRES + AUTHENTICATION
============================================================================= */
.page-genres .gnr-hero {
    min-height: 245px;
    overflow: hidden;
    border-color: rgba(255, 255, 255, .12);
    color: #fff;
    background:
        radial-gradient(circle at 16% 18%, rgba(139, 92, 246, .68), transparent 31%),
        linear-gradient(125deg, #2e1065 0%, #172554 55%, #07516c 100%);
    box-shadow: 0 23px 54px rgba(15, 23, 42, .18);
}
.page-genres .gnr-hero::after {
    background:
        radial-gradient(circle at 78% 50%, transparent 0 104px, rgba(255, 255, 255, .055) 105px 106px, transparent 107px),
        linear-gradient(90deg, transparent, rgba(2, 6, 23, .1));
}
.page-genres .gnr-hero__waves {
    display: block;
    opacity: .55;
}
.page-genres .gnr-hero__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: center;
    min-height: 245px;
    padding: 32px 42px;
}
.page-genres .gnr-hero__badge {
    border-color: rgba(255, 255, 255, .17);
    color: #ddd6fe;
    background: rgba(255, 255, 255, .1);
}
.page-genres .gnr-hero__title {
    color: #fff;
    font-size: clamp(42px, 5vw, 64px);
    line-height: .96;
    letter-spacing: -.055em;
}
.page-genres .gnr-hero__sub {
    max-width: 590px;
    margin-top: 10px;
    color: rgba(226, 232, 240, .72);
    font-size: 13px;
    line-height: 1.6;
}
.page-genres .gnr-hero__visual {
    position: relative;
    width: 270px;
    height: 175px;
    margin-left: auto;
}
.page-genres .gnr-hero__orb {
    position: absolute;
    top: 10px;
    left: 51px;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    box-shadow: 0 0 0 18px rgba(255, 255, 255, .025), 0 0 0 42px rgba(255, 255, 255, .018);
}
.page-genres .gnr-hero__orb i {
    position: absolute;
    inset: 45px;
    border: 8px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    background: linear-gradient(145deg, #a78bfa, #2563eb);
}
.page-genres .gnr-hero__tag {
    position: absolute;
    z-index: 2;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    color: #fff;
    background: rgba(9, 20, 58, .62);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 20px rgba(2, 6, 23, .18);
}
.page-genres .gnr-hero__tag--one { top: 12px; right: 5px; transform: rotate(4deg); }
.page-genres .gnr-hero__tag--two { top: 73px; left: 0; transform: rotate(-5deg); }
.page-genres .gnr-hero__tag--three { right: 7px; bottom: 15px; transform: rotate(3deg); }
.page-genres .gnr-hero__bars {
    position: absolute;
    right: 84px;
    bottom: 13px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 28px;
}
.page-genres .gnr-hero__bars i {
    width: 3px;
    height: 40%;
    border-radius: 99px;
    background: #fff;
}
.page-genres .gnr-hero__bars i:nth-child(2),
.page-genres .gnr-hero__bars i:nth-child(4) { height: 78%; }
.page-genres .gnr-hero__bars i:nth-child(3) { height: 100%; }
.page-genres .gnr-hero__stats {
    position: absolute;
    right: 22px;
    bottom: 18px;
    z-index: 4;
    padding: 8px 12px;
    border-color: rgba(255, 255, 255, .12);
    background: rgba(3, 12, 35, .46);
}
.page-genres .gnr-stat__value {
    color: #fff;
}
.page-genres .gnr-stat__label {
    color: rgba(226, 232, 240, .58);
}
.page-genres .gnr-section {
    margin-top: 18px;
    border-radius: 20px;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .07);
}
.page-genres .gnr-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 18px 20px 22px;
}
.page-genres .gnr-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 160px;
    padding: 18px;
    overflow: hidden;
    border-color: rgba(255, 255, 255, .16);
    border-radius: 17px;
    isolation: isolate;
}
.page-genres .gnr-card::before {
    position: absolute;
    right: -36px;
    bottom: -45px;
    z-index: -1;
    width: 130px;
    height: 130px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 0 12px rgba(255, 255, 255, .04), 0 0 0 27px rgba(255, 255, 255, .025);
}
.page-genres .gnr-card--c0 { background: linear-gradient(145deg, #7c3aed, #243b8d); }
.page-genres .gnr-card--c1 { background: linear-gradient(145deg, #db2777, #6d28d9); }
.page-genres .gnr-card--c2 { background: linear-gradient(145deg, #0284c7, #3730a3); }
.page-genres .gnr-card--c3 { background: linear-gradient(145deg, #059669, #155e75); }
.page-genres .gnr-card--c4 { background: linear-gradient(145deg, #ea580c, #9a3412); }
.page-genres .gnr-card--c5 { background: linear-gradient(145deg, #4f46e5, #172554); }
.page-genres .gnr-card--c6 { background: linear-gradient(145deg, #0891b2, #4338ca); }
.page-genres .gnr-card--c7 { background: linear-gradient(145deg, #9333ea, #164e63); }
.page-genres .gnr-card__index {
    position: absolute;
    top: 14px;
    right: 15px;
    color: rgba(255, 255, 255, .47);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .12em;
}
.page-genres .gnr-card__icon {
    position: absolute;
    top: 16px;
    left: 17px;
    width: 41px;
    height: 41px;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 13px;
    background: rgba(255, 255, 255, .12);
}
.page-genres .gnr-card__icon svg {
    width: 21px;
    height: 21px;
}
.page-genres .gnr-card__name {
    font-size: 18px;
    line-height: 1.05;
    letter-spacing: -.035em;
}
.page-genres .gnr-card__count {
    margin-top: 5px;
    color: rgba(255, 255, 255, .66);
    font-size: 9px;
}
.page-genres .gnr-card__open {
    position: absolute;
    right: 14px;
    bottom: 13px;
    display: grid;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 9px;
    color: #fff;
    background: rgba(2, 6, 23, .16);
    font-size: 13px;
    opacity: 0;
    place-items: center;
    transform: translate(-4px, 4px);
    transition: opacity .18s ease, transform .18s ease;
}
.page-genres .gnr-card:hover .gnr-card__open {
    opacity: 1;
    transform: translate(0);
}
.page-genres-detail .gdet-guide {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 58px;
    margin: 18px 0;
    padding: 10px 16px;
    border: 1px solid rgba(218, 225, 236, .95);
    border-radius: 16px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
}
.page-genres-detail .gdet-guide__label,
.page-genres-detail .gdet-guide a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}
.page-genres-detail .gdet-guide__label {
    color: #6d28d9;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.page-genres-detail .gdet-guide__divider {
    width: 1px;
    height: 18px;
    background: #dbe2ec;
}
.page-genres-detail .gdet-guide a:hover {
    color: #6d28d9;
}
.page-genres-detail .gdet-guide__count {
    margin-left: auto;
    padding: 6px 10px;
    border: 1px solid #e7defb;
    border-radius: 10px;
    color: #6d28d9;
    background: #faf7ff;
    font-size: 9px;
    font-weight: 800;
}
.page-genres-detail .sng-table-wrap {
    scroll-margin-top: 90px;
    overflow: hidden;
    margin-top: 0;
    border: 1px solid #dfe5ee;
    border-radius: 12px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .07);
}
.page-genres-detail .gdet-catalog-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 26px 20px;
    border-bottom: 1px solid #e5e9f0;
    background: #fff;
}
.page-genres-detail .gdet-catalog-head__eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #7c3aed;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.page-genres-detail .gdet-catalog-head h2 {
    margin: 0;
    color: #172033;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: 0;
}
.page-genres-detail .gdet-catalog-head p {
    margin: 6px 0 0;
    color: #718096;
    font-size: 11px;
}
.page-genres-detail .gdet-catalog-head__page {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid #e2e7ef;
    border-radius: 7px;
    color: #566276;
    background: #f8fafc;
    font-size: 10px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}
.page-genres-detail .gdet-library {
    table-layout: fixed;
}
.page-genres-detail .gdet-library .sng-table__head tr th {
    height: 42px;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 1px solid #e5e9f0;
    color: #8490a2;
    background: #f8fafc;
    font-size: 9px;
    letter-spacing: .09em;
}
.page-genres-detail .gdet-library .sng-table__head th + th {
    border-left: 0;
}
.page-genres-detail .gdet-library .sng-row,
.page-genres-detail .gdet-library .sng-row:nth-child(even),
.page-genres-detail .gdet-library .sng-row:nth-child(odd) {
    height: 72px;
    border-bottom: 1px solid #edf0f4;
    background: #fff;
}
.page-genres-detail .gdet-library .sng-row:hover {
    background: #f7f5ff !important;
}
.page-genres-detail .gdet-library .sng-row--playing {
    background: #f3efff !important;
    box-shadow: inset 3px 0 0 #7c3aed;
}
.page-genres-detail .gdet-library .sng-row td {
    padding-top: 9px;
    padding-bottom: 9px;
    border: 0;
}
.page-genres-detail .gdet-library .sng-col-num {
    width: 52px;
}
.page-genres-detail .gdet-library .sng-col-title {
    width: 38%;
}
.page-genres-detail .gdet-library .sng-col-artist {
    width: 17%;
}
.page-genres-detail .gdet-library .sng-col-album {
    width: 17%;
}
.page-genres-detail .gdet-library .sng-col-play {
    width: 112px;
}
.page-genres-detail .gdet-library .sng-row__num {
    color: #929bad;
    font-size: 11px;
}
.page-genres-detail .gdet-library .sng-title-cell {
    gap: 13px;
}
.page-genres-detail .gdet-library .sng-art-wrap {
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 7px;
    box-shadow: 0 5px 13px rgba(15, 23, 42, .13);
}
.page-genres-detail .gdet-library .sng-art-overlay {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 7px;
    color: #fff;
    background: rgba(18, 12, 31, .7);
    opacity: 0;
}
.page-genres-detail .gdet-library .sng-art-wrap:hover .sng-art-overlay,
.page-genres-detail .gdet-library .sng-art-overlay:focus-visible,
.page-genres-detail .gdet-library .sng-row--playing .sng-art-overlay {
    opacity: 1;
}
.page-genres-detail .gdet-library .sng-art-overlay:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}
@media (hover: none) {
    .page-genres-detail .gdet-library .sng-art-overlay {
        opacity: 1;
        background: rgba(18, 12, 31, .42);
    }
}
.page-genres-detail .gdet-library .sng-title-text {
    color: #172033;
    font-size: 13px;
    font-weight: 750;
}
.page-genres-detail .gdet-library .sng-title-sub {
    max-width: 340px;
    color: #8a94a5;
    font-size: 10px;
}
.page-genres-detail .gdet-library .sng-artist-link,
.page-genres-detail .gdet-library .sng-album-link {
    color: #59667b;
    font-size: 11px;
    font-weight: 550;
}
.page-genres-detail .gdet-library .sng-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
}
.page-genres-detail .gdet-library .sng-action-btn:hover,
.page-genres-detail .gdet-library .sng-action-btn:focus-visible {
    color: #6d28d9;
    background: #ede9fe;
}
.page-genres-detail .gdet-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 66px;
    padding: 12px 22px;
    border-top: 1px solid #e5e9f0;
    background: #fafbfc;
}
.page-genres-detail .gdet-pagination__summary {
    color: #7b8798;
    font-size: 10px;
    font-weight: 650;
}
.page-genres-detail .gdet-pagination__controls {
    display: flex;
    align-items: center;
    gap: 5px;
}
.page-genres-detail .gdet-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border: 1px solid #dfe4eb;
    border-radius: 7px;
    color: #526077;
    background: #fff;
    font-size: 10px;
    font-weight: 750;
    text-decoration: none;
}
.page-genres-detail .gdet-pagination a:hover,
.page-genres-detail .gdet-pagination a:focus-visible {
    border-color: #b9a5ed;
    color: #6d28d9;
    outline: none;
}
.page-genres-detail .gdet-pagination .gdet-pagination__direction {
    gap: 5px;
    padding: 0 10px;
}
.page-genres-detail .gdet-pagination .is-current {
    border-color: #6d28d9;
    color: #fff;
    background: #6d28d9;
}
.page-genres-detail .gdet-pagination .is-disabled {
    color: #b4bcc8;
    background: #f4f6f8;
    pointer-events: none;
}
@media (max-width: 700px) {
    .page-genres-detail .gdet-catalog-head {
        align-items: flex-start;
        padding: 20px 16px 16px;
    }
    .page-genres-detail .gdet-catalog-head h2 { font-size: 18px; }
    .page-genres-detail .gdet-catalog-head p { display: none; }
    .page-genres-detail .gdet-library .sng-row,
    .page-genres-detail .gdet-library .sng-row:nth-child(even),
    .page-genres-detail .gdet-library .sng-row:nth-child(odd) { height: 66px; }
    .page-genres-detail .gdet-library .sng-art-wrap { width: 44px; height: 44px; }
    .page-genres-detail .gdet-pagination {
        align-items: stretch;
        flex-direction: column;
        padding: 13px 12px;
    }
    .page-genres-detail .gdet-pagination__summary { text-align: center; }
    .page-genres-detail .gdet-pagination__controls { justify-content: center; }
    .page-genres-detail .gdet-pagination .gdet-pagination__direction { font-size: 0; }
    .page-genres-detail .gdet-pagination .gdet-pagination__direction svg { width: 17px; height: 17px; }
}
.page-genres-detail .sng-empty {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) auto;
    align-items: center;
    gap: 26px;
    min-height: 210px;
    padding: 32px 38px;
    color: inherit;
    text-align: left;
    background:
        radial-gradient(circle at 8% 50%, rgba(124, 58, 237, .09), transparent 25%),
        linear-gradient(110deg, #fff, #fbfaff 62%, #f4f8ff);
}
.page-genres-detail .gdet-empty__visual {
    position: relative;
    display: grid;
    width: 105px;
    height: 105px;
    border-radius: 27px;
    color: #fff;
    background: linear-gradient(145deg, #7c3aed, #2563eb);
    place-items: center;
    box-shadow: 0 18px 36px rgba(79, 70, 229, .2);
}
.page-genres-detail .gdet-empty__visual i {
    position: absolute;
    right: -19px;
    bottom: -13px;
    width: 60px;
    height: 60px;
    border: 6px solid #111827;
    border-radius: 50%;
    background: radial-gradient(circle, #a78bfa 0 8px, #111827 9px);
}
.page-genres-detail .gdet-empty__copy > span {
    color: #7c3aed;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.page-genres-detail .gdet-empty__copy strong {
    display: block;
    margin-top: 6px;
    color: #172033;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -.035em;
}
.page-genres-detail .gdet-empty__copy p {
    max-width: 540px;
    margin: 8px 0 0;
    color: #748095;
    font-size: 11px;
    line-height: 1.55;
}
.page-genres-detail .gdet-empty__actions {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
}
.page-genres-detail .sng-upload-cta,
.page-genres-detail .gdet-empty__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 11px;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}
.page-genres-detail .sng-upload-cta {
    gap: 7px;
    border: 1px solid #7c3aed;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
}
.page-genres-detail .gdet-empty__secondary {
    border: 1px solid #e1e6ef;
    color: #526077;
    background: #fff;
}

.auth-body {
    background:
        radial-gradient(circle at 10% 15%, rgba(124, 58, 237, .17), transparent 28%),
        radial-gradient(circle at 88% 86%, rgba(14, 165, 233, .13), transparent 28%),
        #061d3a;
}
.auth-center {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(390px, .82fr);
    align-items: stretch;
    width: min(1120px, calc(100% - 48px));
    min-height: min(760px, calc(100vh - 64px));
    margin: 32px auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 28px;
    background: rgba(5, 21, 48, .74);
    box-shadow: 0 35px 90px rgba(1, 8, 25, .42);
    backdrop-filter: blur(18px);
}
.auth-showcase {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 42px 48px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 80% 20%, rgba(96, 165, 250, .32), transparent 27%),
        radial-gradient(circle at 15% 70%, rgba(139, 92, 246, .42), transparent 31%),
        linear-gradient(145deg, #321074, #183b91 58%, #08769a);
    isolation: isolate;
}
.auth-showcase::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 72% 72%, transparent 0 150px, rgba(255, 255, 255, .055) 151px 152px, transparent 153px),
        linear-gradient(25deg, rgba(2, 6, 23, .08), transparent 60%);
    content: "";
}
.auth-showcase--register {
    background:
        radial-gradient(circle at 82% 18%, rgba(45, 212, 191, .24), transparent 27%),
        radial-gradient(circle at 14% 73%, rgba(168, 85, 247, .4), transparent 32%),
        linear-gradient(145deg, #38116e, #243a91 56%, #086c86);
}
.auth-showcase__back {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 7px;
    color: rgba(255, 255, 255, .68);
    font-size: 10px;
    font-weight: 750;
    text-decoration: none;
}
.auth-showcase__back:hover {
    color: #fff;
}
.auth-showcase__content {
    position: relative;
    z-index: 2;
    max-width: 580px;
    margin-top: 68px;
}
.auth-showcase__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ddd6fe;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.auth-showcase__eyebrow i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .11);
}
.auth-showcase h2 {
    margin: 18px 0 16px;
    font-size: clamp(45px, 5vw, 68px);
    line-height: .91;
    letter-spacing: -.065em;
}
.auth-showcase__content > p {
    max-width: 520px;
    margin: 0;
    color: rgba(226, 232, 240, .72);
    font-size: 13px;
    line-height: 1.65;
}
.auth-showcase__features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}
.auth-showcase__features span {
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 9px;
    color: rgba(255, 255, 255, .76);
    background: rgba(2, 6, 23, .13);
    font-size: 8px;
    font-weight: 750;
}
.auth-showcase__visual {
    position: relative;
    width: 320px;
    height: 210px;
    margin-top: auto;
    margin-left: auto;
}
.auth-showcase__disc {
    position: absolute;
    right: 0;
    bottom: -36px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #d8b4fe 0 5px, #7c3aed 6px 25px, #0b1120 26px 32px, transparent 33px),
        repeating-radial-gradient(circle, #0b1120 0 7px, #1e293b 8px 9px);
    box-shadow: 0 25px 55px rgba(2, 6, 23, .38);
}
.auth-showcase__sleeve {
    position: absolute;
    left: 4px;
    bottom: -4px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 170px;
    height: 170px;
    padding: 21px;
    border: 1px solid rgba(255, 255, 255, .23);
    border-radius: 17px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .18), transparent 34%),
        linear-gradient(145deg, #8b5cf6, #2563eb 62%, #172554);
    box-shadow: 0 25px 50px rgba(2, 6, 23, .34);
    box-sizing: border-box;
    transform: rotate(-5deg);
}
.auth-showcase__sleeve small {
    font-size: 6px;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.auth-showcase__sleeve strong {
    margin-top: 16px;
    font-size: 22px;
    line-height: .88;
    letter-spacing: -.055em;
}
.auth-showcase__sleeve > i {
    width: 3px;
    height: 15px;
    margin-top: auto;
    border-radius: 99px;
    background: rgba(255, 255, 255, .82);
}
.auth-showcase__sleeve > i:nth-of-type(2) { height: 25px; margin-top: -25px; margin-left: 7px; }
.auth-showcase__sleeve > i:nth-of-type(3) { height: 19px; margin-top: -19px; margin-left: 14px; }
.auth-showcase__sleeve > i:nth-of-type(4) { height: 30px; margin-top: -30px; margin-left: 21px; }
.auth-center .auth-card {
    align-self: center;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 42px 44px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.auth-center--register {
    flex-shrink: 0;
}
.auth-center--register .auth-card {
    align-self: center;
}
@media (min-width: 761px) and (max-height: 850px) {
    .auth-center--register .auth-card {
        padding-block: 22px;
    }
    .auth-center--register .auth-logo {
        margin-bottom: 14px;
    }
    .auth-center--register .auth-card__intro {
        margin-bottom: 12px;
    }
    .auth-center--register .auth-btn--google {
        padding-block: 9px;
        margin-bottom: 10px;
    }
    .auth-center--register .auth-divider {
        margin-bottom: 10px;
    }
    .auth-center--register .auth-field {
        margin-bottom: 8px;
    }
    .auth-center--register .auth-label {
        margin-bottom: 4px;
    }
    .auth-center--register .auth-input {
        padding-block: 8px;
    }
    .auth-center--register .auth-artist-toggle {
        padding-block: 8px;
    }
    .auth-center--register .auth-btn--primary {
        padding-block: 10px;
        margin-top: 4px;
    }
    .auth-center--register .auth-footer-text {
        margin-top: 10px;
    }
}
.auth-card__eyebrow {
    margin: 0 0 5px;
    color: #60a5fa;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.auth-center .auth-title {
    margin-bottom: 7px;
    font-size: 27px;
    line-height: 1.1;
    letter-spacing: -.045em;
}
.auth-card__intro {
    margin: 0 0 24px;
    color: rgba(203, 213, 225, .57);
    font-size: 10.5px;
    line-height: 1.5;
}
.auth-center .auth-logo {
    margin-bottom: 32px;
}
.auth-center .auth-btn {
    border-radius: 11px;
}
.auth-center .auth-input {
    border-radius: 11px;
    background: rgba(255, 255, 255, .075);
}
.auth-center .auth-input:focus {
    background: rgba(255, 255, 255, .1);
}

@media (max-width: 980px) {
    .page-genres .gnr-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .auth-center {
        grid-template-columns: minmax(0, 1fr) 390px;
    }
    .auth-showcase {
        padding-inline: 36px;
    }
    .auth-showcase__visual {
        transform: scale(.88);
        transform-origin: bottom right;
    }
}

@media (max-width: 760px) {
    .page-genres .gnr-hero__body {
        display: flex;
        min-height: 225px;
        padding: 29px 25px;
    }
    .page-genres .gnr-hero__visual {
        display: none;
    }
    .page-genres .gnr-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .page-genres-detail .gdet-guide {
        overflow-x: auto;
        scrollbar-width: none;
    }
    .page-genres-detail .gdet-guide::-webkit-scrollbar {
        display: none;
    }
    .page-genres-detail .gdet-guide > * {
        flex: 0 0 auto;
    }
    .page-genres-detail .sng-empty {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 20px;
        padding: 28px 24px;
    }
    .page-genres-detail .gdet-empty__visual {
        width: 80px;
        height: 80px;
        border-radius: 21px;
    }
    .page-genres-detail .gdet-empty__actions {
        grid-column: 2;
        align-items: flex-start;
        flex-direction: row;
    }
    .auth-center {
        display: block;
        width: min(480px, calc(100% - 28px));
        min-height: 0;
        margin-block: 18px;
        overflow: visible;
        border-radius: 22px;
    }
    .auth-showcase {
        display: none;
    }
    .auth-center .auth-card {
        padding: 34px 28px;
    }
    .auth-center--register .auth-card {
        overflow-y: visible;
    }
}

@media (max-width: 520px) {
    .page-genres .gnr-grid {
        gap: 10px;
        padding: 13px;
    }
    .page-genres .gnr-card {
        min-height: 135px;
        padding: 14px;
    }
    .page-genres .gnr-card__name {
        font-size: 15px;
    }
    .page-genres-detail .gdet-guide a {
        display: none;
    }
    .page-genres-detail .sng-empty {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }
    .page-genres-detail .gdet-empty__actions {
        flex-wrap: wrap;
    }
}

/* =============================================================================
   SONG DETAIL: ARTIST RELEASE SHELF + MANUAL DECK ACCESS
============================================================================= */
.now-playing__art-button {
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
}
.now-playing__art-button:focus-visible {
    border-radius: 50%;
    outline: 2px solid #a78bfa;
    outline-offset: 4px;
}
.now-playing__deck-hint {
    position: absolute;
    right: -3px;
    bottom: -3px;
    z-index: 4;
    display: grid;
    width: 18px;
    height: 18px;
    border: 2px solid #082542;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #7c3aed, #2563eb);
    opacity: 0;
    place-items: center;
    transform: scale(.75);
    transition: opacity .16s ease, transform .16s ease;
}
.now-playing__deck-hint svg {
    width: 10px;
    height: 10px;
}
.now-playing__art-button:hover .now-playing__deck-hint,
.now-playing__art-button:focus-visible .now-playing__deck-hint {
    opacity: 1;
    transform: scale(1);
}

.sdet-section--more {
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(218, 225, 236, .95);
    border-radius: 20px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 14px 38px rgba(15, 23, 42, .075);
}
.sdet-more-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 27px 20px;
    border-bottom: 1px solid rgba(226, 232, 240, .88);
    background:
        radial-gradient(circle at 90% 0%, rgba(37, 99, 235, .075), transparent 32%),
        linear-gradient(110deg, #fff 0%, #fbfaff 56%, #f6f9ff 100%);
}
.sdet-more-heading__identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 14px;
}
.sdet-more-heading__avatar {
    display: grid;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border: 3px solid #fff;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(145deg, #7c3aed, #2563eb);
    font-size: 19px;
    font-weight: 800;
    place-items: center;
    box-shadow: 0 8px 20px rgba(79, 70, 229, .18);
}
.sdet-more-heading__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sdet-more-heading__eyebrow {
    margin: 0 0 4px;
    color: #7c3aed;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
}
.sdet-more-heading .sdet-section-title {
    margin: 0;
    color: var(--color-text);
    font-size: 23px;
    line-height: 1.1;
    letter-spacing: -.035em;
}
.sdet-more-heading__sub {
    margin: 6px 0 0;
    color: var(--color-text-muted);
    font-size: 11px;
    line-height: 1.45;
}
.sdet-more-heading__profile {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 5px;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid #e1e6ef;
    border-radius: 11px;
    color: #334155;
    background: #fff;
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .05);
    transition: border-color .16s ease, color .16s ease, transform .16s ease;
}
.sdet-more-heading__profile:hover {
    border-color: rgba(124, 58, 237, .28);
    color: #6d28d9;
    transform: translateY(-1px);
}
.sdet-more-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    padding: 22px 24px 24px;
}
.sdet-more-row {
    position: relative;
    display: block;
    min-width: 0;
    padding: 0 0 14px;
    overflow: hidden;
    border: 1px solid rgba(218, 225, 236, .95);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .055);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.sdet-more-row:hover {
    border-color: rgba(124, 58, 237, .24);
    background: #fff;
    box-shadow: 0 16px 30px rgba(15, 23, 42, .12);
    transform: translateY(-4px);
}
.sdet-more-row--current,
.sdet-more-row--playing {
    border-color: rgba(124, 58, 237, .42);
    background: #fff;
    box-shadow: 0 10px 24px rgba(124, 58, 237, .12);
}
.sdet-more-row--current::before {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 99px;
    color: #fff;
    background: rgba(76, 29, 149, .78);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    content: "Current";
    backdrop-filter: blur(8px);
}
.sdet-more-art-wrap {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0;
    cursor: pointer;
}
.sdet-more-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    transition: transform .3s ease;
}
.sdet-more-art--fallback {
    display: grid;
    color: rgba(255, 255, 255, .78);
    background:
        radial-gradient(circle at 78% 82%, rgba(255, 255, 255, .15), transparent 32%),
        linear-gradient(145deg, #4f46e5, #172554 65%, #0f172a);
    place-items: center;
}
.sdet-more-art--fallback::after {
    position: absolute;
    right: -28px;
    bottom: -28px;
    width: 106px;
    height: 106px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    background:
        radial-gradient(circle, #c4b5fd 0 3px, #7c3aed 4px 13px, transparent 14px),
        repeating-radial-gradient(circle, rgba(255, 255, 255, .09) 0 1px, transparent 2px 7px),
        rgba(2, 6, 23, .8);
    content: "";
}
.sdet-more-row:hover .sdet-more-art {
    transform: scale(1.035);
}
.sdet-more-art__overlay {
    z-index: 3;
    display: grid;
    background: linear-gradient(0deg, rgba(2, 6, 23, .45), transparent 62%);
    opacity: 0;
    place-items: center;
    transition: opacity .18s ease;
}
.sdet-more-row:hover .sdet-more-art__overlay {
    opacity: 1;
}
.sdet-more-art__overlay svg {
    width: 42px;
    height: 42px;
    padding: 12px;
    box-sizing: border-box;
    overflow: visible;
    border-radius: 50%;
    color: #5b21b6;
    background: #fff;
    box-shadow: 0 10px 25px rgba(2, 6, 23, .25);
}
.sdet-more-info {
    min-width: 0;
    padding: 12px 13px 30px;
}
.sdet-more-title {
    color: #172033;
    font-size: 13px;
    font-weight: 750;
}
.sdet-more-row:hover .sdet-more-title,
.sdet-more-row--playing .sdet-more-title,
.sdet-more-row--current .sdet-more-title {
    color: #6d28d9;
}
.sdet-more-meta {
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: 9.5px;
}
.sdet-more-plays {
    position: absolute;
    bottom: 15px;
    left: 13px;
    color: #8491a6;
    font-size: 9.5px;
}
.sdet-more-plays::before {
    display: inline-block;
    margin-right: 4px;
    color: #a78bfa;
    content: "\25B6";
    font-size: 7px;
}
.sdet-more-play-btn {
    position: absolute;
    top: calc(50% - 54px);
    left: 50%;
    z-index: 6;
    display: none;
}
.sdet-more-add-pl {
    position: absolute;
    right: 9px;
    bottom: 9px;
    z-index: 6;
    width: 28px;
    height: 28px;
    opacity: 0;
    background: #f5f3ff;
}
.sdet-more-row:hover .sdet-more-add-pl,
.sdet-more-add-pl:focus-visible {
    opacity: 1;
}
.sdet-load-more-wrap {
    padding: 0 24px 24px;
}
.sdet-load-more-btn {
    min-height: 39px;
    padding: 8px 16px;
    border-color: #e0e6ef;
    border-radius: 11px;
    color: #475569;
    background: #f8fafc;
    font-size: 11px;
    font-weight: 750;
}
.sdet-load-more-btn:hover {
    border-color: rgba(124, 58, 237, .28);
    color: #6d28d9;
    background: #f7f3ff;
}

@media (max-width: 1100px) {
    .sdet-more-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 820px) {
    .sdet-more-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 620px) {
    .sdet-more-heading {
        align-items: flex-start;
        padding: 20px;
    }
    .sdet-more-heading__avatar,
    .sdet-more-heading__sub {
        display: none;
    }
    .sdet-more-heading .sdet-section-title {
        font-size: 20px;
    }
    .sdet-more-heading__profile {
        min-height: 34px;
        padding: 7px 9px;
    }
    .sdet-more-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 16px;
    }
    .sdet-load-more-wrap {
        padding: 0 16px 18px;
    }
}
@media (max-width: 390px) {
    .sdet-more-heading__profile {
        width: 34px;
        padding: 0;
        font-size: 0;
        justify-content: center;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sdet-more-row,
    .sdet-more-art,
    .now-playing__deck-hint {
        transition: none;
    }
}

/* =============================================================================
   SONG DETAIL: PREMIUM SINGLE-RELEASE HERO
============================================================================= */
.sdet-content {
    padding: 20px 24px 44px !important;
}
.sdet-hero {
    min-height: 390px;
    margin: 0 0 22px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 24px;
    background:
        var(--for-you-hero-overlay),
        var(--for-you-hero-background);
    box-shadow: 0 25px 62px rgba(15, 23, 42, .25);
    isolation: isolate;
}
.sdet-hero__bg {
    opacity: 0;
    filter: blur(46px) brightness(.58) saturate(1.3);
    transform: scale(1.2);
}
.sdet-hero__bg--fallback {
    opacity: 0;
}
.sdet-hero__scrim,
.sdet-hero--no-art .sdet-hero__scrim {
    z-index: 1;
    background: transparent;
}
.sdet-hero__aura {
    position: absolute;
    top: -160px;
    right: 4%;
    z-index: 1;
    width: 470px;
    height: 470px;
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 50%;
    box-shadow: 0 0 0 55px rgba(255, 255, 255, .018), 0 0 0 115px rgba(255, 255, 255, .012);
    pointer-events: none;
}
.sdet-hero__waveform {
    position: absolute;
    right: 4%;
    bottom: 38px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
    width: min(260px, 24vw);
    height: 84px;
    opacity: .24;
    pointer-events: none;
}
.sdet-hero__waveform i {
    width: 3px;
    height: var(--sdet-wave-height, 16%);
    flex: 1 1 3px;
    border-radius: 99px;
    background: linear-gradient(to top, rgba(255,255,255,.54), #fff);
    box-shadow: 0 0 12px rgba(255,255,255,.08);
    transform-origin: center;
    transition: height 90ms linear, opacity 180ms ease;
}
.sdet-hero__waveform:not(.sdet-hero__waveform--reactive) i:nth-child(2n) { --sdet-wave-height: 36%; }
.sdet-hero__waveform:not(.sdet-hero__waveform--reactive) i:nth-child(3n) { --sdet-wave-height: 59%; }
.sdet-hero__waveform:not(.sdet-hero__waveform--reactive) i:nth-child(5n) { --sdet-wave-height: 82%; }
.sdet-hero__waveform.is-playing {
    opacity: .42;
}
.sdet-hero__waveform.is-playing i {
    box-shadow: 0 0 15px rgba(255,255,255,.18);
}
.sdet-hero__inner {
    z-index: 3;
    align-items: center;
    gap: clamp(32px, 5vw, 68px);
    min-height: 390px;
    padding: 42px clamp(34px, 5.5vw, 72px);
    box-sizing: border-box;
}
.sdet-cover-wrap {
    width: 300px;
    height: 250px;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
}
.sdet-cover {
    top: 4px;
    right: auto;
    bottom: auto;
    left: 0;
    z-index: 2;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 18px;
    box-shadow: 0 28px 55px rgba(2, 6, 23, .48), 0 0 0 8px rgba(255, 255, 255, .035);
}
.sdet-cover--fallback {
    background: linear-gradient(145deg, rgba(124, 58, 237, .76), rgba(37, 99, 235, .6));
}
.sdet-cover-vinyl {
    position: absolute;
    top: 19px;
    right: 4px;
    z-index: 1;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, .9) 0 4px, #7c3aed 5px 23px, #0f172a 24px 29px, transparent 30px),
        repeating-radial-gradient(circle, #111827 0 7px, #20293a 8px 9px);
    box-shadow: 18px 24px 48px rgba(2, 6, 23, .38);
}
.sdet-cover-vinyl::after {
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
    content: "";
}
.sdet-cover__spin-ring {
    top: -2px;
    right: auto;
    bottom: auto;
    left: -6px;
    z-index: 4;
    width: 226px;
    height: 226px;
    box-sizing: border-box;
}
.sdet-cover-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    color: rgba(255, 255, 255, .46);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.sdet-info {
    max-width: 700px;
}
.sdet-breadcrumb {
    margin-bottom: 20px;
    color: rgba(255, 255, 255, .45);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.sdet-info__type {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 9px;
    color: #c4b5fd;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .2em;
}
.sdet-info__type span {
    width: 22px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, #a78bfa, #38bdf8);
}
.sdet-info__title {
    margin-bottom: 14px;
    color: #fff;
    font-size: clamp(42px, 5.4vw, 72px);
    font-weight: 800;
    line-height: .96;
    letter-spacing: -.06em;
    white-space: normal;
    text-shadow: 0 10px 28px rgba(0, 0, 0, .3);
}
.sdet-info__artist {
    margin-bottom: 14px;
}
.sdet-artist-link,
.sdet-artist-plain {
    gap: 9px;
    color: #fff;
    font-size: 14px;
    font-weight: 750;
}
.sdet-artist-avatar,
.sdet-artist-init {
    width: 30px;
    height: 30px;
    border: 2px solid rgba(255, 255, 255, .28);
    box-shadow: 0 6px 14px rgba(2, 6, 23, .25);
}
.sdet-meta-row {
    gap: 7px;
    margin-bottom: 13px;
}
.sdet-meta-pill {
    min-height: 27px;
    padding: 4px 10px;
    border-color: rgba(255, 255, 255, .16);
    color: rgba(241, 245, 249, .84);
    background: rgba(255, 255, 255, .085);
    font-size: 10px;
    font-weight: 650;
    backdrop-filter: blur(8px);
}
.sdet-meta-pill--genre {
    border-color: rgba(167, 139, 250, .28);
    background: rgba(124, 58, 237, .2);
}
.sdet-stats-row {
    margin-bottom: 20px;
}
.sdet-stat {
    color: rgba(226, 232, 240, .62);
    font-size: 11px;
}
.sdet-actions {
    gap: 10px;
    flex-wrap: wrap;
}
.sdet-play-btn {
    min-height: 46px;
    padding: 11px 25px;
    border-radius: 13px;
    background: linear-gradient(135deg, #8b5cf6, #2563eb);
    box-shadow: 0 13px 26px rgba(37, 99, 235, .32);
}
.sdet-back-btn,
.sdet-share-btn {
    min-height: 42px;
    padding: 9px 15px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 12px;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .09);
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(9px);
}
.sdet-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}
.sdet-back-btn:hover,
.sdet-share-btn:hover {
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
    background: rgba(255, 255, 255, .16);
}
.sdet-like-btn,
.sdet-more-btn {
    width: 42px;
    height: 42px;
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .09);
    backdrop-filter: blur(9px);
}
.sdet-section:not(.sdet-section--more) {
    padding: 25px 28px;
    border-color: rgba(218, 225, 236, .94);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .065);
}
.sdet-description {
    max-width: 850px;
    color: #64748b;
    line-height: 1.8;
}

@media (max-width: 980px) {
    .sdet-hero__inner {
        gap: 30px;
        padding-inline: 34px;
    }
    .sdet-cover-wrap {
        width: 235px;
        height: 215px;
    }
    .sdet-cover {
        width: 190px;
        height: 190px;
    }
    .sdet-cover-vinyl {
        top: 17px;
        width: 160px;
        height: 160px;
    }
    .sdet-cover__spin-ring {
        width: 196px;
        height: 196px;
    }
    .sdet-hero__waveform {
        display: none;
    }
}
@media (max-width: 700px) {
    .sdet-content {
        padding: 14px 14px 38px !important;
        overflow-x: hidden;
    }
    .sdet-hero {
        min-height: 0;
        border-radius: 18px;
    }
    .sdet-hero__inner {
        flex-direction: column;
        align-items: flex-start;
        min-height: 0;
        padding: 27px 23px 29px;
        box-sizing: border-box;
    }
    .sdet-cover-wrap {
        width: 205px;
        height: 185px;
        margin-inline: auto;
    }
    .sdet-cover {
        width: 165px;
        height: 165px;
        border-radius: 14px;
    }
    .sdet-cover-vinyl {
        top: 14px;
        width: 140px;
        height: 140px;
    }
    .sdet-cover__spin-ring {
        width: 171px;
        height: 171px;
    }
    .sdet-cover-caption {
        display: none;
    }
    .sdet-info {
        width: 100%;
        max-width: none;
    }
    .sdet-breadcrumb {
        margin-bottom: 14px;
    }
    .sdet-info__title {
        font-size: clamp(38px, 12vw, 54px);
    }
    .sdet-actions {
        justify-content: flex-start;
    }
}
@media (max-width: 440px) {
    .sdet-cover-wrap {
        margin-inline: 0;
    }
    .sdet-play-btn {
        min-width: 128px;
    }
    .sdet-back-btn {
        order: 5;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sdet-cover__spin-ring--active {
        animation: none;
    }
}

/* =============================================================================
   PAGE-BY-PAGE PRODUCT REFINEMENT
   Editorial pages use expressive headers; workflow pages remain compact.
============================================================================= */

/* Songs catalog: compact editorial header, intentionally smaller than a detail hero. */
.sng-page-header {
    position: relative;
    isolation: isolate;
    min-height: 190px;
    margin-bottom: 18px;
    padding: clamp(24px, 3.5vw, 42px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 82% 15%, rgba(14, 165, 233, .32), transparent 28%),
        radial-gradient(circle at 58% 120%, rgba(124, 58, 237, .34), transparent 38%),
        linear-gradient(135deg, #071d3a 0%, #123d77 56%, #155e95 100%);
    box-shadow: 0 22px 50px rgba(17, 51, 95, .20);
}
.sng-page-header::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .15;
    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(90deg, transparent 28%, #000);
}
.sng-page-header__content { max-width: 680px; }
.sng-page-header__eyebrow,
.lk-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.sng-page-header__eyebrow {
    padding: 5px 10px;
    color: rgba(255,255,255,.78);
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--radius-pill);
}
.sng-page-header__title {
    max-width: 620px;
    margin: 0 0 9px;
    color: #fff;
    font-size: clamp(27px, 3.5vw, 43px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.045em;
}
.sng-page-header__sub {
    max-width: 590px;
    margin: 0;
    color: rgba(235, 244, 255, .70);
    font-size: 14px;
    line-height: 1.65;
}
.sng-page-header__aside {
    min-width: 190px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
}
.sng-page-header__count {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
}
.sng-page-header__count strong {
    color: #fff;
    font-size: 26px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.sng-page-header__count span {
    margin-top: 4px;
    color: rgba(255,255,255,.54);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.sng-page-header__wave {
    height: 42px;
    display: flex;
    align-items: flex-end;
    gap: 5px;
}
.sng-page-header__wave i {
    display: block;
    width: 5px;
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(to top, #7ec8ff, #fff);
    animation: sng-header-wave 1.15s ease-in-out infinite alternate;
}
.sng-page-header__wave i:nth-child(2) { height: 28px; animation-delay: -.6s; }
.sng-page-header__wave i:nth-child(3) { height: 20px; animation-delay: -.25s; }
.sng-page-header__wave i:nth-child(4) { height: 40px; animation-delay: -.8s; }
.sng-page-header__wave i:nth-child(5) { height: 24px; animation-delay: -.45s; }
.sng-page-header__wave i:nth-child(6) { height: 34px; animation-delay: -.15s; }
.sng-page-header__wave i:nth-child(7) { height: 18px; animation-delay: -.7s; }
@keyframes sng-header-wave {
    to { transform: scaleY(.42); opacity: .62; }
}

/* Public catalog heroes share one premium geometry while retaining their colors. */
:is(.alb-hero, .evt-hero, .gnr-hero, .pll-hero, .rdp-hero, .ast-ph) {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 22px;
    box-shadow: 0 20px 48px rgba(15, 40, 82, .17);
}

.ast-ph {
    position: relative;
    isolation: isolate;
    min-height: 176px;
    padding: 30px 34px;
    color: #fff;
    background:
        radial-gradient(circle at 84% 5%, rgba(126, 200, 255, .28), transparent 28%),
        linear-gradient(135deg, #20105c 0%, #4f46a5 52%, #146a9b 100%);
}
.ast-ph::after {
    content: '';
    position: absolute;
    right: -44px;
    bottom: -74px;
    z-index: -1;
    width: 240px;
    height: 240px;
    border: 38px solid rgba(255,255,255,.07);
    border-radius: 50%;
}
.ast-ph__icon {
    width: 48px;
    height: 48px;
    color: #fff;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .18);
}
.ast-ph__title {
    color: #fff;
    font-size: clamp(26px, 3vw, 38px);
    letter-spacing: -.04em;
}
.ast-ph__sub { max-width: 650px; color: rgba(255,255,255,.68); }
.ast-ph__sub { white-space: normal; overflow: visible; text-overflow: clip; }
.ast-ph__badge {
    color: #fff;
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.16);
    backdrop-filter: blur(8px);
}
.ast-ph__badge strong { color: #fff; }

/* Library pages feel personal and premium, not like data tables. */
.lk-hero {
    position: relative;
    isolation: isolate;
    min-height: 170px;
    padding: 28px 34px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 120%, rgba(244, 63, 94, .42), transparent 38%),
        radial-gradient(circle at 84% -10%, rgba(14, 165, 233, .26), transparent 30%),
        linear-gradient(135deg, #29104f 0%, #57236f 48%, #153f75 100%);
    box-shadow: 0 20px 48px rgba(65, 26, 88, .20);
}
.lk-hero::after {
    content: '';
    position: absolute;
    right: 10%;
    top: -55px;
    z-index: -1;
    width: 180px;
    height: 180px;
    border: 28px solid rgba(255,255,255,.055);
    border-radius: 50%;
}
.lk-hero__icon {
    color: #fff;
    background: rgba(244, 63, 94, .26);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 14px 30px rgba(22, 8, 40, .24);
}
.lk-hero__eyebrow { margin-bottom: 5px; color: rgba(255,255,255,.58); }
.lk-hero__title { color: #fff; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.04em; }
.lk-hero__sub { color: rgba(255,255,255,.68); }
.lk-hero__action {
    position: relative;
    z-index: 1;
    margin-left: auto;
    min-height: 40px;
    padding: 9px 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.10);
    font-size: 12px;
    font-weight: 800;
    transition: background .18s ease, transform .18s ease;
}
.lk-hero__action:hover { color: #fff; background: rgba(255,255,255,.18); transform: translateY(-1px); }
.lk-tracks-section {
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: rgba(255,255,255,.82);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.lk-section-hd {
    padding: 14px 18px;
    background: linear-gradient(90deg, rgba(124,58,237,.07), transparent);
}
.lk-list { padding: 4px 8px 10px; }
.lk-row { border-bottom: 1px solid rgba(227,232,241,.72); border-radius: 0; }
.lk-row:last-child { border-bottom: 0; }

/* Filters read as intentional toolbars across all catalogs. */
:is(.sng-filter-bar, .ast-filter-bar, .alb-filter-bar, .evt-filter-bar, .rdp-filter-bar) {
    border: 1px solid rgba(218, 225, 236, .92);
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .05);
}
:is(.sng-pill, .rdp-pill) {
    min-height: 34px;
    padding-inline: 14px;
    font-weight: 700;
}
:is(.sng-pill--active, .rdp-pill--active) {
    box-shadow: 0 6px 14px rgba(124, 58, 237, .18);
}

/* Consistent content-card quality across the public product. */
:is(.gnr-card, .rdp-card, .pll-card, .evt-card, .evt-feat-card) {
    border: 1px solid rgba(218, 225, 236, .92);
    box-shadow: 0 5px 18px rgba(15, 23, 42, .06);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
:is(.gnr-card, .rdp-card, .pll-card, .evt-card, .evt-feat-card):hover {
    transform: translateY(-5px);
    border-color: rgba(124, 58, 237, .22);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .12);
}
.gnr-card { border-radius: 17px; }
.rdp-card,
.pll-card,
.evt-card { border-radius: 16px; overflow: hidden; }
.evt-feat-card { border-radius: 20px; overflow: hidden; }

/* Detail pages should feel immersive and carry the selected content identity. */
:is(.sdet-hero, .adet-hero, .pdet-hero, .gdet-hero, .evtd-hero) {
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 22px 54px rgba(15, 23, 42, .20);
}
.albdet-hero {
    min-height: 320px;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.08), 0 18px 46px rgba(15,23,42,.14);
}
:is(.sdet-cover, .albdet-cover, .pdet-cover, .adet-avatar) {
    box-shadow: 0 22px 45px rgba(2, 8, 23, .36);
}
:is(.adet-bio-section, .adet-tracks-section, .sdet-body-card, .pdet-tracks-section, .gdet-tracks-section) {
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

/* Workflow surfaces: restrained headers, strong grouping, no marketing hero. */
.sp-header {
    background:
        linear-gradient(90deg, rgba(124,58,237,.045), transparent 50%),
        var(--color-surface);
}
.sp-header__title { font-size: clamp(22px, 2.5vw, 28px); letter-spacing: -.035em; }
.sp-header__subtitle { max-width: 720px; line-height: 1.55; }
:is(.sp-card, .st-admin-section, .acp-card, .acp-role-card) {
    border-color: rgba(218,225,236,.95);
    box-shadow: 0 7px 22px rgba(15,23,42,.055);
}
.sp-card__header { background: linear-gradient(90deg, #faf9ff, #fbfdff); }
.sp-dropzone {
    background:
        radial-gradient(circle at 50% 0%, rgba(124,58,237,.07), transparent 52%),
        #fbfcff;
}
.sp-dropzone:hover {
    border-color: rgba(124,58,237,.55);
    background-color: #faf8ff;
}
.st-content { background: linear-gradient(135deg, #fff, #fbfcff 68%); }
.st-nav { background: linear-gradient(180deg, #f8faff 0%, #f3f5fb 100%); }
.st-nav-item { border-radius: 9px; }
.st-nav-item.is-active { box-shadow: inset 3px 0 0 #7c3aed, 0 5px 14px rgba(124,58,237,.08); }

/* Admin remains dense and operational while looking production-ready. */
.admin-dash-hero { border-radius: 18px; box-shadow: 0 18px 44px rgba(30,27,75,.22); }
.acp-table-wrap {
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15,23,42,.055);
}
.acp-table thead tr,
.acp-table th { background: #f6f8fc; }
.acp-table tbody tr { transition: background .14s ease; }
.acp-table tbody tr:hover { background: #f5f3ff; }

/* Empty states should guide users back into the product. */
:is(.lk-empty, .pll-empty, .gnr-empty, .ast-empty, .alb-empty, .rdp-empty, .sng-no-results) {
    border: 1px dashed rgba(148,163,184,.42);
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 0%, rgba(124,58,237,.07), transparent 46%),
        rgba(255,255,255,.72);
}

@media (max-width: 760px) {
    .sng-page-header { min-height: 170px; padding: 26px 22px; }
    .sng-page-header__aside { min-width: 120px; }
    .sng-page-header__count { display: none; }
    .ast-ph { padding: 26px 22px; }
    .ast-ph__badges { margin-left: 0; }
    .lk-hero { min-height: 150px; padding: 24px 22px; }
}

@media (max-width: 540px) {
    .sng-page-header { align-items: flex-end; border-radius: 18px; }
    .sng-page-header__aside { min-width: 34px; }
    .sng-page-header__sub { font-size: 13px; line-height: 1.55; }
    .sng-page-header__wave i:nth-child(even) { display: none; }
    :is(.alb-hero, .evt-hero, .gnr-hero, .pll-hero, .rdp-hero, .ast-ph, .lk-hero) {
        border-radius: 18px;
    }
    .ast-ph { align-items: flex-start; }
    .ast-ph__icon { width: 42px; height: 42px; }
    .lk-hero { flex-wrap: wrap; }
    .lk-hero__action { margin-left: 0; }
    :is(.sdet-hero, .adet-hero, .pdet-hero, .gdet-hero, .evtd-hero) {
        border-radius: 16px;
    }
    .admin-dash-hero { border-radius: 14px; }
}

/* =============================================================================
   PAGE HIERARCHY
   Marketing/discovery pages stay immersive; catalogs and workflows stay compact.
============================================================================= */

/* Catalogs: editorial information bands rather than full promotional heroes. */
.page-songs .sng-page-header {
    min-height: 160px;
    padding-block: 28px;
}

.page-albums .content {
    padding-top: 20px;
}
.page-albums .alb-hero {
    min-height: 142px;
    margin: 0;
    color: var(--color-text);
    background:
        radial-gradient(circle at 92% 0%, rgba(37,99,235,.10), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #faf9ff 55%, #f2f7ff 100%);
    border: 1px solid rgba(218,225,236,.96);
    box-shadow: 0 12px 32px rgba(15,23,42,.075);
}
.page-albums .alb-hero::after,
.page-albums .alb-hero__waves {
    display: none;
}
.page-albums .alb-hero__body {
    min-height: 142px;
    padding: 24px 28px;
    align-items: center;
}
.page-albums .alb-hero__badge {
    margin-bottom: 8px;
    color: #6d28d9;
    background: #f4f0ff;
    border-color: #e5dcff;
}
.page-albums .alb-hero__title {
    margin-bottom: 5px;
    color: var(--color-text);
    font-size: clamp(25px, 3vw, 34px);
    letter-spacing: -.04em;
}
.page-albums .alb-hero__sub {
    color: var(--color-text-muted);
}
.page-albums .alb-hero__stats {
    padding: 12px 10px;
    background: rgba(255,255,255,.76);
    border-color: rgba(211,219,232,.96);
    box-shadow: 0 8px 22px rgba(15,23,42,.05);
    backdrop-filter: blur(10px);
}
.page-albums .alb-stat {
    padding-inline: 16px;
}
.page-albums .alb-stat__value {
    color: #312e81;
    font-size: 22px;
}
.page-albums .alb-stat__label {
    color: #7c8497;
}
.page-albums .alb-stat__divider {
    height: 30px;
    background: #e0e5ee;
}
.page-albums .alb-filter-bar {
    margin: 14px 0 0;
    padding: 11px 16px;
    background: rgba(255,255,255,.90);
}

.page-artists .ast-ph {
    min-height: 142px;
    padding: 24px 28px;
    color: var(--color-text);
    background:
        radial-gradient(circle at 90% 10%, rgba(124,58,237,.10), transparent 30%),
        linear-gradient(135deg, #fff 0%, #fbfaff 58%, #f4f7ff 100%);
    border-color: rgba(218,225,236,.96);
    box-shadow: 0 12px 32px rgba(15,23,42,.075);
}
.page-artists .ast-ph::after {
    width: 190px;
    height: 190px;
    right: -54px;
    bottom: -104px;
    border-color: rgba(124,58,237,.055);
}
.page-artists .ast-ph__icon {
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    border: 0;
    box-shadow: 0 10px 24px rgba(79,70,229,.22);
}
.page-artists .ast-ph__title {
    color: var(--color-text);
    font-size: clamp(25px, 3vw, 34px);
}
.page-artists .ast-ph__sub {
    color: var(--color-text-muted);
}
.page-artists .ast-ph__badge {
    color: var(--color-text-muted);
    background: rgba(255,255,255,.80);
    border-color: rgba(218,225,236,.96);
}
.page-artists .ast-ph__badge strong {
    color: #6d28d9;
}

.page-genres .gnr-hero {
    min-height: 142px;
    color: var(--color-text);
    background:
        radial-gradient(circle at 88% 0%, rgba(14,165,233,.11), transparent 32%),
        linear-gradient(135deg, #fff 0%, #f9fbff 56%, #f3f8ff 100%);
    border-color: rgba(218,225,236,.96);
    box-shadow: 0 12px 32px rgba(15,23,42,.075);
}
.page-genres .gnr-hero::after,
.page-genres .gnr-hero__waves {
    display: none;
}
.page-genres .gnr-hero__body {
    min-height: 142px;
    padding: 24px 28px;
    align-items: center;
}
.page-genres .gnr-hero__badge {
    color: #075985;
    background: #eaf8ff;
    border-color: #cdeeff;
}
.page-genres .gnr-hero__title {
    color: var(--color-text);
    font-size: clamp(25px, 3vw, 34px);
    letter-spacing: -.04em;
}
.page-genres .gnr-hero__sub {
    color: var(--color-text-muted);
}
.page-genres .gnr-hero__stats {
    background: rgba(255,255,255,.82);
    border-color: rgba(211,219,232,.96);
    box-shadow: 0 8px 22px rgba(15,23,42,.05);
}
.page-genres .gnr-stat__value {
    color: #075985;
}
.page-genres .gnr-stat__label {
    color: #7c8497;
}

/* Personal collections keep warmth and identity without becoming a landing-page hero. */
.page-library .lk-hero {
    min-height: 148px;
    padding-block: 24px;
}
.page-library .lk-tracks-section {
    margin-top: 18px;
}

/* Workflow pages prioritize actions, status and dense information. */
.page-workflow .sp-header {
    min-height: auto;
    padding-top: 20px;
    background:
        linear-gradient(90deg, rgba(124,58,237,.045), transparent 42%),
        var(--color-surface);
    box-shadow: none;
}
.page-workflow .sp-header__top {
    margin-bottom: 16px;
}
.page-billing .sp-body {
    padding-top: 22px;
}
.page-billing .acp-card {
    overflow: hidden;
}

/* Payment settings */
.payset {
    gap: 18px;
}
.payset-hero {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 28px 32px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 88% 20%, rgba(56, 189, 248, .24), transparent 28%),
        linear-gradient(125deg, #27105d 0%, #243fa8 55%, #087da0 100%);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(30, 41, 99, .17);
}
.payset-hero--attention {
    background:
        radial-gradient(circle at 88% 20%, rgba(251, 191, 36, .18), transparent 28%),
        linear-gradient(125deg, #311260 0%, #273d9b 55%, #176b86 100%);
}
.payset-kicker {
    display: block;
    margin-bottom: 6px;
    color: #7c5ce5;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.payset-hero .payset-kicker {
    color: rgba(224, 231, 255, .72);
}
.payset-hero h2 {
    max-width: 680px;
    margin: 0;
    font-size: clamp(25px, 3.2vw, 38px);
    line-height: 1.08;
    letter-spacing: -.045em;
}
.payset-hero p {
    max-width: 650px;
    margin: 9px 0 0;
    color: rgba(231, 238, 255, .72);
    font-size: 12px;
    line-height: 1.6;
}
.payset-hero__state {
    min-width: 170px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    color: #fff;
    background: rgba(4, 15, 46, .27);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 12px;
    font-size: 10px;
    font-weight: 800;
    backdrop-filter: blur(12px);
}
.payset-hero__state-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #d1fae5;
    background: rgba(16, 185, 129, .2);
    border-radius: 9px;
}
.payset-hero--attention .payset-hero__state-icon {
    color: #fef3c7;
    background: rgba(245, 158, 11, .2);
}
.payset-hero__state-icon svg {
    width: 17px;
    height: 17px;
}
.payset-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.payset-alert {
    padding: 11px 14px;
    border: 1px solid;
    border-radius: 9px;
    font-size: 9px;
    font-weight: 750;
}
.payset-alert--success {
    color: #08775a;
    background: #edf9f4;
    border-color: #ccebdc;
}
.payset-alert--error {
    color: #b42318;
    background: #fff3f2;
    border-color: #ffd7d3;
}
.payset-editor__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin-top: 18px;
}
.payset-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #475569;
    font-size: 9px;
    font-weight: 750;
}
.payset-field--wide {
    grid-column: 1 / -1;
}
.payset-field input[type="text"],
.payset-field input[type="url"],
.payset-field input[type="password"] {
    width: 100%;
    height: 39px;
    padding: 0 12px;
    color: #17213a;
    background: #fbfcfe;
    border: 1px solid #d9e0eb;
    border-radius: 8px;
    outline: 0;
    font: inherit;
    font-size: 10px;
    font-weight: 550;
    box-sizing: border-box;
}
.payset-field input:focus {
    background: #fff;
    border-color: #7657dc;
    box-shadow: 0 0 0 3px rgba(118, 87, 220, .11);
}
.payset-field input:disabled {
    color: #8b95a7;
    background: #f2f4f7;
    cursor: not-allowed;
}
.payset-field > small {
    color: #8791a3;
    font-size: 8px;
    font-weight: 500;
    line-height: 1.45;
}
.payset-field > small.is-warning {
    color: #b6650b;
}
.payset-field--toggle,
.payset-field--clear {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 13px 14px;
    background: #f8fafc;
    border: 1px solid #e2e7ef;
    border-radius: 9px;
}
.payset-field--toggle strong,
.payset-field--toggle small,
.payset-field--clear strong,
.payset-field--clear small {
    display: block;
}
.payset-field--toggle strong,
.payset-field--clear strong {
    color: #27344f;
    font-size: 9.5px;
}
.payset-field--toggle small,
.payset-field--clear small {
    margin-top: 3px;
    color: #7e899b;
    font-size: 8px;
    font-weight: 500;
}
.payset-field--clear {
    justify-content: flex-start;
    gap: 10px;
    cursor: pointer;
}
.payset-field--clear input {
    accent-color: #dc3545;
}
.payset-editor__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 19px;
    padding-top: 17px;
    border-top: 1px solid #e7ebf2;
}
.payset-editor__footer > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #708096;
    font-size: 8px;
    font-weight: 700;
}
.payset-editor__footer > span svg {
    color: #07865d;
}
.payset-status-card {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 17px;
    background: #fff;
    border: 1px solid #dfe5ef;
    border-radius: 12px;
    box-shadow: 0 7px 20px rgba(15, 23, 42, .045);
}
.payset-status-card__icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
}
.payset-status-card__icon svg {
    width: 17px;
    height: 17px;
}
.payset-status-card__icon--purple { color: #6d4be8; background: #f0ecff; }
.payset-status-card__icon--blue { color: #2563eb; background: #eaf1ff; }
.payset-status-card__icon--cyan { color: #0783a7; background: #e6f8fc; }
.payset-status-card__icon--green { color: #059669; background: #e9f9f1; }
.payset-status-card small,
.payset-status-card strong,
.payset-status-card span {
    display: block;
}
.payset-status-card small {
    color: #8a94a6;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.payset-status-card strong {
    margin-top: 3px;
    color: #17213a;
    font-size: 16px;
}
.payset-status-card div > span {
    margin-top: 4px;
    color: #7a8497;
    font-size: 8px;
    line-height: 1.4;
}
.payset-status-card div > span.is-good { color: #07865d; }
.payset-status-card div > span.is-warning { color: #b6650b; }
.payset-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 16px;
}
.payset-panel {
    padding: 22px;
    background: #fff;
    border: 1px solid #dfe5ef;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}
.payset-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 17px;
    border-bottom: 1px solid #e7ebf2;
}
.payset-panel__header h2 {
    margin: 0;
    color: #17213a;
    font-size: 17px;
    letter-spacing: -.025em;
}
.payset-panel__header p {
    margin: 4px 0 0;
    color: #7a8497;
    font-size: 9px;
    line-height: 1.5;
}
.payset-provider-badge,
.payset-secure-note {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    color: #6546dc;
    background: #f1edff;
    border: 1px solid #e3dcff;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
}
.payset-secure-note {
    color: #08775a;
    background: #edf9f4;
    border-color: #d3f0e3;
}
.payset-config-list {
    margin: 0;
}
.payset-config-list > div {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #edf0f5;
}
.payset-config-list > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.payset-config-list dt {
    color: #6f7a8e;
    font-size: 9px;
    font-weight: 750;
}
.payset-config-list dd {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
}
.payset-config-list code {
    min-width: 0;
    overflow: hidden;
    color: #27344f;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payset-copy {
    flex-shrink: 0;
    padding: 5px 8px;
    color: #6043d8;
    background: #f5f2ff;
    border: 1px solid #e2dcfb;
    border-radius: 7px;
    font: inherit;
    font-size: 8px;
    font-weight: 800;
    cursor: pointer;
}
.payset-copy:hover {
    background: #ebe5ff;
}
.payset-lock {
    color: #8390a4;
    font-size: 8px;
}
.payset-checklist {
    display: grid;
    gap: 15px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.payset-checklist li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
}
.payset-checklist li > span {
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    margin-top: 1px;
    background: #fff;
    border: 1.5px solid #cbd3df;
    border-radius: 50%;
}
.payset-checklist li.is-complete > span {
    background: #10b981;
    border-color: #10b981;
}
.payset-checklist li.is-complete > span::after {
    color: #fff;
    font-size: 11px;
    content: "✓";
}
.payset-checklist strong,
.payset-checklist small {
    display: block;
}
.payset-checklist strong {
    color: #27344f;
    font-size: 10px;
}
.payset-checklist small {
    margin-top: 3px;
    color: #7b8799;
    font-size: 8px;
    line-height: 1.45;
}
.payset-env .payset-panel__header {
    align-items: center;
}
.payset-code-wrap {
    position: relative;
    margin-top: 17px;
}
.payset-code-wrap pre {
    min-height: 150px;
    margin: 0;
    padding: 21px;
    overflow-x: auto;
    color: #c9d7f5;
    background: #0b1730;
    border: 1px solid #172b50;
    border-radius: 11px;
    font-size: 10px;
    line-height: 1.85;
}
.payset-copy--code {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #e5e7ff;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .13);
}
.payset-copy--code:hover {
    background: rgba(255, 255, 255, .14);
}
.payset-callout {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 13px;
    padding: 12px 14px;
    color: #566278;
    background: #f7f9fc;
    border: 1px solid #e4e9f1;
    border-radius: 9px;
}
.payset-callout svg {
    flex-shrink: 0;
    color: #6d4be8;
}
.payset-callout p {
    margin: 0;
    font-size: 8.5px;
    line-height: 1.55;
}
.payset-toast {
    position: fixed;
    right: 24px;
    bottom: 96px;
    z-index: 600;
    padding: 9px 13px;
    color: #fff;
    background: #17213a;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 750;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}
.payset-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (max-width: 1050px) {
    .payset-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 760px) {
    .payset-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 24px;
    }
    .payset-hero__state {
        min-width: 0;
    }
    .payset-layout {
        grid-template-columns: 1fr;
    }
    .payset-panel__header {
        flex-direction: column;
    }
}
@media (max-width: 520px) {
    .payset-status-grid {
        grid-template-columns: 1fr;
    }
    .payset-config-list > div {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .payset-config-list dd {
        align-items: flex-start;
        flex-direction: column;
    }
    .payset-editor__grid {
        grid-template-columns: 1fr;
    }
    .payset-editor__footer {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Admin dashboard: operational summary, deliberately not a marketing hero. */
.page-admin-dashboard .admin-dash-hero {
    min-height: 126px;
    padding: 24px 28px;
    color: var(--color-text);
    background:
        linear-gradient(90deg, rgba(124,58,237,.05), transparent 52%),
        #fff !important;
    border: 1px solid rgba(218,225,236,.96);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(15,23,42,.07);
}
.page-admin-dashboard .admin-dash-hero::before,
.page-admin-dashboard .admin-dash-hero::after {
    display: none !important;
}
.page-admin-dashboard .admin-dash-hero__eyebrow {
    margin-bottom: 7px;
    color: #6d28d9;
    background: #f4f0ff;
    border-color: #e5dcff;
}
.page-admin-dashboard .admin-dash-hero__title {
    color: var(--color-text);
    font-size: clamp(23px, 2.7vw, 30px);
}
.page-admin-dashboard .admin-dash-hero__sub {
    color: var(--color-text-muted);
}
.page-admin-dashboard .admin-dash-stat {
    min-width: 84px;
    padding: 10px 16px;
    background: #f8f9fd;
    border-color: #e1e6ef;
    backdrop-filter: none;
}
.page-admin-dashboard .admin-dash-stat__val {
    color: #312e81;
    font-size: 22px;
}
.page-admin-dashboard .admin-dash-stat__lbl {
    color: #7c8497;
}

@media (max-width: 760px) {
    .page-albums .alb-hero__body,
    .page-genres .gnr-hero__body,
    .page-artists .ast-ph {
        min-height: auto;
        padding: 22px;
    }
    .page-albums .alb-hero__stats {
        width: 100%;
        justify-content: space-evenly;
    }
    .page-admin-dashboard .admin-dash-hero {
        padding: 22px;
    }
}

@media (max-width: 540px) {
    .page-songs .sng-page-header {
        min-height: 150px;
    }
    .page-albums .alb-hero__stats,
    .page-genres .gnr-hero__stats,
    .page-artists .ast-ph__badges {
        display: none;
    }
    .page-albums .alb-hero,
    .page-artists .ast-ph,
    .page-genres .gnr-hero,
    .page-library .lk-hero {
        border-radius: 16px;
    }
    .page-admin-dashboard .admin-dash-hero__right {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .page-admin-dashboard .admin-dash-stat {
        min-width: 0;
        padding-inline: 8px;
    }
}

/* =============================================================================
   ARTIST DIRECTORY LIST VIEW
============================================================================= */
.ast-list-head,
.ast-card__profile-action {
    display: none;
}
.ast-card__identity {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.ast-card__identity-meta {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.ast-grid--list {
    gap: 0;
    overflow: hidden;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(218,225,236,.96);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15,23,42,.06);
}
.ast-grid--list .ast-list-head {
    display: grid;
    grid-template-columns: 64px minmax(180px, 1.55fr) minmax(110px, .8fr) minmax(100px, .7fr) minmax(100px, .7fr) 112px;
    align-items: center;
    min-height: 42px;
    padding: 0 18px;
    color: #8a94a6;
    background: #f7f8fc;
    border-bottom: 1px solid #e1e6ef;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.ast-grid--list .ast-card {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(180px, 1.55fr) minmax(110px, .8fr) minmax(100px, .7fr) minmax(100px, .7fr) 112px;
    align-items: center;
    min-height: 78px;
    margin: 0;
    padding: 10px 18px;
    gap: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(226,231,239,.92);
    border-radius: 0;
    box-shadow: none;
}
.ast-grid--list .ast-card:last-child {
    border-bottom: 0;
}
.ast-grid--list .ast-card::before {
    content: '';
    position: absolute;
    inset: 8px auto 8px 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(#7c3aed, #2563eb);
    opacity: 0;
    transform: scaleY(.45);
    transition: opacity .16s ease, transform .16s ease;
}
.ast-grid--list .ast-card:hover,
.ast-grid--list .ast-card:focus-visible {
    background: linear-gradient(90deg, rgba(124,58,237,.055), rgba(37,99,235,.025) 45%, transparent);
    border-color: rgba(226,231,239,.92);
    box-shadow: none;
    outline: none;
}
.ast-grid--list .ast-card:hover::before,
.ast-grid--list .ast-card:focus-visible::before {
    opacity: 1;
    transform: scaleY(1);
}
.ast-grid--list .ast-card__avatar-wrap {
    grid-column: 1;
    width: 52px;
    height: 52px;
    border: 2px solid #fff;
    box-shadow: 0 3px 12px rgba(15,23,42,.15);
}
.ast-grid--list .ast-card__avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6d64a8;
    background:
        radial-gradient(circle at 50% 24%, rgba(124,58,237,.11), transparent 42%),
        linear-gradient(145deg, #f5f2ff, #e9eefb);
}
.ast-grid--list .ast-card__fallback-icon {
    display: block;
    width: 25px;
    height: 25px;
    opacity: .82;
}
.ast-grid--list .ast-card__overlay {
    display: none;
}
.ast-grid--list .ast-card__body {
    display: contents;
}
.ast-grid--list .ast-card__identity {
    grid-column: 2;
    align-items: flex-start;
    gap: 6px;
    padding-right: 18px;
}
.ast-grid--list .ast-card__identity-meta {
    justify-content: flex-start;
}
.ast-grid--list .ast-card__name {
    margin: 0;
    justify-content: flex-start;
    color: #172033;
    font-size: 14px;
    font-weight: 800;
}
.ast-grid--list .ast-card__genre {
    padding: 3px 8px;
    color: #6d28d9;
    background: #f4f0ff;
    border: 1px solid #e6ddff;
}
.ast-grid--list .ast-card__country {
    color: #8a94a6;
    font-size: 11px;
}
.ast-grid--list .ast-card__country::before {
    content: none;
}
.ast-grid--list .ast-card__listeners {
    grid-column: 3;
}
.ast-grid--list .ast-card__track-count {
    grid-column: 4;
}
.ast-grid--list .ast-card__like-count {
    grid-column: 5;
    margin: 0;
}
.ast-grid--list :is(.ast-card__listeners, .ast-card__track-count, .ast-card__like-count) {
    justify-self: start;
    color: #657086;
    font-size: 12px;
    font-weight: 600;
}
.ast-grid--list .ast-card__track-count {
    display: flex;
    align-items: center;
    gap: 5px;
}
.ast-grid--list .ast-card__profile-action {
    grid-column: 6;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #6d28d9;
    font-size: 11px;
    font-weight: 800;
    opacity: .72;
    transition: opacity .16s ease, transform .16s ease;
}
.ast-grid--list .ast-card:hover .ast-card__profile-action,
.ast-grid--list .ast-card:focus-visible .ast-card__profile-action {
    opacity: 1;
    transform: translateX(2px);
}

@media (max-width: 900px) {
    .ast-grid--list .ast-list-head,
    .ast-grid--list .ast-card {
        grid-template-columns: 64px minmax(170px, 1.4fr) minmax(105px, .8fr) minmax(90px, .7fr) 42px;
    }
    .ast-grid--list .ast-list-head span:nth-child(5) {
        display: none;
    }
    .ast-grid--list .ast-list-head span:last-child {
        grid-column: 5;
    }
    .ast-grid--list .ast-card__like-count {
        display: none;
    }
    .ast-grid--list .ast-card__profile-action {
        grid-column: 5;
        width: 32px;
        height: 32px;
        justify-content: center;
        border-radius: 50%;
        background: #f2efff;
        font-size: 0;
    }
}

@media (max-width: 640px) {
    .ast-grid--list {
        border-radius: 14px;
    }
    .ast-grid--list .ast-list-head {
        display: none;
    }
    .ast-grid--list .ast-card {
        grid-template-columns: 58px minmax(0, 1fr) 38px;
        min-height: 74px;
        padding: 10px 13px;
    }
    .ast-grid--list .ast-card__avatar-wrap {
        width: 48px;
        height: 48px;
    }
    .ast-grid--list .ast-card__identity {
        grid-column: 2;
        padding-right: 10px;
    }
    .ast-grid--list :is(.ast-card__listeners, .ast-card__track-count, .ast-card__like-count) {
        display: none;
    }
    .ast-grid--list .ast-card__profile-action {
        grid-column: 3;
    }
}

/* =============================================================================
   EVENTS DISCOVERY EXPERIENCE
============================================================================= */
.page-events .evt {
    padding-bottom: 68px;
}
.page-events .evt-hero {
    min-height: 224px;
    margin-bottom: 18px;
    background:
        radial-gradient(circle at 80% -20%, rgba(14,165,233,.34), transparent 34%),
        radial-gradient(circle at 18% 120%, rgba(124,58,237,.42), transparent 42%),
        linear-gradient(135deg, #16082f 0%, #172554 52%, #0b3c5f 100%);
    box-shadow: 0 22px 52px rgba(15,23,42,.22);
}
.page-events .evt-hero::before {
    opacity: .68;
}
.page-events .evt-hero__waves {
    opacity: .65;
    transform: translateY(35%);
}
.page-events .evt-hero__body {
    min-height: 224px;
    padding: 32px 36px;
    flex-wrap: nowrap;
}
.page-events .evt-hero__badge {
    margin-bottom: 12px;
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.16);
    color: rgba(255,255,255,.78);
}
.page-events .evt-hero__title {
    max-width: 610px;
    margin: 0 0 10px;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.04;
    letter-spacing: -.045em;
}
.page-events .evt-hero__sub {
    max-width: 590px;
    color: rgba(235,244,255,.68);
    font-size: 14px;
    line-height: 1.65;
}
.evt-hero__aside {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}
.evt-hero__visual {
    position: relative;
    width: 100px;
    height: 100px;
    display: grid;
    place-items: center;
}
.evt-hero__visual-ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    box-shadow: inset 0 0 0 15px rgba(255,255,255,.025);
}
.evt-hero__calendar {
    position: relative;
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.07));
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 17px;
    box-shadow: 0 18px 34px rgba(2,8,23,.28);
    backdrop-filter: blur(12px);
    transform: rotate(-5deg);
}
.evt-hero__calendar-top {
    position: absolute;
    inset: 0 0 auto;
    height: 14px;
    background: linear-gradient(90deg, #8b5cf6, #38bdf8);
}
.page-events .evt-hero__stats {
    padding: 12px 10px;
    background: rgba(255,255,255,.085);
    border-color: rgba(255,255,255,.15);
    border-radius: 15px;
}
.page-events .evt-stat {
    min-width: 72px;
    padding-inline: 12px;
}
.page-events .evt-stat__value {
    font-size: 23px;
}

.page-events .evt-filter-bar {
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 24px rgba(15,23,42,.065);
    backdrop-filter: blur(14px);
}
.page-events .evt-searchbox {
    max-width: 480px;
}
.page-events .evt-searchbox__input {
    height: 38px;
    background: #f3f5fa;
    border: 1px solid transparent;
}
.page-events .evt-searchbox__input:focus {
    background: #fff;
    border-color: rgba(124,58,237,.36);
    box-shadow: 0 0 0 3px rgba(124,58,237,.08);
}
.page-events .evt-searchbox__input::-webkit-search-cancel-button {
    display: none;
}
.evt-jump-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}
.evt-jump-nav a {
    padding: 7px 10px;
    color: #687386;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
}
.evt-jump-nav a:hover {
    color: #6d28d9;
    background: #f4f0ff;
}
.page-events .evt-results-count {
    margin-left: 0;
    padding: 5px 10px;
    color: #6d28d9;
    border-color: #e7dfff;
    border-radius: 9px;
}

.evt-section-heading {
    margin-bottom: 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.evt-section-heading__eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #7c3aed;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.evt-section-heading h2 {
    margin: 0;
    color: #172033;
    font-size: clamp(21px, 2.5vw, 28px);
    letter-spacing: -.035em;
}
.evt-section-heading p {
    max-width: 390px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.55;
    text-align: right;
}
.page-events :is(.evt-featured, .evt-upcoming) {
    padding-top: 34px;
}
.page-events .evt-featured-grid {
    gap: 22px;
}
.page-events .evt-feat-card {
    border-radius: 20px;
    box-shadow: 0 8px 26px rgba(15,23,42,.075);
}
.page-events .evt-feat-card__body {
    padding: 18px;
}
.page-events .evt-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}
.page-events .evt-card {
    border-radius: 18px;
    box-shadow: 0 7px 22px rgba(15,23,42,.06);
}
.page-events .evt-card__body {
    padding: 16px 17px 18px;
}
.page-events .evt-card--past {
    pointer-events: auto;
}
.page-events .evt-grid--muted {
    opacity: 1;
}
.page-events .evt-card--past .evt-card__img {
    filter: saturate(.55);
}
.page-events .evt-card--past:hover .evt-card__img {
    filter: saturate(.9);
}
.page-events .evt-past {
    margin-top: 30px;
    padding: 0;
}
.page-events .evt-past-details {
    overflow: hidden;
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(218,225,236,.92);
    border-radius: 16px;
}
.page-events .evt-section-title--past {
    min-height: 58px;
    margin: 0;
    padding: 0 18px;
    color: #5f6b7d;
    background: linear-gradient(90deg, #f8f7ff, #fbfcff);
}
.page-events .evt-section-title--past .evt-section-title__line {
    display: none;
}
.page-events .evt-past-details summary::after {
    margin-left: auto;
    padding: 5px 9px;
    color: #6d28d9;
    background: #f0ebff;
    border-radius: 8px;
}
.page-events .evt-past-details[open] .evt-grid {
    padding: 20px;
}

.evt-upcoming-empty {
    min-height: 245px;
    margin: 28px 0 22px;
    padding: 34px;
    display: grid;
    grid-template-columns: minmax(180px, .72fr) minmax(300px, 1.28fr);
    align-items: center;
    gap: 34px;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 100%, rgba(124,58,237,.14), transparent 40%),
        linear-gradient(135deg, #fff 0%, #f9f8ff 58%, #f0f7ff 100%);
    border: 1px solid rgba(216,222,234,.96);
    border-radius: 20px;
    box-shadow: 0 12px 34px rgba(15,23,42,.07);
}
.evt-upcoming-empty[hidden] {
    display: none;
}
.evt-upcoming-empty__visual {
    position: relative;
    min-height: 155px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #fff;
    border-radius: 16px;
    background:
        radial-gradient(circle at 72% 22%, rgba(56,189,248,.40), transparent 32%),
        linear-gradient(145deg, #271052, #263b7b);
    box-shadow: 0 18px 38px rgba(35,26,84,.22);
}
.evt-upcoming-empty__visual span {
    width: 5px;
    border-radius: 9px;
    background: linear-gradient(to top, #8b5cf6, #7dd3fc);
}
.evt-upcoming-empty__visual span:nth-child(1) { height: 28px; }
.evt-upcoming-empty__visual span:nth-child(2) { height: 54px; }
.evt-upcoming-empty__visual span:nth-child(3) { height: 39px; }
.evt-upcoming-empty__visual span:nth-child(4) { height: 68px; }
.evt-upcoming-empty__visual span:nth-child(5) { height: 35px; }
.evt-upcoming-empty__visual svg {
    margin-left: 10px;
    opacity: .9;
}
.evt-upcoming-empty__eyebrow {
    color: #7c3aed;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.evt-upcoming-empty__content h2 {
    margin: 7px 0 9px;
    color: #172033;
    font-size: clamp(23px, 3vw, 34px);
    line-height: 1.12;
    letter-spacing: -.04em;
}
.evt-upcoming-empty__content p {
    max-width: 560px;
    margin: 0;
    color: #687386;
    font-size: 13px;
    line-height: 1.65;
}
.evt-upcoming-empty__actions {
    margin-top: 19px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.evt-upcoming-empty__actions a {
    min-height: 38px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
}
.evt-upcoming-empty__primary {
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    box-shadow: 0 8px 18px rgba(124,58,237,.22);
}
.evt-upcoming-empty__primary:hover {
    color: #fff;
    transform: translateY(-1px);
}
.evt-upcoming-empty__secondary {
    color: #5d687a;
    background: #fff;
    border: 1px solid #dde3ed;
}
.evt-filter-empty {
    min-height: 190px;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #8a94a6;
    background: rgba(255,255,255,.70);
    border: 1px dashed #cfd6e2;
    border-radius: 18px;
}
.evt-filter-empty[hidden] {
    display: none;
}
.evt-filter-empty strong {
    color: #30394b;
    font-size: 14px;
}
.evt-filter-empty span {
    font-size: 12px;
}

@media (hover: none), (pointer: coarse) {
    .evt-feat-card__share,
    .evt-card__share {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 900px) {
    .page-events .evt-hero__visual {
        display: none;
    }
    .evt-upcoming-empty {
        grid-template-columns: minmax(150px, .65fr) minmax(280px, 1.35fr);
        padding: 28px;
    }
}

@media (max-width: 700px) {
    .page-events .evt-hero {
        min-height: 210px;
    }
    .page-events .evt-hero__body {
        min-height: 210px;
        padding: 26px 22px;
    }
    .page-events .evt-hero__stats {
        display: none;
    }
    .page-events .evt-filter-bar {
        position: relative;
    }
    .page-events .evt-filter-bar__row {
        display: grid;
        grid-template-columns: 1fr auto;
    }
    .page-events .evt-searchbox {
        grid-column: 1 / -1;
        min-width: 0;
        max-width: none;
    }
    .evt-jump-nav {
        overflow-x: auto;
    }
    .evt-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
    .evt-section-heading p {
        max-width: none;
        text-align: left;
    }
    .evt-upcoming-empty {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 22px;
    }
    .evt-upcoming-empty__visual {
        min-height: 120px;
    }
}

@media (max-width: 480px) {
    .page-events .evt-hero__title {
        font-size: 31px;
    }
    .page-events .evt-grid {
        grid-template-columns: 1fr;
    }
    .evt-upcoming-empty__actions {
        align-items: stretch;
        flex-direction: column;
    }
    .evt-upcoming-empty__actions a {
        width: 100%;
    }
}

/* =============================================================================
   PLAYLIST DETAIL: PREMIUM EDITORIAL EXPERIENCE
============================================================================= */
.pdet-content {
    padding: 20px 24px 44px !important;
}

.pdet-hero {
    min-height: 340px;
    margin-bottom: 22px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 24px;
    background:
        radial-gradient(circle at 15% 0%, rgba(124, 58, 237, .8), transparent 38%),
        linear-gradient(128deg, #2e1065 0%, #172554 52%, #083b5c 100%);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .24);
    isolation: isolate;
}
.pdet-hero::after {
    position: absolute;
    inset: auto -8% -45% 37%;
    z-index: 1;
    width: 620px;
    height: 420px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    content: "";
    transform: rotate(-9deg);
}
.pdet-hero__bg {
    opacity: .36;
    filter: blur(42px) brightness(.42) saturate(1.45);
    transform: scale(1.18);
}
.pdet-hero__bg[style=""],
.pdet-bg--c0,
.pdet-bg--c1,
.pdet-bg--c2,
.pdet-bg--c3,
.pdet-bg--c4,
.pdet-bg--c5,
.pdet-bg--c6,
.pdet-bg--c7 {
    opacity: 0;
}
.pdet-hero__scrim {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(5, 10, 35, .18), rgba(5, 10, 35, .48)),
        linear-gradient(0deg, rgba(2, 6, 23, .38), transparent 62%);
}
.pdet-hero__glow {
    position: absolute;
    top: -110px;
    right: 3%;
    z-index: 1;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(14, 165, 233, .16);
    filter: blur(35px);
    pointer-events: none;
}
.pdet-hero__lines {
    position: absolute;
    right: 4%;
    bottom: 34px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 86px;
    opacity: .2;
    pointer-events: none;
}
.pdet-hero__lines span {
    width: 4px;
    height: 24%;
    border-radius: 99px;
    background: #fff;
}
.pdet-hero__lines span:nth-child(2),
.pdet-hero__lines span:nth-child(8) { height: 48%; }
.pdet-hero__lines span:nth-child(3),
.pdet-hero__lines span:nth-child(7) { height: 76%; }
.pdet-hero__lines span:nth-child(4),
.pdet-hero__lines span:nth-child(6) { height: 42%; }
.pdet-hero__lines span:nth-child(5) { height: 100%; }
.pdet-hero__inner {
    z-index: 3;
    align-items: center;
    gap: clamp(26px, 4vw, 52px);
    min-height: 340px;
    padding: 42px clamp(30px, 5vw, 64px);
}
.pdet-cover-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.pdet-cover {
    position: relative;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04));
    box-shadow: 0 28px 60px rgba(1, 4, 18, .48), 0 0 0 8px rgba(255, 255, 255, .035);
}
.pdet-cover::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, .16), transparent 34%);
    content: "";
    pointer-events: none;
}
.pdet-cover__fallback {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    overflow: hidden;
    color: rgba(255, 255, 255, .95);
    background:
        radial-gradient(circle at 24% 18%, rgba(139, 92, 246, .94), transparent 38%),
        linear-gradient(145deg, #1d4ed8, #312e81 54%, #111827);
}
.pdet-cover__disc {
    position: absolute;
    right: -38px;
    bottom: -30px;
    width: 148px;
    height: 148px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, .82) 0 4px, #7c3aed 5px 17px, transparent 18px),
        repeating-radial-gradient(circle, rgba(255, 255, 255, .1) 0 1px, transparent 2px 9px),
        rgba(3, 7, 18, .82);
    box-shadow: -16px -12px 32px rgba(0, 0, 0, .22);
}
.pdet-cover__caption {
    color: rgba(255, 255, 255, .45);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.pdet-info {
    max-width: 760px;
}
.pdet-breadcrumb {
    margin-bottom: 18px;
    color: rgba(255, 255, 255, .48);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
}
.pdet-info__type {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    color: #c4b5fd;
    font-size: 10px;
    letter-spacing: .2em;
}
.pdet-info__type span {
    width: 20px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, #a78bfa, #38bdf8);
}
.pdet-info__title {
    margin-bottom: 12px;
    color: #fff;
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.055em;
    white-space: normal;
    text-shadow: 0 8px 28px rgba(0, 0, 0, .28);
}
.pdet-info__desc {
    max-width: 650px;
    margin-bottom: 18px;
    color: rgba(226, 232, 240, .77);
    font-size: 14px;
    line-height: 1.65;
}
.pdet-info__desc--fallback {
    color: rgba(226, 232, 240, .62);
}
.pdet-info__meta {
    gap: 9px;
    margin-bottom: 22px;
    color: rgba(226, 232, 240, .72);
    font-size: 12px;
}
.pdet-owner {
    gap: 7px;
    color: #fff;
    font-weight: 700;
}
.pdet-owner__avatar {
    display: inline-grid;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #7c3aed, #2563eb);
    font-size: 10px;
    place-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
.pdet-owner__by {
    color: rgba(226, 232, 240, .55);
    font-weight: 500;
}
.pdet-info__meta .pll-vis {
    padding: 4px 9px;
    border: 1px solid rgba(52, 211, 153, .18);
    border-radius: 99px;
    color: #6ee7b7;
    background: rgba(6, 78, 59, .34);
}
.pdet-actions {
    gap: 10px;
}
.pdet-play-all-btn,
.pdet-share-btn,
.pdet-edit-btn,
.pdet-delete-btn {
    min-height: 42px;
    border-radius: 12px;
}
.pdet-play-all-btn {
    padding: 10px 24px;
    background: linear-gradient(135deg, #8b5cf6, #2563eb);
    box-shadow: 0 12px 25px rgba(37, 99, 235, .3);
}
.pdet-share-btn,
.pdet-edit-btn,
.pdet-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .09);
    font: 700 12px/1 inherit;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.pdet-share-btn:hover,
.pdet-edit-btn:hover {
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
    background: rgba(255, 255, 255, .16);
    transform: translateY(-1px);
}
.pdet-delete-btn {
    padding-inline: 13px;
    color: rgba(254, 202, 202, .9);
}

.pdet-tracks-section {
    overflow: hidden;
    min-height: 300px;
    margin-bottom: 28px;
    border: 1px solid rgba(218, 225, 236, .96);
    border-radius: 20px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 14px 38px rgba(15, 23, 42, .08);
}
.pdet-tracks-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 25px 28px 19px;
    border-bottom: 1px solid rgba(226, 232, 240, .86);
    background: linear-gradient(100deg, #fff 0%, #fbfaff 60%, #f5f8ff 100%);
}
.pdet-section-kicker {
    margin: 0 0 5px;
    color: #7c3aed;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.pdet-section-title {
    margin: 0;
    color: var(--color-text);
    font-size: 23px;
    line-height: 1.1;
    letter-spacing: -.035em;
}
.pdet-tracks-summary {
    display: flex;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
}
.pdet-empty {
    display: grid;
    grid-template-columns: minmax(220px, .7fr) minmax(300px, 1.3fr);
    align-items: center;
    gap: clamp(28px, 6vw, 84px);
    min-height: 340px;
    padding: 38px clamp(34px, 7vw, 92px);
    color: var(--color-text);
    background:
        radial-gradient(circle at 15% 50%, rgba(124, 58, 237, .065), transparent 28%),
        linear-gradient(135deg, #fff 0%, #fbfcff 100%);
}
.pdet-empty__visual {
    position: relative;
    min-height: 210px;
}
.pdet-empty__note {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: grid;
    width: 86px;
    height: 86px;
    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: 26px;
    color: #fff;
    background: linear-gradient(145deg, #7c3aed, #2563eb);
    box-shadow: 0 22px 42px rgba(79, 70, 229, .26);
    place-items: center;
    transform: translate(-50%, -50%) rotate(-6deg);
}
.pdet-empty__orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(124, 58, 237, .13);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.pdet-empty__orbit--one {
    width: 148px;
    height: 148px;
}
.pdet-empty__orbit--two {
    width: 206px;
    height: 206px;
    border-style: dashed;
}
.pdet-empty__orbit--two::after {
    position: absolute;
    top: 22px;
    right: 16px;
    width: 12px;
    height: 12px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 4px 12px rgba(14, 165, 233, .28);
    content: "";
}
.pdet-empty__copy {
    max-width: 540px;
}
.pdet-empty__eyebrow {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 5px 10px;
    border: 1px solid #e9ddff;
    border-radius: 99px;
    color: #6d28d9;
    background: #f7f2ff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.pdet-empty .pdet-empty__title {
    margin: 0 0 10px;
    color: var(--color-text);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.045em;
}
.pdet-empty .pdet-empty__sub {
    max-width: 500px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.65;
}
.pdet-empty__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
}
.pdet-empty__primary,
.pdet-empty__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 9px 16px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pdet-empty__primary {
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    box-shadow: 0 9px 20px rgba(79, 70, 229, .2);
}
.pdet-empty__secondary {
    border: 1px solid #dfe5ee;
    color: #334155;
    background: #fff;
}
.pdet-empty__primary:hover,
.pdet-empty__secondary:hover {
    transform: translateY(-2px);
}
.pdet-empty__secondary:hover {
    border-color: rgba(124, 58, 237, .3);
}
.pdet-table__head th {
    padding-block: 13px;
    background: #fafbfe;
}
.pdet-row:last-child {
    border-bottom: 0;
}
.pdet-row td {
    padding-block: 12px;
}
.pdet-art-wrap,
.pdet-art,
.pdet-art--fallback {
    width: 42px;
    height: 42px;
    border-radius: 8px;
}

@media (max-width: 900px) {
    .pdet-hero__inner {
        gap: 28px;
        padding-inline: 32px;
    }
    .pdet-cover {
        width: 180px;
        height: 180px;
    }
    .pdet-hero__lines {
        display: none;
    }
}

@media (max-width: 700px) {
    .pdet-content {
        padding: 14px 14px 34px !important;
        min-width: 0;
        overflow-x: hidden;
    }
    .pdet-hero {
        width: 100%;
        max-width: 100%;
        min-height: 0;
        border-radius: 18px;
    }
    .pdet-hero__inner {
        align-items: flex-start;
        width: 100%;
        min-width: 0;
        min-height: 0;
        padding: 24px 22px 26px;
        box-sizing: border-box;
    }
    .pdet-info {
        width: 100%;
        min-width: 0;
    }
    .pdet-info__desc {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .pdet-cover-wrap {
        align-items: flex-start;
    }
    .pdet-cover {
        width: 128px;
        height: 128px;
        border-radius: 14px;
    }
    .pdet-cover__caption {
        display: none;
    }
    .pdet-breadcrumb {
        margin-bottom: 13px;
    }
    .pdet-info__title {
        font-size: clamp(34px, 11vw, 50px);
    }
    .pdet-tracks-section {
        width: 100%;
        max-width: 100%;
        border-radius: 16px;
    }
    .pdet-tracks-header {
        padding: 21px 20px 16px;
    }
    .pdet-empty {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 26px 22px 34px;
        text-align: center;
    }
    .pdet-empty__visual {
        min-height: 170px;
    }
    .pdet-empty__copy {
        margin-inline: auto;
    }
    .pdet-empty .pdet-empty__sub {
        margin-inline: auto;
    }
    .pdet-empty__actions {
        justify-content: center;
    }
}

@media (max-width: 460px) {
    .pdet-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .pdet-play-all-btn,
    .pdet-share-btn,
    .pdet-edit-btn {
        justify-content: center;
    }
    .pdet-delete-btn {
        width: 42px;
        padding: 0;
        justify-self: start;
    }
    .pdet-delete-btn span {
        display: none;
    }
    .pdet-tracks-summary {
        display: none;
    }
    .pdet-empty__actions {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pdet-empty__primary,
    .pdet-empty__secondary,
    .pdet-share-btn,
    .pdet-edit-btn {
        transition: none;
    }
}

/* =============================================================================
   SONGS CATALOG — FINAL EDITORIAL REFINEMENT
============================================================================= */
.page-songs .sng {
    padding-bottom: 72px;
}
.page-songs .sng-page-header {
    min-height: 148px;
    padding: 25px 28px;
    overflow: hidden;
    isolation: isolate;
    color: #17213a;
    background:
        radial-gradient(circle at 85% 10%, rgba(37, 99, 235, .11), transparent 29%),
        radial-gradient(circle at 98% 100%, rgba(124, 58, 237, .09), transparent 28%),
        linear-gradient(135deg, #fff 0%, #fafbff 56%, #f3f7ff 100%);
    border: 1px solid rgba(216, 223, 234, .95);
    border-radius: 18px;
    box-shadow: 0 13px 34px rgba(15, 23, 42, .075);
}
.page-songs .sng-page-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 160px;
    height: 160px;
    right: 98px;
    top: -82px;
    border: 26px solid rgba(74, 81, 202, .045);
    border-radius: 50%;
}
.page-songs .sng-page-header::after {
    opacity: .16;
}
.page-songs .sng-page-header__content {
    max-width: 720px;
}
.page-songs .sng-page-header__eyebrow {
    margin-bottom: 8px;
    color: #6546dc;
    background: #f2efff;
    border-color: #dfd7ff;
}
.page-songs .sng-page-header__title {
    max-width: 760px;
    color: #18233b;
    font-size: clamp(27px, 3.2vw, 39px);
    letter-spacing: -.045em;
}
.page-songs .sng-page-header__sub {
    max-width: 660px;
    margin-top: 6px;
    color: #707c90;
    font-size: 13px;
    line-height: 1.55;
}
.page-songs .sng-page-header__aside {
    min-width: 155px;
}
.page-songs .sng-page-header__count {
    padding: 11px 14px;
    background: rgba(255, 255, 255, .82);
    border: 1px solid #dfe5ef;
    box-shadow: 0 8px 20px rgba(30, 41, 72, .06);
    backdrop-filter: blur(8px);
}
.page-songs .sng-page-header__count strong {
    color: #5037bd;
}
.page-songs .sng-page-header__count span {
    color: #808a9c;
}
.page-songs .sng-page-header__wave i {
    background: linear-gradient(to top, #7047ed, #2e73e7);
    box-shadow: none;
}

.page-songs .sng-filter-bar {
    margin: 14px 0 0;
    padding: 11px 15px 10px;
    border: 1px solid rgba(216, 223, 234, .95);
    border-radius: 15px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 9px 24px rgba(15, 23, 42, .055);
    backdrop-filter: blur(16px);
}
.page-songs .sng-filter-bar__row {
    gap: 10px;
}
.page-songs .sng-sort-wrap {
    height: 38px;
    padding-left: 12px;
    border-color: #e0e6ef;
    border-radius: 10px;
    background: #f8f9fc;
}
.page-songs .sng-results-count {
    margin-left: auto;
    min-width: 74px;
    padding: 7px 12px;
    text-align: center;
    color: #626e82;
    background: #f6f7fb;
    border: 1px solid #e2e7ef;
    border-radius: 999px;
}
.page-songs .sng-genre-strip {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #edf0f5;
}
.page-songs .sng-pill {
    min-height: 33px;
    padding-inline: 15px;
    font-weight: 700;
    border-radius: 999px;
}

.page-songs .sng-catalog-heading {
    margin: 30px 2px 17px;
}
.page-songs .sng-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
    gap: 16px;
}
.page-songs .sng-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(214, 221, 232, .96);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .065);
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.page-songs .sng-card:hover {
    transform: translateY(-5px);
    border-color: rgba(103, 76, 222, .34);
    box-shadow: 0 20px 38px rgba(26, 35, 64, .13);
}
.page-songs .sng-card--playing {
    border-color: rgba(103, 76, 222, .6);
    box-shadow: 0 0 0 2px rgba(103, 76, 222, .1), 0 18px 38px rgba(72, 52, 158, .16);
}
.page-songs .sng-card__cover {
    position: relative;
    aspect-ratio: 1.45 / 1;
    overflow: hidden;
    background: linear-gradient(145deg, #e9f3ff, #eee8ff);
}
.page-songs .sng-card__cover::after {
    content: "";
    position: absolute;
    inset: 43% 0 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(transparent, rgba(5, 12, 29, .5));
    opacity: 0;
    transition: opacity .22s ease;
}
.page-songs .sng-card:hover .sng-card__cover::after,
.page-songs .sng-card--playing .sng-card__cover::after {
    opacity: 1;
}
.page-songs .sng-card__art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.page-songs .sng-card:hover .sng-card__art {
    transform: scale(1.055);
}
.page-songs .sng-card__art--fallback {
    display: grid;
    place-items: center;
    color: rgba(77, 88, 129, .42);
}
.page-songs .sng-card__type {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
}
.page-songs .sng-card__play {
    z-index: 3;
    width: 44px;
    height: 44px;
    inset: auto 10px 10px auto;
    opacity: 0;
    transform: translateY(8px) scale(.94);
    color: #fff;
    background: linear-gradient(135deg, #7047ed, #296bea);
    border: 2px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(16, 27, 58, .32);
    transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.page-songs .sng-card:hover .sng-card__play,
.page-songs .sng-card--playing .sng-card__play,
.page-songs .sng-card__play:focus-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.page-songs .sng-card__body {
    padding: 10px 12px 9px;
}
.page-songs .sng-card__title {
    color: #17213a;
    font-size: 13px;
    font-weight: 800;
}
.page-songs .sng-card__artist {
    margin-top: 3px;
    color: #788397;
    font-size: 11px;
    font-weight: 600;
}
.page-songs .sng-card__meta {
    min-height: 21px;
    margin-top: 4px;
}
.page-songs .sng-card__footer {
    margin-top: 4px;
    padding-top: 5px;
    border-top: 1px solid #edf0f5;
}
.page-songs :is(.sng-card__like, .sng-card__add-pl, .sng-card__share) {
    width: 27px;
    height: 27px;
    border-color: #e0e5ed;
    background: #f8f9fc;
}

@media (max-width: 1050px) {
    .page-songs .sng-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 760px) {
    .page-songs .sng-page-header {
        min-height: 145px;
        padding: 23px 22px;
    }
    .page-songs .sng-page-header__count {
        display: none;
    }
    .page-songs .sng-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}
@media (max-width: 500px) {
    .page-songs .sng-page-header {
        min-height: 140px;
        border-radius: 16px;
    }
    .page-songs .sng-page-header__aside {
        display: none;
    }
    .page-songs .sng-filter-bar {
        margin-inline: 0;
        padding-inline: 12px;
    }
    .page-songs .sng-card-grid {
        gap: 10px;
    }
    .page-songs .sng-card__play {
        width: 42px;
        height: 42px;
        right: 9px;
        bottom: 9px;
        opacity: 1;
        transform: none;
    }
}

/* =============================================================================
   ALBUMS CATALOG — FEATURED RELEASE AND EDITORIAL GRID
============================================================================= */
.page-albums .alb {
    padding-bottom: 72px;
}
.page-albums .alb-hero {
    min-height: 150px;
    overflow: hidden;
    background:
        radial-gradient(circle at 87% 5%, rgba(55, 111, 224, .13), transparent 28%),
        radial-gradient(circle at 100% 115%, rgba(124, 58, 237, .1), transparent 31%),
        linear-gradient(135deg, #fff 0%, #fafbff 58%, #f2f7ff 100%);
    border-radius: 18px;
    box-shadow: 0 13px 34px rgba(15, 23, 42, .075);
}
.page-albums .alb-hero__body {
    min-height: 150px;
    padding: 25px 28px;
}
.page-albums .alb-hero__title {
    font-size: clamp(27px, 3.2vw, 39px);
    letter-spacing: -.045em;
}
.page-albums .alb-hero__sub {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.55;
}
.page-albums .alb-hero__stats {
    border-radius: 14px;
}

.page-albums .alb-featured {
    position: relative;
    min-height: 330px;
    margin-top: 20px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr);
    align-items: center;
    gap: clamp(30px, 5vw, 70px);
    padding: 34px clamp(34px, 5vw, 70px);
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(94, 234, 212, .13), transparent 30%),
        radial-gradient(circle at 85% 110%, rgba(120, 78, 230, .35), transparent 43%),
        linear-gradient(122deg, #071a35 0%, #102d62 52%, #2d246f 100%);
    border: 1px solid rgba(74, 106, 170, .52);
    border-radius: 20px;
    box-shadow: 0 22px 48px rgba(12, 27, 59, .2);
}
.page-albums .alb-featured::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    right: -170px;
    top: -190px;
    border: 44px solid rgba(255, 255, 255, .035);
    border-radius: 50%;
}
.page-albums .alb-featured[hidden] {
    display: none;
}
.page-albums .alb-featured__art {
    position: relative;
    z-index: 1;
    width: min(245px, 72%);
    aspect-ratio: 1;
    margin-inline: auto;
    display: block;
}
.page-albums .alb-featured__vinyl {
    position: absolute;
    width: 92%;
    aspect-ratio: 1;
    right: -39%;
    top: 4%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle, transparent 0 4px, rgba(255, 255, 255, .045) 5px 6px),
        radial-gradient(circle, #7047ed 0 9%, #d8ceff 9.5% 11%, #10172b 12% 64%, #060a14 65%);
    box-shadow: 8px 16px 30px rgba(0, 0, 0, .38);
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.page-albums .alb-featured__vinyl i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #071022;
}
.page-albums .alb-featured__art:hover .alb-featured__vinyl {
    transform: translateX(8px) rotate(12deg);
}
.page-albums .alb-featured__cover {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    background: linear-gradient(145deg, #e4efff, #dcd2ff);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 10px;
    box-shadow: 0 22px 40px rgba(0, 0, 0, .34);
}
.page-albums .alb-featured__cover img,
.page-albums .alb-featured__fallback {
    width: 100%;
    height: 100%;
}
.page-albums .alb-featured__cover img {
    position: relative;
    z-index: 1;
    object-fit: cover;
    transition: transform .5s ease;
}
.page-albums .alb-featured__art:hover .alb-featured__cover img {
    transform: scale(1.035);
}
.page-albums .alb-featured__fallback {
    position: absolute;
    display: grid;
    place-items: center;
    color: rgba(51, 57, 104, .42);
}
.page-albums .alb-featured__content {
    position: relative;
    z-index: 1;
    max-width: 510px;
}
.page-albums .alb-featured__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    color: #c9d7f7;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.page-albums .alb-featured__eyebrow i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #78e7cf;
    box-shadow: 0 0 0 4px rgba(120, 231, 207, .12);
}
.page-albums .alb-featured__content h2 {
    margin: 0;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.02;
    letter-spacing: -.05em;
}
.page-albums .alb-featured__artist {
    display: inline-block;
    margin-top: 9px;
    color: #b8c8ef;
    font-size: 14px;
    font-weight: 750;
}
.page-albums .alb-featured__artist:hover {
    color: #fff;
}
.page-albums .alb-featured__content > p {
    max-width: 470px;
    margin: 18px 0 0;
    color: rgba(226, 234, 250, .73);
    font-size: 12px;
    line-height: 1.7;
}
.page-albums .alb-featured__meta {
    margin-top: 18px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.page-albums .alb-featured__meta > span {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    color: #d7e1f7;
    font-size: 9px;
    font-weight: 750;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
}
.page-albums .alb-featured__cta {
    min-height: 40px;
    width: fit-content;
    margin-top: 22px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    color: #26306a;
    font-size: 11px;
    font-weight: 800;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    transition: transform .2s ease, box-shadow .2s ease;
}
.page-albums .alb-featured__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 27px rgba(0, 0, 0, .24);
}

.page-albums .alb-section {
    margin-top: 34px;
}
.page-albums .alb-section__heading {
    margin: 0 2px 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.page-albums .alb-section__heading > div > span {
    color: #6d4ee8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.page-albums .alb-section__heading h2 {
    margin: 5px 0 0;
    color: #17213a;
    font-size: clamp(22px, 2.4vw, 30px);
    letter-spacing: -.035em;
}
.page-albums .alb-section__heading p {
    margin-top: 6px;
    color: #788397;
    font-size: 12px;
}
.page-albums .alb-results-count {
    flex: 0 0 auto;
    padding: 7px 12px;
    color: #626e82;
    font-size: 10px;
    font-weight: 750;
    background: #fff;
    border: 1px solid #e0e5ed;
    border-radius: 999px;
}
.page-albums .alb-grid {
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
    gap: 20px;
}
.page-albums .alb-card {
    overflow: hidden;
    border: 1px solid rgba(214, 221, 232, .96);
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .065);
}
.page-albums .alb-card:hover {
    transform: translateY(-5px);
    border-color: rgba(103, 76, 222, .34);
    box-shadow: 0 20px 38px rgba(26, 35, 64, .13);
}
.page-albums .alb-card__cover-wrap {
    aspect-ratio: 1;
}
.page-albums .alb-card__overlay {
    width: 50px;
    height: 50px;
    inset: auto 13px 13px auto;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #7047ed, #296bea);
    border: 2px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(16, 27, 58, .32);
}
.page-albums .alb-card__body {
    padding: 15px 15px 14px;
}
.page-albums .alb-card__title {
    color: #17213a;
    font-size: 14px;
    font-weight: 800;
}
.page-albums .alb-card__artist {
    margin-top: 5px;
    color: #788397;
    font-size: 11px;
    font-weight: 600;
}
.page-albums .alb-card__meta {
    margin-top: 12px;
    padding-top: 11px;
    color: #818b9c;
    border-top: 1px solid #edf0f5;
}
.page-albums .alb-no-results,
.page-albums .alb-empty {
    min-height: 260px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
    border: 1px dashed #cfd7e4;
    border-radius: 18px;
    background: #fff;
}
.page-albums .alb-no-results[hidden] {
    display: none;
}
.page-albums .alb-no-results strong,
.page-albums .alb-empty strong {
    color: #202b41;
    font-size: 16px;
}
.page-albums .alb-no-results span,
.page-albums .alb-empty p {
    color: #7a8597;
    font-size: 12px;
}

@media (max-width: 900px) {
    .page-albums .alb-featured {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 34px;
        padding: 30px;
    }
    .page-albums .alb-featured__art {
        width: 205px;
    }
    .page-albums .alb-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 680px) {
    .page-albums .alb-featured {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 30px 24px;
        text-align: center;
    }
    .page-albums .alb-featured__art {
        width: min(220px, 70vw);
    }
    .page-albums .alb-featured__content {
        margin-inline: auto;
    }
    .page-albums .alb-featured__content > p {
        margin-inline: auto;
    }
    .page-albums .alb-featured__meta,
    .page-albums .alb-featured__cta {
        margin-inline: auto;
    }
    .page-albums .alb-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}
@media (max-width: 500px) {
    .page-albums .alb-hero__body {
        min-height: 140px;
        padding: 22px 20px;
    }
    .page-albums .alb-featured {
        margin-top: 14px;
        padding-inline: 20px;
        border-radius: 17px;
    }
    .page-albums .alb-featured__content h2 {
        font-size: 30px;
    }
    .page-albums .alb-section__heading p {
        display: none;
    }
    .page-albums .alb-grid {
        gap: 10px;
    }
    .page-albums .alb-card {
        border-radius: 13px;
    }
    .page-albums .alb-card__body {
        padding: 12px 11px 11px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .page-albums .alb-featured__vinyl,
    .page-albums .alb-featured__cover img,
    .page-albums .alb-featured__cta {
        transition: none;
    }
}

/* Album catalog revision: discovery hero and permanent release collection. */
.page-albums .alb-hero {
    position: relative;
    min-height: 310px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 0%, rgba(57, 189, 248, .14), transparent 30%),
        radial-gradient(circle at 91% 105%, rgba(124, 58, 237, .42), transparent 46%),
        linear-gradient(122deg, #061a35 0%, #11356f 52%, #322578 100%);
    border: 1px solid rgba(65, 99, 169, .55);
    box-shadow: 0 22px 48px rgba(12, 27, 59, .2);
}
.page-albums .alb-hero::before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    right: -210px;
    top: -245px;
    border: 54px solid rgba(255, 255, 255, .035);
    border-radius: 50%;
}
.page-albums .alb-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 45%;
    opacity: .5;
    background: linear-gradient(transparent, rgba(3, 12, 29, .2));
    pointer-events: none;
}
.page-albums .alb-hero__body {
    position: relative;
    z-index: 1;
    min-height: 310px;
    padding: 34px clamp(34px, 5vw, 66px);
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
    align-items: center;
    gap: clamp(35px, 6vw, 80px);
}
.page-albums .alb-hero__left {
    max-width: 680px;
}
.page-albums .alb-hero__badge {
    margin-bottom: 13px;
    color: #d8e5ff;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .15);
    backdrop-filter: blur(8px);
}
.page-albums .alb-hero__title {
    max-width: 680px;
    color: #fff;
    font-size: clamp(34px, 4.5vw, 56px);
    line-height: 1.02;
    letter-spacing: -.055em;
}
.page-albums .alb-hero__sub {
    max-width: 600px;
    margin-top: 13px;
    color: rgba(225, 234, 251, .74);
    font-size: 13px;
    line-height: 1.65;
}
.page-albums .alb-hero__actions {
    margin-top: 23px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}
.page-albums .alb-hero__cta {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 17px;
    color: #24316d;
    font-size: 11px;
    font-weight: 800;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 11px 25px rgba(0, 0, 0, .2);
    transition: transform .2s ease, box-shadow .2s ease;
}
.page-albums .alb-hero__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 29px rgba(0, 0, 0, .25);
}
.page-albums .alb-hero__stats {
    width: auto;
    padding: 0;
    display: flex;
    align-items: center;
    color: #fff;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}
.page-albums .alb-stat {
    min-width: 60px;
    padding: 0 12px;
    text-align: left;
}
.page-albums .alb-stat:first-child {
    padding-left: 0;
}
.page-albums .alb-stat__value {
    color: #fff;
    font-size: 18px;
    line-height: 1;
}
.page-albums .alb-stat__label {
    margin-top: 4px;
    color: rgba(201, 215, 241, .68);
    font-size: 7px;
    letter-spacing: .12em;
}
.page-albums .alb-stat__divider {
    width: 1px;
    height: 26px;
    background: rgba(255, 255, 255, .16);
}
.page-albums .alb-hero__visual {
    position: relative;
    width: min(340px, 100%);
    height: 245px;
    justify-self: end;
}
.page-albums .alb-hero__vinyl {
    position: absolute;
    width: 218px;
    height: 218px;
    right: 0;
    top: 2px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle, transparent 0 4px, rgba(255, 255, 255, .04) 5px 6px),
        radial-gradient(circle, #6f48e7 0 9%, #b8a9ef 9.5% 11%, #11182a 12% 64%, #050914 65%);
    box-shadow: 11px 19px 34px rgba(0, 0, 0, .39);
}
.page-albums .alb-hero__vinyl i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #071022;
}
.page-albums .alb-hero__sleeve {
    position: absolute;
    width: 205px;
    height: 205px;
    border-radius: 9px;
}
.page-albums .alb-hero__sleeve--back {
    left: 18px;
    top: 17px;
    transform: rotate(-8deg);
    background: linear-gradient(145deg, #596ec3, #7546b9);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .24);
}
.page-albums .alb-hero__sleeve--front {
    left: 38px;
    top: 0;
    overflow: hidden;
    background: linear-gradient(145deg, #e1eeff, #d9ceff);
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: 0 20px 39px rgba(0, 0, 0, .4);
}
.page-albums .alb-hero__sleeve--front img,
.page-albums .alb-hero__cover-fallback {
    width: 100%;
    height: 100%;
}
.page-albums .alb-hero__sleeve--front img {
    position: relative;
    z-index: 1;
    object-fit: cover;
}
.page-albums .alb-hero__cover-fallback {
    position: absolute;
    display: grid;
    place-items: center;
    color: rgba(50, 58, 109, .43);
}
.page-albums .alb-hero__visual-label {
    position: absolute;
    z-index: 3;
    left: 1px;
    bottom: 0;
    max-width: 225px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 12px;
    background: rgba(5, 18, 43, .72);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 9px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
    backdrop-filter: blur(12px);
}
.page-albums .alb-hero__visual-label small {
    color: #aebfe1;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.page-albums .alb-hero__visual-label strong {
    overflow: hidden;
    color: #fff;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-albums .alb-section {
    margin-top: 20px;
    padding: 25px;
    background:
        radial-gradient(circle at 100% 0%, rgba(109, 78, 232, .045), transparent 28%),
        rgba(255, 255, 255, .9);
    border: 1px solid rgba(216, 223, 234, .95);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}
.page-albums .alb-section__heading {
    margin: 0 0 20px;
    padding-bottom: 17px;
    border-bottom: 1px solid #e9edf3;
}
.page-albums .alb-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 245px));
    justify-content: start;
    gap: 20px;
}
.page-albums .alb-card {
    width: 100%;
    background: #fff;
}
.page-albums .alb-card__cover-wrap::after {
    content: "Album";
    position: absolute;
    z-index: 3;
    top: 11px;
    left: 11px;
    padding: 5px 8px;
    color: rgba(255, 255, 255, .94);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    background: rgba(7, 19, 42, .65);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    backdrop-filter: blur(8px);
}
.page-albums .alb-card__overlay {
    opacity: 0;
    transform: translateY(8px) scale(.94);
    transition: opacity .2s ease, transform .2s ease;
}
.page-albums .alb-card:hover .alb-card__overlay,
.page-albums .alb-card:focus-visible .alb-card__overlay {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@media (max-width: 900px) {
    .page-albums .alb-hero__body {
        grid-template-columns: minmax(0, 1fr) 255px;
        gap: 28px;
        padding-inline: 30px;
    }
    .page-albums .alb-hero__visual {
        width: 255px;
        transform: scale(.86);
        transform-origin: right center;
    }
}
@media (max-width: 700px) {
    .page-albums .alb-hero {
        min-height: auto;
    }
    .page-albums .alb-hero__body {
        min-height: auto;
        grid-template-columns: 1fr;
        padding: 30px 24px 34px;
    }
    .page-albums .alb-hero__left {
        text-align: center;
    }
    .page-albums .alb-hero__title,
    .page-albums .alb-hero__sub {
        margin-inline: auto;
    }
    .page-albums .alb-hero__actions,
    .page-albums .alb-hero__stats {
        justify-content: center;
    }
    .page-albums .alb-hero__visual {
        width: 300px;
        margin: 0 auto;
        justify-self: center;
        transform: none;
    }
    .page-albums .alb-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 500px) {
    .page-albums .alb-hero__body {
        padding: 27px 20px 31px;
    }
    .page-albums .alb-hero__title {
        font-size: 34px;
    }
    .page-albums .alb-hero__stats {
        width: 100%;
    }
    .page-albums .alb-stat {
        min-width: 0;
        flex: 1;
        text-align: center;
    }
    .page-albums .alb-hero__visual {
        width: 270px;
        height: 226px;
        transform: scale(.9);
        transform-origin: center top;
        margin-bottom: -20px;
    }
    .page-albums .alb-section {
        padding: 18px 14px;
        border-radius: 16px;
    }
    .page-albums .alb-section__heading {
        align-items: flex-start;
    }
    .page-albums .alb-section__heading p {
        display: none;
    }
    .page-albums .alb-card__overlay {
        opacity: 1;
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .page-albums .alb-hero__cta,
    .page-albums .alb-card__overlay {
        transition: none;
    }
}

/* =============================================================================
   SONGS CATALOG — CINEMATIC DISCOVERY HERO
============================================================================= */
.page-songs .sng-page-header {
    position: relative;
    min-height: 310px;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
    align-items: center;
    gap: clamp(35px, 6vw, 80px);
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    background:
        var(--for-you-hero-overlay),
        var(--for-you-hero-background);
    border: 1px solid rgba(65, 99, 169, .55);
    border-radius: 20px;
    box-shadow: 0 22px 48px rgba(12, 27, 59, .2);
}
.page-songs .sng-page-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 470px;
    height: 470px;
    right: -235px;
    top: -270px;
    border: 58px solid rgba(255, 255, 255, .035);
    border-radius: 50%;
}
.page-songs .sng-page-header::after {
    display: none;
}
.page-songs .sng-page-header__content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    padding: 38px 0 38px clamp(34px, 5vw, 66px);
}
.page-songs .sng-page-header__eyebrow {
    margin-bottom: 13px;
    color: #d8e5ff;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .15);
    backdrop-filter: blur(8px);
}
.page-songs .sng-page-header__title {
    max-width: 680px;
    color: #fff;
    font-size: clamp(35px, 4.6vw, 58px);
    line-height: 1.01;
    letter-spacing: -.058em;
}
.page-songs .sng-page-header__sub {
    max-width: 610px;
    margin-top: 14px;
    color: rgba(225, 234, 251, .74);
    font-size: 13px;
    line-height: 1.68;
}
.page-songs .sng-page-header__actions {
    margin-top: 24px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}
.page-songs .sng-page-header__cta {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 17px;
    color: #24316d;
    font-size: 11px;
    font-weight: 800;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 11px 25px rgba(0, 0, 0, .2);
    transition: transform .2s ease, box-shadow .2s ease;
}
.page-songs .sng-page-header__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 29px rgba(0, 0, 0, .25);
}
.page-songs .sng-page-header__availability {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(210, 222, 244, .72);
    font-size: 10px;
    font-weight: 650;
}
.page-songs .sng-page-header__availability > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #65e6c9;
    box-shadow: 0 0 0 4px rgba(101, 230, 201, .12);
}
.page-songs .sng-page-header__availability strong {
    color: #fff;
    font-size: 13px;
}
.page-songs .sng-page-header__visual {
    position: relative;
    z-index: 1;
    width: min(350px, 100%);
    height: 248px;
    justify-self: end;
    margin-right: clamp(34px, 5vw, 65px);
}
.page-songs .sng-page-header__orb {
    position: absolute;
    width: 215px;
    height: 215px;
    right: -10px;
    top: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(87, 224, 255, .2), rgba(92, 70, 216, .05) 55%, transparent 70%);
    filter: blur(1px);
}
.page-songs .sng-page-header__vinyl {
    position: absolute;
    width: 220px;
    height: 220px;
    right: 0;
    top: 1px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle, transparent 0 4px, rgba(255, 255, 255, .04) 5px 6px),
        radial-gradient(circle, #31a8cb 0 8%, #bceffc 8.5% 10%, #12192c 11% 64%, #050914 65%);
    box-shadow: 11px 19px 34px rgba(0, 0, 0, .4);
}
.page-songs .sng-page-header__vinyl i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #071022;
}
.page-songs .sng-page-header__sleeve {
    position: absolute;
    z-index: 2;
    width: 207px;
    height: 207px;
    left: 31px;
    top: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 19px;
    color: #fff;
    background:
        linear-gradient(150deg, transparent 0 44%, rgba(4, 12, 31, .52) 45%),
        radial-gradient(circle at 28% 22%, #4ce0f3 0 5%, transparent 25%),
        linear-gradient(145deg, #315db7, #743fc2);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 10px;
    box-shadow: 0 21px 40px rgba(0, 0, 0, .42);
}
.page-songs .sng-page-header__sleeve::before,
.page-songs .sng-page-header__sleeve::after {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
}
.page-songs .sng-page-header__sleeve::before {
    left: -72px;
    top: -68px;
}
.page-songs .sng-page-header__sleeve::after {
    left: -42px;
    top: -38px;
}
.page-songs .sng-page-header__sleeve-glow {
    position: absolute;
    width: 105px;
    height: 105px;
    right: -22px;
    top: 28px;
    border-radius: 50%;
    background: rgba(89, 228, 246, .15);
    filter: blur(18px);
}
.page-songs .sng-page-header__sleeve svg {
    position: absolute;
    top: 28px;
    left: 27px;
    color: rgba(255, 255, 255, .8);
    filter: drop-shadow(0 8px 15px rgba(0, 0, 0, .2));
}
.page-songs .sng-page-header__sleeve small {
    position: relative;
    z-index: 1;
    color: rgba(214, 231, 255, .66);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .17em;
}
.page-songs .sng-page-header__sleeve strong {
    position: relative;
    z-index: 1;
    max-width: 150px;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.05;
    letter-spacing: .08em;
}
.page-songs .sng-page-header__now {
    position: absolute;
    z-index: 3;
    left: 5px;
    bottom: 0;
    min-width: 186px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    padding: 9px 12px;
    color: #b8c8e7;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(5, 18, 43, .76);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 9px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .23);
    backdrop-filter: blur(12px);
}
.page-songs .sng-page-header__wave {
    height: 23px;
    display: flex;
    align-items: center;
    gap: 3px;
}
.page-songs .sng-page-header__wave i {
    width: 3px;
    height: 10px;
    display: block;
    background: linear-gradient(to top, #5f7bf0, #68e7d5);
    border-radius: 999px;
    animation: sng-wave 1.3s ease-in-out infinite alternate;
}
.page-songs .sng-page-header__wave i:nth-child(2) { height: 17px; animation-delay: -.5s; }
.page-songs .sng-page-header__wave i:nth-child(3) { height: 11px; animation-delay: -.2s; }
.page-songs .sng-page-header__wave i:nth-child(4) { height: 21px; animation-delay: -.7s; }
.page-songs .sng-page-header__wave i:nth-child(5) { height: 14px; animation-delay: -.35s; }
.page-songs .sng-page-header__wave i:nth-child(6) { height: 19px; animation-delay: -.1s; }
.page-songs .sng-page-header__wave i:nth-child(7) { height: 9px; animation-delay: -.6s; }

.page-songs .sng-catalog-panel {
    margin-top: 20px;
    padding: 25px;
    background:
        radial-gradient(circle at 100% 0%, rgba(109, 78, 232, .045), transparent 28%),
        rgba(255, 255, 255, .9);
    border: 1px solid rgba(216, 223, 234, .95);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
    scroll-margin-top: 90px;
}
.page-songs .sng-catalog-panel .sng-catalog-heading {
    margin: 0 0 20px;
    padding-bottom: 17px;
    border-bottom: 1px solid #e9edf3;
}

@media (max-width: 960px) {
    .page-songs .sng-page-header {
        grid-template-columns: minmax(0, 1fr) 275px;
        gap: 25px;
    }
    .page-songs .sng-page-header__content {
        padding-left: 30px;
    }
    .page-songs .sng-page-header__visual {
        width: 270px;
        margin-right: 28px;
        transform: scale(.87);
        transform-origin: right center;
    }
}
@media (max-width: 720px) {
    .page-songs .sng-page-header {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .page-songs .sng-page-header__content {
        max-width: none;
        padding: 31px 24px 0;
        text-align: center;
    }
    .page-songs .sng-page-header__title,
    .page-songs .sng-page-header__sub {
        margin-inline: auto;
    }
    .page-songs .sng-page-header__actions {
        justify-content: center;
    }
    .page-songs .sng-page-header__visual {
        width: 300px;
        margin: 0 auto 30px;
        justify-self: center;
        transform: none;
    }
    .page-songs .sng-catalog-panel {
        padding: 20px;
    }
}
@media (max-width: 500px) {
    .page-songs .sng-page-header {
        border-radius: 17px;
    }
    .page-songs .sng-page-header__content {
        padding-inline: 20px;
    }
    .page-songs .sng-page-header__title {
        font-size: 35px;
    }
    .page-songs .sng-page-header__visual {
        width: 275px;
        height: 225px;
        margin-bottom: 20px;
        transform: scale(.9);
        transform-origin: center top;
    }
    .page-songs .sng-catalog-panel {
        padding: 18px 13px;
        border-radius: 16px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .page-songs .sng-page-header__cta,
    .page-songs .sng-page-header__wave i {
        transition: none;
        animation: none;
    }
}

/* =============================================================================
   RADIO — COMPACT LIVE BROADCAST EXPERIENCE
============================================================================= */
.page-radio .rdp {
    padding-bottom: 70px;
}
.page-radio .rdp-hero {
    min-height: 260px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 10% 0%, rgba(39, 211, 238, .13), transparent 28%),
        radial-gradient(circle at 94% 110%, rgba(124, 58, 237, .45), transparent 47%),
        linear-gradient(122deg, #061a35 0%, #11366f 51%, #322477 100%);
    border: 1px solid rgba(65, 99, 169, .55);
    border-radius: 20px;
    box-shadow: 0 21px 47px rgba(12, 27, 59, .2);
}
.page-radio .rdp-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 440px;
    height: 440px;
    right: -220px;
    top: -250px;
    border: 54px solid rgba(255, 255, 255, .035);
    border-radius: 50%;
}
.page-radio .rdp-hero::after {
    inset: auto 0 0;
    height: 45%;
    opacity: 1;
    background: linear-gradient(transparent, rgba(2, 10, 25, .22));
}
.page-radio .rdp-hero__ambient {
    opacity: .62;
}
.page-radio .rdp-hero__panel {
    min-height: 260px;
    padding: 27px clamp(28px, 4.3vw, 54px);
}
.page-radio .rdp-hero__panel--idle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr);
    align-items: center;
    gap: clamp(32px, 5vw, 68px);
}
.page-radio .rdp-hero__idle-left {
    max-width: 620px;
}
.page-radio .rdp-hero__badge {
    margin-bottom: 11px;
    color: #d9e7ff;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .15);
    backdrop-filter: blur(8px);
}
.page-radio .rdp-live-dot {
    background: #ff5471;
    box-shadow: 0 0 0 4px rgba(255, 84, 113, .13);
}
.page-radio .rdp-hero__title {
    max-width: 620px;
    color: #fff;
    font-size: clamp(34px, 4.2vw, 52px);
    line-height: 1.02;
    letter-spacing: -.052em;
}
.page-radio .rdp-hero__sub {
    max-width: 570px;
    margin-top: 12px;
    color: rgba(225, 234, 251, .74);
    font-size: 12px;
    line-height: 1.65;
}
.page-radio .rdp-hero__quick-stats {
    margin-top: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    color: rgba(203, 216, 241, .67);
    font-size: 9px;
    font-weight: 700;
}
.page-radio .rdp-hero__quick-stats strong {
    color: #fff;
    font-size: 11px;
}
.page-radio .rdp-hero__quick-stats i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .32);
}

.page-radio .rdp-tuner {
    position: relative;
    width: min(390px, 100%);
    min-height: 205px;
    justify-self: end;
    padding: 15px 17px 14px;
    color: #dfe8f9;
    background:
        linear-gradient(145deg, rgba(21, 33, 61, .93), rgba(6, 14, 30, .96));
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 15px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 22px 40px rgba(0, 0, 0, .36);
}
.page-radio .rdp-tuner::before {
    content: "";
    position: absolute;
    inset: 7px;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .045);
    border-radius: 10px;
}
.page-radio .rdp-tuner__top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #8796b1;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.page-radio .rdp-tuner__top > span {
    display: flex;
    align-items: center;
    gap: 6px;
}
.page-radio .rdp-tuner__top i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #54e2c2;
    box-shadow: 0 0 0 4px rgba(84, 226, 194, .11);
}
.page-radio .rdp-tuner__display {
    position: relative;
    margin-top: 13px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
    color: #8ea3c8;
}
.page-radio .rdp-tuner__display strong {
    color: #e8f7ff;
    font-family: Consolas, "Courier New", monospace;
    font-size: 42px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .03em;
    text-shadow: 0 0 18px rgba(62, 211, 237, .3);
}
.page-radio .rdp-tuner__band,
.page-radio .rdp-tuner__unit {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;
}
.page-radio .rdp-tuner__scale {
    position: relative;
    margin-top: 12px;
}
.page-radio .rdp-tuner__numbers {
    display: flex;
    justify-content: space-between;
    color: #66748d;
    font-family: Consolas, monospace;
    font-size: 7px;
}
.page-radio .rdp-tuner__track {
    position: relative;
    height: 20px;
    margin-top: 3px;
    background:
        repeating-linear-gradient(90deg, rgba(154, 171, 201, .37) 0 1px, transparent 1px 12px);
    border-top: 1px solid rgba(133, 152, 184, .25);
}
.page-radio .rdp-tuner__track::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #53d9e9 48%, transparent);
}
.page-radio .rdp-tuner__track i {
    position: absolute;
    left: 19%;
    top: -4px;
    width: 2px;
    height: 25px;
    background: #ff5572;
    box-shadow: 0 0 8px rgba(255, 85, 114, .7);
}
.page-radio .rdp-tuner__bottom {
    position: relative;
    margin-top: 9px;
    display: grid;
    grid-template-columns: 1fr 54px 1fr;
    align-items: center;
    gap: 13px;
}
.page-radio .rdp-tuner__signal {
    height: 21px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
}
.page-radio .rdp-tuner__signal span {
    width: 5px;
    background: #4dddbf;
    border-radius: 2px 2px 0 0;
}
.page-radio .rdp-tuner__signal span:nth-child(1) { height: 5px; }
.page-radio .rdp-tuner__signal span:nth-child(2) { height: 9px; }
.page-radio .rdp-tuner__signal span:nth-child(3) { height: 13px; }
.page-radio .rdp-tuner__signal span:nth-child(4) { height: 17px; background: #f4b749; }
.page-radio .rdp-tuner__signal span:nth-child(5) { height: 21px; background: #525e72; }
.page-radio .rdp-tuner__dial {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle, #202b40 0 35%, #0b1220 36% 58%, #344056 59% 61%, #111a2b 62%);
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, .15), 0 6px 12px rgba(0, 0, 0, .35);
}
.page-radio .rdp-tuner__dial i {
    width: 2px;
    height: 14px;
    margin-top: -21px;
    background: #7f91ae;
    border-radius: 2px;
}
.page-radio .rdp-tuner__eq {
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
}
.page-radio .rdp-tuner__eq span {
    width: 3px;
    height: 8px;
    background: linear-gradient(to top, #607bed, #4de1c6);
    border-radius: 999px;
    animation: rdp-eq .9s ease-in-out infinite alternate;
}
.page-radio .rdp-tuner__eq span:nth-child(2) { height: 17px; animation-delay: -.4s; }
.page-radio .rdp-tuner__eq span:nth-child(3) { height: 11px; animation-delay: -.2s; }
.page-radio .rdp-tuner__eq span:nth-child(4) { height: 23px; animation-delay: -.7s; }
.page-radio .rdp-tuner__eq span:nth-child(5) { height: 14px; animation-delay: -.35s; }
.page-radio .rdp-tuner__eq span:nth-child(6) { height: 20px; animation-delay: -.1s; }
.page-radio .rdp-tuner__eq span:nth-child(7) { height: 9px; animation-delay: -.55s; }

.page-radio .rdp-hero__panel--playing {
    grid-template-columns: 90px minmax(0, 1fr) auto;
    gap: 22px;
}
.page-radio .rdp-hero__art-frame {
    width: 84px;
    height: 84px;
    border-radius: 13px;
    box-shadow: 0 13px 28px rgba(0, 0, 0, .27);
}
.page-radio .rdp-hero__now-name {
    font-size: clamp(24px, 3vw, 38px);
}
.page-radio .rdp-hero__ctrls {
    padding: 10px 12px;
    background: rgba(5, 16, 38, .4);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 14px;
    backdrop-filter: blur(10px);
}

.page-radio .rdp-filter-bar {
    margin-top: 14px;
    padding: 8px 12px;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .055);
}
.page-radio .rdp-pill {
    min-height: 32px;
    padding-inline: 14px;
    font-size: 10px;
    font-weight: 750;
}
.page-radio .rdp-filter-bar__count {
    padding: 6px 10px;
    color: #5f6c80;
    background: #f5f6fa;
    border: 1px solid #e2e7ef;
}

.page-radio .rdp-stations-section {
    margin-top: 18px;
    padding: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(109, 78, 232, .045), transparent 28%),
        rgba(255, 255, 255, .91);
    border: 1px solid rgba(216, 223, 234, .95);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}
.page-radio .rdp-section__hd {
    min-height: 0;
    margin: 0 0 18px;
    padding: 0 0 16px;
    border-bottom: 1px solid #e9edf3;
    background: transparent;
}
.page-radio .rdp-section__hd::before {
    display: none;
}
.page-radio .rdp-section__heading-copy {
    min-width: 0;
}
.page-radio .rdp-section__heading-copy > span {
    color: #6d4ee8;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.page-radio .rdp-section__title {
    margin-top: 4px;
    color: #17213a;
    font-size: 23px;
    letter-spacing: -.035em;
}
.page-radio .rdp-section__heading-copy p {
    margin-top: 4px;
    color: #788397;
    font-size: 10px;
}
.page-radio .rdp-section__count {
    margin-left: auto;
}
.page-radio .rdp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}
.page-radio .rdp-card {
    min-height: 137px;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(215, 222, 233, .96);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 17px rgba(15, 23, 42, .055);
}
.page-radio .rdp-card:hover,
.page-radio .rdp-card:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(104, 77, 222, .35);
    box-shadow: 0 14px 28px rgba(25, 35, 66, .11);
}
.page-radio .rdp-card--playing {
    border-color: rgba(42, 191, 164, .62);
    box-shadow: 0 0 0 2px rgba(42, 191, 164, .1), 0 14px 29px rgba(25, 35, 66, .12);
}
.page-radio .rdp-card__art-wrap {
    width: 104px;
    height: 100%;
    min-height: 137px;
    border-radius: 0;
}
.page-radio .rdp-card__art,
.page-radio .rdp-card__art-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-radio .rdp-card__art-fallback {
    background:
        radial-gradient(circle at 25% 20%, rgba(255, 255, 255, .78), transparent 22%),
        linear-gradient(145deg, #e4efff, #e8e5ff) !important;
}
.page-radio .rdp-card__fallback-icon {
    width: 32px;
    height: 32px;
    color: #8aa1c3;
}
.page-radio .rdp-card__play-btn {
    width: 42px;
    height: 42px;
    opacity: 0;
    background: linear-gradient(135deg, #7047ed, #296bea);
    border: 2px solid rgba(255, 255, 255, .82);
    box-shadow: 0 9px 20px rgba(24, 33, 66, .28);
}
.page-radio .rdp-card:hover .rdp-card__play-btn,
.page-radio .rdp-card:focus-within .rdp-card__play-btn,
.page-radio .rdp-card--playing .rdp-card__play-btn {
    opacity: 1;
}
.page-radio .rdp-card__body {
    min-width: 0;
    padding: 12px 12px 10px;
}
.page-radio .rdp-card__name {
    font-size: 12px;
    font-weight: 800;
}
.page-radio .rdp-card__genre {
    margin-top: 5px;
    padding: 3px 7px;
    font-size: 7px;
}
.page-radio .rdp-card__desc {
    min-height: 29px;
    margin-top: 7px;
    display: -webkit-box;
    overflow: hidden;
    color: #788397;
    font-size: 9px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.page-radio .rdp-card__footer {
    margin-top: 8px;
    padding-top: 8px;
}
.page-radio .rdp-card__meta {
    overflow: hidden;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-radio .rdp-card__onair {
    padding: 3px 6px;
    font-size: 6px;
}
.page-radio .rdp-card__like-btn {
    min-width: 23px;
    height: 23px;
    padding: 0 5px;
}
.page-radio .rdp-grid--list {
    grid-template-columns: 1fr;
}
.page-radio .rdp-grid--list .rdp-card {
    min-height: 92px;
    grid-template-columns: 92px minmax(0, 1fr);
}
.page-radio .rdp-grid--list .rdp-card__art-wrap {
    width: 92px;
    min-height: 92px;
}
.page-radio .rdp-grid--list .rdp-card__desc {
    min-height: 0;
    -webkit-line-clamp: 1;
}

@media (max-width: 1080px) {
    .page-radio .rdp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .page-radio .rdp-hero__panel--idle {
        grid-template-columns: minmax(0, 1fr) 330px;
        gap: 28px;
    }
}
@media (max-width: 760px) {
    .page-radio .rdp-hero__panel--idle {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px 23px 30px;
    }
    .page-radio .rdp-hero__idle-left {
        margin-inline: auto;
        text-align: center;
    }
    .page-radio .rdp-hero__title,
    .page-radio .rdp-hero__sub {
        margin-inline: auto;
    }
    .page-radio .rdp-hero__quick-stats {
        justify-content: center;
    }
    .page-radio .rdp-tuner {
        width: min(390px, 100%);
        justify-self: center;
    }
    .page-radio .rdp-hero__panel--playing {
        grid-template-columns: 76px minmax(0, 1fr);
    }
    .page-radio .rdp-hero__ctrls {
        grid-column: 1 / -1;
        justify-self: center;
    }
    .page-radio .rdp-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 500px) {
    .page-radio .rdp-hero {
        border-radius: 17px;
    }
    .page-radio .rdp-hero__title {
        font-size: 34px;
    }
    .page-radio .rdp-tuner {
        min-height: 194px;
        padding-inline: 14px;
    }
    .page-radio .rdp-tuner__display strong {
        font-size: 36px;
    }
    .page-radio .rdp-stations-section {
        padding: 17px 12px;
        border-radius: 16px;
    }
    .page-radio .rdp-section__heading-copy p,
    .page-radio .rdp-section__count {
        display: none;
    }
    .page-radio .rdp-card {
        grid-template-columns: 92px minmax(0, 1fr);
    }
    .page-radio .rdp-card__art-wrap {
        width: 92px;
    }
    .page-radio .rdp-card__play-btn {
        width: 38px;
        height: 38px;
        opacity: 1;
    }
}
@media (prefers-reduced-motion: reduce) {
    .page-radio .rdp-tuner__eq span {
        animation: none;
    }
}

/* Radio broadcast identity and live station presentation. */
.page-radio .content {
    background:
        radial-gradient(circle at 12% 5%, rgba(37, 99, 235, .065), transparent 25rem),
        linear-gradient(180deg, #f6f8fc 0, #fff 34rem);
}
.page-radio .rdp {
    width: min(100%, 1460px);
    margin: 0 auto;
}
.page-radio .rdp-hero {
    min-height: 305px;
    border-radius: 25px;
    box-shadow: 0 30px 75px rgba(8, 25, 57, .25);
}
.page-radio .rdp-hero__station-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-position: center;
    background-size: cover;
    opacity: 0;
    filter: saturate(.85);
    transition: opacity .35s ease;
}
.page-radio .rdp-hero__station-backdrop::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5, 23, 53, .96), rgba(16, 49, 105, .86) 56%, rgba(48, 35, 116, .68)),
        linear-gradient(135deg, rgba(6, 26, 53, .28), rgba(124, 58, 237, .27));
    content: "";
}
.page-radio .rdp-hero__station-backdrop.is-visible { opacity: .48; }
.page-radio .rdp-hero__panel { min-height: 305px; }
.page-radio .rdp-hero__eyebrow {
    display: block;
    margin-bottom: 9px;
    color: #7dd3fc;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .17em;
    text-transform: uppercase;
}
.page-radio .rdp-hero__browse {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin-top: 18px;
    padding: 10px 13px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 10px;
    color: #eef6ff;
    background: rgba(255, 255, 255, .08);
    font-size: 10px;
    font-weight: 750;
    text-decoration: none;
    backdrop-filter: blur(10px);
}
.page-radio .rdp-hero__browse:hover {
    border-color: rgba(125, 211, 252, .44);
    background: rgba(125, 211, 252, .12);
}
.page-radio .rdp-tuner {
    border-color: rgba(125, 211, 252, .21);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 26px 55px rgba(0, 0, 0, .4);
}
.page-radio .rdp-guide {
    display: grid;
    grid-template-columns: auto 1px repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 18px;
    margin-top: 14px;
    padding: 13px 17px;
    border: 1px solid #dfe5ef;
    border-radius: 15px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 10px 28px rgba(25, 39, 68, .055);
    backdrop-filter: blur(14px);
}
.page-radio .rdp-guide__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #263550;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.page-radio .rdp-guide__brand .rdp-live-dot {
    width: 6px;
    height: 6px;
}
.page-radio .rdp-guide__divider {
    align-self: stretch;
    background: #e4e8ef;
}
.page-radio .rdp-guide__item {
    display: grid;
    min-width: 0;
    gap: 2px;
}
.page-radio .rdp-guide__item strong {
    color: #33405a;
    font-size: 10px;
}
.page-radio .rdp-guide__item small {
    overflow: hidden;
    color: #8993a4;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-radio .rdp-filter-bar {
    position: sticky;
    top: 8px;
    z-index: 50;
    border: 1px solid rgba(220, 226, 236, .92);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(18px);
}
.page-radio .rdp-stations-section {
    margin-top: 22px;
    border-radius: 21px;
}
.page-radio .rdp-card {
    min-height: 150px;
    grid-template-columns: 112px minmax(0, 1fr);
    border-radius: 16px;
}
.page-radio .rdp-card__art-wrap {
    width: 112px;
    min-height: 150px;
}
.page-radio .rdp-card__body { padding: 14px 14px 12px; }
.page-radio .rdp-card__name { font-size: 13px; }
.page-radio .rdp-card__genre {
    border-radius: 6px;
    color: #5b38c7;
    background: #f0edff;
}
.page-radio .rdp-card__onair {
    color: #077d69;
    background: #e7faf5;
}
@media (max-width: 880px) {
    .page-radio .rdp-guide {
        grid-template-columns: auto 1px repeat(2, minmax(0, 1fr));
    }
    .page-radio .rdp-guide__item:last-child { display: none; }
}
@media (max-width: 600px) {
    .page-radio .rdp-hero,
    .page-radio .rdp-hero__panel { min-height: 0; }
    .page-radio .rdp-guide {
        grid-template-columns: 1fr 1fr;
        gap: 11px 16px;
    }
    .page-radio .rdp-guide__brand { grid-column: 1 / -1; }
    .page-radio .rdp-guide__divider { display: none; }
    .page-radio .rdp-guide__item:last-child { display: none; }
    .page-radio .rdp-filter-bar { top: 4px; }
}

/* Radio station items — premium broadcast cards. */
.page-radio .rdp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}
.page-radio .rdp-card {
    position: relative;
    min-height: 172px;
    grid-template-columns: 132px minmax(0, 1fr);
    isolation: isolate;
    overflow: hidden;
    border: 1px solid #dfe4ed;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(247, 249, 253, .72), rgba(255, 255, 255, .98) 42%),
        #fff;
    box-shadow: 0 8px 25px rgba(20, 33, 60, .07);
    transition:
        transform .24s ease,
        border-color .24s ease,
        box-shadow .24s ease;
}
.page-radio .rdp-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 132px;
    z-index: 2;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(104, 71, 237, .5), transparent);
    opacity: 0;
    content: "";
    transition: opacity .24s ease;
}
.page-radio .rdp-card:hover,
.page-radio .rdp-card:focus-visible,
.page-radio .rdp-card:focus-within {
    transform: translateY(-4px);
    border-color: rgba(97, 71, 210, .35);
    box-shadow: 0 19px 38px rgba(28, 38, 70, .13);
}
.page-radio .rdp-card:hover::before,
.page-radio .rdp-card:focus-within::before,
.page-radio .rdp-card--playing::before {
    opacity: 1;
}
.page-radio .rdp-card--playing {
    border-color: rgba(37, 174, 151, .58) !important;
    background:
        linear-gradient(135deg, rgba(233, 252, 247, .78), rgba(255, 255, 255, .98) 48%),
        #fff;
    box-shadow:
        0 0 0 3px rgba(37, 174, 151, .09),
        0 19px 40px rgba(21, 75, 72, .14) !important;
}
.page-radio .rdp-card--playing::before {
    background: linear-gradient(90deg, transparent, #22b89d, transparent);
}
.page-radio .rdp-card__art-wrap {
    width: 132px;
    min-width: 132px;
    min-height: 172px;
    padding: 0;
    background: #e8edf6;
}
.page-radio .rdp-card__art-wrap::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, transparent 42%, rgba(7, 18, 40, .48)),
        linear-gradient(135deg, rgba(75, 55, 180, .08), rgba(18, 103, 202, .13));
    content: "";
    pointer-events: none;
}
.page-radio .rdp-card__art,
.page-radio .rdp-card__art-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease, filter .3s ease;
}
.page-radio .rdp-card:hover .rdp-card__art,
.page-radio .rdp-card:focus-within .rdp-card__art {
    transform: scale(1.045);
}
.page-radio .rdp-card--playing .rdp-card__art {
    filter: saturate(1.08) contrast(1.03);
}
.page-radio .rdp-card__fallback-icon {
    width: 38px;
    height: 38px;
}
.page-radio .rdp-card__play-btn {
    inset: 50% auto auto 50%;
    z-index: 3;
    width: 46px;
    height: 46px;
    transform: translate(-50%, -44%) scale(.88);
    border: 2px solid rgba(255, 255, 255, .82);
    border-radius: 50%;
    opacity: 0;
    background: linear-gradient(135deg, #7650ed, #246fe8);
    box-shadow: 0 12px 25px rgba(8, 19, 51, .34);
    transition: opacity .22s ease, transform .22s ease;
}
.page-radio .rdp-card__play-btn svg {
    width: 19px;
    height: 19px;
}
.page-radio .rdp-card:hover .rdp-card__play-btn,
.page-radio .rdp-card:focus-within .rdp-card__play-btn,
.page-radio .rdp-card--playing .rdp-card__play-btn {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
.page-radio .rdp-card__body {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 17px 16px 13px;
}
.page-radio .rdp-card__name-row {
    align-items: flex-start;
    gap: 7px;
}
.page-radio .rdp-card__name {
    overflow: hidden;
    margin: 0;
    color: #172039;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: -.025em;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-radio .rdp-card__new-tag {
    margin-top: 1px;
    padding: 3px 5px;
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(135deg, #7550e9, #376de2);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .1em;
}
.page-radio .rdp-card__genre {
    width: fit-content;
    margin-top: 8px;
    padding: 4px 8px;
    border: 1px solid #e1dcfb;
    border-radius: 7px;
    color: #6040c2;
    background: #f3f0ff;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .075em;
    text-transform: uppercase;
}
.page-radio .rdp-card__desc {
    min-height: 32px;
    margin: 9px 0 0;
    color: #737e91;
    font-size: 9px;
    line-height: 1.55;
    -webkit-line-clamp: 2;
}
.page-radio .rdp-card__footer {
    align-items: center;
    min-height: 30px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #edf0f5;
}
.page-radio .rdp-card__meta {
    gap: 4px;
    color: #929bad;
    font-size: 7px;
    font-weight: 650;
    letter-spacing: .01em;
}
.page-radio .rdp-card__footer-right { gap: 7px; }
.page-radio .rdp-card__like-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
    border: 1px solid #e5e8ef;
    border-radius: 9px;
    color: #8b95a7;
    background: #fff;
}
.page-radio .rdp-card__like-btn:hover {
    border-color: #dfc9e9;
    color: #bc3170;
    background: #fff5fa;
}
.page-radio .rdp-card__like-btn.is-liked {
    border-color: #f1c9da;
    color: #c72f70;
    background: #fff1f7;
}
.page-radio .rdp-card__onair {
    gap: 4px;
    padding: 5px 7px;
    border: 1px solid #cfefe7;
    border-radius: 7px;
    color: #087a68;
    background: #ebfaf6;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .085em;
}
.page-radio .rdp-card__onair-dot {
    box-shadow: 0 0 0 3px rgba(22, 163, 135, .12);
}
.page-radio .rdp-card--playing .rdp-card__onair {
    color: #fff;
    border-color: transparent;
    background: #15977f;
}
.page-radio .rdp-grid--list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
}
.page-radio .rdp-grid--list .rdp-card {
    min-height: 96px;
    height: auto;
    grid-template-columns: 96px minmax(0, 1fr);
    border-radius: 14px;
}
.page-radio .rdp-grid--list .rdp-card::before { left: 96px; }
.page-radio .rdp-grid--list .rdp-card__art-wrap {
    width: 96px;
    min-width: 96px;
    height: auto;
    min-height: 96px;
}
.page-radio .rdp-grid--list .rdp-card__body {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(100px, .65fr) auto;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
}
.page-radio .rdp-grid--list .rdp-card__name-row {
    display: flex;
    min-width: 0;
}
.page-radio .rdp-grid--list .rdp-card__genre {
    margin: 0;
    justify-self: start;
}
.page-radio .rdp-grid--list .rdp-card__desc { display: none; }
.page-radio .rdp-grid--list .rdp-card__footer {
    position: static;
    right: auto;
    bottom: auto;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    gap: 14px;
}
.page-radio .rdp-grid--list .rdp-card__meta { font-size: 8px; }
.page-radio .rdp-grid--list .rdp-card__onair { display: inline-flex; }
@media (max-width: 1180px) {
    .page-radio .rdp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .page-radio .rdp-grid { grid-template-columns: 1fr; }
    .page-radio .rdp-card {
        min-height: 150px;
        grid-template-columns: 112px minmax(0, 1fr);
    }
    .page-radio .rdp-card::before { left: 112px; }
    .page-radio .rdp-card__art-wrap {
        width: 112px;
        min-width: 112px;
        min-height: 150px;
    }
    .page-radio .rdp-card__play-btn {
        width: 42px;
        height: 42px;
        opacity: 1;
    }
    .page-radio .rdp-grid--list .rdp-card__body {
        display: flex;
        gap: 4px;
    }
    .page-radio .rdp-grid--list .rdp-card__genre { margin-top: 6px; }
    .page-radio .rdp-grid--list .rdp-card__footer {
        width: 100%;
        margin-top: auto;
    }
}
@media (max-width: 420px) {
    .page-radio .rdp-card {
        min-height: 142px;
        grid-template-columns: 98px minmax(0, 1fr);
    }
    .page-radio .rdp-card::before { left: 98px; }
    .page-radio .rdp-card__art-wrap {
        width: 98px;
        min-width: 98px;
        min-height: 142px;
    }
    .page-radio .rdp-card__body { padding: 13px 11px 10px; }
    .page-radio .rdp-card__desc { display: none; }
    .page-radio .rdp-card__footer { padding-top: 8px; }
}

/* Artwork-first radio discovery. */
.page-radio .rdp-hero__panel--idle {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr);
}
.page-radio .rdp-hero__art-wall {
    position: relative;
    width: min(430px, 100%);
    height: 230px;
    justify-self: end;
}
.page-radio .rdp-hero__art-wall-fallback,
.page-radio .rdp-hero__art-tile {
    position: absolute;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 17px;
    box-shadow: 0 18px 42px rgba(1, 9, 27, .38);
}
.page-radio .rdp-hero__art-wall-fallback {
    inset: 8px 14% 8px 15%;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .38);
    background: linear-gradient(145deg, #263d83, #6b43be);
    transform: rotate(-2deg);
}
.page-radio .rdp-hero__art-wall-fallback svg {
    width: 68px;
    height: 68px;
}
.page-radio .rdp-hero__art-tile {
    width: 42%;
    height: 72%;
    object-fit: cover;
    background: #18274d;
}
.page-radio .rdp-hero__art-tile--1 {
    z-index: 4;
    right: 25%;
    bottom: 0;
    width: 48%;
    height: 91%;
}
.page-radio .rdp-hero__art-tile--2 {
    z-index: 3;
    top: 3%;
    left: 0;
    transform: rotate(-7deg);
}
.page-radio .rdp-hero__art-tile--3 {
    z-index: 3;
    top: 2%;
    right: 0;
    transform: rotate(7deg);
}
.page-radio .rdp-hero__art-tile--4 {
    z-index: 2;
    bottom: 0;
    left: 8%;
    width: 32%;
    height: 51%;
    transform: rotate(-10deg);
}
.page-radio .rdp-hero__art-tile--5 {
    z-index: 2;
    right: 7%;
    bottom: 0;
    width: 32%;
    height: 51%;
    transform: rotate(10deg);
}
.page-radio .rdp-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.page-radio .rdp-card {
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
}
.page-radio .rdp-card::before {
    right: 0;
    left: 0;
}
.page-radio .rdp-card__art-wrap {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    aspect-ratio: 1;
}
.page-radio .rdp-card__body {
    flex: 1;
    min-height: 142px;
}
.page-radio .rdp-load-more-wrap {
    margin-top: 22px;
    padding: 22px 0 2px;
    border-top: 1px solid #e9edf3;
}
.page-radio .rdp-load-more-btn {
    min-width: 190px;
    justify-content: center;
    border-color: rgba(104, 71, 237, .3);
    color: #6544cf;
    background: linear-gradient(135deg, rgba(112, 71, 237, .08), rgba(41, 107, 234, .07));
}

@media (max-width: 1180px) {
    .page-radio .rdp-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 880px) {
    .page-radio .rdp-hero__panel--idle {
        grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr);
    }
    .page-radio .rdp-hero__art-wall {
        height: 205px;
    }
    .page-radio .rdp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 760px) {
    .page-radio .rdp-hero__panel--idle {
        grid-template-columns: 1fr;
    }
    .page-radio .rdp-hero__art-wall {
        width: min(390px, 94%);
        height: 210px;
        justify-self: center;
    }
    .page-radio .rdp-card {
        min-height: 0;
        grid-template-columns: none;
    }
    .page-radio .rdp-card::before {
        left: 0;
    }
    .page-radio .rdp-card__art-wrap {
        width: 100%;
        min-width: 0;
        min-height: 0;
    }
}
@media (max-width: 500px) {
    .page-radio .rdp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .page-radio .rdp-card__body {
        min-height: 124px;
        padding: 12px 10px 10px;
    }
    .page-radio .rdp-card__desc,
    .page-radio .rdp-card__onair {
        display: none;
    }
    .page-radio .rdp-card__footer {
        padding-top: 7px;
    }
}

/* =============================================================================
   ARTISTS — PRODUCTION TALENT DISCOVERY
============================================================================= */
.page-artists .ast {
    padding-bottom: 72px;
}
.page-artists .ast-ph {
    position: relative;
    min-height: 300px;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
    align-items: center;
    gap: clamp(36px, 6vw, 78px);
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(34, 211, 238, .13), transparent 29%),
        radial-gradient(circle at 94% 108%, rgba(124, 58, 237, .47), transparent 47%),
        linear-gradient(122deg, #061a35 0%, #11366f 51%, #322477 100%);
    border: 1px solid rgba(65, 99, 169, .55);
    border-radius: 20px;
    box-shadow: 0 22px 48px rgba(12, 27, 59, .2);
}
.page-artists .ast-ph::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 470px;
    height: 470px;
    right: -235px;
    top: -270px;
    border: 58px solid rgba(255, 255, 255, .035);
    border-radius: 50%;
}
.page-artists .ast-ph::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: auto 0 0;
    width: auto;
    height: 48%;
    opacity: 1;
    border: 0;
    border-radius: 0;
    background: linear-gradient(transparent, rgba(3, 12, 29, .22));
}
.page-artists .ast-ph__text {
    max-width: 680px;
    padding: 38px 0 38px clamp(34px, 5vw, 66px);
}
.page-artists .ast-ph__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    padding: 6px 10px;
    color: #d9e7ff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px;
    backdrop-filter: blur(8px);
}
.page-artists .ast-ph__eyebrow i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #65e6c9;
    box-shadow: 0 0 0 4px rgba(101, 230, 201, .12);
}
.page-artists .ast-ph__title {
    max-width: 680px;
    color: #fff;
    font-size: clamp(35px, 4.6vw, 57px);
    line-height: 1.01;
    letter-spacing: -.058em;
}
.page-artists .ast-ph__sub {
    max-width: 600px;
    margin-top: 14px;
    color: rgba(225, 234, 251, .74);
    font-size: 13px;
    line-height: 1.68;
}
.page-artists .ast-ph__actions {
    margin-top: 24px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 17px;
}
.page-artists .ast-ph__cta {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 17px;
    color: #24316d;
    font-size: 11px;
    font-weight: 800;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 11px 25px rgba(0, 0, 0, .2);
    transition: transform .2s ease, box-shadow .2s ease;
}
.page-artists .ast-ph__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 29px rgba(0, 0, 0, .25);
}
.page-artists .ast-ph__badges {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}
.page-artists .ast-ph__badge {
    padding: 7px 10px;
    color: rgba(205, 219, 243, .69);
    font-size: 9px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
}
.page-artists .ast-ph__badge strong {
    color: #fff;
    font-size: 12px;
}
.page-artists .ast-ph__visual {
    position: relative;
    width: min(390px, 100%);
    height: 240px;
    justify-self: end;
    margin-right: clamp(34px, 5vw, 64px);
}
.page-artists .ast-ph__portrait {
    position: absolute;
    width: 170px;
    height: 210px;
    overflow: hidden;
    background: linear-gradient(145deg, #dfeaff, #d8cdf9);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 13px;
    box-shadow: 0 20px 38px rgba(0, 0, 0, .36);
}
.page-artists .ast-ph__portrait:nth-child(1) {
    z-index: 3;
    left: 96px;
    top: 1px;
}
.page-artists .ast-ph__portrait:nth-child(2) {
    z-index: 2;
    left: 9px;
    top: 20px;
    transform: rotate(-8deg) scale(.88);
    opacity: .88;
}
.page-artists .ast-ph__portrait:nth-child(3) {
    z-index: 1;
    right: 9px;
    top: 19px;
    transform: rotate(8deg) scale(.88);
    opacity: .88;
}
.page-artists .ast-ph__portrait img,
.page-artists .ast-ph__portrait-fallback {
    width: 100%;
    height: 100%;
}
.page-artists .ast-ph__portrait img {
    position: relative;
    z-index: 1;
    object-fit: cover;
}
.page-artists .ast-ph__portrait-fallback {
    position: absolute;
    display: grid;
    place-items: center;
    color: rgba(58, 66, 119, .42);
}
.page-artists .ast-ph__portrait-fallback svg {
    width: 55px;
    height: 55px;
}
.page-artists .ast-ph__visual-label {
    position: absolute;
    z-index: 4;
    left: 48px;
    bottom: 0;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 12px;
    background: rgba(5, 18, 43, .77);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 9px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .23);
    backdrop-filter: blur(12px);
}
.page-artists .ast-ph__visual-label small {
    color: #aebfe1;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.page-artists .ast-ph__visual-label strong {
    color: #fff;
    font-size: 11px;
}

.page-artists .ast-discovery {
    margin-top: 20px;
    gap: 16px;
}
.page-artists .ast-discovery-panel {
    padding: 20px;
    border-radius: 18px;
    box-shadow: 0 9px 26px rgba(15, 23, 42, .065);
}
.page-artists .ast-discovery-panel--new {
    min-width: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%, rgba(112, 71, 237, .08), transparent 32%),
        #fff;
}
.page-artists .ast-discovery-panel__header {
    margin-bottom: 15px;
}
.page-artists .ast-new-rail__header-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}
.page-artists .ast-new-rail__controls {
    display: inline-flex;
    gap: 5px;
}
.page-artists .ast-new-rail__controls button {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #5f49cb;
    background: #f4f1ff;
    border: 1px solid #dcd4fb;
    border-radius: 50%;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.page-artists .ast-new-rail__controls button:hover:not(:disabled) {
    color: #fff;
    background: linear-gradient(135deg, #7047ed, #296bea);
    border-color: transparent;
    transform: translateY(-1px);
}
.page-artists .ast-new-rail__controls button:disabled {
    color: #aeb6c5;
    background: #f5f6f8;
    border-color: #e4e7ed;
    cursor: default;
    opacity: .62;
}
.page-artists .ast-new-rail {
    min-width: 0;
    overflow: hidden;
}
.page-artists .ast-new-grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 8px;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
}
.page-artists .ast-new-grid::-webkit-scrollbar {
    display: none;
}
.page-artists .ast-new-grid:focus-visible {
    outline: 2px solid rgba(103, 76, 222, .42);
    outline-offset: 4px;
    border-radius: 12px;
}
.page-artists .ast-new-card {
    flex: 0 0 190px;
    scroll-snap-align: start;
    border-radius: 14px;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .07);
}
.page-artists .ast-new-card:hover,
.page-artists .ast-new-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 15px 29px rgba(29, 36, 69, .13);
}
.page-artists .ast-new-card__portrait {
    height: 145px;
}
.page-artists .ast-new-card__body {
    padding: 12px;
}

.page-artists .ast-discovery-panel--recommended {
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, .07), transparent 32%),
        #fff;
}
.page-artists .ast-recommended-card {
    padding: 8px 7px;
    border-radius: 11px;
}
.page-artists .ast-directory-heading {
    scroll-margin-top: 90px;
}
.page-artists .ast-filter-bar {
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .055);
}
.page-artists .ast-section {
    margin-top: 14px;
    padding: 20px;
    background:
        radial-gradient(circle at 100% 0%, rgba(109, 78, 232, .035), transparent 28%),
        rgba(255, 255, 255, .88);
    border: 1px solid rgba(216, 223, 234, .95);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .055);
}

@media (max-width: 1000px) {
    .page-artists .ast-ph {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 26px;
    }
    .page-artists .ast-ph__text {
        padding-left: 30px;
    }
    .page-artists .ast-ph__visual {
        width: 300px;
        margin-right: 28px;
        transform: scale(.87);
        transform-origin: right center;
    }
}
@media (max-width: 760px) {
    .page-artists .ast-ph {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .page-artists .ast-ph__text {
        max-width: none;
        padding: 31px 24px 0;
        text-align: center;
    }
    .page-artists .ast-ph__title,
    .page-artists .ast-ph__sub {
        margin-inline: auto;
    }
    .page-artists .ast-ph__actions {
        justify-content: center;
    }
    .page-artists .ast-ph__visual {
        width: 320px;
        margin: 0 auto 29px;
        justify-self: center;
        transform: none;
    }
    .page-artists .ast-discovery {
        grid-template-columns: 1fr;
    }
    .page-artists .ast-new-card {
        flex-basis: 180px;
    }
}
@media (max-width: 500px) {
    .page-artists .ast-ph {
        border-radius: 17px;
    }
    .page-artists .ast-ph__text {
        padding-inline: 20px;
    }
    .page-artists .ast-ph__title {
        font-size: 35px;
    }
    .page-artists .ast-ph__badges {
        display: flex;
    }
    .page-artists .ast-ph__visual {
        width: 285px;
        height: 220px;
        margin-bottom: 18px;
        transform: scale(.91);
        transform-origin: center top;
    }
    .page-artists .ast-discovery-panel {
        padding: 17px 13px;
        border-radius: 16px;
    }
    .page-artists .ast-discovery-panel__hint {
        display: none;
    }
    .page-artists .ast-new-card {
        flex-basis: min(72vw, 210px);
    }
    .page-artists .ast-new-card__portrait {
        height: 150px;
    }
    .page-artists .ast-section {
        padding: 13px;
        border-radius: 16px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .page-artists .ast-ph__cta,
    .page-artists .ast-new-grid,
    .page-artists .ast-new-rail__controls button {
        scroll-behavior: auto;
        transition: none;
    }
}

/* Recommended artists uses the same backend-driven discovery rail pattern. */
.page-artists .ast-discovery {
    grid-template-columns: 1fr;
}
.page-artists .ast-recommended-rail__controls {
    display: inline-flex;
    gap: 5px;
}
.page-artists :is(.ast-new-rail__controls, .ast-recommended-rail__controls) button {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #5f49cb;
    background: #f4f1ff;
    border: 1px solid #dcd4fb;
    border-radius: 50%;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.page-artists :is(.ast-new-rail__controls, .ast-recommended-rail__controls) button:hover:not(:disabled) {
    color: #fff;
    background: linear-gradient(135deg, #7047ed, #296bea);
    border-color: transparent;
    transform: translateY(-1px);
}
.page-artists :is(.ast-new-rail__controls, .ast-recommended-rail__controls) button:disabled {
    color: #aeb6c5;
    background: #f5f6f8;
    border-color: #e4e7ed;
    cursor: default;
    opacity: .62;
}
.page-artists .ast-recommended-list {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    grid-template-columns: none;
    gap: 11px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 8px;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
}
.page-artists .ast-recommended-list::-webkit-scrollbar {
    display: none;
}
.page-artists .ast-recommended-list:focus-visible {
    outline: 2px solid rgba(103, 76, 222, .42);
    outline-offset: 4px;
    border-radius: 12px;
}
.page-artists .ast-recommended-card {
    min-width: 0;
    min-height: 72px;
    flex: 0 0 278px;
    padding: 11px;
    scroll-snap-align: start;
    background: rgba(255, 255, 255, .9);
    border: 1px solid #e1e6ef;
    border-radius: 13px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .05);
}
.page-artists .ast-recommended-card:hover,
.page-artists .ast-recommended-card:focus-visible {
    border-color: rgba(103, 76, 222, .32);
    box-shadow: 0 13px 26px rgba(29, 36, 69, .1);
}
.page-artists .ast-recommended-card__avatar {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
}
.page-artists .ast-recommended-card__info p {
    margin-top: 5px;
}

@media (max-width: 500px) {
    .page-artists .ast-recommended-card {
        flex-basis: min(82vw, 285px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .page-artists .ast-recommended-list,
    .page-artists .ast-recommended-rail__controls button {
        scroll-behavior: auto;
        transition: none;
    }
}

/* Cohesive full artist directory. */
.page-artists .ast-directory-panel {
    margin-top: 20px;
    padding: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%, rgba(109, 78, 232, .055), transparent 29%),
        rgba(255, 255, 255, .92);
    border: 1px solid rgba(216, 223, 234, .96);
    border-radius: 19px;
    box-shadow: 0 11px 30px rgba(15, 23, 42, .065);
    scroll-margin-top: 88px;
}
.page-artists .ast-directory-heading {
    min-height: 66px;
    margin: 0;
    padding: 0 0 19px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    border-bottom: 1px solid #e8ecf2;
}
.page-artists .ast-directory-heading__main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
}
.page-artists .ast-directory-heading__icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #7047ed, #296bea);
    border-radius: 14px;
    box-shadow: 0 9px 20px rgba(80, 59, 185, .2);
}
.page-artists .ast-directory-heading__eyebrow {
    display: block;
    margin: 0 0 4px;
    color: #6d4ee8;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.page-artists .ast-directory-heading h2 {
    margin: 0;
    color: #17213a;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -.035em;
}
.page-artists .ast-directory-heading__main p {
    margin-top: 5px;
    color: #788397;
    font-size: 10px;
}
.page-artists .ast-directory-heading__total {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 8px 12px;
    color: #778296;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: #f6f7fb;
    border: 1px solid #e1e6ee;
    border-radius: 999px;
}
.page-artists .ast-directory-heading__total strong {
    color: #5d42cc;
    font-size: 13px;
}
.page-artists .ast-directory-panel .ast-filter-bar {
    position: relative;
    top: auto;
    z-index: 1;
    margin: 15px 0 0;
    padding: 9px 11px;
    background: #f7f8fb;
    border: 1px solid #e2e7ef;
    border-radius: 13px;
    box-shadow: none;
    backdrop-filter: none;
}
.page-artists .ast-directory-panel .ast-filter-bar__pills {
    padding-right: 10px;
}
.page-artists .ast-directory-panel .rdp-pill {
    min-height: 31px;
    padding-inline: 13px;
    font-size: 9px;
    font-weight: 750;
}
.page-artists .ast-directory-panel .ast-filter-bar__right {
    padding-left: 11px;
    border-left: 1px solid #dfe4ec;
}
.page-artists .ast-directory-panel .ast-results-count {
    padding: 6px 9px;
    color: #6348d0;
    background: #f0edff;
    border: 1px solid #ddd5ff;
    border-radius: 999px;
}
.page-artists .ast-directory-panel .ast-sort-select {
    height: 33px;
    border-color: #dce2eb;
    border-radius: 9px;
    background-color: #fff;
}
.page-artists .ast-directory-panel .ast-section {
    margin-top: 18px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.page-artists .ast-directory-panel .ast-grid:not(.ast-grid--list) {
    gap: 14px;
}
.page-artists .ast-directory-panel .ast-grid:not(.ast-grid--list) .ast-card {
    border-color: #e0e5ed;
    box-shadow: 0 6px 17px rgba(15, 23, 42, .055);
}
.page-artists .ast-directory-panel .ast-grid:not(.ast-grid--list) .ast-card:hover,
.page-artists .ast-directory-panel .ast-grid:not(.ast-grid--list) .ast-card:focus-visible {
    border-color: rgba(103, 76, 222, .34);
    box-shadow: 0 16px 31px rgba(29, 36, 69, .115);
}
.page-artists .ast-directory-panel .ast-load-more-row {
    padding-top: 23px;
}
.page-artists .ast-directory-panel .ast-load-more {
    min-height: 40px;
    padding-inline: 18px;
    color: #5d42cc;
    font-weight: 800;
    background: #f4f1ff;
    border: 1px solid #d9d0fb;
    border-radius: 999px;
}

@media (max-width: 760px) {
    .page-artists .ast-directory-panel {
        padding: 19px;
    }
    .page-artists .ast-directory-panel .ast-filter-bar {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
    }
    .page-artists .ast-directory-panel .ast-filter-bar__pills {
        width: 100%;
        padding-right: 0;
    }
    .page-artists .ast-directory-panel .ast-filter-bar__right {
        width: 100%;
        padding: 9px 0 0;
        justify-content: flex-end;
        border-left: 0;
        border-top: 1px solid #e1e5ec;
    }
}
@media (max-width: 500px) {
    .page-artists .ast-directory-panel {
        padding: 16px 12px;
        border-radius: 16px;
    }
    .page-artists .ast-directory-heading {
        padding-inline: 3px;
    }
    .page-artists .ast-directory-heading__icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 12px;
    }
    .page-artists .ast-directory-heading h2 {
        font-size: 20px;
    }
    .page-artists .ast-directory-heading__main p,
    .page-artists .ast-directory-heading__total {
        display: none;
    }
    .page-artists .ast-directory-panel .ast-filter-bar {
        padding-inline: 9px;
    }
}

/* Artist index feature band. */
.page-artists .ast-directory-heading {
    position: relative;
    min-height: 130px;
    margin: -24px -24px 0;
    padding: 24px 27px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 8% 0%, rgba(45, 212, 191, .11), transparent 28%),
        radial-gradient(circle at 96% 120%, rgba(124, 58, 237, .44), transparent 48%),
        linear-gradient(116deg, #081d3b 0%, #173d7b 58%, #332475 100%);
    border: 0;
    border-bottom: 1px solid rgba(89, 112, 168, .35);
}
.page-artists .ast-directory-heading::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: -108px;
    top: -150px;
    border: 31px solid rgba(255, 255, 255, .035);
    border-radius: 50%;
}
.page-artists .ast-directory-heading__main {
    position: relative;
    z-index: 1;
}
.page-artists .ast-directory-heading__icon {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
    color: #dfeaff;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 15px;
    box-shadow: 0 11px 24px rgba(0, 0, 0, .18);
    backdrop-filter: blur(10px);
}
.page-artists .ast-directory-heading__eyebrow {
    color: #8eead5;
}
.page-artists .ast-directory-heading h2 {
    color: #fff;
    font-size: clamp(25px, 2.8vw, 34px);
    letter-spacing: -.045em;
}
.page-artists .ast-directory-heading__main p {
    max-width: 580px;
    color: rgba(213, 225, 247, .7);
    font-size: 10px;
}
.page-artists .ast-directory-heading__roster {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 13px 10px 10px;
    background: rgba(4, 15, 36, .34);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
    backdrop-filter: blur(12px);
}
.page-artists .ast-directory-heading__avatars {
    display: flex;
    padding-left: 7px;
}
.page-artists .ast-directory-heading__avatars > span {
    position: relative;
    width: 38px;
    height: 38px;
    margin-left: -7px;
    overflow: hidden;
    background: linear-gradient(145deg, #dfe8ff, #d9cff8);
    border: 2px solid #173365;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}
.page-artists .ast-directory-heading__avatars img,
.page-artists .ast-directory-heading__avatars i {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.page-artists .ast-directory-heading__avatars img {
    z-index: 1;
    object-fit: cover;
}
.page-artists .ast-directory-heading__avatars i {
    display: grid;
    place-items: center;
    color: rgba(61, 70, 124, .46);
}
.page-artists .ast-directory-heading__avatars svg {
    width: 18px;
    height: 18px;
}
.page-artists .ast-directory-heading__total {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    color: rgba(201, 216, 242, .65);
    background: transparent;
    border: 0;
    border-radius: 0;
}
.page-artists .ast-directory-heading__total strong {
    color: #fff;
    font-size: 20px;
    line-height: 1;
}
.page-artists .ast-directory-heading__total span {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.page-artists .ast-directory-panel .ast-filter-bar {
    margin-top: 17px;
}

@media (max-width: 620px) {
    .page-artists .ast-directory-heading {
        min-height: 118px;
        margin: -16px -12px 0;
        padding: 21px 17px;
    }
    .page-artists .ast-directory-heading__icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }
    .page-artists .ast-directory-heading__main p {
        display: none;
    }
    .page-artists .ast-directory-heading__avatars {
        display: none;
    }
    .page-artists .ast-directory-heading__roster {
        padding: 8px 10px;
    }
}
@media (max-width: 420px) {
    .page-artists .ast-directory-heading__roster {
        display: none;
    }
}

/* =============================================================================
   ARTIST DIRECTORY GRID — PORTRAIT PROFILE CARDS
============================================================================= */
.page-artists .ast-directory-panel .ast-grid:not(.ast-grid--list) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card {
    min-width: 0;
    padding: 9px 9px 14px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    text-align: left;
    background: #fff;
    border: 1px solid #dfe5ed;
    border-radius: 16px;
    box-shadow: 0 7px 19px rgba(15, 23, 42, .06);
    transition: transform .23s ease, border-color .23s ease, box-shadow .23s ease;
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card:hover,
.page-artists .ast-grid:not(.ast-grid--list) .ast-card:focus-visible {
    transform: translateY(-5px);
    border-color: rgba(103, 76, 222, .38);
    box-shadow: 0 18px 34px rgba(25, 35, 66, .13);
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card__avatar-wrap {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 4.35;
    margin: 0;
    overflow: hidden;
    flex: none;
    background:
        radial-gradient(circle at 50% 23%, rgba(255, 255, 255, .92), transparent 18%),
        linear-gradient(145deg, #e9f2ff, #ebe6ff);
    border: 0;
    border-radius: 12px;
    box-shadow: none;
    transform: none;
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card:hover .ast-card__avatar-wrap {
    transform: none;
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card__avatar {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform .48s cubic-bezier(.2, .8, .2, 1);
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card:hover .ast-card__avatar {
    transform: scale(1.045);
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card__avatar-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: rgba(76, 84, 132, .43);
    background:
        radial-gradient(circle at 50% 26%, rgba(255, 255, 255, .86), transparent 20%),
        linear-gradient(145deg, #e8f1ff, #e9e4ff) !important;
    border-radius: 0;
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card__fallback-icon {
    display: block;
    width: 58px;
    height: 58px;
    opacity: .82;
    color: #7f82b6;
    filter: drop-shadow(0 9px 14px rgba(77, 67, 139, .12));
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card__avatar-wrap::after {
    content: "Artist";
    position: absolute;
    z-index: 4;
    top: 10px;
    left: 10px;
    padding: 5px 8px;
    color: rgba(255, 255, 255, .95);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    background: rgba(6, 18, 40, .62);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px;
    backdrop-filter: blur(8px);
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card__overlay {
    z-index: 3;
    display: block;
    opacity: 1;
    pointer-events: none;
    background: linear-gradient(transparent 48%, rgba(4, 12, 29, .48));
    border-radius: 0;
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card:hover .ast-card__overlay {
    background: linear-gradient(transparent 42%, rgba(4, 12, 29, .6));
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card__play-btn {
    position: absolute;
    right: 11px;
    bottom: 11px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translateY(7px);
    color: #fff;
    background: linear-gradient(135deg, #7047ed, #296bea);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    box-shadow: 0 9px 20px rgba(7, 15, 37, .3);
    transition: opacity .2s ease, transform .2s ease;
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card:hover .ast-card__play-btn,
.page-artists .ast-grid:not(.ast-grid--list) .ast-card:focus-visible .ast-card__play-btn {
    opacity: 1;
    transform: translateY(0);
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card__body {
    width: 100%;
    min-width: 0;
    padding: 13px 3px 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card__identity {
    width: 100%;
    align-items: flex-start;
    gap: 7px;
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card__name {
    width: 100%;
    justify-content: flex-start;
    color: #17213a;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card__identity-meta {
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card__genre {
    padding: 4px 7px;
    color: #6847dc;
    font-size: 7px;
    font-weight: 800;
    background: #f1edff;
    border: 1px solid #ded6ff;
    border-radius: 5px;
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card__country {
    overflow: hidden;
    color: #7d8798;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-artists .ast-grid:not(.ast-grid--list) :is(.ast-card__listeners, .ast-card__track-count, .ast-card__like-count) {
    width: 100%;
    margin-top: 9px;
    justify-content: flex-start;
    color: #7d8798;
    font-size: 8px;
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card__track-count,
.page-artists .ast-grid:not(.ast-grid--list) .ast-card__like-count {
    margin-top: 5px;
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card__profile-action {
    width: 100%;
    margin-top: 11px;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #6550c8;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-top: 1px solid #edf0f5;
}

@media (max-width: 1120px) {
    .page-artists .ast-directory-panel .ast-grid:not(.ast-grid--list) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 850px) {
    .page-artists .ast-directory-panel .ast-grid:not(.ast-grid--list) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 620px) {
    .page-artists .ast-directory-panel .ast-grid:not(.ast-grid--list) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
    }
    .page-artists .ast-grid:not(.ast-grid--list) .ast-card {
        padding: 7px 7px 11px;
        border-radius: 13px;
    }
    .page-artists .ast-grid:not(.ast-grid--list) .ast-card__body {
        padding-top: 10px;
    }
    .page-artists .ast-grid:not(.ast-grid--list) .ast-card__play-btn {
        width: 34px;
        height: 34px;
        opacity: 1;
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .page-artists .ast-grid:not(.ast-grid--list) :is(.ast-card, .ast-card__avatar, .ast-card__play-btn) {
        transition: none;
    }
}

/* =============================================================================
   EVENTS — LIVE EXPERIENCE REFINEMENT
============================================================================= */
.page-events .evt-hero {
    min-height: 285px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 10% 0%, rgba(225, 74, 255, .14), transparent 29%),
        radial-gradient(circle at 92% 108%, rgba(22, 170, 220, .31), transparent 47%),
        linear-gradient(118deg, #24104f 0%, #183a79 54%, #07506a 100%);
    border: 1px solid rgba(74, 99, 164, .52);
    border-radius: 20px;
    box-shadow: 0 22px 48px rgba(12, 27, 59, .19);
}
.page-events .evt-hero__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.page-events .evt-hero__backdrop img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    filter: saturate(.72) contrast(1.08);
    transform: scale(1.06);
    transition: opacity 1.25s ease, transform 8s linear;
}
.page-events .evt-hero__backdrop img.is-active {
    opacity: .18;
    transform: scale(1.02);
}
.page-events .evt-hero::before {
    z-index: 1;
    width: 470px;
    height: 470px;
    right: -235px;
    top: -270px;
    border-width: 58px;
    border-color: rgba(255, 255, 255, .035);
}
.page-events .evt-hero__waves {
    z-index: 1;
    opacity: .42;
}
.page-events .evt-hero__body {
    z-index: 2;
    min-height: 285px;
    padding: 35px clamp(35px, 5vw, 65px);
}
.page-events .evt-hero__left {
    max-width: 720px;
}
.page-events .evt-hero__badge {
    margin-bottom: 12px;
    color: #eadfff;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .15);
    backdrop-filter: blur(8px);
}
.page-events .evt-hero__title {
    max-width: 710px;
    color: #fff;
    font-size: clamp(35px, 4.6vw, 57px);
    line-height: 1.01;
    letter-spacing: -.058em;
}
.page-events .evt-hero__sub {
    max-width: 620px;
    margin-top: 13px;
    color: rgba(229, 235, 250, .75);
    font-size: 13px;
    line-height: 1.65;
}
.page-events .evt-hero__actions {
    margin-top: 23px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 17px;
}
.page-events .evt-hero__cta {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 17px;
    color: #30306e;
    font-size: 11px;
    font-weight: 800;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 11px 25px rgba(0, 0, 0, .2);
    transition: transform .2s ease, box-shadow .2s ease;
}
.page-events .evt-hero__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 29px rgba(0, 0, 0, .25);
}
.page-events .evt-hero__live-note {
    max-width: 280px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(206, 220, 242, .7);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.45;
}
.page-events .evt-hero__live-note i {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #64e2c7;
    box-shadow: 0 0 0 4px rgba(100, 226, 199, .12);
}
.page-events .evt-hero__aside {
    min-width: 355px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
}
.page-events .evt-hero__visual {
    width: 270px;
    height: 132px;
    overflow: visible;
}
.page-events .evt-hero__visual-ring {
    width: 155px;
    height: 155px;
    right: 2px;
    top: -11px;
    border-color: rgba(255, 255, 255, .11);
}
.page-events .evt-hero__ticket {
    position: absolute;
    z-index: 1;
    width: 185px;
    height: 104px;
    left: 5px;
    top: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 15px 16px;
    color: #fff;
    background:
        radial-gradient(circle at 15% 12%, rgba(255, 255, 255, .18), transparent 22%),
        linear-gradient(145deg, #7142db, #275fc1);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 11px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .29);
    transform: rotate(-6deg);
}
.page-events .evt-hero__ticket::before,
.page-events .evt-hero__ticket::after {
    content: "";
    position: absolute;
    width: 19px;
    height: 19px;
    right: 24px;
    background: #153064;
    border-radius: 50%;
}
.page-events .evt-hero__ticket::before {
    top: -10px;
}
.page-events .evt-hero__ticket::after {
    bottom: -10px;
}
.page-events .evt-hero__ticket-edge {
    position: absolute;
    right: 33px;
    top: 0;
    bottom: 0;
    border-left: 1px dashed rgba(255, 255, 255, .38);
}
.page-events .evt-hero__ticket small {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .17em;
}
.page-events .evt-hero__ticket strong {
    margin-top: 4px;
    font-size: 17px;
    letter-spacing: .04em;
}
.page-events .evt-hero__ticket-code {
    margin-top: 7px;
    color: rgba(233, 239, 255, .67);
    font-size: 6px;
    font-weight: 750;
    letter-spacing: .1em;
}
.page-events .evt-hero__calendar {
    z-index: 3;
    right: 4px;
    top: 30px;
    width: 76px;
    height: 76px;
    border-radius: 13px;
    box-shadow: 0 15px 28px rgba(0, 0, 0, .28);
    transform: rotate(6deg);
}
.page-events .evt-hero__stats {
    width: 270px;
    padding: 10px 8px;
    background: rgba(4, 17, 39, .34);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 13px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
    backdrop-filter: blur(10px);
}

.page-events .evt-filter-bar {
    margin-top: 14px;
    padding: 8px 12px;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .055);
}
.page-events .evt-filter-bar__row {
    min-height: 38px;
    gap: 15px;
}
.page-events .evt-filter-bar__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-right: 14px;
    color: #5f49cb;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    border-right: 1px solid #e1e6ee;
}
.page-events .evt-jump-nav {
    flex: 1;
}
.page-events .evt-jump-nav a {
    padding: 7px 11px;
    color: #677287;
    font-size: 10px;
    font-weight: 750;
    border-radius: 8px;
}
.page-events .evt-jump-nav a:hover {
    color: #5f43cf;
    background: #f2efff;
}
.page-events .evt-results-count {
    margin-left: auto;
}
.page-events :is(.evt-featured, .evt-upcoming, .evt-upcoming-empty, .evt-past) {
    border-radius: 18px;
}
.page-events .evt-upcoming-empty {
    margin-top: 20px;
    box-shadow: 0 11px 29px rgba(15, 23, 42, .07);
}
.page-events .evt-past {
    margin-top: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, .87);
    border: 1px solid #dfe5ee;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
}

@media (max-width: 900px) {
    .page-events .evt-hero__aside {
        min-width: 285px;
    }
    .page-events .evt-hero__visual {
        transform: scale(.88);
        transform-origin: right center;
    }
}
@media (max-width: 700px) {
    .page-events .evt-hero {
        min-height: auto;
    }
    .page-events .evt-hero__body {
        min-height: auto;
        padding: 30px 23px;
        flex-direction: column;
        text-align: center;
    }
    .page-events .evt-hero__actions {
        justify-content: center;
    }
    .page-events .evt-hero__aside {
        width: 100%;
        min-width: 0;
    }
    .page-events .evt-hero__visual {
        margin-inline: auto;
        transform: none;
    }
    .page-events .evt-hero__stats {
        max-width: 340px;
        margin-inline: auto;
    }
}
@media (max-width: 500px) {
    .page-events .evt-hero {
        border-radius: 17px;
    }
    .page-events .evt-hero__title {
        font-size: 35px;
    }
    .page-events .evt-hero__live-note {
        display: none;
    }
    .page-events .evt-filter-bar__label {
        display: none;
    }
    .page-events .evt-filter-bar__row {
        flex-wrap: nowrap;
    }
    .page-events .evt-jump-nav {
        overflow-x: auto;
        scrollbar-width: none;
    }
    .page-events .evt-jump-nav::-webkit-scrollbar {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .page-events .evt-hero__cta {
        transition: none;
    }
    .page-events .evt-hero__backdrop img {
        transition: none;
    }
}

/* Final cascade lock for the genre discovery treatment. */
.page-genres .gnr-hero {
    min-height: 245px;
    color: #fff;
    background:
        radial-gradient(circle at 16% 18%, rgba(139, 92, 246, .68), transparent 31%),
        linear-gradient(125deg, #2e1065 0%, #172554 55%, #07516c 100%);
    border-color: rgba(255, 255, 255, .12);
}
.page-genres .gnr-hero::after {
    background:
        radial-gradient(circle at 78% 50%, transparent 0 104px, rgba(255, 255, 255, .055) 105px 106px, transparent 107px),
        linear-gradient(90deg, transparent, rgba(2, 6, 23, .1));
}
.page-genres .gnr-hero__waves {
    display: block;
}
.page-genres .gnr-hero__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    min-height: 245px;
    padding: 32px 42px;
}
.page-genres .gnr-hero__badge {
    color: #ddd6fe;
    background: rgba(255, 255, 255, .1);
}
.page-genres .gnr-hero__title {
    color: #fff;
    font-size: clamp(42px, 5vw, 64px);
}
.page-genres .gnr-hero__sub {
    color: rgba(226, 232, 240, .72);
}
.page-genres .gnr-hero__stats {
    display: flex;
    position: absolute;
    right: 22px;
    bottom: 18px;
    color: #fff;
    background: rgba(3, 12, 35, .46);
}
.page-genres .gnr-card {
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-end;
}
.page-genres .gnr-card__info {
    align-items: flex-start;
    width: 100%;
    text-align: left;
}

@media (max-width: 760px) {
    .page-genres .gnr-hero__body {
        display: flex;
        min-height: 225px;
        padding: 29px 25px;
    }
    .page-genres .gnr-hero__visual {
        display: none;
    }
}

/* Genre detail hero — editorial record identity. */
.page-genres-detail .gdet-hero {
    min-height: 330px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 24px;
    background:
        radial-gradient(circle at 12% 12%, rgba(139, 92, 246, .55), transparent 29%),
        linear-gradient(125deg, #2c0e64 0%, #172554 55%, #07516c 100%);
    box-shadow: 0 24px 58px rgba(15, 23, 42, .2);
    isolation: isolate;
}
.page-genres-detail .gdet-hero::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 82% 45%, transparent 0 120px, rgba(255, 255, 255, .05) 121px 122px, transparent 123px),
        linear-gradient(90deg, transparent 40%, rgba(2, 6, 23, .08));
    content: "";
}
.page-genres-detail .gdet-hero::after {
    display: none;
}
.page-genres-detail .gdet-hero__waves {
    z-index: 0;
    opacity: .48;
}
.page-genres-detail .gdet-hero__body {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 355px;
    align-items: center;
    gap: 42px;
    min-height: 330px;
    padding: 32px 48px;
    box-sizing: border-box;
}
.page-genres-detail .gdet-hero__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.page-genres-detail .gdet-breadcrumb {
    margin-bottom: 18px;
    color: rgba(226, 232, 240, .55);
    font-size: 10px;
}
.page-genres-detail .gdet-hero__badge {
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    color: #ddd6fe;
    background: rgba(255, 255, 255, .1);
}
.page-genres-detail .gdet-info__title {
    max-width: 700px;
    color: #fff;
    font-size: clamp(50px, 6vw, 78px);
    line-height: .93;
    letter-spacing: -.065em;
    text-transform: capitalize;
}
.page-genres-detail .gdet-info__desc {
    max-width: 640px;
    margin-top: 13px;
    color: rgba(226, 232, 240, .7);
    font-size: 13px;
    line-height: 1.6;
}
.page-genres-detail .gdet-back-btn {
    min-height: 39px;
    margin-top: 20px;
    padding: 9px 14px;
    border-color: rgba(255, 255, 255, .18);
    border-radius: 11px;
    background: rgba(255, 255, 255, .09);
    font-size: 10px;
    backdrop-filter: blur(10px);
}
.page-genres-detail .gdet-hero__aside {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 12px;
}
.page-genres-detail .gdet-hero__visual {
    position: relative;
    width: 300px;
    height: 205px;
}
.page-genres-detail .gdet-hero__disc {
    position: absolute;
    top: 15px;
    right: 0;
    width: 185px;
    height: 185px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #e9d5ff 0 4px, #7c3aed 5px 23px, #0b1120 24px 29px, transparent 30px),
        repeating-radial-gradient(circle, #0b1120 0 7px, #1e293b 8px 9px);
    box-shadow: 0 25px 50px rgba(2, 6, 23, .36);
}
.page-genres-detail .gdet-hero__disc::after {
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 50%;
    content: "";
}
.page-genres-detail .gdet-hero__sleeve {
    position: absolute;
    top: 3px;
    left: 4px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 185px;
    height: 185px;
    padding: 21px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 18px;
    color: #fff;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .2), transparent 36%),
        linear-gradient(145deg, #8b5cf6, #315bec 58%, #153d76);
    box-shadow: 0 27px 55px rgba(2, 6, 23, .38);
    box-sizing: border-box;
    transform: rotate(-4deg);
}
.page-genres-detail .gdet-hero__sleeve::after {
    position: absolute;
    right: -42px;
    bottom: -44px;
    width: 125px;
    height: 125px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 0 15px rgba(255, 255, 255, .035), 0 0 0 31px rgba(255, 255, 255, .022);
}
.page-genres-detail .gdet-hero__sleeve small,
.page-genres-detail .gdet-hero__sleeve > span {
    position: relative;
    z-index: 1;
    font-size: 6px;
    font-weight: 850;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.page-genres-detail .gdet-hero__sleeve strong {
    position: relative;
    z-index: 1;
    max-width: 145px;
    margin-top: 30px;
    font-size: 20px;
    line-height: .9;
    letter-spacing: -.055em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.page-genres-detail .gdet-hero__sleeve > span {
    margin-top: 6px;
    color: rgba(255, 255, 255, .64);
}
.page-genres-detail .gdet-hero__sleeve-bars {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 24px;
    margin-top: auto;
}
.page-genres-detail .gdet-hero__sleeve-bars b {
    width: 3px;
    height: 38%;
    border-radius: 99px;
    background: rgba(255, 255, 255, .82);
}
.page-genres-detail .gdet-hero__sleeve-bars b:nth-child(2),
.page-genres-detail .gdet-hero__sleeve-bars b:nth-child(4) { height: 72%; }
.page-genres-detail .gdet-hero__sleeve-bars b:nth-child(3) { height: 100%; }
.page-genres-detail .gdet-hero__stats {
    position: static;
    width: 300px;
    padding: 10px 8px;
    border-color: rgba(255, 255, 255, .13);
    border-radius: 12px;
    background: rgba(3, 12, 35, .43);
    box-sizing: border-box;
}
.page-genres-detail .gdet-hstat {
    flex: 1;
    padding-inline: 10px;
}
.page-genres-detail .gdet-hstat__value {
    font-size: 21px;
}
.page-genres-detail .gdet-hstat__label {
    font-size: 7px;
}

@media (max-width: 980px) {
    .page-genres-detail .gdet-hero__body {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 24px;
        padding-inline: 35px;
    }
    .page-genres-detail .gdet-hero__visual,
    .page-genres-detail .gdet-hero__stats {
        width: 270px;
    }
    .page-genres-detail .gdet-hero__visual {
        transform: scale(.9);
    }
}

@media (max-width: 760px) {
    .page-genres-detail .gdet-hero {
        min-height: 310px;
        border-radius: 19px;
    }
    .page-genres-detail .gdet-hero__body {
        display: flex;
        align-items: flex-end;
        min-height: 310px;
        padding: 27px 24px;
    }
    .page-genres-detail .gdet-hero__aside {
        display: none;
    }
    .page-genres-detail .gdet-info__title {
        font-size: clamp(43px, 12vw, 62px);
    }
}

/* Event ticket checkout and verified receipt. */
.page-event-detail .evtd-checkout {
    margin: 0 20px;
    padding: 14px;
    border: 1px solid #e5e9f1;
    border-radius: 14px;
    background: #f8faff;
}
.page-event-detail .evtd-checkout > label {
    display: block;
    margin-bottom: 8px;
    color: #667085;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.page-event-detail .evtd-checkout__row {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 8px;
}
.page-event-detail .evtd-checkout__quantity {
    width: 100%;
    height: 38px;
    padding: 0 5px;
    border: 1px solid #dce2ec;
    border-radius: 9px;
    color: #243047;
    background: #fff;
    font: 750 12px/1 inherit;
    cursor: pointer;
    text-align: center;
}
.page-event-detail .evtd-ticket-btn--checkout {
    min-height: 38px;
    margin: 0;
    padding: 7px 10px;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.2;
    white-space: nowrap;
}
.page-event-detail .evtd-ticket-btn--checkout:disabled {
    cursor: wait;
    opacity: .72;
}
.page-event-detail .evtd-checkout__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0 0;
    color: #8a95a8;
    font-size: 8.5px;
}
.page-event-detail .evtd-checkout__total strong {
    color: #4b5568;
    font-size: 9px;
}
.page-event-detail .evtd-ticket-external {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    margin: 10px 20px 0;
    color: #657188;
    font-size: 9px;
    font-weight: 750;
    text-decoration: none;
}
.page-event-detail .evtd-ticket-external:hover {
    color: #6d28d9;
}
.page-event-detail .evtd-receipts {
    margin-top: 13px;
    padding: 14px;
    border: 1px solid rgba(218, 225, 236, .94);
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
}
.page-event-detail .evtd-receipts__label {
    margin: 0 0 8px;
    color: #7c3aed;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.page-event-detail .evtd-receipts a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    color: #4b5568;
    background: #f7f9fc;
    text-decoration: none;
}
.page-event-detail .evtd-receipts a + a {
    margin-top: 6px;
}
.page-event-detail .evtd-receipts a:hover {
    color: #6d28d9;
    background: #f4efff;
}
.page-event-detail .evtd-receipts strong,
.page-event-detail .evtd-receipts small {
    display: block;
}
.page-event-detail .evtd-receipts strong {
    font-size: 10px;
}
.page-event-detail .evtd-receipts small {
    margin-top: 2px;
    color: #94a0b2;
    font-size: 7.5px;
}

.page-ticket-receipt .content {
    padding: 26px 32px 54px;
}
.tkt-receipt {
    width: min(920px, 100%);
    margin: 0 auto;
}
.tkt-receipt__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.tkt-receipt__toolbar a,
.tkt-receipt__toolbar button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid #dfe4ec;
    border-radius: 11px;
    color: #526077;
    background: #fff;
    font: 750 10px/1 inherit;
    text-decoration: none;
    cursor: pointer;
}
.tkt-receipt__toolbar :is(a, button):hover {
    border-color: #cfc3ef;
    color: #6d28d9;
}
.tkt-receipt__paper {
    overflow: hidden;
    border: 1px solid rgba(218, 225, 236, .96);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .11);
}
.tkt-receipt__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 34px 38px;
    color: #fff;
    background:
        radial-gradient(circle at 90% 0%, rgba(56, 189, 248, .28), transparent 32%),
        linear-gradient(125deg, #321074, #1d3c8e 58%, #087493);
}
.tkt-receipt__header span {
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .17em;
    text-transform: uppercase;
}
.tkt-receipt__header h1 {
    margin: 8px 0 7px;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -.05em;
}
.tkt-receipt__header p {
    margin: 0;
    color: rgba(226, 232, 240, .68);
    font-size: 10px;
}
.tkt-receipt__paid {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(167, 243, 208, .2);
    border-radius: 10px;
    color: #d1fae5;
    background: rgba(16, 185, 129, .14);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.tkt-receipt__paid i,
.tkt-receipt__mark i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .11);
}
.tkt-receipt__event {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: 22px;
    padding: 27px 38px;
    border-bottom: 1px solid #edf0f5;
    background: linear-gradient(110deg, #fff, #fbfaff 60%, #f5f9ff);
}
.tkt-receipt__date {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 82px;
    height: 82px;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(145deg, #7c3aed, #2563eb);
    box-shadow: 0 13px 28px rgba(79, 70, 229, .2);
}
.tkt-receipt__date span {
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.tkt-receipt__date strong {
    font-size: 34px;
    line-height: .95;
}
.tkt-receipt__event > div:last-child > span {
    color: #7c3aed;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.tkt-receipt__event h2 {
    margin: 6px 0 8px;
    color: #172033;
    font-size: 24px;
    line-height: 1.05;
    letter-spacing: -.04em;
}
.tkt-receipt__event p {
    margin: 2px 0;
    color: #6e7a90;
    font-size: 10px;
}
.tkt-receipt__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 38px;
    padding: 24px 38px;
}
.tkt-receipt__details div {
    display: grid;
    grid-template-columns: 125px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #edf0f5;
}
.tkt-receipt__details span {
    color: #94a0b2;
    font-size: 8px;
    font-weight: 750;
    text-transform: uppercase;
}
.tkt-receipt__details strong {
    overflow-wrap: anywhere;
    color: #3e4a60;
    font-size: 9.5px;
}
.tkt-receipt__summary {
    margin: 0 38px;
    overflow: hidden;
    border: 1px solid #e4e8ef;
    border-radius: 14px;
}
.tkt-receipt__summary-head,
.tkt-receipt__summary-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 130px 130px;
    gap: 12px;
    align-items: center;
    padding: 12px 15px;
}
.tkt-receipt__summary-head {
    color: #8a95a8;
    background: #f6f8fb;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}
.tkt-receipt__summary-row {
    color: #4b566b;
    font-size: 10px;
}
.tkt-receipt__total {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    padding: 15px;
    border-top: 1px solid #e9edf3;
    background: #fbfcfe;
}
.tkt-receipt__total span {
    color: #7c8798;
    font-size: 9px;
    font-weight: 750;
}
.tkt-receipt__total strong {
    color: #6d28d9;
    font-size: 17px;
}
.tkt-receipt__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 25px 38px 31px;
}
.tkt-receipt__mark {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #31715d;
    font-size: 9px;
}
.tkt-receipt__footer p {
    max-width: 490px;
    margin: 0;
    color: #929cad;
    font-size: 8.5px;
    line-height: 1.5;
    text-align: right;
}

@media (max-width: 760px) {
    .page-ticket-receipt .content {
        padding: 16px 14px 42px;
    }
    .tkt-receipt__header,
    .tkt-receipt__event,
    .tkt-receipt__details,
    .tkt-receipt__footer {
        padding-inline: 22px;
    }
    .tkt-receipt__details {
        grid-template-columns: 1fr;
    }
    .tkt-receipt__summary {
        margin-inline: 22px;
    }
    .tkt-receipt__summary-head {
        display: none;
    }
    .tkt-receipt__summary-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .tkt-receipt__summary-row span:first-of-type {
        display: none;
    }
    .tkt-receipt__footer {
        align-items: flex-start;
        flex-direction: column;
    }
    .tkt-receipt__footer p {
        text-align: left;
    }
}

@media print {
    .page-ticket-receipt :is(.sidebar, .topbar, .player, .tkt-receipt__toolbar) {
        display: none !important;
    }
    .page-ticket-receipt .main-wrapper,
    .page-ticket-receipt .content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .tkt-receipt {
        width: 100%;
    }
    .tkt-receipt__paper {
        border: 0;
        box-shadow: none;
    }
}

/* Event detail dossier — editorial structure beneath the hero. */
.page-event-detail .evtd-guide {
    padding-inline: 18px;
    border-color: rgba(207, 214, 226, .9);
    background:
        linear-gradient(90deg, rgba(248, 246, 255, .92), rgba(255, 255, 255, .97) 34%),
        #fff;
}
.page-event-detail .evtd-guide a {
    position: relative;
    padding-inline: 2px;
}
.page-event-detail .evtd-guide a::after {
    position: absolute;
    right: 0;
    bottom: 2px;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, #7c3aed, #2563eb);
    content: "";
    opacity: 0;
    transform: scaleX(.4);
    transition: opacity .2s ease, transform .2s ease;
}
.page-event-detail .evtd-guide a:hover::after {
    opacity: 1;
    transform: scaleX(1);
}
.page-event-detail .evtd-body {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    padding-top: 26px;
}
.page-event-detail .evtd-main {
    display: grid;
    gap: 22px;
}
.page-event-detail .evtd-overview-panel {
    position: relative;
    padding: 30px;
    overflow: hidden;
    border: 1px solid rgba(105, 126, 196, .24);
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 100% 0%, rgba(56, 189, 248, .16), transparent 34%),
        radial-gradient(circle at 8% 100%, rgba(124, 58, 237, .2), transparent 38%),
        linear-gradient(135deg, #101a38, #19265a 61%, #123b61);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .14);
}
.page-event-detail .evtd-overview-panel::after {
    position: absolute;
    top: -70px;
    right: -55px;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    box-shadow:
        0 0 0 30px rgba(255, 255, 255, .025),
        0 0 0 65px rgba(255, 255, 255, .018);
    content: "";
    pointer-events: none;
}
.page-event-detail .evtd-overview-panel__head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}
.page-event-detail .evtd-overview-panel .evtd-section-kicker {
    color: #a78bfa;
}
.page-event-detail .evtd-overview-panel__head h2 {
    margin: 5px 0 0;
    color: #fff;
    font-size: clamp(25px, 3vw, 36px);
    font-weight: 850;
    line-height: 1;
    letter-spacing: -.045em;
}
.page-event-detail .evtd-overview-panel__edition {
    position: relative;
    z-index: 1;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    color: rgba(226, 232, 240, .58);
    background: rgba(255, 255, 255, .045);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.page-event-detail .evtd-overview-panel__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 34px;
    margin-top: 26px;
}
.page-event-detail .evtd-overview-panel__story {
    padding-right: 32px;
    border-right: 1px solid rgba(255, 255, 255, .1);
}
.page-event-detail .evtd-overview-panel__story p {
    max-width: 660px;
    margin: 0;
    color: rgba(235, 241, 255, .75);
    font-size: 13px;
    line-height: 1.8;
    white-space: pre-line;
}
.page-event-detail .evtd-overview-facts {
    display: grid;
    gap: 13px;
    margin: 0;
}
.page-event-detail .evtd-overview-facts div {
    display: grid;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.page-event-detail .evtd-overview-facts div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.page-event-detail .evtd-overview-facts dt {
    color: rgba(196, 181, 253, .7);
    font-size: 7.5px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.page-event-detail .evtd-overview-facts dd {
    margin: 0;
    color: #f8fafc;
    font-size: 11px;
    font-weight: 750;
}
.page-event-detail .evtd-lineup {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(140px, .8fr) auto;
    align-items: center;
    gap: 18px;
    margin-top: 27px;
    padding: 14px 15px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 15px;
    background: rgba(255, 255, 255, .065);
    backdrop-filter: blur(12px);
}
.page-event-detail .evtd-lineup__identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}
.page-event-detail .evtd-lineup__avatar {
    display: grid;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 13px;
    color: #fff;
    background:
        radial-gradient(circle at 72% 25%, rgba(255, 255, 255, .3), transparent 23%),
        linear-gradient(145deg, #8b5cf6, #2563eb);
    box-shadow: 0 10px 24px rgba(2, 6, 23, .24);
    font-size: 18px;
    font-weight: 800;
    place-items: center;
}
.page-event-detail .evtd-lineup :is(.evtd-lineup__identity > span:last-child, .evtd-lineup__format) {
    display: grid;
    min-width: 0;
    gap: 3px;
}
.page-event-detail .evtd-lineup small {
    color: rgba(196, 181, 253, .72);
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.page-event-detail .evtd-lineup strong {
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-event-detail .evtd-lineup__identity strong {
    font-size: 16px;
}
.page-event-detail .evtd-lineup__status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid rgba(110, 231, 183, .13);
    border-radius: 9px;
    color: #b7f7dc;
    background: rgba(16, 185, 129, .09);
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
}
.page-event-detail .evtd-lineup__status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .1);
}
.page-event-detail .evtd-schedule,
.page-event-detail .evtd-venue,
.page-event-detail .evtd-essentials {
    border: 1px solid rgba(213, 220, 231, .92);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .065);
}
.page-event-detail .evtd-schedule {
    padding: 27px 28px 23px;
}
.page-event-detail .evtd-section-heading {
    align-items: center;
    margin-bottom: 20px;
}
.page-event-detail .evtd-section-heading h2 {
    font-size: 24px;
}
.page-event-detail .evtd-section-heading__date {
    padding: 7px 10px;
    border: 1px solid #e6e9f0;
    border-radius: 9px;
    color: #526079;
    background: #f8f9fc;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.page-event-detail .evtd-times {
    position: relative;
    gap: 0;
}
.page-event-detail .evtd-times::before {
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 16px;
    width: 1px;
    background: linear-gradient(#8b5cf6, #3b82f6);
    content: "";
}
.page-event-detail .evtd-time-item {
    position: relative;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 14px;
    min-height: 65px;
    padding: 11px 14px 11px 0;
    border: 0;
    border-bottom: 1px solid #edf0f5;
    border-radius: 0;
    background: transparent;
}
.page-event-detail .evtd-time-item:last-child {
    border-bottom: 0;
}
.page-event-detail .evtd-time-item__marker {
    position: relative;
    z-index: 1;
    display: grid;
    width: 34px;
    height: 34px;
    border: 5px solid #fff;
    border-radius: 50%;
    background: linear-gradient(145deg, #8b5cf6, #2563eb);
    place-items: center;
    box-shadow: 0 0 0 1px #ddd9f5;
}
.page-event-detail .evtd-time-item__marker i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
}
.page-event-detail .evtd-time-item__marker b {
    position: absolute;
    left: 43px;
    top: 50%;
    color: #9b88d6;
    font-size: 7px;
    letter-spacing: .08em;
    transform: translateY(-50%);
}
.page-event-detail .evtd-time-item__copy {
    padding-left: 22px;
}
.page-event-detail .evtd-time-item__label {
    color: #202b40;
    font-size: 12px;
    font-weight: 800;
}
.page-event-detail .evtd-time-item__note {
    margin-top: 2px;
    color: #8a96a8;
    font-size: 9px;
}
.page-event-detail .evtd-time-item__val {
    padding: 7px 10px;
    border-radius: 9px;
    color: #6534d8;
    background: #f5f1ff;
    font-size: 13px;
    font-weight: 850;
}
.page-event-detail .evtd-schedule__note {
    margin: 14px 0 0;
    padding-top: 13px;
    border-top: 1px solid #edf0f4;
    color: #8c97a9;
    font-size: 8.5px;
    line-height: 1.55;
}
.page-event-detail .evtd-venue {
    display: grid;
    grid-template-columns: 205px minmax(0, 1fr) 70px;
    align-items: stretch;
    gap: 23px;
    min-height: 178px;
    padding: 0;
    overflow: hidden;
}
.page-event-detail .evtd-venue__map {
    position: relative;
    min-height: 178px;
    overflow: hidden;
    background:
        linear-gradient(35deg, transparent 48%, rgba(91, 114, 177, .12) 49% 51%, transparent 52%),
        linear-gradient(145deg, transparent 47%, rgba(91, 114, 177, .1) 48% 50%, transparent 51%),
        radial-gradient(circle at 30% 28%, rgba(124, 58, 237, .1), transparent 32%),
        #eef3fb;
    background-size: 75px 75px, 90px 90px, auto, auto;
}
.page-event-detail .evtd-venue__map::before,
.page-event-detail .evtd-venue__map::after {
    position: absolute;
    border: 1px solid rgba(71, 94, 155, .14);
    border-radius: 50%;
    content: "";
}
.page-event-detail .evtd-venue__map::before {
    width: 145px;
    height: 145px;
    left: -50px;
    top: 28px;
}
.page-event-detail .evtd-venue__map::after {
    width: 95px;
    height: 95px;
    right: -30px;
    top: -23px;
}
.page-event-detail .evtd-venue__route {
    position: absolute;
    height: 2px;
    border-radius: 99px;
    background: rgba(80, 103, 162, .16);
    transform-origin: left center;
}
.page-event-detail .evtd-venue__route--one {
    top: 42px;
    left: -10px;
    width: 245px;
    transform: rotate(22deg);
}
.page-event-detail .evtd-venue__route--two {
    top: 140px;
    left: 15px;
    width: 220px;
    transform: rotate(-28deg);
}
.page-event-detail .evtd-venue__pin {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 48px;
    height: 48px;
    border: 6px solid rgba(255, 255, 255, .88);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #7c3aed, #2563eb);
    box-shadow: 0 10px 28px rgba(79, 70, 229, .28);
    transform: translate(-50%, -50%);
    place-items: center;
}
.page-event-detail .evtd-venue__copy {
    align-self: center;
    min-width: 0;
    padding-block: 24px;
}
.page-event-detail .evtd-venue__copy h2 {
    overflow: hidden;
    font-size: 21px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-event-detail .evtd-venue__copy > span {
    display: block;
    margin-top: 4px;
    color: #6e7b90;
    font-size: 10px;
    font-weight: 750;
}
.page-event-detail .evtd-venue__copy > p:last-child {
    max-width: 440px;
    margin: 12px 0 0;
    color: #8a95a6;
    font-size: 8.5px;
    line-height: 1.55;
}
.page-event-detail .evtd-venue__date {
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 52px;
    height: 72px;
    margin-right: 18px;
    border: 1px solid #e0e5ee;
    border-radius: 13px;
    background: #f8faff;
}
.page-event-detail .evtd-venue__date small,
.page-event-detail .evtd-venue__date span {
    color: #7a879b;
    font-size: 6.5px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.page-event-detail .evtd-venue__date strong {
    color: #6633d6;
    font-size: 24px;
    line-height: 1;
}
.page-event-detail .evtd-essentials {
    padding: 27px 28px 28px;
}
.page-event-detail .evtd-essentials__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.page-event-detail .evtd-essentials article {
    position: relative;
    min-width: 0;
    padding: 17px 15px;
    overflow: hidden;
    border: 1px solid #e7eaf1;
    border-radius: 14px;
    background: linear-gradient(145deg, #fbfcff, #f7f8fc);
}
.page-event-detail .evtd-essentials article > span {
    position: absolute;
    top: 10px;
    right: 11px;
    color: #d6dbea;
    font-size: 8px;
    font-weight: 850;
}
.page-event-detail .evtd-essentials article svg {
    color: #7447ff;
}
.page-event-detail .evtd-essentials h3 {
    margin: 12px 0 6px;
    color: #273248;
    font-size: 11px;
}
.page-event-detail .evtd-essentials article p {
    margin: 0;
    color: #8490a3;
    font-size: 8.5px;
    line-height: 1.55;
}
.page-event-detail .evtd-ticket-aside {
    top: 92px;
}
.page-event-detail .evtd-ticket-card {
    border-radius: 21px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .12);
}

@media (max-width: 1040px) {
    .page-event-detail .evtd-overview-panel__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .page-event-detail .evtd-overview-panel__story {
        padding: 0 0 20px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }
    .page-event-detail .evtd-overview-facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .page-event-detail .evtd-overview-facts div {
        padding: 0 12px 0 0;
        border-right: 1px solid rgba(255, 255, 255, .09);
        border-bottom: 0;
    }
    .page-event-detail .evtd-overview-facts div:last-child {
        border-right: 0;
    }
    .page-event-detail .evtd-lineup {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .page-event-detail .evtd-lineup__format {
        display: none;
    }
    .page-event-detail .evtd-venue {
        grid-template-columns: 160px minmax(0, 1fr) 66px;
    }
}

@media (max-width: 760px) {
    .page-event-detail .evtd-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }
    .page-event-detail .evtd-main,
    .page-event-detail .evtd-ticket-aside {
        width: 100%;
        min-width: 0;
    }
    .page-event-detail .evtd-ticket-aside {
        position: static;
    }
    .page-event-detail .evtd-overview-panel {
        padding: 24px 21px;
        border-radius: 19px;
    }
    .page-event-detail .evtd-overview-panel__edition {
        display: none;
    }
    .page-event-detail .evtd-overview-panel__grid {
        margin-top: 21px;
    }
    .page-event-detail .evtd-lineup {
        grid-template-columns: 1fr;
    }
    .page-event-detail .evtd-lineup__status {
        justify-self: start;
        margin-left: 58px;
    }
    .page-event-detail .evtd-schedule,
    .page-event-detail .evtd-essentials {
        padding: 23px 20px;
    }
    .page-event-detail .evtd-venue {
        grid-template-columns: 120px minmax(0, 1fr);
        min-height: 160px;
    }
    .page-event-detail .evtd-venue__map {
        min-height: 160px;
    }
    .page-event-detail .evtd-venue__date {
        display: none;
    }
    .page-event-detail .evtd-venue__copy {
        padding-right: 18px;
    }
}

@media (max-width: 520px) {
    .page-event-detail .evtd-overview-facts {
        grid-template-columns: 1fr;
    }
    .page-event-detail .evtd-overview-facts div {
        padding: 0 0 10px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .09);
    }
    .page-event-detail .evtd-overview-facts div:last-child {
        border-bottom: 0;
    }
    .page-event-detail .evtd-time-item {
        grid-template-columns: 32px minmax(0, 1fr);
    }
    .page-event-detail .evtd-time-item__val {
        grid-column: 2;
        justify-self: start;
        margin-left: 20px;
    }
    .page-event-detail .evtd-venue {
        grid-template-columns: 1fr;
    }
    .page-event-detail .evtd-venue__map {
        min-height: 125px;
    }
    .page-event-detail .evtd-venue__copy {
        padding: 3px 20px 22px;
    }
    .page-event-detail .evtd-essentials__grid {
        grid-template-columns: 1fr;
    }
}

/* Artist profile — premium catalog presentation. */
.page-artist-detail .content {
    padding: 24px 32px 54px;
}
.page-artist-detail .adet-hero {
    min-height: 390px;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 24px;
    background:
        radial-gradient(circle at 78% 24%, rgba(96, 165, 250, .36), transparent 30%),
        radial-gradient(circle at 14% 110%, rgba(139, 92, 246, .42), transparent 42%),
        linear-gradient(122deg, #5123bc 0%, #293eb2 48%, #087ca0 100%);
    background-position: center;
    background-size: cover;
    box-shadow: 0 26px 58px rgba(26, 35, 92, .2);
    isolation: isolate;
}
.page-artist-detail .adet-hero::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(22, 12, 70, .28), transparent 60%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 72px);
    content: "";
}
.page-artist-detail .adet-hero::after {
    position: absolute;
    right: -95px;
    bottom: -170px;
    z-index: 0;
    width: 410px;
    height: 410px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    box-shadow:
        0 0 0 45px rgba(255, 255, 255, .022),
        0 0 0 95px rgba(255, 255, 255, .016);
    content: "";
}
.page-artist-detail .adet-hero__scrim {
    z-index: 0;
    background: linear-gradient(90deg, rgba(29, 14, 87, .18), rgba(3, 35, 83, .16));
}
.page-artist-detail .adet-hero--has-photo .adet-hero__scrim {
    background:
        linear-gradient(90deg, rgba(28, 15, 78, .88), rgba(19, 42, 103, .76) 58%, rgba(2, 85, 112, .68));
    backdrop-filter: blur(8px);
}
.page-artist-detail .adet-hero__inner {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) 270px;
    align-items: center;
    gap: 34px;
    min-height: 390px;
    padding: 38px 48px;
}
.page-artist-detail .adet-avatar-wrap {
    width: 148px;
    height: 148px;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 24px 55px rgba(3, 10, 39, .28);
}
.page-artist-detail :is(.adet-avatar, .adet-avatar-fallback) {
    inset: 7px;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    border: 1px solid rgba(255, 255, 255, .24);
}
.page-artist-detail .adet-avatar-fallback {
    color: #e9e7ff;
    background:
        radial-gradient(circle at 65% 22%, rgba(96, 165, 250, .28), transparent 25%),
        radial-gradient(circle at center, #1e3a8a 0 13%, #14265d 14% 55%, #090f2f 56%);
}
.page-artist-detail .adet-info {
    position: relative;
    z-index: 2;
    align-items: flex-start;
    min-width: 0;
}
.page-artist-detail .adet-breadcrumb {
    margin-bottom: 24px;
    color: rgba(232, 236, 255, .58);
    font-size: 10px;
}
.page-artist-detail .adet-info__eyebrow {
    margin: 0 0 7px;
    color: #c4b5fd;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.page-artist-detail .adet-info__name {
    margin-bottom: 13px;
    font-size: clamp(43px, 5vw, 67px);
    font-weight: 900;
    line-height: .94;
    letter-spacing: -.06em;
    text-wrap: balance;
}
.page-artist-detail .adet-verified {
    width: 27px;
    height: 27px;
    color: #1d4ed8;
    background: #dbeafe;
    box-shadow: 0 5px 15px rgba(2, 6, 23, .17);
}
.page-artist-detail .adet-info__pills {
    margin-bottom: 10px;
}
.page-artist-detail .adet-genre-pill,
.page-artist-detail .adet-country {
    min-height: 25px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 8px;
    color: rgba(245, 247, 255, .82);
    background: rgba(7, 18, 62, .2);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    box-sizing: border-box;
}
.page-artist-detail .adet-info__listeners {
    display: none;
}
.page-artist-detail .adet-website {
    max-width: 330px;
    overflow: hidden;
    border: 0;
    color: rgba(229, 234, 255, .66);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-artist-detail .adet-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}
.page-artist-detail :is(.adet-hero__primary, .adet-hero__secondary) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 11px;
    font: 800 9.5px/1 inherit;
    text-decoration: none;
    cursor: pointer;
}
.page-artist-detail .adet-hero__primary {
    border: 1px solid rgba(255, 255, 255, .78);
    color: #28317f;
    background: #fff;
    box-shadow: 0 10px 25px rgba(3, 8, 35, .17);
}
.page-artist-detail .adet-hero__secondary {
    border: 1px solid rgba(255, 255, 255, .18);
    color: #f8fafc;
    background: rgba(255, 255, 255, .09);
    backdrop-filter: blur(12px);
}
.page-artist-detail :is(.adet-hero__primary, .adet-hero__secondary):hover {
    transform: translateY(-1px);
}
.page-artist-detail .adet-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 22px;
}
.page-artist-detail .adet-hero__stats div {
    display: grid;
    gap: 2px;
    min-width: 92px;
    padding-right: 18px;
}
.page-artist-detail .adet-hero__stats div + div {
    padding-left: 18px;
    border-left: 1px solid rgba(255, 255, 255, .14);
}
.page-artist-detail .adet-hero__stats strong {
    color: #fff;
    font-size: 15px;
    font-weight: 850;
}
.page-artist-detail .adet-hero__stats span {
    color: rgba(222, 228, 250, .56);
    font-size: 7px;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.page-artist-detail .adet-hero__visual {
    position: relative;
    z-index: 1;
    display: grid;
    width: 250px;
    height: 250px;
    place-items: center;
}
.page-artist-detail .adet-hero__orbit {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
}
.page-artist-detail .adet-hero__orbit--outer {
    inset: 0;
}
.page-artist-detail .adet-hero__orbit--inner {
    inset: 24px;
    border-style: dashed;
}
.page-artist-detail .adet-hero__record {
    position: relative;
    display: grid;
    width: 174px;
    height: 174px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background:
        radial-gradient(circle, #dbeafe 0 5%, #4f46e5 6% 15%, #080c24 16% 25%, transparent 26%),
        repeating-radial-gradient(circle, #111936 0 2px, #070b21 3px 6px);
    box-shadow: 0 25px 48px rgba(1, 5, 28, .42);
    place-items: center;
    transform: rotate(-8deg);
}
.page-artist-detail .adet-hero__record::after {
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
    content: "";
}
.page-artist-detail .adet-hero__record span {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 17px;
    font-weight: 900;
}
.page-artist-detail .adet-hero__catalog-mark {
    position: absolute;
    right: 6px;
    bottom: 5px;
    color: rgba(231, 235, 255, .46);
    font-size: 6px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.page-artist-detail .adet-guide {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 56px;
    margin-bottom: 22px;
    padding: 9px 15px;
    border: 1px solid rgba(215, 222, 233, .94);
    border-radius: 16px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 10px 25px rgba(15, 23, 42, .055);
}
.page-artist-detail .adet-guide__label,
.page-artist-detail .adet-guide a,
.page-artist-detail .adet-guide__catalog {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #68758a;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
}
.page-artist-detail .adet-guide__label {
    color: #6d28d9;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.page-artist-detail .adet-guide__divider {
    width: 1px;
    height: 18px;
    background: #dce2eb;
}
.page-artist-detail .adet-guide a:hover {
    color: #6d28d9;
}
.page-artist-detail .adet-guide__catalog {
    margin-left: auto;
    padding: 7px 9px;
    border-radius: 9px;
    background: #f4f7fb;
}
.page-artist-detail .adet-guide__catalog i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .1);
}
.page-artist-detail .adet-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 285px;
    align-items: start;
    gap: 22px;
}
.page-artist-detail .adet-profile-main {
    display: grid;
    min-width: 0;
    gap: 20px;
}
.page-artist-detail .adet-profile-main :is(.adet-tracks-section, .adet-media-section, .adet-bio-section) {
    margin: 0;
    padding: 25px 26px;
    border: 1px solid rgba(214, 221, 232, .95);
    border-radius: 20px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 31px rgba(15, 23, 42, .065);
}
.page-artist-detail .adet-content-heading {
    align-items: center;
    margin-bottom: 19px;
}
.page-artist-detail .adet-content-heading__eyebrow {
    color: #7c3aed;
    font-size: 7.5px;
    letter-spacing: .17em;
}
.page-artist-detail .adet-content-heading .adet-section-title {
    font-size: 25px;
}
.page-artist-detail .adet-content-heading > p {
    max-width: 330px;
    color: #8994a7;
    font-size: 8.5px;
}
.page-artist-detail .adet-tracks-table-wrap {
    border: 0;
    border-radius: 15px;
    background: #f8faff;
}
.page-artist-detail #adet-songs-list {
    padding: 7px 9px;
}
.page-artist-detail #adet-songs-list .song-row {
    min-height: 64px;
    padding-inline: 8px;
}
.page-artist-detail #adet-songs-list .song-row:hover {
    border-radius: 11px;
    background: linear-gradient(90deg, rgba(124, 58, 237, .075), rgba(37, 99, 235, .035));
}
.page-artist-detail .adet-track-art-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}
.page-artist-detail .adet-bio-section {
    display: grid;
    grid-template-columns: minmax(190px, .72fr) minmax(0, 1.28fr);
    align-items: stretch;
    gap: 28px;
    overflow: hidden;
    background: linear-gradient(120deg, rgba(241, 245, 249, .96), rgba(255, 255, 255, .98) 48%);
}
.page-artist-detail .adet-bio-portrait {
    position: relative;
    min-height: 280px;
    overflow: hidden;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(145deg, #182338, #4f46a5);
}
.page-artist-detail .adet-bio-portrait > img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-artist-detail .adet-bio-portrait > span {
    position: absolute;
    inset: 0;
    display: grid;
    color: rgba(255, 255, 255, .2);
    font-size: 92px;
    font-weight: 850;
    place-items: center;
}
.page-artist-detail .adet-bio-portrait::after {
    position: absolute;
    inset: 42% 0 0;
    z-index: 2;
    content: "";
    background: linear-gradient(transparent, rgba(8, 15, 32, .86));
}
.page-artist-detail .adet-bio-portrait__caption {
    position: absolute;
    right: 18px;
    bottom: 17px;
    left: 18px;
    z-index: 3;
    display: grid;
    gap: 3px;
}
.page-artist-detail .adet-bio-portrait__caption small {
    color: rgba(255, 255, 255, .68);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.page-artist-detail .adet-bio-portrait__caption strong {
    font-size: 17px;
}
.page-artist-detail .adet-bio-copy {
    align-self: center;
    padding: 16px 12px 16px 0;
}
.page-artist-detail .adet-bio-copy .adet-section-title {
    margin: 8px 0 16px;
    color: #1e293b;
    font-size: 27px;
}
.page-artist-detail .adet-bio-copy__lead {
    margin: 0;
    color: #526076;
    font-size: 12px;
    line-height: 1.85;
    white-space: pre-line;
}
.page-artist-detail .adet-bio-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}
.page-artist-detail .adet-bio-facts > span {
    display: grid;
    min-width: 92px;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid #e1e6ef;
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
}
.page-artist-detail .adet-bio-facts small {
    color: #8b96a8;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.page-artist-detail .adet-bio-facts strong {
    overflow: hidden;
    color: #344056;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-artist-detail .adet-media-section {
    background:
        radial-gradient(circle at 100% 0%, rgba(124, 58, 237, .07), transparent 36%),
        #fff;
}
.page-artist-detail .adet-media-rail {
    gap: 15px;
    padding-bottom: 8px;
    scrollbar-width: none;
}
.page-artist-detail .adet-media-rail.is-carousel {
    scroll-snap-type: x mandatory;
}
.page-artist-detail .adet-media-rail::-webkit-scrollbar {
    display: none;
}
.page-artist-detail .adet-media-heading-note {
    display: grid;
    justify-items: end;
    gap: 7px;
}
.page-artist-detail .adet-media-heading-note > p {
    margin: 0;
}
.page-artist-detail .adet-media-controls {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.page-artist-detail .adet-media-controls[hidden] {
    display: none;
}
.page-artist-detail .adet-media-controls button {
    display: grid;
    width: 28px;
    height: 28px;
    padding: 0;
    place-items: center;
    border: 1px solid #dce2ec;
    border-radius: 50%;
    color: #4f46e5;
    background: #fff;
    cursor: pointer;
}
.page-artist-detail .adet-media-controls button:hover,
.page-artist-detail .adet-media-controls button:focus-visible {
    border-color: #a5b4fc;
    background: #eef2ff;
    outline: none;
}
.page-artist-detail .adet-media-controls button:disabled {
    color: #aeb6c5;
    background: #f7f8fa;
    cursor: default;
}
.page-artist-detail .adet-media-controls button svg {
    width: 16px;
    height: 16px;
}
.page-artist-detail .adet-media-controls span {
    min-width: 34px;
    color: #7b8496;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
}
.page-artist-detail .adet-media-autoplay {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #6755ad;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.page-artist-detail .adet-media-autoplay i {
    width: 18px;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background:
        linear-gradient(90deg, transparent, #7557de, transparent)
        0 0 / 200% 100%;
    animation: adet-media-signal 1.8s linear infinite;
}
@keyframes adet-media-signal {
    to { background-position: -200% 0; }
}
.page-artist-detail .adet-media-card {
    width: 225px;
    min-width: 225px;
    border-radius: 16px;
}
.page-artist-detail .adet-media-card__body {
    padding: 13px 14px 15px;
}
.page-artist-detail .adet-media-card__body h3 {
    font-size: 13px;
}
.page-artist-detail .adet-profile-sidebar {
    position: sticky;
    top: 88px;
    display: grid;
    gap: 13px;
}
.page-artist-detail .adet-profile-card {
    overflow: hidden;
    border: 1px solid rgba(213, 220, 231, .96);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 16px 37px rgba(15, 23, 42, .09);
}
.page-artist-detail .adet-profile-card__head {
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 17px;
    color: #fff;
    background:
        radial-gradient(circle at 95% 0%, rgba(56, 189, 248, .25), transparent 38%),
        linear-gradient(135deg, #452099, #2457be 72%, #087899);
}
.page-artist-detail .adet-profile-card__monogram {
    display: grid;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    font-size: 16px;
    font-weight: 850;
    place-items: center;
}
.page-artist-detail .adet-profile-card__head > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}
.page-artist-detail .adet-profile-card__head small {
    color: rgba(221, 226, 255, .62);
    font-size: 6.5px;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.page-artist-detail .adet-profile-card__head strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-artist-detail .adet-profile-card__verified {
    display: grid;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    color: #1d4ed8;
    background: #dbeafe;
    place-items: center;
}
.page-artist-detail .adet-profile-card__bio {
    padding: 18px 18px 15px;
}
.page-artist-detail .adet-profile-card__bio p {
    margin: 0;
    color: #667287;
    font-size: 9.5px;
    line-height: 1.7;
    white-space: pre-line;
}
.page-artist-detail .adet-profile-facts {
    margin: 0;
    padding: 0 18px 17px;
}
.page-artist-detail .adet-profile-facts div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #edf0f4;
}
.page-artist-detail .adet-profile-facts dt {
    color: #96a0b0;
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.page-artist-detail .adet-profile-facts dd {
    overflow: hidden;
    margin: 0;
    color: #344056;
    font-size: 9px;
    font-weight: 800;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-artist-detail .adet-profile-card__website {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 17px 17px;
    padding: 10px 11px;
    border-radius: 10px;
    color: #6235ce;
    background: #f3efff;
    font-size: 8.5px;
    font-weight: 800;
    text-decoration: none;
}
.page-artist-detail .adet-profile-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 16px;
    border: 1px solid #dfe5ee;
    border-radius: 17px;
    background: linear-gradient(145deg, #f9fbff, #f4f1ff);
}
.page-artist-detail .adet-profile-note__icon {
    display: grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, #7c3aed, #2563eb);
    place-items: center;
}
.page-artist-detail .adet-profile-note > div {
    display: grid;
    gap: 3px;
}
.page-artist-detail .adet-profile-note small {
    color: #7c3aed;
    font-size: 6.5px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.page-artist-detail .adet-profile-note strong {
    color: #344056;
    font-size: 10px;
}
.page-artist-detail .adet-profile-note p {
    margin: 2px 0 0;
    color: #8792a4;
    font-size: 8px;
    line-height: 1.5;
}

@media (max-width: 1050px) {
    .page-artist-detail .adet-hero__inner {
        grid-template-columns: 135px minmax(0, 1fr) 190px;
        gap: 24px;
        padding-inline: 35px;
    }
    .page-artist-detail .adet-avatar-wrap {
        width: 128px;
        height: 128px;
    }
    .page-artist-detail .adet-hero__visual {
        width: 190px;
        height: 190px;
    }
    .page-artist-detail .adet-hero__record {
        width: 135px;
        height: 135px;
    }
    .page-artist-detail .adet-profile-layout {
        grid-template-columns: minmax(0, 1fr) 250px;
    }
}

@media (max-width: 820px) {
    .page-artist-detail .adet-hero__inner {
        grid-template-columns: 125px minmax(0, 1fr);
    }
    .page-artist-detail .adet-hero__visual {
        display: none;
    }
    .page-artist-detail .adet-profile-layout {
        grid-template-columns: 1fr;
    }
    .page-artist-detail .adet-profile-sidebar {
        position: static;
        grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    }
}

@media (max-width: 620px) {
    .page-artist-detail .content {
        padding: 14px 14px 42px;
    }
    .page-artist-detail .adet-hero {
        min-height: 455px;
        border-radius: 20px;
    }
    .page-artist-detail .adet-hero__inner {
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        flex-direction: column;
        min-height: 455px;
        padding: 28px 22px;
    }
    .page-artist-detail .adet-avatar-wrap {
        width: 94px;
        height: 94px;
    }
    .page-artist-detail .adet-info__name {
        font-size: clamp(38px, 12vw, 54px);
    }
    .page-artist-detail .adet-breadcrumb {
        margin-bottom: 14px;
    }
    .page-artist-detail .adet-hero__stats {
        margin-top: 18px;
    }
    .page-artist-detail .adet-guide {
        gap: 11px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .page-artist-detail .adet-guide::-webkit-scrollbar {
        display: none;
    }
    .page-artist-detail .adet-guide > * {
        flex: 0 0 auto;
    }
    .page-artist-detail .adet-guide__catalog {
        margin-left: 0;
    }
    .page-artist-detail .adet-profile-main :is(.adet-tracks-section, .adet-media-section, .adet-bio-section) {
        padding: 21px 18px;
    }
    .page-artist-detail .adet-bio-section {
        grid-template-columns: 1fr;
    }
    .page-artist-detail .adet-bio-portrait {
        min-height: 250px;
    }
    .page-artist-detail .adet-bio-copy {
        padding: 3px 2px 2px;
    }
    .page-artist-detail .adet-content-heading {
        align-items: flex-start;
    }
    .page-artist-detail .adet-media-heading-note {
        justify-items: start;
    }
    .page-artist-detail .adet-profile-sidebar {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-artist-detail .adet-media-autoplay {
        display: none;
    }
    .page-artist-detail .adet-media-autoplay i {
        animation: none;
    }
}

@media (max-width: 430px) {
    .page-artist-detail .adet-guide a {
        display: none;
    }
    .page-artist-detail .adet-guide__catalog {
        margin-left: auto;
    }
    .page-artist-detail .adet-hero__stats div {
        min-width: 78px;
        padding-right: 10px;
    }
    .page-artist-detail .adet-hero__stats div + div {
        padding-left: 10px;
    }
}

/* Searchable public-album picker used by track upload. */
.sp-album-picker {
    position: relative;
}
.sp-album-picker__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.sp-album-picker__trigger {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 7px 11px;
    border: 1px solid var(--color-border, #dce2eb);
    border-radius: 11px;
    color: var(--color-text, #273248);
    background: var(--color-surface, #fff);
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.sp-album-picker.is-open .sp-album-picker__trigger,
.sp-album-picker__trigger:focus-visible {
    border-color: #8b5cf6;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .11);
}
.sp-album-picker__trigger-icon,
.sp-album-picker__option-art {
    display: grid;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(145deg, #7c3aed, #2563eb);
    place-items: center;
}
.sp-album-picker__trigger-copy,
.sp-album-picker__option > span:last-child {
    display: grid;
    min-width: 0;
    gap: 2px;
}
.sp-album-picker__trigger-copy small {
    color: #8b5cf6;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.sp-album-picker__trigger-copy strong {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-album-picker__chevron {
    color: var(--color-text-muted, #8792a4);
    transition: transform .18s ease;
}
.sp-album-picker.is-open .sp-album-picker__chevron {
    transform: rotate(180deg);
}
.sp-album-picker__panel {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    left: 0;
    z-index: 120;
    padding: 9px;
    border: 1px solid rgba(211, 218, 230, .98);
    border-radius: 14px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 22px 48px rgba(15, 23, 42, .17);
    backdrop-filter: blur(16px);
}
.sp-album-picker__search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid #e1e6ee;
    border-radius: 10px;
    color: #8a95a7;
    background: #f7f9fc;
}
.sp-album-picker__search:focus-within {
    border-color: #b9a7ec;
    background: #fff;
}
.sp-album-picker__search input {
    width: 100%;
    min-height: 39px;
    padding: 0;
    border: 0;
    outline: 0;
    color: #273248;
    background: transparent;
    font-size: 10px;
}
.sp-album-picker__options {
    max-height: 230px;
    margin-top: 7px;
    overflow-y: auto;
}
.sp-album-picker__option {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px;
    border: 0;
    border-radius: 10px;
    color: #344056;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.sp-album-picker__option:hover,
.sp-album-picker__option[aria-selected="true"] {
    color: #5f2ec5;
    background: #f3efff;
}
.sp-album-picker__option-art {
    color: #6d28d9;
    background: #ece7ff;
    font-size: 12px;
}
.sp-album-picker__option strong {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-album-picker__option small {
    color: #929cad;
    font-size: 7.5px;
}
.sp-album-picker__empty {
    margin: 8px 2px 2px;
    padding: 15px 10px;
    border-radius: 9px;
    color: #8a95a7;
    background: #f8f9fc;
    font-size: 9px;
    text-align: center;
}

/* Searchable album assignment from My Tracks. */
.trk-album-modal[hidden] { display: none !important; }
.trk-album-modal {
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.trk-album-modal__dialog {
    width: min(520px, 100%);
    max-height: min(680px, calc(100vh - 36px));
    overflow: hidden;
}
.trk-album-modal__eyebrow {
    margin: 0 0 4px;
    color: #7c3aed;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.trk-album-modal__track {
    margin: 5px 0 0;
    color: var(--color-text-muted);
    font-size: 12px;
}
.trk-album-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    color: #8b5cf6;
    background: var(--color-surface-alt, #f8fafc);
}
.trk-album-search:focus-within {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .1);
    background: var(--color-surface, #fff);
}
.trk-album-search input {
    width: 100%;
    min-height: 44px;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--color-text);
    background: transparent;
    font: inherit;
    font-size: 13px;
}
.trk-album-list {
    display: grid;
    gap: 7px;
    max-height: 360px;
    overflow-y: auto;
}
.trk-album-option {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: var(--color-text);
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.trk-album-option:hover,
.trk-album-option:focus-visible {
    border-color: rgba(124, 58, 237, .18);
    outline: 0;
    background: #f6f2ff;
}
.trk-album-option:disabled { cursor: wait; opacity: .55; }
.trk-album-option__art {
    display: grid;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 10px;
    color: #7c3aed;
    background: #ede9fe;
    place-items: center;
}
.trk-album-option__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.trk-album-option__copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}
.trk-album-option__copy strong,
.trk-album-option__copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.trk-album-option__copy strong { font-size: 13px; }
.trk-album-option__copy small { color: var(--color-text-muted); font-size: 11px; }
.trk-album-option__arrow { color: #a78bfa; }
.trk-album-empty {
    padding: 26px 16px;
    border: 1px dashed var(--color-border);
    border-radius: 12px;
    color: var(--color-text-muted);
    background: var(--color-surface-alt, #f8fafc);
    font-size: 12px;
    text-align: center;
}
.trk-album-modal__note {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 10px;
}

/* Production discovery experience. */
.page-discover .content {
    background:
        radial-gradient(circle at 12% 8%, rgba(124, 58, 237, .07), transparent 24rem),
        linear-gradient(180deg, #f7f8fc 0, #fff 34rem);
}
.page-discover .dsc-page {
    width: min(100%, 1460px);
    margin: 0 auto;
    gap: 34px;
}
.page-discover .dsc-hero {
    min-height: 310px;
    height: auto;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 26px;
    isolation: isolate;
    background: linear-gradient(135deg, #321063 0%, #5523a8 44%, #174eb7 100%);
    background-position: center 38%;
    background-size: cover;
    box-shadow: 0 30px 80px rgba(37, 20, 85, .24);
}
.page-discover .dsc-hero::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 74% 30%, rgba(129, 140, 248, .34), transparent 24%),
        radial-gradient(circle at 42% 110%, rgba(37, 99, 235, .34), transparent 45%);
    content: "";
    pointer-events: none;
}
.page-discover .dsc-hero__overlay {
    background:
        linear-gradient(90deg, rgba(35, 16, 91, .96) 0%, rgba(45, 25, 108, .86) 48%, rgba(16, 68, 148, .67) 100%),
        linear-gradient(135deg, rgba(124, 58, 237, .38), rgba(2, 132, 199, .26)),
        linear-gradient(0deg, rgba(11, 7, 27, .28), transparent 56%);
}
.page-discover .dsc-hero__content {
    justify-content: center;
    max-width: 700px;
    padding: clamp(28px, 3.5vw, 46px);
    gap: 5px;
}
.page-discover .dsc-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    color: rgba(255, 255, 255, .7);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.page-discover .dsc-hero__live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #a78bfa;
    box-shadow: 0 0 0 5px rgba(167, 139, 250, .15), 0 0 18px rgba(167, 139, 250, .9);
}
.page-discover .dsc-hero__tag {
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .11);
    box-shadow: none;
    backdrop-filter: blur(12px);
}
.page-discover .dsc-hero__title {
    max-width: 570px;
    font-size: clamp(36px, 4.3vw, 56px);
    line-height: 1;
    letter-spacing: -.055em;
    white-space: normal;
}
.page-discover .dsc-hero__artist {
    color: #ddd6fe;
    font-size: 16px;
    font-weight: 750;
}
.page-discover .dsc-hero__tagline {
    max-width: 520px;
    margin-top: 5px;
    color: rgba(255, 255, 255, .66);
    font-size: 13px;
    line-height: 1.65;
}
.page-discover .dsc-hero__cta { margin-top: 15px; }
.page-discover .dsc-btn {
    min-height: 44px;
    padding: 0 21px;
    border-radius: 12px;
}
.page-discover .dsc-btn--play {
    background: #fff;
    color: #4c1d95;
    box-shadow: 0 12px 30px rgba(8, 5, 24, .24);
}
.page-discover .dsc-btn--play:hover {
    box-shadow: 0 15px 34px rgba(8, 5, 24, .32);
}
.page-discover .dsc-hero__signals {
    display: flex;
    gap: 0;
    margin-top: 18px;
}
.page-discover .dsc-hero__signals div {
    display: grid;
    min-width: 98px;
    gap: 2px;
    padding-right: 22px;
}
.page-discover .dsc-hero__signals div + div {
    padding-left: 22px;
    border-left: 1px solid rgba(255, 255, 255, .16);
}
.page-discover .dsc-hero__signals strong {
    color: #fff;
    font-size: 18px;
    font-weight: 850;
}
.page-discover .dsc-hero__signals span {
    color: rgba(255, 255, 255, .5);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.page-discover .dsc-hero__art-wrap {
    width: clamp(240px, 26vw, 340px);
    padding: 28px;
}
.page-discover .dsc-hero__record {
    position: relative;
    width: min(230px, 20vw);
    aspect-ratio: 1;
    filter: drop-shadow(0 28px 35px rgba(5, 4, 20, .48));
}
.page-discover .dsc-hero__record::before {
    position: absolute;
    inset: 5%;
    z-index: -1;
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle, rgba(255,255,255,.08) 0 1px, transparent 1px 7px),
        #11101a;
    content: "";
    transform: translateX(23%);
}
.page-discover .dsc-hero__record-grooves {
    position: absolute;
    top: 50%;
    right: -18%;
    z-index: 1;
    width: 27%;
    aspect-ratio: 1;
    border: 9px solid #171421;
    border-radius: 50%;
    background: #8b5cf6;
    box-shadow: 0 0 0 2px rgba(255,255,255,.12);
    transform: translateY(-50%);
}
.page-discover .dsc-hero__art {
    position: relative;
    z-index: 2;
    width: 82%;
    height: 82%;
    margin-top: 9%;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 18px;
    box-shadow: 0 20px 48px rgba(0,0,0,.48);
}
.page-discover .dsc-filter-bar {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 14px 16px;
    border: 1px solid rgba(221, 226, 237, .9);
    border-radius: 17px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 12px 36px rgba(34, 44, 72, .06);
    backdrop-filter: blur(16px);
}
.page-discover .dsc-filter-bar__intro {
    display: grid;
    flex: 0 0 auto;
    gap: 2px;
    padding-right: 24px;
    border-right: 1px solid #e5e7eb;
}
.page-discover .dsc-filter-bar__intro span,
.page-discover .dsc-section-heading > span {
    color: #7c3aed;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.page-discover .dsc-filter-bar__intro strong {
    color: #172033;
    font-size: 13px;
}
.page-discover .dsc-moods {
    flex: 1;
    padding: 0;
}
.page-discover .dsc-mood-pill {
    min-height: 36px;
    padding: 0 16px;
    border-width: 1px;
}
.page-discover .dsc-section {
    gap: 18px;
}
.page-discover .dsc-section-hd {
    align-items: flex-end;
    padding: 0 2px;
}
.page-discover .dsc-section-heading {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 3px;
}
.page-discover .dsc-section-title {
    flex: none;
    font-size: clamp(21px, 2vw, 27px);
    font-weight: 850;
    letter-spacing: -.035em;
}
.page-discover .dsc-section-heading p {
    margin: 1px 0 0;
    color: var(--color-text-muted);
    font-size: 11px;
}
.page-discover .dsc-trending__actions,
.page-discover .dsc-new-releases__actions,
.page-discover .dsc-genre-section__actions,
.page-discover .dsc-picked__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-discover .dsc-see-all,
.page-discover .dsc-genre-next {
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid #e0e4ec;
    border-radius: 9px;
    color: #5b6474;
    background: #fff;
    line-height: 32px;
    text-decoration: none;
}
.page-discover .dsc-card {
    width: 184px;
    gap: 11px;
    padding: 10px;
    border: 1px solid #e4e8f0;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(31, 41, 66, .055);
}
.page-discover .dsc-card:hover,
.page-discover .dsc-card:focus-visible {
    border-color: rgba(124, 58, 237, .25);
    background: #fff;
    box-shadow: 0 18px 35px rgba(55, 38, 104, .13);
    transform: translateY(-3px);
}
.page-discover .dsc-card__art-wrap { border-radius: 13px; }
.page-discover .dsc-card__meta { gap: 4px; padding: 0 3px 3px; }
.page-discover .dsc-card__title { font-size: 13px; font-weight: 780; }
.page-discover .dsc-card__artist { font-size: 10px; }
.page-discover .dsc-card__tip-btn {
    border-radius: 7px;
    font-size: 9px;
}
.page-discover .dsc-two-col {
    grid-template-columns: minmax(330px, .9fr) minmax(0, 1.5fr);
    gap: 22px;
}
.page-discover .dsc-two-col > .dsc-section {
    min-width: 0;
    padding: 22px;
    border: 1px solid #e4e8f0;
    border-radius: 21px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 16px 40px rgba(31, 41, 66, .06);
}
.page-discover .dsc-chart { gap: 5px; }
.page-discover .dsc-chart__item {
    min-height: 58px;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 12px;
}
.page-discover .dsc-chart__item:hover,
.page-discover .dsc-chart__item:focus-visible {
    border-color: #e5e7eb;
    background: #f8f7fd;
}
.page-discover .dsc-genre-tile {
    min-height: 155px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 17px;
    box-shadow: 0 12px 26px rgba(31, 41, 66, .12);
}
.page-discover .dsc-genre-tile:hover {
    box-shadow: 0 20px 36px rgba(31, 41, 66, .2);
    transform: translateY(-4px);
}
.page-discover .dsc-badge--ai {
    margin-left: 8px;
    box-shadow: 0 6px 16px rgba(102, 126, 234, .24);
}
@media (max-width: 980px) {
    .page-discover .dsc-hero { min-height: 300px; }
    .page-discover .dsc-hero__content { padding: 30px; }
    .page-discover .dsc-hero__title { font-size: clamp(34px, 6vw, 48px); }
    .page-discover .dsc-hero__art-wrap { width: 250px; padding: 24px; }
    .page-discover .dsc-hero__record { width: 195px; }
    .page-discover .dsc-two-col { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .page-discover .dsc-page { gap: 27px; }
    .page-discover .dsc-hero {
        min-height: 400px;
        align-items: flex-end;
    }
    .page-discover .dsc-hero__content {
        justify-content: flex-end;
        padding: 25px 22px;
    }
    .page-discover .dsc-hero__title { font-size: 36px; }
    .page-discover .dsc-hero__art-wrap {
        position: absolute;
        top: 20px;
        right: 18px;
        width: 155px;
        padding: 0;
        opacity: .72;
    }
    .page-discover .dsc-hero__record { width: 145px; }
    .page-discover .dsc-hero__signals { margin-top: 16px; }
    .page-discover .dsc-filter-bar {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }
    .page-discover .dsc-filter-bar__intro {
        padding: 0 0 10px;
        border-right: 0;
        border-bottom: 1px solid #e5e7eb;
    }
    .page-discover .dsc-two-col > .dsc-section { padding: 17px; }
}
@media (max-width: 430px) {
    .page-discover .dsc-hero { min-height: 390px; border-radius: 20px; }
    .page-discover .dsc-hero__content { padding: 22px 19px; }
    .page-discover .dsc-hero__title { font-size: 32px; }
    .page-discover .dsc-hero__tagline { max-width: 88%; }
    .page-discover .dsc-hero__signals div { min-width: 0; padding-right: 13px; }
    .page-discover .dsc-hero__signals div + div { padding-left: 13px; }
    .page-discover .dsc-card { width: 162px; }
    .page-discover .dsc-section-hd { align-items: flex-start; }
}

/* Artist directory — editorial roster experience. */
.page-artists .ast-directory-panel {
    padding: 26px;
    border-color: #dce3ee;
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 18%, rgba(103, 76, 222, .06), transparent 23rem),
        rgba(255, 255, 255, .96);
    box-shadow: 0 20px 48px rgba(19, 31, 57, .09);
}
.page-artists .ast-directory-heading {
    min-height: 218px;
    margin: -26px -26px 0;
    padding: 34px clamp(28px, 4vw, 54px);
    align-items: center;
    background:
        linear-gradient(90deg, rgba(4, 17, 40, .95) 0%, rgba(14, 44, 94, .91) 54%, rgba(48, 35, 116, .7) 100%),
        radial-gradient(circle at 85% 30%, rgba(74, 222, 206, .18), transparent 25rem),
        linear-gradient(118deg, #071a37, #183f83 58%, #382575);
}
.page-artists .ast-directory-heading::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .18;
    background-image:
        linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(90deg, #000, transparent 72%);
    content: "";
}
.page-artists .ast-directory-heading::after {
    width: 350px;
    height: 350px;
    right: -125px;
    top: -230px;
    border-width: 48px;
}
.page-artists .ast-directory-heading__main {
    width: min(58%, 700px);
    display: block;
}
.page-artists .ast-directory-heading__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    color: #a8f2e3;
    font-size: 8px;
}
.page-artists .ast-directory-heading__eyebrow i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5ee7c8;
    box-shadow: 0 0 0 4px rgba(94, 231, 200, .12);
}
.page-artists .ast-directory-heading h2 {
    max-width: 620px;
    font-size: clamp(32px, 4vw, 49px);
    line-height: 1.02;
    letter-spacing: -.055em;
}
.page-artists .ast-directory-heading__main p {
    max-width: 610px;
    margin-top: 12px;
    color: rgba(220, 231, 250, .72);
    font-size: 11px;
    line-height: 1.62;
}
.page-artists .ast-directory-heading__signals {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 20px;
}
.page-artists .ast-directory-heading__signals span {
    display: grid;
    gap: 2px;
    padding-right: 22px;
    color: rgba(201, 215, 240, .66);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.page-artists .ast-directory-heading__signals span + span {
    padding-left: 22px;
    border-left: 1px solid rgba(255, 255, 255, .14);
}
.page-artists .ast-directory-heading__signals strong {
    color: #fff;
    font-size: 17px;
    line-height: 1;
    letter-spacing: -.025em;
}
.page-artists .ast-directory-heading__portraits {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: clamp(28px, 4vw, 52px);
    width: min(36%, 420px);
    height: 176px;
    transform: translateY(-50%);
}
.page-artists .ast-directory-heading__portraits > span {
    position: absolute;
    top: 50%;
    width: 116px;
    height: 150px;
    overflow: hidden;
    background: linear-gradient(145deg, #dfeaff, #d7cdf7);
    border: 1px solid rgba(255, 255, 255, .27);
    border-radius: 13px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .33);
}
.page-artists .ast-directory-heading__portraits > span:nth-child(1) {
    z-index: 4;
    right: 42%;
    transform: translateY(-50%);
}
.page-artists .ast-directory-heading__portraits > span:nth-child(2) {
    z-index: 3;
    right: 18%;
    transform: translateY(-50%) rotate(5deg) scale(.91);
}
.page-artists .ast-directory-heading__portraits > span:nth-child(3) {
    z-index: 2;
    right: 65%;
    transform: translateY(-50%) rotate(-6deg) scale(.87);
    opacity: .9;
}
.page-artists .ast-directory-heading__portraits > span:nth-child(4) {
    z-index: 1;
    right: -3%;
    transform: translateY(-50%) rotate(9deg) scale(.81);
    opacity: .72;
}
.page-artists .ast-directory-heading__portraits img,
.page-artists .ast-directory-heading__portraits i {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.page-artists .ast-directory-heading__portraits img {
    z-index: 1;
    object-fit: cover;
}
.page-artists .ast-directory-heading__portraits i {
    display: grid;
    place-items: center;
    color: rgba(63, 70, 124, .42);
}
.page-artists .ast-directory-heading__portraits svg {
    width: 42px;
    height: 42px;
}
.page-artists .ast-alpha-index {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 17px;
    padding: 11px 13px;
    overflow: hidden;
    border: 1px solid #e1e6ee;
    border-radius: 13px;
    background: #f8f9fc;
}
.page-artists .ast-alpha-index__label {
    flex: 0 0 auto;
    color: #69748a;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.page-artists .ast-alpha-index__letters {
    display: flex;
    min-width: 0;
    flex: 1;
    gap: 3px;
    overflow-x: auto;
    padding-bottom: 1px;
    scrollbar-width: none;
}
.page-artists .ast-alpha-index__letters::-webkit-scrollbar { display: none; }
.page-artists .ast-alpha-btn {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #758095;
    font-size: 8px;
    font-weight: 800;
    background: transparent;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.page-artists .ast-alpha-btn:hover {
    color: #5d43c8;
    background: #eeeaff;
}
.page-artists .ast-alpha-btn:disabled {
    color: #aeb5c3;
    background: transparent;
    cursor: not-allowed;
    opacity: .48;
}
.page-artists .ast-alpha-btn--active {
    color: #fff;
    background: linear-gradient(135deg, #7047ed, #296bea);
    box-shadow: 0 6px 13px rgba(86, 66, 199, .24);
}
.page-artists .ast-directory-panel .ast-filter-bar {
    margin-top: 10px;
    border-color: #e3e7ee;
    background: #fff;
}
.page-artists .ast-directory-panel .ast-section { margin-top: 20px; }
.page-artists .ast-directory-panel .ast-grid:not(.ast-grid--list) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card {
    padding: 9px 9px 15px;
    border-radius: 17px;
    box-shadow: 0 9px 24px rgba(18, 31, 57, .075);
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card__avatar-wrap {
    aspect-ratio: 4 / 4.5;
    border-radius: 13px;
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card__name {
    font-size: 14px;
}
.page-artists .ast-grid:not(.ast-grid--list) .ast-card__profile-action {
    font-size: 7px;
}
@media (max-width: 1050px) {
    .page-artists .ast-directory-heading__main { width: 61%; }
    .page-artists .ast-directory-heading__portraits {
        right: 18px;
        width: 38%;
        transform: translateY(-50%) scale(.9);
        transform-origin: right center;
    }
    .page-artists .ast-directory-panel .ast-grid:not(.ast-grid--list) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 720px) {
    .page-artists .ast-directory-panel { padding: 18px; }
    .page-artists .ast-directory-heading {
        min-height: 230px;
        margin: -18px -18px 0;
        padding: 27px 24px 95px;
        align-items: flex-start;
    }
    .page-artists .ast-directory-heading__main { width: 100%; }
    .page-artists .ast-directory-heading h2 { font-size: 34px; }
    .page-artists .ast-directory-heading__main p { max-width: 92%; }
    .page-artists .ast-directory-heading__portraits {
        top: auto;
        right: 17px;
        bottom: -45px;
        width: 230px;
        height: 118px;
        transform: scale(.62);
        transform-origin: right bottom;
        opacity: .72;
    }
    .page-artists .ast-alpha-index {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
    .page-artists .ast-alpha-index__letters { width: 100%; }
}
@media (max-width: 580px) {
    .page-artists .ast-directory-panel .ast-grid:not(.ast-grid--list) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
    }
}
@media (max-width: 420px) {
    .page-artists .ast-directory-panel {
        padding: 13px 10px;
        border-radius: 17px;
    }
    .page-artists .ast-directory-heading {
        min-height: 220px;
        margin: -13px -10px 0;
        padding: 24px 18px 82px;
    }
    .page-artists .ast-directory-heading h2 { font-size: 30px; }
    .page-artists .ast-directory-heading__main p {
        display: -webkit-box;
        max-width: 100%;
        overflow: hidden;
        font-size: 9px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .page-artists .ast-directory-heading__signals { margin-top: 15px; }
    .page-artists .ast-directory-heading__signals span { padding-right: 13px; }
    .page-artists .ast-directory-heading__signals span + span { padding-left: 13px; }
    .page-artists .ast-directory-heading__portraits { right: 4px; }
    .page-artists .ast-alpha-index { padding-inline: 10px; }
    .page-artists .ast-alpha-btn {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .page-artists .ast-alpha-btn { transition: none; }
}

/* =============================================================================
   SYSTEM UI — PRODUCTION POLISH
   Shared shell refinements applied without changing page-level behavior.
============================================================================= */
:root {
    --shadow-xs: 0 2px 8px rgba(15, 23, 42, .045);
    --shadow-sm: 0 6px 18px rgba(15, 23, 42, .07);
    --shadow-md: 0 14px 34px rgba(15, 23, 42, .105);
    --shadow-lg: 0 26px 64px rgba(15, 23, 42, .16);
    --focus-ring: 0 0 0 4px rgba(91, 72, 221, .14);
}

html {
    background: #071a34;
    scrollbar-color: #c5ccda transparent;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    color: #fff;
    background: rgba(91, 72, 221, .82);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid rgba(91, 72, 221, .7);
    outline-offset: 3px;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.main-wrapper {
    position: relative;
    isolation: isolate;
}

.main-wrapper::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 68px 0 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 82% 5%, rgba(124, 58, 237, .055), transparent 28rem),
        radial-gradient(circle at 12% 88%, rgba(14, 165, 233, .045), transparent 30rem);
}

.topbar {
    border-bottom-color: rgba(204, 213, 226, .72);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .92),
        0 10px 30px rgba(24, 39, 75, .035);
}

.search-wrap {
    display: flex;
    align-items: center;
}

.search-input {
    padding-right: 70px;
    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.search-wrap:focus-within .search-icon {
    color: #6549dc;
}

.search-shortcut {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 43px;
    padding: 4px 7px;
    color: #7b8494;
    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    letter-spacing: .02em;
    border: 1px solid #dce2eb;
    border-bottom-color: #c9d0dc;
    border-radius: 6px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    pointer-events: none;
    transition: opacity .18s ease;
}

.search-wrap:focus-within .search-shortcut {
    opacity: 0;
}

.likes-btn,
.user-menu__trigger,
.mobile-sidebar-toggle {
    transition:
        transform .18s ease,
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.likes-btn:hover,
.user-menu__trigger:hover,
.mobile-sidebar-toggle:hover {
    transform: translateY(-1px);
}

@media (min-width: 861px) {
    .sidebar:not(.sidebar--collapsed) .nav-item {
        min-height: 42px;
        gap: 10px;
        padding: 6px 9px;
        border: 1px solid transparent;
        border-radius: 11px;
        transition:
            color .18s ease,
            background .18s ease,
            border-color .18s ease,
            transform .18s ease,
            box-shadow .18s ease;
    }

    .sidebar:not(.sidebar--collapsed) .nav-item:hover {
        transform: translateX(2px);
        border-color: rgba(255, 255, 255, .055);
    }

    .sidebar:not(.sidebar--collapsed) .nav-item__icon {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        flex: 0 0 28px;
        border: 1px solid rgba(255, 255, 255, .06);
        border-radius: 9px;
        background: rgba(255, 255, 255, .045);
        transition: background .18s ease, border-color .18s ease, transform .18s ease;
    }

    .sidebar:not(.sidebar--collapsed) .nav-item__icon svg {
        width: 15px;
        height: 15px;
    }

    .sidebar:not(.sidebar--collapsed) .nav-item.active {
        border-color: rgba(143, 189, 255, .15);
    }

    .sidebar:not(.sidebar--collapsed) .nav-item.active .nav-item__icon {
        border-color: rgba(255, 255, 255, .16);
        background: rgba(255, 255, 255, .13);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    }
}

.content {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .2), transparent 180px);
}

.content::-webkit-scrollbar {
    width: 10px;
}

.content::-webkit-scrollbar-track {
    background: transparent;
}

.content::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: #c7cfdb;
    background-clip: padding-box;
}

.content::-webkit-scrollbar-thumb:hover {
    background: #aeb8c8;
    background-clip: padding-box;
}

.content > * {
    animation: system-page-enter .34s cubic-bezier(.2, .75, .25, 1) both;
}

@keyframes system-page-enter {
    from { opacity: .35; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.player-bar {
    box-shadow:
        0 -1px 0 rgba(126, 200, 255, .16),
        0 -16px 42px rgba(4, 22, 44, .2);
}

.now-playing__art-wrap {
    border-radius: 11px;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, .26),
        0 0 0 1px rgba(255, 255, 255, .12);
}

.now-playing__art {
    border-radius: 10px;
}

.ctrl-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    transition: color .16s ease, background .16s ease, transform .16s ease;
}

.ctrl-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, .09);
    transform: translateY(-1px);
}

.play-btn {
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    border: 1px solid rgba(255, 255, 255, .72);
    box-shadow:
        0 8px 20px rgba(37, 99, 235, .28),
        inset 0 1px 0 rgba(255, 255, 255, .25);
}

.play-btn:hover {
    background: linear-gradient(135deg, #8750f2, #3070ec);
    box-shadow:
        0 11px 25px rgba(37, 99, 235, .36),
        inset 0 1px 0 rgba(255, 255, 255, .3);
}

.progress-bar {
    height: 5px;
    background: rgba(255, 255, 255, .13);
}

.progress-bar:hover {
    height: 7px;
}

.time-label {
    color: rgba(235, 243, 255, .62);
    font-size: 10px;
    font-weight: 700;
}

@media (max-width: 680px) {
    .search-shortcut {
        display: none;
    }

    .search-input {
        padding-right: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .content > * {
        animation: none;
    }

    .nav-item,
    .likes-btn,
    .user-menu__trigger,
    .mobile-sidebar-toggle,
    .ctrl-btn {
        transition: none !important;
    }
}

/* Artists — production editorial discovery refinement. */
.page-artists .content {
    background:
        radial-gradient(circle at 14% 2%, rgba(48, 112, 221, .07), transparent 29rem),
        linear-gradient(180deg, #f5f7fb 0, #fff 52rem);
}
.page-artists .ast {
    width: min(100%, 1460px);
    margin: 0 auto;
}
.page-artists .ast-ph {
    min-height: 350px;
    grid-template-columns: minmax(0, 1.22fr) minmax(280px, .78fr);
    border-radius: 24px;
    box-shadow: 0 30px 72px rgba(7, 23, 53, .26);
}
.page-artists .ast-ph__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.page-artists .ast-ph__backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    opacity: .18;
    filter: saturate(.78) contrast(1.08);
    transform: scale(1.035);
}
.page-artists .ast-ph::after {
    z-index: 1;
    height: 100%;
    background:
        linear-gradient(90deg, rgba(4, 18, 42, .97) 0%, rgba(12, 43, 92, .9) 55%, rgba(45, 31, 108, .7) 100%),
        linear-gradient(180deg, transparent, rgba(3, 12, 29, .32));
}
.page-artists .ast-ph__text {
    position: relative;
    z-index: 2;
    padding-block: 48px;
}
.page-artists .ast-ph__title {
    max-width: 720px;
    font-size: clamp(40px, 5vw, 64px);
}
.page-artists .ast-ph__sub {
    max-width: 560px;
    color: rgba(225, 235, 252, .76);
    font-size: 12px;
}
.page-artists .ast-ph__feature {
    position: relative;
    z-index: 3;
    width: min(320px, calc(100% - 40px));
    justify-self: end;
    margin-right: clamp(30px, 4vw, 58px);
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background: rgba(6, 19, 44, .46);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 17px;
    box-shadow: 0 23px 45px rgba(0, 0, 0, .33);
    backdrop-filter: blur(13px);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.page-artists a.ast-ph__feature:hover,
.page-artists a.ast-ph__feature:focus-visible {
    transform: translateY(-5px);
    border-color: rgba(142, 234, 213, .48);
    box-shadow: 0 30px 52px rgba(0, 0, 0, .4);
}
.page-artists .ast-ph__feature-art {
    position: relative;
    height: 202px;
    overflow: hidden;
    background: linear-gradient(145deg, #dce9ff, #d8ccf5);
}
.page-artists .ast-ph__feature-art::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, transparent 48%, rgba(5, 16, 38, .62));
    content: "";
}
.page-artists .ast-ph__feature-art img,
.page-artists .ast-ph__feature-art .ast-ph__portrait-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.page-artists .ast-ph__feature-art img {
    z-index: 1;
    object-fit: cover;
    transition: transform .45s ease;
}
.page-artists a.ast-ph__feature:hover .ast-ph__feature-art img {
    transform: scale(1.045);
}
.page-artists .ast-ph__feature-tag {
    position: absolute;
    z-index: 3;
    top: 12px;
    left: 12px;
    padding: 6px 9px;
    color: #f1fffb;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: rgba(5, 24, 46, .63);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    backdrop-filter: blur(9px);
}
.page-artists .ast-ph__feature-info {
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
}
.page-artists .ast-ph__feature-info > span {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.page-artists .ast-ph__feature-info small {
    color: #90a7ce;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.page-artists .ast-ph__feature-info strong {
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-artists .ast-ph__feature-info em {
    color: #a8f2e3;
    font-size: 8px;
    font-style: normal;
}
.page-artists .ast-ph__feature-info > svg {
    flex: 0 0 auto;
    color: #a8f2e3;
}
.page-artists .ast-page-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-top: 14px;
    padding: 13px 17px;
    border: 1px solid #dfe5ee;
    border-radius: 15px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 10px 27px rgba(20, 33, 60, .055);
    backdrop-filter: blur(14px);
}
.page-artists .ast-page-nav__intro {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.page-artists .ast-page-nav__intro small {
    color: #6748d2;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.page-artists .ast-page-nav__intro strong {
    color: #28344c;
    font-size: 10px;
}
.page-artists .ast-page-nav__links {
    display: flex;
    align-items: center;
    gap: 5px;
}
.page-artists .ast-page-nav__links a {
    padding: 8px 11px;
    color: #626e82;
    font-size: 8px;
    font-weight: 800;
    text-decoration: none;
    border-radius: 8px;
}
.page-artists .ast-page-nav__links a:hover {
    color: #5e43ca;
    background: #f1eeff;
}
.page-artists :is(#new-artists, #recommended-artists) {
    scroll-margin-top: 86px;
}
.page-artists .ast-discovery {
    margin-top: 26px;
    gap: 20px;
}
.page-artists .ast-discovery-panel {
    padding: 24px;
    border: 1px solid #dfe5ed;
    border-radius: 21px;
    box-shadow: 0 14px 35px rgba(18, 31, 57, .075);
}
.page-artists .ast-discovery-panel__header { margin-bottom: 19px; }
.page-artists .ast-discovery-panel__header h2 {
    color: #18223a;
    font-size: 22px;
    letter-spacing: -.035em;
}
.page-artists .ast-discovery-panel__eyebrow {
    margin-bottom: 5px;
    font-size: 7px;
}
.page-artists .ast-new-grid { gap: 15px; }
.page-artists .ast-new-card {
    flex-basis: 222px;
    padding: 8px;
    background: #fff;
    border: 1px solid #e0e5ed;
    border-radius: 17px;
    box-shadow: 0 9px 22px rgba(17, 30, 57, .075);
}
.page-artists .ast-new-card__portrait {
    height: 182px;
    border-radius: 12px;
}
.page-artists .ast-new-card__portrait::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, transparent 50%, rgba(5, 16, 39, .4));
    content: "";
    pointer-events: none;
}
.page-artists .ast-new-card__badge { z-index: 3; }
.page-artists .ast-new-card__body {
    padding: 13px 5px 6px;
}
.page-artists .ast-new-card__body h3 {
    color: #17213a;
    font-size: 12px;
}
.page-artists .ast-new-card__body p {
    margin-top: 5px;
    color: #818b9d;
    font-size: 8px;
}
.page-artists .ast-recommended-list { gap: 13px; }
.page-artists .ast-recommended-card {
    flex-basis: 310px;
    min-height: 86px;
    padding: 13px;
    border-radius: 15px;
}
.page-artists .ast-recommended-card__avatar {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
}
@media (max-width: 900px) {
    .page-artists .ast-ph {
        grid-template-columns: minmax(0, 1fr) 270px;
    }
    .page-artists .ast-ph__feature {
        width: 250px;
        margin-right: 26px;
    }
    .page-artists .ast-ph__feature-art { height: 180px; }
}
@media (max-width: 700px) {
    .page-artists .ast-ph {
        min-height: 520px;
        grid-template-columns: 1fr;
        align-items: end;
    }
    .page-artists .ast-ph__text {
        align-self: start;
        padding: 34px 24px 0;
    }
    .page-artists .ast-ph__title { font-size: 40px; }
    .page-artists .ast-ph__feature {
        width: calc(100% - 48px);
        display: grid;
        grid-template-columns: 128px minmax(0, 1fr);
        align-self: end;
        justify-self: center;
        margin: 0 24px 24px;
    }
    .page-artists .ast-ph__feature-art { height: 112px; }
    .page-artists .ast-page-nav {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
    .page-artists .ast-page-nav__links {
        width: 100%;
        overflow-x: auto;
    }
}
@media (max-width: 470px) {
    .page-artists .ast-ph { min-height: 500px; }
    .page-artists .ast-ph__text {
        padding-inline: 20px;
        text-align: left;
    }
    .page-artists .ast-ph__title { font-size: 35px; }
    .page-artists .ast-ph__sub { font-size: 10px; }
    .page-artists .ast-ph__actions { justify-content: flex-start; }
    .page-artists .ast-ph__feature {
        width: calc(100% - 40px);
        margin: 0 20px 20px;
    }
    .page-artists .ast-page-nav__intro strong { font-size: 9px; }
    .page-artists .ast-discovery-panel {
        padding: 18px 13px;
        border-radius: 17px;
    }
    .page-artists .ast-new-card {
        flex-basis: min(72vw, 225px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .page-artists :is(.ast-ph__feature, .ast-ph__feature-art img, .ast-page-nav__links a) {
        transition: none;
    }
}

/* Artists — compact artwork-led refinement. */
.page-artists .ast { padding-bottom: 52px; }
.page-artists .ast-ph {
    min-height: 270px;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 30px;
    border-radius: 20px;
}
.page-artists .ast-ph__text {
    max-width: 720px;
    padding: 34px 0 34px clamp(30px, 4vw, 52px);
}
.page-artists .ast-ph__eyebrow {
    margin-bottom: 10px;
    padding: 5px 9px;
    font-size: 7px;
}
.page-artists .ast-ph__title {
    max-width: 610px;
    font-size: clamp(36px, 4.5vw, 53px);
    line-height: .98;
}
.page-artists .ast-ph__sub {
    max-width: 500px;
    margin-top: 11px;
    font-size: 10px;
    line-height: 1.58;
}
.page-artists .ast-ph__actions {
    margin-top: 19px;
    gap: 13px;
}
.page-artists .ast-ph__cta {
    min-height: 37px;
    padding-inline: 15px;
    font-size: 9px;
}
.page-artists .ast-ph__badge {
    padding: 5px 8px;
    font-size: 7px;
}
.page-artists .ast-ph__badge strong { font-size: 10px; }
.page-artists .ast-ph__feature {
    width: 210px;
    margin-right: clamp(25px, 3vw, 42px);
    background: transparent;
    border: 0;
    border-radius: 13px;
    box-shadow: 0 18px 36px rgba(0, 0, 0, .33);
    backdrop-filter: none;
}
.page-artists .ast-ph__feature-art {
    height: 174px;
    border-radius: 13px 13px 0 0;
}
.page-artists .ast-ph__feature-info {
    min-height: 56px;
    padding: 10px 12px;
    background: rgba(5, 18, 43, .88);
    border-radius: 0 0 13px 13px;
    backdrop-filter: blur(12px);
}
.page-artists .ast-ph__feature-tag {
    top: 10px;
    left: 10px;
    padding: 5px 7px;
    font-size: 6px;
}
.page-artists .ast-page-nav {
    min-height: 48px;
    margin-top: 10px;
    padding: 9px 13px;
    border-radius: 12px;
}
.page-artists .ast-page-nav__intro strong { font-size: 9px; }
.page-artists .ast-page-nav__links a { padding: 6px 9px; }
.page-artists .ast-discovery {
    margin-top: 18px;
    gap: 15px;
}
.page-artists .ast-discovery-panel {
    padding: 18px;
    border-radius: 17px;
    box-shadow: 0 9px 25px rgba(18, 31, 57, .06);
}
.page-artists .ast-discovery-panel__header { margin-bottom: 13px; }
.page-artists .ast-discovery-panel__header h2 { font-size: 18px; }
.page-artists .ast-new-grid { gap: 11px; }
.page-artists .ast-new-card {
    flex-basis: 180px;
    padding: 7px;
    border-radius: 14px;
}
.page-artists .ast-new-card__portrait {
    height: 140px;
    border-radius: 9px;
}
.page-artists .ast-new-card__body { padding: 10px 4px 4px; }
.page-artists .ast-recommended-list {
    align-items: stretch;
    gap: 11px;
}
.page-artists .ast-recommended-card {
    position: relative;
    min-height: 0;
    flex: 0 0 176px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 7px 7px 11px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e0e5ed;
    border-radius: 14px;
    box-shadow: 0 7px 18px rgba(17, 30, 57, .065);
}
.page-artists .ast-recommended-card:hover,
.page-artists .ast-recommended-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(103, 76, 222, .34);
    box-shadow: 0 15px 28px rgba(27, 38, 70, .12);
}
.page-artists .ast-recommended-card__avatar {
    position: relative;
    width: 100%;
    height: auto;
    flex: none;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(145deg, #e7f0ff, #e8e2ff);
}
.page-artists .ast-recommended-card__avatar::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, transparent 56%, rgba(5, 16, 38, .3));
    content: "";
    pointer-events: none;
}
.page-artists .ast-recommended-card__avatar img,
.page-artists .ast-recommended-card__avatar .ast-editorial-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-artists .ast-recommended-card__info {
    width: 100%;
    min-width: 0;
    padding: 10px 4px 0;
}
.page-artists .ast-recommended-card__info h3 {
    overflow: hidden;
    color: #17213a;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-artists .ast-recommended-card__info p {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
    color: #828c9e;
    font-size: 7px;
}
.page-artists .ast-recommended-card__signal {
    position: absolute;
    z-index: 4;
    top: 15px;
    right: 14px;
    min-height: 23px;
    padding: 0 7px;
    color: #fff;
    background: rgba(7, 19, 43, .68);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    backdrop-filter: blur(8px);
}
.page-artists .ast-recommended-card__arrow {
    position: absolute;
    right: 12px;
    bottom: 12px;
    color: #6848d2;
}
.page-artists .ast-directory-panel {
    margin-top: 16px;
    padding: 20px;
    border-radius: 18px;
    box-shadow: 0 11px 30px rgba(19, 31, 57, .065);
}
.page-artists .ast-directory-heading {
    min-height: 0;
    margin: 0;
    padding: 0 0 10px;
    overflow: visible;
    color: #17213a;
    background: transparent;
    border-bottom: 1px solid #e7ebf1;
}
.page-artists .ast-directory-heading::before,
.page-artists .ast-directory-heading::after,
.page-artists .ast-directory-heading__portraits {
    display: none;
}
.page-artists .ast-directory-heading__main {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 24px;
}
.page-artists .ast-directory-heading__eyebrow {
    grid-column: 1;
    margin-bottom: 3px;
    color: #6b4bd5;
}
.page-artists .ast-directory-heading__eyebrow i {
    background: #6f4be1;
    box-shadow: 0 0 0 4px rgba(111, 75, 225, .09);
}
.page-artists .ast-directory-heading h2 {
    grid-column: 1;
    color: #17213a;
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.04;
    letter-spacing: -.04em;
}
.page-artists .ast-directory-heading__main p {
    grid-column: 1;
    max-width: 650px;
    margin-top: 4px;
    color: #7b8698;
    font-size: 9px;
    line-height: 1.4;
}
.page-artists .ast-directory-heading__signals {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    margin: 0;
    padding: 10px 12px;
    background: #f6f4ff;
    border: 1px solid #e1dcfa;
    border-radius: 11px;
}
.page-artists .ast-directory-heading__signals span {
    padding-right: 13px;
    color: #8a819e;
}
.page-artists .ast-directory-heading__signals span + span {
    padding-left: 13px;
    border-left-color: #ddd6f6;
}
.page-artists .ast-directory-heading__signals strong {
    color: #5f43c7;
    font-size: 14px;
}
.page-artists .ast-alpha-index {
    margin-top: 11px;
    padding-block: 8px;
}
.page-artists .ast-directory-panel .ast-filter-bar {
    margin-top: 8px;
    padding-block: 7px;
}
.page-artists .ast-directory-panel .ast-section { margin-top: 14px; }
@media (max-width: 760px) {
    .page-artists .ast-ph {
        min-height: 270px;
        grid-template-columns: 1fr 150px;
        align-items: center;
        gap: 10px;
    }
    .page-artists .ast-ph__text {
        align-self: center;
        padding: 29px 0 29px 23px;
        text-align: left;
    }
    .page-artists .ast-ph__title { font-size: 35px; }
    .page-artists .ast-ph__sub { font-size: 9px; }
    .page-artists .ast-ph__actions { justify-content: flex-start; }
    .page-artists .ast-ph__badges { display: none; }
    .page-artists .ast-ph__feature {
        width: 130px;
        display: block;
        align-self: center;
        justify-self: end;
        margin: 0 20px 0 0;
    }
    .page-artists .ast-ph__feature-art { height: 130px; }
    .page-artists .ast-ph__feature-info { min-height: 52px; }
    .page-artists .ast-ph__feature-info em { display: none; }
    .page-artists .ast-directory-heading__main { display: block; }
    .page-artists .ast-directory-heading__signals {
        width: fit-content;
        margin-top: 12px;
    }
}
@media (max-width: 520px) {
    .page-artists .ast-ph {
        min-height: 245px;
        grid-template-columns: minmax(0, 1fr) 112px;
    }
    .page-artists .ast-ph__text { padding-left: 19px; }
    .page-artists .ast-ph__title { font-size: 30px; }
    .page-artists .ast-ph__feature {
        width: 102px;
        margin-right: 14px;
    }
    .page-artists .ast-ph__feature-art { height: 102px; }
    .page-artists .ast-ph__feature-info {
        min-height: 44px;
        padding: 7px 8px;
    }
    .page-artists .ast-ph__feature-info strong { font-size: 9px; }
    .page-artists .ast-ph__feature-info small,
    .page-artists .ast-ph__feature-info > svg { display: none; }
    .page-artists .ast-page-nav__intro { display: none; }
    .page-artists .ast-page-nav__links { justify-content: space-between; }
    .page-artists .ast-recommended-card { flex-basis: 155px; }
    .page-artists .ast-directory-panel { padding: 14px 10px; }
    .page-artists .ast-directory-heading__signals { display: none; }
}

/* Artists — editorial masthead and grid-only directory. */
.page-artists .ast-ph {
    min-height: 330px;
    display: block;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(145, 184, 238, .16);
    border-radius: 22px;
    background: var(--for-you-hero-background);
    box-shadow: 0 24px 58px rgba(7, 26, 58, .24);
}
.page-artists .ast-ph::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(circle at 78% 24%, rgba(255, 255, 255, .14), transparent 23rem),
        radial-gradient(circle at 12% 92%, rgba(126, 200, 255, .2), transparent 26rem);
}
.page-artists .ast-ph::after {
    z-index: 1;
    background: var(--for-you-hero-overlay);
}
.page-artists .ast-ph__backdrop {
    z-index: 0;
}
.page-artists .ast-ph__backdrop img {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(52%, 680px);
    object-position: center 24%;
    opacity: 0;
    filter: grayscale(.12) saturate(.88) contrast(1.08);
    transform: scale(1.075);
    transition: opacity 1.25s ease, transform 8s linear;
}
.page-artists .ast-ph__backdrop img.is-active {
    opacity: .52;
    transform: scale(1.035);
}
.page-artists .ast-ph__text {
    z-index: 3;
    max-width: 790px;
    padding: 42px clamp(30px, 4.2vw, 60px) 36px;
    box-sizing: border-box;
}
.page-artists .ast-ph__eyebrow {
    margin-bottom: 13px;
    padding: 0;
    color: #9ab3db;
    font-size: 7px;
    letter-spacing: .16em;
    background: none;
    border: 0;
}
.page-artists .ast-ph__eyebrow i {
    width: 21px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #72e3d0, #7aa7ff);
    box-shadow: none;
}
.page-artists .ast-ph__title {
    max-width: 770px;
    font-size: clamp(37px, 4.7vw, 61px);
    line-height: .99;
    letter-spacing: -.055em;
}
.page-artists .ast-ph__sub {
    max-width: 590px;
    margin-top: 14px;
    color: rgba(222, 233, 251, .7);
    font-size: 10px;
    line-height: 1.65;
}
.page-artists .ast-ph__actions {
    margin-top: 22px;
    gap: 9px;
}
.page-artists .ast-ph__cta,
.page-artists .ast-ph__secondary {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    font-size: 8px;
    font-weight: 800;
    text-decoration: none;
    border-radius: 10px;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.page-artists .ast-ph__cta {
    color: #102448;
    background: #fff;
    box-shadow: 0 9px 24px rgba(0, 0, 0, .2);
}
.page-artists .ast-ph__cta:hover {
    color: #102448;
    background: #edf4ff;
    transform: translateY(-2px);
}
.page-artists .ast-ph__secondary {
    color: #e9f1ff;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .07);
}
.page-artists .ast-ph__secondary:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, .34);
    background: rgba(255, 255, 255, .12);
}
.page-artists .ast-ph__badges {
    margin-left: 7px;
}
.page-artists .ast-ph__badge {
    min-width: 48px;
    display: grid;
    gap: 1px;
    padding: 0 9px;
    color: #fff;
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, .15);
    border-radius: 0;
}
.page-artists .ast-ph__badge strong {
    font-size: 13px;
    line-height: 1;
}
.page-artists .ast-ph__badge small {
    color: #8fa7cc;
    font-size: 6px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.page-artists .ast-ph__wave {
    width: min(490px, 75%);
    height: 27px;
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 23px;
    color: #8299be;
}
.page-artists .ast-ph__wave span {
    width: 3px;
    height: 24%;
    border-radius: 999px;
    background: linear-gradient(180deg, #83ecd8, #729bf0);
    opacity: .72;
}
.page-artists .ast-ph__wave span:nth-child(2),
.page-artists .ast-ph__wave span:nth-child(11) { height: 48%; }
.page-artists .ast-ph__wave span:nth-child(3),
.page-artists .ast-ph__wave span:nth-child(9) { height: 78%; }
.page-artists .ast-ph__wave span:nth-child(4),
.page-artists .ast-ph__wave span:nth-child(8) { height: 100%; }
.page-artists .ast-ph__wave span:nth-child(5),
.page-artists .ast-ph__wave span:nth-child(10) { height: 64%; }
.page-artists .ast-ph__wave span:nth-child(6) { height: 88%; }
.page-artists .ast-ph__wave span:nth-child(7),
.page-artists .ast-ph__wave span:nth-child(12) { height: 39%; }
.page-artists .ast-ph__wave::after {
    height: 1px;
    flex: 1;
    margin-left: 5px;
    content: "";
    background: linear-gradient(90deg, rgba(123, 160, 222, .52), transparent);
}
.page-artists .ast-ph__wave em {
    flex: 0 0 auto;
    font-size: 6px;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
}
.page-artists .ast-ph__feature {
    position: absolute;
    z-index: 4;
    top: 50%;
    right: clamp(27px, 3.5vw, 50px);
    width: 244px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 16px;
    background: rgba(4, 16, 38, .56);
    box-shadow: 0 22px 46px rgba(0, 0, 0, .34);
    backdrop-filter: blur(14px);
    transform: translateY(-50%);
}
.page-artists a.ast-ph__feature:hover,
.page-artists a.ast-ph__feature:focus-visible {
    transform: translateY(calc(-50% - 4px));
}
.page-artists .ast-ph__feature-art {
    height: 205px;
    border-radius: 15px 15px 0 0;
}
.page-artists .ast-ph__feature-info {
    min-height: 59px;
    padding: 10px 13px;
    border-radius: 0 0 15px 15px;
    background: rgba(3, 14, 34, .8);
}
.page-artists .ast-ph__feature-info strong {
    font-size: 12px;
}
.page-artists .ast-filter-bar__right {
    flex-shrink: 0;
}
.page-artists .ast-sort-select {
    min-width: 120px;
}

@media (max-width: 820px) {
    .page-artists .ast-ph {
        min-height: 330px;
    }
    .page-artists .ast-ph__text {
        max-width: none;
        padding: 34px 25px 30px;
        box-sizing: border-box;
    }
    .page-artists .ast-ph__title {
        font-size: clamp(32px, 6vw, 45px);
    }
    .page-artists .ast-ph__feature {
        right: 20px;
        width: 166px;
    }
    .page-artists .ast-ph__feature-art {
        height: 158px;
    }
    .page-artists .ast-ph__wave {
        width: 82%;
    }
}

@media (max-width: 580px) {
    .page-artists .ast-ph {
        min-height: 330px;
    }
    .page-artists .ast-ph__text {
        padding: 29px 21px 0;
    }
    .page-artists .ast-ph__title {
        max-width: 440px;
        font-size: 34px;
    }
    .page-artists .ast-ph__sub {
        font-size: 9px;
    }
    .page-artists .ast-ph__badges,
    .page-artists .ast-ph__wave {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-artists :is(.ast-ph__cta, .ast-ph__secondary) {
        transition: none;
    }
    .page-artists .ast-ph__backdrop img {
        transition: none;
    }
}

/* Keep the desktop artist catalog aligned with the songs catalog shell. */
@media (min-width: 1121px) {
    .page-artists .content {
        padding-top: 0;
    }
    .page-artists .ast {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }
    .page-artists .ast-ph {
        min-height: 310px;
        border-radius: 20px;
    }
    .page-artists .ast-ph__text {
        padding-block: 38px;
    }
    .page-artists .ast-page-nav {
        margin-top: 20px;
    }
    .page-artists .ast-directory-panel {
        padding: 25px;
    }
    .page-artists .ast-directory-panel .ast-grid:not(.ast-grid--list) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 20px;
    }
}

/* Let radio use the same full-width desktop shell as songs. */
@media (min-width: 1121px) {
    .page-radio .content {
        padding-top: 0;
    }
    .page-radio .rdp {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }
}

/* Give the split authentication card room to breathe on large screens. */
@media (min-width: 1200px) {
    .auth-center {
        width: min(1320px, calc(100% - 48px));
        grid-template-columns: minmax(0, 1.12fr) minmax(440px, .88fr);
    }
}

@media (max-width: 760px) {
    .page-event-detail .evtd-gallery__slide img {
        aspect-ratio: 16 / 7;
    }
}