/*
  Picobeats Template Styles
  Quick reference:
  1. Theme tokens and global shell
  2. Header, sidebar, and player
  3. Homepage banners, carousels, cards, and menus
  4. Genre, DJ, mixtape, info, library, and account pages
  5. Auth pages
  6. Final dark-theme overrides
*/

/*
  Laravel CSS cut guide:
  - CUT 01 THEME CORE: tokens, root theme variables, body, links, shared chrome.
    Suggested Laravel asset: resources/css/picobeats/theme-core.css
  - CUT 02 PUBLIC SHELL: public header, sidebar, footer player, homepage, cards, modals.
    Suggested Laravel asset: resources/css/picobeats/public.css
  - CUT 03 CONTENT PAGES: genres, DJs, mixtapes, charts, libraries, info pages, account pages.
    Suggested Laravel asset: resources/css/picobeats/pages.css
  - CUT 04 AUTH: login, signup, forgot/reset password, verification pages.
    Suggested Laravel asset: resources/css/picobeats/auth.css
  - CUT 05 ADMIN: admin dashboard/template shell and adaptive UI tester.
    Suggested Laravel asset: resources/css/picobeats/admin.css
  - CUT 06 FINAL OVERRIDES: dark theme repairs, width caps, late layout fixes.
    Suggested Laravel asset: resources/css/picobeats/overrides.css
*/

/* LARAVEL CUT 01 START: theme-core.css - tokens and global shell. */
/* Theme tokens shared across pages, cards, forms, player, and dark mode. */
:root {
    --font-primary: 'Roboto', sans-serif;
    --color-primary: #2f8bc5;
    --color-hover: #2980b9;
    --pb-blue: #2f8bc5;
    --pb-blue-2: #5daee2;
    --pb-link-hover: #2f8bc5;
    --scrollbar-thumb: #888;
    --color-error: #d83d5a;
    --transition-theme: background-color 0.3s ease, color 0.3s ease;
    --pb-sidebar-width: 220px;
    --pb-header-height: 64px;
    --pb-player-height: 82px;
    --pb-footer-height: var(--pb-player-height);
    --pb-page: #f3f6fa;
    --pb-surface: #ffffff;
    --pb-surface-2: #edf4fa;
    --pb-text: #101820;
    --pb-muted: #607389;
    --pb-border: rgba(16, 24, 32, 0.12);
    --pb-player-bg: #05070a;
    --pb-player-surface: #0d1117;
    --pb-player-text: #ffffff;
    --pb-player-muted: #aab7c4;
    --pb-player-border: rgba(255, 255, 255, 0.12);
    --bg-primary: var(--pb-surface);
    --border: var(--pb-border);
    --text-primary: var(--pb-text);
    --text-secondary: var(--pb-muted);
    --surface-1: #ffffff;
    --surface-2: #f6f8fb;
    --surface-3: #eef2f7;
    --text-strong: #111827;
    --text-muted: #6b7280;
    --text-inverse: #ffffff;
    --status-success-bg: #ecfdf3;
    --status-success-border: rgba(22, 101, 52, 0.16);
    --status-success-text: #166534;
    --status-danger-bg: #fef2f2;
    --status-danger-border: rgba(153, 27, 27, 0.16);
    --status-danger-text: #991b1b;
    --status-warning-bg: #fffbeb;
    --status-warning-border: rgba(146, 64, 14, 0.18);
    --status-warning-text: #92400e;
    --status-info-bg: #eff6ff;
    --status-info-border: rgba(29, 78, 216, 0.18);
    --status-info-text: #1d4ed8;
    --pb-elev-1: 0 10px 24px rgba(15, 23, 42, 0.08);
    --pb-elev-2: 0 16px 36px rgba(15, 23, 42, 0.14);
    --pb-grid-artwork-height: 150px;
    --pb-grid-avatar-size: 110px;
    --pb-inline-avatar-size: 25px;
    --pb-chart-artwork-size: 140px;

    --pb-skeleton-bg: rgba(0, 0, 0, 0.08);
    --pb-skeleton-shine: rgba(255, 255, 255, 0.25);

    /* Global mobile polish tokens */
    --pb-touch-target: 44px;
    --pb-mobile-space-1: 6px;
    --pb-mobile-space-2: 10px;
    --pb-mobile-space-3: 14px;
    --pb-mobile-space-4: 18px;
    --pb-mobile-radius: 12px;
}

/* Base dark-mode token values. Later dark overrides handle legacy fixed colors. */
html[data-theme='dark'] {
    --pb-page: #05070a;
    --pb-surface: #0d1117;
    --pb-surface-2: #141c26;
    --pb-text: #f8fbff;
    --pb-muted: #aab7c4;
    --pb-border: rgba(255, 255, 255, 0.12);
    --pb-player-bg: #030405;
    --pb-player-surface: #090d12;
    --pb-player-text: #ffffff;
    --pb-player-muted: #aab7c4;
    --pb-player-border: rgba(255, 255, 255, 0.14);
    --bg-primary: var(--pb-surface);
    --border: var(--pb-border);
    --text-primary: var(--pb-text);
    --text-secondary: var(--pb-muted);
    --surface-1: #111923;
    --surface-2: #162232;
    --surface-3: #1f2d40;
    --text-strong: #ffffff;
    --pb-skeleton-bg: rgba(255, 255, 255, 0.06);
    --pb-skeleton-shine: rgba(255, 255, 255, 0.14);
}

/* Light-mode skeleton tokens and default preload shimmer colors. */
html[data-theme='light'] {
    --pb-skeleton-bg: rgba(0, 0, 0, 0.08);
    --pb-skeleton-shine: rgba(255, 255, 255, 0.45);
    /* Skeleton Preloaders */
}

/* Global document defaults. */
html {
    scroll-behavior: smooth;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--pb-page);
    color: var(--pb-text);
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;
    letter-spacing: 0;
    padding-bottom: var(--pb-footer-height);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(47, 139, 197, 0.14), transparent 320px), linear-gradient(135deg, rgba(3, 4, 5, 0.06), transparent 48%);
}

.visually-hidden {
    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;
}

/* Persistent Inertia navigation skeleton. Header, sidebar, and player stay usable. */
.pb-content-skeleton {
    position: fixed;
    z-index: 2500;
    top: var(--pb-header-height);
    right: 0;
    bottom: var(--pb-player-height);
    left: var(--pb-sidebar-width);
    overflow: hidden;
    padding: 24px;
    background: color-mix(in srgb, var(--pb-page) 96%, transparent);
    pointer-events: none;
}

.pb-content-skeleton__inner {
    width: min(100%, 1180px);
    margin-inline: auto;
}

.pb-content-skeleton__line,
.pb-content-skeleton__hero,
.pb-content-skeleton__artwork {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: var(--pb-skeleton-bg);
}

.pb-content-skeleton__line::after,
.pb-content-skeleton__hero::after,
.pb-content-skeleton__artwork::after {
    position: absolute;
    inset: 0;
    content: '';
    background: linear-gradient(90deg, transparent, var(--pb-skeleton-shine), transparent);
    transform: translateX(-100%);
    animation: pb-content-skeleton-shimmer 1.35s ease-in-out infinite;
}

.pb-content-skeleton__line--heading {
    width: min(42%, 360px);
    height: 30px;
}

.pb-content-skeleton__line--copy {
    width: min(62%, 560px);
    height: 14px;
    margin-top: 12px;
}

.pb-content-skeleton__hero {
    width: 100%;
    height: 150px;
    margin-top: 24px;
}

.pb-content-skeleton__line--section {
    width: min(30%, 250px);
    height: 24px;
    margin-top: 28px;
}

.pb-content-skeleton__grid {
    display: grid;
    margin-top: 16px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.pb-content-skeleton__card {
    overflow: hidden;
    padding-bottom: 14px;
    border: 1px solid var(--pb-border);
    border-radius: 8px;
    background: var(--pb-surface);
}

.pb-content-skeleton__artwork {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0;
}

.pb-content-skeleton__card .pb-content-skeleton__line {
    margin-left: 12px;
}

.pb-content-skeleton__line--title {
    width: calc(82% - 12px);
    height: 15px;
    margin-top: 14px;
}

.pb-content-skeleton__line--meta {
    width: calc(54% - 12px);
    height: 12px;
    margin-top: 12px;
}

.pb-content-skeleton__line--stats {
    width: calc(68% - 12px);
    height: 12px;
    margin-top: 20px;
}

.pb-content-skeleton__table {
    overflow: hidden;
    margin-top: 28px;
    border: 1px solid var(--pb-border);
    border-radius: 8px;
    background: var(--pb-surface);
}

.pb-content-skeleton__table-head,
.pb-content-skeleton__table-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 0.8fr;
    gap: 24px;
    padding: 16px;
}

.pb-content-skeleton__table-head {
    height: 48px;
    background: var(--pb-skeleton-bg);
}

.pb-content-skeleton__table-row {
    min-height: 64px;
    align-items: center;
    border-top: 1px solid var(--pb-border);
}

.pb-content-skeleton__table-row .pb-content-skeleton__line {
    width: 100%;
    height: 14px;
}

body.pb-auth-body .pb-content-skeleton,
body:has(.pb-admin-shell) .pb-content-skeleton {
    top: 0;
    left: 0;
}

@keyframes pb-content-skeleton-shimmer {
    to {
        transform: translateX(100%);
    }
}

@media (max-width: 991.98px) {
    .pb-content-skeleton {
        left: 0;
        padding: 18px;
    }

    .pb-content-skeleton__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .pb-content-skeleton {
        padding: 14px;
    }

    .pb-content-skeleton__hero {
        height: 112px;
    }

    .pb-content-skeleton__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .pb-content-skeleton__card:nth-child(n + 5) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pb-content-skeleton__line::after,
    .pb-content-skeleton__hero::after,
    .pb-content-skeleton__artwork::after {
        animation: none;
        content: none;
    }
}

a {
    color: inherit;
    text-decoration: none;
}
.page-wrapper {
    min-height: 100vh;
}

/* LARAVEL CUT 02 START: public.css - public header, sidebar, player, homepage, cards, and modals. */
header.top-menu {
    position: fixed;
    top: 0;
    right: 0;
    left: var(--pb-sidebar-width);
    height: var(--pb-header-height);
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--pb-border);
    box-shadow: 0 8px 24px rgba(16, 24, 32, 0.08);
    backdrop-filter: blur(14px);
    z-index: 3001;
    transition:
        left 0.2s ease,
        width 0.2s ease;
    padding-inline: 14px !important;
}

.logo-img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.menu-btn {
    width: 42px;
    height: 42px;
    border: 1px solid var(--pb-border);
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: var(--pb-surface);
    color: var(--pb-text);
}

.pb-header-search {
    flex: 1;
    max-width: 560px;
    margin-inline: 1rem;
}

.pb-header-search__field {
    height: 42px;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid rgba(47, 139, 197, 0.24);
    border-radius: 8px;
    padding-inline: 0.85rem;
    background: var(--pb-surface-2);
}

.pb-header-search__input {
    border: 0;
    background: transparent;
    outline: 0;
    width: 100%;
    color: var(--pb-text);
    font-size: 0.95rem;
}

.pb-header-search__icon,
.pb-header-search-mini {
    color: var(--pb-muted);
}

.pb-header-search-mini {
    display: none;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid var(--pb-border);
    border-radius: 8px;
}

.btn-upload {
    --bs-btn-bg: var(--pb-blue);
    --bs-btn-border-color: var(--pb-blue);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #1178db;
    --bs-btn-hover-border-color: #1178db;
    border-radius: 8px;
    font-weight: 700;
}

.pb-signin-btn {
    border-radius: 8px;
    font-weight: 650;
}

/* Back to Top Button */
.pb-back-to-top {
    position: fixed;
    right: 18px;
    bottom: calc(var(--pb-player-height) + env(safe-area-inset-bottom, 0px) + 18px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%) !important;
    color: #ffffff !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(14px) scale(0.96);
    z-index: 3790;
    box-shadow: 0 18px 34px rgba(10, 20, 34, 0.28);
    transition:
        opacity 0.22s ease,
        visibility 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.pb-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.pb-back-to-top i {
    font-size: 1.1rem;
    line-height: 1;
}

.clamp-text {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.pb-back-to-top:hover,
.pb-back-to-top:focus,
.pb-back-to-top:focus-visible {
    color: #ffffff !important;
    box-shadow: 0 22px 38px rgba(37, 99, 235, 0.34);
    transform: translateY(-2px) scale(1.02);
}

.pb-back-to-top:focus-visible {
    outline: 0;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.22),
        0 22px 38px rgba(37, 99, 235, 0.34);
}

@media (max-width: 767.98px) {
    .pb-back-to-top {
        right: 12px;
        bottom: calc(var(--pb-player-height) + env(safe-area-inset-bottom, 0px) + 12px);
        width: 46px;
        height: 46px;
    }
}

/* Admin shell v2: compact grouped navigation with a responsive drawer. */
:root {
    --pb-admin-sidebar-expanded: 250px;
    --pb-admin-sidebar-collapsed: 72px;
    --pb-admin-topbar-height: 58px;
    --pb-admin-accent: #2563eb;
    --pb-admin-page: #f7f9fc;
    --pb-admin-surface: #ffffff;
    --pb-admin-border: #e5e7eb;
    --pb-admin-text: #111827;
    --pb-admin-muted: #64748b;
}

html[data-theme='dark'] {
    --pb-admin-page: #0f1722;
    --pb-admin-surface: #172231;
    --pb-admin-border: #2b3a4d;
    --pb-admin-text: #f8fafc;
    --pb-admin-muted: #9caabd;
}

.pb-admin-body {
    background: var(--pb-admin-page);
    color: var(--pb-admin-text);
}

.pb-admin-shell {
    grid-template-columns: var(--pb-admin-sidebar-expanded) minmax(0, 1fr);
    background: var(--pb-admin-page);
}

.pb-admin-shell.is-sidebar-collapsed {
    grid-template-columns: var(--pb-admin-sidebar-collapsed) minmax(0, 1fr);
}

.pb-admin-sidebar {
    height: 100vh;
    height: 100dvh;
    border-color: var(--pb-admin-border);
    background: var(--pb-admin-surface);
}

.pb-admin-brand {
    min-height: var(--pb-admin-topbar-height);
    height: var(--pb-admin-topbar-height);
    padding: 8px 14px;
    border-color: var(--pb-admin-border);
}

.pb-admin-brand img {
    width: 136px;
    height: 32px;
}

.pb-admin-sidebar-toggle,
.pb-admin-icon-btn,
.pb-admin-mobile-toggle,
.pb-admin-mobile-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pb-admin-border);
    border-radius: 8px;
    background: var(--pb-admin-surface);
    color: var(--pb-admin-text);
    cursor: pointer;
}

.pb-admin-sidebar-toggle,
.pb-admin-mobile-toggle,
.pb-admin-mobile-close {
    width: 36px;
    height: 36px;
}

.pb-admin-mobile-toggle,
.pb-admin-mobile-close {
    display: none;
}

.pb-admin-sidebar-toggle:hover,
.pb-admin-sidebar-toggle:focus-visible,
.pb-admin-icon-btn:hover,
.pb-admin-icon-btn:focus-visible,
.pb-admin-mobile-toggle:hover,
.pb-admin-mobile-toggle:focus-visible,
.pb-admin-mobile-close:hover,
.pb-admin-mobile-close:focus-visible {
    border-color: var(--pb-admin-accent);
    color: var(--pb-admin-accent);
}

.pb-admin-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    gap: 2px;
    padding: 16px 10px;
}

.pb-admin-nav-group {
    display: grid;
    gap: 2px;
}

.pb-admin-nav-group__label {
    padding: 0 12px 3px;
    color: var(--pb-admin-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pb-admin-nav a {
    position: relative;
    min-height: 36px;
    padding: 0 12px;
    color: var(--pb-admin-muted);
    font-size: 13px;
    font-weight: 700;
}

.pb-admin-nav a i {
    width: 18px;
    color: currentColor;
    text-align: center;
}

.pb-admin-nav a:hover,
.pb-admin-nav a:focus-visible,
.pb-admin-nav a.active {
    background: color-mix(in srgb, var(--pb-admin-accent) 12%, transparent);
    color: var(--pb-admin-accent);
}

.pb-admin-shell.is-sidebar-collapsed .pb-admin-nav {
    padding-inline: 8px;
}

.pb-admin-shell.is-sidebar-collapsed .pb-admin-nav-group__label {
    display: none;
}

.pb-admin-shell.is-sidebar-collapsed .pb-admin-nav-group {
    gap: 4px;
}

.pb-admin-shell.is-sidebar-collapsed .pb-admin-nav a {
    width: 52px;
    height: 40px;
    padding: 0;
}

.pb-admin-shell.is-sidebar-collapsed .pb-admin-nav a[data-pb-tooltip]::after {
    content: attr(data-pb-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    z-index: 100;
    display: none;
    width: max-content;
    max-width: 220px;
    padding: 6px 9px;
    border-radius: 6px;
    background: #111827;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}

.pb-admin-shell.is-sidebar-collapsed .pb-admin-nav a[data-pb-tooltip]:hover::after,
.pb-admin-shell.is-sidebar-collapsed .pb-admin-nav a[data-pb-tooltip]:focus-visible::after {
    display: block;
}

.pb-admin-sidebar__footer {
    border-color: var(--pb-admin-border);
    color: var(--pb-admin-muted);
}

.pb-admin-topbar {
    min-height: var(--pb-admin-topbar-height);
    height: var(--pb-admin-topbar-height);
    padding: 8px 20px;
    border-color: var(--pb-admin-border);
    background: color-mix(in srgb, var(--pb-admin-surface) 94%, transparent);
}

.pb-admin-search {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 520px;
    color: var(--pb-admin-muted);
}

.pb-admin-search input {
    min-height: 36px;
    border-color: var(--pb-admin-border);
    background: var(--pb-admin-page);
    color: var(--pb-admin-text);
}

.pb-admin-icon-btn,
.pb-admin-primary-btn {
    min-height: 36px;
}

.pb-admin-primary-btn {
    border-color: var(--pb-admin-accent);
    background: var(--pb-admin-accent);
}

.pb-admin-content {
    min-width: 0;
    padding: 24px;
}

.pb-admin-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    color: var(--pb-admin-muted);
    font-size: 12px;
}

.pb-admin-breadcrumbs a + a::before {
    content: '/';
    margin-right: 6px;
}

.pb-user-menu__toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--pb-admin-text);
}

.pb-user-menu__toggle img,
.pb-admin-avatar-fallback {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    background: var(--pb-admin-accent);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    object-fit: cover;
}

.pb-user-dropdown__profile span {
    display: grid;
    gap: 2px;
}

.pb-user-dropdown__profile small {
    color: var(--pb-admin-muted);
    font-size: 11px;
}

@media (max-width: 767.98px) {
    .pb-admin-shell,
    .pb-admin-shell.is-sidebar-collapsed {
        display: block;
    }

    .pb-admin-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(var(--pb-admin-sidebar-expanded), 86vw);
        z-index: 4200;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }

    .pb-admin-shell.is-mobile-open .pb-admin-sidebar {
        transform: translateX(0);
    }

    .pb-admin-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 4100;
        display: none;
        background: rgba(15, 23, 42, 0.5);
    }

    .pb-admin-sidebar-overlay.is-visible {
        display: block;
    }

    .pb-admin-sidebar-toggle,
    .pb-admin-shell.is-sidebar-collapsed .pb-admin-brand a {
        display: none;
    }

    .pb-admin-mobile-toggle,
    .pb-admin-mobile-close {
        display: inline-flex;
    }

    .pb-admin-topbar {
        position: sticky;
        top: 0;
        padding-inline: 12px;
    }

    .pb-admin-search {
        flex: 1;
    }

    .pb-admin-search input {
        min-width: 0;
    }

    .pb-admin-primary-btn {
        width: 36px;
        padding: 0;
        font-size: 0;
    }

    .pb-admin-primary-btn i {
        font-size: 15px;
    }

    .pb-admin-content {
        padding: 16px 12px;
    }
}

@media (max-width: 390px) {
    .pb-admin-actions {
        gap: 4px;
    }

    .pb-admin-search input {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pb-admin-shell,
    .pb-admin-sidebar {
        transition: none;
    }
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: var(--pb-player-height);
    left: 0;
    z-index: 3000;
    width: var(--pb-sidebar-width);
    background: var(--pb-surface);
    border-right: 1px solid var(--pb-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.main-content {
    padding-top: var(--pb-header-height);
    padding-left: var(--pb-sidebar-width);
    padding-bottom: var(--pb-footer-height);
    min-height: calc(100vh - var(--pb-player-height));
    transition:
        padding-left 0.2s ease,
        padding-right 0.2s ease;
}

/* Music Player */
footer.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--pb-player-height);
    max-height: var(--pb-player-height);
    /* Always above the sidebar + overlay */
    z-index: 3001;
    background-color: var(--bg-primary);
    padding: 5px;
    text-align: center;
    transition: var(--transition-theme);
    /* Keep the fixed shell click-through; only explicit controls receive clicks. */
    pointer-events: none;
}

/* Desktop: keep footer progress tracker above the sidebar */
@media (min-width: 600px) {
    footer.footer {
        z-index: 3602;
    }
}

/* Progress Bar */
.progress-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 3px;
    background-color: var(--border);
    cursor: pointer;
    transition: background-color 0.2s ease;
    z-index: 2;
    pointer-events: auto;
}

.progress-bar {
    position: relative;
    height: 100%;
    background-color: var(--color-primary);
    width: 0;
    transition: width 0.1s linear;
    overflow: visible;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--color-primary);
    border: 2px solid var(--bg-primary);
    transform: translate(50%, -50%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    z-index: 3;
}

.progress-container:hover .progress-bar,
.progress-container:focus-within .progress-bar {
    opacity: 0.9;
}

/* Music Player Layout */
.musicPlayer {
    width: 100%;
    height: calc(var(--pb-player-height) - 3px);
    max-height: calc(var(--pb-player-height) - 3px);
    padding: 1px;
    box-sizing: border-box;
    overflow: visible;
    pointer-events: auto;
}

.nowPlayingBar {
    padding: 2px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    pointer-events: auto;
    overflow: visible;
}

.nowPlayingLeft {
    flex: 0 0 auto;
    min-width: 90px;
    max-width: 35%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.nowPlayingRight {
    flex: 0 0 auto;
    min-width: 90px;
    max-width: 35%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}

.media-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.media-info .artwork {
    height: 40px;
    width: 40px;
    border-radius: 2px;
    object-fit: cover;
    cursor: pointer;
    flex-shrink: 0;
}

.media-info .trackInfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    text-align: left;
    height: 40px;
    line-height: 13px;
    padding: 2px;
    flex: 1;
}

.media-info .trackInfo a {
    font-size: 12px;
    font-weight: bold;
    color: var(--text-primary);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-info .trackInfo a:hover,
.media-info .trackInfo a:focus {
    color: var(--color-primary);
}

.nowPlayingCenter {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.playerControls {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.control-icons {
    text-align: center;
    display: flex;
    align-items: center;
    gap: 8px;
}

.control-icons i,
.nowPlayingRight i {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: bold;
}

.control-icons i:hover,
.control-icons i:focus,
.nowPlayingRight i:hover,
.nowPlayingRight i:focus {
    color: var(--color-primary);
}

i.play-pause {
    font-size: 28px;
    font-weight: bold;
    padding: 4px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition:
        border 0.2s ease,
        transform 0.2s ease;
}

#pauseMusic i.play-pause,
#pauseMusicMobile i.play-pause {
    border: 2px solid var(--color-primary);
    /* Blue border when pause button is active */
}

i.play-pause:hover,
i.play-pause:focus {
    border: 2px solid var(--color-primary);
    transform: scale(1.1);
}

.repeat-btn {
    background-color: transparent;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    vertical-align: middle;
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.repeat-btn.active {
    color: var(--color-primary);
}

.repeat-btn .i-repeat-btn.bi-arrow-counterclockwise {
    color: var(--text-primary);
}

.repeat-btn .i-repeat-btn.bi-repeat-1 {
    color: var(--color-primary);
    font-weight: bold;
}

.repeat-btn .i-repeat-btn.bi-repeat {
    color: var(--color-primary);
    font-weight: bold;
}

.repeat-btn:hover,
.repeat-btn:focus {
    cursor: pointer;
    background-color: var(--border);
    border-radius: 50%;
}

.controlButton {
    background-color: transparent;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    vertical-align: middle;
}

.controlButton:hover,
.controlButton:focus {
    cursor: pointer;
}

.progressTime {
    color: var(--text-primary);
    font-size: 9px;
    min-width: 40px;
    text-align: center;
    font-weight: bold;
}

.nowPlayingRight .other-features {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nowPlayingRight .volumeBar {
    color: var(--color-primary);
    width: 150px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.nowPlayingRight .volumeBar .progressBar {
    width: 100px;
    height: 4px;
    background-color: var(--border);
    cursor: pointer;
}

.nowPlayingRight .volumeBar .progressBarBg {
    width: 100%;
    height: 100%;
    position: relative;
}

.nowPlayingRight .volumeBar .progress {
    position: relative;
    width: 50%;
    height: 100%;
    background-color: var(--color-primary);
    transition: width 0.1s linear;
    overflow: visible;
}

.nowPlayingRight .volumeBar .progress::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-primary);
    border: 2px solid var(--bg-primary);
    transform: translate(50%, -50%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.pb-queue-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    width: min(340px, 82vw);
    max-height: 320px;
    overflow: hidden;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
    z-index: 1200;
}

.pb-queue-menu--floating {
    position: fixed;
    right: 12px;
    bottom: calc(var(--pb-player-height) + 8px);
    z-index: 3800;
}

.pb-queue-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.pb-queue-menu__close i {
    font-size: 13px;
}

.pb-queue-menu__list {
    max-height: 270px;
    overflow-y: auto;
}

.pb-queue-menu__empty {
    padding: 12px;
    color: var(--text-secondary);
    font-size: 13px;
}

.pb-queue-item {
    width: 100%;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.pb-queue-item:last-child {
    border-bottom: 0;
}

.pb-queue-item:hover,
.pb-queue-item:focus {
    background: var(--surface-2);
}

.pb-queue-item--active {
    background: rgba(30, 144, 255, 0.12);
}

.pb-queue-item__artwork {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    flex: 0 0 50px;
}

.pb-queue-item__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.pb-queue-item__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-queue-item__artist {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-queue-item__genre {
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-queue-item__remove {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
}

.pb-queue-item__remove:hover,
.pb-queue-item__remove:focus {
    color: var(--color-primary);
    background: rgba(138, 180, 248, 0.14);
}

.pb-queue-item__remove:disabled {
    opacity: 1;
    color: var(--text-secondary);
    cursor: not-allowed;
}

/* Edit mixtape: audio preview controls aligned to footer player style */
.pb-edit-audio-player {
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    gap: 12px;
}

.pb-edit-audio-player__play {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.pb-edit-audio-player__play i {
    font-size: 1.2rem;
    line-height: 1;
}

.pb-edit-audio-player__time {
    min-width: 52px;
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
    color: var(--text-primary);
}

.pb-edit-audio-player__progress {
    flex: 1 1 auto;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    background: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) 0%, var(--border) 0%, var(--border) 100%);
    cursor: pointer;
}

.pb-edit-audio-player__progress::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: transparent;
}

.pb-edit-audio-player__progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 2px solid var(--bg-primary);
    margin-top: -5px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.pb-edit-audio-player__progress::-moz-range-track {
    height: 4px;
    border: 0;
    border-radius: 999px;
    background: var(--border);
}

.pb-edit-audio-player__progress::-moz-range-progress {
    height: 4px;
    border-radius: 999px;
    background: var(--color-primary);
}

.pb-edit-audio-player__progress::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 2px solid var(--bg-primary);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

i.repeat-active,
.i-liked {
    color: var(--color-primary) !important;
}

.footer-listen-later-btn .i-listen-later-active {
    color: var(--color-error) !important;
}

/* Dropdowns */
.dropdown-menu {
    background: var(--surface-1) !important;
    background-color: var(--surface-1) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-shadow: var(--pb-elev-2) !important;
    padding: 0.45rem !important;
    background-clip: padding-box;
    overflow: hidden;
    transition: var(--transition-theme);
}

.dropdown-menu.show {
    backdrop-filter: none;
}

.dropdown-menu > li {
    background: transparent !important;
}

.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item-text,
.dropdown-menu .dropdown-header {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 0 !important;
    border-radius: 12px;
}

.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item-text {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    margin: 0;
    padding: 0.72rem 0.85rem;
    line-height: 1.3;
    white-space: normal;
}

.dropdown-menu .dropdown-header {
    padding: 0.55rem 0.85rem 0.35rem;
    color: var(--text-secondary) !important;
    font-weight: 600;
}

.dropdown-menu a,
.dropdown-menu button,
.dropdown-menu .dropdown-item-text {
    color: var(--text-primary) !important;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-menu a:active,
.dropdown-menu button:hover,
.dropdown-menu button:focus,
.dropdown-menu button:active,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active {
    background-color: var(--surface-3) !important;
    color: var(--text-strong) !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none;
}

.dropdown-menu .dropdown-item i,
.dropdown-menu .dropdown-item-text i {
    flex: 0 0 auto;
}

.dropdown-menu .text-uppercase {
    background-color: transparent !important;
}

.dropdown-menu .dropdown-divider {
    border-color: var(--border) !important;
    opacity: 1;
    margin: 0.35rem -0.45rem;
}
/* Shell alignment fixes */
.header-brand,
.sidebar-brand,
.pb-header-actions,
.media-info,
.control-icons,
.other-features,
.volumeBar {
    min-width: 0;
}

.header-brand {
    flex: 0 0 auto;
    gap: 10px;
}

.header-logo-img,
.sidebar-logo-img {
    display: block;
}

.pb-header-actions {
    flex: 0 0 auto;
    gap: 8px;
}

.pb-header-icon-btn,
.pb-header-search-mini,
.controlButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--pb-text);
}

.pb-header-search__field,
.menu-btn,
.pb-signin-btn,
.btn-upload,
.pb-header-search-mini {
    min-height: 42px;
}

.sidebar-brand {
    height: var(--pb-header-height);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--pb-border);
}

.sidebar-brand-link {
    display: inline-flex;
    align-items: center;
}

.sidebar-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px !important;
}

.sidebar .nav-link {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 2px;
    border-radius: 8px;
    color: var(--pb-muted);
    font-weight: 650;
    padding: 7px 10px;
}

.sidebar .nav-link:hover,
.sidebar .nav-link:focus,
.sidebar .nav-link.active {
    background: rgba(30, 144, 255, 0.12);
    color: var(--pb-blue);
}

.sidebar-footer {
    flex: 0 0 auto;
    padding: 12px;
    border-top: 1px solid var(--pb-border);
    color: var(--pb-muted);
    font-size: 12px;
}

.company-page-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 6px;
}

.content {
    width: 100%;
    padding: 18px;
}

.pb-homepage-container {
    max-width: 1180px;
}

.pb-home-announcement {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--status-warning-border);
    border-radius: 8px;
    background: var(--status-warning-bg);
    color: var(--status-warning-text);
}

.pb-home-announcement p {
    margin: 0;
    line-height: 1.45;
}

footer.footer {
    border-top: 1px solid var(--pb-border);
    box-shadow: 0 -12px 30px rgba(15, 23, 42, 0.08);
}

.nowPlayingBar {
    max-width: 1180px;
    margin-inline: auto;
    padding: 7px 18px 4px;
}

.nowPlayingLeft,
.nowPlayingRight {
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
}

.nowPlayingCenter {
    flex: 0 1 360px;
    min-width: 220px;
}

.media-info {
    width: 100%;
}

.media-info .trackInfo {
    min-width: 0;
}

.playerControls {
    flex-direction: column;
    gap: 2px;
}

.playbackBar {
    color: var(--pb-muted);
    font-size: 11px;
    line-height: 1;
}

.controlButton {
    border-radius: 8px;
}

.controlButton:hover,
.controlButton:focus {
    background: var(--pb-surface-2) !important;
}

.nowPlayingRight {
    gap: 8px;
}

.nowPlayingRight .volumeBar {
    flex: 0 1 128px;
    width: auto;
}

.nowPlayingRight .volumeBar .progressBar {
    flex: 1 1 auto;
    min-width: 58px;
}

@media (max-width: 991.98px) {
    :root {
        --pb-sidebar-width: 0px;
        --pb-player-height: 96px;
    }

    header.top-menu {
        left: 0;
    }

    .sidebar {
        top: 0;
        bottom: 0;
        height: 100vh;
        height: 100dvh;
        width: 280px;
        max-width: min(82vw, 280px);
        z-index: 4200;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: var(--pb-elev-2);
    }

    .sidebar-content {
        padding: 8px !important;
    }

    .sidebar .nav.flex-column {
        gap: 2px !important;
    }

    .sidebar .nav-link {
        min-height: 36px;
        padding: 6px 9px;
    }

    .sidebar .nav-link i {
        margin-right: 6px !important;
    }

    .sidebar.is-open,
    .page-wrapper.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-overlay:not(.visually-hidden) {
        position: fixed;
        inset: 0;
        z-index: 4100;
        background: rgba(15, 23, 42, 0.46);
    }

    .main-content {
        padding-left: 0;
    }

    .pb-header-search {
        max-width: none;
    }

    .nowPlayingBar {
        flex-wrap: wrap;
        gap: 6px 12px;
    }

    .nowPlayingLeft {
        order: 1;
        flex: 1 1 calc(100% - 170px);
    }

    .nowPlayingCenter {
        order: 3;
        flex: 1 1 100%;
        min-width: 0;
    }

    .nowPlayingRight {
        order: 2;
        flex: 0 0 auto;
    }

    .nowPlayingRight .volumeBar,
    .nowPlayingRight .other-features button:nth-child(-n + 3) {
        display: none;
    }
}

@media (max-width: 767.98px) {
    :root {
        --pb-header-height: 58px;
        --pb-player-height: 104px;
    }

    header.top-menu {
        gap: 8px;
        padding-inline: 10px !important;
    }

    .logo-img {
        width: 34px;
        height: 34px;
    }

    .menu-btn,
    .pb-header-icon-btn,
    .pb-header-search-mini {
        width: 40px;
        height: 40px;
    }

    .pb-header-search {
        display: none;
    }

    .pb-header-search-mini {
        display: inline-flex;
    }

    .pb-header-actions {
        gap: 4px;
    }

    .pb-header-actions .pb-signin-btn {
        margin-right: 0 !important;
        padding-inline: 10px;
        min-width: auto;
    }

    .content {
        padding: 12px;
    }

    .pb-homepage-container {
        padding-inline: 0;
    }

    .pb-home-announcement {
        padding: 12px 42px 12px 12px;
        font-size: 13px;
    }

    footer.footer {
        padding: 4px 0;
    }

    .nowPlayingBar {
        padding: 8px 10px 4px;
    }

    .media-info .artwork {
        width: 38px;
        height: 38px;
    }

    .media-info .trackInfo {
        height: 38px;
        line-height: 12px;
    }

    .media-info .trackInfo a {
        font-size: 11px;
    }

    .control-icons {
        gap: 4px;
    }

    .controlButton {
        width: 36px;
        height: 36px;
    }

    i.play-pause {
        font-size: 24px;
    }
}

@media (max-width: 420px) {
    .pb-header-actions .pb-signin-btn {
        font-size: 0;
        width: 40px;
        padding: 0;
    }

    .pb-header-actions .pb-signin-btn::before {
        content: '\F4D7';
        font-family: 'bootstrap-icons';
        font-size: 18px;
        line-height: 1;
    }

    .nowPlayingLeft {
        flex-basis: calc(100% - 54px);
    }
}

/* Picobeats-inspired theme and footer player polish */
html[data-theme='dark'] header.top-menu {
    background: rgba(9, 13, 18, 0.96);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

html[data-theme='dark'] .pb-header-search__field,
html[data-theme='dark'] .menu-btn,
html[data-theme='dark'] .pb-header-search-mini {
    background: var(--pb-surface-2);
    border-color: rgba(93, 174, 226, 0.24);
}

.menu-btn:hover,
.menu-btn:focus,
.pb-header-search-mini:hover,
.pb-header-search-mini:focus {
    color: var(--pb-blue);
    border-color: rgba(47, 139, 197, 0.42);
    background: rgba(47, 139, 197, 0.1);
}

.btn-upload,
.pb-back-to-top {
    background: linear-gradient(135deg, var(--pb-blue), #176c9e) !important;
    border-color: transparent !important;
}

.sidebar .nav-link.active,
.sidebar .nav-link:hover,
.sidebar .nav-link:focus {
    background: rgba(47, 139, 197, 0.13);
    color: var(--pb-blue);
}

footer.footer {
    background: linear-gradient(180deg, rgba(17, 24, 34, 0.98), var(--pb-player-bg));
    border-top: 1px solid var(--pb-player-border);
    color: var(--pb-player-text);
    padding: 0;
    box-shadow: 0 -18px 38px rgba(0, 0, 0, 0.22);
}

.progress-container {
    cursor: pointer;
    touch-action: none;
    user-select: none;
    height: 4px;
    background: rgba(255, 255, 255, 0.12);
}

.progress-bar {
    background: linear-gradient(90deg, var(--pb-blue), var(--pb-blue-2));
}

.progress-bar::after {
    width: 12px;
    height: 12px;
    background: var(--pb-blue-2);
    border-color: var(--pb-player-bg);
}

.musicPlayer {
    height: calc(var(--pb-player-height) - 4px);
    max-height: calc(var(--pb-player-height) - 4px);
    padding: 0;
}

.nowPlayingBar {
    height: 100%;
    padding: 10px 18px 8px;
    gap: 18px;
}

.media-info {
    gap: 10px;
}

.media-info .artwork {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    border: 1px solid var(--pb-player-border);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
}

.media-info .trackInfo {
    height: 48px;
    line-height: 1.2;
    padding: 0;
}

.media-info .trackInfo a {
    color: var(--pb-player-text);
    font-size: 12px;
}

.media-info .trackName a {
    font-size: 13px;
    font-weight: 800;
}

.media-info .artistName a,
.media-info .genreName a,
.playbackBar {
    color: var(--pb-player-muted);
}

.control-icons {
    gap: 10px;
}

.controlButton {
    color: var(--pb-player-text);
    border-radius: 999px;
}

.controlButton:hover,
.controlButton:focus {
    color: var(--pb-blue-2);
    background: rgba(255, 255, 255, 0.08) !important;
}

.control-icons i,
.nowPlayingRight i {
    color: currentColor;
    font-size: 15px;
}

.controlButton.play {
    width: 46px;
    height: 46px;
    background: var(--pb-player-text) !important;
    color: var(--pb-player-bg);
}

.controlButton.play:hover,
.controlButton.play:focus {
    background: var(--pb-blue-2) !important;
    color: #ffffff;
}

i.play-pause {
    font-size: 26px;
    padding: 0;
    border: 0;
}

i.play-pause:hover,
i.play-pause:focus {
    border: 0;
    transform: scale(1.04);
}

.nowPlayingRight .volumeBar {
    color: var(--pb-player-text);
}

.nowPlayingRight .volumeBar .progressBar {
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    overflow: visible;
}

.nowPlayingRight .volumeBar .progress {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pb-blue), var(--pb-blue-2));
}

.nowPlayingRight .volumeBar .progress::after {
    width: 10px;
    height: 10px;
    background: var(--pb-blue-2);
    border-color: var(--pb-player-bg);
}

@media (max-width: 991.98px) {
    .nowPlayingBar {
        padding: 9px 12px 7px;
        gap: 6px 12px;
    }

    .media-info .artwork {
        width: 42px;
        height: 42px;
    }

    .media-info .trackInfo {
        height: 42px;
    }

    .controlButton.play {
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 767.98px) {
    footer.footer {
        box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.26);
    }

    .nowPlayingBar {
        align-content: center;
    }

    .control-icons {
        gap: 6px;
    }

    .playbackBar {
        font-size: 10px;
    }
}

/* Light Picobeats homepage shell */
:root {
    --pb-sidebar-width: 255px;
    --pb-header-height: 66px;
    --pb-player-height: 58px;
    --pb-footer-height: var(--pb-player-height);
    --pb-page: #ffffff;
    --pb-surface: #ffffff;
    --pb-surface-2: #f8fbff;
    --pb-text: #050505;
    --pb-muted: #4b5563;
    --pb-border: #e5e7eb;
    --pb-player-bg: #ffffff;
    --pb-player-surface: #ffffff;
    --pb-player-text: #050505;
    --pb-player-muted: #4b5563;
    --pb-player-border: #d7dce3;
}

body {
    background: var(--pb-page);
    color: var(--pb-text);
}

body::before {
    display: none;
}

/* Fixed top header with logo, search, upload, theme, and user controls. */
header.top-menu {
    left: var(--pb-sidebar-width);
    background: #ffffff;
    box-shadow: none;
    backdrop-filter: none;
    padding: 7px 10px 7px 18px !important;
}

.header-brand {
    gap: 18px;
}

.header-logo-img,
.sidebar-logo-img {
    width: 136px;
    height: 34px;
    object-fit: contain;
}

.menu-btn,
.pb-header-icon-btn,
.pb-header-search-mini,
.pb-signin-btn,
.btn-upload {
    border-color: #cbd5e1;
    background: #ffffff;
    color: #050505;
}

.menu-btn {
    border: 0;
    font-size: 1.45rem;
}

.pb-header-search {
    max-width: none;
    margin-inline: 20px;
}

.pb-header-search__field {
    height: 34px;
    border-color: #b9c6d8;
    background: #ffffff;
    border-radius: 5px;
}

.pb-header-search__input {
    color: #111827;
}

.pb-header-search__icon {
    display: none;
}

.btn-upload,
.pb-signin-btn {
    min-height: 40px;
    border-radius: 8px;
    font-weight: 800;
}

.btn-upload {
    background: #ffffff !important;
    color: #050505 !important;
}

.pb-header-icon-btn {
    border: 1px solid #cbd5e1;
    border-radius: 999px;
}

/* Main sidebar navigation and footer links. */
.sidebar {
    bottom: var(--pb-player-height);
    width: var(--pb-sidebar-width);
    background: #ffffff;
    box-shadow: none;
}

.sidebar-brand {
    padding: 8px 20px;
    gap: 16px;
}

.sidebar-content {
    padding: 10px 6px !important;
}

.sidebar .nav.flex-column {
    gap: 12px !important;
}

.sidebar .nav-link {
    min-height: 32px;
    border-radius: 0;
    color: #050505;
    font-size: 16px;
    font-weight: 400;
    padding: 5px 14px;
}

.sidebar .nav-link i {
    color: #050505;
    width: 20px;
    margin-right: 0 !important;
    text-align: center;
}

.sidebar .nav-link.active,
.sidebar .nav-link:hover,
.sidebar .nav-link:focus {
    background: transparent;
    color: #050505;
}

.sidebar-footer {
    border-top: 1px solid var(--pb-border);
    color: #050505;
    font-size: 12px;
    padding: 10px 6px 12px;
}

.company-page-footer {
    gap: 8px;
    line-height: 1.35;
}

.company-page-footer a {
    color: #050505;
    font-weight: 700;
}

.copyright-footer {
    margin-top: 18px;
    color: #1f2937;
    font-size: 11px;
}

.main-content {
    padding-left: var(--pb-sidebar-width);
    background: #ffffff;
}

.content {
    padding: 10px 20px 28px;
}

.pb-homepage-container {
    max-width: none;
    padding-inline: 0;
}

.pb-home-hero,
.pb-home-promo,
.pb-featured-section,
.pb-top-genres-section {
    margin-bottom: 10px;
}

.pb-hero-banner,
.pb-home-promo {
    display: block;
    overflow: hidden;
    border-radius: 5px;
}

.pb-hero-banner img,
.pb-home-promo img {
    display: block;
    width: 100%;
    height: 198px;
    object-fit: cover;
}

.pb-home-announcement {
    min-height: 102px;
    margin-bottom: 0 !important;
    padding: 17px 48px 18px 16px;
    border-color: #ffe08a;
    background: #fff3cd;
    color: #332500;
    border-radius: 5px;
}

.pb-home-announcement__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: #3a2b00;
}

.pb-home-announcement p {
    color: #332500;
}

.pb-home-promo img {
    height: 200px;
}

.pb-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 10px;
}

.pb-section-heading h1 {
    margin: 0;
    color: #050505;
    font-size: 26px;
    font-weight: 400;
}

.pb-section-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.pb-section-actions a {
    color: #2f2f2f;
    font-weight: 800;
}

.pb-circle-action {
    width: 36px;
    height: 36px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pb-featured-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 240px;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: 14px;
    padding-bottom: 6px;
    scrollbar-width: none;
}

.pb-featured-row::-webkit-scrollbar {
    display: none;
}

.pb-featured-card {
    position: relative;
    min-width: 0;
    height: 294px;
    overflow: visible;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
}

.pb-featured-card__artwork {
    position: relative;
    display: block;
    height: 150px;
    overflow: hidden;
    border-radius: 5px 5px 0 0;
    background: #f8fafc;
}

.pb-featured-card__play {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 1;
    width: 58px;
    height: 58px;
    padding: 0;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.68);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition:
        opacity 160ms ease,
        transform 160ms ease,
        background-color 160ms ease;
}

.pb-featured-card__play i {
    font-size: 28px;
    line-height: 1;
}

.pb-featured-card:hover .pb-featured-card__play,
.pb-featured-card.is-playing .pb-featured-card__play,
.pb-featured-card__play:focus-visible {
    opacity: 1;
}

.pb-featured-card__play:hover,
.pb-featured-card__play:focus-visible {
    transform: translate(-50%, -50%) scale(1.05);
    background: rgba(13, 110, 253, 0.92);
}

@media (hover: none) {
    .pb-featured-card__play {
        opacity: 1;
    }
}

.pb-featured-card__artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pb-featured-card__body {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 5px 6px 6px;
}

.pb-featured-card__body h2 {
    margin: 0 0 18px;
    min-height: 34px;
    color: #050505;
    font-size: 14px;
    line-height: 1.18;
    font-weight: 800;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.pb-featured-card__genre {
    margin: 0 0 7px;
    color: #050505;
    font-size: 13px;
    line-height: 1.2;
}

.pb-featured-card__artist {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    margin-bottom: auto;
    color: #111827;
    font-size: 12px;
}

.pb-featured-card__artist img {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    object-fit: cover;
    flex: 0 0 auto;
}

.pb-featured-card__artist span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-featured-card__stats {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding-top: 12px;
    color: #6f7f91;
    font-size: 12px;
    line-height: 1;
}

.pb-featured-card__stats span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.pb-featured-card__stats > a {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.pb-featured-card__stats i {
    color: #168cff;
    font-size: 12px;
}

.pb-featured-card__stats button {
    margin: 0;
    width: auto;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6f7f91;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pb-featured-card__stats .pb-mixtape-menu-toggle {
    width: 22px;
    margin-left: auto;
}

.pb-recommended-section {
    padding-top: 30px;
}

.pb-section-heading--stacked {
    align-items: flex-start;
}

.pb-section-heading--stacked p {
    margin: 4px 0 0;
    color: #374151;
    font-size: 14px;
}

.pb-card-action-menu {
    position: absolute;
    top: -42px;
    right: -224px;
    z-index: 20;
    width: 248px;
    display: none;
    padding: 8px;
    border: 1px solid #d7dce3;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.pb-featured-card.is-menu-open .pb-card-action-menu {
    display: block;
}

.pb-card-action-menu__meta,
.pb-card-action-menu :is(button, a[data-mixtape-edit-link]) {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: #333333;
    font-size: 16px;
    text-align: left;
}

.pb-card-action-menu__meta {
    color: #5f6368;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 4px;
}

.pb-card-action-menu i {
    width: 20px;
    color: #333333;
    font-size: 16px;
    text-align: center;
}

.pb-card-action-menu :is(button, a[data-mixtape-edit-link]):hover,
.pb-card-action-menu :is(button, a[data-mixtape-edit-link]):focus {
    background: #f7f7f7;
    border-radius: 8px;
}

.pb-recommended-section .pb-featured-row {
    overflow-y: visible;
}

@media (max-width: 767.98px) {
    .pb-card-action-menu {
        top: 44px;
        right: 8px;
        width: min(248px, calc(100vw - 40px));
    }
}

.pb-top-genres-section {
    padding-top: 30px;
}

.pb-genre-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(190px, 1fr);
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: 14px;
    padding-bottom: 6px;
    scrollbar-width: none;
}

.pb-genre-row::-webkit-scrollbar {
    display: none;
}

.pb-genre-row a {
    min-height: 60px;
    border-radius: 8px;
    background: #f7f7f7;
    color: #050505;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 16px;
}

footer.footer {
    height: var(--pb-player-height);
    max-height: var(--pb-player-height);
    background: #ffffff;
    border-top: 1px solid var(--pb-player-border);
    color: var(--pb-player-text);
    box-shadow: 0 -1px 8px rgba(15, 23, 42, 0.08);
}

.progress-container {
    height: 7px;
    background: #d7dce3;
    cursor: ew-resize;
    touch-action: none;
}

.progress-bar {
    background: var(--pb-blue);
}

.progress-bar::after {
    width: 8px;
    height: 8px;
    background: var(--pb-blue);
    border-color: #ffffff;
}

.musicPlayer {
    height: calc(var(--pb-player-height) - 7px);
    max-height: calc(var(--pb-player-height) - 7px);
}

.nowPlayingBar {
    max-width: none;
    height: 100%;
    padding: 4px 16px;
    gap: 14px;
}

.nowPlayingLeft {
    flex: 1 1 300px;
}

.nowPlayingCenter {
    flex: 0 1 360px;
}

.nowPlayingRight {
    flex: 1 1 300px;
}

.media-info .artwork {
    width: 34px;
    height: 34px;
    border-radius: 2px;
    border-color: #d7dce3;
    box-shadow: none;
}

.media-info .trackInfo {
    height: 40px;
}

.media-info .trackInfo a,
.media-info .trackName a,
.media-info .artistName a,
.media-info .genreName a {
    color: #050505;
    font-size: 10px;
}

.media-info .trackName a {
    font-size: 11px;
}

.playbackBar {
    color: #050505;
    font-size: 10px;
    font-weight: 700;
}

.control-icons {
    gap: 18px;
}

.controlButton,
.controlButton.play {
    width: 28px;
    height: 28px;
    background: transparent !important;
    color: #050505;
    border-radius: 999px;
}

.controlButton:hover,
.controlButton:focus,
.controlButton.play:hover,
.controlButton.play:focus {
    background: transparent !important;
    color: var(--pb-blue);
}

.control-icons i,
.nowPlayingRight i {
    font-size: 14px;
}

i.play-pause {
    font-size: 23px;
}

.nowPlayingRight .other-features {
    gap: 8px;
}

.nowPlayingRight .volumeBar {
    color: #050505;
    flex-basis: 132px;
}

.nowPlayingRight .volumeBar .progressBar {
    height: 4px;
    background: #d7dce3;
}

.nowPlayingRight .volumeBar .progress {
    background: var(--pb-blue);
}

.nowPlayingRight .volumeBar .progress::after {
    width: 10px;
    height: 10px;
    background: var(--pb-blue);
    border-color: #ffffff;
}

@media (max-width: 991.98px) {
    :root {
        --pb-sidebar-width: 0px;
        --pb-player-height: 96px;
    }

    header.top-menu,
    .main-content {
        left: 0;
        padding-left: 0;
    }

    .sidebar {
        bottom: 0;
    }

    .pb-hero-banner img,
    .pb-home-promo img {
        height: 150px;
    }
}

@media (max-width: 767.98px) {
    .header-logo-img {
        width: 96px;
    }

    .content {
        padding: 10px 12px 24px;
    }

    .pb-home-announcement {
        min-height: 0;
    }

    .pb-featured-row {
        grid-auto-columns: minmax(160px, 76vw);
        overflow-x: auto;
    }
}

/* YouTube-style sidebar drawer and carousel polish */
:root {
    --pb-sidebar-width: 255px;
}

header.top-menu {
    left: 0;
}

.main-content {
    padding-left: 0;
}

.sidebar {
    top: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 4200;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 12px 0 30px rgba(15, 23, 42, 0.14);
}

.sidebar.is-open,
.page-wrapper.sidebar-open .sidebar {
    transform: translateX(0);
}

.sidebar-overlay:not(.visually-hidden) {
    position: fixed;
    inset: 0;
    z-index: 4100;
    background: rgba(15, 23, 42, 0.34);
}

.pb-circle-action {
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}

.pb-circle-action:hover,
.pb-circle-action:focus {
    background: #f8fafc;
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.pb-circle-action:disabled {
    opacity: 0.38;
    transform: none;
    cursor: not-allowed;
}

.pb-featured-row,
.pb-genre-row,
.pb-dj-grid {
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
}

.pb-featured-row > *,
.pb-genre-row > *,
.pb-dj-grid > * {
    scroll-snap-align: start;
}

/* Attached DJ, sidebar, mixtape menu, and user dropdown refinements */
.sidebar-content {
    padding: 6px !important;
}

.sidebar .nav.flex-column {
    gap: 2px !important;
}

.sidebar .nav-link {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    min-height: 34px;
    border-radius: 8px;
    padding: 5px 12px;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.sidebar .nav-link i {
    width: 20px;
    margin-right: 0 !important;
    justify-self: center;
    text-align: center;
}

.sidebar .nav-link:hover,
.sidebar .nav-link:focus,
.sidebar .nav-link.active {
    background: var(--color-hover);
    color: #ffffff;
}

.sidebar .nav-link:hover i,
.sidebar .nav-link:focus i,
.sidebar .nav-link.active i {
    color: #ffffff;
}

.pb-user-menu {
    position: relative;
    flex: 0 0 auto;
}

.pb-user-menu__toggle {
    width: 42px;
    height: 42px;
    padding: 2px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pb-user-menu__toggle img,
.pb-user-dropdown__profile img {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    object-fit: cover;
}

.pb-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 4300;
    width: 292px;
    max-height: min(620px, calc(100vh - 88px));
    overflow-y: auto;
    display: none;
    border: 1px solid #d7dce3;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.2);
}

.pb-user-menu.is-open .pb-user-dropdown {
    display: block;
}

.pb-user-dropdown__profile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid #e5e7eb;
}

.pb-user-dropdown a {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 8px 18px;
    color: #050505;
    font-size: 16px;
}

.pb-user-dropdown a:hover,
.pb-user-dropdown a:focus {
    background: #f7f7f7;
}

.pb-user-dropdown a i {
    width: 18px;
    text-align: center;
}

.pb-dj-section {
    padding-top: 30px;
}

.pb-dj-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(180px, 1fr));
    gap: 14px;
    padding-top: 14px;
}

.pb-dj-card {
    min-width: 0;
    min-height: 78px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
}

.pb-dj-card img {
    width: 50px;
    height: 50px;
    border-radius: 999px;
    object-fit: cover;
    flex: 0 0 auto;
}

.pb-dj-card div {
    min-width: 0;
    flex: 1 1 auto;
}

.pb-dj-card h2 {
    margin: 0 0 5px;
    color: #050505;
    font-size: 16px;
    line-height: 1.1;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-dj-card p {
    margin: 0;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.2;
}

.pb-dj-card p a,
.pb-dj-card small a {
    color: inherit;
    text-decoration: none;
}

.pb-dj-card p a:hover,
.pb-dj-card p a:focus,
.pb-dj-card small a:hover,
.pb-dj-card small a:focus {
    color: var(--pb-blue);
    text-decoration: underline;
}

.pb-dj-card span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 11px;
}

.pb-dj-card button,
.pb-dj-card__action {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: #0d6efd;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.pb-dj-card button i,
.pb-dj-card__action i {
    font-size: 18px;
}

.pb-card-action-menu {
    top: 44px;
    right: 8px;
}

.pb-featured-card:nth-child(n + 4) .pb-card-action-menu {
    right: auto;
    left: 8px;
}

@media (max-width: 991.98px) {
    .pb-dj-grid {
        grid-auto-flow: column;
        grid-auto-columns: minmax(230px, 1fr);
        grid-template-columns: none;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .pb-dj-grid::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .pb-user-dropdown {
        right: -4px;
        width: min(292px, calc(100vw - 20px));
    }
}

/* Compact dropdowns and mixtape-card spacing fixes */
.pb-user-dropdown {
    width: 270px;
    padding: 6px 0;
}

.pb-user-dropdown__profile {
    gap: 10px;
    padding: 10px 14px;
}

.pb-user-dropdown__profile img {
    width: 30px;
    height: 30px;
}

.pb-user-dropdown a {
    min-height: 36px;
    gap: 13px;
    padding: 6px 14px;
    border-radius: 6px;
    margin: 1px 6px;
    font-size: 14px;
    line-height: 1.2;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.pb-user-dropdown a:hover,
.pb-user-dropdown a:focus {
    background: var(--color-hover);
    color: #ffffff;
}

.pb-user-dropdown a:hover i,
.pb-user-dropdown a:focus i {
    color: #ffffff;
}

.pb-featured-row {
    grid-auto-columns: 240px;
    gap: 10px;
    align-items: start;
    overflow-y: visible;
    padding-top: 14px;
    padding-bottom: 24px;
}

.pb-featured-card {
    height: 252px;
    overflow: visible;
}

.pb-featured-card__artwork {
    height: 150px;
}

.pb-featured-card__body {
    padding: 5px 6px;
}

.pb-featured-card__body h2 {
    min-height: 17px;
    margin: 0 0 3px;
    font-size: 14px;
    line-height: 1.15;
    -webkit-line-clamp: 1;
}

.pb-featured-card__genre {
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.2;
}

.pb-featured-card__artist {
    margin-bottom: 0;
    font-size: 12px;
}

.pb-featured-card__artist img {
    width: 21px;
    height: 21px;
}

.pb-featured-card__stats {
    gap: 12px;
    padding-top: 7px;
}

.pb-card-action-menu {
    top: auto;
    right: 8px;
    bottom: 30px;
    left: auto;
    width: 246px;
    max-height: 288px;
    overflow-y: auto;
    padding: 7px;
    border-radius: 13px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.2);
}

.pb-featured-card:nth-child(n + 4) .pb-card-action-menu {
    right: 8px;
    left: auto;
}

.pb-card-action-menu__meta,
.pb-card-action-menu :is(button, a[data-mixtape-edit-link]) {
    min-height: 40px;
    gap: 14px;
    padding: 7px 10px;
    font-size: 14px;
    line-height: 1.2;
}

.pb-card-action-menu :is(button, a[data-mixtape-edit-link]) {
    border-radius: 7px;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.pb-card-action-menu :is(button, a[data-mixtape-edit-link]):hover,
.pb-card-action-menu :is(button, a[data-mixtape-edit-link]):focus {
    background: var(--color-hover);
    color: #ffffff;
}

.pb-card-action-menu :is(button, a[data-mixtape-edit-link]):hover i,
.pb-card-action-menu :is(button, a[data-mixtape-edit-link]):focus i {
    color: #ffffff;
}

@media (max-width: 767.98px) {
    .pb-featured-card {
        height: 252px;
    }

    .pb-card-action-menu {
        top: auto;
        right: 8px;
        bottom: 30px;
        width: min(246px, calc(100vw - 48px));
    }
}

/* Responsive header and content polish */
.pb-header-search-mini {
    display: none !important;
}

.top-menu {
    min-width: 0;
}

.header-brand {
    min-width: 0;
}

.pb-header-search {
    min-width: 180px;
}

.pb-header-actions {
    flex-shrink: 0;
}

@media (max-width: 1199.98px) {
    .content {
        padding-inline: 14px;
    }

    .pb-featured-row {
        grid-auto-columns: 224px;
    }

    .pb-dj-grid {
        grid-template-columns: repeat(4, minmax(180px, 1fr));
    }
}

@media (max-width: 991.98px) {
    header.top-menu {
        height: auto;
        min-height: var(--pb-header-height);
        gap: 8px;
        padding: 8px 10px !important;
    }

    .header-logo-img {
        width: 112px;
    }

    .pb-header-search {
        display: block;
        order: 3;
        flex: 1 0 100%;
        min-width: 0;
        margin: 4px 0 0;
    }

    .pb-header-search__field {
        height: 38px;
    }

    .pb-header-actions {
        margin-left: auto;
        gap: 6px;
    }

    .main-content {
        padding-top: calc(var(--pb-header-height) + 44px);
    }

    .pb-hero-banner img {
        height: clamp(120px, 24vw, 180px);
    }

    .pb-home-promo img {
        height: clamp(120px, 24vw, 170px);
    }

    .pb-dj-grid {
        grid-auto-columns: minmax(230px, 68vw);
    }

    .pb-featured-row {
        grid-auto-columns: minmax(210px, 34vw);
    }

    .pb-genre-row {
        grid-auto-columns: minmax(180px, 38vw);
    }
}

@media (max-width: 767.98px) {
    :root {
        --pb-header-height: 56px;
        --pb-player-height: 88px;
    }

    header.top-menu {
        align-items: center !important;
    }

    .header-brand {
        gap: 8px;
    }

    .header-logo-img {
        width: 92px;
        height: 30px;
    }

    .menu-btn,
    .pb-header-icon-btn,
    .pb-user-menu__toggle {
        width: 36px;
        height: 36px;
    }

    .pb-user-menu__toggle img {
        width: 28px;
        height: 28px;
    }

    .btn-upload {
        display: inline-flex !important;
        width: 36px;
        min-width: 36px;
        height: 36px;
        padding: 0;
        overflow: hidden;
        font-size: 0;
        align-items: center;
        justify-content: center;
    }

    .btn-upload i {
        margin: 0 !important;
        font-size: 17px;
    }

    .pb-header-actions .pb-header-icon-btn[aria-label='Notifications'] {
        display: inline-flex !important;
    }

    .pb-header-search {
        display: block !important;
    }

    .pb-header-search__input {
        font-size: 14px;
    }

    .content {
        padding: 10px 8px 24px;
    }

    .pb-section-heading {
        align-items: flex-start;
        gap: 10px;
    }

    .pb-section-heading h1 {
        font-size: 23px;
    }

    .pb-section-actions {
        gap: 6px;
    }

    .pb-circle-action {
        width: 34px;
        height: 34px;
    }

    .pb-dj-grid {
        grid-auto-columns: minmax(220px, 82vw);
        gap: 10px;
    }

    .pb-dj-card {
        min-height: 70px;
        padding: 10px;
    }

    .pb-dj-card img {
        width: 44px;
        height: 44px;
    }

    .pb-dj-card button,
    .pb-dj-card__action {
        width: 40px;
        height: 40px;
    }

    .pb-featured-row {
        grid-auto-columns: minmax(190px, 74vw);
        gap: 10px;
        padding-bottom: 28px;
    }

    .pb-featured-card__artwork {
        height: 138px;
    }

    .pb-genre-row {
        grid-auto-columns: minmax(170px, 74vw);
        gap: 10px;
    }

    .pb-genre-row a {
        min-height: 54px;
        font-size: 15px;
    }

    .pb-card-action-menu {
        right: 6px;
        bottom: 28px;
        width: min(238px, calc(100vw - 36px));
        max-height: min(288px, 68vh);
    }

    .pb-user-dropdown {
        position: fixed;
        top: 58px;
        right: 8px;
        width: min(270px, calc(100vw - 16px));
        max-height: calc(100vh - 74px);
    }

    .nowPlayingBar {
        padding-inline: 8px;
    }

    .nowPlayingLeft {
        flex-basis: calc(100% - 54px);
    }
}

@media (max-width: 480px) {
    header.top-menu {
        padding-inline: 6px !important;
    }

    .header-logo-img {
        width: 82px;
    }

    .pb-header-actions {
        gap: 3px;
    }

    .pb-header-search__input::placeholder {
        color: transparent;
    }

    .pb-home-announcement {
        padding-right: 36px;
    }

    .pb-featured-row {
        grid-auto-columns: minmax(176px, 82vw);
    }

    .pb-featured-card {
        height: 244px;
    }

    .pb-featured-card__stats {
        gap: 8px;
    }

    .pb-featured-card__stats span {
        gap: 3px;
    }
}

/* Tooltip, queue, share modal, and fixed card menu interactions */
[data-pb-tooltip] {
    position: relative;
}

[data-pb-tooltip]::after {
    content: attr(data-pb-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 5200;
    width: max-content;
    max-width: 160px;
    padding: 5px 8px;
    border-radius: 5px;
    background: rgba(17, 24, 39, 0.94);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition:
        opacity 0.14s ease,
        transform 0.14s ease;
}

[data-pb-tooltip]:hover::after,
[data-pb-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.pb-header-actions [data-pb-tooltip]::after,
.header-brand [data-pb-tooltip]::after {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translate(-50%, -4px);
}

.pb-header-actions [data-pb-tooltip]:hover::after,
.pb-header-actions [data-pb-tooltip]:focus-visible::after,
.header-brand [data-pb-tooltip]:hover::after,
.header-brand [data-pb-tooltip]:focus-visible::after {
    transform: translate(-50%, 0);
}

.pb-card-action-menu {
    position: fixed !important;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 4300;
    width: min(246px, calc(100vw - 24px));
    max-height: min(300px, calc(100vh - 24px));
    display: none;
}

.pb-featured-card.is-menu-open .pb-card-action-menu {
    display: block;
}

.pb-play-queue {
    position: fixed;
    right: 24px;
    bottom: calc(var(--pb-player-height) + 12px);
    z-index: 4100;
    width: min(340px, calc(100vw - 24px));
    max-height: min(362px, calc(100vh - var(--pb-player-height) - 28px));
    overflow: hidden;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.2);
    display: none;
}

.pb-play-queue.is-open {
    display: block;
}

.pb-play-queue__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.pb-play-queue__header strong {
    font-size: 16px;
}

.pb-play-queue__header button,
.pb-play-queue__item > button,
.pb-share-modal__header button {
    border: 0;
    background: transparent;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pb-play-queue__header button,
.pb-share-modal__header button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.pb-play-queue__header button:hover,
.pb-play-queue__header button:focus,
.pb-share-modal__header button:hover,
.pb-share-modal__header button:focus {
    background: rgba(41, 128, 185, 0.12);
    color: var(--color-hover);
}

.pb-play-queue__list {
    max-height: 316px;
    overflow-y: auto;
}

.pb-play-queue__item {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 8px;
    min-height: 70px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-primary);
    cursor: pointer;
}

.pb-play-queue__item:hover,
.pb-play-queue__item:focus-visible {
    outline: 0;
    background: rgba(41, 128, 185, 0.1);
}

.pb-play-queue__play {
    width: 50px;
    height: 50px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    overflow: hidden;
    background: transparent;
}

.pb-play-queue__empty {
    margin: 0;
    padding: 28px 16px;
    color: var(--text-secondary);
    text-align: center;
}

footer.footer .progress-container {
    height: 3px;
    cursor: pointer;
}

.pb-play-queue__item > .pb-play-queue__play {
    width: 50px;
    height: 50px;
    border-radius: 5px;
}

.pb-play-queue__item:last-child {
    border-bottom: 0;
}

.pb-play-queue__item.is-active {
    background: rgba(41, 128, 185, 0.16);
}

.pb-play-queue__item img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    object-fit: cover;
}

.pb-play-queue__item div {
    min-width: 0;
}

.pb-play-queue__item strong,
.pb-play-queue__item span,
.pb-play-queue__item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-play-queue__item strong {
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.2;
}

.pb-play-queue__item span,
.pb-play-queue__item small {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.25;
}

.pb-play-queue__item > button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--text-secondary);
}

.pb-play-queue__item > button:hover,
.pb-play-queue__item > button:focus {
    background: rgba(41, 128, 185, 0.12);
    color: var(--color-hover);
}

.pb-share-backdrop {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, 0.58);
}

.pb-share-backdrop.visually-hidden {
    display: none !important;
}

.pb-share-modal {
    width: min(500px, 100%);
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 22px 70px rgba(15, 23, 42, 0.3);
}

.pb-share-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
}

.pb-share-modal__header h2 {
    margin: 0;
    font-size: 18px;
}

.pb-share-modal__body {
    padding: 14px 16px 12px;
}

.pb-share-modal__eyebrow,
.pb-share-preview__meta small {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pb-share-preview {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-1);
}

.pb-share-preview__artwork {
    position: relative;
    height: 262px;
    overflow: hidden;
    background: #111827;
}

.pb-share-preview__artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pb-share-preview__artwork::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.28), rgba(15, 23, 42, 0.06) 48%, rgba(15, 23, 42, 0.24));
}

.pb-share-preview__artwork button {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 76px;
    height: 76px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.36);
    color: #ffffff;
    font-size: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
}

.pb-share-preview__artwork span {
    position: absolute;
    left: 28px;
    bottom: 24px;
    z-index: 2;
    color: #ffffff;
    font-size: clamp(24px, 7vw, 34px);
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.pb-share-preview__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px 16px;
}

.pb-share-preview__meta strong {
    color: var(--text-primary);
    font-size: 26px;
    line-height: 1.1;
}

.pb-share-preview__meta span,
.pb-share-modal__helper {
    color: var(--text-secondary);
}

.pb-share-modal__body h3 {
    margin: 18px 0 10px;
    font-size: 16px;
    font-weight: 500;
}

.pb-share-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pb-share-socials button {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-primary);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.pb-share-socials button:hover,
.pb-share-socials button:focus {
    border-color: var(--color-hover);
    background: rgba(41, 128, 185, 0.1);
    color: var(--color-hover);
}

.pb-share-modal__helper {
    margin: 16px 0 8px;
    font-size: 14px;
    line-height: 1.45;
}

.pb-share-copy {
    display: block;
    color: var(--text-primary);
}

.pb-share-copy > span {
    display: block;
    margin-bottom: 6px;
}

.pb-share-copy div {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.pb-share-copy input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    padding: 11px 14px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.pb-share-copy button {
    flex: 0 0 auto;
    border: 0;
    padding: 0 16px;
    background: #7c3aed;
    color: #ffffff;
    font-weight: 800;
}

.pb-share-copy button:hover,
.pb-share-copy button:focus {
    background: #6d28d9;
}

@media (max-width: 767.98px) {
    [data-pb-tooltip]::after {
        display: none;
    }

    .pb-play-queue {
        right: 8px;
        bottom: calc(var(--pb-player-height) + 8px);
        width: calc(100vw - 16px);
        max-height: min(360px, calc(100vh - var(--pb-player-height) - 20px));
    }

    .pb-share-backdrop {
        align-items: flex-end;
        padding: 0;
    }

    .pb-share-modal {
        width: 100%;
        max-height: calc(100vh - 18px);
        border-radius: 14px 14px 0 0;
    }

    .pb-share-preview__artwork {
        height: 210px;
    }

    .pb-share-preview__meta strong {
        font-size: 23px;
    }
}

/* Final mixtape hover and scrollbar polish */
html {
    scrollbar-width: none;
    scrollbar-color: rgba(107, 114, 128, 0.75) transparent;
}

* {
    scrollbar-width: none;
    scrollbar-color: rgba(107, 114, 128, 0.65) transparent;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(107, 114, 128, 0.62);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-hover);
}

a,
a:visited {
    transition: color 0.15s ease;
}

a:hover,
a:focus {
    color: #2980b9 !important;
}

.pb-featured-row,
.pb-dj-grid,
.pb-genre-row {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(107, 114, 128, 0.65) transparent !important;
}

.pb-featured-row::-webkit-scrollbar,
.pb-dj-grid::-webkit-scrollbar,
.pb-genre-row::-webkit-scrollbar {
    display: block !important;
    height: 6px;
}

.pb-featured-card {
    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}

.pb-featured-card:hover,
.pb-featured-card:focus-within,
.pb-featured-card.is-menu-open {
    border-color: #2980b9;
    box-shadow: 0 12px 30px rgba(41, 128, 185, 0.16);
}

.pb-featured-card__artwork {
    position: relative;
}

.pb-featured-card__artwork::before,
.pb-featured-card__artwork::after {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.16s ease,
        transform 0.16s ease;
}

.pb-featured-card__artwork::before {
    content: '';
    inset: 0;
    left: 0;
    top: 0;
    z-index: 1;
    background: rgba(41, 128, 185, 0.24);
    transform: none;
}

.pb-featured-card__artwork::after {
    display: none;
    content: '\25B6';
    width: 62px;
    height: 62px;
    border: 4px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 34px;
    line-height: 54px;
    text-align: center;
    text-indent: 4px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.22);
    transform: translate(-50%, -50%) scale(0.92);
}

.pb-featured-card__artwork .pb-featured-card__play {
    z-index: 3;
}

.pb-featured-card:hover .pb-featured-card__artwork::before,
.pb-featured-card:focus-within .pb-featured-card__artwork::before,
.pb-featured-card:hover .pb-featured-card__artwork::after,
.pb-featured-card:focus-within .pb-featured-card__artwork::after {
    opacity: 1;
}

.pb-featured-card:hover .pb-featured-card__artwork::after,
.pb-featured-card:focus-within .pb-featured-card__artwork::after {
    transform: translate(-50%, -50%) scale(1);
}

.pb-featured-card:hover .pb-featured-card__artwork img,
.pb-featured-card:focus-within .pb-featured-card__artwork img {
    transform: scale(1.025);
}

.pb-featured-card__artwork img {
    transition: transform 0.18s ease;
}

.pb-featured-card__body h2 a:hover,
.pb-featured-card__body h2 a:focus,
.pb-section-actions a:hover,
.pb-section-actions a:focus,
.sidebar-footer a:hover,
.sidebar-footer a:focus {
    color: #2980b9 !important;
}

@media (max-width: 767.98px) {
    .pb-featured-card__artwork::before,
    .pb-featured-card__artwork::after {
        opacity: 1;
    }

    .pb-featured-card__artwork::before {
        background: rgba(15, 23, 42, 0.08);
    }

    .pb-featured-card__artwork::after {
        width: 48px;
        height: 48px;
        border-width: 3px;
        font-size: 27px;
        line-height: 42px;
    }
}

/* Responsive ad placements and final carousel/queue polish */
.pb-featured-row,
.pb-dj-grid,
.pb-genre-row {
    scrollbar-width: none !important;
    -ms-overflow-style: none;
}

.pb-featured-row::-webkit-scrollbar,
.pb-dj-grid::-webkit-scrollbar,
.pb-genre-row::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.pb-play-queue__item {
    justify-items: start;
    text-align: left;
}

.pb-play-queue__item div {
    width: 100%;
    text-align: left;
}

.pb-play-queue__item strong,
.pb-play-queue__item span,
.pb-play-queue__item small {
    text-align: left;
}

.pb-ad-slot {
    width: 100%;
    margin: 28px 0;
    display: flex;
    justify-content: center;
}

.pb-ad-placement {
    width: min(100%, 1200px);
    aspect-ratio: 24 / 5;
    min-height: 90px;
    padding: 12px 16px;
    border: 1px dashed rgba(41, 128, 185, 0.45);
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(41, 128, 185, 0.1), rgba(255, 255, 255, 0.92)), var(--bg-primary);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center;
    text-decoration: none;
}

.pb-ad-slot--responsive .pb-ad-placement {
    width: min(100%, 1200px);
}

.pb-ad-slot--mobile-friendly .pb-ad-placement {
    width: min(100%, 336px);
    aspect-ratio: auto;
    min-height: 280px;
}

.pb-ad-placement span {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pb-ad-placement strong {
    color: var(--text-primary);
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.15;
}

.pb-ad-placement small {
    color: var(--text-secondary);
    font-size: 12px;
}

.pb-ad-placement:hover,
.pb-ad-placement:focus {
    border-color: #2980b9;
    background: linear-gradient(135deg, rgba(41, 128, 185, 0.16), rgba(255, 255, 255, 0.95)), var(--bg-primary);
    color: #2980b9 !important;
}

@media (max-width: 991.98px) {
    .pb-ad-slot {
        margin: 22px 0;
    }

    .pb-ad-placement,
    .pb-ad-slot--responsive .pb-ad-placement {
        width: min(100%, 728px);
        aspect-ratio: auto;
        min-height: 90px;
    }
}

@media (max-width: 767.98px) {
    .pb-ad-slot {
        margin: 18px 0;
    }

    .pb-ad-placement,
    .pb-ad-slot--responsive .pb-ad-placement {
        width: min(100%, 320px);
        min-height: 100px;
        padding: 10px 12px;
    }

    .pb-ad-slot--mobile-friendly .pb-ad-placement {
        width: min(100%, 320px);
        min-height: 250px;
    }

    .pb-ad-placement strong {
        font-size: 18px;
    }
}

@media (max-width: 380px) {
    .pb-ad-placement,
    .pb-ad-slot--responsive .pb-ad-placement,
    .pb-ad-slot--mobile-friendly .pb-ad-placement {
        width: 100%;
    }
}

/* Genres pages */
.pb-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 28px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.pb-page-heading h1 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(26px, 3vw, 32px);
    line-height: 1.15;
}

.pb-genres-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
    padding: 12px 0 28px;
}

.pb-genres-grid a {
    min-height: 60px;
    padding: 10px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--pb-genre-accent, #2980b9) 12%, #f5f5f5);
    color: #050505;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    line-height: 1.15;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
    flex-direction: column;
    gap: 5px;
}

.pb-genres-grid a small {
    font-size: 11px;
    opacity: 0.72;
}

.pb-genres-grid a:hover,
.pb-genres-grid a:focus {
    background: var(--pb-genre-accent, #2980b9);
    color: #ffffff !important;
    transform: translateY(-1px);
}

.pb-genre-detail-hero {
    margin-top: 6px;
    padding: clamp(20px, 4vw, 34px);
    border-radius: 8px;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--pb-genre-accent, #2980b9) 92%, transparent),
            color-mix(in srgb, var(--pb-genre-accent, #2980b9) 30%, #050505)
        ),
        var(--pb-genre-artwork, url('../images/defaults/artworks/default.png')) center / cover;
    color: #ffffff;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    min-height: 230px;
}

.pb-back-link {
    color: rgba(255, 255, 255, 0.88);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    text-decoration: none;
    font-weight: 700;
}

.pb-back-link:hover,
.pb-back-link:focus {
    color: #ffffff !important;
}

.pb-genre-detail-hero h1 {
    margin: 0;
    font-size: clamp(34px, 7vw, 64px);
    line-height: 0.95;
    font-weight: 800;
}

.pb-genre-detail-hero p {
    max-width: 620px;
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 16px;
}

.pb-genre-detail-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(92px, 1fr));
    gap: 8px;
    flex: 0 0 auto;
}

.pb-genre-detail-hero__stats span {
    min-height: 74px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
}

.pb-genre-detail-hero__stats strong {
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
}

.pb-genre-filterbar {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 16px 0 8px;
    padding-bottom: 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.pb-genre-filterbar button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 700;
}

.pb-genre-filterbar button:hover,
.pb-genre-filterbar button:focus,
.pb-genre-filterbar button.active {
    border-color: #2980b9;
    background: #2980b9;
    color: #ffffff;
}

.pb-genre-djs {
    margin: 18px 0 24px;
}

.pb-genre-djs .pb-section-heading {
    margin-bottom: 12px;
}

.pb-genre-djs .pb-section-heading p {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.pb-genre-djs__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    overflow: visible;
    padding-bottom: 0;
}

.pb-mixtape-card-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    padding-bottom: 34px;
}

.pb-mixtape-card-grid .pb-featured-card {
    width: 100%;
    height: 292px;
}

@media (max-width: 1199.98px) {
    .pb-genres-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .pb-mixtape-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pb-genre-djs__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .pb-genres-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pb-genre-detail-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .pb-genre-detail-hero__stats {
        width: 100%;
    }

    .pb-mixtape-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pb-genre-djs__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .pb-page-heading {
        margin-top: 18px;
    }

    .pb-genres-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .pb-genres-grid a {
        min-height: 54px;
        font-size: 14px;
    }

    .pb-genre-detail-hero {
        min-height: 0;
        padding: 18px;
    }

    .pb-genre-detail-hero__stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pb-genre-detail-hero__stats span {
        min-height: 64px;
        font-size: 11px;
    }

    .pb-genre-detail-hero__stats strong {
        font-size: 18px;
    }

    .pb-mixtape-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .pb-genre-djs__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .pb-mixtape-card-grid .pb-featured-card {
        height: 252px;
    }
}

@media (max-width: 440px) {
    .pb-genres-grid,
    .pb-mixtape-card-grid {
        grid-template-columns: 1fr;
    }

    .pb-genre-detail-hero__stats {
        grid-template-columns: 1fr;
    }

    .pb-mixtape-card-grid .pb-featured-card {
        height: 258px;
    }
}

/* DJs pages */
.pb-page-heading--with-tools {
    align-items: flex-end;
}

.pb-page-heading--with-tools p {
    margin: 5px 0 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.pb-page-heading.pb-page-heading--directory {
    flex-direction: column;
    align-items: stretch;
}

.pb-directory-search {
    display: flex;
    gap: 8px;
    width: 100%;
}

.pb-directory-search .form-control {
    flex: 1;
    min-width: 0;
    min-height: 48px;
}

.pb-directory-search .btn {
    flex-shrink: 0;
    min-height: 48px;
}

.pb-page-heading--directory .pb-djs-tools {
    justify-content: flex-start;
}

.pb-djs-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.pb-djs-tools button {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 700;
}

.pb-djs-tools button:hover,
.pb-djs-tools button:focus,
.pb-djs-tools button.active {
    border-color: #2980b9;
    background: #2980b9;
    color: #ffffff;
}

.pb-djs-directory-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 0 36px;
}

.pb-dj-profile-card {
    min-width: 0;
    min-height: 94px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.pb-dj-profile-card:hover,
.pb-dj-profile-card:focus-within {
    border-color: #2980b9;
    box-shadow: 0 12px 28px rgba(41, 128, 185, 0.14);
}

.pb-dj-profile-card img {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    object-fit: cover;
}

.pb-dj-profile-card h2 {
    margin: 0 0 4px;
    font-size: 16px;
    line-height: 1.15;
    font-weight: 800;
}

.pb-dj-profile-card h2 a {
    color: var(--text-primary);
    text-decoration: none;
}

.pb-dj-profile-card p,
.pb-dj-profile-card span {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.25;
}

.pb-dj-profile-card p a {
    color: inherit;
    text-decoration: none;
}

.pb-dj-profile-card p a:hover,
.pb-dj-profile-card p a:focus {
    color: var(--pb-blue);
    text-decoration: underline;
}

.pb-dj-profile-card span {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pb-dj-profile-card button,
.pb-dj-profile-card > a.btn,
.pb-dj-follow-btn {
    border: 0;
    background: #0d6efd;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.pb-dj-profile-card button,
.pb-dj-profile-card > a.btn {
    width: 42px;
    height: 42px;
    border-radius: 999px;
}

.pb-dj-profile-card button:hover,
.pb-dj-profile-card button:focus,
.pb-dj-profile-card > a.btn:hover,
.pb-dj-profile-card > a.btn:focus,
.pb-dj-follow-btn:hover,
.pb-dj-follow-btn:focus {
    background: #2980b9;
}

.pb-dj-hero {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    border-radius: 8px;
    background: #0f172a;
    color: #ffffff;
}

.pb-dj-hero__cover {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.46)),
        url('../images/defaults/artworks/default.png') center / cover;
}

.pb-dj-hero__content {
    position: relative;
    z-index: 1;
    min-height: 300px;
    padding: clamp(18px, 4vw, 34px);
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: center;
    gap: 32px;
}

.pb-dj-hero__content > img {
    width: 200px;
    height: 200px;
    border: 4px solid rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    object-fit: cover;
}

.pb-dj-hero__copy h1 {
    margin: 0;
    font-size: clamp(30px, 4vw, 38px);
    line-height: 0.95;
    font-weight: 800;
}

.pb-dj-hero__copy p {
    max-width: 620px;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.86);
}

.pb-dj-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.pb-dj-tags a {
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}

.pb-dj-tags a:hover,
.pb-dj-tags a:focus {
    background: #ffffff;
    color: #2980b9 !important;
}

.pb-dj-follow-btn {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    gap: 8px;
}

.pb-dj-profile-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 18px;
}

.pb-dj-profile-stats div {
    min-height: 78px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pb-dj-profile-stats strong {
    color: var(--text-primary);
    font-size: 24px;
    line-height: 1;
}

.pb-dj-profile-stats span {
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: 13px;
}

@media (max-width: 1199.98px) {
    .pb-djs-directory-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .pb-page-heading--with-tools {
        align-items: flex-start;
        flex-direction: column;
    }

    .pb-djs-tools {
        justify-content: flex-start;
    }

    .pb-djs-directory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pb-dj-hero__content {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .pb-dj-hero__content > img {
        width: 96px;
        height: 96px;
    }

    .pb-dj-follow-btn {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 767.98px) {
    .pb-djs-directory-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .pb-dj-hero,
    .pb-dj-hero__content {
        min-height: 0;
    }

    .pb-dj-hero__content {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .pb-dj-hero__content > img {
        width: 140px;
        height: 140px;
    }

    .pb-dj-profile-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* DJ profile detail tabs and social metadata */
.pb-dj-socials {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 14px;
}

.pb-dj-socials a {
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
}

.pb-dj-socials a:nth-child(1) {
    color: #1877f2;
}

.pb-dj-socials a:nth-child(2) {
    color: #f04f77;
}

.pb-dj-socials a:nth-child(3),
.pb-dj-socials a:nth-child(4) {
    color: rgba(255, 255, 255, 0.92);
}

.pb-dj-inline-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
}

.pb-dj-inline-stats span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pb-dj-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.pb-dj-share-btn,
.pb-dj-unfollow-btn {
    min-height: 42px;
    padding: 0 14px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-weight: 800;
}

.pb-dj-share-btn {
    border: 1px solid rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.pb-dj-share-btn:hover,
.pb-dj-share-btn:focus {
    border-color: #ffffff;
    background: #ffffff;
    color: #2980b9;
}

.pb-dj-follow-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

.pb-dj-unfollow-btn {
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: #ffffff;
}

.pb-dj-unfollow-btn:hover,
.pb-dj-unfollow-btn:focus {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
}

.pb-dj-profile-tabs {
    position: sticky;
    top: var(--pb-header-height);
    z-index: 20;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    margin: 12px 0 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-primary);
    scrollbar-width: none;
}

.pb-dj-profile-tabs::-webkit-scrollbar {
    display: none;
}

.pb-dj-profile-tabs a,
.pb-dj-profile-tabs button {
    flex: 0 0 auto;
    padding: 13px 14px 11px;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 800;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    background: transparent;
}

.pb-dj-profile-tabs a:hover,
.pb-dj-profile-tabs a:focus,
.pb-dj-profile-tabs a.active,
.pb-dj-profile-tabs button:hover,
.pb-dj-profile-tabs button:focus,
.pb-dj-profile-tabs button.active {
    border-bottom-color: #2980b9;
    color: #2980b9 !important;
}

.pb-dj-panel {
    margin: 20px 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
}

.pb-dj-panel h2 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 22px;
}

.pb-dj-panel p {
    max-width: 760px;
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55;
}

.pb-dj-mini-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pb-dj-mini-list span,
.pb-dj-mini-list a,
.pb-dj-events article {
    min-height: 52px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-1);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.pb-dj-mini-list img {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    object-fit: cover;
}

.pb-dj-events {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pb-dj-events article {
    align-items: flex-start;
    flex-direction: column;
}

.pb-dj-events span {
    color: var(--text-secondary);
    font-size: 13px;
}

/* Similar DJs profile section: dense follower cards matching the tabbed DJ page. */
.pb-dj-similar-section {
    margin: 16px 0 28px;
}

.pb-dj-similar-section > p {
    margin: 0 0 18px;
    color: var(--text-secondary);
    font-size: 14px;
}

.pb-similar-djs-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.pb-similar-dj-card {
    min-width: 0;
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--bg-primary);
    color: var(--text-primary);
    text-decoration: none;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.pb-similar-dj-card:hover,
.pb-similar-dj-card:focus {
    border-color: #2980b9;
    color: var(--text-primary);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.pb-similar-dj-card img {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
}

.pb-similar-dj-card span {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.pb-similar-dj-card strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.15;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-similar-dj-card small {
    color: var(--text-secondary);
    font-size: 13px;
}

html[data-theme='dark'] .pb-similar-dj-card {
    border-color: var(--pb-border);
    background: var(--pb-surface);
}

html[data-theme='dark'] .pb-similar-dj-card:hover,
html[data-theme='dark'] .pb-similar-dj-card:focus {
    border-color: #2980b9;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
}

@media (max-width: 991.98px) {
    .pb-similar-djs-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pb-dj-follow-actions {
        flex-direction: row;
    }
}

@media (max-width: 767.98px) {
    .pb-similar-djs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .pb-similar-dj-card {
        min-height: 68px;
        padding: 10px;
        gap: 10px;
    }

    .pb-similar-dj-card img {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .pb-similar-dj-card strong {
        font-size: 14px;
    }

    .pb-dj-profile-tabs {
        top: calc(var(--pb-header-height) + 42px);
        margin-inline: -8px;
        padding-inline: 8px;
    }

    .pb-dj-inline-stats {
        gap: 9px;
    }

    .pb-dj-follow-actions {
        width: 100%;
    }

    .pb-dj-follow-btn,
    .pb-dj-unfollow-btn {
        flex: 1 1 0;
    }

    .pb-dj-events {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 479.98px) {
    .pb-similar-djs-grid {
        grid-template-columns: 1fr;
    }
}

/* Mixtape pages and final DJ avatar alignment */
.pb-dj-hero__content > img {
    align-self: center;
    justify-self: center;
    display: block;
}

.pb-mixtapes-page {
    padding-bottom: 30px;
}

.pb-mixtape-genre-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    margin: 16px 0 14px;
    padding: 0 0 2px;
}

.pb-mixtape-genre-filter::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.pb-home-genre-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(190px, 1fr);
    gap: 12px;
    overflow-x: auto;
    padding: 14px 0 8px;
    scroll-snap-type: inline proximity;
}

.pb-home-genre-row a {
    min-height: 60px;
    padding: 10px 16px;
    border-radius: 8px;
    background: #f5f5f5;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    scroll-snap-align: start;
}

.pb-home-genre-row small {
    color: var(--text-secondary);
}

.pb-home-mixtape-genre-filter {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: inline proximity;
}

.pb-home-mixtape-genre-filter::-webkit-scrollbar {
    display: none;
}

.pb-home-mixtape-genre-filter > button {
    flex: 0 0 auto;
    min-width: 40px;
    min-height: 40px;
    scroll-snap-align: start;
}

.pb-mixtape-detail {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    gap: clamp(18px, 4vw, 34px);
    align-items: center;
    padding: clamp(16px, 4vw, 34px);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(41, 128, 185, 0.42)),
        var(--pb-mixtape-artwork, url('../images/defaults/artworks/default.png')) center / cover;
    color: #ffffff;
}

.pb-mixtape-detail__art {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.pb-mixtape-detail__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pb-mixtape-detail__art button {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 76px;
    height: 76px;
    border: 3px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
}

.pb-mixtape-detail__info h1 {
    margin: 0;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.05;
    font-weight: 800;
}

.pb-mixtape-detail__info {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
}

.pb-mixtape-detail__artist {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
    color: #ffffff;
    font-size: 18px;
    text-decoration: none;
}

.pb-mixtape-detail__artist img {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    object-fit: cover;
}

.pb-mixtape-detail__genres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.pb-mixtape-detail__genres a {
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
}

.pb-mixtape-detail__stats,
.pb-mixtape-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.pb-mixtape-detail__stats span,
.pb-mixtape-detail__stats time {
    color: rgba(255, 255, 255, 0.82);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}

.pb-mixtape-detail__actions button {
    min-height: 42px;
    min-width: 104px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 800;
}

.pb-mixtape-detail__actions .pb-mixtape-detail__action--primary,
.pb-mixtape-detail__actions button:hover,
.pb-mixtape-detail__actions button:focus {
    border-color: #ffffff;
    background: #ffffff;
    color: #2980b9;
}

.pb-mixtape-detail__actions .pb-mixtape-detail__action--more {
    min-width: 58px;
    padding: 0;
    justify-content: center;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(100, 116, 139, 0.88);
    color: #ffffff;
}

.pb-mixtape-detail__actions .pb-mixtape-detail__action--more:hover,
.pb-mixtape-detail__actions .pb-mixtape-detail__action--more:focus {
    border-color: #ffffff;
    background: #475569;
    color: #ffffff;
}

.pb-mixtape-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 18px;
}

.pb-mixtape-panels .pb-dj-profile-tabs {
    width: 100%;
    margin: 0;
}

.pb-mixtape-panels .pb-dj-panel {
    width: 100%;
    margin: 16px 0 0;
}

.pb-tracklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pb-tracklist li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}

.pb-tracklist li:last-child {
    border-bottom: 0;
}

.pb-comment-box {
    display: flex;
    gap: 8px;
}

.pb-comment-box input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.pb-comment-box button {
    border: 0;
    border-radius: 8px;
    padding: 0 14px;
    background: #2980b9;
    color: #ffffff;
    font-weight: 800;
}

.pb-comment-form {
    display: grid;
    gap: 8px;
    margin-bottom: 22px;
}

.pb-comment-form label {
    color: var(--text-primary);
    font-weight: 700;
}

.pb-comment-form__composer {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}

.pb-comment-form__composer > img {
    width: 38px;
    height: 38px;
    margin-top: 3px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-secondary);
}

.pb-comment-form textarea {
    width: 100%;
    min-height: 92px;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.pb-comment-form textarea:focus {
    border-color: #2980b9;
    outline: 2px solid rgb(41 128 185 / 18%);
}

.pb-comment-form__footer,
.pb-comment__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pb-comment-form__footer span {
    color: var(--text-secondary);
    font-size: 13px;
}

.pb-comment-form__footer .pb-comment-form__error {
    color: #dc2626;
}

.pb-comment-form button {
    border: 0;
    border-radius: 8px;
    padding: 9px 16px;
    background: #2980b9;
    color: #fff;
    font-weight: 700;
}

.pb-comment-form button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.pb-comments-notice,
.pb-comments-empty {
    margin: 0;
    color: var(--text-secondary);
}

.pb-comments-notice a {
    color: #2980b9;
    font-weight: 700;
}

.pb-comment-list {
    display: grid;
    gap: 0;
}

.pb-mixtape-audience {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}

.pb-mixtape-audience__user {
    min-width: 0;
    min-height: 58px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.pb-mixtape-audience__user:hover,
.pb-mixtape-audience__user:focus {
    border-color: var(--pb-blue);
    color: var(--pb-blue);
}

.pb-mixtape-audience__user img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.pb-mixtape-audience__user strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-comment {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 15px 0;
    border-top: 1px solid var(--border);
}

.pb-comment > img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.pb-comment__meta {
    justify-content: flex-start;
    margin-bottom: 4px;
}

.pb-comment__meta a,
.pb-comment__meta strong {
    color: var(--text-primary);
    font-weight: 700;
}

.pb-comment__meta time {
    color: var(--text-secondary);
    font-size: 12px;
}

.pb-dj-panel .pb-comment__content p {
    max-width: none;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    .pb-mixtape-detail {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .pb-mixtape-panels {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .pb-mixtape-detail {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .pb-mixtape-detail__art {
        width: min(100%, 320px);
    }

    .pb-mixtape-detail__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
    }

    .pb-mixtape-detail__actions button,
    .pb-mixtape-detail__actions .pb-mixtape-detail__action--more {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 8px;
        font-size: 13px;
        line-height: 1.25;
        justify-content: center;
        white-space: normal;
    }

    .pb-mixtape-panels .pb-dj-profile-tabs {
        margin-inline: 0;
        padding-inline: 0;
    }

    .pb-mixtape-panels .pb-dj-panel {
        margin-top: 12px;
        padding: 14px;
    }

    .pb-comment-box {
        flex-direction: column;
    }
}

/* Static company/info pages: About, DMCA, Privacy, Terms, Cookies, FAQ, Support. */
.pb-info-page {
    padding: 18px 0 48px;
}

.pb-info-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 14px;
    margin-bottom: 8px;
    scrollbar-width: none;
}

.pb-info-nav::-webkit-scrollbar {
    display: none;
}

.pb-info-nav a {
    flex: 0 0 auto;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-primary);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
}

.pb-info-nav a:hover,
.pb-info-nav a:focus,
.pb-info-nav a.active {
    border-color: #2980b9;
    background: #2980b9;
    color: #ffffff;
}

.pb-info-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
    padding: clamp(18px, 4vw, 34px);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.pb-info-card__eyebrow {
    margin: 0 0 8px;
    color: #2980b9;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.pb-info-card h1 {
    margin: 0 0 12px;
    font-size: clamp(30px, 5vw, 46px);
    line-height: 1.05;
}

.pb-info-card h2 {
    margin: 28px 0 10px;
    font-size: 20px;
}

.pb-info-card p,
.pb-info-card li {
    color: var(--text-secondary);
    line-height: 1.65;
}

.pb-info-card ul,
.pb-info-card ol {
    padding-left: 20px;
}

.pb-info-card a {
    color: #2980b9;
    font-weight: 700;
}

.pb-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 4px;
}

.pb-info-mini-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    background: var(--bg-secondary);
}

.pb-info-mini-card strong {
    display: block;
    margin-bottom: 5px;
    color: var(--text-primary);
}

.pb-info-contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.pb-info-contact a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 14px;
    background: var(--bg-secondary);
    text-decoration: none;
}

.pb-info-contact a:hover,
.pb-info-contact a:focus {
    border-color: #2980b9;
    color: #2980b9;
}

@media (max-width: 767.98px) {
    .pb-info-page {
        padding-top: 12px;
    }

    .pb-info-card {
        padding: 18px;
    }

    .pb-info-grid,
    .pb-info-contact {
        grid-template-columns: 1fr;
    }
}

/* User library list pages: Played, Favorites, Listen Later, and Downloads. */
.pb-library-page {
    padding: 18px 0 52px;
}

.pb-library-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.pb-library-heading h1 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: clamp(28px, 4vw, 38px);
    line-height: 1.1;
}

.pb-library-heading span {
    color: var(--text-secondary);
    font-weight: 500;
}

.pb-library-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-bottom: 24px;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.pb-library-tabs::-webkit-scrollbar {
    display: none;
}

.pb-library-tabs a {
    flex: 0 0 auto;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 700;
    background: var(--bg-primary);
}

.pb-library-tabs a:hover,
.pb-library-tabs a:focus,
.pb-library-tabs a.active {
    border-color: #2980b9;
    background: #2980b9;
    color: #ffffff;
}

.pb-library-group {
    margin-bottom: 32px;
}

.pb-library-group h2 {
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 600;
}

.pb-library-list {
    display: grid;
    gap: 12px;
}

.pb-library-item {
    position: relative;
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) 42px;
    gap: 16px;
    align-items: center;
    min-height: 148px;
    padding: 10px 8px 10px 4px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--bg-primary);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.pb-library-item:hover,
.pb-library-item:focus-within {
    border-color: #2980b9;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.pb-library-art {
    position: relative;
    width: 140px;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 6px;
    background: var(--bg-secondary);
}

.pb-library-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pb-library-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, 0.22);
}

.pb-library-play span {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 4px solid rgba(255, 255, 255, 0.84);
    border-radius: 50%;
    background: rgba(34, 36, 70, 0.82);
    color: #ffffff;
    font-size: 28px;
}

.pb-library-body {
    min-width: 0;
}

.pb-library-title {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 17px;
    font-weight: 700;
}

.pb-library-title:hover,
.pb-library-title:focus,
.pb-library-dj:hover,
.pb-library-dj:focus {
    color: #2980b9;
}

.pb-library-genre {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 14px;
}

.pb-library-dj {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 700;
    margin-bottom: 14px;
}

.pb-library-dj img {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    object-fit: cover;
}

.pb-library-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pb-library-stats > span,
.pb-library-menu {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 10px;
    color: var(--text-secondary);
    background: var(--bg-primary);
    font-size: 13px;
}

.pb-library-stats span i {
    color: #2980b9;
}

.pb-library-remove {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    align-self: start;
    border: 1px solid #ff3b4f;
    border-radius: 50%;
    background: transparent;
    color: #ff3b4f;
    font-size: 18px;
}

.pb-library-remove:hover,
.pb-library-remove:focus {
    background: #ff3b4f;
    color: #ffffff;
}

.pb-library-menu {
    width: 34px;
    justify-content: center;
    padding: 0;
    color: var(--text-primary);
}

.pb-library-unavailable {
    opacity: 0.82;
}

.pb-library-unavailable .pb-library-art {
    background: linear-gradient(135deg, rgba(41, 128, 185, 0.08), rgba(255, 255, 255, 0.8)), var(--bg-secondary);
}

.pb-library-unavailable-visual {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--text-secondary);
    text-align: center;
    font-size: 48px;
}

.pb-library-badge {
    position: absolute;
    left: 10px;
    bottom: 8px;
    border-radius: 999px;
    padding: 4px 10px;
    background: #4b5563;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.pb-library-empty {
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 26px;
    background: var(--bg-primary);
    color: var(--text-secondary);
}

@media (max-width: 767.98px) {
    .pb-library-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .pb-library-item {
        grid-template-columns: 96px minmax(0, 1fr) 34px;
        gap: 11px;
        min-height: 116px;
        padding: 8px 4px;
    }

    .pb-library-art {
        width: 96px;
    }

    .pb-library-play span {
        width: 46px;
        height: 46px;
        font-size: 22px;
        border-width: 3px;
    }

    .pb-library-title {
        margin-bottom: 5px;
        font-size: 15px;
    }

    .pb-library-genre,
    .pb-library-dj {
        margin-bottom: 6px;
        font-size: 13px;
    }

    .pb-library-stats {
        gap: 5px;
    }

    .pb-library-stats > span {
        min-height: 28px;
        padding: 0 7px;
        font-size: 12px;
    }
}

@media (max-width: 479.98px) {
    .pb-library-item {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .pb-library-remove {
        position: absolute;
        top: 8px;
        right: 6px;
    }

    .pb-library-body {
        padding-right: 30px;
    }

    .pb-library-art {
        width: 82px;
    }
}

/* LARAVEL CUT 03 START: pages.css - content, account, charts, library, DJ, genre, and mixtape page surfaces. */
/* Account and charts pages: dashboard, stats, uploads, and chart rankings. */
.pb-account-page,
.pb-charts-page {
    padding: 22px 0 56px;
}

.pb-account-heading,
.pb-charts-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.pb-account-heading h1,
.pb-charts-heading h1 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: clamp(28px, 4vw, 38px);
}

.pb-account-heading p,
.pb-charts-heading p {
    margin: 0;
    color: var(--text-secondary);
}

.pb-tab-links {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    margin-bottom: 18px;
    scrollbar-width: none;
}

.pb-tab-links::-webkit-scrollbar {
    display: none;
}

.pb-tab-links a {
    flex: 0 0 auto;
    padding: 10px 0 12px;
    border-bottom: 2px solid transparent;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 800;
}

.pb-tab-links a:hover,
.pb-tab-links a:focus,
.pb-tab-links a.active {
    border-color: #2980b9;
    color: #2980b9;
}

.pb-chart-list {
    display: grid;
    max-width: 760px;
    gap: 18px;
}

.pb-dj-ranking-table-wrap {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.pb-dj-ranking-table-wrap::-webkit-scrollbar {
    display: none;
}

.pb-dj-ranking-intro {
    margin: 0 0 6px;
    color: var(--text-secondary);
    font-size: 14px;
}

.pb-dj-ranking-table {
    width: 100%;
    min-width: 660px;
    border-collapse: collapse;
}

.pb-dj-ranking-table th,
.pb-dj-ranking-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    text-align: right;
    vertical-align: middle;
}

.pb-dj-ranking-table th:first-child,
.pb-dj-ranking-table td:first-child,
.pb-dj-ranking-table th:nth-child(2),
.pb-dj-ranking-table td:nth-child(2) {
    text-align: left;
}

.pb-dj-ranking-table th {
    color: var(--text-primary);
    font-weight: 800;
}

.pb-dj-ranking-position {
    width: 72px;
    font-weight: 800;
}

.pb-dj-ranking-profile {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    text-decoration: none;
}

.pb-dj-ranking-profile:hover,
.pb-dj-ranking-profile:focus {
    color: #2980b9;
}

.pb-dj-ranking-profile img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

[data-player-like].is-liked,
[data-player-like][aria-pressed='true'] {
    color: #2980b9;
}

.pb-chart-row {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--bg-primary);
}

.pb-chart-row:hover,
.pb-chart-row:focus-within {
    border-color: #2980b9;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.pb-chart-art {
    position: relative;
    width: 140px;
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-secondary);
}

.pb-chart-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pb-chart-play {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #2980b9;
    color: #ffffff;
    font-size: 26px;
    cursor: pointer;
}

.pb-chart-play:hover {
    background: #1b6593;
}

.pb-chart-play:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px #2980b9;
}

.pb-chart-rank {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #1677ff, #316be9);
    color: #ffffff;
    font-weight: 900;
}

.pb-chart-title {
    display: inline-flex;
    margin-bottom: 3px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
}

.pb-chart-title:hover,
.pb-chart-title:focus {
    color: #2980b9;
}

.pb-chart-meta {
    margin: 0 0 9px;
    color: var(--text-primary);
    font-size: 14px;
}

.pb-chart-dj {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 800;
}

.pb-chart-dj img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

.pb-chart-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    color: var(--text-secondary);
    font-size: 13px;
}

.pb-chart-stats span,
.pb-chart-stats button,
.pb-chart-stats a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pb-chart-stats a {
    color: inherit;
    text-decoration: none;
}

.pb-chart-stats a:hover,
.pb-chart-stats a:focus-visible {
    color: #2980b9;
    text-decoration: underline;
}

.pb-chart-stats i {
    color: #2980b9;
}

.pb-account-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.pb-account-kpi,
.pb-account-panel {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
    padding: 16px;
}

.pb-account-kpi span {
    display: block;
    color: var(--text-secondary);
    font-size: 13px;
}

.pb-account-kpi strong {
    display: block;
    margin-top: 4px;
    font-size: 28px;
}

.pb-dashboard-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
}

.pb-account-panel h2 {
    margin: 0 0 14px;
    font-size: 20px;
}

.pb-account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pb-account-actions a,
.pb-account-heading .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 12px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 800;
    background: var(--bg-primary);
}

.pb-account-actions a:hover,
.pb-account-actions a:focus,
.pb-account-heading .btn:hover,
.pb-account-heading .btn:focus {
    border-color: #2980b9;
    color: #2980b9;
}

.pb-settings-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 16px;
}
.pb-settings-page {
    max-width: 1180px;
    margin-inline: auto;
    padding-bottom: 32px;
    padding-inline: 12px;
}
.pb-settings-layout > aside {
    min-width: 0;
}
.pb-settings-content,
.pb-profile-settings,
.pb-profile-form,
.pb-profile-image {
    min-width: 0;
}
.pb-settings-overview {
    display: grid;
    gap: 24px;
}
.pb-settings-identity {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-primary);
}
.pb-settings-identity img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
}
.pb-settings-identity div {
    min-width: 0;
}
.pb-settings-identity h2 {
    margin: 4px 0;
    font-size: 24px;
    overflow-wrap: anywhere;
}
.pb-settings-identity p {
    margin: 0;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}
.pb-settings-identity span {
    color: var(--text-secondary);
    font-size: 13px;
}
.pb-settings-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
}
.pb-settings-summary > div {
    border-left: 3px solid #1683bd;
    padding-left: 14px;
}
.pb-settings-summary dt {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 400;
}
.pb-settings-summary dd {
    margin: 4px 0 0;
    font-weight: 600;
}
.pb-settings-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.pb-settings-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    background: var(--bg-primary);
}
.pb-settings-action > i:first-child {
    color: #1683bd;
    font-size: 22px;
}
.pb-settings-action > span {
    flex: 1;
    min-width: 0;
}
.pb-settings-action strong,
.pb-settings-action small {
    display: block;
}
.pb-settings-action small {
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: 4px;
}
.pb-settings-action:hover,
.pb-settings-action:focus-visible {
    border-color: #1683bd;
    color: #1683bd;
}
.pb-profile-images {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}
.pb-profile-image h3 {
    font-size: 15px;
    margin-bottom: 12px;
}
.pb-profile-image .pb-upload-artwork {
    display: grid;
    grid-template-columns: 1fr;
}
.pb-profile-image--profile_picture .pb-upload-artwork > button {
    width: 136px;
    height: 136px;
    border-radius: 50%;
}
.pb-profile-image--cover_pic .pb-upload-artwork > button {
    aspect-ratio: 3 / 1;
}
.pb-profile-image .pb-upload-artwork img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}
.pb-profile-image .pb-upload-artwork__placeholder {
    height: 100%;
    aspect-ratio: auto;
}
.pb-profile-image-status {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 8px 0 0;
}
.pb-profile-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.pb-profile-form [role='status'] {
    margin: 0 !important;
}
.pb-account-dialog {
    z-index: 11001;
    width: min(480px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    border-radius: 12px;
}
@media (max-width: 767px) {
    .pb-profile-images,
    .pb-profile-field-grid,
    .pb-settings-action-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .pb-settings-summary {
        gap: 10px;
        font-size: 13px;
    }
    .pb-settings-identity {
        padding: 18px;
        gap: 14px;
    }
    .pb-settings-page .pb-settings-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row;
        grid-auto-columns: auto;
        overflow: visible;
    }
    .pb-settings-page .pb-settings-nav a {
        white-space: normal;
        font-size: 13px;
        min-height: 44px;
    }
}

.pb-settings-nav {
    position: sticky;
    top: calc(var(--pb-header-height) + 16px);
    align-self: start;
    display: grid;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    background: var(--bg-primary);
}

.pb-settings-nav a {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 8px;
    padding: 0 10px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 800;
}

.pb-settings-nav a:hover,
.pb-settings-nav a:focus,
.pb-settings-nav a.active {
    background: rgba(41, 128, 185, 0.12);
    color: #2980b9;
}

.pb-settings-stack,
.pb-settings-form {
    display: grid;
    gap: 16px;
}

.pb-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.pb-form-field {
    display: grid;
    gap: 6px;
}

.pb-form-field label {
    margin: 0;
    color: var(--text-primary);
    font-weight: 800;
}

.pb-form-field input,
.pb-form-field select,
.pb-form-field textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.pb-form-field textarea {
    min-height: 112px;
    padding-block: 10px;
    resize: vertical;
}

.pb-form-field input:focus,
.pb-form-field select:focus,
.pb-form-field textarea:focus {
    border-color: #2980b9;
    outline: 3px solid rgba(41, 128, 185, 0.16);
}

.pb-form-field small,
.pb-settings-switch small {
    color: var(--text-secondary);
}

.pb-settings-avatar-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 4px;
}

.pb-settings-avatar-row img {
    width: 84px;
    height: 84px;
    border: 3px solid var(--border);
    border-radius: 50%;
    object-fit: cover;
}

.pb-settings-save {
    justify-self: start;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #2980b9;
    border-radius: 8px;
    padding: 0 14px;
    background: #2980b9;
    color: #ffffff;
    font-weight: 800;
}

.pb-settings-save:hover,
.pb-settings-save:focus {
    background: #1f6f9f;
    color: #ffffff;
}

.pb-settings-switch-list {
    display: grid;
    gap: 8px;
}

.pb-settings-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 58px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.pb-settings-switch:last-child {
    border-bottom: 0;
}

.pb-settings-switch strong,
.pb-settings-switch small {
    display: block;
}

.pb-settings-switch small {
    margin-top: 3px;
}

.pb-settings-switch input {
    width: 44px;
    height: 24px;
    flex: 0 0 44px;
    accent-color: #2980b9;
}

.pb-settings-danger {
    border-color: rgba(216, 61, 90, 0.24);
}

.pb-settings-danger h2,
.pb-settings-delete {
    color: #d83d5a;
}

.pb-settings-delete {
    min-height: 38px;
    justify-self: start;
    border: 1px solid rgba(216, 61, 90, 0.42);
    border-radius: 8px;
    padding: 0 12px;
    background: transparent;
    font-weight: 800;
}

.pb-settings-delete:hover,
.pb-settings-delete:focus {
    background: #d83d5a;
    color: #ffffff;
}

.pb-mini-activity {
    display: grid;
    gap: 10px;
}

.pb-mini-activity li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}

.pb-mini-activity li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.pb-stats-bars {
    display: grid;
    gap: 12px;
}

.pb-stats-bar {
    display: grid;
    gap: 6px;
}

.pb-stats-bar > span {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-weight: 700;
}

.pb-stats-track {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bg-secondary);
}

.pb-stats-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #2980b9;
}

.pb-uploads-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.pb-uploads-toolbar button {
    min-height: 36px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0 14px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 700;
}

.pb-uploads-toolbar button:hover,
.pb-uploads-toolbar button:focus,
.pb-uploads-toolbar button.active {
    border-color: #2980b9;
    background: #2980b9;
    color: #ffffff;
}

/* My Uploads management cards, status badges, and card actions. */
.pb-my-uploads-page .pb-account-heading {
    align-items: center;
}

.pb-my-uploads-grid .pb-featured-card,
.pb-upload-card {
    height: 342px;
    min-height: 342px;
}

.pb-page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    margin: 0 0 12px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.pb-page-breadcrumb::-webkit-scrollbar {
    display: none;
}

.pb-page-breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
}

.pb-page-breadcrumb a:hover,
.pb-page-breadcrumb a:focus {
    color: #2980b9;
}

.pb-page-breadcrumb i {
    flex: 0 0 auto;
    color: var(--text-muted, #94a3b8);
    font-size: 11px;
}

.pb-page-breadcrumb span {
    color: var(--text-primary);
}

.pb-upload-card .pb-featured-card__artwork {
    position: relative;
}

.pb-upload-status {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 0 9px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.pb-upload-status--published {
    background: #168a46;
}

.pb-upload-status--pending {
    background: #d97706;
}

.pb-upload-status--draft {
    background: #5b6472;
}

.pb-upload-card .pb-featured-card__body h2 {
    margin-bottom: 6px;
}

.pb-upload-card .pb-featured-card__stats {
    gap: 10px;
    padding-top: 10px;
}

.pb-upload-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
}

.pb-upload-actions > span {
    grid-column: 1 / -1;
    color: var(--text-secondary, #64748b);
    font-size: 12px;
    font-weight: 700;
}

.pb-upload-actions a,
.pb-upload-actions .pb-upload-delete {
    min-height: 32px;
    min-width: 0;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    background: var(--bg-primary);
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.pb-upload-actions a:hover,
.pb-upload-actions a:focus,
.pb-upload-actions .pb-upload-delete:hover,
.pb-upload-actions .pb-upload-delete:focus {
    border-color: #2980b9;
    color: #2980b9;
}

.pb-upload-actions .pb-upload-delete:hover,
.pb-upload-actions .pb-upload-delete:focus {
    border-color: #dc2626;
    color: #dc2626;
    background: color-mix(in srgb, #dc2626 6%, var(--bg-primary, #ffffff));
}

.pb-connections-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.pb-connections-group h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    margin-bottom: 12px;
}

.pb-connections-empty {
    font-size: 14px;
    margin-bottom: 12px;
    opacity: 0.75;
}

@media (max-width: 768px) {
    .pb-connections-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.pb-flash-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.pb-flash-banner--success {
    border-color: #16a34a;
    color: #14532d;
    background: color-mix(in srgb, #16a34a 8%, #ffffff);
}

.pb-flash-banner--warning {
    border-color: #d97706;
    color: #78350f;
    background: color-mix(in srgb, #d97706 8%, #ffffff);
}

html[data-theme='dark'] .pb-flash-banner--success {
    color: #bbf7d0;
    background: color-mix(in srgb, #16a34a 16%, #111827);
}

html[data-theme='dark'] .pb-flash-banner--warning {
    color: #fde68a;
    background: color-mix(in srgb, #d97706 16%, #111827);
}

@media (max-width: 991.98px) {
    .pb-account-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pb-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .pb-settings-layout {
        grid-template-columns: 1fr;
    }

    .pb-settings-nav {
        position: static;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .pb-settings-nav::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .pb-account-heading,
    .pb-charts-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .pb-chart-row {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 11px;
    }

    .pb-chart-art {
        width: 96px;
    }

    .pb-chart-title {
        font-size: 15px;
    }

    .pb-chart-stats {
        gap: 9px;
    }

    .pb-account-kpis {
        grid-template-columns: 1fr;
    }

    .pb-form-grid {
        grid-template-columns: 1fr;
    }

    .pb-settings-avatar-row,
    .pb-settings-switch {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* LARAVEL CUT 06 START: overrides.css - late dark-mode and compatibility repairs. */
/* Final dark-theme repair layer.
   These overrides intentionally appear late to win over older hard-coded light colors. */
html[data-theme='dark'] {
    color-scheme: dark;
    --pb-page: #070b10;
    --pb-surface: #0f1722;
    --pb-surface-2: #162131;
    --pb-text: #f7fbff;
    --pb-muted: #adbac8;
    --pb-border: rgba(255, 255, 255, 0.13);
    --bg-primary: var(--pb-surface);
    --bg-secondary: var(--pb-surface-2);
    --surface-1: #101925;
    --surface-2: #162131;
    --surface-3: #1f2d40;
    --text-primary: var(--pb-text);
    --text-secondary: var(--pb-muted);
    --text-strong: #ffffff;
    --text-muted: #adbac8;
    --pb-player-bg: #05070a;
    --pb-player-surface: #0b111a;
    --pb-player-text: #f7fbff;
    --pb-player-muted: #adbac8;
    --pb-player-border: rgba(255, 255, 255, 0.14);
}

html[data-theme='dark'] body,
html[data-theme='dark'] .main-content,
html[data-theme='dark'] .content {
    background: var(--pb-page);
    color: var(--pb-text);
}

html[data-theme='dark'] body::before {
    display: block;
    background:
        linear-gradient(180deg, rgba(47, 139, 197, 0.12), transparent 300px), linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent 50%);
}

html[data-theme='dark'] header.top-menu,
html[data-theme='dark'] .sidebar,
html[data-theme='dark'] .sidebar-brand,
html[data-theme='dark'] .footer,
html[data-theme='dark'] #musicPlayer,
html[data-theme='dark'] .nowPlayingBar {
    border-color: var(--pb-border);
    background: rgba(15, 23, 34, 0.96);
    color: var(--pb-text);
    box-shadow: none;
}

html[data-theme='dark'] .footer,
html[data-theme='dark'] #musicPlayer,
html[data-theme='dark'] .nowPlayingBar {
    background: var(--pb-player-bg);
    color: var(--pb-player-text);
}

html[data-theme='dark'] .menu-btn,
html[data-theme='dark'] .pb-header-icon-btn,
html[data-theme='dark'] .pb-header-search-mini,
html[data-theme='dark'] .pb-signin-btn,
html[data-theme='dark'] .btn-upload,
html[data-theme='dark'] .pb-header-search__field,
html[data-theme='dark'] .pb-user-menu__toggle,
html[data-theme='dark'] .pb-user-dropdown,
html[data-theme='dark'] .pb-card-action-menu,
html[data-theme='dark'] .pb-share-dialog,
html[data-theme='dark'] .pb-queue-panel {
    border-color: var(--pb-border);
    background: var(--pb-surface);
    color: var(--pb-text);
}

html[data-theme='dark'] .pb-header-search__input,
html[data-theme='dark'] input,
html[data-theme='dark'] textarea,
html[data-theme='dark'] select {
    color: var(--pb-text);
    background: transparent;
}

html[data-theme='dark'] .pb-header-search__input::placeholder,
html[data-theme='dark'] input::placeholder,
html[data-theme='dark'] textarea::placeholder {
    color: rgba(173, 186, 200, 0.82);
}

html[data-theme='dark'] .btn-upload,
html[data-theme='dark'] .pb-signin-btn {
    background: var(--pb-surface) !important;
    color: var(--pb-text) !important;
}

html[data-theme='dark'] .sidebar .nav-link,
html[data-theme='dark'] .footer-links a,
html[data-theme='dark'] .company-page-footer a,
html[data-theme='dark'] .copyright-footer {
    color: var(--pb-muted);
}

html[data-theme='dark'] .sidebar .nav-link:hover,
html[data-theme='dark'] .sidebar .nav-link:focus,
html[data-theme='dark'] .sidebar .nav-link.active {
    background: rgba(41, 128, 185, 0.18);
    color: #69bff5;
}

html[data-theme='dark'] .pb-featured-card,
html[data-theme='dark'] .pb-dj-card,
html[data-theme='dark'] .pb-dj-profile-card,
html[data-theme='dark'] .pb-account-kpi,
html[data-theme='dark'] .pb-account-panel,
html[data-theme='dark'] .pb-info-card,
html[data-theme='dark'] .pb-info-mini-card,
html[data-theme='dark'] .pb-library-item,
html[data-theme='dark'] .pb-chart-row,
html[data-theme='dark'] .pb-mixtape-detail,
html[data-theme='dark'] .pb-dj-panel,
html[data-theme='dark'] .pb-genre-filterbar,
html[data-theme='dark'] .pb-info-contact a,
html[data-theme='dark'] .pb-ad-placement,
html[data-theme='dark'] .pb-user-dropdown a {
    border-color: var(--pb-border);
    background: var(--pb-surface);
    color: var(--pb-text);
}

html[data-theme='dark'] .pb-featured-card__artwork,
html[data-theme='dark'] .pb-library-art,
html[data-theme='dark'] .pb-chart-art,
html[data-theme='dark'] .pb-mixtape-detail__art,
html[data-theme='dark'] .pb-account-actions a,
html[data-theme='dark'] .pb-upload-actions a,
html[data-theme='dark'] .pb-upload-actions .pb-upload-delete,
html[data-theme='dark'] .pb-uploads-toolbar button,
html[data-theme='dark'] .pb-library-tabs a,
html[data-theme='dark'] .pb-info-nav a,
html[data-theme='dark'] .pb-djs-tools button {
    border-color: var(--pb-border);
    background: var(--pb-surface-2);
    color: var(--pb-text);
}

html[data-theme='dark'] .pb-featured-card__body h2,
html[data-theme='dark'] .pb-featured-card__body h2 a,
html[data-theme='dark'] .pb-featured-card__genre,
html[data-theme='dark'] .pb-featured-card__artist,
html[data-theme='dark'] .pb-section-heading h1,
html[data-theme='dark'] .pb-page-heading h1,
html[data-theme='dark'] .pb-account-heading h1,
html[data-theme='dark'] .pb-charts-heading h1,
html[data-theme='dark'] .pb-chart-title,
html[data-theme='dark'] .pb-library-title,
html[data-theme='dark'] .trackName a,
html[data-theme='dark'] .artistName a,
html[data-theme='dark'] .genreName a {
    color: var(--pb-text);
}

html[data-theme='dark'] .pb-featured-card__stats,
html[data-theme='dark'] .pb-section-heading--stacked p,
html[data-theme='dark'] .pb-page-heading p,
html[data-theme='dark'] .pb-account-heading p,
html[data-theme='dark'] .pb-charts-heading p,
html[data-theme='dark'] .pb-chart-meta,
html[data-theme='dark'] .pb-library-genre,
html[data-theme='dark'] .pb-info-card p,
html[data-theme='dark'] .pb-info-card li,
html[data-theme='dark'] .pb-account-kpi span,
html[data-theme='dark'] .pb-mini-activity li,
html[data-theme='dark'] .pb-page-breadcrumb a {
    color: var(--pb-muted);
}

html[data-theme='dark'] .pb-card-action-menu :is(button, a[data-mixtape-edit-link]),
html[data-theme='dark'] .pb-user-dropdown a,
html[data-theme='dark'] .pb-share-dialog button,
html[data-theme='dark'] .pb-queue-panel button {
    color: var(--pb-text);
}

html[data-theme='dark'] .pb-card-action-menu :is(button, a[data-mixtape-edit-link]):hover,
html[data-theme='dark'] .pb-card-action-menu :is(button, a[data-mixtape-edit-link]):focus,
html[data-theme='dark'] .pb-user-dropdown a:hover,
html[data-theme='dark'] .pb-user-dropdown a:focus,
html[data-theme='dark'] .footer-links a:hover,
html[data-theme='dark'] .company-page-footer a:hover {
    color: #69bff5;
    background: rgba(41, 128, 185, 0.16);
}

html[data-theme='dark'] .pb-home-announcement {
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(146, 64, 14, 0.22);
    color: #ffe8aa;
}

html[data-theme='dark'] .pb-home-announcement p,
html[data-theme='dark'] .pb-home-announcement__title {
    color: #ffe8aa;
}

html[data-theme='dark'] .pb-tab-links a,
html[data-theme='dark'] .pb-dj-profile-tabs a,
html[data-theme='dark'] .pb-page-breadcrumb span {
    color: var(--pb-text);
}

html[data-theme='dark'] .progress-container,
html[data-theme='dark'] .progressBarBg {
    background: rgba(255, 255, 255, 0.14);
}

html[data-theme='dark'] img.header-logo-img,
html[data-theme='dark'] img.sidebar-logo-img {
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18));
}

/* LARAVEL CUT 04 START: auth.css - login, signup, forgot password, reset password, and email verification. */
/* Auth pages: login, signup, forgot password, reset password, and email verification. */
.pb-auth-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 16px;
    background: #ffffff;
    color: #050505;
}

.pb-auth-shell {
    width: min(100%, 330px);
    text-align: center;
}

.pb-auth-logo {
    display: inline-flex;
    justify-content: center;
    margin-bottom: 30px;
}

.pb-auth-logo img {
    width: 192px;
    height: auto;
    object-fit: contain;
}

.pb-auth-shell h1 {
    margin: 0 0 14px;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 800;
}

.pb-auth-copy {
    margin: -4px 0 18px;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.45;
}

.pb-auth-form {
    display: grid;
    gap: 16px;
}

.pb-auth-form input {
    width: 100%;
    height: 54px;
    border: 1px solid #cfd4dc;
    border-radius: 4px;
    padding: 0 17px;
    background: #ffffff;
    color: #111827;
    font-size: 16px;
}

.pb-auth-form input:focus {
    border-color: #2980b9;
    outline: 3px solid rgba(41, 128, 185, 0.16);
}

.pb-auth-button {
    width: 100%;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 6px;
    background: #258df2;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
}

.pb-auth-button:hover,
.pb-auth-button:focus {
    background: #2980b9;
    color: #ffffff;
}

.pb-auth-links {
    display: grid;
    gap: 3px;
    margin-top: 18px;
    font-size: 14px;
}

.pb-auth-links a,
.pb-auth-inline-link {
    color: #050505;
    text-decoration: none;
}

.pb-auth-links a:hover,
.pb-auth-links a:focus,
.pb-auth-inline-link:hover,
.pb-auth-inline-link:focus {
    color: #2980b9;
}

.pb-auth-footer {
    margin-top: 36px;
    color: #374151;
    font-size: 13px;
}

.pb-auth-checklist {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    color: #4b5563;
    text-align: left;
    list-style: none;
    font-size: 13px;
}

.pb-auth-checklist li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.pb-auth-checklist i {
    color: #258df2;
}

html[data-theme='dark'] .pb-auth-body {
    background: #070b10;
    color: #f7fbff;
}

html[data-theme='dark'] .pb-auth-copy,
html[data-theme='dark'] .pb-auth-footer,
html[data-theme='dark'] .pb-auth-checklist {
    color: #adbac8;
}

html[data-theme='dark'] .pb-auth-form input {
    border-color: rgba(255, 255, 255, 0.14);
    background: #101925;
    color: #f7fbff;
}

html[data-theme='dark'] .pb-auth-links a,
html[data-theme='dark'] .pb-auth-inline-link {
    color: #f7fbff;
}

html[data-theme='dark'] .pb-auth-links a:hover,
html[data-theme='dark'] .pb-auth-links a:focus,
html[data-theme='dark'] .pb-auth-inline-link:hover,
html[data-theme='dark'] .pb-auth-inline-link:focus {
    color: #69bff5;
}

@media (max-width: 420px) {
    .pb-auth-body {
        align-items: start;
        padding-top: 52px;
    }

    .pb-auth-shell {
        width: 100%;
    }
}

/* LARAVEL CUT 05 START: admin.css - admin dashboard shell, sidebar, topbar, tables, queues, and cards. */
/* Admin template: dashboard shell, sidebar, topbar, tables, queues, and cards. */
.pb-content-skeleton--admin .pb-content-skeleton__inner {
    min-height: 100%;
}

.pb-content-skeleton--admin .pb-content-skeleton__line {
    width: min(70%, 420px);
    height: 14px;
}

.pb-content-skeleton--admin .pb-content-skeleton__line--heading {
    width: min(42%, 360px);
    height: 30px;
}

.pb-admin-skeleton--dashboard,
.pb-admin-skeleton--table,
.pb-admin-skeleton--form,
.pb-admin-skeleton--queue,
.pb-admin-skeleton--analytics {
    min-height: 320px;
}

.pb-admin-skeleton__metrics,
.pb-admin-skeleton__panels {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.pb-admin-skeleton__metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pb-admin-skeleton__metric,
.pb-admin-skeleton__panel {
    min-width: 0;
    min-height: 112px;
    padding: 16px;
    border: 1px solid var(--pb-border);
    border-radius: 8px;
    background: var(--pb-surface);
}

.pb-admin-skeleton__metric {
    display: grid;
    align-content: center;
    gap: 14px;
}

.pb-admin-skeleton__panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pb-admin-skeleton__panel {
    display: grid;
    align-content: start;
    gap: 14px;
    min-height: 180px;
}

.pb-admin-skeleton__form {
    display: grid;
    gap: 18px;
    margin-top: 28px;
}

.pb-admin-skeleton__field {
    display: grid;
    gap: 10px;
    min-height: 64px;
}

.pb-admin-skeleton__field .pb-content-skeleton__line:first-child {
    width: min(24%, 140px);
    height: 12px;
}

.pb-admin-skeleton__field .pb-content-skeleton__line:last-child {
    width: 100%;
    height: 42px;
    border: 1px solid var(--pb-border);
    border-radius: 8px;
}

.pb-admin-skeleton__queue {
    display: grid;
    gap: 0;
    margin-top: 28px;
    overflow: hidden;
    border: 1px solid var(--pb-border);
    border-radius: 8px;
    background: var(--pb-surface);
}

.pb-admin-skeleton__queue-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.7fr;
    align-items: center;
    gap: 16px;
    min-height: 64px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--pb-border);
}

.pb-admin-skeleton__queue-row:last-child {
    border-bottom: 0;
}

.pb-admin-skeleton__chart {
    display: grid;
    align-content: end;
    gap: 14px;
    min-height: 240px;
    margin-top: 28px;
    padding: 18px;
    border: 1px solid var(--pb-border);
    border-radius: 8px;
    background: var(--pb-surface);
}

.pb-admin-skeleton__chart .pb-content-skeleton__line {
    width: 100%;
}

@media (max-width: 767.98px) {
    .pb-admin-skeleton__metrics,
    .pb-admin-skeleton__panels {
        grid-template-columns: 1fr;
    }

    .pb-admin-skeleton__queue-row {
        grid-template-columns: 1fr 0.8fr;
    }

    .pb-admin-skeleton__queue-row .pb-content-skeleton__line:last-child {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pb-content-skeleton--admin.pb-admin-skeleton--reduced-motion,
    .pb-content-skeleton--admin.pb-admin-skeleton--reduced-motion * {
        animation: none;
        transition: none;
    }
}

.pb-admin-body {
    min-height: 100vh;
    padding: 0;
    background: #f4f7fb;
    color: #101820;
}

.pb-admin-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    transition: grid-template-columns 0.2s ease;
}

.pb-admin-shell.is-sidebar-collapsed {
    grid-template-columns: 78px minmax(0, 1fr);
}

.pb-admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #dce3ed;
    background: #ffffff;
}

.pb-admin-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 66px;
    padding: 10px 18px;
    border-bottom: 1px solid #dce3ed;
}

.pb-admin-brand img {
    width: 138px;
    height: 34px;
    object-fit: contain;
}

.pb-admin-sidebar-toggle {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid #dce3ed;
    border-radius: 8px;
    background: #ffffff;
    color: #101820;
}

.pb-admin-sidebar-toggle:hover,
.pb-admin-sidebar-toggle:focus {
    border-color: #2980b9;
    color: #2980b9;
}

.pb-admin-shell.is-sidebar-collapsed .pb-admin-brand {
    justify-content: center;
    padding-inline: 10px;
}

.pb-admin-shell.is-sidebar-collapsed .pb-admin-brand a,
.pb-admin-shell.is-sidebar-collapsed .pb-admin-nav span,
.pb-admin-shell.is-sidebar-collapsed .pb-admin-sidebar__footer {
    display: none;
}

.pb-admin-shell.is-sidebar-collapsed .pb-admin-nav a {
    justify-content: center;
    padding: 0;
}

.pb-admin-nav {
    display: grid;
    gap: 4px;
    padding: 14px 10px;
}

.pb-admin-nav a {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    padding: 0 12px;
    color: #4b5563;
    text-decoration: none;
    font-weight: 700;
}

.pb-admin-nav a:hover,
.pb-admin-nav a:focus,
.pb-admin-nav a.active {
    background: rgba(41, 128, 185, 0.12);
    color: #2980b9;
}

.pb-admin-sidebar__footer {
    margin-top: auto;
    padding: 14px 18px;
    border-top: 1px solid #dce3ed;
    color: #6b7280;
    font-size: 12px;
}

.pb-admin-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pb-admin-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #dce3ed;
    background: rgba(255, 255, 255, 0.96);
    padding: 10px 20px;
    backdrop-filter: blur(12px);
}

.pb-admin-search {
    width: min(100%, 560px);
}

.pb-admin-search input {
    width: 100%;
    min-height: 38px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0 12px;
    background: #ffffff;
}

.pb-admin-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pb-admin-icon-btn,
.pb-admin-primary-btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #101820;
    text-decoration: none;
    font-weight: 800;
}

.pb-admin-icon-btn {
    width: 38px;
}

.pb-admin-primary-btn {
    padding: 0 12px;
    border-color: #2980b9;
    background: #2980b9;
    color: #ffffff;
}

.pb-admin-primary-btn:hover,
.pb-admin-primary-btn:focus {
    background: #1f6f9f;
    color: #ffffff;
}

.pb-admin-content {
    padding: 22px;
}

.pb-admin-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.pb-admin-heading h1 {
    margin: 0 0 5px;
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800;
}

.pb-admin-heading p {
    margin: 0;
    color: #607389;
}

.pb-admin-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.pb-admin-kpi,
.pb-admin-panel {
    border: 1px solid #dce3ed;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.pb-admin-kpi {
    padding: 16px;
}

.pb-admin-kpi span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #607389;
    font-size: 13px;
    font-weight: 700;
}

.pb-admin-kpi strong {
    display: block;
    margin-top: 8px;
    font-size: 30px;
    line-height: 1;
}

.pb-admin-kpi small {
    display: block;
    margin-top: 8px;
    color: #168a46;
    font-weight: 700;
}

.pb-admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    gap: 16px;
}

.pb-admin-panel {
    min-width: 0;
    overflow: hidden;
}

.pb-admin-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    border-bottom: 1px solid #dce3ed;
    padding: 0 16px;
}

.pb-admin-panel__header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.pb-admin-panel__header a {
    color: #2980b9;
    text-decoration: none;
    font-weight: 800;
}

.pb-admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.pb-admin-table th,
.pb-admin-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #edf1f6;
    vertical-align: middle;
}

.pb-admin-table th {
    color: #607389;
    font-size: 12px;
    text-transform: uppercase;
}

.pb-admin-media {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pb-admin-media img {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
}

.pb-admin-media strong,
.pb-admin-media small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-admin-media small {
    color: #607389;
}

.pb-admin-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 0 9px;
    font-size: 12px;
    font-weight: 800;
}

.pb-admin-status--pending {
    background: #fff7ed;
    color: #b45309;
}

.pb-admin-status--approved {
    background: #ecfdf3;
    color: #168a46;
}

.pb-admin-status--flagged {
    background: #fef2f2;
    color: #b91c1c;
}

.pb-admin-table-actions {
    display: flex;
    gap: 6px;
}

.pb-admin-table-actions button {
    width: 32px;
    height: 32px;
    border: 1px solid #dce3ed;
    border-radius: 8px;
    background: #ffffff;
    color: #101820;
}

.pb-admin-table-actions button:hover,
.pb-admin-table-actions button:focus {
    border-color: #2980b9;
    color: #2980b9;
}

.pb-admin-stack {
    display: grid;
    gap: 16px;
}

.pb-admin-list {
    display: grid;
    gap: 0;
}

.pb-admin-list a,
.pb-admin-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 10px 16px;
    border-bottom: 1px solid #edf1f6;
    color: #101820;
    text-decoration: none;
}

.pb-admin-list a:hover,
.pb-admin-list a:focus {
    background: #f8fbff;
    color: #2980b9;
}

.pb-admin-list small {
    color: #607389;
}

.pb-admin-chart {
    display: grid;
    align-items: end;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    min-height: 190px;
    padding: 18px;
}

.pb-admin-chart span {
    display: grid;
    align-items: end;
    gap: 8px;
    min-height: 150px;
    color: #607389;
    text-align: center;
    font-size: 12px;
}

.pb-admin-chart i {
    display: block;
    min-height: 24px;
    border-radius: 999px 999px 4px 4px;
    background: linear-gradient(180deg, #2f8bc5, #76c3ef);
}

.pb-admin-tester-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr);
    gap: 16px;
}

.pb-admin-device-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 16px;
}

.pb-admin-device {
    border: 1px solid #dce3ed;
    border-radius: 8px;
    padding: 14px;
    background: #f8fafc;
}

.pb-admin-device strong,
.pb-admin-device small {
    display: block;
}

.pb-admin-device small {
    margin-top: 4px;
    color: #607389;
}

.pb-admin-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
}

.pb-admin-preview-card {
    min-height: 138px;
    display: grid;
    align-content: end;
    gap: 8px;
    border: 1px solid #dce3ed;
    border-radius: 8px;
    padding: 14px;
    background: linear-gradient(145deg, rgba(41, 128, 185, 0.14), rgba(255, 255, 255, 0.92));
}

.pb-admin-preview-card strong {
    font-size: 17px;
}

.pb-admin-preview-card small {
    color: #607389;
}

.pb-admin-checklist {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.pb-admin-checklist label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    margin: 0;
    color: #101820;
}

.pb-admin-checklist input {
    width: 18px;
    height: 18px;
    accent-color: #2980b9;
}

html[data-theme='dark'] .pb-admin-body {
    background: #070b10;
    color: #f7fbff;
}

html[data-theme='dark'] .pb-admin-sidebar,
html[data-theme='dark'] .pb-admin-topbar,
html[data-theme='dark'] .pb-admin-kpi,
html[data-theme='dark'] .pb-admin-panel,
html[data-theme='dark'] .pb-admin-icon-btn,
html[data-theme='dark'] .pb-admin-sidebar-toggle,
html[data-theme='dark'] .pb-admin-search input,
html[data-theme='dark'] .pb-admin-table-actions button {
    border-color: rgba(255, 255, 255, 0.13);
    background: #0f1722;
    color: #f7fbff;
}

html[data-theme='dark'] .pb-admin-brand,
html[data-theme='dark'] .pb-admin-panel__header,
html[data-theme='dark'] .pb-admin-table th,
html[data-theme='dark'] .pb-admin-table td,
html[data-theme='dark'] .pb-admin-list a,
html[data-theme='dark'] .pb-admin-list article {
    border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme='dark'] .pb-admin-heading p,
html[data-theme='dark'] .pb-admin-kpi span,
html[data-theme='dark'] .pb-admin-media small,
html[data-theme='dark'] .pb-admin-list small,
html[data-theme='dark'] .pb-admin-chart span {
    color: #adbac8;
}

html[data-theme='dark'] .pb-admin-list a {
    color: #f7fbff;
}

html[data-theme='dark'] .pb-admin-list a:hover,
html[data-theme='dark'] .pb-admin-list a:focus {
    background: rgba(41, 128, 185, 0.16);
    color: #69bff5;
}

html[data-theme='dark'] .pb-admin-device,
html[data-theme='dark'] .pb-admin-preview-card {
    border-color: rgba(255, 255, 255, 0.1);
    background: #181818;
}

html[data-theme='dark'] .pb-admin-device small,
html[data-theme='dark'] .pb-admin-preview-card small {
    color: #aaa;
}

html[data-theme='dark'] .pb-admin-checklist label {
    color: #f1f1f1;
}

/* YouTube-like dark mode refinement: neutral black surfaces with quiet dividers. */
html[data-theme='dark'] body:not(.pb-auth-body) {
    background: #0f0f0f;
    color: #f1f1f1;
}

html[data-theme='dark'] .pb-admin-body,
html[data-theme='dark'] .pb-admin-main {
    background: #0f0f0f;
}

html[data-theme='dark'] .pb-admin-sidebar,
html[data-theme='dark'] .pb-admin-topbar,
html[data-theme='dark'] .pb-admin-kpi,
html[data-theme='dark'] .pb-admin-panel,
html[data-theme='dark'] .pb-admin-icon-btn,
html[data-theme='dark'] .pb-admin-sidebar-toggle,
html[data-theme='dark'] .pb-admin-search input,
html[data-theme='dark'] .pb-admin-table-actions button {
    border-color: #303030;
    background: #212121;
    color: #f1f1f1;
}

html[data-theme='dark'] .pb-admin-topbar {
    background: rgba(15, 15, 15, 0.96);
}

html[data-theme='dark'] .pb-admin-brand,
html[data-theme='dark'] .pb-admin-panel__header,
html[data-theme='dark'] .pb-admin-table th,
html[data-theme='dark'] .pb-admin-table td,
html[data-theme='dark'] .pb-admin-list a,
html[data-theme='dark'] .pb-admin-list article {
    border-color: #303030;
}

html[data-theme='dark'] .pb-admin-nav a {
    color: #f1f1f1;
}

html[data-theme='dark'] .pb-admin-nav a:hover,
html[data-theme='dark'] .pb-admin-nav a:focus,
html[data-theme='dark'] .pb-admin-nav a.active {
    background: #303030;
    color: #3ea6ff;
}

html[data-theme='dark'] .pb-admin-heading p,
html[data-theme='dark'] .pb-admin-kpi span,
html[data-theme='dark'] .pb-admin-media small,
html[data-theme='dark'] .pb-admin-list small,
html[data-theme='dark'] .pb-admin-chart span,
html[data-theme='dark'] .pb-admin-device small,
html[data-theme='dark'] .pb-admin-preview-card small {
    color: #aaa;
}

html[data-theme='dark'] .pb-admin-list a:hover,
html[data-theme='dark'] .pb-admin-list a:focus {
    background: #303030;
    color: #3ea6ff;
}

html[data-theme='dark'] .pb-admin-primary-btn {
    border-color: #3ea6ff;
    background: #3ea6ff;
    color: #0f0f0f;
}

html[data-theme='dark'] .pb-admin-chart i {
    background: linear-gradient(180deg, #3ea6ff, #65c8ff);
}

/* Shared public dark theme refinement to match the neutral YouTube-style admin palette. */
html[data-theme='dark'] {
    --pb-page: #0f0f0f;
    --pb-surface: #212121;
    --pb-surface-2: #181818;
    --pb-text: #f1f1f1;
    --pb-muted: #aaa;
    --pb-border: #303030;
    --pb-player-bg: #0f0f0f;
    --pb-player-surface: #212121;
    --pb-player-muted: #aaa;
    --surface-1: #212121;
    --surface-2: #181818;
    --surface-3: #303030;
    --text-strong: #f1f1f1;
    --text-muted: #aaa;
}

html[data-theme='dark'] body::before {
    background: none;
}

html[data-theme='dark'] header.top-menu,
html[data-theme='dark'] .sidebar,
html[data-theme='dark'] .sidebar-brand,
html[data-theme='dark'] .sidebar-footer,
html[data-theme='dark'] .pb-featured-card,
html[data-theme='dark'] .pb-card-action-menu,
html[data-theme='dark'] .pb-user-dropdown,
html[data-theme='dark'] .pb-play-queue,
html[data-theme='dark'] .pb-share-modal__dialog,
html[data-theme='dark'] .pb-ad-slot,
html[data-theme='dark'] .pb-info-card,
html[data-theme='dark'] .pb-library-row,
html[data-theme='dark'] .pb-dj-card,
html[data-theme='dark'] .pb-genre-pill,
html[data-theme='dark'] .player-bar {
    border-color: #303030;
    background: #212121;
    color: #f1f1f1;
}

html[data-theme='dark'] .main-content,
html[data-theme='dark'] .content,
html[data-theme='dark'] .pb-homepage-container {
    background: #0f0f0f;
}

html[data-theme='dark'] .pb-header-search__field,
html[data-theme='dark'] .menu-btn,
html[data-theme='dark'] .pb-header-icon-btn,
html[data-theme='dark'] .pb-user-menu__toggle,
html[data-theme='dark'] .pb-card-action-menu :is(button, a[data-mixtape-edit-link]),
html[data-theme='dark'] .pb-play-queue__item,
html[data-theme='dark'] .pb-share-copy input {
    border-color: #303030;
    background: #181818;
    color: #f1f1f1;
}

html[data-theme='dark'] a:hover,
html[data-theme='dark'] a:focus,
html[data-theme='dark'] .sidebar .nav-link:hover,
html[data-theme='dark'] .sidebar .nav-link:focus,
html[data-theme='dark'] .sidebar .nav-link.active {
    color: #3ea6ff;
}

html[data-theme='dark'] .sidebar .nav-link:hover,
html[data-theme='dark'] .sidebar .nav-link:focus,
html[data-theme='dark'] .sidebar .nav-link.active,
html[data-theme='dark'] .pb-card-action-menu :is(button, a[data-mixtape-edit-link]):hover,
html[data-theme='dark'] .pb-user-dropdown a:hover,
html[data-theme='dark'] .pb-user-dropdown a:focus {
    background: #303030;
}

/* Footer player dark-mode contrast repair: keep controls visible on black surfaces. */
html[data-theme='dark'] footer.footer,
html[data-theme='dark'] #musicPlayer,
html[data-theme='dark'] .nowPlayingBar {
    border-color: #303030;
    background: #0f0f0f;
    color: #f1f1f1;
}

html[data-theme='dark'] .progress-container,
html[data-theme='dark'] .nowPlayingRight .volumeBar .progressBar {
    background: #3f3f3f;
}

html[data-theme='dark'] .media-info .trackInfo a,
html[data-theme='dark'] .media-info .trackName a,
html[data-theme='dark'] .media-info .artistName a,
html[data-theme='dark'] .media-info .genreName a,
html[data-theme='dark'] .playbackBar,
html[data-theme='dark'] .controlButton,
html[data-theme='dark'] .controlButton.play,
html[data-theme='dark'] .control-icons i,
html[data-theme='dark'] .nowPlayingRight,
html[data-theme='dark'] .nowPlayingRight i,
html[data-theme='dark'] .nowPlayingRight .volumeBar {
    color: #f1f1f1;
}

html[data-theme='dark'] .controlButton:hover,
html[data-theme='dark'] .controlButton:focus,
html[data-theme='dark'] .controlButton.play:hover,
html[data-theme='dark'] .controlButton.play:focus,
html[data-theme='dark'] .nowPlayingRight button:hover,
html[data-theme='dark'] .nowPlayingRight button:focus {
    color: #3ea6ff;
}

html[data-theme='dark'] .media-info .artwork {
    border-color: #303030;
}

html[data-theme='dark'] .progress-bar,
html[data-theme='dark'] .nowPlayingRight .volumeBar .progress {
    background: #3ea6ff;
}

html[data-theme='dark'] .progress-bar::after,
html[data-theme='dark'] .nowPlayingRight .volumeBar .progress::after {
    background: #3ea6ff;
    border-color: #0f0f0f;
}

html[data-theme='dark'] .btn-link,
html[data-theme='dark'] .pb-header-icon-btn,
html[data-theme='dark'] .menu-btn,
html[data-theme='dark'] .sidebar .nav-link,
html[data-theme='dark'] .pb-account-actions a,
html[data-theme='dark'] .pb-settings-nav a,
html[data-theme='dark'] .pb-library-menu,
html[data-theme='dark'] .pb-mixtape-menu-toggle {
    color: #f1f1f1;
}

html[data-theme='dark'] i.bi,
html[data-theme='dark'] i.fas,
html[data-theme='dark'] i.far,
html[data-theme='dark'] i.fa {
    color: currentColor;
}

/* Footer player timer alignment: center the time row under the transport controls. */
.nowPlayingCenter {
    display: flex;
    justify-content: center;
}

.nowPlayingCenter .playerControls {
    width: max-content;
    display: grid;
    grid-template-columns: 28px 42px 28px 28px;
    align-items: center;
    justify-content: center;
    justify-items: center;
    row-gap: 3px;
    margin-inline: auto;
    padding: 0;
}

.nowPlayingCenter .control-icons {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.nowPlayingCenter .playbackBar {
    grid-column: 2;
    grid-row: 2;
    width: max-content;
    min-width: max-content;
    display: flex;
    justify-content: center;
    gap: 4px;
    align-items: center;
    justify-self: center;
    text-align: center;
    line-height: 1.1;
    padding-top: 1px;
}

/* Footer transport hover: match the compact blue-ring play affordance. */
.nowPlayingCenter .controlButton.play {
    width: 42px;
    height: 42px;
    border: 2px solid transparent !important;
    border-color: transparent !important;
    background: transparent !important;
    color: #050505;
    transition:
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.nowPlayingCenter .controlButton.play:hover,
.nowPlayingCenter .controlButton.play:focus,
.nowPlayingCenter .controlButton.play:focus-visible {
    border-color: var(--pb-blue) !important;
    background: transparent !important;
    color: var(--pb-blue);
    transform: scale(1.02);
}

.nowPlayingCenter .controlButton.play i.play-pause {
    font-size: 23px;
    line-height: 1;
    transform: none;
}

.nowPlayingCenter .controlButton.play:hover i.play-pause,
.nowPlayingCenter .controlButton.play:focus i.play-pause {
    transform: none;
}

html[data-theme='dark'] .nowPlayingCenter .controlButton.play {
    color: #f1f1f1;
}

html[data-theme='dark'] .nowPlayingCenter .controlButton.play:hover,
html[data-theme='dark'] .nowPlayingCenter .controlButton.play:focus,
html[data-theme='dark'] .nowPlayingCenter .controlButton.play:focus-visible {
    border-color: #3ea6ff !important;
    color: #3ea6ff;
}

/* Desktop content width: keep page bodies readable without affecting fixed chrome. */
@media (min-width: 992px) {
    .main-content > .content {
        width: 100%;
    }

    .main-content > .content > .container,
    .pb-homepage-container,
    .pb-admin-content {
        width: min(100%, 1200px);
        max-width: 1200px;
        margin-inline: auto;
    }
}

@media (max-width: 1100px) {
    .pb-admin-shell {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .pb-admin-brand img,
    .pb-admin-nav span,
    .pb-admin-sidebar__footer {
        display: none;
    }

    .pb-admin-nav a {
        justify-content: center;
        padding: 0;
    }
}

@media (max-width: 860px) {
    .pb-admin-shell {
        display: block;
    }

    .pb-admin-sidebar {
        position: static;
        height: auto;
    }

    .pb-admin-brand img,
    .pb-admin-nav span {
        display: inline;
    }

    .pb-admin-shell.is-sidebar-collapsed .pb-admin-brand a,
    .pb-admin-shell.is-sidebar-collapsed .pb-admin-nav span {
        display: inline;
    }

    .pb-admin-nav {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
    }

    .pb-admin-nav a {
        justify-content: flex-start;
        padding: 0 12px;
    }

    .pb-admin-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pb-admin-grid {
        grid-template-columns: 1fr;
    }

    .pb-admin-tester-grid {
        grid-template-columns: 1fr;
    }

    .pb-admin-device-strip,
    .pb-admin-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .pb-admin-topbar,
    .pb-admin-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .pb-admin-content {
        padding: 14px;
    }

    .pb-admin-kpis {
        grid-template-columns: 1fr;
    }

    .pb-admin-table {
        min-width: 680px;
    }

    .pb-admin-panel--table {
        overflow-x: auto;
    }

    .pb-admin-device-strip,
    .pb-admin-preview-grid {
        grid-template-columns: 1fr;
    }
}

/* Compact mixtape cards and footer playback timing. */
.pb-featured-card {
    height: auto;
}

.pb-featured-card__body h2 {
    margin-bottom: 5px;
}

.pb-featured-card__artist {
    margin-bottom: 8px;
}

.pb-featured-card__artist > a:last-child {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-featured-card__genre a {
    color: inherit;
}

.pb-player-timer {
    min-width: 72px;
    color: #4b5563;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.pb-player-actions {
    margin-inline-start: 14px;
}

html[data-theme='dark'] .pb-player-timer {
    color: #d1d5db;
}

/* Keep the footer transport centered with its timer on desktop and stacked cleanly on phones. */
:root {
    --pb-player-height: 82px;
}

.nowPlayingBar {
    display: grid !important;
    grid-template-areas: 'metadata transport actions';
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.nowPlayingLeft {
    grid-area: metadata;
    flex: initial;
    min-width: 0;
}

.nowPlayingCenter {
    grid-area: transport;
    flex: initial;
    min-width: 0;
    width: 100%;
}

.nowPlayingRight {
    grid-area: actions;
    flex: initial;
    justify-self: end;
    min-width: 0;
    margin-inline-start: 0;
}

.nowPlayingCenter .playerControls {
    width: max-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    grid-template-columns: 28px 42px 28px 28px;
    column-gap: 14px;
    margin-inline: auto;
    padding: 0;
}

@media (max-width: 1100px) {
    .nowPlayingBar {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) minmax(0, 1fr);
        gap: 8px;
    }

    .nowPlayingRight .volumeBar,
    .nowPlayingRight .other-features button:not([data-queue-toggle]) {
        display: none;
    }
}

@media (max-width: 991.98px) {
    :root {
        --pb-player-height: 96px;
    }
}

@media (max-width: 767.98px) {
    :root {
        --pb-player-height: 112px;
    }

    .nowPlayingBar {
        grid-template-areas:
            'metadata actions'
            'transport transport';
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0 8px;
        align-content: center;
        padding: 4px 10px 3px;
    }

    .media-info {
        min-width: 0;
        gap: 8px;
    }

    .media-info .artwork {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }

    .media-info .trackInfo {
        height: auto;
        min-width: 0;
        line-height: 1.1;
    }

    .media-info .trackName a {
        font-size: 12px;
    }

    .media-info .artistName a,
    .media-info .genreName a {
        font-size: 11px;
    }

    .nowPlayingCenter .playerControls {
        gap: 8px;
    }

    .nowPlayingCenter .control-icons {
        gap: 12px;
    }

    .nowPlayingCenter .controlButton:not(.play) {
        width: 32px;
        height: 32px;
        padding: 0;
    }

    .nowPlayingCenter .controlButton.play {
        width: 40px;
        height: 40px;
    }

    .nowPlayingCenter .control-icons .controlButton[data-player-repeat] {
        display: none;
    }

    .nowPlayingCenter .playbackBar {
        min-width: 72px;
        padding-top: 0;
    }

    .nowPlayingRight {
        justify-self: end;
        align-self: center;
    }

    .nowPlayingRight .other-features {
        gap: 0;
    }

    .nowPlayingRight .other-features button[data-queue-toggle] {
        width: 36px;
        height: 36px;
        padding: 0;
    }

    .nowPlayingRight .volumeBar,
    .nowPlayingRight .other-features button:not([data-queue-toggle]) {
        display: none;
    }
}

/* Mixtape upload workflow. */
.pb-upload-workflow {
    padding-bottom: 56px;
}
.pb-upload-workflow > form > .pb-account-panel,
.pb-upload-details-layout,
.pb-upload-publish-panel {
    margin-bottom: 20px;
}
.pb-upload-details-layout {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
    gap: 24px;
    align-items: start;
}
.pb-upload-details-layout .pb-account-panel,
.pb-upload-publish-panel {
    display: grid;
    gap: 18px;
}
.pb-upload-audio-panel h2 {
    margin-bottom: 16px;
}
.pb-upload-details-layout .pb-upload-artwork img {
    aspect-ratio: 1;
    height: 100%;
}
.pb-upload-details-layout .pb-upload-artwork {
    grid-template-columns: minmax(0, 1fr);
}
.pb-upload-publish-panel .pb-upload-actions-bar {
    justify-content: flex-end;
    position: static;
}
@media (max-width: 767px) {
    .pb-upload-details-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .pb-upload-details-layout .pb-upload-artwork {
        max-width: 320px;
        margin-inline: auto;
    }
}

.pb-upload-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
    gap: 16px;
    align-items: start;
}

.pb-upload-panel {
    display: grid;
    gap: 18px;
}

.pb-upload-panel .pb-account-panel {
    display: grid;
    gap: 16px;
}

.pb-upload-panel .pb-account-panel h2,
.pb-upload-sidebar .pb-account-panel h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

.pb-upload-dropzone {
    position: relative;
    display: grid;
    place-items: center;
    gap: 5px;
    min-height: 172px;
    border: 1px dashed rgba(47, 139, 197, 0.7);
    border-radius: 8px;
    padding: 22px;
    background: rgba(47, 139, 197, 0.07);
    text-align: center;
    cursor: pointer;
}

.pb-upload-dropzone:hover,
.pb-upload-dropzone:focus-within {
    border-color: var(--pb-blue);
    background: rgba(47, 139, 197, 0.12);
}

.pb-upload-dropzone input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pb-upload-dropzone i {
    color: var(--pb-blue);
    font-size: 2rem;
}

.pb-upload-dropzone strong {
    font-size: 1.05rem;
}

.pb-upload-help,
.pb-upload-artwork small,
.pb-upload-sidebar p,
.pb-upload-status-note {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.pb-upload-artwork {
    position: relative;
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.pb-upload-artwork img,
.pb-upload-artwork__placeholder {
    width: 116px;
    aspect-ratio: 1;
    border-radius: 8px;
    object-fit: cover;
}

.pb-upload-artwork__placeholder {
    display: grid;
    place-items: center;
    border: 1px dashed var(--border);
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 2rem;
}

.pb-upload-artwork input:not(.sr-only) {
    width: 100%;
}

.pb-tracklist {
    display: grid;
    gap: 8px;
}

.pb-track-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 74px 40px;
    gap: 8px;
    align-items: center;
}

.pb-track-number {
    color: var(--text-secondary);
    font-weight: 800;
    text-align: center;
}

.pb-track-row input {
    min-height: 40px;
}

.pb-track-remove {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
}

.pb-track-remove:hover,
.pb-track-remove:focus {
    border-color: var(--color-error);
    color: var(--color-error);
}

.pb-upload-add-track {
    justify-self: start;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--pb-blue);
    font-weight: 800;
}

.pb-upload-add-track:hover,
.pb-upload-add-track:focus {
    color: var(--color-hover);
    text-decoration: underline;
}

.pb-upload-visibility {
    display: grid;
    gap: 8px;
}

.pb-upload-visibility label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}

.pb-upload-visibility label:has(input:checked) {
    border-color: var(--pb-blue);
    background: rgba(47, 139, 197, 0.08);
}

.pb-upload-visibility input {
    margin-top: 4px;
    accent-color: var(--pb-blue);
}

.pb-upload-visibility strong,
.pb-upload-visibility small {
    display: block;
}

.pb-upload-visibility small {
    margin-top: 2px;
    color: var(--text-secondary);
}

.pb-upload-actions-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 2px;
}

.pb-upload-actions-bar .pb-settings-save,
.pb-upload-actions-bar .pb-upload-draft {
    justify-self: auto;
}

.pb-upload-draft {
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 14px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 800;
}

.pb-upload-draft:hover,
.pb-upload-draft:focus {
    border-color: var(--pb-blue);
    color: var(--pb-blue);
}

.pb-upload-sidebar {
    display: grid;
    gap: 16px;
    position: sticky;
    top: calc(var(--pb-header-height) + 16px);
}

.pb-upload-sidebar .pb-account-panel > *:last-child {
    margin-bottom: 0;
}

.pb-upload-checklist {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pb-upload-checklist li {
    display: flex;
    gap: 9px;
    color: var(--text-secondary);
}

.pb-upload-checklist i {
    color: #2c9b68;
}

.pb-upload-danger {
    border-color: rgba(216, 61, 90, 0.24);
}

@media (max-width: 860px) {
    .pb-upload-layout {
        grid-template-columns: 1fr;
    }

    .pb-upload-sidebar {
        position: static;
    }
}

@media (max-width: 520px) {
    .pb-upload-artwork {
        grid-template-columns: 1fr;
    }

    .pb-upload-artwork img,
    .pb-upload-artwork__placeholder {
        width: 144px;
    }

    .pb-track-row {
        grid-template-columns: 26px minmax(0, 1fr) 40px;
    }

    .pb-track-row input[type='text'] {
        grid-column: 2 / -1;
    }

    .pb-track-row input[type='text'] + input {
        grid-column: 2;
    }

    .pb-upload-actions-bar > * {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* Shared navigation, mixtape grid, and action-menu alignment. */
.sidebar .sidebar-primary-nav,
.sidebar .sidebar-primary-nav .nav-item {
    width: 100%;
}

.sidebar .sidebar-primary-nav .nav-link {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    margin: 0;
    padding-inline: 12px;
    box-sizing: border-box;
    transform: none;
}

.sidebar .sidebar-primary-nav .sidebar-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    min-width: 24px;
    margin: 0 !important;
    line-height: 1;
    text-align: center;
}

.sidebar .sidebar-primary-nav .sidebar-label {
    min-width: 0;
    line-height: 1.25;
    text-align: left;
}

.sidebar .nav-link {
    gap: 10px;
    border-left: 3px solid transparent;
}

.sidebar .nav-link i {
    width: 20px;
    margin-right: 0 !important;
    flex: 0 0 20px;
    text-align: center;
}

.sidebar .nav-link.active {
    border-left-color: var(--pb-blue);
    background: rgba(41, 128, 185, 0.13);
    color: var(--pb-blue);
}

[data-mixtape-context].is-menu-open .pb-card-action-menu,
.pb-featured-card.is-menu-open .pb-card-action-menu {
    display: block;
}

.pb-chart-meta a {
    color: inherit;
    text-decoration: none;
}

.pb-chart-meta a:hover,
.pb-chart-meta a:focus {
    color: var(--pb-blue);
    text-decoration: underline;
}

.pb-mixtape-card-grid {
    align-items: stretch;
    grid-auto-rows: 1fr;
    gap: 16px;
}

.pb-mixtape-card-grid .pb-featured-card {
    display: flex;
    height: 100%;
    min-height: 286px;
    flex-direction: column;
}

.pb-mixtape-card-grid .pb-featured-card__artwork {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    flex: 0 0 auto;
}

.pb-mixtape-card-grid .pb-featured-card__body {
    display: flex;
    min-height: 132px;
    padding: 9px 10px 10px;
    flex: 1 1 auto;
    flex-direction: column;
}

.pb-mixtape-card-grid .pb-featured-card__body h2 {
    min-height: 34px;
    margin-bottom: 5px;
    line-height: 1.2;
    -webkit-line-clamp: 2;
}

.pb-mixtape-card-grid .pb-featured-card__genre {
    min-height: 16px;
    margin-bottom: 6px;
}

.pb-mixtape-card-grid .pb-featured-card__artist {
    min-height: 24px;
    margin-bottom: 6px;
}

.pb-mixtape-card-grid .pb-featured-card__stats {
    width: 100%;
    min-height: 27px;
    margin-top: auto;
    padding-top: 7px;
    justify-content: flex-start;
}

.pb-mixtape-card-grid .pb-featured-card__stats .pb-mixtape-menu-toggle {
    margin-left: auto;
}

/* One card sizing contract for rails, grids, profiles, search, and genre pages. */
.pb-featured-row {
    align-items: stretch;
}

.pb-featured-row .pb-featured-card,
.pb-mixtape-card-grid .pb-featured-card {
    width: 100%;
    height: 292px;
    min-height: 292px;
    box-sizing: border-box;
}

.pb-featured-row .pb-featured-card__artwork,
.pb-mixtape-card-grid .pb-featured-card__artwork {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    flex: 0 0 auto;
}

.pb-featured-row .pb-featured-card__body,
.pb-mixtape-card-grid .pb-featured-card__body {
    display: flex;
    min-height: 0;
    padding: 9px 10px 10px;
    flex: 1 1 auto;
    flex-direction: column;
}

.pb-featured-row .pb-featured-card__body h2,
.pb-mixtape-card-grid .pb-featured-card__body h2 {
    min-height: 34px;
    margin: 0 0 5px;
    font-size: 14px;
    line-height: 1.2;
    -webkit-line-clamp: 2;
}

.pb-featured-row .pb-featured-card__genre,
.pb-mixtape-card-grid .pb-featured-card__genre {
    min-height: 16px;
    margin: 0 0 6px;
    font-size: 12px;
}

.pb-featured-row .pb-featured-card__artist,
.pb-mixtape-card-grid .pb-featured-card__artist {
    min-height: 24px;
    margin: 0 0 6px;
    font-size: 12px;
}

.pb-featured-row .pb-featured-card__stats,
.pb-mixtape-card-grid .pb-featured-card__stats {
    width: 100%;
    min-height: 27px;
    margin-top: auto;
    padding-top: 7px;
    gap: 10px;
    justify-content: flex-start;
    color: #64748b;
    font-size: 12px;
}

.pb-featured-row .pb-featured-card__stats i,
.pb-mixtape-card-grid .pb-featured-card__stats i {
    color: var(--pb-blue);
    font-size: 12px;
}

.pb-featured-row .pb-featured-card__stats .pb-mixtape-menu-toggle,
.pb-mixtape-card-grid .pb-featured-card__stats .pb-mixtape-menu-toggle {
    margin-left: auto;
}

@media (max-width: 767.98px) {
    .pb-mixtape-card-grid {
        gap: 12px;
    }

    .pb-mixtape-card-grid .pb-featured-card {
        min-height: 270px;
    }
}

/* Shared card sizing: artwork + predictable content rows without flexible dead space. */
.pb-featured-row .pb-featured-card,
.pb-mixtape-card-grid .pb-featured-card {
    height: auto;
    min-height: 0;
    align-self: stretch;
}

.pb-featured-row .pb-featured-card__body,
.pb-mixtape-card-grid .pb-featured-card__body {
    display: grid;
    min-height: 126px;
    padding: 9px 10px 10px;
    grid-template-rows: 17px 16px 24px 27px;
    row-gap: 6px;
    flex: 0 0 auto;
}

.pb-featured-row .pb-featured-card__body h2,
.pb-mixtape-card-grid .pb-featured-card__body h2 {
    display: block;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-featured-row .pb-featured-card__body h2 a,
.pb-mixtape-card-grid .pb-featured-card__body h2 a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-featured-row .pb-featured-card__genre,
.pb-mixtape-card-grid .pb-featured-card__genre,
.pb-featured-row .pb-featured-card__artist,
.pb-mixtape-card-grid .pb-featured-card__artist,
.pb-featured-row .pb-featured-card__stats,
.pb-mixtape-card-grid .pb-featured-card__stats {
    min-height: 0;
    margin: 0;
}

.pb-featured-row .pb-featured-card__stats,
.pb-mixtape-card-grid .pb-featured-card__stats {
    align-self: end;
    margin-top: 0;
    padding-top: 5px;
}

/* One compact DJ-card contract for home, genre, and directory grids. */
.pb-dj-card,
.pb-dj-profile-card {
    box-sizing: border-box;
    min-width: 0;
    min-height: 96px;
    height: 96px;
    padding: 12px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-primary);
}

.pb-dj-card > a:first-child img,
.pb-dj-profile-card > a:first-child img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 999px;
}

.pb-dj-card > div,
.pb-dj-profile-card > div {
    min-width: 0;
}

.pb-dj-card h2,
.pb-dj-profile-card h2,
.pb-dj-card p,
.pb-dj-profile-card p,
.pb-dj-card small,
.pb-dj-profile-card span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-dj-card h2,
.pb-dj-profile-card h2 {
    margin: 0 0 4px;
    font-size: 16px;
    line-height: 1.15;
}

.pb-dj-card p,
.pb-dj-profile-card p,
.pb-dj-card small,
.pb-dj-profile-card span {
    margin: 0;
    font-size: 12px;
    line-height: 1.25;
}

@media (max-width: 575.98px) {
    .pb-featured-row .pb-featured-card__body,
    .pb-mixtape-card-grid .pb-featured-card__body {
        min-height: 137px;
        padding: 8px;
        row-gap: 5px;
    }

    .pb-dj-card,
    .pb-dj-profile-card {
        height: 88px;
        min-height: 88px;
        padding: 10px;
        grid-template-columns: 48px minmax(0, 1fr) 40px;
        gap: 9px;
    }

    .pb-dj-card > a:first-child img,
    .pb-dj-profile-card > a:first-child img {
        width: 48px;
        height: 48px;
    }
}

/* Library interactions: keep fixed action menus above transformed list rows. */
.pb-library-list,
.pb-library-group,
.pb-library-page {
    overflow: visible;
}

.pb-library-item.is-menu-open {
    z-index: 4400;
    transform: none;
}

.pb-library-item.is-menu-open:hover,
.pb-library-item.is-menu-open:focus-within {
    transform: none;
}

.pb-card-action-menu[data-library-menu='true'] {
    z-index: 4500;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.pb-library-tabs a[aria-current='page'] {
    border-color: var(--pb-blue);
    background: var(--pb-blue);
    color: #ffffff;
}

.pb-library-tabs a:focus-visible,
.pb-library-remove:focus-visible,
.pb-library-menu:focus-visible,
.pb-library-play:focus-visible {
    outline: 2px solid var(--pb-blue);
    outline-offset: 2px;
}

.pb-library-remove:disabled {
    cursor: wait;
    opacity: 0.62;
}

.pb-library-play {
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.pb-library-play span {
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.pb-library-play:hover,
.pb-library-play:focus-visible {
    background: rgba(15, 23, 42, 0.38);
}

.pb-library-play:hover span,
.pb-library-play:focus-visible span {
    border-color: #ffffff;
    background: var(--pb-blue);
    box-shadow: 0 8px 24px rgba(41, 128, 185, 0.4);
    transform: scale(1.08);
}

.pb-library-play:active span {
    transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
    .pb-library-play,
    .pb-library-play span {
        transition: none;
    }
}

/* Final Picobeats theme contract for reusable discovery cards. */
:root {
    --pb-card-radius: 10px;
    --pb-card-gap: 16px;
    --pb-card-shadow-hover: 0 12px 28px rgba(41, 128, 185, 0.14);
}

html[data-theme='dark'] {
    --pb-card-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.34);
}

.pb-featured-row,
.pb-mixtape-card-grid,
.pb-dj-grid,
.pb-djs-directory-grid {
    align-items: stretch;
    gap: var(--pb-card-gap);
}

.pb-featured-card,
.pb-dj-card,
.pb-dj-profile-card {
    overflow: hidden;
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-card-radius);
    background: var(--pb-surface);
    color: var(--pb-text);
    box-shadow: none;
    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}

.pb-featured-card:hover,
.pb-featured-card:focus-within,
.pb-dj-card:hover,
.pb-dj-card:focus-within,
.pb-dj-profile-card:hover,
.pb-dj-profile-card:focus-within {
    border-color: var(--pb-blue);
    box-shadow: var(--pb-card-shadow-hover);
    transform: translateY(-1px);
}

.pb-featured-card a:focus-visible,
.pb-featured-card button:focus-visible,
.pb-dj-card a:focus-visible,
.pb-dj-card button:focus-visible,
.pb-dj-profile-card a:focus-visible,
.pb-dj-profile-card button:focus-visible {
    outline: 2px solid var(--pb-blue);
    outline-offset: 2px;
}

.pb-featured-card__body h2 a,
.pb-dj-card h2 a,
.pb-dj-profile-card h2 a {
    color: var(--pb-text);
}

.pb-featured-card__genre,
.pb-featured-card__genre a,
.pb-featured-card__artist,
.pb-featured-card__artist a,
.pb-dj-card p,
.pb-dj-card small,
.pb-dj-profile-card p,
.pb-dj-profile-card span {
    color: var(--pb-muted);
}

.pb-featured-card__genre a:hover,
.pb-featured-card__genre a:focus,
.pb-featured-card__artist a:hover,
.pb-featured-card__artist a:focus,
.pb-dj-card a:hover,
.pb-dj-card a:focus,
.pb-dj-profile-card a:hover,
.pb-dj-profile-card a:focus {
    color: var(--pb-blue);
}

.pb-featured-row .pb-featured-card__body,
.pb-mixtape-card-grid .pb-featured-card__body {
    box-sizing: border-box;
    height: 126px;
    min-height: 126px;
    background: var(--pb-surface);
}

.pb-featured-row .pb-featured-card__stats,
.pb-mixtape-card-grid .pb-featured-card__stats {
    border-top: 0;
    color: var(--pb-muted);
    column-gap: 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
}

.pb-featured-row .pb-featured-card__stats > button,
.pb-featured-row .pb-featured-card__stats > a,
.pb-featured-row .pb-featured-card__stats > span,
.pb-mixtape-card-grid .pb-featured-card__stats > button,
.pb-mixtape-card-grid .pb-featured-card__stats > a,
.pb-mixtape-card-grid .pb-featured-card__stats > span {
    min-width: 0;
    height: 22px;
    gap: 4px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: normal;
}

.pb-featured-row .pb-featured-card__stats button,
.pb-featured-row .pb-featured-card__stats > a,
.pb-mixtape-card-grid .pb-featured-card__stats button {
    color: inherit;
}

.pb-featured-row .pb-featured-card__stats > a:hover,
.pb-featured-row .pb-featured-card__stats > a:focus,
.pb-mixtape-card-grid .pb-featured-card__stats > a:hover,
.pb-mixtape-card-grid .pb-featured-card__stats > a:focus {
    color: var(--pb-blue);
}

.pb-featured-row .pb-featured-card__stats i,
.pb-mixtape-card-grid .pb-featured-card__stats i {
    width: 12px;
    font-size: 12px;
    line-height: 1;
    text-align: center;
}

.pb-dj-card__action,
.pb-dj-profile-card > a.btn {
    background: var(--pb-blue);
    color: #ffffff;
}

.pb-dj-card__action:hover,
.pb-dj-card__action:focus,
.pb-dj-profile-card > a.btn:hover,
.pb-dj-profile-card > a.btn:focus {
    background: #176c9e;
    color: #ffffff;
}

@media (max-width: 767.98px) {
    :root {
        --pb-card-gap: 12px;
    }

    .pb-featured-card:hover,
    .pb-featured-card:focus-within,
    .pb-dj-card:hover,
    .pb-dj-card:focus-within,
    .pb-dj-profile-card:hover,
    .pb-dj-profile-card:focus-within {
        transform: none;
    }
}

@media (max-width: 575.98px) {
    .pb-featured-row .pb-featured-card__body,
    .pb-mixtape-card-grid .pb-featured-card__body {
        height: 137px;
        min-height: 137px;
    }
}

/* Keep the admin reference shell overrides last so legacy public-shell rules cannot widen it. */
.pb-admin-shell {
    grid-template-columns: 250px minmax(0, 1fr);
}

.pb-admin-shell.is-sidebar-collapsed {
    grid-template-columns: 72px minmax(0, 1fr);
}

.pb-admin-sidebar-overlay {
    display: none;
}

.pb-admin-topbar,
.pb-admin-brand {
    min-height: 58px;
    height: 58px;
}

@media (max-width: 767.98px) {
    .pb-admin-shell,
    .pb-admin-shell.is-sidebar-collapsed {
        grid-template-columns: 1fr;
    }

    .pb-admin-sidebar {
        width: min(250px, 86vw);
        bottom: 0;
        transform: translateX(-100%);
    }

    .pb-admin-shell.is-mobile-open .pb-admin-sidebar {
        transform: translateX(0);
    }

    .pb-admin-sidebar-overlay {
        display: none;
    }

    .pb-admin-sidebar-overlay.is-visible {
        display: block;
    }
}

/* Admin responsive cascade overrides */
@media (max-width: 860px) {
    .pb-admin-shell,
    .pb-admin-shell.is-sidebar-collapsed {
        display: grid;
        grid-template-columns: 1fr;
    }

    .pb-admin-shell .pb-admin-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(var(--pb-admin-sidebar-expanded), 86vw);
        height: 100vh;
        height: 100dvh;
        z-index: 4200;
        transform: translateX(-100%);
    }

    .pb-admin-shell.is-mobile-open .pb-admin-sidebar {
        transform: translateX(0);
    }

    .pb-admin-shell .pb-admin-nav {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        overflow-x: visible;
        overflow-y: auto;
    }

    .pb-admin-shell .pb-admin-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 4100;
        display: none;
    }

    .pb-admin-shell .pb-admin-sidebar-overlay.is-visible {
        display: block;
    }
}

@media (max-width: 620px) {
    .pb-admin-shell .pb-admin-topbar {
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        min-height: var(--pb-admin-topbar-height);
        height: auto;
    }
}

/* Keep admin page bodies and controls responsive without changing domain pages. */
.pb-admin-content > .mx-auto {
    width: 100%;
    max-width: 1200px;
}

.pb-admin-content .overflow-x-auto {
    max-width: 100%;
}

.pb-admin-content form,
.pb-admin-content fieldset,
.pb-admin-content table {
    min-width: 0;
}

@media (max-width: 620px) {
    .pb-admin-content > .mx-auto {
        padding-inline: 0;
    }

    .pb-admin-content form.flex {
        flex-wrap: wrap;
    }

    .pb-admin-content form.flex input {
        flex: 1 1 12rem;
        min-width: 0;
    }

    .pb-admin-content .flex.gap-2 {
        flex-wrap: wrap;
    }
}

.pb-media-ad-dialog::backdrop,
.pb-image-ad-dialog::backdrop {
    background: rgba(0, 0, 0, 0.72);
}

/* Audio advertisements temporarily hide footer controls, including Bootstrap buttons. */
.footer [hidden] {
    display: none !important;
}

/* Canonical legacy mixtapes grid, scoped away from rails and other directories. */
.pb-mixtapes-page .pb-mixtape-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    grid-auto-rows: auto;
    padding-bottom: 34px;
}
.pb-mixtapes-page .pb-mixtape-genre-filter a {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 17px;
    font-size: 14px;
    font-weight: 600;
}
@media (max-width: 1199.98px) {
    .pb-mixtapes-page .pb-mixtape-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 991.98px) {
    .pb-mixtapes-page .pb-mixtape-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 767.98px) {
    .pb-mixtapes-page .pb-mixtape-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
        }
@media (max-width: 575.98px) {
    .pb-mixtapes-page .pb-mixtape-card-grid {
        grid-template-columns: 1fr;
    }
    }

.pb-mixtape-discovery {
    margin-bottom: 32px;
}
.pb-mixtape-discovery .pb-section-heading h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}
.pb-mixtape-list-heading {
    margin: 24px 0 12px;
    font-size: 24px;
    font-weight: 700;
}

.pb-mixtapes-page .pb-mixtape-genre-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
}
.pb-mixtape-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* The mobile header search occupies its own row, as in the legacy shell. */
@media (max-width: 991.98px) {
    header.top-menu {
        flex-wrap: wrap;
    }
}

/* Legacy visual advertisement popup presentation. */
.pb-visual-ad-dialog.pb-image-ad-dialog,
.pb-visual-ad-dialog.pb-media-ad-dialog {
    box-sizing: border-box;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: #0f172a;
    color: #f8fafc;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
.pb-visual-ad-dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
}
.pb-visual-ad-content {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
}
.pb-visual-ad-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    flex-shrink: 0;
}
.pb-visual-ad-badge {
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #93c5fd;
}
.pb-visual-ad-close {
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: transparent;
    color: #e5e7eb;
    cursor: pointer;
}
.pb-visual-ad-close:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}
.pb-visual-ad-media {
    flex: 1;
    min-height: 0;
    background: #000;
}
.pb-visual-ad-details {
    padding: 14px;
    flex-shrink: 0;
    max-height: 30%;
    overflow: auto;
}
.pb-visual-ad-details h2 {
    margin: 0 0 6px;
    color: #f8fafc;
    font-size: 18px;
    font-weight: 700;
}

/* Visual creatives use their saved layout dimensions without a card frame. */
.pb-visual-ad-dialog.pb-image-ad-dialog,
.pb-visual-ad-dialog.pb-media-ad-dialog {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible;
}
.pb-visual-ad-dialog .pb-visual-ad-content,
.pb-visual-ad-dialog .pb-visual-ad-media {
    height: 100%;
    background: transparent;
}
.pb-visual-ad-dialog .pb-visual-ad-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    padding: 8px;
    background: transparent;
    pointer-events: none;
}
.pb-visual-ad-dialog .pb-visual-ad-badge {
    background: rgba(0, 0, 0, 0.7);
    padding: 4px 6px;
}
.pb-visual-ad-dialog .pb-visual-ad-close {
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.8);
}
.pb-visual-ad-dialog .pb-visual-ad-details {
    display: none;
}
.pb-visual-ad-dialog video {
    height: 100%;
    background: transparent !important;
}

/* Keep the advertiser action available over the creative without adding a frame. */
.pb-visual-ad-dialog .pb-visual-ad-details {
    display: block;
    position: absolute;
    bottom: 52px;
    left: 8px;
    padding: 0 !important;
    overflow: visible;
    pointer-events: none;
}
.pb-visual-ad-dialog .pb-visual-ad-details h2,
.pb-visual-ad-dialog .pb-visual-ad-details p {
    display: none;
}
.pb-visual-ad-dialog .pb-visual-ad-details a {
    pointer-events: auto;
}

/* Original legacy authentication forms, shared by account access pages. */
body.pb-auth-body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--pb-bg, #fff);
    color: var(--pb-text, #111827);
}
body.pb-auth-body #picobeats-persistent-player {
    display: none;
}
.pb-auth-shell {
    width: min(100%, 350px);
    padding: 10px;
}
.pb-auth-logo {
    margin-bottom: 32px;
}
.pb-auth-logo img {
    width: 200px;
}
.pb-auth-shell h1 {
    font-weight: 700;
}
.pb-auth-form input:not([type='checkbox']):not([type='radio']) {
    border-color: #d3d3d3;
    padding: 14px 16px;
    border-radius: 4px;
}
.pb-auth-form input[type='checkbox'],
.pb-auth-form input[type='radio'] {
    width: 16px;
    height: 16px;
    padding: 0;
    flex-shrink: 0;
}
.pb-auth-form > label {
    text-align: left;
}
.pb-auth-button {
    background: #1e90ff;
    border: 1px solid #1e90ff;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 14px 16px;
    line-height: 1.2;
}
.pb-auth-footer {
    margin-top: 32px;
}
.pb-auth-form input:focus-visible,
.pb-auth-button:focus-visible,
.pb-auth-links a:focus-visible {
    outline: 3px solid rgba(30, 144, 255, 0.3);
    outline-offset: 2px;
}
.pb-auth-form input[aria-invalid='true'] {
    border-color: #d83d5a;
}
.pb-auth-button:disabled {
    opacity: 0.65;
    cursor: wait;
}
html[data-theme='dark'] body.pb-auth-body {
    background: #111113;
    color: #f5f5f7;
}
html[data-theme='dark'] .pb-auth-body :is(.pb-auth-copy, .pb-auth-footer, .pb-auth-links a) {
    color: #cbd5e1;
}
html[data-theme='dark'] .pb-auth-form input {
    background: #1b1b1d;
    border-color: rgba(245, 245, 247, 0.14);
    color: #f5f5f7;
}
.pb-auth-account-type {
    border: 1px solid #cfd4dc;
    border-radius: 4px;
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    text-align: left;
}
.pb-auth-account-type legend {
    float: none;
    width: auto;
    margin-bottom: 0;
    padding: 0 6px;
    font-size: 0.85rem;
    font-weight: 600;
}
.pb-auth-account-type label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}
html[data-theme='dark'] .pb-auth-account-type {
    border-color: rgba(245, 245, 247, 0.14);
}

.pb-auth-register .pb-auth-field {
    display: grid;
    gap: 6px;
    min-width: 0;
    text-align: left;
}
.pb-auth-register .pb-auth-field > label {
    font-size: 14px;
    font-weight: 600;
}
.pb-auth-register .pb-auth-field > p {
    margin: 0 !important;
    overflow-wrap: anywhere;
}
.pb-auth-hint {
    margin: 0;
    color: #4b5563;
    font-size: 13px;
    line-height: 1.5;
}
.pb-auth-register .pb-auth-account-type {
    display: block;
    min-width: 0;
    padding: 10px;
}
.pb-auth-account-options {
    display: grid;
    gap: 8px;
}
.pb-auth-account-options label {
    min-height: 54px;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}
.pb-auth-account-options label:has(input:checked) {
    border-color: #1e90ff;
    background: rgba(30, 144, 255, 0.08);
}
.pb-auth-account-options input[type='radio'] {
    accent-color: #1e90ff;
}
.pb-auth-account-options small {
    display: block;
    color: #4b5563;
    font-size: 12px;
}
.pb-auth-terms {
    text-align: left;
}
.pb-sign-in-backdrop {
    z-index: 11000;
    background: rgba(0, 0, 0, 0.6);
}
.pb-sign-in-dialog {
    z-index: 11001;
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    border-radius: 12px;
    background: #fff;
    color: #111827;
    padding: 28px;
}
.pb-sign-in-dialog h2 {
    margin: 0 24px 8px 0;
    font-size: 22px;
}
.pb-sign-in-dialog [id$='description'] {
    color: #4b5563;
}
.pb-sign-in-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
}
.pb-sign-in-links a {
    color: #1673b5;
}
html[data-theme='dark'] .pb-sign-in-dialog {
    background: #1b1b1d;
    color: #f5f5f7;
    border-color: #404048;
}
html[data-theme='dark'] .pb-sign-in-links a {
    color: #69bff5;
}
@media (prefers-reduced-motion: reduce) {
    .pb-sign-in-dialog,
    .pb-sign-in-backdrop {
        animation: none;
        transition: none;
    }
}
html[data-theme='dark'] .pb-auth-register :is(.pb-auth-hint, .pb-auth-account-options small) {
    color: #cbd5e1;
}

/* Required fields remain identifiable before and after validation. */
body
    form
    :is(
        input[required]:not([type='checkbox']):not([type='radio']):not([type='hidden']),
        select[required],
        textarea[required],
        [aria-required='true']:not([type='checkbox']):not([type='radio'])
    ) {
    border: 1px solid #d83d5a !important;
}
html[data-theme='dark']
    body
    form
    :is(
        input[required]:not([type='checkbox']):not([type='radio']):not([type='hidden']),
        select[required],
        textarea[required],
        [aria-required='true']:not([type='checkbox']):not([type='radio'])
    ) {
    border-color: #ff9caa !important;
}

/* Legacy creative popup: artwork with an outside corner close button. */
.pb-visual-ad-dialog .pb-visual-ad-header {
    inset: 0;
    padding: 0;
}
.pb-visual-ad-dialog .pb-visual-ad-badge {
    position: absolute;
    left: 8px;
    bottom: 8px;
    border-radius: 4px;
    font-size: 10px;
}
.pb-visual-ad-dialog .pb-visual-ad-close {
    position: absolute;
    top: -16px;
    right: -16px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #111827;
    font-size: 24px;
    line-height: 1;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
    cursor: pointer;
}
.pb-visual-ad-dialog .pb-visual-ad-media :is(img, video) {
    border-radius: 10px;
}


/* Center visual creatives within the legacy viewport limits on every screen. */
html:has(.pb-visual-ad-dialog[open]),
body:has(.pb-visual-ad-dialog[open]) { overflow:hidden; }
.pb-visual-ad-dialog.pb-image-ad-dialog,
.pb-visual-ad-dialog.pb-media-ad-dialog {
    position:fixed;
    inset:0;
    margin:auto;
    max-width:80vw;
    max-height:80dvh;
    overflow:visible;
}
.pb-visual-ad-dialog .pb-visual-ad-close {
    top:-22px;
    right:-22px;
    width:44px;
    height:44px;
    min-height:44px;
    border:1px solid #64748b;
    outline:2px solid #fff;
}
.pb-visual-ad-dialog .pb-visual-ad-close:focus-visible { outline:3px solid #168cff; }

.pb-dj-profile-follow {
    background: #0d6efd;
    border-color: #0d6efd;
}

.pb-dj-about-meta h3 {
    margin: 24px 0 8px;
    font-size: 20px;
    font-weight: 500;
}

.pb-dj-about-meta p {
    margin: 0;
}

.pb-dashboard-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    margin-top: 16px;
}
.pb-dashboard-link {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.pb-dashboard-link:hover,
.pb-dashboard-link:focus-visible {
    border-color: #2980b9;
    color: #2980b9;
}
.pb-dashboard-djs {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 4px 0 8px;
    overflow-x: auto;
    list-style: none;
}
.pb-dashboard-djs a {
    display: grid;
    justify-items: center;
    gap: 6px;
    width: 84px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}
.pb-dashboard-djs img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}
.pb-dashboard-djs span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pb-dashboard-activity {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.pb-dashboard-activity section {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
}
.pb-dashboard-activity h2 {
    margin: 0 0 10px;
    font-size: 16px;
}
.pb-dashboard-activity ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pb-dashboard-activity li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
}
.pb-dashboard-activity small,
.pb-dashboard-activity p {
    color: var(--text-secondary);
}
@media (max-width: 767px) {
    .pb-dashboard-activity {
        grid-template-columns: minmax(0, 1fr);
    }
}

.pb-edit-audio {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.pb-edit-audio audio {
    margin-top: 8px;
}
.pb-edit-audio small {
    margin: 4px 0;
    color: var(--text-secondary);
}
.pb-upload-workflow > .btn,
.pb-upload-workflow > .pb-upload-tips-trigger {
    margin-bottom: 16px;
}
@media (max-width: 767px) {
    .pb-edit-audio {
        grid-template-columns: minmax(0, 1fr);
    }
}

.pb-charts-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.pb-half-page-ad {
    display: none;
    width: 300px;
    max-width: 100%;
}
.pb-half-page-ad__label {
    display: block;
    margin-bottom: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    text-align: center;
    text-transform: uppercase;
}
.pb-half-page-ad img {
    border-radius: 8px;
}
@media (min-width: 1100px) {
    .pb-charts-layout:has(.pb-half-page-ad) {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
    .pb-half-page-ad {
        display: block;
        position: sticky;
        top: calc(var(--pb-header-height, 64px) + 16px);
    }
}

.pb-report-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}
.pb-report-button:hover,
.pb-report-button:focus-visible {
    color: #dc2626;
    text-decoration: underline;
}
.pb-dj-profile-actions .pb-report-button {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.pb-author-byline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 12px;
    font-size: 14px;
}
.pb-author-byline__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

/* My Uploads cards: let actions wrap fully; edit-page delete button. */
.pb-my-uploads-grid .pb-featured-card,
.pb-upload-card {
    height: auto;
    min-height: 0;
}
.pb-upload-card .pb-featured-card__body {
    height: auto;
    min-height: 0;
}
.pb-upload-actions-bar .pb-upload-delete {
    margin-right: auto;
    min-height: 42px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid color-mix(in srgb, #dc2626 45%, var(--border));
    border-radius: 8px;
    background: var(--bg-primary);
    color: #dc2626;
    font-weight: 800;
    cursor: pointer;
}
.pb-upload-actions-bar .pb-upload-delete:hover,
.pb-upload-actions-bar .pb-upload-delete:focus-visible {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}
.pb-upload-actions-bar .pb-upload-delete:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.pb-upload-actions .pb-upload-delete {
    color: #dc2626;
}
.pb-upload-details-layout .pb-form-field input[type='number'] {
    max-width: 12rem;
}
@media (max-width: 767px) {
    .pb-upload-actions-bar .pb-upload-delete {
        margin-right: 0;
        width: 100%;
        justify-content: center;
    }
}
/* Sidebar divider before the Creator link; clear-filters button. */
.sidebar-divider {
    margin: 8px 12px;
    border: 0;
    border-top: 1px solid var(--border, #e2e8f0);
    opacity: 1;
}
.pb-clear-filters {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Creator My Events list. */
.pb-event-rows {
    display: grid;
    gap: 12px;
}
.pb-event-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-primary);
}
.pb-event-row__cover {
    display: grid;
    place-items: center;
    width: 96px;
    height: 72px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-secondary, #64748b);
    font-size: 28px;
}
.pb-event-row__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pb-event-row__body h2 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 800;
}
.pb-event-row__body p {
    margin: 0 0 6px;
    color: var(--text-secondary, #64748b);
    font-size: 13px;
}
.pb-event-row__reason {
    display: block;
    margin-top: 4px;
    color: #dc2626;
}
.pb-event-status {
    display: inline-flex;
    border-radius: 999px;
    padding: 2px 10px;
    color: #ffffff;
    background: #5b6472;
    font-size: 11px;
    font-weight: 800;
}
.pb-event-status--approved {
    background: #168a46;
}
.pb-event-status--pending_review {
    background: #d97706;
}
.pb-event-status--rejected {
    background: #dc2626;
}
.pb-event-row .pb-upload-actions {
    grid-template-columns: repeat(3, auto);
    margin-top: 0;
}
@media (max-width: 767px) {
    .pb-event-row {
        grid-template-columns: 72px minmax(0, 1fr);
    }
    .pb-event-row__cover {
        width: 72px;
        height: 56px;
    }
    .pb-event-row .pb-upload-actions {
        grid-column: 1 / -1;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }
}

/* Details-page artwork picker: fill the column with the full square preview. */
.pb-upload-details-layout .pb-upload-artwork img,
.pb-upload-details-layout .pb-upload-artwork__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* My Uploads cards: full-height body so View/Stats/Edit/Delete never clip. */
.pb-my-uploads-grid .pb-featured-card.pb-upload-card {
    height: auto;
    min-height: 0;
}

.pb-my-uploads-grid .pb-upload-card .pb-featured-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: auto;
    min-height: 0;
    grid-template-rows: none;
}

.pb-my-uploads-grid .pb-upload-card .pb-featured-card__stats {
    flex-wrap: wrap;
    height: auto;
    gap: 4px 12px;
}

.pb-my-uploads-grid .pb-upload-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
}

.pb-my-uploads-grid .pb-upload-actions a,
.pb-my-uploads-grid .pb-upload-actions .pb-upload-delete {
    min-height: 34px;
    width: 100%;
}

.pb-account-dialog [class*='justify-end'],
.pb-account-dialog form > div:last-child {
    gap: 10px;
}
/* My Uploads: larger cards, icon-only actions. */
.pb-my-uploads-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.pb-my-uploads-grid .pb-featured-card__artwork {
    aspect-ratio: 1 / 1;
    height: auto;
}

.pb-my-uploads-grid .pb-featured-card__artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pb-my-uploads-grid .pb-upload-card .pb-featured-card__body {
    padding: 14px;
    gap: 8px;
}

.pb-my-uploads-grid .pb-upload-card .pb-featured-card__body h2 {
    font-size: 16px;
}

.pb-my-uploads-grid .pb-upload-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.pb-my-uploads-grid .pb-upload-actions > span {
    grid-column: 1 / -1;
}

.pb-my-uploads-grid .pb-upload-actions a,
.pb-my-uploads-grid .pb-upload-actions .pb-upload-delete {
    min-height: 38px;
    font-size: 16px;
}
/* My Uploads: match the Mixtapes page card size (4 columns, 150px artwork). */
.pb-my-uploads-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    grid-auto-rows: auto;
}

.pb-my-uploads-grid .pb-featured-card__artwork {
    height: 150px;
    aspect-ratio: auto;
}

.pb-my-uploads-grid .pb-upload-card .pb-featured-card__body {
    padding: 9px 10px 10px;
    gap: 6px;
}

.pb-my-uploads-grid .pb-upload-card .pb-featured-card__body h2 {
    font-size: 14px;
}

.pb-my-uploads-grid .pb-upload-actions a,
.pb-my-uploads-grid .pb-upload-actions .pb-upload-delete {
    min-height: 32px;
    font-size: 14px;
}

@media (max-width: 991.98px) {
    .pb-my-uploads-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .pb-my-uploads-grid {
        grid-template-columns: 1fr;
    }
}
/* Edit mixtape: stacked audio card with read-only duration. */
.pb-edit-audio {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}
.pb-edit-audio__current,
.pb-edit-audio__replace {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-secondary, #f1f5f9) 60%, transparent);
}
.pb-edit-audio audio {
    display: block;
    width: 100%;
    height: 44px;
    border-radius: 999px;
}
.pb-edit-audio input[type='file'] {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
}
.pb-edit-audio input[type='file']::file-selector-button {
    margin-right: 10px;
    padding: 6px 12px;
    border: 0;
    border-radius: 6px;
    background: #2980b9;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}
.pb-edit-audio .pb-form-field {
    margin-top: 12px;
    max-width: 200px;
}
input.pb-readonly {
    background: color-mix(in srgb, var(--bg-secondary, #f1f5f9) 80%, transparent);
    color: var(--text-secondary);
    cursor: default;
}

/* Report button on the dark DJ profile hero matches the Share button. */
.pb-dj-profile-actions .pb-report-button {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-weight: 600;
}
.pb-dj-profile-actions .pb-report-button:hover,
.pb-dj-profile-actions .pb-report-button:focus-visible {
    border-color: #ffffff;
    background: #ffffff;
    color: #dc2626;
    text-decoration: none;
}

/* Desktop footer player: compact height, evenly padded and vertically centred. */
@media (min-width: 992px) {
    :root {
        --pb-player-height: 68px;
    }
    footer.footer {
        padding: 0;
    }
    footer.footer .musicPlayer {
        height: calc(var(--pb-player-height) - 3px);
        max-height: calc(var(--pb-player-height) - 3px);
        padding: 0;
        display: flex;
        align-items: center;
    }
    footer.footer .nowPlayingBar {
        height: 100%;
        padding: 0 16px;
    }
    footer.footer .media-info .trackInfo {
        height: auto;
        padding: 0;
        line-height: 14px;
        overflow: hidden;
    }
}

/* The footer player bar always spans the full viewport width. */
footer.footer,
footer.footer .musicPlayer,
footer.footer .nowPlayingBar {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}
footer.footer .nowPlayingBar {
    margin-inline: 0;
}
html[data-theme='dark'] footer.footer {
    background: #111822;
    color: #e5e7eb;
}

/* Dark theme: cards, filters and light buttons must not stay white. */
html[data-theme='dark'] body .pb-featured-card,
html[data-theme='dark'] body .pb-featured-card .pb-featured-card__body,
html[data-theme='dark'] body .pb-dj-card,
html[data-theme='dark'] body .pb-chart-row {
    background: var(--pb-surface-2);
    border-color: var(--pb-border);
    color: var(--pb-text);
}
html[data-theme='dark'] body .pb-featured-card .pb-featured-card__artwork {
    background: var(--pb-surface);
}
html[data-theme='dark'] body main .form-control,
html[data-theme='dark'] body main .form-select {
    background-color: var(--pb-surface-2);
    border-color: var(--pb-border);
    color: var(--pb-text);
}
html[data-theme='dark'] body main .btn-light {
    background: var(--pb-surface-2);
    border-color: var(--pb-border);
    color: var(--pb-text);
}
html[data-theme='dark'] body .pb-library-unavailable .pb-library-art {
    background: var(--pb-surface-2);
}


/* Compact mobile footer player: artwork and track details, like, queue and play. */
@media (max-width: 767.98px) {
    :root {
        --pb-player-height: 60px;
    }

    footer.footer {
        height: calc(var(--pb-player-height) + env(safe-area-inset-bottom, 0px));
        max-height: none;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    footer.footer .progress-container {
        height: 3px;
    }

    footer.footer .progress-bar::after {
        display: none;
    }

    footer.footer .musicPlayer {
        height: calc(var(--pb-player-height) - 3px);
        max-height: calc(var(--pb-player-height) - 3px);
    }

    footer.footer .nowPlayingBar {
        display: grid;
        grid-template-areas: 'metadata actions transport';
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        align-content: center;
        padding: 4px 12px;
        gap: 0 4px;
    }

    footer.footer .nowPlayingLeft {
        flex: 1 1 auto;
        min-width: 0;
        order: 1;
    }

    footer.footer .nowPlayingRight {
        flex: 0 0 auto;
        width: auto;
        order: 2;
        gap: 0 !important;
    }

    footer.footer .nowPlayingCenter {
        flex: 0 0 auto;
        width: auto;
        order: 3;
    }

    footer.footer .nowPlayingRight .volumeBar,
    footer.footer .nowPlayingRight .other-features button:not([data-player-like]):not([data-queue-toggle]),
    footer.footer .nowPlayingCenter .playbackBar,
    footer.footer .nowPlayingCenter [data-player-previous],
    footer.footer .nowPlayingCenter [data-player-next],
    footer.footer .nowPlayingCenter [data-player-repeat] {
        display: none !important;
    }

    footer.footer .media-info {
        gap: 10px;
        min-width: 0;
    }

    footer.footer .media-info .artwork {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 4px;
        object-fit: cover;
    }

    footer.footer .media-info .trackInfo {
        height: auto;
        min-width: 0;
        line-height: 1.25;
    }

    footer.footer .media-info .trackInfo > div,
    footer.footer .media-info .trackInfo a {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
    }

    footer.footer .media-info .trackName a {
        font-size: 12px;
        font-weight: 800;
    }

    footer.footer .nowPlayingRight .other-features button[data-player-like],
    footer.footer .nowPlayingRight .other-features button[data-queue-toggle] {
        display: inline-flex !important;
    }

    footer.footer .controlButton {
        width: 36px;
        height: 36px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    footer.footer .controlButton.play {
        width: 36px;
        height: 36px;
        background: transparent !important;
        color: var(--pb-blue);
    }

    footer.footer .controlButton.play i.play-pause {
        font-size: 24px;
    }
}
/* Shared DJ cards without redundant profile buttons. */
.pb-dj-profile-card.pb-dj-card--simple { grid-template-columns:54px minmax(0,1fr); gap:14px; padding:16px; }
.pb-dj-card--simple > div > span { display:flex; flex-wrap:wrap; gap:8px; }
.pb-upload-details-layout { grid-template-columns:minmax(240px,1fr) minmax(0,2fr); gap:16px; }
.pb-upload-details-layout .pb-account-panel { padding:16px; }
.pb-upload-details-layout .pb-form-field.max-w-48 { max-width:none; }
.pb-upload-details-layout .pb-upload-artwork { aspect-ratio:1; }
.pb-upload-sponsored { margin:24px 0 16px; }
.pb-upload-sponsored__space { min-height:180px; border:1px solid var(--border); background:var(--bg-secondary); border-radius:8px; display:grid; place-items:center; overflow:hidden; }
.pb-upload-sponsored__space img { width:100%; max-height:200px; object-fit:contain; }
.pb-upload-actions-bar { justify-content:flex-start; flex-wrap:wrap; gap:8px; }
@media(max-width:767px) { .pb-upload-details-layout { grid-template-columns:1fr; } .pb-dj-profile-card.pb-dj-card--simple { grid-template-columns:48px minmax(0,1fr); padding:12px; } }

.pb-upload-publish-panel .pb-upload-actions-bar { justify-content:flex-start; }
.pb-dj-grid:has(.pb-dj-card--simple) { display:grid; grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:14px; overflow:visible; }
.pb-dj-grid > .pb-dj-card--simple { width:auto; min-width:0; }
@media(max-width:575px) { .pb-dj-grid:has(.pb-dj-card--simple) { grid-template-columns:1fr; } }

.pb-dj-section { min-width:0; max-width:100%; }
.pb-dj-section .pb-section-heading > div:first-child { min-width:0; flex:1; }
.pb-dj-section .pb-section-actions { flex-shrink:0; }
.pb-dj-card--simple > div > span { overflow:visible; white-space:normal; }
@media(max-width:575px) {
    .pb-dj-section .pb-section-heading { align-items:flex-start; gap:12px; }
    .pb-dj-section .pb-section-heading p { overflow-wrap:anywhere; }
    .pb-dj-section .pb-section-actions { gap:6px; padding-top:0; }
    .pb-dj-section .pb-section-actions .pb-circle-action { min-width:36px; min-height:36px; }
    .pb-dj-section .pb-dj-grid:has(.pb-dj-card--simple) {
        width:100%; min-width:0; max-width:100%;
        grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:100%;
        overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
    }
    .pb-dj-section .pb-dj-grid > .pb-dj-card--simple { width:100%; scroll-snap-align:start; }
}

/* Shared discovery headings and public report actions. */
.pb-mixtape-discovery .pb-section-heading :is(h1, h2),
.pb-section-heading :is(h1, h2) {
    margin: 0;
    font-family: inherit;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.2;
    color: inherit;
}
@media (max-width: 767px) {
    .pb-mixtape-discovery .pb-section-heading :is(h1, h2),
    .pb-section-heading :is(h1, h2) { font-size: 23px; }
}
.pb-content-report,
.pb-card-action-menu [data-mixtape-report-url],
.pb-mixtape-detail a[href*="reports"],
html[data-theme="dark"] .pb-content-report {
    color: #dc3545;
}
.pb-content-report { border-color: #dc3545; }
.pb-content-report:hover, .pb-content-report:focus-visible {
    color: #fff;
    background-color: #b02a37;
    border-color: #b02a37;
}

/* Desktop card grids and discovery rails share five equally sized columns. */
@media (min-width: 992px) {
    .pb-mixtape-card-grid,
    .pb-mixtapes-page .pb-mixtape-card-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .pb-featured-row {
        grid-auto-columns: calc((100% - 4 * var(--pb-card-gap, 16px)) / 5);
    }
}
@media (max-width: 991.98px) {
    .pb-featured-row { grid-auto-columns: min(240px, 82vw); }
}
.pb-discovery-sponsored { margin: 24px 0; }


/* Shared account-library group and bottom page advertising. */
.pb-account-library-group { border-top:1px solid var(--border,#e5e7eb); border-bottom:1px solid var(--border,#e5e7eb); margin:6px 0; padding:6px 0; }
.pb-account-library-heading { display:block; padding:6px 16px; font-size:12px; font-weight:600; color:var(--text-secondary,#64748b); }
.pb-bottom-leaderboard { margin:28px 0; min-width:0; }
.pb-bottom-leaderboard .pb-upload-sponsored__space { width:100%; min-height:90px; margin-inline:auto; aspect-ratio:728/90; }
.pb-bottom-leaderboard img { display:block; max-width:100%; max-height:250px; object-fit:contain; }
.pb-profile-image .pb-upload-artwork { align-items:start; gap:12px; min-width:0; }
.pb-profile-image .pb-upload-artwork > small { display:block; overflow-wrap:anywhere; }
.pb-profile-image .pb-upload-artwork > button { position:relative; overflow:hidden; }
.pb-profile-image--cover_pic .pb-upload-artwork > button { width:100%; height:auto; aspect-ratio:3/1; }
.pb-profile-image [role=alert] { margin:8px 0; overflow-wrap:anywhere; }
.pb-card-action-menu a[data-mixtape-edit-link] { text-decoration:none; }
@media(max-width:575px) { .pb-bottom-leaderboard .pb-upload-sponsored__space { min-height:100px; aspect-ratio:320/100; } }

/* Show saved mixtape subgenres without clipping labels in narrow cards. */
.pb-featured-card__genre.pb-mixtape-genres {
    display:flex;
    flex-wrap:wrap;
    gap:4px 8px;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
}
.pb-mixtape-genres a { white-space:normal; overflow-wrap:anywhere; }

/* Guest newsletter invitation on the landing page. */
.pb-newsletter-dialog {
    box-sizing: border-box;
    width: min(92vw, 440px);
    max-height: 90dvh;
    margin: auto;
    padding: 22px;
    overflow: auto;
    border: 1px solid var(--pb-border);
    border-radius: 16px;
    background: var(--pb-surface);
    color: var(--pb-text);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}
.pb-newsletter-dialog::backdrop {
    background: rgba(5, 7, 10, 0.62);
}
.pb-newsletter-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.pb-newsletter-dialog__eyebrow {
    margin: 0 0 4px;
    color: var(--pb-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.pb-newsletter-dialog h2 {
    margin: 0;
    color: var(--pb-text);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
}
.pb-newsletter-dialog__close {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--pb-border);
    border-radius: 999px;
    background: transparent;
    color: var(--pb-text);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.pb-newsletter-dialog__intro {
    margin: 14px 0 12px;
    color: var(--pb-muted);
}
.pb-newsletter-dialog__perks {
    display: grid;
    gap: 6px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--pb-surface-2);
    list-style: none;
}
.pb-newsletter-dialog__perks li::before {
    content: '\2713';
    margin-right: 8px;
    color: var(--pb-blue);
    font-weight: 700;
}
.pb-newsletter-dialog label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}
.pb-newsletter-dialog input[type='email'] {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--pb-border);
    border-radius: 10px;
    background: var(--pb-surface);
    color: var(--pb-text);
    font-size: 16px;
}
.pb-newsletter-dialog input[aria-invalid='true'] {
    border-color: var(--status-danger-text);
}
.pb-newsletter-dialog__trap {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.pb-newsletter-dialog__status {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid;
    border-radius: 10px;
}
.pb-newsletter-dialog__status.is-success {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
    color: var(--status-success-text);
}
.pb-newsletter-dialog__status.is-error {
    border-color: var(--status-danger-border);
    background: var(--status-danger-bg);
    color: var(--status-danger-text);
}
.pb-newsletter-dialog__actions {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}
.pb-newsletter-dialog__primary,
.pb-newsletter-dialog__secondary {
    min-height: 46px;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}
.pb-newsletter-dialog__primary {
    border: 1px solid var(--pb-blue);
    background: var(--pb-blue);
    color: #ffffff;
}
.pb-newsletter-dialog__primary:disabled {
    opacity: 0.7;
    cursor: progress;
}
.pb-newsletter-dialog__secondary {
    border: 1px solid var(--pb-border);
    background: transparent;
    color: var(--pb-text);
}
.pb-newsletter-dialog :is(button, input):focus-visible {
    outline: 2px solid var(--pb-blue);
    outline-offset: 2px;
}