/* /Components/Layout/BottomNav.razor.rz.scp.css */
/* Hidden on desktop — mobile-only component */
.bottom-nav[b-wkd8mypjk7] { display: none; }

@media (max-width: 640px) {
    .bottom-nav[b-wkd8mypjk7] {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        /* border-box (Bootstrap global) — the safe-area padding must be added on
           top of the 56px content height or it eats it and crushes the icons. */
        height: calc(56px + env(safe-area-inset-bottom, 0px));
        background: color-mix(in oklab, var(--c-surface, #16161c) 94%, transparent);
        backdrop-filter: blur(24px) saturate(160%);
        -webkit-backdrop-filter: blur(24px) saturate(160%);
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        z-index: 190;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .bottom-nav[b-wkd8mypjk7]  .bn-item {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: var(--c-text-3, rgba(255,255,255,0.28));
        text-decoration: none;
        padding: 6px 8px 5px;
        -webkit-tap-highlight-color: transparent;
        transition: color var(--dur-micro, 80ms);
        user-select: none;
    }

    .bottom-nav[b-wkd8mypjk7]  .bn-item.active {
        color: var(--c-accent, #ff5500);
    }

    .bottom-nav[b-wkd8mypjk7]  .bn-item.active::after {
        content: '';
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--c-accent, #ff5500);
    }

    .bottom-nav[b-wkd8mypjk7]  .bn-item.active svg {
        transform: scale(1.08);
    }

    .bottom-nav[b-wkd8mypjk7]  .bn-item svg {
        transition: transform var(--dur-micro, 80ms);
        flex-shrink: 0; /* never crush the icon if vertical space runs short */
    }

    @media (hover: hover) {
        .bottom-nav[b-wkd8mypjk7]  .bn-item:hover {
            color: var(--c-text-2, rgba(255,255,255,0.52));
        }
    }

    .bottom-nav[b-wkd8mypjk7]  .bn-item:active {
        color: color-mix(in oklab, var(--c-accent, #ff5500) 70%, black);
    }

    .bn-label[b-wkd8mypjk7] {
        font-size: var(--fs-xxs, 0.63rem);
        letter-spacing: 0.02em;
        line-height: 1;
        font-weight: var(--fw-medium, 500);
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.offline-banner[b-7xucsfnv10] {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    background: var(--c-surface, #16161c);
    border-bottom: 1px solid var(--c-border-2, rgba(255,255,255,0.13));
    color: var(--c-text-2, rgba(255,255,255,0.52));
    font-size: var(--fs-sm, 0.82rem);
    padding: 6px var(--sp-4, 16px);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky, 50);
}

.page[b-7xucsfnv10] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

main[b-7xucsfnv10] {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* min-height: 0 lets the flex item shrink below its content's intrinsic
       height so the inner article can become the scroll container. Without it
       the flex item expands to match its tallest child and overflow-y: auto on
       article never triggers. */
    min-height: 0;
    overflow: hidden;
    /* Same fix on the horizontal axis — prevents a wide carousel from
       stretching main past the viewport and breaking the search bar. */
    min-width: 0;
    position: relative;
    /* isolate so the bass overlay's negative z-index sits above main's own
       background but below the content, without escaping this subtree. */
    isolation: isolate;
    /* Static neutral base. The bass-reactive bloom is painted once by
       main::before and faded in via opacity (GPU-composited), so per-frame
       intensity changes cost no paint/layout. */
    background: linear-gradient(180deg,
        var(--theme-bg-top, #0d0d12) 0%,
        var(--theme-bg-bottom, #0d0d12) 100%);
}

/* Bass-reactive bloom. Hue stays in the gradient (re-paints only when
   --bass-hue actually changes — now rare); --bass-intensity drives opacity,
   which is composited and never triggers paint. */
main[b-7xucsfnv10]::before {
    /* --bass-hue/--bass-intensity are registered non-inheriting (see app.css), and a
       pseudo-element does NOT inherit a non-inherited property from its originating
       element — it would silently fall back to the initial value (0) and never light
       up. Pulling them in explicitly is what keeps the glow alive; it costs nothing,
       because only this pseudo-element opts in, not the whole subtree. */
    --bass-hue: inherit;
    --bass-intensity: inherit;
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg,
        hsl(var(--bass-hue, 240) 70% 40%) 0%,
        hsl(var(--bass-hue, 240) 65% 35%) 100%);
    opacity: calc(var(--bass-intensity, 0) * 0.45);
    will-change: opacity;
    transition: opacity 100ms linear;
}

article[b-7xucsfnv10] {
    flex: 1;
    /* min-height: 0 is the critical companion to the parent's min-height: 0 —
       it lets this flex item shrink to the available height so overflow-y: auto
       actually scrolls instead of expanding the container. */
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Explicit vertical pan so Android WebView knows this element owns the
       vertical scroll axis — without it the browser may attribute a downward
       swipe to a child carousel and swallow it. */
    touch-action: pan-y;
    padding-bottom: 24px;
    /* Themed auto-hide scrollbar (Spotify-style): transparent until the user
       hovers the content area, then fades in the accent-coloured thumb. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

article:hover[b-7xucsfnv10] {
    scrollbar-color: color-mix(in oklab, var(--c-accent, #ff5500) 55%, transparent) transparent;
}

article[b-7xucsfnv10]::-webkit-scrollbar { width: 8px; }
article[b-7xucsfnv10]::-webkit-scrollbar-track { background: transparent; }
article[b-7xucsfnv10]::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: var(--r-full, 9999px);
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background var(--dur-base, 220ms) ease;
}
article:hover[b-7xucsfnv10]::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--c-accent, #ff5500) 55%, transparent);
    background-clip: padding-box;
}
article:hover[b-7xucsfnv10]::-webkit-scrollbar-thumb:active {
    background: color-mix(in oklab, var(--c-accent, #ff5500) 75%, transparent);
    background-clip: padding-box;
}

.sidebar[b-7xucsfnv10] {
    /* Static dark base gradient; the bass-reactive tint + halo are painted by
       the ::before / ::after overlays and faded via opacity (composited). */
    background-image: linear-gradient(180deg,
        var(--theme-sidebar-top, #0d0d14) 0%,
        var(--theme-sidebar-bottom, #0d0d12) 100%);
    position: relative;
    isolation: isolate;
}

/* Bass gradient bloom — sits above the base gradient, below the nav content. */
.sidebar[b-7xucsfnv10]::before {
    /* --bass-hue/--bass-intensity are registered non-inheriting (see app.css), and a
       pseudo-element does NOT inherit a non-inherited property from its originating
       element — it would silently fall back to the initial value (0) and never light
       up. Pulling them in explicitly is what keeps the glow alive; it costs nothing,
       because only this pseudo-element opts in, not the whole subtree. */
    --bass-hue: inherit;
    --bass-intensity: inherit;
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg,
        hsl(var(--bass-hue, 240) 80% 50%) 0%,
        hsl(calc(var(--bass-hue, 240) + 40) 75% 45%) 100%);
    opacity: calc(var(--bass-intensity, 0) * 0.70);
    will-change: opacity;
    transition: opacity 90ms linear;
}

/* Bass-reactive halo + right-edge accent. Fixed blur radius (extends past the
   15px collapsed edge via the outer shadow), faded via opacity so per-frame
   intensity changes don't repaint the glow. Transparent body, so it never
   occludes the nav content. */
.sidebar[b-7xucsfnv10]::after {
    /* --bass-hue/--bass-intensity are registered non-inheriting (see app.css), and a
       pseudo-element does NOT inherit a non-inherited property from its originating
       element — it would silently fall back to the initial value (0) and never light
       up. Pulling them in explicitly is what keeps the glow alive; it costs nothing,
       because only this pseudo-element opts in, not the whole subtree. */
    --bass-hue: inherit;
    --bass-intensity: inherit;
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow:
        0 0 50px 8px hsla(var(--bass-hue, 240), 80%, 55%, 0.35),
        inset -2px 0 0 hsla(var(--bass-hue, 240), 70%, 50%, 0.5);
    opacity: var(--bass-intensity, 0);
    will-change: opacity;
    transition: opacity 90ms linear;
}

.top-row[b-7xucsfnv10] {
    background-color: var(--c-surface, #16161c);
    border-bottom: 1px solid var(--c-border, rgba(255,255,255,0.07));
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.top-row[b-7xucsfnv10]  a, .top-row[b-7xucsfnv10]  .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
}

.top-row[b-7xucsfnv10]  a:hover, .top-row[b-7xucsfnv10]  .btn-link:hover {
    text-decoration: underline;
}

.top-row[b-7xucsfnv10]  a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640.98px) {
    .top-row[b-7xucsfnv10] {
        justify-content: space-between;
    }

    .top-row[b-7xucsfnv10]  a, .top-row[b-7xucsfnv10]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-7xucsfnv10] {
        flex-direction: row;
    }

    .sidebar[b-7xucsfnv10] {
        position: fixed;
        left: 0;
        top: 0;
        /* Stop above the 72px fixed player bar so the account/username bubble at the
           bottom of the sidebar isn't hidden behind it. */
        height: calc(100dvh - 72px);
        width: 15px;
        display: flex;
        flex-direction: column;
        transition: width 220ms ease-in-out, box-shadow 220ms;
        overflow: visible;
        z-index: var(--z-nav, 200);
    }

    main[b-7xucsfnv10] {
        /* Exactly fills the viewport minus the fixed 72px player bar — the scroll
           thumb then spans only the real content area, never the bar beneath. */
        height: calc(100dvh - 72px);
        margin-left: 15px;
        transition: margin-left 220ms ease-in-out;
    }

    /* Pinned: reflow content to the right of the full 250px sidebar so it isn't
       overlaid. Plain hover stays an overlay "peek" (margin-left unchanged) — only
       an explicit pin shifts the page. */
    .sidebar.sidebar-pinned ~ main[b-7xucsfnv10] {
        margin-left: 250px;
    }

    .sidebar:hover[b-7xucsfnv10],
    .sidebar.sidebar-pinned[b-7xucsfnv10] {
        width: 250px;
        box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.60));
    }

    /* Hide nav link text when sidebar is collapsed */
    .sidebar:not(:hover):not(.sidebar-pinned)[b-7xucsfnv10]  .nav-link span {
        display: inline-block;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-width 180ms ease, opacity 180ms;
    }

    .sidebar:hover[b-7xucsfnv10]  .nav-link span,
    .sidebar.sidebar-pinned[b-7xucsfnv10]  .nav-link span {
        max-width: 400px;
        opacity: 1;
        transition: max-width 180ms ease, opacity 180ms;
    }

    /* Remove separator bleed when sidebar is collapsed. overflow:hidden clips
       the username/badge so the pill's hit area stops at the sidebar edge —
       without this, hovering the visible-but-bled text flips the sidebar
       between expanded/collapsed (jitter). */
    .sidebar:not(:hover):not(.sidebar-pinned)[b-7xucsfnv10]  .account-section {
        border-top: none;
        margin: auto 0 0;
        padding: 6px 0;
        /* overflow: visible so the collapsed avatar bubble can peek past the
           15px sidebar width. Width-clipping is handled by the avatar's own
           transition (shrinks to fit) — this lets the bubble still be seen
           as a tiny dot instead of disappearing entirely behind the strip. */
        overflow: visible;
    }

    /* Account/connect row: layout stays identical in every sidebar state so
       hovering the bubble can't change its bounding box (which previously
       kicked off an expand/collapse jitter loop — the mouse fell out of the
       shrinking pill and the sidebar re-collapsed, over and over). Only the
       pill background fades in/out. */
    .sidebar[b-7xucsfnv10]  .account-link,
    .sidebar[b-7xucsfnv10]  .connect-link {
        display: inline-flex;
        white-space: nowrap;
        border-radius: 100px;
        padding: 3px 10px 3px 4px;
        transition: background 160ms ease, padding 200ms ease, gap 200ms ease;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .sidebar:not(:hover):not(.sidebar-pinned)[b-7xucsfnv10]  .account-link,
    .sidebar:not(:hover):not(.sidebar-pinned)[b-7xucsfnv10]  .connect-link {
        background: rgba(255, 255, 255, 0.08);
        /* Collapsed: tighten padding + zero gap so the shrunken avatar sits
           centered inside the 15px sidebar strip instead of getting clipped
           past the right edge by the pill's default left-padding. */
        padding: 2px;
        gap: 0;
    }

    /* Avatar size animates with sidebar state. When collapsed it shrinks to
       fit inside the 15px strip (was completely off-screen before — the pill's
       4px left-padding + 25px avatar = 29px, clipped past the 15px edge so
       the user saw nothing). When expanded it grows back to 25 px. */
    .sidebar[b-7xucsfnv10]  .avatar-badge-wrap,
    .sidebar[b-7xucsfnv10]  .avatar-badge-wrap .avatar {
        transition: width 200ms ease, height 200ms ease;
    }

    .sidebar:not(:hover):not(.sidebar-pinned)[b-7xucsfnv10]  .avatar-badge-wrap,
    .sidebar:not(:hover):not(.sidebar-pinned)[b-7xucsfnv10]  .avatar-badge-wrap .avatar {
        width: 11px;
        height: 11px;
    }

    /* Username text + plan badge fade + collapse to width 0 when the sidebar
       is collapsed, so the bubble visibly "grows into" the full row on hover
       rather than popping into place. */
    .sidebar[b-7xucsfnv10]  .account-link > span:not(.nav-plan-badge),
    .sidebar[b-7xucsfnv10]  .account-link > .nav-plan-badge,
    .sidebar[b-7xucsfnv10]  .connect-link > span {
        max-width: 180px;
        opacity: 1;
        overflow: hidden;
        transition: max-width 180ms ease, opacity 180ms ease, padding 180ms ease;
    }

    .sidebar:not(:hover):not(.sidebar-pinned)[b-7xucsfnv10]  .account-link > span:not(.nav-plan-badge),
    .sidebar:not(:hover):not(.sidebar-pinned)[b-7xucsfnv10]  .account-link > .nav-plan-badge,
    .sidebar:not(:hover):not(.sidebar-pinned)[b-7xucsfnv10]  .connect-link > span {
        max-width: 0;
        opacity: 0;
        padding: 0;
    }

    /* Go+ notch stays visible when collapsed — it's the only "SoundCloud Go"
       cue left on the bubble once the username + plan badge have faded out,
       so it doubles as a subscription-status indicator in the thin strip.
       Shrunk from 9 px → 5 px so it reads as a small dot on the 11 px avatar
       instead of dominating it. */
    .sidebar[b-7xucsfnv10]  .nav-goplus-dot {
        transition: width 180ms ease, height 180ms ease, border-width 180ms ease;
    }

    .sidebar:not(:hover):not(.sidebar-pinned)[b-7xucsfnv10]  .nav-goplus-dot {
        width: 5px;
        height: 5px;
        border-width: 1px;
    }

    /* Pin button: float into main content when sidebar is collapsed */
    .sidebar:not(:hover):not(.sidebar-pinned)[b-7xucsfnv10]  .nav-pin-btn {
        right: -2.2rem;
    }

    /* Hide scrollbar when sidebar is collapsed */
    .sidebar:not(:hover):not(.sidebar-pinned)[b-7xucsfnv10]  .nav-scrollable {
        overflow: hidden;
    }

    .top-row[b-7xucsfnv10] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-7xucsfnv10]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-7xucsfnv10], article[b-7xucsfnv10] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (max-width: 640px) {
    main[b-7xucsfnv10] {
        /* Body scrolls on mobile — more reliable in MAUI Android WebView than
           a nested CSS overflow-y container. Height is auto so body can grow;
           padding-bottom clears the two fixed bars + gesture area. */
        height: auto;
    }

    /* Sidebar is hidden by default on mobile; TopSearchBar handles navigation */
    .sidebar[b-7xucsfnv10] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 200;
        height: 0;
        padding-top: env(safe-area-inset-top);
        overflow: hidden;
        /* Static base — the bass tint is supplied by the shared .sidebar::before
           overlay (opacity-faded), so mobile no longer repaints a color-mix
           gradient every frame. */
        background-image: linear-gradient(180deg,
            var(--theme-sidebar-top, #0d0d14) 0%,
            var(--theme-sidebar-bottom, #0d0d12) 100%);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
        display: flex;
        flex-direction: column;
    }

    /* When nav is open via mobile hamburger: expand to full screen */
    .sidebar:has(.navbar-toggler-m:checked)[b-7xucsfnv10] {
        height: 100dvh;
        overflow-y: auto;
    }

    /* Also support the old toggler for pin/close btn */
    .sidebar:has(.navbar-toggler:checked)[b-7xucsfnv10] {
        height: 100dvh;
        overflow-y: auto;
    }

    /* Show full nav when mobile hamburger is checked */
    .sidebar:has(.navbar-toggler-m:checked)[b-7xucsfnv10]  .nav-scrollable {
        display: flex;
        flex-direction: column;
    }

    .sidebar:has(.navbar-toggler-m:checked)[b-7xucsfnv10]  .account-section {
        display: block;
    }

    /* No margin needed since sidebar is hidden by default */
    main[b-7xucsfnv10] {
        margin-top: 0;
        /* Reserve space for the status-bar-safe-area strip at top */
        padding-top: env(safe-area-inset-top, 24px);
        /* Clear the two fixed bars + OS gesture area at bottom */
        padding-bottom: calc(60px + 56px + env(safe-area-inset-bottom, 0px) + 24px);
    }

    article[b-7xucsfnv10] {
        /* Body is the scroll container — article must not constrain or clip. */
        overflow-y: visible !important;
        touch-action: auto !important;
        min-height: 0;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        padding-bottom: 0 !important;
    }

    /* Show status-bar background strip (hidden globally, shown here) */
    .status-bar-safe-area[b-7xucsfnv10] {
        display: flex !important;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ── Avatar + Go+ dot ─────────────────────────────────────── */

.avatar-badge-wrap[b-bur28k9911] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

/* Glowing ring around the sidebar user-bubble avatar — a soft accent halo
   that pulses with the bass. Painted on a ::before pseudo-element (fixed
   blur, opacity-faded) so per-frame intensity changes never repaint. */
.avatar-badge-wrap[b-bur28k9911]::before {
    /* --bass-hue/--bass-intensity are registered non-inheriting (see app.css), and a
       pseudo-element does NOT inherit a non-inherited property from its originating
       element — it would silently fall back to the initial value (0) and never light
       up. Pulling them in explicitly is what keeps the glow alive; it costs nothing,
       because only this pseudo-element opts in, not the whole subtree. */
    --bass-hue: inherit;
    --bass-intensity: inherit;
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle,
        hsla(var(--bass-hue, 240), 80%, 60%, 0.50) 0%,
        hsla(var(--bass-hue, 240), 80%, 60%, 0.16) 60%,
        transparent 100%);
    opacity: calc(0.15 + var(--bass-intensity, 0) * 0.85);
    will-change: opacity;
    transition: opacity 90ms linear;
    z-index: -1;
}

.nav-goplus-dot[b-bur28k9911] {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--c-go, #2cba6e);
    border: 1.5px solid var(--c-surface, #16161c);
    display: block;
}

.nav-plan-badge[b-bur28k9911] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--c-accent, #ff5500);
    padding: 1px 5px;
    border-radius: 100px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Account link ─────────────────────────────────────────── */

.account-link[b-bur28k9911],
.connect-link[b-bur28k9911] {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--c-text, rgba(255,255,255,0.90));
    cursor: pointer;
}

.account-link:hover[b-bur28k9911],
.connect-link:hover[b-bur28k9911] {
    text-decoration: none;
    opacity: 0.8;
    color: var(--c-text, rgba(255,255,255,0.90));
}

.avatar[b-bur28k9911] {
    text-decoration: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

.account-section[b-bur28k9911] {
    text-decoration: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 6px 5px;
    margin: auto 8px 0;
}

/* ── Sidebar scrollbar (themed, auto-hide on hover) ──────────
   Inherits the global Spotify-style behaviour but scoped to the nav so the
   thumb uses the accent colour and only appears while hovering the sidebar. */
.nav-scrollable[b-bur28k9911]::-webkit-scrollbar { width: 8px; }
.nav-scrollable[b-bur28k9911]::-webkit-scrollbar-track { background: transparent; }
.nav-scrollable[b-bur28k9911]::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: var(--r-full, 9999px);
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background var(--dur-base, 220ms) ease;
}
.nav-scrollable:hover[b-bur28k9911]::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--c-accent, #ff5500) 55%, transparent);
    background-clip: padding-box;
}
.nav-scrollable:hover[b-bur28k9911]::-webkit-scrollbar-thumb:active {
    background: color-mix(in oklab, var(--c-accent, #ff5500) 75%, transparent);
    background-clip: padding-box;
}
.nav-scrollable[b-bur28k9911] { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.nav-scrollable:hover[b-bur28k9911] { scrollbar-color: color-mix(in oklab, var(--c-accent, #ff5500) 55%, transparent) transparent; }

.nav-scrollable[b-bur28k9911] {
    display: none;
    flex: 1 1 auto;
}

.navbar-toggler[b-bur28k9911] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.06);
}

.navbar-toggler:checked[b-bur28k9911] { background-color: rgba(255, 255, 255, 0.14); }

.top-row[b-bur28k9911] {
    min-height: 3.5rem;
    background-color: rgba(0, 0, 0, 0.4);
}

/* ── Brand mark (Nuages cloud logo + wordmark) ──────────────────────
   Sits at the top of the sidebar (desktop) and the top of the mobile
   full-screen nav drawer. */
.nav-brand[b-bur28k9911] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 18px 10px;
    text-decoration: none;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.nav-brand__logo[b-bur28k9911] {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: var(--r-sm, 8px);
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.nav-brand__word[b-bur28k9911] {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--c-text, rgba(255,255,255,0.90));
    white-space: nowrap;
    /* Collapses with the sidebar so only the logo stays visible when
       the strip is 15px wide — matches the nav-link text behaviour. */
    max-width: 180px;
    opacity: 1;
    overflow: hidden;
    transition: max-width 180ms ease, opacity 180ms ease;
}

.bi[b-bur28k9911] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.nav-item[b-bur28k9911] {
    font-size: 0.9rem;
    padding-bottom: 0.25rem;
}


/* ── Sections ──────────────────────────────────────────────────────────
   The links were one flat run of nine, which said nothing about what belongs
   with what. Grouping them is the point of the rework. The labels live inside
   .nav-scrollable, which is display:none while the rail is collapsed, so they
   need no collapse handling of their own — the 15px rail is unaffected. */
.nav-group[b-bur28k9911] {
    display: flex;
    flex-direction: column;
}

/* Was .nav-item:first-of-type / :last-of-type — those match per parent, so once
   the items were nested every group got the full 1rem cap. Spacing belongs to
   the group now. */
.nav-group:first-of-type[b-bur28k9911] { padding-top: 0.75rem; }
.nav-group:last-of-type[b-bur28k9911]  { padding-bottom: 1rem; }
.nav-group + .nav-group[b-bur28k9911]  { margin-top: 0.35rem; }

.nav-group__label[b-bur28k9911] {
    padding: 0.5rem 1rem 0.3rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--c-text-3, rgba(255, 255, 255, 0.34));
    white-space: nowrap;
    overflow: hidden;
}

/* Debug is a build-time diagnostic, not one of the app's own sections — a rule
   separates it instead of giving it a fourth heading. */
.nav-group--utility[b-bur28k9911] {
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-item[b-bur28k9911]  .nav-link {
    color: var(--c-text-2, rgba(255,255,255,0.52));
    background: none;
    border: none;
    border-radius: var(--r-md, 12px);
    /* Padding + no-underline used to come from Bootstrap's .nav-link (removed). */
    padding: 0.5rem 1rem;
    text-decoration: none;
    height: 2.75rem;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 2.75rem;
    width: 100%;
    transition: background var(--dur-fast, 150ms), color var(--dur-fast, 150ms);
}

.nav-icon[b-bur28k9911] {
    flex-shrink: 0;
    opacity: 0.60;
    transition: opacity var(--dur-fast, 150ms);
}

.nav-item[b-bur28k9911]  a:hover .nav-icon,
.nav-item[b-bur28k9911]  a.active .nav-icon {
    opacity: 1;
}

/* Static — was previously re-mixed from --bass-intensity via color-mix()/calc()
   on `background`/`box-shadow` every bass tick (PERFORMANCE_AUDIT_2026-06-08.md
   F1/F2: those properties force a repaint, unlike the opacity-only overlays
   used elsewhere for the bass glow). Kept flat to match that fix. */
.nav-item[b-bur28k9911]  a.active {
    background: linear-gradient(90deg,
        rgba(255, 85, 0, 0.10) 0%,
        rgba(255, 85, 0, 0.03) 100%);
    color: var(--c-text, rgba(255,255,255,0.9));
    box-shadow: inset 3px 0 0 var(--c-accent, #ff5500);
}

.nav-item[b-bur28k9911]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--c-text, rgba(255,255,255,0.90));
}

.nav-scrollable[b-bur28k9911] { display: none; }

.navbar-toggler:checked ~ .nav-scrollable[b-bur28k9911] {
    display: flex;
    flex-direction: column;
}

/* ── Desktop sidebar toggle button ────────────────────────── */

.nav-pin-btn[b-bur28k9911] { display: none; }

@media (min-width: 641px) {
    .nav-pin-btn[b-bur28k9911] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0.6rem;
        right: 0.5rem;
        width: 28px;
        height: 28px;
        background: none;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 50%;
        color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        font-size: 1.1rem;
        line-height: 1;
        z-index: 10;
        transition: color 180ms, background 180ms;
    }

    .nav-pin-btn:hover[b-bur28k9911] {
        color: white;
        background: rgba(255, 255, 255, 0.10);
    }

    .nav-pin-btn svg[b-bur28k9911] { transition: transform 200ms, color 200ms; }

    .sidebar.sidebar-pinned .nav-pin-btn svg[b-bur28k9911] {
        transform: rotate(-45deg);
        color: var(--c-accent, #ff5500);
    }

    .sidebar:not(:hover):not(.sidebar-pinned) .nav-pin-btn[b-bur28k9911] {
        opacity: 0;
        pointer-events: none;
    }

    .nav-pin-btn .close-icon[b-bur28k9911] { display: none; }
}

@media (max-width: 640px) {
    .nav-pin-btn .pin-icon[b-bur28k9911] { display: none; }

    .nav-pin-btn .close-icon[b-bur28k9911] {
        display: block;
        color: rgba(255, 255, 255, 0.8);
    }

    .sidebar.sidebar-pinned .nav-pin-btn svg[b-bur28k9911] {
        transform: none;
        color: inherit;
    }
}

@media (min-width: 641px) {
    .navbar-toggler[b-bur28k9911] { display: none; }

    .nav-scrollable[b-bur28k9911] {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        flex: 1 1 auto;
        min-height: 0;
    }

    .account-section[b-bur28k9911] { flex: 0 0 auto; }

    /* Collapse the wordmark with the sidebar — only the "N" mark stays
       visible in the 15px strip, matching the nav-link text behaviour. */
    .sidebar:not(:hover):not(.sidebar-pinned) .nav-brand__word[b-bur28k9911] {
        max-width: 0;
        opacity: 0;
    }
}

.navbar-toggler-m[b-bur28k9911] { display: none; }

@media (max-width: 640px) {
    .navbar-toggler[b-bur28k9911] { display: none; }

    /* Brand mark sits at the top of the mobile drawer — only visible when
       the hamburger is open (sidebar height expands to 100dvh). */
    .nav-brand[b-bur28k9911] {
        padding-top: calc(14px + env(safe-area-inset-top, 0px));
    }

    .navbar-toggler-m:checked ~ .nav-pin-btn[b-bur28k9911] {
        display: flex;
        position: absolute;
        top: calc(0.6rem + env(safe-area-inset-top));
        right: 0.5rem;
        z-index: 251;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 50%;
        cursor: pointer;
    }

    .navbar-toggler-m:checked ~ .nav-scrollable[b-bur28k9911] {
        display: flex;
        flex-direction: column;
    }

    .navbar-toggler-m:checked ~ .account-section[b-bur28k9911] { display: block; }

    .nav-pin-btn[b-bur28k9911] { display: none; }
}
/* /Components/Layout/PlayerBar.razor.rz.scp.css */
/* ── Player bar container ──────────────────────────────────── */

.player-bar[b-d67c16bll3] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 72px;
    background: color-mix(in oklab, var(--c-surface, #16161c) 92%, transparent);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
}

/* ── Idle / no track ───────────────────────────────────────── */

.pb-idle[b-d67c16bll3] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--c-text-3, rgba(255,255,255,0.28));
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    user-select: none;
}

/* ── Left: track info ──────────────────────────────────────── */

.pb-track[b-d67c16bll3] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 210px;
    min-width: 0;
}

.pb-cover-wrap[b-d67c16bll3] {
    position: relative;
    flex-shrink: 0;
    border-radius: var(--r-sm, 8px);
    overflow: hidden;
    cursor: pointer;
}

.pb-cover[b-d67c16bll3] {
    width: 46px;
    height: 46px;
    border-radius: var(--r-sm, 8px);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--c-surface-2, #1c1c26);
    display: block;
}

/* Hover/focus reveal of the "view track details" affordance, matching the
   fullscreen icon used on grid TrackCard artwork. */
.pb-cover-details-overlay[b-d67c16bll3] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.52);
    color: #fff;
    opacity: 0;
    transition: opacity var(--dur-fast, 150ms);
    pointer-events: none;
}

.pb-cover-wrap:hover .pb-cover-details-overlay[b-d67c16bll3],
.pb-cover-wrap:focus-visible .pb-cover-details-overlay[b-d67c16bll3] { opacity: 1; }

.pb-meta[b-d67c16bll3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pb-title[b-d67c16bll3] {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--c-text, rgba(255,255,255,0.90));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-artist[b-d67c16bll3] {
    font-size: 0.66rem;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-link[b-d67c16bll3] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    transition: color 0.15s;
}

.pb-link:hover[b-d67c16bll3] {
    color: var(--c-accent, #ff5500) !important;
}

/* ── Center: controls + progress ──────────────────────────── */

.pb-center[b-d67c16bll3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.pb-controls[b-d67c16bll3] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pb-btn[b-d67c16bll3] {
    background: none;
    border: none;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color var(--dur-fast, 150ms), background var(--dur-fast, 150ms);
    flex-shrink: 0;
}

/* Transport toggles (shuffle) read as state, not as an action: when on they take
   the accent colour and keep a dot beneath, so the state survives the hover and
   focus styling the other buttons share. */
.pb-btn--toggle[b-d67c16bll3] {
    position: relative;
}

/* Only the repeat-one variant shows the numeral; it is always in the DOM because SVG
   <text> cannot live inside a Razor code block. */
.pb-repeat-one[b-d67c16bll3] { opacity: 0; }
.pb-btn--repeat-one .pb-repeat-one[b-d67c16bll3] { opacity: 1; }

.pb-btn--on[b-d67c16bll3] {
    color: var(--c-accent, #ff5500);
}

.pb-btn--on[b-d67c16bll3]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
}

.pb-btn:hover:not(:disabled)[b-d67c16bll3] {
    color: var(--c-text, rgba(255,255,255,0.90));
    background: rgba(255, 255, 255, 0.08);
}

.pb-btn:disabled[b-d67c16bll3] {
    opacity: 0.3;
    cursor: default;
}

.pb-btn--play[b-d67c16bll3] {
    color: #fff;
    background: var(--c-accent, #ff5500);
    padding: 7px;
    border-radius: 50%;
}

.pb-btn--play:hover[b-d67c16bll3] {
    background: color-mix(in oklab, var(--c-accent, #ff5500) 85%, white) !important;
    color: #fff !important;
}

/* ── Progress row ──────────────────────────────────────────── */

.pb-progress[b-d67c16bll3] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.pb-time[b-d67c16bll3] {
    font-size: 0.66rem;
    color: var(--c-text-3, rgba(255,255,255,0.28));
    white-space: nowrap;
    width: 36px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pb-slider-wrap[b-d67c16bll3] {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

/* ── Buffer halo (behind the slider) ───────────────────────── */

.pb-buffer-halo[b-d67c16bll3] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 3px;
    width: 0%;
    border-radius: 2px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(160, 80, 255, 0.35), rgba(200, 140, 255, 0.12));
    box-shadow: 0 0 6px 2px rgba(160, 80, 255, 0.18),
                0 0 2px 0px rgba(200, 140, 255, 0.35);
    transition: width 0.5s linear;
    z-index: 0;
}

.pb-slider[b-d67c16bll3] {
    width: 100%;
    height: 18px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    outline: none;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.pb-slider[b-d67c16bll3]::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: var(--r-full, 9999px);
    background: var(--track-bg, rgba(255,255,255,0.12));
}

.pb-slider[b-d67c16bll3]::-moz-range-track {
    height: 3px;
    border-radius: var(--r-full, 9999px);
    background: var(--track-bg, rgba(255,255,255,0.12));
    border: none;
}

.pb-slider[b-d67c16bll3]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    margin-top: -4.5px;
    transition: width  0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
                height 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.15s ease;
}

.pb-slider-wrap:hover .pb-slider[b-d67c16bll3]::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    box-shadow: 0 0 0 3px rgba(255, 85, 0, 0.22);
}

.pb-slider[b-d67c16bll3]::-moz-range-thumb {
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: none;
    transition: width  0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
                height 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.15s ease;
}

.pb-slider-wrap:hover .pb-slider[b-d67c16bll3]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    box-shadow: 0 0 0 3px rgba(255, 85, 0, 0.22);
}

/* ── Seek tooltip ──────────────────────────────────────────── */

.pb-seek-tip[b-d67c16bll3] {
    position: absolute;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    background: var(--c-surface-2, #1c1c26);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--c-text, rgba(255,255,255,0.90));
    font-size: 0.65rem;
    padding: 2px 7px;
    border-radius: var(--r-sm, 8px);
    white-space: nowrap;
    pointer-events: none;
    z-index: 4;
    font-variant-numeric: tabular-nums;
    /* Hidden by default and faded OUT slowly when seeking ends so the bubble
       never lingers on top of the UI (this is the disappear transition). */
    opacity: 0;
    transition: opacity 450ms ease;
}

/* Appears promptly while actively seeking. */
.pb-seek-tip--visible[b-d67c16bll3] {
    opacity: 1;
    transition: opacity 80ms ease;
}

/* ── Right: like + volume ──────────────────────────────────── */

.pb-right[b-d67c16bll3] {
    flex: 0 0 200px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.pb-like[b-d67c16bll3] {
    background: none;
    border: none;
    color: var(--c-text-3, rgba(255,255,255,0.28));
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    border-radius: 50%;
    transition: color var(--dur-fast, 150ms), background var(--dur-fast, 150ms);
    flex-shrink: 0;
}

.pb-like:hover[b-d67c16bll3] {
    color: var(--c-text, rgba(255,255,255,0.90));
    background: rgba(255, 255, 255, 0.06);
}

.pb-like--active[b-d67c16bll3] {
    color: #e84848;
}

.pb-like--active:hover[b-d67c16bll3] {
    color: #ff7070;
    background: rgba(232, 72, 72, 0.1);
}

/* ── Volume ────────────────────────────────────────────────── */

.pb-vol[b-d67c16bll3] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pb-vol-icon[b-d67c16bll3] {
    color: var(--c-text-2, rgba(255,255,255,0.52));
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.pb-vol-slider[b-d67c16bll3] {
    width: 80px;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 2px;
    cursor: pointer;
    outline: none;
}

.pb-vol-slider[b-d67c16bll3]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c-text-2, rgba(255,255,255,0.52));
    cursor: pointer;
}

.pb-vol-slider[b-d67c16bll3]::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c-text-2, rgba(255,255,255,0.52));
    cursor: pointer;
    border: none;
}

/* ── Queue toggle button ───────────────────────────────────── */

.pb-queue-btn[b-d67c16bll3] { color: var(--c-text-3, rgba(255,255,255,0.28)); }
.pb-queue-btn--active[b-d67c16bll3] { color: var(--c-accent, #ff5500) !important; background: rgba(255,85,0,0.1) !important; }

/* ── Queue panel ───────────────────────────────────────────── */

.queue-panel[b-d67c16bll3] {
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 320px;
    max-height: 400px;
    background: var(--c-surface, #16161c);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
    border-radius: var(--r-lg, 16px) var(--r-lg, 16px) 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.55);
}

.queue-panel__header[b-d67c16bll3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 8px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.queue-panel__title[b-d67c16bll3] {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text-3, rgba(255,255,255,0.28));
}

.queue-panel__count[b-d67c16bll3] {
    font-size: 0.6rem;
    color: var(--c-text-3, rgba(255,255,255,0.28));
    flex: 1;
}

.queue-panel__clear-btn[b-d67c16bll3] {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-sm, 8px);
    color: var(--c-text-2, rgba(255,255,255,0.52));
    font-size: 0.62rem;
    padding: 2px 8px;
    cursor: pointer;
    transition: color var(--dur-fast, 150ms), border-color var(--dur-fast, 150ms);
}

.queue-panel__clear-btn:hover[b-d67c16bll3] { color: #e05252; border-color: rgba(232, 72, 72, 0.5); }

.queue-panel__list[b-d67c16bll3] { overflow-y: auto; flex: 1; }

.queue-item[b-d67c16bll3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: background var(--dur-micro, 80ms);
}

.queue-item:hover[b-d67c16bll3] { background: rgba(255,255,255,0.04); }

.queue-item--active[b-d67c16bll3] {
    background: rgba(255, 85, 0, 0.08);
    border-left: 2px solid var(--c-accent, #ff5500);
}

.queue-item__num[b-d67c16bll3] {
    font-size: 0.62rem;
    color: var(--c-text-3, rgba(255,255,255,0.28));
    width: 18px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.queue-item--active .queue-item__num[b-d67c16bll3] { color: var(--c-accent, #ff5500); }

.queue-item__art[b-d67c16bll3] {
    width: 32px;
    height: 32px;
    border-radius: var(--r-xs, 4px);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--c-surface-2, #1c1c26);
}

.queue-item__meta[b-d67c16bll3] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.queue-item__title[b-d67c16bll3] {
    font-size: 0.76rem;
    color: var(--c-text, rgba(255,255,255,0.90));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.queue-item--active .queue-item__title[b-d67c16bll3] { color: #fff; }

.queue-item__artist[b-d67c16bll3] {
    font-size: 0.64rem;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.queue-item__reorder[b-d67c16bll3] {
    display: flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
}

.queue-item__move[b-d67c16bll3],
.queue-item__remove[b-d67c16bll3] {
    background: none;
    border: none;
    color: var(--c-text-3, rgba(255,255,255,0.28));
    cursor: pointer;
    padding: 3px;
    display: flex;
    align-items: center;
    border-radius: var(--r-xs, 4px);
    flex-shrink: 0;
    transition: color var(--dur-fast, 150ms);
}

.queue-item__move:hover[b-d67c16bll3] { color: var(--c-text-2, rgba(255,255,255,0.52)); }
.queue-item__move:disabled[b-d67c16bll3] { opacity: 0.25; cursor: default; }

.queue-item__remove:hover[b-d67c16bll3] { color: #e05252; }

/* ── EQ toggle button ──────────────────────────────────────── */

.pb-eq-btn[b-d67c16bll3] { color: var(--c-text-3, rgba(255,255,255,0.28)); }

.pb-eq-btn--active[b-d67c16bll3] {
    color: var(--c-accent, #ff5500) !important;
    background: rgba(255, 85, 0, 0.1) !important;
}

/* ── BPM detect button ──────────────────────────────────────────────────── */

.pb-bpm-btn[b-d67c16bll3] {
    color: var(--c-text-3, rgba(255,255,255,0.28));
    font-size: 0.62rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 28px;
}

.pb-bpm-btn--active[b-d67c16bll3] {
    color: var(--c-accent, #ff5500) !important;
    background: rgba(255, 85, 0, 0.1) !important;
}

.pb-bpm-value[b-d67c16bll3] {
    line-height: 1;
}

.pb-bpm-spinner[b-d67c16bll3] {
    width: 14px;
    height: 14px;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-top-color: var(--c-accent, #ff5500);
    border-radius: 50%;
    animation: pb-bpm-spin-b-d67c16bll3 0.7s linear infinite;
    display: block;
}

@keyframes pb-bpm-spin-b-d67c16bll3 { to { transform: rotate(360deg); } }

/* ── EQ panel ──────────────────────────────────────────────── */

.eq-panel[b-d67c16bll3] {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 178px;
    background: var(--c-surface, #16161c);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.eq-canvas[b-d67c16bll3] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.eq-header[b-d67c16bll3] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 16px 0;
    flex-shrink: 0;
}

.eq-title[b-d67c16bll3] {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text-3, rgba(255,255,255,0.28));
    user-select: none;
}

.eq-reset-btn[b-d67c16bll3] {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--r-sm, 8px);
    color: var(--c-text-2, rgba(255,255,255,0.52));
    font-size: 0.66rem;
    padding: 2px 8px;
    cursor: pointer;
    transition: color var(--dur-fast, 150ms), border-color var(--dur-fast, 150ms);
}

.eq-reset-btn:hover[b-d67c16bll3] { color: var(--c-text, rgba(255,255,255,0.90)); border-color: rgba(255,255,255,0.25); }

.eq-expand-btn[b-d67c16bll3] {
    background: none;
    border: none;
    color: var(--c-text-3, rgba(255,255,255,0.28));
    cursor: pointer;
    padding: 3px 5px;
    display: flex;
    align-items: center;
    border-radius: var(--r-xs, 4px);
    transition: color var(--dur-fast, 150ms), background var(--dur-fast, 150ms);
    margin-left: 2px;
}

.eq-expand-btn:hover[b-d67c16bll3] { color: var(--c-text, rgba(255,255,255,0.90)); background: rgba(255,255,255,0.06); }

/* ── EQ band columns ───────────────────────────────────────── */

.eq-bands[b-d67c16bll3] {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: stretch;
    padding: 4px 20px 6px;
    gap: 0;
    min-height: 0;
}

.eq-band[b-d67c16bll3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.eq-gain-label[b-d67c16bll3] {
    font-size: 0.58rem;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    font-variant-numeric: tabular-nums;
    min-height: 13px;
    line-height: 1;
    transition: color 0.12s;
    user-select: none;
}

.eq-gain-label--pos[b-d67c16bll3] { color: #ff7733; }
.eq-gain-label--neg[b-d67c16bll3] { color: #6699ff; }

.eq-slider-wrap[b-d67c16bll3] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
}

/* Rotated horizontal range input, not writing-mode: vertical-lr — WebKitGTK (this app's
   own window on Linux) doesn't orient <input type=range> via writing-mode at all, the
   track collapses to a near-zero box. rotate() is supported identically everywhere this
   app runs. See Eq.razor.css's eq-page__slider for the fuller explanation (same fix). */
input[type="range"].eq-slider[b-d67c16bll3] {
    width: 78px;
    height: 20px;
    transform: rotate(-90deg);
    cursor: pointer;
    accent-color: var(--c-accent, #ff5500);
    opacity: 0.85;
    transition: opacity 0.12s;
}

input[type="range"].eq-slider:hover[b-d67c16bll3] { opacity: 1; }

input[type="range"].eq-slider--pos[b-d67c16bll3] { accent-color: #ff7733; }
input[type="range"].eq-slider--neg[b-d67c16bll3] { accent-color: #6699ff; }

.eq-freq-label[b-d67c16bll3] {
    font-size: 0.55rem;
    color: var(--c-text-3, rgba(255,255,255,0.28));
    text-align: center;
    white-space: nowrap;
    user-select: none;
}

.eq-desc-label[b-d67c16bll3] {
    font-size: 0.47rem;
    color: rgba(255,255,255,0.14);
    text-align: center;
    white-space: nowrap;
    user-select: none;
    letter-spacing: 0.02em;
}

@media (max-width: 640px) {
    .player-bar[b-d67c16bll3] {
        height: 60px;
        padding: 0 10px;
        gap: 8px;
        bottom: calc(56px + env(safe-area-inset-bottom));
    }

    .pb-track[b-d67c16bll3] {
        flex: 1;
        min-width: 0;
    }

    .pb-cover[b-d67c16bll3] {
        width: 38px;
        height: 38px;
    }

    .pb-center[b-d67c16bll3] { flex: 0 0 auto; }
    .pb-controls[b-d67c16bll3] { gap: 2px; }

    /* Progress: thin scrubber pinned to the bottom edge of the bar.
       Removed from normal flow so it doesn't push the 60px bar taller. */
    .pb-progress[b-d67c16bll3] {
        display: flex;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        gap: 0;
        padding: 0;
        align-items: center;
    }
    .pb-time[b-d67c16bll3] { display: none; }
    .pb-slider-wrap[b-d67c16bll3] { flex: 1; height: 3px; }
    .pb-slider[b-d67c16bll3] { height: 3px; }
    .pb-buffer-halo[b-d67c16bll3] { height: 3px; }
    /* Always show the thumb on mobile (no hover state on touch) */
    .pb-slider[b-d67c16bll3]::-webkit-slider-thumb {
        width: 10px;
        height: 10px;
        margin-top: -3.5px;
    }
    .pb-slider[b-d67c16bll3]::-moz-range-thumb {
        width: 10px;
        height: 10px;
    }

    .pb-right[b-d67c16bll3] {
        flex: 0 0 auto;
        gap: 4px;
    }

    .pb-vol[b-d67c16bll3] { display: none; }

    .eq-freq-label[b-d67c16bll3] { font-size: 0.68rem; }
    .eq-desc-label[b-d67c16bll3] { font-size: 0.6rem; }
    .eq-gain-label[b-d67c16bll3] { font-size: 0.68rem; }
}
/* /Components/Layout/ToastHost.razor.rz.scp.css */
/* Toast stack — centered horizontally, sits above the player bar */

.toast-host[b-kvjoxkc12h] {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.toast-item[b-kvjoxkc12h] {
    pointer-events: all;
    background: var(--c-surface-2, #1c1c26);
    border: 1px solid var(--c-border-2, rgba(255,255,255,0.13));
    border-radius: var(--r-md, 12px);
    padding: var(--sp-2, 8px) var(--sp-3, 14px);
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    white-space: nowrap;
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.60));
    animation: toast-in-b-kvjoxkc12h 0.18s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}

@keyframes toast-in-b-kvjoxkc12h {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.toast-icon[b-kvjoxkc12h] {
    font-size: 0.85rem;
    flex-shrink: 0;
}

.toast-msg[b-kvjoxkc12h] {
    font-size: 0.78rem;
    color: var(--c-text, rgba(255,255,255,0.90));
}

.toast-btn[b-kvjoxkc12h] {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-sm, 8px);
    color: var(--c-text-2, rgba(255,255,255,0.52));
    font-size: 0.72rem;
    padding: 3px 8px;
    cursor: pointer;
    transition: border-color var(--dur-fast, 150ms), color var(--dur-fast, 150ms);
    flex-shrink: 0;
}

.toast-btn:hover[b-kvjoxkc12h] {
    border-color: rgba(255, 255, 255, 0.30);
    color: var(--c-text, rgba(255,255,255,0.90));
}

.toast-btn--accept[b-kvjoxkc12h] {
    border-color: var(--c-accent, #ff5500);
    color: var(--c-accent, #ff5500);
}

.toast-btn--accept:hover[b-kvjoxkc12h] {
    border-color: color-mix(in oklab, var(--c-accent, #ff5500) 80%, white);
    color: color-mix(in oklab, var(--c-accent, #ff5500) 80%, white);
}

@media (max-width: 640px) {
    .toast-host[b-kvjoxkc12h] {
        /* Sit above PlayerBar (60px) + BottomNav (56px) */
        bottom: calc(60px + 56px + env(safe-area-inset-bottom) + 8px);
    }

    .toast-item[b-kvjoxkc12h] {
        max-width: calc(100vw - 24px);
        white-space: normal;
    }
}
/* /Components/Layout/TopSearchBar.razor.rz.scp.css */
/* ── Floating top bar (Spotify-style island) ─────────────────────
   The outer strip is transparent; each element (home, hamburger,
   search) is its own floating pill with blur + bass-reactive glow. */

.top-search-bar[b-v4iy0drac5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    padding: 8px 16px;
    background: transparent;
    position: sticky;
    top: 0;
    z-index: 50;
    flex-shrink: 0;
    pointer-events: none; /* only the floating pills catch events */
}

.top-search-bar > *[b-v4iy0drac5] {
    pointer-events: auto;
}

/* ── Floating pills: home button + hamburger ───────────────────── */

.top-home-btn[b-v4iy0drac5],
.top-hamburger[b-v4iy0drac5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(20, 20, 24, 0.72);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    border-radius: 999px;
    position: relative;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: background 140ms, color 140ms, transform 140ms;
}

/* Brand logo — replaces the house icon on mobile so the top bar carries
   the Nuages logo (the desktop sidebar shows it in its own brand header).
   Hidden on desktop, shown on mobile via the media query below. */
.top-brand-logo[b-v4iy0drac5] {
    display: none;
    width: 22px;
    height: 22px;
    border-radius: var(--r-xs, 4px);
    object-fit: cover;
    flex-shrink: 0;
}

/* Bass glow as an opacity-faded overlay (fixed blur, composited) instead of an
   animated box-shadow that repaints the blurred pill every frame. */
.top-home-btn[b-v4iy0drac5]::after,
.top-hamburger[b-v4iy0drac5]::after {
    /* --bass-hue/--bass-intensity are registered non-inheriting (see app.css), and a
       pseudo-element does NOT inherit a non-inherited property from its originating
       element — it would silently fall back to the initial value (0) and never light
       up. Pulling them in explicitly is what keeps the glow alive; it costs nothing,
       because only this pseudo-element opts in, not the whole subtree. */
    --bass-hue: inherit;
    --bass-intensity: inherit;
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 22px hsla(var(--bass-hue, 240), 75%, 55%, 0.7);
    opacity: var(--bass-intensity, 0);
    will-change: opacity;
    transition: opacity 90ms linear;
}

/* Hamburger is mobile-only */
.top-hamburger[b-v4iy0drac5] {
    display: none;
}

.top-home-btn:hover[b-v4iy0drac5],
.top-hamburger:hover[b-v4iy0drac5] {
    background: rgba(40, 40, 48, 0.85);
    color: #fff;
    transform: translateY(-1px);
}

.top-home-btn:active[b-v4iy0drac5],
.top-hamburger:active[b-v4iy0drac5] {
    transform: translateY(0);
}

/* ── Floating search pill ──────────────────────────────────────── */

.top-search-wrap[b-v4iy0drac5] {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: 520px;
    height: 40px;
    background: rgba(20, 20, 24, 0.72);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    display: flex;
    align-items: center;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color 150ms;
}

/* Bass glow overlay (opacity-faded, composited) — see .top-home-btn::after. */
.top-search-wrap[b-v4iy0drac5]::after {
    /* --bass-hue/--bass-intensity are registered non-inheriting (see app.css), and a
       pseudo-element does NOT inherit a non-inherited property from its originating
       element — it would silently fall back to the initial value (0) and never light
       up. Pulling them in explicitly is what keeps the glow alive; it costs nothing,
       because only this pseudo-element opts in, not the whole subtree. */
    --bass-hue: inherit;
    --bass-intensity: inherit;
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 26px hsla(var(--bass-hue, 240), 75%, 55%, 0.7);
    opacity: var(--bass-intensity, 0);
    will-change: opacity;
    transition: opacity 90ms linear;
}

.top-search-wrap:focus-within[b-v4iy0drac5] {
    border-color: rgba(255, 255, 255, 0.22);
}

.top-search-icon[b-v4iy0drac5] {
    position: absolute;
    left: 14px;
    top: 50%;
    /* display:block + flex centering prevents the inline-SVG baseline from
       shifting a sub-pixel to the left when the input's text content changes
       (the "icon overflows out" jitter on text entry). */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
    z-index: 1;
}

.top-search-input[b-v4iy0drac5] {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    color: var(--c-text, rgba(255,255,255,0.90));
    font-size: var(--fs-md, 0.92rem);
    /* Left padding (38px) clears the 14px icon + its 14px width + 10px gap.
       text-overflow: ellipsis keeps long queries from scrolling under the icon
       and pushing the layout. */
    padding: 0 var(--sp-4, 16px) 0 38px;
    outline: none;
    font-family: inherit;
    text-overflow: ellipsis;
}

.top-search-input[b-v4iy0drac5]::placeholder {
    color: rgba(255, 255, 255, 0.38);
}

.top-search-input[b-v4iy0drac5]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.top-search-hint[b-v4iy0drac5] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    pointer-events: none;
    white-space: nowrap;
}

/* ── Suggestions dropdown ──────────────────────────────────────── */

.top-suggestions[b-v4iy0drac5] {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + var(--sp-2, 8px));
    background: color-mix(in oklab, var(--c-surface-2, #1c1c26) 97%, transparent);
    backdrop-filter: var(--backdrop-sm, blur(14px) saturate(140%));
    -webkit-backdrop-filter: var(--backdrop-sm, blur(14px) saturate(140%));
    border: 1px solid var(--c-border, rgba(255,255,255,0.07));
    border-radius: var(--r-lg, 18px);
    overflow: hidden;
    z-index: var(--z-overlay, 1100);
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.60));
    max-height: 360px;
    overflow-y: auto;
}

.suggestion-item[b-v4iy0drac5] {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 10px);
    width: 100%;
    padding: var(--sp-2, 8px) var(--sp-3, 12px);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: inherit;
    transition: background var(--dur-micro, 90ms);
}

.suggestion-item:hover[b-v4iy0drac5],
.suggestion-item:active[b-v4iy0drac5] {
    background: rgba(255, 255, 255, 0.05);
}

.suggestion-artwork[b-v4iy0drac5] {
    width: 36px;
    height: 36px;
    border-radius: var(--r-xs, 4px);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--c-surface-3, #24242e);
}

.suggestion-text[b-v4iy0drac5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.suggestion-title[b-v4iy0drac5] {
    font-size: var(--fs-sm, 0.82rem);
    color: var(--c-text, rgba(255,255,255,0.90));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-artist[b-v4iy0drac5] {
    font-size: var(--fs-xs, 0.72rem);
    color: var(--c-text-3, rgba(255,255,255,0.28));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Mobile adjustments ────────────────────────────────────────── */

@media (max-width: 640px) {
    .top-search-bar[b-v4iy0drac5] {
        padding: 8px 12px;
        gap: 8px;
        /* Stick below the status-bar-safe-area strip, not behind it */
        top: env(safe-area-inset-top, 24px);
        /* Opaque background so scrolling content doesn't bleed under the bar */
        background: var(--c-bg, #0d0d12);
    }

    .top-hamburger[b-v4iy0drac5] {
        display: flex;
    }

    /* Swap the house icon for the Nuages brand logo on mobile — the sidebar
       (which carries the brand on desktop) is hidden, so the top bar takes
       over as the brand surface. */
    .top-home-icon[b-v4iy0drac5] { display: none; }
    .top-brand-logo[b-v4iy0drac5] { display: block; }

    .top-search-wrap[b-v4iy0drac5] {
        max-width: none;
    }
}
/* /Components/Pages/Connect.razor.rz.scp.css */
.username[b-c2vk7yblfb] {
    font-size: var(--fs-lg, 1.1rem);
    font-weight: var(--fw-bold, 700);
    color: var(--c-text, rgba(255,255,255,0.90));
}
/* /Components/Pages/Debug.razor.rz.scp.css */
.debug-page[b-w5zhd2dl6t] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--c-bg, #0d0d12);
    font-family: 'Consolas', 'Menlo', 'Monaco', monospace;
}

/* ── Toolbar ─────────────────────────────────────────────────── */

.debug-toolbar[b-w5zhd2dl6t] {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    padding: var(--sp-2, 8px) var(--sp-3, 12px);
    background: var(--c-surface, #16161c);
    border-bottom: 1px solid var(--c-border, rgba(255,255,255,0.07));
    flex-shrink: 0;
    flex-wrap: wrap;
}

.debug-title[b-w5zhd2dl6t] {
    font-size: var(--fs-xs, 0.72rem);
    font-weight: var(--fw-bold, 700);
    color: var(--c-text-3, rgba(255,255,255,0.28));
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: var(--sp-1, 4px);
}

.debug-source-group[b-w5zhd2dl6t],
.debug-level-group[b-w5zhd2dl6t] {
    display: flex;
    gap: var(--sp-1, 4px);
}

.debug-toggle[b-w5zhd2dl6t] {
    padding: 3px 9px;
    border: 1px solid var(--c-border-2, rgba(255,255,255,0.13));
    border-radius: var(--r-xs, 4px);
    background: none;
    color: var(--c-text-3, rgba(255,255,255,0.28));
    font-size: var(--fs-xs, 0.72rem);
    font-family: inherit;
    cursor: pointer;
    transition: color var(--dur-fast, 150ms), border-color var(--dur-fast, 150ms);
}

.debug-toggle--on[b-w5zhd2dl6t] {
    color: var(--c-text-2, rgba(255,255,255,0.52));
    border-color: rgba(255,255,255,0.28);
}

.debug-source-group .debug-toggle--on[b-w5zhd2dl6t] { border-color: #4a9eff; color: #4a9eff; }

.debug-level-group .debug-toggle:nth-child(1).debug-toggle--on[b-w5zhd2dl6t] { border-color: rgba(255,255,255,0.28); color: var(--c-text-2, rgba(255,255,255,0.52)); }
.debug-level-group .debug-toggle:nth-child(2).debug-toggle--on[b-w5zhd2dl6t] { border-color: #e6a817; color: #e6a817; }
.debug-level-group .debug-toggle:nth-child(3).debug-toggle--on[b-w5zhd2dl6t] { border-color: #e05252; color: #e05252; }

.debug-clear-btn[b-w5zhd2dl6t] {
    margin-left: auto;
    padding: 3px 10px;
    border: 1px solid var(--c-border-2, rgba(255,255,255,0.13));
    border-radius: var(--r-xs, 4px);
    background: none;
    color: var(--c-text-3, rgba(255,255,255,0.28));
    font-size: var(--fs-xs, 0.72rem);
    font-family: inherit;
    cursor: pointer;
    transition: color var(--dur-fast, 150ms), border-color var(--dur-fast, 150ms);
}

.debug-clear-btn:hover[b-w5zhd2dl6t] { border-color: #e05252; color: #e05252; }

/* ── Console area ─────────────────────────────────────────────── */

.debug-console[b-w5zhd2dl6t] {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

.debug-entry[b-w5zhd2dl6t] {
    display: flex;
    gap: 6px;
    padding: 2px var(--sp-3, 12px);
    font-size: var(--fs-xs, 0.72rem);
    line-height: var(--lh-normal, 1.5);
    border-bottom: 1px solid var(--c-border, rgba(255,255,255,0.05));
    word-break: break-all;
}

.debug-entry:hover[b-w5zhd2dl6t] { background: var(--c-surface, #16161c); }

.debug-time[b-w5zhd2dl6t]   { color: var(--c-text-3, rgba(255,255,255,0.28)); flex-shrink: 0; }
.debug-source[b-w5zhd2dl6t] { color: #4a9eff; flex-shrink: 0; }
.debug-level[b-w5zhd2dl6t]  { flex-shrink: 0; }
.debug-msg[b-w5zhd2dl6t]    { color: var(--c-text-2, rgba(255,255,255,0.52)); flex: 1; white-space: pre-wrap; }

.debug-entry--verbose .debug-level[b-w5zhd2dl6t] { color: var(--c-text-3, rgba(255,255,255,0.28)); }
.debug-entry--warning .debug-level[b-w5zhd2dl6t] { color: #e6a817; }
.debug-entry--warning .debug-msg[b-w5zhd2dl6t]   { color: #e6a817; }
.debug-entry--error   .debug-level[b-w5zhd2dl6t] { color: #e05252; }
.debug-entry--error   .debug-msg[b-w5zhd2dl6t]   { color: #e05252; }

.debug-empty[b-w5zhd2dl6t] {
    padding: var(--sp-5, 24px);
    color: var(--c-text-3, rgba(255,255,255,0.28));
    font-size: var(--fs-sm, 0.82rem);
    text-align: center;
}

/* /Components/Pages/Downloaded.razor.rz.scp.css */

.downloaded-summary[b-cxhmiv4s7i] {
    font-size: 0.7rem;
    color: var(--c-text-3, rgba(255,255,255,0.28));
    margin: 0 0 8px 2px;
}

.downloaded-offline-badge[b-cxhmiv4s7i] {
    font-size: 0.54rem;
    font-weight: 700;
    color: var(--c-go, #2cba6e);
    background: rgba(44, 186, 110, 0.10);
    border: 1px solid rgba(44, 186, 110, 0.28);
    border-radius: var(--r-xs, 4px);
    padding: 1px 4px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    flex-shrink: 0;
    line-height: 1.5;
    user-select: none;
}

/* ── Playlist filter chips ─────────────────────────────────────────────── */
.dl-filter-row[b-cxhmiv4s7i] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px 2px;
}

.dl-filter-chip[b-cxhmiv4s7i] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--c-text-2, rgba(255,255,255,0.6));
    background: var(--c-surface-2, rgba(255,255,255,0.05));
    border: 1px solid var(--c-border, rgba(255,255,255,0.08));
    border-radius: var(--r-full, 999px);
    padding: 5px 12px;
    cursor: pointer;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dl-filter-chip:hover[b-cxhmiv4s7i] {
    color: var(--c-text, rgba(255,255,255,0.9));
    background: var(--c-surface-3, rgba(255,255,255,0.08));
}

.dl-filter-chip--active[b-cxhmiv4s7i] {
    color: #fff;
    background: color-mix(in srgb, var(--c-accent, #7c5cff) 78%, transparent);
    border-color: color-mix(in srgb, var(--c-accent, #7c5cff) 60%, transparent);
}

.dl-filter-chip--active:hover[b-cxhmiv4s7i] {
    background: var(--c-accent, #7c5cff);
}
/* /Components/Pages/Eq.razor.rz.scp.css */
/* ── Page layout ─────────────────────────────────────────────── */

.eq-page[b-ia7hkm8rmy] {
    padding: 0 0 120px;
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
}

/* ── Visualizer ──────────────────────────────────────────────── */

.eq-page__viz-wrap[b-ia7hkm8rmy] {
    position: relative;
    background: var(--c-bg, #0d0d12);
    height: 220px;
    overflow: hidden;
    flex-shrink: 0;
    border-bottom: 1px solid var(--c-border, rgba(255,255,255,0.07));
}

.eq-page__canvas[b-ia7hkm8rmy] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.eq-page__noclip[b-ia7hkm8rmy] {
    position: absolute;
    top: 8px;
    right: 14px;
    font-size: 0.62rem;
    color: var(--c-go, #2cba6e);
    background: rgba(44, 186, 110, 0.10);
    border: 1px solid rgba(44, 186, 110, 0.28);
    border-radius: var(--r-sm, 8px);
    padding: 2px 8px;
    pointer-events: none;
    user-select: none;
}

.eq-page__noclip--clip[b-ia7hkm8rmy] {
    color: #f55;
    background: rgba(80, 0, 0, 0.30);
    border-color: rgba(200, 0, 0, 0.40);
}

/* ── Section wrapper ─────────────────────────────────────────── */

.eq-page__section[b-ia7hkm8rmy] {
    padding: 16px 24px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.eq-page__section-label[b-ia7hkm8rmy] {
    display: block;
    font-size: var(--fs-xxs, 0.63rem);
    font-weight: var(--fw-bold, 700);
    letter-spacing: 0.12em;
    color: var(--c-text-3, rgba(255,255,255,0.28));
    margin-bottom: var(--sp-3, 14px);
    user-select: none;
    text-transform: uppercase;
}

/* ── EQ Bands ────────────────────────────────────────────────── */

.eq-page__bands[b-ia7hkm8rmy] {
    /* Bands are absolutely positioned at their log-frequency X (set inline via
       BandLeftPercent) so each slider lines up with the band dot the visualizer draws
       on the same 20Hz–22kHz log scale. The negative horizontal margin cancels the
       section padding so this band strip spans the full width of the canvas above it. */
    position: relative;
    height: 188px;
    margin: 0 -24px;
}

.eq-page__band[b-ia7hkm8rmy] {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.eq-page__gain-label[b-ia7hkm8rmy] {
    font-size: 0.64rem;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    font-variant-numeric: tabular-nums;
    min-height: 14px;
    line-height: 1;
    transition: color 0.12s;
    user-select: none;
}

.eq-page__gain-label--pos[b-ia7hkm8rmy] { color: #ff7733; }
.eq-page__gain-label--neg[b-ia7hkm8rmy] { color: #6699ff; }

.eq-page__slider-wrap[b-ia7hkm8rmy] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    width: 100%;
    overflow: hidden;
}

/* Vertical slider via rotated horizontal range input — writing-mode: vertical-lr (the
   previous approach) silently fails to orient <input type=range> on WebKitGTK (the
   engine hosting this app's own window on Linux): the track collapses to a near-zero
   box instead of rendering vertically. rotate(-90deg) on a normal horizontal slider is
   supported identically by every engine (Chromium/WebView2, WebKit, Firefox), so it
   works everywhere this app runs. The wrapper centers the PRE-rotation layout box via
   flexbox, which lands it correctly post-rotation with no manual offset math needed.
   rotate(-90deg), not 90deg: makes "right"/max-value point up, matching the visual
   up-equals-more-gain convention EQ sliders use. */
input[type="range"].eq-page__slider[b-ia7hkm8rmy] {
    width: 120px;
    height: 18px;
    transform: rotate(-90deg);
    cursor: pointer;
    outline: none;
    accent-color: rgba(255, 255, 255, 0.42);
}

input[type="range"].eq-page__slider--pos[b-ia7hkm8rmy] { accent-color: #ff7733; }
input[type="range"].eq-page__slider--neg[b-ia7hkm8rmy] { accent-color: #6699ff; }

.eq-page__freq-label[b-ia7hkm8rmy] {
    font-size: 0.58rem;
    color: var(--c-text-3, rgba(255,255,255,0.28));
    text-align: center;
    white-space: nowrap;
    user-select: none;
}

/* Hidden in the log-positioned layout — the long band names would overflow the narrow
   columns (and re-introduce horizontal overflow at the edges). The name still shows in
   the slider's title tooltip. */
.eq-page__desc-label[b-ia7hkm8rmy] { display: none; }

/* ── Advanced: Filters & Gain Staging ───────────────────────── */

.eq-page__advanced[b-ia7hkm8rmy] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.eq-page__adv-row[b-ia7hkm8rmy] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.eq-page__adv-row--toggle[b-ia7hkm8rmy] { gap: 12px; }

.eq-page__adv-meta[b-ia7hkm8rmy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 90px;
    flex-shrink: 0;
}

.eq-page__adv-label[b-ia7hkm8rmy] {
    font-size: 0.72rem;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    user-select: none;
}

.eq-page__adv-desc[b-ia7hkm8rmy] {
    font-size: 0.56rem;
    color: var(--c-text-3, rgba(255,255,255,0.28));
    user-select: none;
    line-height: 1.2;
}

.eq-page__adv-slider[b-ia7hkm8rmy] {
    flex: 1;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.10);
    cursor: pointer;
    outline: none;
}

.eq-page__adv-slider[b-ia7hkm8rmy]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--c-accent, #ff5500);
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.eq-page__adv-slider[b-ia7hkm8rmy]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 4px rgba(255, 85, 0, 0.20);
}

.eq-page__adv-slider[b-ia7hkm8rmy]::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--c-accent, #ff5500);
    border: none;
    cursor: pointer;
}

.eq-page__adv-val[b-ia7hkm8rmy] {
    font-size: 0.68rem;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    width: 72px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.eq-page__adv-val--hint[b-ia7hkm8rmy] {
    color: var(--c-text-3, rgba(255,255,255,0.28));
    font-size: 0.62rem;
}

.eq-page__toggle[b-ia7hkm8rmy] {
    background: var(--c-surface, #16161c);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--r-sm, 8px);
    color: var(--c-text-2, rgba(255,255,255,0.52));
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--dur-fast, 150ms), color var(--dur-fast, 150ms), border-color var(--dur-fast, 150ms);
    min-width: 44px;
    text-transform: uppercase;
}

.eq-page__toggle--on[b-ia7hkm8rmy] {
    background: rgba(255, 85, 0, 0.12);
    border-color: rgba(255, 85, 0, 0.40);
    color: var(--c-accent, #ff5500);
}

.eq-page__adv-footer[b-ia7hkm8rmy] { padding-top: 4px; }

.eq-page__reset-all-btn[b-ia7hkm8rmy] {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--r-sm, 8px);
    color: var(--c-text-2, rgba(255,255,255,0.52));
    font-size: 0.68rem;
    padding: 5px 14px;
    cursor: pointer;
    transition: color var(--dur-fast, 150ms), border-color var(--dur-fast, 150ms);
}

.eq-page__reset-all-btn:hover[b-ia7hkm8rmy] {
    color: var(--c-text, rgba(255,255,255,0.90));
    border-color: rgba(255, 255, 255, 0.25);
}

/* ── Presets ─────────────────────────────────────────────────── */

.eq-page__presets[b-ia7hkm8rmy] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.eq-page__preset-btn[b-ia7hkm8rmy] {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-xl, 20px);
    color: var(--c-text-2, rgba(255,255,255,0.52));
    font-size: 0.7rem;
    padding: 4px 14px;
    cursor: pointer;
    transition: color var(--dur-fast, 150ms), border-color var(--dur-fast, 150ms), background var(--dur-fast, 150ms);
    white-space: nowrap;
}

.eq-page__preset-btn:hover[b-ia7hkm8rmy] {
    color: var(--c-text, rgba(255,255,255,0.90));
    border-color: rgba(255, 255, 255, 0.20);
}

.eq-page__preset-btn--active[b-ia7hkm8rmy] {
    color: var(--c-accent, #ff5500);
    border-color: rgba(255, 85, 0, 0.45);
    background: rgba(255, 85, 0, 0.07);
}

.eq-page__custom-chip[b-ia7hkm8rmy] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-xl, 20px);
    color: var(--c-text-2, rgba(255,255,255,0.52));
    font-size: 0.7rem;
    padding: 4px 8px 4px 14px;
    cursor: pointer;
    transition: color var(--dur-fast, 150ms), border-color var(--dur-fast, 150ms);
    user-select: none;
}

.eq-page__custom-chip:hover[b-ia7hkm8rmy] {
    color: var(--c-text, rgba(255,255,255,0.90));
    border-color: rgba(255, 255, 255, 0.20);
}

.eq-page__custom-chip--active[b-ia7hkm8rmy] {
    color: var(--c-accent, #ff5500);
    border-color: rgba(255, 85, 0, 0.45);
    background: rgba(255, 85, 0, 0.07);
}

.eq-page__custom-chip-del[b-ia7hkm8rmy] {
    background: none;
    border: none;
    color: var(--c-text-3, rgba(255,255,255,0.28));
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    transition: color var(--dur-fast, 150ms);
    flex-shrink: 0;
}

.eq-page__custom-chip-del:hover[b-ia7hkm8rmy] { color: #e05252; }

.eq-page__save-row[b-ia7hkm8rmy] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.eq-page__preset-name-input[b-ia7hkm8rmy] {
    background: var(--c-surface, #16161c);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--r-sm, 8px);
    color: var(--c-text, rgba(255,255,255,0.90));
    font-size: 0.7rem;
    padding: 5px 10px;
    outline: none;
    width: 160px;
    transition: border-color var(--dur-fast, 150ms);
}

.eq-page__preset-name-input:focus[b-ia7hkm8rmy] { border-color: rgba(255, 255, 255, 0.22); }
.eq-page__preset-name-input[b-ia7hkm8rmy]::placeholder { color: var(--c-text-3, rgba(255,255,255,0.28)); }

.eq-page__save-btn[b-ia7hkm8rmy] {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--r-sm, 8px);
    color: var(--c-text-2, rgba(255,255,255,0.52));
    font-size: 0.68rem;
    padding: 5px 12px;
    cursor: pointer;
    transition: color var(--dur-fast, 150ms), border-color var(--dur-fast, 150ms);
    white-space: nowrap;
}

.eq-page__save-btn:not(:disabled):hover[b-ia7hkm8rmy] {
    color: var(--c-text, rgba(255,255,255,0.90));
    border-color: rgba(255, 255, 255, 0.22);
}

.eq-page__save-btn:disabled[b-ia7hkm8rmy] {
    opacity: 0.35;
    cursor: default;
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 640px) {
    .eq-page__section[b-ia7hkm8rmy] { padding: var(--sp-3, 12px) var(--sp-3, 12px) var(--sp-4, 16px); }

    /* Match the band strip's full-bleed to the smaller mobile section padding, and tighten
       band columns so the log-spaced sliders don't overlap on a narrow screen. */
    .eq-page__bands[b-ia7hkm8rmy] { margin: 0 -12px; height: 162px; }
    .eq-page__band[b-ia7hkm8rmy]  { width: 32px; }

    /* height is now the wrapper's actual (post-rotation) vertical extent; the slider's
       own "width" is its pre-rotation length, which becomes that same vertical extent. */
    input[type="range"].eq-page__slider[b-ia7hkm8rmy] { width: 100px; }
    .eq-page__slider-wrap[b-ia7hkm8rmy] { height: 100px; }
}
/* /Components/Pages/History.razor.rz.scp.css */
/* /Components/Pages/Home.razor.rz.scp.css */
/* Home is the only feed page whose content starts flush at the top (carousels),
   so it takes a little more breathing room than the shared .feed-page rule gives.
   Everything else about the frame comes from app.css. */
.feed-page[b-q4fxxdyi72] {
    padding-top: 1rem;
}

@media (max-width: 640px) {
    /* Re-inset horizontally so the carousels sit off both edges rather than flush. */
    .feed-page[b-q4fxxdyi72] {
        padding: 0.25rem 0.75rem 80px;
    }
}
/* /Components/Pages/Library.razor.rz.scp.css */

/* ── Playlist explorer ───────────────────────────────── */

.playlist-explorer[b-owdttoan28] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-bottom: 16px;
}

.playlist-explorer__back[b-owdttoan28] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    font-size: 0.78rem;
    cursor: pointer;
    padding: 10px 2px 10px 0;
    transition: color var(--dur-fast, 150ms);
}

.playlist-explorer__back:hover[b-owdttoan28] { color: var(--c-text, rgba(255,255,255,0.90)); }

.playlist-explorer__hero[b-owdttoan28] {
    display: flex;
    gap: 14px;
    padding: 4px 0 16px;
    align-items: flex-start;
}

.playlist-explorer__cover-wrap[b-owdttoan28] {
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    border-radius: var(--r-md, 12px);
    overflow: hidden;
    background: var(--c-surface-2, #1c1c26);
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.60));
}

.playlist-explorer__cover[b-owdttoan28] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.playlist-explorer__info[b-owdttoan28] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 2px;
}

.playlist-explorer__owner[b-owdttoan28] {
    font-size: 0.7rem;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-explorer__title[b-owdttoan28] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-text, rgba(255,255,255,0.90));
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-explorer__meta[b-owdttoan28] {
    font-size: 0.72rem;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    margin: 0 0 10px;
}

.playlist-explorer__actions[b-owdttoan28] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.playlist-explorer__play-btn[b-owdttoan28] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--c-accent, #ff5500);
    border: none;
    border-radius: var(--r-xl, 20px);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 7px 18px;
    cursor: pointer;
    transition: background var(--dur-fast, 150ms), transform 80ms;
}

.playlist-explorer__play-btn:active[b-owdttoan28] { transform: scale(0.96); }
.playlist-explorer__play-btn:hover[b-owdttoan28] { background: color-mix(in oklab, var(--c-accent, #ff5500) 85%, black); }

.playlist-explorer__like-btn[b-owdttoan28] {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    cursor: pointer;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--dur-fast, 150ms), border-color var(--dur-fast, 150ms);
    flex-shrink: 0;
}

.playlist-explorer__like-btn:hover[b-owdttoan28] {
    color: #e84848;
    border-color: rgba(232, 72, 72, 0.5);
}

.playlist-explorer__download-btn[b-owdttoan28] {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    cursor: pointer;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--dur-fast, 150ms), border-color var(--dur-fast, 150ms);
    flex-shrink: 0;
}

.playlist-explorer__download-btn:hover[b-owdttoan28] {
    color: var(--c-accent, #ff5500);
    border-color: rgba(255, 85, 0, 0.5);
}

.playlist-explorer__download-btn:disabled[b-owdttoan28] {
    cursor: default;
    opacity: 0.6;
}

.playlist-explorer__download-btn--loading[b-owdttoan28] {
    cursor: default;
}

@keyframes spin-b-owdttoan28 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin[b-owdttoan28] {
    animation: spin-b-owdttoan28 0.9s linear infinite;
}

.playlist-explorer__like-btn--active[b-owdttoan28] {
    color: #e84848;
    border-color: rgba(232, 72, 72, 0.5);
}

/* ── Explorer track list ─────────────────────────────── */

.playlist-explorer__tracks[b-owdttoan28] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 6px;
}

.playlist-track-row[b-owdttoan28] {
    padding-left: 4px;
    padding-right: 6px;
}

.playlist-track-row--playing .liked-row__title[b-owdttoan28] { color: var(--c-accent, #ff5500); }

.playlist-track-reorder[b-owdttoan28] {
    display: flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
}

.playlist-track-move[b-owdttoan28] {
    background: none;
    border: none;
    color: var(--c-text-3, rgba(255,255,255,0.28));
    cursor: pointer;
    padding: 3px;
    display: flex;
    align-items: center;
    border-radius: var(--r-xs, 4px);
    flex-shrink: 0;
    transition: color var(--dur-fast, 150ms);
}

.playlist-track-move:hover[b-owdttoan28] { color: var(--c-text-2, rgba(255,255,255,0.52)); }
.playlist-track-move:disabled[b-owdttoan28] { opacity: 0.25; cursor: default; }
/* /Components/Pages/Liked.razor.rz.scp.css */
/* /Components/Pages/Lyrics.razor.rz.scp.css */
.lyrics-page[b-lp5kpiigck] {
    /* Escape article.content padding for edge-to-edge fill */
    margin: -1.1rem -1.5rem -80px -2rem;
    /* Viewport minus PlayerBar (72px) and TopSearchBar (56px) */
    height: calc(100dvh - 72px - 56px);
    display: flex;
    flex-direction: column;
    background: var(--c-bg, #0d0d12);
    overflow: hidden;
    /* position: relative so ::before/::after with z-index paint above
       GPU-composited children (will-change: transform lyric lines). */
    position: relative;
}

/* Gradient overlays painted in front of the scroll content.
   mask-image breaks when children have will-change: transform (own compositing
   layers). Absolute pseudo-elements on the positioned parent always paint on top. */
.lyrics-page[b-lp5kpiigck]::before,
.lyrics-page[b-lp5kpiigck]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
}

.lyrics-page[b-lp5kpiigck]::before {
    top: 0;
    height: 18%;
    background: linear-gradient(to bottom, var(--c-bg, #0d0d12) 0%, transparent 100%);
}

.lyrics-page[b-lp5kpiigck]::after {
    bottom: 0;
    height: 22%;
    background: linear-gradient(to top, var(--c-bg, #0d0d12) 0%, transparent 100%);
}

.lyrics-scroll-area[b-lp5kpiigck] {
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Symmetric top/bottom padding (~half the viewport) so EVERY line — including the
       first and last — can be scrolled to the vertical center. Asymmetric padding left
       the opening lines pinned to the top until enough had played to scroll. */
    padding: 50vh 40px 50vh;
}

.lyric-line[b-lp5kpiigck] {
    /* Fixed font-size for ALL lines — no layout reflow when active line changes.
       Visual scaling is handled by transform below. */
    font-size: 1.15rem;
    font-weight: 500;
    color: rgba(255,255,255,0.22);
    text-align: center;
    line-height: 1.6;
    /* Padding gives breathing room so the scaled-up active line
       doesn't visually overlap its neighbours (scale is render-only). */
    padding: 14px 0;
    max-width: 500px;
    width: 100%;
    margin: 0;
    cursor: pointer;
    transform-origin: center center;
    transition: color 0.35s ease, transform 0.28s ease, font-weight 0.25s ease;
}

/* Promote only the lines near the playhead. This was `will-change: transform, color` on
   every .lyric-line, which gave a long song one compositor layer per line for its whole
   lifetime -- and `color` is not a compositable property, so hinting it bought nothing.
   JS sets data-dist on exactly the window it animates (dist -5..3) and removes it
   elsewhere, so this promotes the ~9 lines that actually move. A line enters the window
   three lines before it is scaled, so the hint still arrives well ahead of the transform. */
.lyric-line[data-dist][b-lp5kpiigck] {
    will-change: transform;
}

/* ── Progressive styling via data-dist (set by JS on each timeupdate) ── */
/* transform: scale() is a render-only op — no layout shifts, no text teleporting. */

.lyric-line[data-dist="0"][b-lp5kpiigck] {
    transform: scale(1.38);
    font-weight: 700;
    color: rgba(255,255,255,0.95);
}

.lyric-line[data-dist="-1"][b-lp5kpiigck] { transform: scale(1.06); color: rgba(255,255,255,0.55); }
.lyric-line[data-dist="-2"][b-lp5kpiigck] {                         color: rgba(255,255,255,0.32); }
.lyric-line[data-dist="-3"][b-lp5kpiigck] {                         color: rgba(255,255,255,0.18); }
.lyric-line[data-dist="-4"][b-lp5kpiigck],
.lyric-line[data-dist="-5"][b-lp5kpiigck] {                         color: rgba(255,255,255,0.08); }

.lyric-line[data-dist="1"][b-lp5kpiigck]  { transform: scale(1.06); color: rgba(255,255,255,0.45); }
.lyric-line[data-dist="2"][b-lp5kpiigck]  {                         color: rgba(255,255,255,0.28); }
.lyric-line[data-dist="3"][b-lp5kpiigck]  {                         color: rgba(255,255,255,0.18); }

.lyric-line:hover[b-lp5kpiigck] { color: rgba(255,255,255,0.70) !important; }

/* ── Sync offset nudge (floats top-right, above the fade gradient) ── */
.lyrics-sync[b-lp5kpiigck] {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 999px;
    background: rgba(20, 20, 24, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    font-size: 0.7rem;
    color: var(--c-text-2, rgba(255,255,255,0.6));
    user-select: none;
}
.lyrics-sync__btn[b-lp5kpiigck] {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lyrics-sync__btn:active[b-lp5kpiigck] { background: var(--c-accent, #ff5500); }
.lyrics-sync__val[b-lp5kpiigck] { min-width: 66px; text-align: center; font-variant-numeric: tabular-nums; }

/* Mobile: a near-full-width line scaled 1.38× spills past the viewport edges (the active
   line got clipped). Tame the active scale so it always fits, and let long words wrap. */
@media (max-width: 640px) {
    .lyric-line[b-lp5kpiigck] {
        font-size: 1.05rem;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .lyric-line[data-dist="0"][b-lp5kpiigck]  { transform: scale(1.18); }
    .lyric-line[data-dist="-1"][b-lp5kpiigck],
    .lyric-line[data-dist="1"][b-lp5kpiigck]  { transform: scale(1.04); }
}

/* ── Plain text lyrics ── */
.lyrics-plain[b-lp5kpiigck] {
    flex: 1;
    overflow-y: auto;
    padding: 40px 28px 80px;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    font-size: 1rem;
    line-height: 1.85;
    white-space: pre-wrap;
    max-width: 600px;
    margin: 0 auto;
}

/* ── Toggle button (switch between synced / plain text) ── */
.lyrics-toggle-btn[b-lp5kpiigck] {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--c-text-2, rgba(255,255,255,0.52));
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.lyrics-toggle-btn:hover[b-lp5kpiigck] {
    background: rgba(255,255,255,0.12);
    color: var(--c-text, #fff);
}

/* ── Empty / loading states ── */
.lyrics-empty[b-lp5kpiigck],
.lyrics-loading[b-lp5kpiigck] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    font-size: 0.9rem;
}

/* ── Manual LRCLIB match (auto-match miss) ── */
.lyrics-manual[b-lp5kpiigck] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 4px;
    overflow-y: auto;
}
.lyrics-empty--manual[b-lp5kpiigck] { flex: 0 0 auto; justify-content: flex-start; padding: 4px; }
.lyrics-manual__search[b-lp5kpiigck] { display: flex; gap: 8px; }
.lyrics-manual__input[b-lp5kpiigck] {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border-radius: var(--r-sm, 8px);
    border: 1px solid var(--c-border, rgba(255,255,255,0.10));
    background: var(--c-surface-2, rgba(255,255,255,0.05));
    color: var(--c-text, #fff);
    font-size: 0.9rem;
}
.lyrics-manual__input:focus[b-lp5kpiigck] { outline: none; border-color: var(--c-accent, #ff5500); }
.lyrics-manual__btn[b-lp5kpiigck] {
    flex: 0 0 auto;
    padding: 0 16px;
    border-radius: var(--r-sm, 8px);
    border: none;
    background: var(--c-accent, #ff5500);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.lyrics-manual__btn:disabled[b-lp5kpiigck] { opacity: 0.5; cursor: default; }

.lyrics-spinner[b-lp5kpiigck] {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255,255,255,0.08);
    border-top-color: var(--c-accent, #ff5500);
    border-radius: 50%;
    animation: spin-b-lp5kpiigck 0.7s linear infinite;
}

@keyframes spin-b-lp5kpiigck { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
    .lyrics-page[b-lp5kpiigck] {
        /* Mobile: article sides are 0.75rem; bottom is PlayerBar(60px)+BottomNav(56px)+safe-area+8px */
        margin: -1.1rem -0.75rem calc(-60px - 56px - env(safe-area-inset-bottom) - 8px) -0.75rem;
        height: calc(100dvh - 56px - 60px - 56px - env(safe-area-inset-bottom) - 8px);
    }
}

/* ── Lyric search results ──────────────────────────────────────────────────── */
.lyrics-search[b-lp5kpiigck] {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px 24px;
    z-index: 1;            /* above the .lyrics-page gradient pseudo-elements */
}

.lyrics-search .feed-section__title[b-lp5kpiigck] {
    margin: 14px 0 8px;
}
.lyrics-search .feed-section__title:first-child[b-lp5kpiigck] { margin-top: 0; }

.lyrics-hit-list[b-lp5kpiigck] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lyrics-hit[b-lp5kpiigck] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "title  action"
        "artist action"
        "snippet snippet";
    gap: 1px 10px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: var(--r-sm, 8px);
    padding: 10px 12px;
    cursor: pointer;
    color: var(--c-text, #fff);
    transition: background var(--dur-fast, 150ms);
    -webkit-tap-highlight-color: transparent;
}

.lyrics-hit:hover[b-lp5kpiigck] { background: rgba(255, 255, 255, 0.05); }

.lyrics-hit__title[b-lp5kpiigck] {
    grid-area: title;
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lyrics-hit__artist[b-lp5kpiigck] {
    grid-area: artist;
    font-size: 0.76rem;
    color: var(--c-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lyrics-hit__snippet[b-lp5kpiigck] {
    grid-area: snippet;
    margin-top: 4px;
    font-size: 0.76rem;
    color: var(--c-text-3);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lyrics-hit__action[b-lp5kpiigck] {
    grid-area: action;
    align-self: center;
    font-size: 0.72rem;
    color: var(--c-accent, #ff5500);
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--dur-fast, 150ms);
}

.lyrics-hit--global:hover .lyrics-hit__action[b-lp5kpiigck] { opacity: 1; }

/* ── Search-result reader ──────────────────────────────────────────────────
   Opened by tapping a lyric-search result. Shows the matched lyrics inline;
   playing the song is a secondary action in the bar rather than what a tap on
   the result does. */
.lyrics-reader[b-lp5kpiigck] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1, 6px);
    padding-bottom: var(--sp-4, 24px);
}

.lyrics-reader__bar[b-lp5kpiigck] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2, 12px);
    margin-bottom: var(--sp-2, 12px);
}

.lyrics-reader__title[b-lp5kpiigck] {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--c-text, rgba(255, 255, 255, 0.90));
    margin: 0;
    line-height: 1.2;
}

.lyrics-reader__artist[b-lp5kpiigck] {
    font-size: 0.85rem;
    color: var(--c-text-2, rgba(255, 255, 255, 0.52));
    margin-bottom: var(--sp-2, 12px);
}

.lyrics-reader__text[b-lp5kpiigck] {
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--c-text, rgba(255, 255, 255, 0.90));
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}
/* /Components/Pages/MixDetail.razor.rz.scp.css */
/* Mix artwork (.mix-art*) is shared with the Mixes page and lives in app.css. */

.mix-detail__back[b-aghbg8v732] {
    align-self: flex-start;
    margin: 0.25rem 0 1rem;
}

.mix-detail__hero[b-aghbg8v732] {
    display: flex;
    gap: 1.25rem;
    align-items: flex-end;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 1rem;
}

/* Fixed square so the layered tile and artwork agree on a size regardless of which
   one ends up visible. */
.mix-detail__art[b-aghbg8v732] {
    position: relative;
    width: 180px;
    flex: 0 0 180px;
    border-radius: var(--r-lg, 12px);
    overflow: hidden;
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.6));
}

.mix-detail__meta[b-aghbg8v732] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.mix-detail__eyebrow[b-aghbg8v732] {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-3, rgba(255, 255, 255, 0.40));
}

.mix-detail__title[b-aghbg8v732] {
    margin: 0;
    font-size: 1.9rem;
    line-height: 1.15;
    color: var(--c-text, #fff);
    overflow-wrap: anywhere;
}

.mix-detail__desc[b-aghbg8v732] {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--c-text-2, rgba(255, 255, 255, 0.62));
    max-width: 62ch;
}

.mix-detail__count[b-aghbg8v732] {
    font-size: 0.75rem;
    color: var(--c-text-3, rgba(255, 255, 255, 0.45));
}

.mix-detail__play[b-aghbg8v732] {
    align-self: flex-start;
    margin-top: 0.5rem;
}

@media (max-width: 640px) {
    /* Stack, and let the artwork lead at a size that still reads as a cover. */
    .mix-detail__hero[b-aghbg8v732] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9rem;
    }

    .mix-detail__art[b-aghbg8v732] {
        width: 150px;
        flex-basis: 150px;
    }

    .mix-detail__title[b-aghbg8v732] {
        font-size: 1.45rem;
    }
}
/* /Components/Pages/Mixes.razor.rz.scp.css */
/* Selection subtitle. Sits under the section heading and stays quiet — the row of
   cards is the content, this only says what the row is. */
.mixes-section__desc[b-m4i1sb2hoq] {
    margin: -0.35rem 0 0.6rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--c-text-3, rgba(255, 255, 255, 0.45));
    max-width: 62ch;
}

/* Mix artwork (.mix-art*) is shared with the mix detail page and lives in app.css. */
/* /Components/Pages/Profile.razor.rz.scp.css */
.profile-hero[b-olv2lfta74] {
    display: flex;
    gap: 14px;
    padding: 10px 8px 20px;
    align-items: flex-start;
    position: relative;
}

.profile-back[b-olv2lfta74] {
    position: absolute;
    top: 10px;
    left: 0;
    background: none;
    border: none;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    cursor: pointer;
    padding: 4px;
    border-radius: var(--r-sm, 8px);
    display: flex;
    align-items: center;
    transition: color var(--dur-fast, 150ms);
}

.profile-back:hover[b-olv2lfta74] { color: var(--c-text, rgba(255,255,255,0.90)); }

.profile-avatar-wrap[b-olv2lfta74] {
    flex-shrink: 0;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--c-surface-2, #1c1c26);
    margin-top: 28px;
    box-shadow: var(--shadow-md, 0 4px 18px rgba(0,0,0,0.50));
}

.profile-avatar[b-olv2lfta74] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-info[b-olv2lfta74] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 28px;
}

.profile-username[b-olv2lfta74] {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--c-text, rgba(255,255,255,0.90));
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-fullname[b-olv2lfta74] {
    font-size: 0.78rem;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    margin: 0;
}

.profile-stats[b-olv2lfta74] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.profile-stat[b-olv2lfta74] {
    font-size: 0.72rem;
    color: var(--c-text-2, rgba(255,255,255,0.52));
}

.profile-stat strong[b-olv2lfta74] { color: var(--c-text, rgba(255,255,255,0.90)); }

.profile-desc[b-olv2lfta74] {
    font-size: 0.75rem;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    margin: 4px 0 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.profile-follow-btn[b-olv2lfta74] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    margin-top: 10px;
    padding: 5px 14px;
    border-radius: var(--r-xl, 20px);
    border: 1px solid var(--c-accent, #ff5500);
    background: transparent;
    color: var(--c-accent, #ff5500);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur-fast, 150ms), color var(--dur-fast, 150ms);
}

.profile-follow-btn:hover:not(:disabled)[b-olv2lfta74] {
    background: var(--c-accent, #ff5500);
    color: #fff;
}

.profile-follow-btn--following[b-olv2lfta74] {
    background: rgba(255, 85, 0, 0.10);
    color: #ff7733;
    border-color: transparent;
}

.profile-follow-btn--following:hover:not(:disabled)[b-olv2lfta74] {
    background: rgba(220, 50, 50, 0.16);
    color: #e05252;
    border-color: #e05252;
}

.profile-follow-btn:disabled[b-olv2lfta74] {
    opacity: 0.5;
    cursor: default;
}

/* ── Reposts tab ───────────────────────────────────────────────────────────── */

/* A repost is a track/playlist row plus the optional note the user attached, so the
   caption sits above the row it belongs to rather than inside it. */
.repost-entry__caption[b-olv2lfta74] {
    margin: 0 0 0.25rem 0.25rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--c-text-2, rgba(255,255,255,0.62));
    overflow-wrap: anywhere;
}

.repost-entry__playlist[b-olv2lfta74] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    text-align: left;
    background: var(--c-surface-2, rgba(255,255,255,0.04));
    border: 1px solid var(--c-surface-3, rgba(255,255,255,0.08));
    border-radius: var(--r-lg, 12px);
    cursor: pointer;
    transition: background var(--dur-fast, 120ms) ease;
}

.repost-entry__playlist:hover[b-olv2lfta74] { background: var(--c-surface-3, rgba(255,255,255,0.08)); }

.repost-entry__playlist-title[b-olv2lfta74] {
    font-size: 0.9rem;
    color: var(--c-text, #fff);
}

.repost-entry__playlist-meta[b-olv2lfta74] {
    font-size: 0.75rem;
    color: var(--c-text-3, rgba(255,255,255,0.45));
}
/* /Components/Pages/Queue.razor.rz.scp.css */
/* ── Page ──────────────────────────────────────────────────── */

/* Was .queue-page, which never matched: the markup root is .feed-page. Centring now
   comes from the shared .page-column wrapper; what remains here is the breathing room
   under the top search bar, which the header was sitting flush against. */
.page-column[b-7zllkmavvp] {
    padding-top: 24px;
}

/* ── Header ────────────────────────────────────────────────── */

.queue-page__header[b-7zllkmavvp] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.queue-page__title[b-7zllkmavvp] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-text, rgba(255,255,255,0.90));
    margin: 0;
}

.queue-page__count[b-7zllkmavvp] {
    font-size: 0.75rem;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    flex: 1;
}

.queue-page__clear-btn[b-7zllkmavvp] {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-sm, 8px);
    color: var(--c-text-2, rgba(255,255,255,0.52));
    font-size: 0.75rem;
    padding: 4px 12px;
    cursor: pointer;
    transition: color var(--dur-fast, 150ms), border-color var(--dur-fast, 150ms);
}

.queue-page__clear-btn:hover[b-7zllkmavvp] {
    color: #e05252;
    border-color: rgba(224, 82, 82, 0.5);
}

/* ── Empty state ───────────────────────────────────────────── */

.queue-page__empty[b-7zllkmavvp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 60px 20px;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    font-size: 0.9rem;
}

.queue-page__empty-hint[b-7zllkmavvp] {
    font-size: 0.75rem;
    color: var(--c-text-3, rgba(255,255,255,0.28));
    margin: 0;
}

/* ── List ──────────────────────────────────────────────────── */

.queue-page__list[b-7zllkmavvp] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Item ──────────────────────────────────────────────────── */

.queue-page-item[b-7zllkmavvp] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    border-radius: var(--r-sm, 8px);
    transition: background var(--dur-micro, 80ms);
}

.queue-page-item:hover[b-7zllkmavvp] { background: rgba(255, 255, 255, 0.04); }

.queue-page-item--active[b-7zllkmavvp] {
    background: rgba(255, 85, 0, 0.07);
    border-left: 3px solid var(--c-accent, #ff5500);
    padding-left: 7px;
}

.queue-page-item__num[b-7zllkmavvp] {
    font-size: 0.7rem;
    color: var(--c-text-3, rgba(255,255,255,0.28));
    width: 22px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.queue-page-item--active .queue-page-item__num[b-7zllkmavvp] { color: var(--c-accent, #ff5500); }

.queue-page-item__art-wrap[b-7zllkmavvp] {
    position: relative;
    flex-shrink: 0;
}

.queue-page-item__art[b-7zllkmavvp] {
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm, 8px);
    object-fit: cover;
    background: var(--c-surface-2, #1c1c26);
    display: block;
}

.queue-page-item__art-overlay[b-7zllkmavvp] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: var(--r-sm, 8px);
    opacity: 0;
    transition: opacity var(--dur-fast, 150ms);
    color: #fff;
}

.queue-page-item:hover .queue-page-item__art-overlay[b-7zllkmavvp],
.queue-page-item--active .queue-page-item__art-overlay[b-7zllkmavvp] { opacity: 1; }

.queue-page-item__meta[b-7zllkmavvp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.queue-page-item__title[b-7zllkmavvp] {
    font-size: 0.84rem;
    color: var(--c-text, rgba(255,255,255,0.90));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.queue-page-item--active .queue-page-item__title[b-7zllkmavvp] { color: #fff; }

.queue-page-item__artist[b-7zllkmavvp] {
    font-size: 0.7rem;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

.queue-page-item__dur[b-7zllkmavvp] {
    font-size: 0.7rem;
    color: var(--c-text-3, rgba(255,255,255,0.28));
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.queue-page-item__actions[b-7zllkmavvp] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--dur-fast, 150ms);
}

.queue-page-item:hover .queue-page-item__actions[b-7zllkmavvp] { opacity: 1; }

.queue-page-item__btn[b-7zllkmavvp] {
    background: none;
    border: none;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: var(--r-xs, 4px);
    transition: color var(--dur-fast, 150ms);
}

.queue-page-item__btn:hover:not(:disabled)[b-7zllkmavvp] { color: var(--c-text, rgba(255,255,255,0.90)); }
.queue-page-item__btn:disabled[b-7zllkmavvp] { opacity: 0.2; cursor: default; }
.queue-page-item__btn--remove:hover[b-7zllkmavvp] { color: #e05252 !important; }
/* /Components/Pages/Search.razor.rz.scp.css */
.search-page[b-sowv1gbgda] {
    margin: -1.1rem -1.5rem 0;
    padding-bottom: 80px;
    background: var(--c-bg, #0d0d12);
    min-height: 100vh;
    min-height: 100dvh;   /* dvh where supported: excludes mobile browser chrome */
    display: flex;
    flex-direction: column;
}

.search-page-bar-wrap[b-sowv1gbgda] {
    position: relative;
    padding: 12px 1rem 6px;
}

.search-page-input[b-sowv1gbgda] {
    font-size: 0.95rem;
    padding-top: 9px;
    padding-bottom: 9px;
}

/* ── Playlist result rows ─────────────────────────────────────── */

.library-list[b-sowv1gbgda] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.library-row[b-sowv1gbgda] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 6px;
    border-radius: var(--r-sm, 8px);
    cursor: pointer;
    transition: background var(--dur-fast, 150ms);
}

.library-row:hover[b-sowv1gbgda] {
    background: rgba(255, 255, 255, 0.05);
}

.library-row:active[b-sowv1gbgda] {
    background: rgba(255, 255, 255, 0.08);
}

/* size the art wrapper to match track-art-wrap in list mode */
.library-art-wrap[b-sowv1gbgda] {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--r-sm, 8px);
}

.library-artwork[b-sowv1gbgda] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.library-meta[b-sowv1gbgda] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.library-title[b-sowv1gbgda] {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--c-text, rgba(255,255,255,0.90));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.library-sub[b-sowv1gbgda] {
    font-size: 0.72rem;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 2px;
}

@media (max-width: 640px) {
    .search-page[b-sowv1gbgda] {
        margin: -1.1rem -0.75rem 0 -0.75rem;
    }
}
/* /Components/Pages/TrackDetail.razor.rz.scp.css */
.track-detail-page[b-navv3yrs9j] {
    position: relative;
    margin: -1.1rem -1.5rem 0 -2rem;
    padding: 0 1.5rem 80px 2rem;
    min-height: 100vh;
    min-height: 100dvh;   /* dvh where supported: excludes mobile browser chrome */
    isolation: isolate;
    /* Wider than the shared default: this page leads with a cover-plus-info hero and
       related-track carousels, which cramp at the reading measure that suits body text. */
    --page-column-max: 1100px;
}

/* The cinematic backdrop is full-bleed decoration, so it is exempt from the column that
   .page-column-host applies to the root's children. It is already out of flow; without
   this the max-width would still shrink it away from the window edges. */
.track-detail-page > .track-detail__backdrop[b-navv3yrs9j] {
    max-width: none;
    width: auto;
    margin-inline: 0;
}

/* Cinematic blurred backdrop, generated from the track's own artwork. Faded
   out toward the bottom via a mask so it blends into the page background
   instead of ending on a hard edge. Purely decorative — pointer-events off. */
.track-detail__backdrop[b-navv3yrs9j] {
    position: absolute;
    inset: 0;
    height: 480px;
    background-size: cover;
    background-position: center 30%;
    filter: blur(60px) brightness(0.4) saturate(1.3);
    transform: scale(1.2);
    z-index: -1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, transparent 90%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, transparent 90%);
}

.track-detail__back[b-navv3yrs9j] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    font-size: 0.78rem;
    cursor: pointer;
    padding: 14px 2px 10px 0;
    transition: color var(--dur-fast, 150ms);
}

.track-detail__back:hover[b-navv3yrs9j] { color: var(--c-text, rgba(255,255,255,0.90)); }

.track-detail__hero[b-navv3yrs9j] {
    display: flex;
    gap: 28px;
    padding: 12px 0 24px;
    align-items: flex-end;
}

.track-detail__cover-wrap[b-navv3yrs9j] {
    position: relative;
    flex-shrink: 0;
    width: 220px;
    height: 220px;
    border-radius: var(--r-lg, 16px);
    overflow: hidden;
    background: var(--c-surface-2, #1c1c26);
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.60));
}

.track-detail__cover[b-navv3yrs9j] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Shown when the track has no cover and the uploader no avatar. A drawn mark on a
   layered surface, so an artwork-less track still reads as part of the page instead
   of a stretched grey-on-white bitmap. */
.track-detail__cover--empty[b-navv3yrs9j] {
    display: grid;
    place-items: center;
    background: linear-gradient(150deg,
        var(--c-surface-3, #24242e) 0%,
        var(--c-surface-2, #1c1c26) 100%);
    color: var(--c-text-3, rgba(255, 255, 255, 0.28));
}

.track-detail__cover--empty svg[b-navv3yrs9j] {
    width: 46%;
    height: auto;
}

.track-detail__info[b-navv3yrs9j] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 4px;
}

.track-detail__title[b-navv3yrs9j] {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--c-text, rgba(255,255,255,0.90));
    margin: 2px 0 0;
    line-height: 1.15;
    overflow-wrap: break-word;
}

.track-detail__artist[b-navv3yrs9j] {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    cursor: pointer;
    transition: color var(--dur-fast, 150ms);
}

.track-detail__artist:hover[b-navv3yrs9j] { color: var(--c-accent, #ff5500); }

.track-detail__meta-pills[b-navv3yrs9j] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.track-detail__pill[b-navv3yrs9j] {
    font-size: 0.72rem;
    color: var(--c-text-2, rgba(255,255,255,0.62));
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-full, 9999px);
    padding: 3px 10px;
}

.track-detail__actions[b-navv3yrs9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* The primary play button (.btn-play) is shared with the mix page; see app.css. */

.track-detail__icon-btn[b-navv3yrs9j] {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    cursor: pointer;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--dur-fast, 150ms), border-color var(--dur-fast, 150ms);
    flex-shrink: 0;
}

.track-detail__icon-btn:hover[b-navv3yrs9j] { color: #e84848; border-color: rgba(232, 72, 72, 0.5); }
.track-detail__icon-btn--active[b-navv3yrs9j] { color: #e84848; border-color: rgba(232, 72, 72, 0.5); }
.track-detail__icon-btn--cache[b-navv3yrs9j] { border: none; width: auto; height: auto; }

.track-detail__section[b-navv3yrs9j] {
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.track-detail__section-header[b-navv3yrs9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.track-detail__section-title[b-navv3yrs9j] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--c-text, rgba(255,255,255,0.90));
    margin: 0 0 10px;
}

.track-detail__description[b-navv3yrs9j] {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--c-text-2, rgba(255,255,255,0.62));
    white-space: pre-wrap;
    margin: 0;
}

/* Drawn from the track's own sample data, not a loaded bitmap — so it has a fixed
   height and can never scale itself to the container the way the old <img> did. */
.track-detail__waveform[b-navv3yrs9j] {
    width: 100%;
    height: 84px;
    display: block;
}

/* Whole track, dimmed. The accent copy is drawn over it, clipped to what has played. */
.track-detail__waveform-base[b-navv3yrs9j] {
    fill: var(--c-text-3, rgba(255, 255, 255, 0.30));
}

.track-detail__waveform-played[b-navv3yrs9j] {
    fill: var(--c-accent, #ff5500);
}

.track-detail__waveform-head[b-navv3yrs9j] {
    fill: var(--c-text, #fff);
    opacity: 0.85;
}

.track-detail__lyrics-preview[b-navv3yrs9j] {
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--c-text-2, rgba(255,255,255,0.62));
    white-space: pre-wrap;
    margin: 0;
    max-height: 220px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, black 70%, transparent 100%);
    mask-image: linear-gradient(180deg, black 70%, transparent 100%);
}

/* ── Repost caption sheet ──────────────────────────────────────────────────── */

.repost-sheet[b-navv3yrs9j] {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--c-surface-2, rgba(255,255,255,0.04));
    border: 1px solid var(--c-surface-3, rgba(255,255,255,0.08));
    border-radius: var(--r-lg, 12px);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.repost-sheet__label[b-navv3yrs9j] {
    font-size: 0.75rem;
    color: var(--c-text-3, rgba(255,255,255,0.45));
}

.repost-sheet__input[b-navv3yrs9j],
.comment-compose__input[b-navv3yrs9j] {
    width: 100%;
    resize: vertical;
    padding: 0.55rem 0.7rem;
    font: inherit;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--c-text, #fff);
    background: var(--c-surface-3, rgba(255,255,255,0.06));
    border: 1px solid transparent;
    border-radius: var(--r-lg, 12px);
    transition: border-color var(--dur-fast, 120ms) ease;
}

.repost-sheet__input:focus-visible[b-navv3yrs9j],
.comment-compose__input:focus-visible[b-navv3yrs9j] {
    outline: none;
    border-color: var(--c-accent, #ff5500);
}

.repost-sheet__actions[b-navv3yrs9j] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}

/* ── Waveform with timed-comment markers ───────────────────────────────────── */

.waveform-wrap[b-navv3yrs9j] {
    position: relative;
}

/* Default action is seeking; picking a comment moment is an armed mode, and the cursor
   plus an accent outline are what say which one a click will do. */
.track-detail__waveform--seekable[b-navv3yrs9j] { cursor: pointer; }

.track-detail__waveform--picking[b-navv3yrs9j] {
    cursor: crosshair;
    outline: 1px dashed var(--c-accent, #ff5500);
    outline-offset: 3px;
}

/* Markers hang just under the waveform, anchored by their centre so the avatar
   sits over the exact moment the comment refers to. */
.waveform-marker[b-navv3yrs9j] {
    position: absolute;
    bottom: -6px;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: var(--r-full, 999px);
    background: transparent;
    cursor: pointer;
    line-height: 0;
    transition: transform var(--dur-fast, 120ms) ease;
}

.waveform-marker:hover[b-navv3yrs9j],
.waveform-marker:focus-visible[b-navv3yrs9j] {
    transform: translateX(-50%) scale(1.25);
    z-index: 2;
    outline: none;
}

.waveform-marker img[b-navv3yrs9j] {
    width: 100%;
    height: 100%;
    border-radius: var(--r-full, 999px);
    object-fit: cover;
    border: 2px solid var(--c-surface-2, #1a1a1a);
}

/* Comment bubble. Replaces the native title tooltip, which appeared late, could not be
   styled, and — the reason it had to go — cannot be shown programmatically, so it could
   never open on its own as playback reaches the comment.
   Shown on hover, on keyboard focus, and while --live is set by the rAF tick. */
.waveform-bubble[b-navv3yrs9j] {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 4px);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: max-content;
    min-width: 96px;
    max-width: 260px;
    padding: 0.5rem 0.7rem;
    text-align: left;
    background: var(--c-surface-2, #1c1c26);
    border: 1px solid var(--c-border-2, rgba(255, 255, 255, 0.13));
    border-radius: var(--r-lg, 12px);
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.6));
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast, 150ms) var(--ease-out, ease),
                transform var(--dur-fast, 150ms) var(--ease-out, ease);
}

/* Tail, pointing down at the marker. */
.waveform-bubble[b-navv3yrs9j]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--c-surface-2, #1c1c26);
}

.waveform-marker:hover .waveform-bubble[b-navv3yrs9j],
.waveform-marker:focus-visible .waveform-bubble[b-navv3yrs9j],
.waveform-marker--live .waveform-bubble[b-navv3yrs9j] {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Edge anchoring. A bubble centred on a marker near either end of the waveform hangs
   off the scroll container and gets cut — `main` is overflow-y:auto, and once one axis
   is not `visible` the other computes to `auto` too, so it clips horizontally. These
   open inward from the marker instead, and their tails move to stay over it. */
.waveform-bubble--start[b-navv3yrs9j] {
    left: 0;
    transform: translate(0, 4px);
}

.waveform-marker:hover .waveform-bubble--start[b-navv3yrs9j],
.waveform-marker:focus-visible .waveform-bubble--start[b-navv3yrs9j],
.waveform-marker--live .waveform-bubble--start[b-navv3yrs9j] {
    transform: translate(0, 0);
}

.waveform-bubble--start[b-navv3yrs9j]::after {
    left: 11px;          /* half the 22px marker — sits over its centre */
    transform: none;
}

.waveform-bubble--end[b-navv3yrs9j] {
    left: auto;
    right: 0;
    transform: translate(0, 4px);
}

.waveform-marker:hover .waveform-bubble--end[b-navv3yrs9j],
.waveform-marker:focus-visible .waveform-bubble--end[b-navv3yrs9j],
.waveform-marker--live .waveform-bubble--end[b-navv3yrs9j] {
    transform: translate(0, 0);
}

.waveform-bubble--end[b-navv3yrs9j]::after {
    left: auto;
    right: 11px;
    transform: none;
}

/* A comment currently being reached lifts its avatar so the open bubble has an owner. */
.waveform-marker--live[b-navv3yrs9j] {
    z-index: 3;
}

.waveform-marker--live img[b-navv3yrs9j],
.waveform-marker--live .waveform-marker__dot[b-navv3yrs9j] {
    box-shadow: 0 0 0 2px var(--c-accent, #ff5500);
}

/* The comment is the content; the author is attribution. Styling the name as bold
   accent made it shout over the text it belongs to — and a numeric username then read
   as a label rather than a person. Name recedes, comment leads. */
/* Count badge for a marker standing in for several comments. */
.waveform-marker__count[b-navv3yrs9j] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: var(--r-full, 999px);
    background: var(--c-accent, #ff5500);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--c-surface-2, #1a1a1a);
}

/* One comment inside a clustered bubble; a rule separates them so several
   short comments don't read as one run-on. */
.waveform-bubble__item[b-navv3yrs9j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.waveform-bubble__item + .waveform-bubble__item[b-navv3yrs9j] {
    padding-top: 5px;
    border-top: 1px solid var(--c-border-2, rgba(255, 255, 255, 0.10));
}

.waveform-bubble__more[b-navv3yrs9j] {
    font-size: 0.66rem;
    color: var(--c-text-3, rgba(255, 255, 255, 0.45));
}

.waveform-bubble__author[b-navv3yrs9j] {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--c-text-3, rgba(255, 255, 255, 0.45));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.waveform-bubble__text[b-navv3yrs9j] {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--c-text, rgba(255, 255, 255, 0.92));
    overflow-wrap: anywhere;
}

.waveform-marker__dot[b-navv3yrs9j] {
    display: block;
    width: 10px;
    height: 10px;
    margin: 6px auto;
    border-radius: var(--r-full, 999px);
    background: var(--c-accent, #ff5500);
}

/* ── Comments ──────────────────────────────────────────────────────────────── */

.comment-compose[b-navv3yrs9j] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.comment-compose__row[b-navv3yrs9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.comment-compose__anchor[b-navv3yrs9j] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--c-accent, #ff5500);
    background: color-mix(in srgb, var(--c-accent, #ff5500) 14%, transparent);
    border-radius: var(--r-full, 999px);
}

.comment-compose__anchor-clear[b-navv3yrs9j] {
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
}

.comment-list[b-navv3yrs9j] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.comment[b-navv3yrs9j] {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
}

.comment__avatar[b-navv3yrs9j] {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: var(--r-full, 999px);
    object-fit: cover;
}

.comment__avatar--fallback[b-navv3yrs9j] {
    background: var(--c-surface-3, rgba(255,255,255,0.08));
}

.comment__body[b-navv3yrs9j] {
    min-width: 0;
    flex: 1;
}

.comment__meta[b-navv3yrs9j] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.15rem;
}

.comment__at[b-navv3yrs9j] {
    border: none;
    background: none;
    padding: 0;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--c-accent, #ff5500);
    cursor: pointer;
}

.comment__at:hover[b-navv3yrs9j] { text-decoration: underline; }

.comment__age[b-navv3yrs9j] {
    font-size: 0.72rem;
    color: var(--c-text-3, rgba(255,255,255,0.45));
}

.comment__text[b-navv3yrs9j] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--c-text-2, rgba(255,255,255,0.62));
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .track-detail-page[b-navv3yrs9j] {
        margin: -1.1rem -0.75rem 0 -0.75rem;
        padding: 0 0.75rem 80px;
    }

    .track-detail__hero[b-navv3yrs9j] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .track-detail__cover-wrap[b-navv3yrs9j] {
        width: 170px;
        height: 170px;
    }

    .track-detail__artist[b-navv3yrs9j] { align-self: center; }
    .track-detail__meta-pills[b-navv3yrs9j] { justify-content: center; }
}
/* /Components/Pages/User.razor.rz.scp.css */
/* ── Page layout ───────────────────────────────────────────── */

.user-page[b-9sekk30b8h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 16px 40px;
    width: 100%;
    box-sizing: border-box;
}

/* ── Profile header ────────────────────────────────────────── */

.profile-header[b-9sekk30b8h] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
}

.avatar-wrap[b-9sekk30b8h] {
    position: relative;
    flex-shrink: 0;
}

/* Glowing ring around the settings avatar — a soft accent halo that pulses
   with the bass. The ring is painted on a ::before pseudo-element (fixed
   blur, opacity-faded) so per-frame intensity changes never repaint. */
.avatar-wrap[b-9sekk30b8h]::before {
    /* --bass-hue/--bass-intensity are registered non-inheriting (see app.css), and a
       pseudo-element does NOT inherit a non-inherited property from its originating
       element — it would silently fall back to the initial value (0) and never light
       up. Pulling them in explicitly is what keeps the glow alive; it costs nothing,
       because only this pseudo-element opts in, not the whole subtree. */
    --bass-hue: inherit;
    --bass-intensity: inherit;
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle,
        hsla(var(--bass-hue, 240), 80%, 60%, 0.55) 0%,
        hsla(var(--bass-hue, 240), 80%, 60%, 0.18) 60%,
        transparent 100%);
    opacity: calc(0.25 + var(--bass-intensity, 0) * 0.75);
    will-change: opacity;
    transition: opacity 90ms linear;
    z-index: -1;
}

.avatar-wrap .avatar-lg[b-9sekk30b8h] {
    box-shadow:
        0 0 0 2px var(--c-bg, #0d0d12),
        0 0 12px 2px hsla(var(--bass-hue, 240), 80%, 60%, 0.45);
}

.goplus-dot[b-9sekk30b8h] {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--c-go, #2cba6e);
    border: 2px solid var(--c-bg, #0d0d12);
    display: block;
}

.goplus-dot--inactive[b-9sekk30b8h] { background: rgba(255, 255, 255, 0.14); }

.profile-info[b-9sekk30b8h] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.username-row[b-9sekk30b8h] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.username[b-9sekk30b8h] {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--c-text, rgba(255,255,255,0.90));
}

.plan-badge[b-9sekk30b8h] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--c-accent, #ff5500);
    padding: 2px 7px;
    border-radius: 100px;
}

.plan-badge--inactive[b-9sekk30b8h] {
    background: rgba(255, 255, 255, 0.10);
    color: var(--c-text-2, rgba(255,255,255,0.52));
}

/* ── Settings grid ─────────────────────────────────────────── */

.settings-grid[b-9sekk30b8h] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    width: 100%;
    max-width: 860px;
}

.settings-card[b-9sekk30b8h] {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--r-lg, 16px);
    overflow: hidden;
    background: var(--c-surface, #16161c);
}

.card-label[b-9sekk30b8h] {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text-3, rgba(255,255,255,0.28));
    padding: 10px 16px 4px;
}

/* ── Settings items ────────────────────────────────────────── */

.settings-item[b-9sekk30b8h] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 13px 16px;
    background: none;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--c-text, rgba(255,255,255,0.90));
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    transition: background var(--dur-micro, 80ms);
}

.settings-item:first-of-type[b-9sekk30b8h] { border-top: none; }
.settings-item:hover[b-9sekk30b8h] { background: rgba(255, 255, 255, 0.04); }
.settings-item--danger[b-9sekk30b8h] { color: #e74c3c; }

.settings-item--quality[b-9sekk30b8h] {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}

.settings-item--toggle[b-9sekk30b8h] { justify-content: space-between; }

/* ── Quality toggles ───────────────────────────────────────── */

.quality-toggle[b-9sekk30b8h] {
    display: flex;
    gap: 6px;
    width: 100%;
}

.quality-btn[b-9sekk30b8h] {
    flex: 1;
    padding: 6px 5px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--r-sm, 8px);
    background: none;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    font-size: 0.82rem;
    cursor: pointer;
    transition: color var(--dur-fast, 150ms), border-color var(--dur-fast, 150ms);
}

.quality-btn:hover[b-9sekk30b8h] {
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--c-text, rgba(255,255,255,0.90));
}

.quality-btn--active[b-9sekk30b8h] {
    border-color: var(--c-accent, #ff5500);
    color: var(--c-accent, #ff5500);
    background: rgba(255, 85, 0, 0.08);
}

.quality-auto-hint[b-9sekk30b8h] {
    font-size: 0.75rem;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    line-height: 1.4;
}

/* ── Chevron ───────────────────────────────────────────────── */

.toggle-right[b-9sekk30b8h] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-chevron[b-9sekk30b8h] {
    font-size: 1.1rem;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    transition: transform 0.18s;
    display: inline-block;
}

.settings-chevron--open[b-9sekk30b8h] { transform: rotate(90deg); }

/* ── Session token panel ───────────────────────────────────── */

.token-saved-badge[b-9sekk30b8h] {
    font-size: 0.7rem;
    color: var(--c-go, #2cba6e);
    font-weight: 600;
}

.token-panel[b-9sekk30b8h] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px 16px;
    background: var(--c-bg, #0d0d12);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.snippet-header-row[b-9sekk30b8h] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.snippet-expand-btn[b-9sekk30b8h],
.snippet-copy-btn[b-9sekk30b8h] {
    flex: 0 0 auto;
    padding: 5px 10px;
}

.snippet-code[b-9sekk30b8h] {
    display: block;
    padding: 8px 10px;
    background: var(--c-surface, #16161c);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--r-sm, 8px);
    color: var(--c-text-2, rgba(255,255,255,0.52));
    font-family: 'Consolas', monospace;
    font-size: 0.67rem;
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.6;
}

.token-listener-status[b-9sekk30b8h] { color: #e6a817; }

.token-divider[b-9sekk30b8h] {
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
}

.token-input-row[b-9sekk30b8h] {
    display: flex;
    gap: 6px;
}

.token-input[b-9sekk30b8h] {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    background: var(--c-surface, #16161c);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--r-sm, 8px);
    color: var(--c-text, rgba(255,255,255,0.90));
    font-size: 0.8rem;
    font-family: 'Consolas', monospace;
    transition: border-color var(--dur-fast, 150ms);
}

.token-input:focus[b-9sekk30b8h] {
    outline: none;
    border-color: var(--c-accent, #ff5500);
}

.token-clear-btn[b-9sekk30b8h] { color: #e05252; border-color: rgba(255,255,255,0.14); }
.token-clear-btn:hover[b-9sekk30b8h] { border-color: #e05252; }
.token-feedback[b-9sekk30b8h] { color: var(--c-go, #2cba6e); }

/* ── Cache breakdown rows ──────────────────────────────────── */

.cache-row[b-9sekk30b8h] {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 10px !important;
}

.cache-row-info[b-9sekk30b8h] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.cache-row-name[b-9sekk30b8h] {
    font-size: 0.84rem;
    color: var(--c-text, rgba(255,255,255,0.90));
}

.cache-flush-btn[b-9sekk30b8h] {
    flex: 0 0 auto !important;
    padding: 5px 12px !important;
    font-size: 0.75rem !important;
    white-space: nowrap;
}

.cache-total-row[b-9sekk30b8h] {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 2px;
}

.cache-total-row .cache-row-name[b-9sekk30b8h] {
    color: var(--c-text-2, rgba(255,255,255,0.52));
    font-size: 0.78rem;
}

.cache-flush-all-btn[b-9sekk30b8h] {
    border-color: #e05252 !important;
    color: #e05252 !important;
}

.cache-flush-all-btn:hover[b-9sekk30b8h] {
    border-color: #ff7070 !important;
    color: #ff7070 !important;
    background: rgba(224, 82, 82, 0.08) !important;
}

.cache-flush-all-btn:disabled[b-9sekk30b8h] {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.cache-pending-badge[b-9sekk30b8h] {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.65rem;
    color: #e6a817;
    background: rgba(230, 168, 23, 0.10);
    border: 1px solid rgba(230, 168, 23, 0.28);
    border-radius: 10px;
    padding: 1px 7px;
    font-weight: 600;
}

.quality-auto-hint code[b-9sekk30b8h] {
    font-family: 'Consolas', monospace;
    background: var(--c-surface-2, #1c1c26);
    padding: 1px 4px;
    border-radius: var(--r-xs, 4px);
    color: var(--c-text-2, rgba(255,255,255,0.52));
    font-size: var(--fs-xxs, 0.63rem);
}

/* ── Theme swatch picker ───────────────────────────────────── */

.theme-swatch-grid[b-9sekk30b8h] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 8px;
    width: 100%;
}

.theme-swatch[b-9sekk30b8h] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-md, 12px);
    background: none;
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--dur-fast, 150ms), transform 0.12s;
}

.theme-swatch:hover[b-9sekk30b8h] {
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

.theme-swatch--active[b-9sekk30b8h] {
    border-color: var(--c-accent, #ff5500);
    box-shadow: 0 0 0 1px var(--c-accent, #ff5500) inset;
}

.theme-swatch__fill[b-9sekk30b8h] {
    display: block;
    height: 36px;
    background: linear-gradient(180deg,
        var(--sw-top, #052767) 0%,
        var(--sw-bot, #3a0647) 100%);
}

.theme-swatch__label[b-9sekk30b8h] {
    display: block;
    padding: 4px 6px;
    font-size: 0.68rem;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    text-align: center;
    background: var(--c-surface, #16161c);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.theme-swatch--active .theme-swatch__label[b-9sekk30b8h] { color: var(--c-accent, #ff5500); }

/* ── Custom gradient editor ────────────────────────────────── */

.custom-color-row[b-9sekk30b8h] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
    gap: 10px;
    width: 100%;
}

.custom-color[b-9sekk30b8h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 0.66rem;
    color: var(--c-text-2, rgba(255, 255, 255, 0.52));
    text-align: center;
    cursor: pointer;
}

.custom-color input[type="color"][b-9sekk30b8h] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-md, 12px);
    background: none;
    cursor: pointer;
}

.custom-color input[type="color"][b-9sekk30b8h]::-webkit-color-swatch-wrapper { padding: 3px; }
.custom-color input[type="color"][b-9sekk30b8h]::-webkit-color-swatch { border: none; border-radius: 8px; }

/* ── Custom CSS editor ─────────────────────────────────────── */

.custom-css-input[b-9sekk30b8h] {
    width: 100%;
    min-height: 140px;
    margin-top: 8px;
    padding: 10px 12px;
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--c-text, rgba(255, 255, 255, 0.9));
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--r-md, 12px);
    outline: none;
    resize: vertical;
    tab-size: 2;
    transition: border-color var(--dur-fast, 150ms);
}

.custom-css-input:focus[b-9sekk30b8h] { border-color: var(--c-accent, #ff5500); }

/* ── Bass intensity slider ─────────────────────────────────── */

.bass-intensity-slider[b-9sekk30b8h] {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    outline: none;
    cursor: pointer;
}

.bass-intensity-slider[b-9sekk30b8h]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--c-accent, #ff5500);
    border: 2px solid var(--c-bg, #0d0d12);
    cursor: pointer;
    transition: transform 0.1s;
}

.bass-intensity-slider[b-9sekk30b8h]::-webkit-slider-thumb:hover { transform: scale(1.15); }

.bass-intensity-slider[b-9sekk30b8h]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--c-accent, #ff5500);
    border: 2px solid var(--c-bg, #0d0d12);
    cursor: pointer;
}

/* ── BPM detection card ─────────────────────────────────── */

.bpm-actions[b-9sekk30b8h] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.bpm-current-title[b-9sekk30b8h] {
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bpm-progress[b-9sekk30b8h] {
    height: 4px;
    margin: 2px 14px 10px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    overflow: hidden;
}

.bpm-progress__fill[b-9sekk30b8h] {
    height: 100%;
    background: var(--c-accent, #ff5500);
    border-radius: 999px;
    transition: width 200ms ease;
}
/* /Components/Shared/ContextMenu.razor.rz.scp.css */
.ctx-backdrop[b-vk99f8m24h] {
    position: fixed;
    inset: 0;
    z-index: 1100;
}

.ctx-menu[b-vk99f8m24h] {
    position: fixed;
    z-index: var(--z-overlay, 1101);
    background: var(--c-surface-2, #1c1c26);
    border: 1px solid var(--c-border-2, rgba(255,255,255,0.13));
    border-radius: var(--r-lg, 18px);
    padding: var(--sp-1, 6px) 0;
    min-width: 190px;
    /* Cap against the viewport so a long menu scrolls internally instead of
       running off the bottom on short screens — no clamp can save a menu that is
       simply taller than the window. */
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: var(--shadow-xl, 0 16px 52px rgba(0,0,0,0.72), 0 4px 12px rgba(0,0,0,0.40));
}

/* Applied once JS has measured and clamped the menu. The entry animation uses the
   independent `scale`/`opacity` properties rather than `transform`, so it can never
   overwrite positioning the way a transform-based keyframe does. */
.ctx-menu--placed[b-vk99f8m24h] {
    animation: ctx-appear-b-vk99f8m24h 120ms var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}

@keyframes ctx-appear-b-vk99f8m24h {
    from { opacity: 0; scale: 0.94; }
    to   { opacity: 1; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ctx-menu--placed[b-vk99f8m24h] { animation: none; }
}

.ctx-item[b-vk99f8m24h] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    color: var(--c-text, rgba(255,255,255,0.90));
    font-size: 0.85rem;
    padding: 11px 16px;
    text-align: left;
    cursor: pointer;
    transition: background var(--dur-micro, 80ms);
}

.ctx-item:hover[b-vk99f8m24h] {
    background: rgba(255,255,255,0.06);
}

.ctx-item:active[b-vk99f8m24h] {
    background: rgba(255,255,255,0.10);
}

.ctx-item--destructive[b-vk99f8m24h] {
    color: #e84848;
}

.ctx-icon[b-vk99f8m24h] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.70;
}

.ctx-separator[b-vk99f8m24h] {
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
    margin: 4px 0;
}
/* /Components/Shared/PlaylistPicker.razor.rz.scp.css */
.picker-backdrop[b-j8vrj30jbp] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.60);
    z-index: 1200;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.picker-sheet[b-j8vrj30jbp] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1201;
    background: var(--c-surface, #16161c);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-xl, 20px) var(--r-xl, 20px) 0 0;
    max-height: 72vh;
    display: flex;
    flex-direction: column;
    animation: sheet-up-b-j8vrj30jbp 240ms var(--ease-out, cubic-bezier(0.16,1,0.3,1));
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@keyframes sheet-up-b-j8vrj30jbp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.picker-handle[b-j8vrj30jbp] {
    width: 36px;
    height: 4px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
}

.picker-header[b-j8vrj30jbp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
    flex-shrink: 0;
}

.picker-title[b-j8vrj30jbp] {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--c-text, rgba(255,255,255,0.90));
    margin: 0;
}

.picker-close[b-j8vrj30jbp] {
    background: none;
    border: none;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color var(--dur-fast, 150ms);
}

.picker-close:hover[b-j8vrj30jbp] { color: var(--c-text, rgba(255,255,255,0.90)); }

.picker-search-wrap[b-j8vrj30jbp] {
    position: relative;
    margin: 0 12px 8px;
    flex-shrink: 0;
}

.picker-search-icon[b-j8vrj30jbp] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-2, rgba(255,255,255,0.52));
    pointer-events: none;
}

.picker-search-input[b-j8vrj30jbp] {
    width: 100%;
    background: var(--c-surface-2, #1c1c26);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-md, 12px);
    color: var(--c-text, rgba(255,255,255,0.90));
    font-size: 0.83rem;
    padding: 8px 10px 8px 32px;
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--dur-fast, 150ms);
}

.picker-search-input[b-j8vrj30jbp]::placeholder { color: var(--c-text-3, rgba(255,255,255,0.28)); }
.picker-search-input:focus[b-j8vrj30jbp] { border-color: rgba(255, 255, 255, 0.20); }

.picker-empty[b-j8vrj30jbp] {
    padding: 32px 16px;
    text-align: center;
    flex-shrink: 0;
    color: var(--c-text-2, rgba(255,255,255,0.52));
    font-size: 0.85rem;
}

.picker-list[b-j8vrj30jbp] {
    overflow-y: auto;
    flex: 1;
    padding: 0 0 8px;
}

.picker-row[b-j8vrj30jbp] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: none;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    transition: background var(--dur-micro, 80ms);
    text-align: left;
}

.picker-row:hover[b-j8vrj30jbp] { background: rgba(255, 255, 255, 0.04); }
.picker-row:active[b-j8vrj30jbp] { background: rgba(255, 255, 255, 0.07); }

.picker-row-art[b-j8vrj30jbp] {
    width: 44px;
    height: 44px;
    border-radius: var(--r-sm, 8px);
    object-fit: cover;
    background: var(--c-surface-2, #1c1c26);
    flex-shrink: 0;
}

.picker-row-meta[b-j8vrj30jbp] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.picker-row-title[b-j8vrj30jbp] {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--c-text, rgba(255,255,255,0.90));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.picker-row--added .picker-row-title[b-j8vrj30jbp] { color: var(--c-accent, #ff5500); }

.picker-row-sub[b-j8vrj30jbp] {
    font-size: 0.72rem;
    color: var(--c-text-2, rgba(255,255,255,0.52));
}

.picker-row-action[b-j8vrj30jbp] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.picker-spinner[b-j8vrj30jbp] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.10);
    border-top-color: var(--c-accent, #ff5500);
    border-radius: 50%;
    animation: picker-spin-b-j8vrj30jbp 0.7s linear infinite;
}

@keyframes picker-spin-b-j8vrj30jbp { to { transform: rotate(360deg); } }
