/* ============================================================
   STUDIO ROOM — RHYTHM FIX
   Collapses the bloated vertical spacing back to a
   cinematic-dense rhythm. Apply at the END of studio-dashboard.css
   (or as a new block in the monolith <style>).
   ============================================================ */

/* ---- 1. ROOT: single source of truth for section spacing ---- */
.cs-studio-room .cs-dashboard-main.boxed {
    gap: 14px !important;          /* was 20-32 — one tight rhythm */
    padding: 16px 24px 88px;       /* less top, more bottom for sticky player */
}

/* ---- 2. KILL inherited per-section margins ---- */
.cs-studio-room .cs-dashboard-main.boxed > .cs-section,
.cs-studio-room .cs-dashboard-main.boxed > section,
.cs-studio-room .cs-dashboard-main.boxed > .cs-live-room-bar,
.cs-studio-room .cs-dashboard-main.boxed > .cs-track-library,
.cs-studio-room .cs-dashboard-main.boxed > .cs-view-toggle {
    margin: 0 !important;          /* no stray bottom-margin from artist CSS */
    padding-top: 0;
    padding-bottom: 0;
}

/* ---- 3. SECTION HEADERS: tighter bottom spacing ---- */
.cs-studio-room .cs-section-head,
.cs-studio-room .cs-section-header-2027 {
    margin-bottom: 10px !important;   /* was 14-20 */
}

/* ---- 4. HERO: reduce bottom bleed into stats ---- */
.cs-studio-room .cs-dashboard-hero,
.cs-studio-room [class*="hero-2027"],
.cs-studio-room .cs-hero {
    margin-bottom: 0 !important;
}

/* ---- 5. LIVE ROOM BAR: it's already tight — just ensure no extra gap ---- */
.cs-live-room-bar {
    margin: 0 !important;
}

/* ---- 6. STATS STRIP: no top/bottom margin ---- */
.cs-studio-stats {
    margin: 0 !important;
}

/* ---- 7. PLAYER: no extra bottom --- the stats above it flow into it ---- */
.cs-studio-hero-player {
    margin: 0 !important;
}

/* ---- 8. COMMAND DECK: already uses its own gap, no extra margin ---- */
.cs-studio-command-deck {
    margin: 0 !important;
}

/* ---- 9. TRACK LIBRARY: kill inherited section padding ---- */
.cs-studio-room .cs-track-library {
    padding: 12px 0 6px !important;    /* was 28/40 — huge */
    border-radius: 16px;
}

/* ---- 10. PROJECTS: no extra margin ---- */
.cs-section-projects {
    margin: 0 !important;
}

/* ---- 11. VIEW TOGGLE: sits right after projects, no gap ---- */
.cs-studio-room .cs-view-toggle {
    margin: 0 !important;
    margin-top: 4px !important;
}

/* ---- 12. QUICK ACTIONS DOCK: fixed, no flow impact ---- */
.cs-studio-quickdock {
    position: fixed;
    right: 20px;
    bottom: 96px;                  /* above sticky player */
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}
.cs-qd-btn {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: rgba(27,19,51,.92);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    transition: all .2s;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 24px -8px rgba(0,0,0,.6);
    font-family: inherit;
}
.cs-qd-btn:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    color: var(--gold-soft);
    box-shadow: 0 12px 30px -8px var(--glow-gold);
}
.cs-qd-btn--gold   { --c: #F5B301; }
.cs-qd-btn--purple { --c: #9D4DFF; }
.cs-qd-btn--orange { --c: #FF8C42; }
.cs-qd-btn--gold:hover,
.cs-qd-btn--purple:hover,
.cs-qd-btn--orange:hover {
    background: color-mix(in srgb, var(--c) 18%, rgba(27,19,51,.92));
    border-color: var(--c);
    color: var(--c);
}

/* ---- 13. TIGHTER MOBILE RHYTHM ---- */
@media (max-width: 900px) {
    .cs-studio-room .cs-dashboard-main.boxed {
        gap: 12px !important;
        padding: 12px 16px 80px;
    }
    .cs-studio-room .cs-track-library { padding: 10px 0 4px !important; }
    .cs-live-room-bar { padding: 10px 12px; gap: 10px; }
    .cs-lr-vu { display: none; }   /* hide VU on small screens */
}
@media (max-width: 480px) {
    .cs-studio-room .cs-dashboard-main.boxed {
        gap: 10px !important;
        padding: 10px 12px 76px;
    }
    .cs-live-room-bar { grid-template-columns: auto 1fr; }
    .cs-lr-actions { grid-column: 1 / -1; display: flex; gap: 6px; }
}