/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-2ync8gfuuv] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

.page-shell[b-2ync8gfuuv] { min-height: 100vh; }
.site-header[b-2ync8gfuuv] { width: min(1180px, calc(100% - 3rem)); margin: 0 auto; padding: 1.4rem 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand[b-2ync8gfuuv] { display: inline-flex; align-items: center; gap: .7rem; color: var(--text); text-decoration: none; font-size: 1.15rem; font-weight: 800; letter-spacing: -.03em; }
.brand-mark[b-2ync8gfuuv] { width: 2.15rem; height: 2.15rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #07110d; }
.user-nav[b-2ync8gfuuv] { display: flex; align-items: center; gap: 1rem; }
.user-nav .button.active[b-2ync8gfuuv] { border-color: var(--accent); }
.user-copy[b-2ync8gfuuv] { display: flex; flex-direction: column; text-align: right; line-height: 1.25; }
.user-label[b-2ync8gfuuv] { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.main-content[b-2ync8gfuuv] { width: min(1180px, calc(100% - 3rem)); margin: 0 auto; padding: 5rem 0 11rem; }

@media (max-width: 640px) {
    .site-header[b-2ync8gfuuv], .main-content[b-2ync8gfuuv] { width: min(100% - 2rem, 1180px); }
    .site-header[b-2ync8gfuuv] { align-items: flex-start; }
    .user-nav[b-2ync8gfuuv] { align-items: flex-end; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
    .user-copy[b-2ync8gfuuv] { max-width: 11rem; }
    .main-content[b-2ync8gfuuv] { padding-top: 3rem; }
}

    #blazor-error-ui .dismiss[b-2ync8gfuuv] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-41mavujqb4],
.components-reconnect-repeated-attempt-visible[b-41mavujqb4],
.components-reconnect-failed-visible[b-41mavujqb4],
.components-pause-visible[b-41mavujqb4],
.components-resume-failed-visible[b-41mavujqb4],
.components-rejoining-animation[b-41mavujqb4] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-41mavujqb4],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-41mavujqb4],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-41mavujqb4],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-41mavujqb4],
#components-reconnect-modal.components-reconnect-retrying[b-41mavujqb4],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-41mavujqb4],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-41mavujqb4],
#components-reconnect-modal.components-reconnect-failed[b-41mavujqb4],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-41mavujqb4] {
    display: block;
}


#components-reconnect-modal[b-41mavujqb4] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-41mavujqb4 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-41mavujqb4 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-41mavujqb4 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-41mavujqb4]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-41mavujqb4 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-41mavujqb4 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-41mavujqb4 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-41mavujqb4 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-41mavujqb4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-41mavujqb4] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-41mavujqb4] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-41mavujqb4] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-41mavujqb4] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-41mavujqb4] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-41mavujqb4] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-41mavujqb4 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-41mavujqb4] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-41mavujqb4 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SpotifyPlayer.razor.rz.scp.css */
.player-shell[b-zwdg5yh90h] { position: fixed; z-index: 50; right: 1rem; bottom: 1rem; left: 1rem; min-height: 6.5rem; display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(22rem, 1.5fr) minmax(15rem, 1fr); align-items: center; gap: 2rem; padding: .9rem 1rem; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 1.4rem; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 1.2rem 4rem var(--shadow); backdrop-filter: blur(24px); }
.track-info[b-zwdg5yh90h] { min-width: 0; display: flex; align-items: center; gap: .9rem; }
.track-info img[b-zwdg5yh90h], .cover-placeholder[b-zwdg5yh90h] { width: 4.3rem; height: 4.3rem; flex: 0 0 auto; border-radius: .9rem; object-fit: cover; }
.cover-placeholder[b-zwdg5yh90h] { display: grid; place-items: center; background: linear-gradient(135deg, #214c3a, #76d49f); color: #07110d; font-size: 1.8rem; }
.track-info > div:last-child[b-zwdg5yh90h] { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.track-info a[b-zwdg5yh90h] { overflow: hidden; color: var(--text); font-weight: 800; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.track-info span[b-zwdg5yh90h] { overflow: hidden; color: var(--muted); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.transport[b-zwdg5yh90h] { min-width: 0; display: flex; flex-direction: column; gap: .55rem; }
.transport-buttons[b-zwdg5yh90h] { display: flex; align-items: center; justify-content: center; gap: .7rem; }
.icon-button[b-zwdg5yh90h], .play-button[b-zwdg5yh90h] { display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.icon-button[b-zwdg5yh90h] { width: 2rem; height: 2rem; }
.app-icon[b-zwdg5yh90h] { width: 1.1rem; height: 1.1rem; }
.icon-button:hover[b-zwdg5yh90h], .icon-button.active[b-zwdg5yh90h] { color: var(--accent); }
.play-button[b-zwdg5yh90h] { width: 2.6rem; height: 2.6rem; background: var(--text); color: var(--background); font-size: 1.35rem; }
.play-button .app-icon[b-zwdg5yh90h] { width: 1.25rem; height: 1.25rem; }
.timeline[b-zwdg5yh90h] { display: grid; grid-template-columns: 2.6rem 1fr 2.6rem; align-items: center; gap: .6rem; color: var(--muted); font-size: .68rem; font-variant-numeric: tabular-nums; }
.timeline span:last-child[b-zwdg5yh90h] { text-align: right; }
input[type="range"][b-zwdg5yh90h] { width: 100%; height: .3rem; accent-color: var(--accent); cursor: pointer; }
.device-controls[b-zwdg5yh90h] { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: .8rem; }
.device-controls > input[b-zwdg5yh90h] { max-width: 7rem; }
.device[b-zwdg5yh90h] { min-width: 0; display: flex; align-items: center; gap: .55rem; }
.device-dot[b-zwdg5yh90h] { width: .55rem; height: .55rem; flex: 0 0 auto; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--accent) 15%, transparent); }
.device label[b-zwdg5yh90h] { min-width: 0; display: flex; flex-direction: column; }
.device small[b-zwdg5yh90h] { color: var(--muted); font-size: .64rem; }
.device select[b-zwdg5yh90h] { max-width: 13rem; padding: .15rem 1.4rem .15rem 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.device select:focus[b-zwdg5yh90h] { outline: 1px solid var(--accent); outline-offset: .2rem; }
.device select option[b-zwdg5yh90h] { background: var(--surface); color: var(--text); }
.permission-player[b-zwdg5yh90h] { min-height: 5rem; grid-template-columns: 1fr auto; }
.permission-player > div[b-zwdg5yh90h] { display: flex; flex-direction: column; gap: .25rem; }
.permission-player span[b-zwdg5yh90h] { color: var(--muted); font-size: .85rem; }
.idle-player[b-zwdg5yh90h] { min-height: 5rem; grid-template-columns: auto 1fr; }
.idle-player .cover-placeholder[b-zwdg5yh90h] { width: 3.2rem; height: 3.2rem; }
.idle-player > div:last-child[b-zwdg5yh90h] { display: flex; flex-direction: column; gap: .25rem; }
.idle-player span[b-zwdg5yh90h] { color: var(--muted); font-size: .85rem; }
@media (max-width: 800px) { .player-shell[b-zwdg5yh90h] { grid-template-columns: 1fr auto; gap: 1rem; } .transport[b-zwdg5yh90h] { grid-column: 1 / -1; grid-row: 2; } .device-controls .device[b-zwdg5yh90h], .device-controls > span[b-zwdg5yh90h] { display: none; } .device-controls > input[b-zwdg5yh90h] { max-width: 5rem; } }
@media (max-width: 520px) { .player-shell[b-zwdg5yh90h] { right: .5rem; bottom: .5rem; left: .5rem; padding: .7rem; } .track-info img[b-zwdg5yh90h], .cover-placeholder[b-zwdg5yh90h] { width: 3.4rem; height: 3.4rem; } .device-controls[b-zwdg5yh90h] { display: none; } .player-shell[b-zwdg5yh90h] { grid-template-columns: 1fr; } .permission-player[b-zwdg5yh90h] { grid-template-columns: 1fr; } }
/* /Components/Pages/DraftDetails.razor.rz.scp.css */
.back-link[b-ggmhls5c2r] { display: inline-flex; gap: .5rem; margin-bottom: 2rem; color: var(--muted); font-weight: 700; text-decoration: none; }
.back-link:hover[b-ggmhls5c2r] { color: var(--accent); }
.draft-hero[b-ggmhls5c2r] { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: 3rem; }
.draft-hero h1[b-ggmhls5c2r] { max-width: 15ch; margin-bottom: 1rem; font-size: clamp(2.8rem, 7vw, 5.8rem); line-height: .95; letter-spacing: -.06em; overflow-wrap: anywhere; }
.description[b-ggmhls5c2r] { max-width: 46rem; color: var(--muted); line-height: 1.65; }
.summary[b-ggmhls5c2r] { margin-bottom: 0; color: var(--muted); }
.summary strong[b-ggmhls5c2r] { color: var(--text); }
.draft-actions[b-ggmhls5c2r] { flex: 0 0 auto; }
.primary-actions[b-ggmhls5c2r], .edit-actions[b-ggmhls5c2r] { display: flex; flex-wrap: wrap; gap: .6rem; }
.edit-card[b-ggmhls5c2r] { display: grid; grid-template-columns: minmax(12rem, .7fr) minmax(15rem, 1fr); gap: 1.2rem 2rem; margin: -1rem 0 3rem; padding: 1.5rem; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 1.25rem; background: var(--surface-glass); }
.edit-card > div:first-child[b-ggmhls5c2r] { grid-row: span 2; }
.edit-card h2[b-ggmhls5c2r] { margin-bottom: 0; }
.edit-card label[b-ggmhls5c2r] { display: flex; flex-direction: column; gap: .45rem; color: var(--muted); font-size: .78rem; font-weight: 750; }
.edit-card input:not([type="checkbox"])[b-ggmhls5c2r], .edit-card textarea[b-ggmhls5c2r], .edit-card select[b-ggmhls5c2r] { width: 100%; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--quiet); color: var(--text); font: inherit; resize: vertical; }
.edit-card select option[b-ggmhls5c2r] { background: var(--surface); color: var(--text); }
.visibility-choice[b-ggmhls5c2r] { flex-direction: row !important; align-items: center; align-self: center; }
.visibility-choice input[b-ggmhls5c2r] { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.edit-card input:focus[b-ggmhls5c2r], .edit-card textarea:focus[b-ggmhls5c2r] { border-color: var(--accent); outline: none; }
.edit-actions[b-ggmhls5c2r] { grid-column: 2; align-items: center; }
.danger-link[b-ggmhls5c2r] { margin-left: auto; border: 0; background: transparent; color: #e97979; font-weight: 800; cursor: pointer; }
.delete-card[b-ggmhls5c2r] { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin: -1rem 0 3rem; padding: 1.25rem; border: 1px solid color-mix(in srgb, #d65c5c 70%, var(--line)); border-radius: 1rem; background: color-mix(in srgb, #d65c5c 8%, transparent); }
.delete-card p[b-ggmhls5c2r] { margin: .35rem 0 0; color: var(--muted); }
.delete-card > div:last-child[b-ggmhls5c2r] { display: flex; flex-wrap: wrap; gap: .6rem; }
.button-danger[b-ggmhls5c2r] { background: #c84f4f; color: white; }
.confirm-card[b-ggmhls5c2r] { max-width: 27rem; padding: 1.25rem; border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); border-radius: 1.1rem; background: var(--surface-glass); }
.confirm-card > strong[b-ggmhls5c2r] { display: block; margin-bottom: .5rem; }
.confirm-card p[b-ggmhls5c2r] { margin-bottom: 1rem; color: var(--muted); line-height: 1.5; }
.confirm-card > div[b-ggmhls5c2r] { display: flex; flex-wrap: wrap; gap: .6rem; }
.publish-message[b-ggmhls5c2r] { margin: -1rem 0 3rem; padding: 1rem 1.2rem; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 1rem; background: color-mix(in srgb, var(--accent) 9%, transparent); }
.publish-message-error[b-ggmhls5c2r] { border-color: color-mix(in srgb, #d65c5c 70%, var(--line)); background: color-mix(in srgb, #d65c5c 9%, transparent); }
.button:disabled[b-ggmhls5c2r] { cursor: wait; opacity: .65; transform: none; }
.prompt-card[b-ggmhls5c2r] { margin-bottom: 4rem; padding: 1.5rem; border-left: 3px solid var(--accent); border-radius: 0 1rem 1rem 0; background: var(--quiet); }
.prompt-card .eyebrow[b-ggmhls5c2r] { margin-bottom: .6rem; }
.prompt-card blockquote[b-ggmhls5c2r] { max-width: 55rem; margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.track-heading[b-ggmhls5c2r] { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
.track-heading h2[b-ggmhls5c2r] { margin-bottom: 0; font-size: 2rem; }
.track-list[b-ggmhls5c2r] { overflow: hidden; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--surface-glass); }
.track-row[b-ggmhls5c2r] { display: grid; grid-template-columns: 2.5rem minmax(12rem, 1.5fr) minmax(8rem, 1fr) 4rem auto; align-items: center; gap: 1rem; min-height: 4.5rem; padding: .7rem 1.2rem; border-top: 1px solid var(--line); }
.track-actions[b-ggmhls5c2r] { display: flex; gap: .3rem; }
.track-actions button[b-ggmhls5c2r] { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: .55rem; background: var(--quiet); color: var(--muted); cursor: pointer; }
.track-actions button:hover:not(:disabled)[b-ggmhls5c2r] { border-color: var(--accent); color: var(--accent); }
.track-actions .remove-track:hover:not(:disabled)[b-ggmhls5c2r] { border-color: #d65c5c; color: #e97979; }
.track-actions button:disabled[b-ggmhls5c2r] { cursor: default; opacity: .3; }
.track-row:first-child[b-ggmhls5c2r] { border-top: 0; }
.track-labels[b-ggmhls5c2r] { min-height: 2.8rem; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.position[b-ggmhls5c2r], .album[b-ggmhls5c2r], .duration[b-ggmhls5c2r] { color: var(--muted); font-size: .88rem; }
.track-name[b-ggmhls5c2r] { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.track-name a[b-ggmhls5c2r] { overflow: hidden; color: var(--text); font-weight: 750; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.track-name a:hover[b-ggmhls5c2r] { color: var(--accent); }
.track-name small[b-ggmhls5c2r], .album[b-ggmhls5c2r] { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.duration[b-ggmhls5c2r] { font-variant-numeric: tabular-nums; text-align: right; }
.explicit[b-ggmhls5c2r] { display: inline-grid; place-items: center; width: 1rem; height: 1rem; margin-left: .3rem; border-radius: .2rem; background: var(--muted); color: var(--background); font-size: .65rem; font-weight: 900; }
.details-state[b-ggmhls5c2r] { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--surface-glass); }
.details-state h1[b-ggmhls5c2r] { margin-bottom: .45rem; }
.details-state p[b-ggmhls5c2r] { margin-bottom: 0; color: var(--muted); line-height: 1.6; }
.details-state:has(.loading-mark)[b-ggmhls5c2r] { justify-content: flex-start; }
.loading-mark[b-ggmhls5c2r] { flex: 0 0 auto; width: 2rem; height: 2rem; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: detail-spin-b-ggmhls5c2r .75s linear infinite; }
.error-state[b-ggmhls5c2r] { border-color: color-mix(in srgb, #d65c5c 70%, var(--line)); }
@keyframes detail-spin-b-ggmhls5c2r { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .draft-hero[b-ggmhls5c2r] { align-items: flex-start; flex-direction: column; } .edit-card[b-ggmhls5c2r] { grid-template-columns: 1fr; } .edit-card > div:first-child[b-ggmhls5c2r] { grid-row: auto; } .edit-actions[b-ggmhls5c2r] { grid-column: 1; } .delete-card[b-ggmhls5c2r] { align-items: flex-start; flex-direction: column; } .track-row[b-ggmhls5c2r] { grid-template-columns: 2rem minmax(0, 1fr) 3.5rem auto; } .track-row > .album[b-ggmhls5c2r], .track-labels > :nth-child(3)[b-ggmhls5c2r] { display: none; } .details-state[b-ggmhls5c2r] { align-items: flex-start; flex-direction: column; } }
.primary-actions .app-icon[b-ggmhls5c2r] { width: 1rem; height: 1rem; }
.position[b-ggmhls5c2r] { display: flex; align-items: center; gap: .45rem; }
.track-play[b-ggmhls5c2r] { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); cursor: pointer; }
.track-play:hover[b-ggmhls5c2r] { background: var(--accent); color: var(--background); }
.track-play .app-icon[b-ggmhls5c2r] { width: .8rem; height: .8rem; }
/* /Components/Pages/Drafts.razor.rz.scp.css */
.drafts-heading[b-dpo0ll5rsy] { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.drafts-heading h1[b-dpo0ll5rsy] { margin-bottom: .8rem; font-size: clamp(2.8rem, 7vw, 5.4rem); line-height: .95; letter-spacing: -.06em; }
.drafts-heading p:not(.eyebrow)[b-dpo0ll5rsy] { max-width: 42rem; margin-bottom: 0; color: var(--muted); line-height: 1.65; }
.draft-count[b-dpo0ll5rsy] { margin-bottom: 1rem; color: var(--muted); font-size: .85rem; font-weight: 700; }
.draft-grid[b-dpo0ll5rsy] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.draft-card[b-dpo0ll5rsy] { min-height: 18rem; display: flex; flex-direction: column; gap: 1.5rem; padding: 1.6rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--surface-glass); }
.draft-card-top[b-dpo0ll5rsy], .draft-meta[b-dpo0ll5rsy] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.badge-row[b-dpo0ll5rsy] { display: flex; flex-wrap: wrap; gap: .4rem; }
.draft-card time[b-dpo0ll5rsy], .draft-meta[b-dpo0ll5rsy] { color: var(--muted); font-size: .78rem; }
.draft-card h2[b-dpo0ll5rsy] { margin-bottom: .6rem; font-size: 1.55rem; }
.draft-card h2 a[b-dpo0ll5rsy] { color: var(--text); text-decoration: none; }
.draft-card h2 a:hover[b-dpo0ll5rsy] { color: var(--accent); }
.draft-card p[b-dpo0ll5rsy] { display: -webkit-box; overflow: hidden; margin-bottom: 0; color: var(--muted); line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.status-badge[b-dpo0ll5rsy] { padding: .35rem .6rem; border-radius: 999px; font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.status-draft[b-dpo0ll5rsy] { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.status-published[b-dpo0ll5rsy] { background: var(--accent); color: var(--accent-text); }
.status-superseded[b-dpo0ll5rsy] { background: var(--quiet); color: var(--muted); }
.mode-badge[b-dpo0ll5rsy] { padding: .35rem .6rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .68rem; font-weight: 750; }
.draft-meta[b-dpo0ll5rsy] { padding-top: 1rem; border-top: 1px solid var(--line); }
.details-link[b-dpo0ll5rsy] { align-self: flex-end; margin-top: auto; color: var(--accent); font-weight: 800; text-decoration: none; }
.draft-state[b-dpo0ll5rsy] { min-height: 12rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--surface-glass); }
.draft-state h2[b-dpo0ll5rsy] { margin-bottom: .45rem; }
.draft-state p[b-dpo0ll5rsy] { max-width: 48rem; margin-bottom: 0; color: var(--muted); line-height: 1.6; }
.draft-state:has(.loading-mark)[b-dpo0ll5rsy] { justify-content: flex-start; }
.loading-mark[b-dpo0ll5rsy] { flex: 0 0 auto; width: 2rem; height: 2rem; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: draft-spin-b-dpo0ll5rsy .75s linear infinite; }
.error-state[b-dpo0ll5rsy] { border-color: color-mix(in srgb, #d65c5c 70%, var(--line)); }
@keyframes draft-spin-b-dpo0ll5rsy { to { transform: rotate(360deg); } }
@media (max-width: 700px) { .drafts-heading[b-dpo0ll5rsy] { align-items: flex-start; flex-direction: column; } .draft-grid[b-dpo0ll5rsy] { grid-template-columns: 1fr; } .draft-state[b-dpo0ll5rsy] { align-items: flex-start; flex-direction: column; } }
/* /Components/Pages/Library.razor.rz.scp.css */
.library-heading[b-au7iv8z1gn] { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.library-heading h1[b-au7iv8z1gn] { margin-bottom: .8rem; font-size: clamp(3rem, 7vw, 5.7rem); line-height: .95; letter-spacing: -.06em; }
.library-heading p:not(.eyebrow)[b-au7iv8z1gn] { max-width: 48rem; margin-bottom: 0; color: var(--muted); line-height: 1.65; }
.library-actions[b-au7iv8z1gn] { display: flex; flex-wrap: wrap; gap: .6rem; }
.library-message[b-au7iv8z1gn] { margin-bottom: 1.5rem; padding: 1rem 1.2rem; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 1rem; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.error-message[b-au7iv8z1gn], .error-state[b-au7iv8z1gn] { border-color: color-mix(in srgb, #d65c5c 70%, var(--line)); }
.library-sections[b-au7iv8z1gn] { display: flex; flex-direction: column; gap: 1rem; }
.library-section[b-au7iv8z1gn] { overflow: hidden; border: 1px solid var(--line); border-radius: 1.35rem; background: var(--surface-glass); }
.library-section[open][b-au7iv8z1gn] { border-color: color-mix(in srgb, var(--accent) 24%, var(--line)); }
.library-section summary[b-au7iv8z1gn] { min-height: 6rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.3rem 1.5rem; cursor: pointer; list-style: none; }
.library-section summary[b-au7iv8z1gn]::-webkit-details-marker { display: none; }
.library-section summary > span:first-child[b-au7iv8z1gn] { display: flex; flex-direction: column; gap: .3rem; }
.library-section summary strong[b-au7iv8z1gn] { font-size: 1.15rem; }
.library-section summary small[b-au7iv8z1gn] { color: var(--muted); line-height: 1.4; }
.section-count[b-au7iv8z1gn] { min-width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 999px; background: var(--quiet); color: var(--accent); font-size: .8rem; font-weight: 850; }
.section-content[b-au7iv8z1gn] { padding: 0 1.5rem 1.5rem; border-top: 1px solid var(--line); }
.managed-grid[b-au7iv8z1gn] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-top: 1.5rem; }
.managed-card[b-au7iv8z1gn] { min-height: 18rem; display: flex; flex-direction: column; gap: 1.3rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: 1.1rem; background: var(--quiet); }
.managed-card-top[b-au7iv8z1gn], .managed-meta[b-au7iv8z1gn] { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.mode-badge[b-au7iv8z1gn], .working-badge[b-au7iv8z1gn], .relationship[b-au7iv8z1gn] { padding: .3rem .55rem; border-radius: 999px; font-size: .66rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.mode-badge[b-au7iv8z1gn] { border: 1px solid var(--line); color: var(--muted); }
.working-badge[b-au7iv8z1gn] { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.revision-copy[b-au7iv8z1gn] { margin-bottom: .45rem; color: var(--accent); font-size: .72rem; font-weight: 800; }
.managed-card h2[b-au7iv8z1gn] { margin-bottom: .6rem; font-size: 1.55rem; }
.managed-card h2 a[b-au7iv8z1gn], .spotify-list h3 a[b-au7iv8z1gn] { color: var(--text); text-decoration: none; }
.managed-card h2 a:hover[b-au7iv8z1gn], .spotify-list h3 a:hover[b-au7iv8z1gn] { color: var(--accent); }
.description[b-au7iv8z1gn] { display: -webkit-box; overflow: hidden; margin-bottom: 0; color: var(--muted); line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.managed-meta[b-au7iv8z1gn] { padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.details-link[b-au7iv8z1gn] { align-self: flex-end; margin-top: auto; color: var(--accent); font-weight: 800; text-decoration: none; }
.spotify-list[b-au7iv8z1gn] { display: flex; flex-direction: column; padding-top: .5rem; }
.spotify-list article[b-au7iv8z1gn] { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.spotify-list article:first-child[b-au7iv8z1gn] { border-top: 0; }
.spotify-list h3[b-au7iv8z1gn] { margin: .35rem 0; }
.spotify-list p[b-au7iv8z1gn] { margin-bottom: 0; color: var(--muted); font-size: .85rem; }
.relationship[b-au7iv8z1gn] { padding: 0; color: var(--accent); }
.empty-copy[b-au7iv8z1gn] { margin: 1.5rem 0 0; color: var(--muted); }
.library-state[b-au7iv8z1gn] { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--surface-glass); }
.library-state p[b-au7iv8z1gn] { margin-bottom: 0; color: var(--muted); }
.library-state:has(.loading-mark)[b-au7iv8z1gn] { justify-content: flex-start; }
.loading-mark[b-au7iv8z1gn] { width: 2rem; height: 2rem; flex: 0 0 auto; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin-b-au7iv8z1gn .75s linear infinite; }
@keyframes spin-b-au7iv8z1gn { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .library-heading[b-au7iv8z1gn] { align-items: flex-start; flex-direction: column; } .managed-grid[b-au7iv8z1gn] { grid-template-columns: 1fr; } .library-section summary[b-au7iv8z1gn] { align-items: flex-start; } .spotify-list article[b-au7iv8z1gn] { align-items: flex-start; } }
/* /Components/Pages/ManagedPlaylistDetails.razor.rz.scp.css */
.back-link[b-7iphebplog] { display: inline-flex; margin-bottom: 2rem; color: var(--muted); font-weight: 750; text-decoration: none; }
.back-link:hover[b-7iphebplog] { color: var(--accent); }
.managed-hero[b-7iphebplog] { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: 3rem; }
.managed-hero h1[b-7iphebplog] { max-width: 15ch; margin-bottom: 1rem; font-size: clamp(3rem, 7vw, 5.8rem); line-height: .95; letter-spacing: -.06em; overflow-wrap: anywhere; }
.description[b-7iphebplog] { max-width: 48rem; color: var(--muted); line-height: 1.65; }
.summary[b-7iphebplog] { margin-bottom: 0; color: var(--muted); }
.hero-actions[b-7iphebplog] { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }
.working-note[b-7iphebplog] { display: flex; align-items: center; gap: 1rem; margin-bottom: 4rem; padding: 1.1rem 1.25rem; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 1rem; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.working-note > span[b-7iphebplog] { width: .7rem; height: .7rem; flex: 0 0 auto; border-radius: 50%; background: var(--accent); }
.working-note p[b-7iphebplog] { margin: .25rem 0 0; color: var(--muted); }
.history-heading[b-7iphebplog] { margin-bottom: 1.5rem; }
.history-heading h2[b-7iphebplog] { margin-bottom: 0; font-size: 2.3rem; }
.revision-list[b-7iphebplog] { display: flex; flex-direction: column; gap: .7rem; }
.revision-card[b-7iphebplog] { overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface-glass); }
.revision-card summary[b-7iphebplog] { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.1rem 1.25rem; cursor: pointer; list-style: none; }
.revision-card summary[b-7iphebplog]::-webkit-details-marker { display: none; }
.revision-card summary > div[b-7iphebplog] { display: flex; align-items: center; gap: .8rem; }
.revision-card summary > span[b-7iphebplog] { color: var(--muted); font-size: .8rem; }
.status[b-7iphebplog] { padding: .3rem .5rem; border-radius: 999px; font-size: .64rem; font-weight: 850; text-transform: uppercase; }
.status.published[b-7iphebplog] { background: var(--accent); color: var(--accent-text); }
.status.working[b-7iphebplog] { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.status.superseded[b-7iphebplog] { background: var(--quiet); color: var(--muted); }
.revision-body[b-7iphebplog] { padding: 1.2rem 1.25rem; border-top: 1px solid var(--line); }
.revision-body > p[b-7iphebplog] { max-width: 50rem; color: var(--muted); line-height: 1.6; }
.revision-body dl[b-7iphebplog] { display: flex; flex-wrap: wrap; gap: 2rem; margin: 1.2rem 0; }
.revision-body dl div[b-7iphebplog] { display: flex; flex-direction: column; gap: .2rem; }
.revision-body dt[b-7iphebplog] { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.revision-body dd[b-7iphebplog] { margin: 0; font-size: .85rem; }
.details-link[b-7iphebplog] { color: var(--accent); font-weight: 800; text-decoration: none; }
.details-state[b-7iphebplog] { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--surface-glass); }
.details-state p[b-7iphebplog] { margin-bottom: 0; color: var(--muted); }
.details-state:has(.loading-mark)[b-7iphebplog] { justify-content: flex-start; }
.loading-mark[b-7iphebplog] { width: 2rem; height: 2rem; flex: 0 0 auto; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin-b-7iphebplog .75s linear infinite; }
.error-state[b-7iphebplog] { border-color: color-mix(in srgb, #d65c5c 70%, var(--line)); }
@keyframes spin-b-7iphebplog { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .managed-hero[b-7iphebplog] { align-items: flex-start; flex-direction: column; } .hero-actions[b-7iphebplog] { justify-content: flex-start; } .revision-card summary[b-7iphebplog] { align-items: flex-start; } .revision-card summary > div[b-7iphebplog] { align-items: flex-start; flex-direction: column; } }
/* /Components/Pages/PlaylistDetails.razor.rz.scp.css */
.back-link[b-xxqfqw5yti] { display: inline-flex; gap: .5rem; margin-bottom: 2rem; color: var(--muted); font-weight: 700; text-decoration: none; }
.back-link:hover[b-xxqfqw5yti] { color: var(--accent); }
.playlist-hero[b-xxqfqw5yti] { display: grid; grid-template-columns: minmax(15rem, 22rem) 1fr; align-items: end; gap: clamp(2rem, 5vw, 4rem); margin-bottom: 5rem; }
.playlist-hero > img[b-xxqfqw5yti], .detail-placeholder[b-xxqfqw5yti] { width: 100%; aspect-ratio: 1; border-radius: 1.5rem; object-fit: cover; box-shadow: 0 2rem 6rem var(--shadow); }
.detail-placeholder[b-xxqfqw5yti] { display: grid; place-items: center; background: linear-gradient(135deg, #214c3a, #76d49f); color: rgba(8, 17, 14, .72); font-size: 7rem; }
.hero-copy h1[b-xxqfqw5yti] { max-width: 15ch; margin-bottom: 1rem; font-size: clamp(2.8rem, 7vw, 5.8rem); line-height: .95; letter-spacing: -.06em; overflow-wrap: anywhere; }
.description[b-xxqfqw5yti] { max-width: 46rem; color: var(--muted); line-height: 1.65; }
.summary[b-xxqfqw5yti] { margin: 1.2rem 0 1.6rem; color: var(--muted); }
.summary strong[b-xxqfqw5yti] { color: var(--text); }
.cache-note[b-xxqfqw5yti] { margin: -1rem 0 1.6rem; color: var(--muted); font-size: .78rem; }
.track-section[b-xxqfqw5yti] { margin-top: 2rem; }
.track-heading[b-xxqfqw5yti] { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
.track-heading h2[b-xxqfqw5yti] { margin-bottom: 0; font-size: 2rem; }
.track-list[b-xxqfqw5yti] { overflow: hidden; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--surface-glass); }
.track-row[b-xxqfqw5yti] { display: grid; grid-template-columns: 2.5rem minmax(12rem, 1.5fr) minmax(8rem, 1fr) 4rem; align-items: center; gap: 1rem; min-height: 4.5rem; padding: .7rem 1.2rem; border-top: 1px solid var(--line); }
.track-row:first-child[b-xxqfqw5yti] { border-top: 0; }
.track-labels[b-xxqfqw5yti] { min-height: 2.8rem; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.position[b-xxqfqw5yti], .album[b-xxqfqw5yti], .duration[b-xxqfqw5yti] { color: var(--muted); font-size: .88rem; }
.track-name[b-xxqfqw5yti] { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.track-name a[b-xxqfqw5yti], .track-name strong[b-xxqfqw5yti] { overflow: hidden; color: var(--text); font-weight: 750; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.track-name a:hover[b-xxqfqw5yti] { color: var(--accent); }
.track-name small[b-xxqfqw5yti] { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.album[b-xxqfqw5yti] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duration[b-xxqfqw5yti] { font-variant-numeric: tabular-nums; text-align: right; }
.explicit[b-xxqfqw5yti] { display: inline-grid; place-items: center; width: 1rem; height: 1rem; margin-left: .3rem; border-radius: .2rem; background: var(--muted); color: var(--background); font-size: .65rem; font-weight: 900; }
.details-state[b-xxqfqw5yti] { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--surface-glass); }
.details-state h1[b-xxqfqw5yti], .details-state h2[b-xxqfqw5yti] { margin-bottom: .45rem; }
.details-state p[b-xxqfqw5yti] { margin-bottom: 0; color: var(--muted); line-height: 1.6; }
.loading-mark[b-xxqfqw5yti] { flex: 0 0 auto; width: 2rem; height: 2rem; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: detail-spin-b-xxqfqw5yti .75s linear infinite; }
.details-state:has(.loading-mark)[b-xxqfqw5yti] { justify-content: flex-start; }
.error-state[b-xxqfqw5yti] { border-color: color-mix(in srgb, #d65c5c 70%, var(--line)); }
@keyframes detail-spin-b-xxqfqw5yti { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
    .playlist-hero[b-xxqfqw5yti] { grid-template-columns: 1fr; align-items: start; }
    .playlist-hero > img[b-xxqfqw5yti], .detail-placeholder[b-xxqfqw5yti] { max-width: 22rem; }
    .track-row[b-xxqfqw5yti] { grid-template-columns: 2rem minmax(0, 1fr) 3.5rem; }
    .track-row > .album[b-xxqfqw5yti], .track-labels > :nth-child(3)[b-xxqfqw5yti] { display: none; }
    .details-state[b-xxqfqw5yti] { align-items: flex-start; flex-direction: column; }
}
.playlist-actions[b-xxqfqw5yti] { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.playlist-actions .app-icon[b-xxqfqw5yti] { width: 1rem; height: 1rem; }
.position[b-xxqfqw5yti] { display: flex; align-items: center; gap: .45rem; }
.track-play[b-xxqfqw5yti] { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); cursor: pointer; }
.track-play:hover[b-xxqfqw5yti] { background: var(--accent); color: var(--background); }
.track-play:disabled[b-xxqfqw5yti] { opacity: .3; cursor: default; }
.track-play .app-icon[b-xxqfqw5yti] { width: .8rem; height: .8rem; }
/* /Components/Pages/Playlists.razor.rz.scp.css */
.playlists-heading[b-zcxsg91mp8] { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
.playlists-heading h1[b-zcxsg91mp8] { margin-bottom: 1rem; font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -.055em; line-height: 1; }
.playlists-heading > div > p:last-child[b-zcxsg91mp8] { max-width: 44rem; color: var(--muted); font-size: 1.1rem; line-height: 1.65; }
.playlist-actions[b-zcxsg91mp8] { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; }
.sync-summary[b-zcxsg91mp8] { display: flex; align-items: center; gap: .7rem; margin: -1.25rem 0 1.5rem; color: var(--muted); font-size: .85rem; }
.sync-summary p[b-zcxsg91mp8] { margin: 0; }
.sync-dot[b-zcxsg91mp8] { width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--accent) 15%, transparent); }
.sync-dot-active[b-zcxsg91mp8] { animation: sync-pulse-b-zcxsg91mp8 1.1s ease-in-out infinite; }
@keyframes sync-pulse-b-zcxsg91mp8 { 50% { opacity: .35; transform: scale(.75); } }
.sync-message[b-zcxsg91mp8] { margin: -1rem 0 1.5rem; padding: .85rem 1rem; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: .8rem; background: color-mix(in srgb, var(--accent) 8%, var(--surface-glass)); color: var(--text); }
.sync-message-error[b-zcxsg91mp8] { border-color: color-mix(in srgb, #d65c5c 70%, var(--line)); background: color-mix(in srgb, #d65c5c 8%, var(--surface-glass)); }
.playlist-filter[b-zcxsg91mp8] { display: inline-flex; align-items: center; gap: .65rem; margin: -.5rem 0 1.5rem; color: var(--muted); cursor: pointer; font-size: .88rem; font-weight: 650; }
.playlist-filter input[b-zcxsg91mp8] { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
.playlist-count[b-zcxsg91mp8] { margin-bottom: 1rem; color: var(--muted); font-size: .85rem; font-weight: 700; }
.playlist-grid[b-zcxsg91mp8] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.playlist-card[b-zcxsg91mp8] { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--surface-glass); box-shadow: 0 1rem 3rem var(--shadow); transition: transform .2s ease, border-color .2s ease; }
.playlist-followed-badge[b-zcxsg91mp8] { position: absolute; z-index: 1; top: .8rem; right: .8rem; padding: .4rem .65rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(8, 17, 14, .82); box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .22); color: #fff; font-size: .67rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(.5rem); }
.playlist-collaborative-badge[b-zcxsg91mp8] { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 78%, #08110e); }
.playlist-card:hover[b-zcxsg91mp8] { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.playlist-card > img[b-zcxsg91mp8], .playlist-placeholder[b-zcxsg91mp8] { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; background: linear-gradient(135deg, #214c3a, #76d49f); }
.playlist-placeholder[b-zcxsg91mp8] { display: grid; place-items: center; color: rgba(8, 17, 14, .72); font-size: 5rem; }
.playlist-copy[b-zcxsg91mp8] { padding: 1.25rem; }
.playlist-meta[b-zcxsg91mp8] { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; color: var(--accent); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.playlist-card h2[b-zcxsg91mp8] { overflow: hidden; margin-bottom: .35rem; font-size: 1.25rem; text-overflow: ellipsis; white-space: nowrap; }
.playlist-title-link[b-zcxsg91mp8] { color: inherit; text-decoration: none; }
.playlist-title-link:hover[b-zcxsg91mp8] { color: var(--accent); }
.playlist-owner[b-zcxsg91mp8] { margin-bottom: .8rem; color: var(--muted); font-size: .85rem; }
.playlist-description[b-zcxsg91mp8] { display: -webkit-box; overflow: hidden; min-height: 2.8rem; margin-bottom: 1rem; color: var(--muted); font-size: .88rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.spotify-link[b-zcxsg91mp8] { color: var(--text); font-size: .88rem; font-weight: 750; text-decoration: none; }
.spotify-link:hover[b-zcxsg91mp8] { color: var(--accent); }
.details-link[b-zcxsg91mp8] { float: right; color: var(--accent); font-size: .88rem; font-weight: 750; text-decoration: none; }
.playlist-state[b-zcxsg91mp8] { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--surface-glass); }
.playlist-state h2[b-zcxsg91mp8] { margin-bottom: .45rem; }
.playlist-state p[b-zcxsg91mp8] { margin-bottom: 0; color: var(--muted); line-height: 1.6; }
.loading-mark[b-zcxsg91mp8] { flex: 0 0 auto; width: 2rem; height: 2rem; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: playlist-spin-b-zcxsg91mp8 .75s linear infinite; }
.playlist-state:has(.loading-mark)[b-zcxsg91mp8] { justify-content: flex-start; }
.error-state[b-zcxsg91mp8] { border-color: color-mix(in srgb, #d65c5c 70%, var(--line)); }
@keyframes playlist-spin-b-zcxsg91mp8 { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .playlist-grid[b-zcxsg91mp8] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .playlists-heading[b-zcxsg91mp8] { align-items: flex-start; flex-direction: column; } .playlist-actions[b-zcxsg91mp8] { justify-content: flex-start; width: 100%; } .playlist-actions .button[b-zcxsg91mp8] { flex: 1 1 auto; } .playlist-grid[b-zcxsg91mp8] { grid-template-columns: 1fr; } .playlist-state[b-zcxsg91mp8] { align-items: flex-start; flex-direction: column; } }
/* /Components/Pages/Settings.razor.rz.scp.css */
.settings-heading[b-bbsg8mkdn2] { max-width: 46rem; margin-bottom: 2.5rem; }
.settings-heading h1[b-bbsg8mkdn2] { margin-bottom: 1rem; font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -.055em; line-height: 1; }
.settings-heading > p:last-child[b-bbsg8mkdn2] { color: var(--muted); font-size: 1.15rem; line-height: 1.65; }
.settings-grid[b-bbsg8mkdn2] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.settings-card[b-bbsg8mkdn2] { position: relative; padding: clamp(1.5rem, 4vw, 2.25rem); border: 1px solid var(--line); border-radius: 1.25rem; background: var(--surface-glass); box-shadow: 0 1rem 3rem var(--shadow); }
.settings-card h2[b-bbsg8mkdn2] { margin: .45rem 0 1.5rem; font-size: 1.55rem; }
.settings-card > p[b-bbsg8mkdn2] { color: var(--muted); }
.card-kicker[b-bbsg8mkdn2] { color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.card-copy[b-bbsg8mkdn2] { line-height: 1.6; }
.profile-details[b-bbsg8mkdn2] { margin: 0; }
.profile-details div[b-bbsg8mkdn2] { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--line); }
.profile-details dt[b-bbsg8mkdn2] { color: var(--muted); }
.profile-details dd[b-bbsg8mkdn2] { margin: 0; overflow-wrap: anywhere; font-weight: 700; }
.theme-options[b-bbsg8mkdn2] { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 1.5rem; }
.theme-option[b-bbsg8mkdn2] { display: flex; flex-direction: column; gap: .8rem; padding: .75rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--quiet); color: var(--text); cursor: pointer; text-align: left; }
.theme-option.selected[b-bbsg8mkdn2] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.theme-option:focus-visible[b-bbsg8mkdn2] { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-option small[b-bbsg8mkdn2] { color: var(--muted); }
.theme-preview[b-bbsg8mkdn2] { height: 5.5rem; display: block; border-radius: .65rem; border: 1px solid var(--line); }
.system-preview[b-bbsg8mkdn2] { background: linear-gradient(135deg, #08110e 0 50%, #f3f7f4 50%); }
.dark-preview[b-bbsg8mkdn2] { background: radial-gradient(circle at 75% 15%, #246044, transparent 55%), #08110e; }
.light-preview[b-bbsg8mkdn2] { background: radial-gradient(circle at 75% 15%, #a8e8c8, transparent 55%), #f3f7f4; }
.saved-message[b-bbsg8mkdn2] { margin: 1rem 0 0; color: var(--accent) !important; font-weight: 750; }
.settings-error[b-bbsg8mkdn2] { max-width: 36rem; }
.page-message[b-bbsg8mkdn2] { margin-bottom: 1.5rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--quiet); }
.success-message[b-bbsg8mkdn2] { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.error-message[b-bbsg8mkdn2] { border-color: #d65c5c; }
.spotify-card[b-bbsg8mkdn2] { grid-column: 1 / -1; }
.spotify-card .button[b-bbsg8mkdn2] { margin-top: .5rem; }
.connection-heading[b-bbsg8mkdn2] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.connection-heading h2[b-bbsg8mkdn2] { margin-bottom: .35rem; }
.connection-name[b-bbsg8mkdn2] { margin-bottom: .2rem; font-size: 1.1rem; font-weight: 750; }
.connection-email[b-bbsg8mkdn2] { color: var(--muted); }
.connection-status[b-bbsg8mkdn2] { padding: .4rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 760px) {
    .settings-grid[b-bbsg8mkdn2] { grid-template-columns: 1fr; }
    .profile-details div[b-bbsg8mkdn2] { grid-template-columns: 1fr; gap: .35rem; }
    .theme-options[b-bbsg8mkdn2] { grid-template-columns: 1fr; }
}
/* /Components/Pages/SystemLogs.razor.rz.scp.css */
.logs-hero[b-6froqriht4] { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.logs-hero h1[b-6froqriht4] { margin: .15rem 0 .6rem; font-size: clamp(2.8rem, 7vw, 5.5rem); letter-spacing: -.07em; line-height: .95; }
.logs-hero p[b-6froqriht4] { max-width: 46rem; color: var(--muted); }
.filter-card[b-6froqriht4] { display: grid; grid-template-columns: 12rem 12rem minmax(16rem, 1fr) auto; align-items: end; gap: 1rem; padding: 1.1rem; margin-bottom: 1.5rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--surface); }
.filter-card label[b-6froqriht4] { display: flex; flex-direction: column; gap: .4rem; }
.filter-card label span[b-6froqriht4] { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.filter-card select[b-6froqriht4], .filter-card input[b-6froqriht4] { width: 100%; min-height: 2.75rem; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--background); color: var(--text); font: inherit; }
.result-summary[b-6froqriht4] { display: flex; justify-content: space-between; margin: 0 0 .8rem; color: var(--muted); font-size: .82rem; }
.result-summary strong[b-6froqriht4] { color: var(--text); }
.log-list[b-6froqriht4] { display: flex; flex-direction: column; gap: .7rem; }
.log-entry[b-6froqriht4] { position: relative; overflow: hidden; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.log-entry[b-6froqriht4]::before { position: absolute; inset: 0 auto 0 0; width: .22rem; content: ""; background: var(--muted); }
.level-warning[b-6froqriht4]::before { background: #eab84c; }.level-error[b-6froqriht4]::before,.level-fatal[b-6froqriht4]::before { background: #ef6a6a; }.level-information[b-6froqriht4]::before { background: var(--accent); }
.log-meta[b-6froqriht4] { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; color: var(--muted); font-size: .75rem; }
.level[b-6froqriht4] { padding: .2rem .45rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); font-weight: 900; text-transform: uppercase; }
.source[b-6froqriht4] { overflow: hidden; max-width: 20rem; text-overflow: ellipsis; white-space: nowrap; }
.message[b-6froqriht4] { margin: .75rem 0 .35rem; overflow-wrap: anywhere; font-weight: 650; }
.log-entry code[b-6froqriht4] { color: var(--muted); font-size: .75rem; }
.log-entry details[b-6froqriht4] { margin-top: .8rem; }.log-entry summary[b-6froqriht4] { color: var(--accent); cursor: pointer; font-weight: 750; }.log-entry pre[b-6froqriht4] { max-height: 28rem; overflow: auto; padding: .9rem; border-radius: .7rem; background: var(--background); color: var(--text); font-size: .75rem; white-space: pre-wrap; }
.logs-state[b-6froqriht4] { min-height: 10rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 2rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--surface); }.logs-state h2[b-6froqriht4] { margin: 0 0 .35rem; }.logs-state p[b-6froqriht4] { margin: 0; color: var(--muted); }.error-state[b-6froqriht4] { border-color: color-mix(in srgb, #ef6a6a 55%, var(--line)); }
@media (max-width: 850px) { .filter-card[b-6froqriht4] { grid-template-columns: 1fr 1fr; }.filter-card .search[b-6froqriht4] { grid-column: 1 / -1; }.logs-hero[b-6froqriht4] { align-items: flex-start; flex-direction: column; } }
@media (max-width: 520px) { .filter-card[b-6froqriht4] { grid-template-columns: 1fr; }.filter-card .search[b-6froqriht4] { grid-column: auto; }.result-summary[b-6froqriht4] { flex-direction: column; gap: .2rem; } }