/* Shared workflow finishing; retain the catalogue's existing visual identity. */
:root {
    --workflow-border: #dce3ed;
    --workflow-muted: #526176;
    --workflow-accent: #003366;
}
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #2476c8;
    outline-offset: 3px;
}
:where(button, input, select, textarea) { font: inherit; }
button:disabled { cursor: wait; opacity: .65; }
.player-bar button:disabled { cursor: not-allowed; }
.user-menu__dropdown { max-width: calc(100vw - 24px); }
:is(.user-menu__avatar, .user-menu__header-avatar, .avatar)[src$="/images/default-avatar.svg"] {
    object-fit: contain;
    background: #edf3fc;
    border-color: #cbd8ec;
}
.sidebar .nav-item__icon > svg { max-width: 100%; max-height: 100%; }
:where(.acp-table-wrap) { overflow-x: auto; }
.page-billing .acp-table { min-width: 620px; }
.page-billing .acp-table td { padding-block: 16px; vertical-align: middle; }
.page-billing .acp-table td:last-child { white-space: nowrap; }
.billing-notice {
    padding: 14px 18px;
    margin-block: 16px;
    background: #edf5ff;
    color: #123d69;
    border: 1px solid #c4dcf7;
    border-radius: 12px;
}
.billing-dialog {
    width: min(460px, calc(100vw - 32px));
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    padding: 28px;
    border: 1px solid var(--workflow-border);
    border-radius: 20px;
    color: #15243b;
    background: #fff;
    box-shadow: 0 24px 80px #061b3b40;
}
.billing-dialog::backdrop { background: #07162b99; backdrop-filter: blur(4px); }
.billing-dialog h2 { font-size: 1.4rem; line-height: 1.3; margin: 0 0 12px; }
.billing-dialog p { line-height: 1.65; color: var(--workflow-muted); }
.billing-dialog label { display: block; font-weight: 600; margin-top: 20px; }
.billing-dialog label[hidden] { display: none; }
.billing-dialog :is(input, select) {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid #b7c5d7;
    border-radius: 10px;
    background: #fff;
    color: #15243b;
    font-size: 16px;
}
.billing-dialog__note { font-size: .8rem; }
.billing-dialog__actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.billing-dialog__actions button {
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--workflow-border);
    border-radius: 10px;
    background: #f5f7fa;
    color: #15243b;
    cursor: pointer;
    font-weight: 600;
}
.billing-dialog__actions button[type="submit"] {
    background: var(--workflow-accent);
    border-color: var(--workflow-accent);
    color: #fff;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}
@media (max-width: 600px) {
    .page-billing .sp-wrap { padding-inline: 16px; }
    .billing-dialog { padding: 22px; }
}
.billing-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    padding: 18px;
    align-items: end;
}
.billing-fields label { display: grid; gap: 6px; }
.billing-fields input:not([type="checkbox"]), .billing-fields select {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    color: inherit;
    background: var(--color-bg, #141820);
    border: 1px solid var(--color-border, #414755);
    border-radius: 6px;
}

/* Browse finishing layer: loaded after main.css so the existing artwork and
   brand treatments remain intact without extending its legacy cascade. */
.music-browse {
    --music-ink: #15243b;
    --music-muted: #526176;
    --music-line: #dce3ed;
    --music-accent: #174ea6;
    color: var(--music-ink);
}
.music-browse .app-card { height: 100dvh; }
.music-browse .main-wrapper,
.music-browse .content { min-width: 0; }
.music-browse .content {
    padding: clamp(16px, 2.2vw, 32px);
    scroll-padding-block: 24px;
}
.music-browse .content > * { animation: none; }
.music-browse .content [id] { scroll-margin-block-start: 24px; }
.music-browse :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #2463c5;
    outline-offset: 3px;
}
.music-browse .sidebar :is(a, button):focus-visible {
    outline-color: #a9d6ff;
}
.music-browse .sidebar .nav-section__title { color: #a9bbd2; }
.music-browse .sidebar .nav-item { color: #d7e3f4; }
.music-browse .sidebar .nav-item.active { color: #fff; }

.music-browse-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: 24px;
    padding: 5px;
    border: 1px solid var(--music-line);
    border-radius: 12px;
    background: #fff;
    width: fit-content;
    max-width: 100%;
}
.music-browse-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 16px;
    border-radius: 8px;
    color: var(--music-muted);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 650;
    text-decoration: none;
}
.music-browse-nav a:hover { color: var(--music-accent); background: #f3f6fb; }
.music-browse-nav a[aria-current="page"] {
    color: #123f83;
    background: #eaf1fe;
    box-shadow: inset 0 -2px 0 #2463c5;
}

.music-browse .content :is(.hm-hero__title, .sng-page-header__title,
    .alb-hero__title, .ast-ph__title, .rdp-hero__title, .dsc-hero__title) {
    font-size: clamp(30px, 3.4vw, 48px);
    line-height: 1.12;
    letter-spacing: -.035em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.music-browse .content :is(.hm-hero__sub, .sng-page-header__sub,
    .alb-hero__sub, .ast-ph__sub, .rdp-hero__sub, .dsc-hero__tagline) {
    max-width: 60ch;
    color: #e0e9f8;
    font-size: 14px;
    line-height: 1.75;
}
.music-browse .content :is(.hm-hero__primary, .hm-hero__secondary,
    .sng-page-header__cta, .alb-hero__cta, .ast-ph__cta,
    .ast-ph__secondary, .rdp-hero__browse, .dsc-btn) {
    min-height: 44px;
    font-size: 13px;
    line-height: 1.4;
}
.music-browse .content :is(.hm-section__title, .dsc-section-title,
    .alb-section__heading h2, .sng-catalog-heading h2,
    .ast-directory-heading h2, .rdp-section__title) {
    color: var(--music-ink);
    font-size: clamp(21px, 2vw, 28px);
    line-height: 1.25;
    letter-spacing: -.025em;
}
.music-browse .content :is(.hm-section__heading > p, .dsc-section-heading > p,
    .alb-section__heading p, .sng-catalog-heading > div > p:last-child,
    .ast-directory-heading__main > p, .rdp-section__heading-copy > p) {
    color: var(--music-muted);
    font-size: 13px;
    line-height: 1.7;
}
.music-browse .content :is(.hm-section__hd, .dsc-section-hd,
    .alb-section__heading, .sng-catalog-heading, .rdp-section__hd) {
    flex-wrap: wrap;
    gap: 16px;
}
.music-browse .content :is(.hm-section__see-all, .dsc-see-all,
    .hm-songs-card__see-all, .hm-playlists-card__see-all) {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--music-accent);
    font-size: 12px;
}

.music-browse .content :is(.sng-card-grid, .alb-grid, .rdp-grid:not(.rdp-grid--list)) {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
    gap: 20px;
}
.music-browse.page-artists .ast-directory-panel .ast-grid:not(.ast-grid--list) {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
    gap: 20px;
}
.music-browse .content :is(.sng-card, .alb-card, .ast-card, .rdp-card, .dsc-card) {
    min-width: 0;
    border-color: var(--music-line);
    box-shadow: 0 2px 8px #15243b08;
}
.music-browse .content :is(.sng-card, .alb-card, .ast-card, .rdp-card, .dsc-card):hover {
    transform: none;
    border-color: #a6bad8;
    box-shadow: 0 5px 16px #15243b10;
}
.music-browse .content :is(.sng-card, .alb-card, .ast-card, .rdp-card, .dsc-card):focus-within {
    border-color: #2463c5;
}
.music-browse.page-songs .sng-card__cover { aspect-ratio: 1; }
.music-browse.page-songs .sng-card__body { padding: 14px; }
.music-browse.page-songs .sng-card__footer { flex-wrap: wrap; gap: 8px; }
.music-browse .content :is(.sng-card__title, .alb-card__title,
    .rdp-card__name, .dsc-card__title) {
    color: var(--music-ink);
    font-size: 15px;
    line-height: 1.45;
    font-weight: 700;
}
.music-browse.page-artists .ast-grid:not(.ast-grid--list) .ast-card__name {
    color: var(--music-ink);
    font-size: 15px;
    line-height: 1.45;
}
.music-browse .content :is(.sng-card__artist, .alb-card__artist,
    .rdp-card__desc, .dsc-card__artist, .sng-card__plays,
    .sng-card__dur, .alb-card__meta, .rdp-card__meta) {
    color: var(--music-muted);
    font-size: 12px;
    line-height: 1.55;
}
.music-browse.page-artists .ast-grid:not(.ast-grid--list)
    :is(.ast-card__genre, .ast-card__country, .ast-card__track-count) {
    color: var(--music-muted);
    font-size: 12px;
    line-height: 1.55;
}
.music-browse .content :is(.sng-card__like, .sng-card__add-pl,
    .sng-card__share, .rdp-card__like-btn, .hm-song__action-btn) {
    min-width: 36px;
    min-height: 36px;
}
.music-browse.page-songs .sng-genre-chip {
    font-size: 10px;
    letter-spacing: .025em;
}
.music-browse.page-songs .sng-card__play {
    opacity: 1;
    transform: none;
}
.music-browse.page-songs .sng-card__play svg { opacity: 1; transform: none; }
.music-browse .content :is(.sng-card, .rdp-card):focus-within
    :is(.sng-card__play, .rdp-card__play-btn) {
    opacity: 1;
    transform: none;
}
.music-browse .dsc-card:focus-within .dsc-card__overlay { opacity: 1; }
.music-browse.page-artists .ast-ph__text { max-width: calc(100% - 280px); }

.music-browse .hm-songs-card,
.music-browse .hm-playlists-card {
    border: 1px solid var(--music-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 8px #15243b08;
}
.music-browse .hm-songs-card .hm-song-row {
    min-height: 72px;
    border-bottom-color: #edf1f6;
}
.music-browse .hm-song-row:focus-within { background: #f0f5fd; }
.music-browse .hm-song-row:focus-within .hm-song__actions { opacity: 1; }
.music-browse .hm-song-row:focus-within .hm-song__dur { opacity: 0; }
.music-browse .hm-song-row:focus-within .hm-song__play-btn { opacity: 1; transform: none; }
.music-browse .content :is(.hm-song__artist, .dsc-chart__artist) {
    color: var(--music-muted);
    font-size: 12px;
    line-height: 1.6;
}
.music-browse .dsc-chart__item {
    grid-template-columns: 22px 44px minmax(0, 1fr) auto 16px;
    gap: 8px;
    min-height: 72px;
    padding: 12px 8px;
    border-bottom: 1px solid #edf1f6;
    border-radius: 8px;
}
.music-browse .dsc-chart__info { min-width: 0; }
.music-browse .dsc-chart__actions {
    grid-column: 3 / -1;
    width: auto;
    justify-content: flex-start;
    gap: 4px;
    opacity: 1;
}
.music-browse .dsc-chart__action-btn { width: 36px; height: 36px; }
.music-browse .dsc-chart__tip-btn { min-height: 36px; padding-inline: 10px; }
.music-browse .dsc-chart__item:focus-within { background: #f0f5fd; }
.music-browse .dsc-chart__item:focus-within .dsc-chart__play-btn { opacity: 1; }
.music-browse .content :is(.hm-song__dur, .dsc-chart__plays, .dsc-chart__rank) {
    font-variant-numeric: tabular-nums;
}

.music-empty,
.music-browse .content :is(.alb-empty, .ast-empty, .sng-no-results, .alb-no-results) {
    padding: clamp(24px, 4vw, 48px);
    border: 1px dashed #c2cedf;
    border-radius: 16px;
    color: var(--music-muted);
    background: #f8fafd;
    text-align: center;
    line-height: 1.7;
}
.music-empty { margin-block: 16px; }
#for-you-list > .music-empty { flex: 1 0 100%; box-sizing: border-box; }
.music-empty--compact { padding: 28px 20px; }
.music-empty strong { display: block; color: var(--music-ink); font-size: 17px; }
.music-empty p { max-width: 54ch; margin: 8px auto 12px; font-size: 14px; }
.music-empty a,
.music-browse .music-text-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--music-accent);
    font-size: 13px;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.music-empty p a { display: inline; min-height: 0; font-size: inherit; }

@media (max-width: 900px) {
    .music-browse.page-artists .ast-ph__feature { display: none; }
    .music-browse.page-artists .ast-ph__text { max-width: 100%; }
    .music-browse .content-grid,
    .music-browse .dsc-two-col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .music-browse .content { padding: 16px 14px 28px; }
    .music-browse-nav { width: 100%; margin-bottom: 20px; }
    .music-browse-nav a { flex: 1 0 28%; min-height: 44px; padding-inline: 8px; }
    .music-browse .content :is(.sng-card-grid, .alb-grid, .rdp-grid:not(.rdp-grid--list)) { gap: 14px; }
    .music-browse .content :is(.hm-hero__body, .alb-hero__body,
        .sng-page-header__content, .rdp-hero__idle-left, .dsc-hero__content) {
        padding: 26px 20px;
    }
    .music-browse .content :is(.hm-hero__sub, .alb-hero__sub,
        .sng-page-header__sub, .ast-ph__sub, .rdp-hero__sub) { font-size: 14px; }
    .music-browse .hm-nav-tiles { flex-wrap: wrap; overflow: visible; gap: 8px; }
    .music-browse .hm-nav-tile { flex: 1 0 40%; min-height: 40px; font-size: 12px; }
    .music-browse .dsc-chart__item {
        padding: 12px 4px;
    }
}
@media (hover: none), (pointer: coarse) {
    .music-browse .dsc-card__overlay { opacity: 1; background: transparent; }
    .music-browse .content :is(.rdp-card__play-btn, .dsc-chart__play-btn,
        .hm-song__actions, .song-row__actions) { opacity: 1; }
    .music-browse .content :is(.sng-card__like, .sng-card__add-pl,
        .sng-card__share, .rdp-card__like-btn, .hm-song__action-btn) {
        min-width: 40px;
        min-height: 40px;
    }
    .music-browse .hm-song__dur { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    .music-browse .content :is(.sng-card, .alb-card, .ast-card, .rdp-card, .dsc-card):hover {
        transform: none;
    }
}